Merge pull request #150 from US-CBP/bugfix/panel-header

Bugfix/panel header
US-CBP · Jun 24, 2024 · 23cd2e9 · 23cd2e9
2 parents 8fb8a14 + 80a6936
commit 23cd2e9
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/packages/web-components/src/components/cbp-drawer/cbp-drawer.stories.tsx b/packages/web-components/src/components/cbp-drawer/cbp-drawer.stories.tsx
@@ -60,7 +60,6 @@ const Template = ({ position, open, uid, accessibilityText, context, sx }) => {
           tag="h3"
           variant="heading-lg"
           id="panelheader"
-          context="dark-always"
         >
           Sidebar Header
         </cbp-typography>
@@ -108,7 +107,6 @@ const UserPreferencesTemplate = ({ position, open, uid, accessibilityText, conte
           tag="h3"
           variant="heading-lg"
           id="panelheader"
-          context="dark-always"
         >
           User Preferences
         </cbp-typography>

diff --git a/packages/web-components/src/components/cbp-panel/cbp-panel.scss b/packages/web-components/src/components/cbp-panel/cbp-panel.scss
@@ -23,7 +23,6 @@
  */
 [data-cbp-theme=light] cbp-panel[context*=dark],
 [data-cbp-theme=dark] cbp-panel:not([context=dark-inverts]):not([context=light-always]) {
-  --cbp-panel-header-color: var(--cbp-color-text-lighter);
   --cbp-panel-header-color-bg: var(--cbp-color-branding-dhs-blue);
   --cbp-panel-header-color-bottom-border: var(--cbp-color-gray-cool-50);
   --cbp-panel-content-color: var(--cbp-color-text-lightest);

diff --git a/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx b/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx
@@ -61,7 +61,6 @@ const PanelTemplate = ({ role, headingLevel, header, headerId, content, ariaLabe
         tag=${headingLevel}
         variant="heading-lg"
         ${headerId ? `id="${headerId}"` : ''}
-        context="dark-always"
       >
         ${showIcon ? '<cbp-icon name="star" sx=\'{"margin-right":"var(--cbp-space-4x)"}\'></cbp-icon>' : ''}${header}
       </cbp-typography

diff --git a/packages/web-components/src/components/cbp-typography/cbp-typography.scss b/packages/web-components/src/components/cbp-typography/cbp-typography.scss
@@ -1,20 +1,25 @@
 :root {
-  --cbp-typography-color-text: inherit;
+  --cbp-typography-color: inherit;
+  --cbp-typography-color-dark: inherit;
   --cbp-typography-color-small-text: var(--cbp-color-text-darkest);
+  --cbp-typography-color-small-text-dark: var(--cbp-color-text-lightest);
   --cbp-typography-color-large-text: var(--cbp-color-text-darker);
+  --cbp-typography-color-large-text-dark: var(--cbp-color-text-lighter);
   --cbp-typography-color-divider-fill: var(--cbp-color-gray-cool-10);
+  --cbp-typography-color-divider-fill-dark: var(--cbp-color-gray-cool-70);
   --cbp-typography-color-divider-underline: var(--cbp-color-gray-cool-30);
+  --cbp-typography-color-divider-underline-dark: var(--cbp-color-gray-cool-50);
 }
 
 // Displays dark design based on mode or context
 // 0,2,1
 // 0,3,1
 [data-cbp-theme=light] cbp-typography[context*=dark],
 [data-cbp-theme=dark] cbp-typography:not([context=dark-inverts]):not([context=light-always]) {
-  --cbp-typography-color-small-text: var(--cbp-color-text-lightest);
-  --cbp-typography-color-large-text: var(--cbp-color-text-lighter);
-  --cbp-typography-color-divider-fill: var(--cbp-color-gray-cool-70);
-  --cbp-typography-color-divider-underline: var(--cbp-color-gray-cool-50);
+  --cbp-typography-color-small-text: var(--cbp-typography-color-small-text-dark);
+  --cbp-typography-color-large-text: var(--cbp-typography-color-large-text-dark);
+  --cbp-typography-color-divider-fill: var(--cbp-typography-color-divider-fill-dark);
+  --cbp-typography-color-divider-underline: var(--cbp-typography-color-divider-underline-dark);
 }
 
 /* Inherits body text:
@@ -24,11 +29,10 @@
     h6 is same as body text, all others are lighter/darker
 */
 cbp-typography {
-  color: inherit;
-  color: var(--cbp-typography-color-small-text);
+  color: var(--cbp-typography-color);
 
   & > * {
-    color: var(--cbp-typography-color-small-text);
+    color: var(--cbp-typography-color);
   }
 
   &[variant=masthead-1] > *,
@@ -38,7 +42,7 @@ cbp-typography {
   &[variant=heading-lg] > *, h3,
   &[variant=heading-md] > *, h4,
   &[variant=heading-sm] > *, h5 {
-    color: var(--cbp-typography-color-large-text);
+    --cbp-typography-color: var(--cbp-typography-color-large-text);
   }