Merge pull request #156 from US-CBP/Badges-Tags-and-Chips-dark-mode

Badges tags and chips dark mode
US-CBP · Jul 9, 2024 · 1be336c · 1be336c
2 parents aee9fb7 + 60d6384
commit 1be336c
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 13 deletions.
diff --git a/packages/web-components/src/components/cbp-badge/cbp-badge.scss b/packages/web-components/src/components/cbp-badge/cbp-badge.scss
@@ -1,11 +1,25 @@
 /**
  * @Prop --cbp-badge-color: var(--cbp-color-text-lightest);
+ * @Prop --cbp-badge-color: var(--cbp-color-text-lightest);
+ * @Prop --cbp-badge-color-dark: var(--cbp-color-text-darkest);
  * @Prop --cbp-badge-color-background: var(--cbp-color-info-base);
+ * @Prop --cbp-badge-color-background-dark: var( --cbp-color-interactive-secondary-lighter); 
  */
 :root{
   --cbp-badge-color: var(--cbp-color-text-lightest);
+  --cbp-badge-color-dark: var(--cbp-color-text-darkest);
   --cbp-badge-color-background: var(--cbp-color-info-base);
+  --cbp-badge-color-background-dark: var( --cbp-color-interactive-secondary-lighter); 
+}
+
+[data-cbp-theme=light] cbp-badge[context*=dark]:not([context=light-always]),
+[data-cbp-theme=dark] cbp-badge:not([context=dark-inverts]):not([context=light-always]) {
+  --cbp-badge-color: var(--cbp-badge-color-dark);
+  --cbp-badge-color-background: var(--cbp-badge-color-background-dark);
+
+  --cbp-badge-color-background-danger: var(--cbp-badge-color-background-danger-dark);
 }
+
 cbp-badge {
   display: inline-block;
   width: var(--cbp-space-6x);
@@ -20,6 +34,7 @@ cbp-badge {
   line-height: var(--cbp-space-6x);
 
   &[color=danger] {
-    --cbp-badge-color-background: var(--cbp-color-danger-base);
+    --cbp-badge-color-background: var(--cbp-color-danger-dark);
+    --cbp-badge-color-background-dark: var(--cbp-color-danger-light);
   }
 }
diff --git a/packages/web-components/src/components/cbp-badge/cbp-badge.stories.tsx b/packages/web-components/src/components/cbp-badge/cbp-badge.stories.tsx
@@ -12,6 +12,10 @@ export default {
       control: { type: 'select' },
       options: ['default', 'danger'],
     },
+    context : {
+      control: 'select',
+      options: [ "light-inverts", "light-always", "dark-inverts", "dark-always"]
+    },
     sx: {
       description: 'Supports adding inline styles as an object of key-value pairs comprised of CSS properties and values. Values should reference design tokens when possible.',
       control: 'object',
@@ -22,10 +26,11 @@ export default {
   },
 };
 
-const BadgeTemplate = ({ label, color, sx }) => {
+const BadgeTemplate = ({ label, color, context, sx }) => {
   return ` 
     <cbp-badge
       ${color ? `color=${color}` : ''}
+      ${context && context != 'light-inverts' ? `context=${context}` : ''}
       ${sx ? `sx=${JSON.stringify(sx)}` : ''}
     >
       ${label}

diff --git a/packages/web-components/src/components/cbp-badge/cbp-badge.tsx b/packages/web-components/src/components/cbp-badge/cbp-badge.tsx
@@ -11,6 +11,9 @@ export class CbpBadge {
 
   @Prop({ reflect: true }) color: 'default' | 'danger';
 
+  /** Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified. */
+  @Prop({ reflect: true }) context: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
+
   /** Supports adding inline styles as an object */
   @Prop() sx: any = {};
 

diff --git a/packages/web-components/src/components/cbp-chip/cbp-chip.scss b/packages/web-components/src/components/cbp-chip/cbp-chip.scss
@@ -1,19 +1,66 @@
 /**
  * @Prop --cbp-chip-color-text: var(--cbp-color-text-lightest);
+ * @Prop --cbp-chip-color-text-dark: var(--cbp-color-text-darker);
+ * @Prop --cbp-chip-color-text-hover: var(--cbp-color-text-lightest);
+ * @Prop --cbp-chip-color-text-hover-dark: var(--cbp-color-text-lightest);
  * @Prop --cbp-chip-color-text-focus: var(--cbp-color-text-lightest);
+ * @Prop --cbp-chip-color-text-focus-dark: var(--cbp-color-text-darkest);
  * @Prop --cbp-chip-color-text-pressed: var(--cbp-color-text-lightest);
+ * @Prop --cbp-chip-color-text-pressed-dark: var(--cbp-color-text-darkest);
  * @Prop --cbp-chip-color-background: var(--cbp-color-interactive-secondary-dark);
+ * @Prop --cbp-chip-color-background-dark:  var(--cbp-color-interactive-secondary-lighter);
+ * @Prop --cbp-chip-color-background-hover: var(--cbp-color-interactive-secondary-darker);
+ * @Prop --cbp-chip-color-background-hover-dark:  var(--cbp-color-interactive-secondary-base);
  * @Prop --cbp-chip-color-background-focus: var(--cbp-color-interactive-focus-dark);
+ * @Prop --cbp-chip-color-background-focus-dark: var(--cbp-color-interactive-focus-light);
+ * @Prop --cbp-chip-icon-color-background-focus: transparent;
+ * @Prop --cbp-chip-icon-color-background-focus-dark: var(--cbp-color-interactive-focus-dark);
  * @Prop --cbp-chip-color-background-pressed: var(--cbp-color-interactive-selected-dark);
+ * @Prop --cbp-chip-color-background-pressed-dark: var(--cbp-color-interactive-focus-light); 
+ * @Prop --cbp-chip-icon-color-outline-focus: var(--cbp-color-white);
+ * @Prop --cbp-chip-icon-color-outline-focus-dark: transparent;
  */
-:root {
+:root { 
   --cbp-chip-color-text: var(--cbp-color-text-lightest);
+  --cbp-chip-color-text-dark: var(--cbp-color-text-darker);
+  --cbp-chip-color-text-hover: var(--cbp-color-text-lightest);
+  --cbp-chip-color-text-hover-dark: var(--cbp-color-text-lightest);
   --cbp-chip-color-text-focus: var(--cbp-color-text-lightest);
+  --cbp-chip-color-text-focus-dark: var(--cbp-color-text-darkest);
   --cbp-chip-color-text-pressed: var(--cbp-color-text-lightest);
+  --cbp-chip-color-text-pressed-dark: var(--cbp-color-text-darkest);
+
 
   --cbp-chip-color-background: var(--cbp-color-interactive-secondary-dark);
+  --cbp-chip-color-background-dark:  var(--cbp-color-interactive-secondary-lighter);
+  --cbp-chip-color-background-hover: var(--cbp-color-interactive-secondary-darker);
+  --cbp-chip-color-background-hover-dark:  var(--cbp-color-interactive-secondary-base);
   --cbp-chip-color-background-focus: var(--cbp-color-interactive-focus-dark);
+  --cbp-chip-color-background-focus-dark: var(--cbp-color-interactive-focus-light);
+  --cbp-chip-icon-color-background-focus: transparent;
+  --cbp-chip-icon-color-background-focus-dark: var(--cbp-color-interactive-focus-dark);
   --cbp-chip-color-background-pressed: var(--cbp-color-interactive-selected-dark);
+  --cbp-chip-color-background-pressed-dark: var(--cbp-color-interactive-focus-light);
+
+  --cbp-chip-icon-color-outline-focus: var(--cbp-color-white);
+  --cbp-chip-icon-color-outline-focus-dark: transparent;
+}
+
+[data-cbp-theme=light] cbp-chip[context*=dark]:not([context=light-always]),
+[data-cbp-theme=dark] cbp-chip:not([context=dark-inverts]):not([context=light-always]) {
+
+  --cbp-chip-color-text: var(--cbp-chip-color-text-dark);
+  --cbp-chip-color-text-hover: var(--cbp-chip-color-text-hover-dark);
+  --cbp-chip-color-text-focus: var(--cbp-chip-color-text-focus-dark);
+  --cbp-chip-color-text-pressed: var(--cbp-chip-color-text-pressed-dark);
+
+  --cbp-chip-color-background: var(--cbp-chip-color-background-dark); 
+  --cbp-chip-color-background-hover: var(--cbp-chip-color-background-hover-dark);
+  --cbp-chip-color-background-focus: var(--cbp-chip-color-background-focus-dark);
+  --cbp-chip-icon-color-background-focus: var(--cbp-chip-icon-color-background-focus-dark);
+  --cbp-chip-color-background-pressed: var(--cbp-chip-color-background-pressed-dark);
+
+  --cbp-chip-icon-color-outline-focus: var(--cbp-chip-icon-color-outline-focus-dark);
 }
 
 cbp-chip {
@@ -57,8 +104,9 @@ cbp-chip {
 
     // Selected
     &[aria-pressed=true] {
-      background-color: var(--cbp-color-interactive-selected-dark);
-
+      background-color: var(--cbp-chip-color-background-pressed);
+      color: var(--cbp-chip-color-text-pressed);
+
       .cbp-chip__label + cbp-icon>svg {
         transform: rotate(-135deg);
       }
@@ -69,18 +117,20 @@ cbp-chip {
       cursor: pointer;
 
       .cbp-chip__label + cbp-icon {
-        background-color: #454540; // ToDo
+        color: var(--cbp-chip-color-text-hover);
+        background-color: var(--cbp-chip-color-background-hover);
       }
     }
 
     &:focus-visible {
-      background-color: var(--cbp-color-interactive-focus-dark);
+      background-color: var(--cbp-chip-color-background-focus);
       outline: 0;
 
       > .cbp-chip__label + cbp-icon {
-        background-color: transparent;
+        background-color: var(--cbp-chip-icon-color-background-focus);
         border-color: var(--cbp-color-white);
-        outline: var(--cbp-border-size-md) solid var(--cbp-color-white);
+        outline: var(--cbp-border-size-md) solid var(--cbp-chip-icon-color-outline-focus);
+        color: var(--cbp-color-text-lightest);
         outline-offset: -4px;
       }
     }

diff --git a/packages/web-components/src/components/cbp-chip/cbp-chip.stories.tsx b/packages/web-components/src/components/cbp-chip/cbp-chip.stories.tsx
@@ -17,6 +17,10 @@ export default {
       description: 'The initial active/selected state.',
       control: 'boolean',
     },
+    context : {
+      control: 'select',
+      options: [ "light-inverts", "light-always", "dark-inverts", "dark-always"]
+    },
     sx: {
       description: 'Supports adding inline styles as an object of key-value pairs comprised of CSS properties and values. Values should reference design tokens when possible.',
       control: 'object',
@@ -27,12 +31,13 @@ export default {
   },
 };
 
-const Template = ({ label, name, value, pressed, sx }) => {
+const Template = ({ label, name, value, pressed, context, sx }) => {
   return ` 
       <cbp-chip
         ${name ? `name="${name}"` : ''}
         ${value ? `value="${value}"` : ''}
         ${pressed ? 'pressed' : ''}
+        ${context && context != 'light-inverts' ? `context=${context}` : ''}
         ${sx ? `sx=${JSON.stringify(sx)}` : ''}
       >
         ${label}

diff --git a/packages/web-components/src/components/cbp-chip/cbp-chip.tsx b/packages/web-components/src/components/cbp-chip/cbp-chip.tsx
@@ -22,6 +22,9 @@ export class CbpChip {
   /** Specifies the pressed state of the button and `aria-pressed` attribute of the rendered button */
   @Prop() pressed: boolean;
 
+  /** Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified. */
+  @Prop({ reflect: true }) context: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
+
   /** Supports adding inline styles as an object */
   @Prop() sx: any = {};
 

diff --git a/packages/web-components/src/components/cbp-tag/cbp-tag.scss b/packages/web-components/src/components/cbp-tag/cbp-tag.scss
@@ -1,11 +1,23 @@
 /**
  * @Prop --cbp-tag-color: var(--cbp-color-text-lighter);
- * @Prop --cbp-tag-color-background: var(--cbp-tag-color-background);
+ * @Prop --cbp-tag-color-dark: var(--cbp-color-info-darker);
+ * @Prop --cbp-tag-color-background: var(--cbp-color-info-dark);
+ * @Prop --cbp-tag-color-background-dark: var(--cbp-color-info-light);
  */
  :root{
   --cbp-tag-color: var(--cbp-color-info-lighter);
+  --cbp-tag-color-dark: var(--cbp-color-info-darker);
+
   --cbp-tag-color-background: var(--cbp-color-info-dark);
+  --cbp-tag-color-background-dark: var(--cbp-color-info-light);
+}
+
+[data-cbp-theme=light] cbp-tag[context*=dark]:not([context=light-always]),
+[data-cbp-theme=dark] cbp-tag:not([context=dark-inverts]):not([context=light-always]) {
+  --cbp-tag-color: var(--cbp-tag-color-dark);
+  --cbp-tag-color-background: var(--cbp-tag-color-background-dark);
 }
+
 cbp-tag {
   display: inline-flex;
   color: var(--cbp-tag-color);
@@ -22,16 +34,25 @@ cbp-tag {
 
   &[color=warning] {
     --cbp-tag-color: var(--cbp-color-text-darker);
+    --cbp-tag-color-dark: var(--cbp-color-info-darker);
+
     --cbp-tag-color-background: var(--cbp-color-warning-base);
+    --cbp-tag-color-background-dark: var(--cbp-color-warning-light);
   }
 
   &[color=success] {
     --cbp-tag-color: var(--cbp-color-success-lighter);
-    --cbp-tag-color-background: var(--cbp-color-success-dark);
+    --cbp-tag-color-dark: var(-cbp-color-success-darker);
+
+    --cbp-tag-color-background: var(--cbp-color-info-dark);
+    --cbp-tag-color-background-dark: var(--cbp-color-success-light);
   }
 
   &[color=danger] {
     --cbp-tag-color: var(--cbp-color-text-lightest);
+    --cbp-tag-color-dark: var(--cbp-color-text-darkest);
+
     --cbp-tag-color-background: var(--cbp-color-danger-base);
+    --cbp-tag-color-background-dark: var(--cbp-color-danger-light);
   }
 }
diff --git a/packages/web-components/src/components/cbp-tag/cbp-tag.stories.tsx b/packages/web-components/src/components/cbp-tag/cbp-tag.stories.tsx
@@ -15,6 +15,10 @@ export default {
     withIcon: {
       control: 'boolean',
     },
+    context : {
+      control: 'select',
+      options: [ "light-inverts", "light-always", "dark-inverts", "dark-always"]
+    },
     sx: {
       description: 'Supports adding inline styles as an object of key-value pairs comprised of CSS properties and values. Values should reference design tokens when possible.',
       control: 'object',
@@ -25,7 +29,7 @@ export default {
   },
 };
 
-const Template = ({ label, color, withIcon, sx }) => {
+const Template = ({ label, color, withIcon, context, sx }) => {
   const Icons = {
     default: 'circle-info',
     danger: 'circle-xmark',
@@ -37,6 +41,7 @@ const Template = ({ label, color, withIcon, sx }) => {
   return ` 
     <cbp-tag
       ${color && color != 'default' ? `color=${color}` : ''}
+      ${context && context != 'light-inverts' ? `context=${context}` : ''}
       ${sx ? `sx=${JSON.stringify(sx)}` : ''}
     >
       ${Icon ? `<cbp-icon name="${Icon}" sx='{"margin-right":"var(--cbp-space-2x)"}'></cbp-icon>` : ''}

diff --git a/packages/web-components/src/components/cbp-tag/cbp-tag.tsx b/packages/web-components/src/components/cbp-tag/cbp-tag.tsx
@@ -11,6 +11,9 @@ export class CbpTag {
 
   @Prop({ reflect: true }) color: 'default' | 'danger' | 'success' | 'warning';
 
+  /** Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified. */
+  @Prop({ reflect: true }) context: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
+
   /** Supports adding inline styles as an object */
   @Prop() sx: any = {};