feat(): os announcement bar config and styles (#3689)

* feat(): os announcement bar config and styles

* fix(announcement bar): better contrast

Author: jaredcbaum

docusaurus.config.js

@@ -104,6 +104,12 @@ module.exports = {
   ],
   /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
   themeConfig: {
+    announcementBar: {
+      id: 'announcement-bar',
+      content:
+        '<a href="https://www.outsystems.com/?utm_source=ionic&utm_medium=referral&utm_campaign=ionic-referral&utm_term=none&utm_content=other&utm_campaignteam=digital-mktg&utm_partner=none" target="_blank" rel="noopener"><span>An <strong>OutSystems</strong> Company →</span></a>',
+      isCloseable: false,
+    },
     metadata: [
       { name: 'og:image', content: 'https://ionicframework.com/docs/img/meta/open-graph.png' },
       { name: 'twitter:image', content: 'https://ionicframework.com/docs/img/meta/open-graph.png' },

src/styles/custom.scss

@@ -169,7 +169,6 @@ iframe {
   }
 }
 
-
 .cordova-ee-card {
   max-width: 100%;
 }
@@ -188,3 +187,45 @@ iframe {
 .cordova-ee-card p {
   margin: 1rem 0 0;
 }
+
+// OS Announcement Bar
+[class*='announcementBar_'] {
+  --docusaurus-announcement-bar-height: 3.5rem;
+
+  background: linear-gradient(90deg, #440f14, #5e1219 15%, #000 35%, #000 45%, #5e1219 85%, #440f14);
+
+  &:hover,
+  &:focus,
+  &:active {
+    strong {
+      color: var(--c-red-50);
+    }
+  }
+}
+
+[class*='announcementBarContent_'] {
+  padding: 0;
+
+  > a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--docusaurus-announcement-bar-height);
+
+    letter-spacing: 0.01em !important;
+    text-decoration: none !important;
+
+    color: #fff !important;
+
+    font-size: 1.04rem;
+    font-weight: 500;
+
+    strong {
+      font-weight: 500;
+
+      color: var(--c-red-70);
+
+      transition: color 0.2s ease-out;
+    }
+  }
+}