Add banner text color

Author: ibgrav

docs/overviews/overview-advertisers.md

@@ -7,6 +7,8 @@ use_banner: true
 banner_title: UID2 Overview for Advertisers
 banner_description: Upgrade campaign activation with Unified ID 2.0.
 banner_icon: 'advertisers'
+banner_text_color: ''
+banner_text_color_dark: ''
 banner_background_color: ''
 banner_background_color_dark: ''
 displayed_sidebar: sidebarAdvertisers

docs/overviews/overview-data-providers.md

@@ -7,6 +7,8 @@ use_banner: true
 banner_title: UID2 Overview for Data Providers
 banner_description: An identity solution for the future.
 banner_icon: 'dataProviders'
+banner_text_color: ''
+banner_text_color_dark: ''
 banner_background_color: ''
 banner_background_color_dark: ''
 displayed_sidebar: sidebarDataProviders

docs/overviews/overview-dsps.md

@@ -7,6 +7,8 @@ use_banner: true
 banner_title: UID2 Overview for DSPs
 banner_description: Enable data strategies with a more durable identifier.
 banner_icon: 'dsps'
+banner_text_color: ''
+banner_text_color_dark: ''
 banner_background_color: ''
 banner_background_color_dark: ''
 displayed_sidebar: sidebarDSPs

docs/overviews/overview-publishers.md

@@ -7,6 +7,8 @@ use_banner: true
 banner_title: UID2 Overview for Publishers
 banner_description: Maintain audience targeting in the ever-changing advertising industry for better impression monetization and more relevance.
 banner_icon: 'publishers'
+banner_text_color: ''
+banner_text_color_dark: ''
 banner_background_color: ''
 banner_background_color_dark: ''
 displayed_sidebar: sidebarPublishers

src/components/DocsBanner/index.tsx

@@ -19,6 +19,8 @@ type DocsBannerProps = {
   title: string;
   description: string;
   icon?: string;
+  textColor?: string;
+  textColorDark?: string;
   backgroundColor?: string;
   backgroundColorDark?: string;
 };
@@ -27,11 +29,16 @@ export default function DocsBanner({
   title,
   description,
   icon,
+  textColor,
+  textColorDark,
   backgroundColor,
   backgroundColorDark,
 }: DocsBannerProps): JSX.Element {
   const Icon = (icon && icons[icon]) || icons.documents;
 
+  textColor ||= "var(--c-eleven-o-clock)"; // default banner text color
+  textColorDark ||= "var(--c-off-white)"; // default banner text color dark theme
+
   backgroundColor ||= "var(--c-dirty-socks)"; // default banner bg color
   backgroundColorDark ||= "var(--c-primary-gray)"; // default banner bg color dark theme
 
@@ -46,6 +53,8 @@ export default function DocsBanner({
       className={clsx(styles.docsBanner)}
       style={
         {
+          "--text-docs-banner": textColor,
+          "--text-docs-banner-dark": textColorDark,
           "--bg-docs-banner": backgroundColor,
           "--bg-docs-banner-dark": backgroundColorDark,
         } as CSSProperties

src/components/DocsBanner/styles.module.scss

@@ -9,7 +9,7 @@
 
   h1,
   p {
-    color: var(--c-eleven-o-clock);
+    color: var(--text-docs-banner); // var is set in html styles
     text-align: center;
 
     @media only screen and (min-width: 996px) {
@@ -38,7 +38,7 @@
 
     h1,
     p {
-      color: var(--c-off-white);
+      color: var(--text-docs-banner-dark); // var is set in html styles
     }
   }
 }
@@ -55,10 +55,10 @@
 .icon {
   order: 1;
   margin-bottom: 1.3125rem;
-  color: var(--c-eleven-o-clock);
+  color: var(--text-docs-banner); // var is set in html styles
 
   html[data-theme="dark"] & {
-    color: var(--c-off-white);
+    color: var(--text-docs-banner-dark); // var is set in html styles
   }
 
   @media only screen and (min-width: 996px) {

src/theme/DocItem/Layout/index.tsx

@@ -22,6 +22,8 @@ type CustomDocFrontMatter = DocFrontMatter & {
   banner_title?: string;
   banner_description?: string;
   banner_icon?: string;
+  banner_text_color?: string;
+  banner_text_color_dark?: string;
   banner_background_color?: string;
   banner_background_color_dark?: string;
 };
@@ -90,6 +92,8 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
                 title={bannerTitle}
                 description={bannerDescription}
                 icon={customFrontMatter.banner_icon}
+                textColor={customFrontMatter.banner_text_color}
+                textColorDark={customFrontMatter.banner_text_color_dark}
                 backgroundColor={customFrontMatter.banner_background_color}
                 backgroundColorDark={
                   customFrontMatter.banner_background_color_dark