page header theming

Author: guoda-puidokaite

packages/ui-components/src/components/PageHeader/PageHeader.component.tsx

@@ -8,6 +8,7 @@ import DefaultLogo from "../../img/JunoUI_logo.svg"
 
 const pageHeaderStyles = `
   jn:bg-theme-pageheader
+  jn:text-theme-pageheader
   jn:border-theme-pageheader
   jn:border-b-[1px]
   jn:sticky
@@ -106,7 +107,7 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   )
 
   return (
-    <div className={`juno-pageheader theme-dark ${pageHeaderStyles} ${className}`} role="banner" {...props}>
+    <div className={`juno-pageheader ${pageHeaderStyles} ${className}`} role="banner" {...props}>
       <div className={`juno-pageheader-inner ${pageHeaderInnerStyles}`}>
         {href ? <a href={href}>{contentWrapper}</a> : contentWrapper}
       </div>

packages/ui-components/src/global.css

@@ -398,6 +398,7 @@
   --text-color-theme-textinput-autofill: var(--color-textinput-autofill-text);
   --text-color-theme-textinput-autofill-label: var(--color-textinput-autofill-label);
   --text-color-theme-checkbox-checked: var(--color-checkbox-checked-color);
+  --text-color-theme-pageheader: var(--color-pageheader-text);
   --text-color-theme-pageheader-appname-active: var(--color-pageheader-appname-text-active);
   --text-color-theme-pageheader-appname-default: var(--color-pageheader-appname-text-default);
   --text-color-theme-pageheader-appname-hover: var(--color-pageheader-appname-text-hover);
@@ -668,8 +669,9 @@
   /* LT Panel */
   --color-panel-bg: rgb(252 252 252 / 0.8);
   /* LT PageHeader */
-  --color-pageheader-background: var(--color-white);
+  --color-pageheader-background: var(--color-juno-grey-blue-11);
   --color-pageheader-border: var(--color-juno-grey-light-7);
+  --color-pageheader-text: var(--color-text-highest);
   --color-pageheader-appname-text-default: var(--color-text-highest);
   --color-pageheader-appname-text-hover: var(--color-text-highest);
   --color-pageheader-appname-text-active: var(--color-text-highest);
@@ -907,8 +909,9 @@
   /* DT Panel */
   --color-panel-bg: rgb(from var(--color-juno-grey-blue-11) r g b / 0.75);
   /* DT PageHeader */
-  --color-pageheader-background: var(--color-juno-grey-blue-10);
+  --color-pageheader-background: var(--color-juno-grey-blue-11);
   --color-pageheader-border: var(--color-juno-grey-blue-3);
+  --color-pageheader-text: var(--color-text-highest);
   --color-pageheader-appname-text-default: var(--color-text-highest);
   --color-pageheader-appname-text-hover: var(--color-text-highest);
   --color-pageheader-appname-text-active: var(--color-text-highest);

packages/ui-components/src/theme.css

@@ -374,6 +374,7 @@
   --text-color-theme-textinput-autofill: var(--color-textinput-autofill-text);
   --text-color-theme-textinput-autofill-label: var(--color-textinput-autofill-label);
   --text-color-theme-checkbox-checked: var(--color-checkbox-checked-color);
+  --text-color-theme-pageheader: var(--color-pageheader-text);
   --text-color-theme-pageheader-appname-active: var(--color-pageheader-appname-text-active);
   --text-color-theme-pageheader-appname-default: var(--color-pageheader-appname-text-default);
   --text-color-theme-pageheader-appname-hover: var(--color-pageheader-appname-text-hover);
@@ -643,8 +644,9 @@
   /* LT Panel */
   --color-panel-bg: rgb(252 252 252 / 0.8);
   /* LT PageHeader */
-  --color-pageheader-background: var(--color-white);
+  --color-pageheader-background: var(--color-juno-grey-blue-11);
   --color-pageheader-border: var(--color-juno-grey-light-7);
+  --color-pageheader-text: var(--color-text-highest);
   --color-pageheader-appname-text-default: var(--color-text-highest);
   --color-pageheader-appname-text-hover: var(--color-text-highest);
   --color-pageheader-appname-text-active: var(--color-text-highest);
@@ -872,6 +874,7 @@
   /* DT PageHeader */
   --color-pageheader-background: var(--color-juno-grey-blue-11);
   --color-pageheader-border: var(--color-juno-grey-blue-3);
+  --color-pageheader-text: var(--color-text-highest);
   --color-pageheader-appname-text-default: var(--color-text-highest);
   --color-pageheader-appname-text-hover: var(--color-text-highest);
   --color-pageheader-appname-text-active: var(--color-text-highest);