feat(designtokens): added new inverse colors to design tokens

chanzuckerberg · Jan 23, 2025 · e09f7b9 · e09f7b9
1 parent 4ad243b
commit e09f7b9
Show file tree

Hide file tree

Showing 8 changed files with 470 additions and 142 deletions.
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/colors.json b/packages/components/src/common/styles-dictionary/design-tokens/colors.json
@@ -106,18 +106,34 @@
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
+          "border-disabled-inverse": {
+            "value": "{sds.color.primitive.gray.600.value}",
+            "darkValue": "{sds.color.primitive.gray.600.darkValue}"
+          },
           "border-hover": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
+          "border-hover-inverse": {
+            "value": "{sds.color.primitive.gray.50.value}",
+            "darkValue": "{sds.color.primitive.gray.50.darkValue}"
+          },
           "border-inverse": {
+            "value": "{sds.color.primitive.gray.300.value}",
+            "darkValue": "{sds.color.primitive.gray.300.darkValue}"
+          },
+          "border-on-fill": {
             "value": "{sds.color.primitive.gray.50.value}",
             "darkValue": "{sds.color.primitive.gray.50.darkValue}"
           },
           "border-pressed": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
+          "border-pressed-inverse": {
+            "value": "{sds.color.primitive.gray.50.value}",
+            "darkValue": "{sds.color.primitive.gray.50.darkValue}"
+          },
           "border-table": {
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
@@ -158,6 +174,10 @@
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
+          "ornament-disabled-inverse": {
+            "value": "{sds.color.primitive.gray.600.value}",
+            "darkValue": "{sds.color.primitive.gray.600.darkValue}"
+          },
           "ornament-on-fill": {
             "value": "{sds.color.primitive.gray.50.value}",
             "darkValue": "{sds.color.primitive.gray.50.darkValue}"
@@ -194,6 +214,10 @@
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
+          "text-disabled-inverse": {
+            "value": "{sds.color.primitive.gray.600.value}",
+            "darkValue": "{sds.color.primitive.gray.600.darkValue}"
+          },
           "text-primary": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"

diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -1165,9 +1165,13 @@
       "sds-color-semantic-base-background-tertiary": "#494949",
       "sds-color-semantic-base-border": "#cdcdcd",
       "sds-color-semantic-base-border-disabled": "#696969",
+      "sds-color-semantic-base-border-disabled-inverse": "#cdcdcd",
       "sds-color-semantic-base-border-hover": "#ffffff",
-      "sds-color-semantic-base-border-inverse": "#000000",
+      "sds-color-semantic-base-border-hover-inverse": "#000000",
+      "sds-color-semantic-base-border-inverse": "#696969",
+      "sds-color-semantic-base-border-on-fill": "#000000",
       "sds-color-semantic-base-border-pressed": "#ffffff",
+      "sds-color-semantic-base-border-pressed-inverse": "#000000",
       "sds-color-semantic-base-border-table": "#696969",
       "sds-color-semantic-base-divider": "#494949",
       "sds-color-semantic-base-divider-inverse": "#cdcdcd",
@@ -1178,6 +1182,7 @@
       "sds-color-semantic-base-fill-primary": "#000000",
       "sds-color-semantic-base-fill-selected": "#ffffff",
       "sds-color-semantic-base-ornament-disabled": "#696969",
+      "sds-color-semantic-base-ornament-disabled-inverse": "#cdcdcd",
       "sds-color-semantic-base-ornament-on-fill": "#000000",
       "sds-color-semantic-base-ornament-primary": "#ffffff",
       "sds-color-semantic-base-ornament-primary-inverse": "#000000",
@@ -1187,6 +1192,7 @@
       "sds-color-semantic-base-surface": "#000000",
       "sds-color-semantic-base-surface-inverse": "#ffffff",
       "sds-color-semantic-base-text-disabled": "#696969",
+      "sds-color-semantic-base-text-disabled-inverse": "#cdcdcd",
       "sds-color-semantic-base-text-primary": "#ffffff",
       "sds-color-semantic-base-text-primary-inverse": "#000000",
       "sds-color-semantic-base-text-secondary": "#cdcdcd",
@@ -1327,9 +1333,13 @@
       "sds-color-semantic-base-background-tertiary": "#dfdfdf",
       "sds-color-semantic-base-border": "#6c6c6c",
       "sds-color-semantic-base-border-disabled": "#c3c3c3",
+      "sds-color-semantic-base-border-disabled-inverse": "#6c6c6c",
       "sds-color-semantic-base-border-hover": "#000000",
-      "sds-color-semantic-base-border-inverse": "#ffffff",
+      "sds-color-semantic-base-border-hover-inverse": "#ffffff",
+      "sds-color-semantic-base-border-inverse": "#c3c3c3",
+      "sds-color-semantic-base-border-on-fill": "#ffffff",
       "sds-color-semantic-base-border-pressed": "#000000",
+      "sds-color-semantic-base-border-pressed-inverse": "#ffffff",
       "sds-color-semantic-base-border-table": "#c3c3c3",
       "sds-color-semantic-base-divider": "#dfdfdf",
       "sds-color-semantic-base-divider-inverse": "#6c6c6c",
@@ -1340,6 +1350,7 @@
       "sds-color-semantic-base-fill-primary": "#ffffff",
       "sds-color-semantic-base-fill-selected": "#000000",
       "sds-color-semantic-base-ornament-disabled": "#c3c3c3",
+      "sds-color-semantic-base-ornament-disabled-inverse": "#6c6c6c",
       "sds-color-semantic-base-ornament-on-fill": "#ffffff",
       "sds-color-semantic-base-ornament-primary": "#000000",
       "sds-color-semantic-base-ornament-primary-inverse": "#ffffff",
@@ -1349,6 +1360,7 @@
       "sds-color-semantic-base-surface": "#ffffff",
       "sds-color-semantic-base-surface-inverse": "#000000",
       "sds-color-semantic-base-text-disabled": "#c3c3c3",
+      "sds-color-semantic-base-text-disabled-inverse": "#6c6c6c",
       "sds-color-semantic-base-text-primary": "#000000",
       "sds-color-semantic-base-text-primary-inverse": "#ffffff",
       "sds-color-semantic-base-text-secondary": "#6c6c6c",

diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -191,12 +191,20 @@ $sds-color-semantic-base-border: #6c6c6c;
 $sds-color-semantic-base-border-dark: #cdcdcd;
 $sds-color-semantic-base-border-disabled: #c3c3c3;
 $sds-color-semantic-base-border-disabled-dark: #696969;
+$sds-color-semantic-base-border-disabled-inverse: #6c6c6c;
+$sds-color-semantic-base-border-disabled-inverse-dark: #cdcdcd;
 $sds-color-semantic-base-border-hover: #000000;
 $sds-color-semantic-base-border-hover-dark: #ffffff;
-$sds-color-semantic-base-border-inverse: #ffffff;
-$sds-color-semantic-base-border-inverse-dark: #000000;
+$sds-color-semantic-base-border-hover-inverse: #ffffff;
+$sds-color-semantic-base-border-hover-inverse-dark: #000000;
+$sds-color-semantic-base-border-inverse: #c3c3c3;
+$sds-color-semantic-base-border-inverse-dark: #696969;
+$sds-color-semantic-base-border-on-fill: #ffffff;
+$sds-color-semantic-base-border-on-fill-dark: #000000;
 $sds-color-semantic-base-border-pressed: #000000;
 $sds-color-semantic-base-border-pressed-dark: #ffffff;
+$sds-color-semantic-base-border-pressed-inverse: #ffffff;
+$sds-color-semantic-base-border-pressed-inverse-dark: #000000;
 $sds-color-semantic-base-border-table: #c3c3c3;
 $sds-color-semantic-base-border-table-dark: #696969;
 $sds-color-semantic-base-divider: #dfdfdf;
@@ -217,6 +225,8 @@ $sds-color-semantic-base-fill-selected: #000000;
 $sds-color-semantic-base-fill-selected-dark: #ffffff;
 $sds-color-semantic-base-ornament-disabled: #c3c3c3;
 $sds-color-semantic-base-ornament-disabled-dark: #696969;
+$sds-color-semantic-base-ornament-disabled-inverse: #6c6c6c;
+$sds-color-semantic-base-ornament-disabled-inverse-dark: #cdcdcd;
 $sds-color-semantic-base-ornament-on-fill: #ffffff;
 $sds-color-semantic-base-ornament-on-fill-dark: #000000;
 $sds-color-semantic-base-ornament-primary: #000000;
@@ -235,6 +245,8 @@ $sds-color-semantic-base-surface-inverse: #000000;
 $sds-color-semantic-base-surface-inverse-dark: #ffffff;
 $sds-color-semantic-base-text-disabled: #c3c3c3;
 $sds-color-semantic-base-text-disabled-dark: #696969;
+$sds-color-semantic-base-text-disabled-inverse: #6c6c6c;
+$sds-color-semantic-base-text-disabled-inverse-dark: #cdcdcd;
 $sds-color-semantic-base-text-primary: #000000;
 $sds-color-semantic-base-text-primary-dark: #ffffff;
 $sds-color-semantic-base-text-primary-inverse: #ffffff;

diff --git a/packages/components/src/core/NavigationHeader/components/NavigationHeaderPrimaryNav/style.ts b/packages/components/src/core/NavigationHeader/components/NavigationHeaderPrimaryNav/style.ts
@@ -27,7 +27,7 @@ export const PrimaryNavItem = styled(Button)`
       : colors?.base.backgroundSecondary;
 
     const activeBorderColor = hasInvertedStyle
-      ? colors?.base?.borderInverse
+      ? colors?.base?.borderOnFill
       : colors?.accent?.border;
 
     const inactiveBorderColor = hasInvertedStyle
@@ -81,11 +81,11 @@ export const StyledLabel = styled.span`
       : colors?.base.textSecondary;
 
     const activeBorderColor = hasInvertedStyle
-      ? colors?.base?.borderInverse
+      ? colors?.base?.borderOnFill
       : colors?.accent?.border;
 
     const inactiveBorderColor = hasInvertedStyle
-      ? colors?.base.borderInverse
+      ? colors?.base.borderOnFill
       : colors?.base.border;
 
     return `

diff --git a/packages/components/src/core/NavigationHeader/style.ts b/packages/components/src/core/NavigationHeader/style.ts
@@ -184,7 +184,7 @@ export const StyledSearch = styled(InputSearch)`
       .MuiInputBase-root {
         &.Mui-focused {
           fieldset {
-            border-color: ${hasInvertedStyle ? semanticColors?.base?.borderInverse : ""} !important;
+            border-color: ${hasInvertedStyle ? semanticColors?.base?.borderOnFill : ""} !important;
           }
 
           .MuiInputAdornment-root {

diff --git a/packages/components/src/core/styles/common/makeThemeOptions.ts b/packages/components/src/core/styles/common/makeThemeOptions.ts
@@ -33,9 +33,13 @@ export const SDSPaletteLight = (appTheme: AppTheme): SDSPalette => {
       backgroundTertiary: appTheme.colors.gray[200],
       border: appTheme.colors.gray[600],
       borderDisabled: appTheme.colors.gray[300],
+      borderDisabledInverse: appTheme.colors.gray[600],
       borderHover: appTheme.colors.gray[900]!,
-      borderInverse: appTheme.colors.gray[50]!,
+      borderHoverInverse: appTheme.colors.gray[50]!,
+      borderInverse: appTheme.colors.gray[300],
+      borderOnFill: appTheme.colors.gray[50]!,
       borderPressed: appTheme.colors.gray[900]!,
+      borderPressedInverse: appTheme.colors.gray[50]!,
       borderTable: appTheme.colors.gray[300],
       divider: appTheme.colors.gray[200],
       dividerInverse: appTheme.colors.gray[600],
@@ -47,6 +51,7 @@ export const SDSPaletteLight = (appTheme: AppTheme): SDSPalette => {
       fillPrimary: appTheme.colors.gray[50]!,
       fillSelected: appTheme.colors.gray[900]!,
       ornamentDisabled: appTheme.colors.gray[300],
+      ornamentDisabledInverse: appTheme.colors.gray[600],
       ornamentOnFill: appTheme.colors.gray[50]!,
       ornamentPrimary: appTheme.colors.gray[900]!,
       ornamentPrimaryInverse: appTheme.colors.gray[50]!,
@@ -56,6 +61,7 @@ export const SDSPaletteLight = (appTheme: AppTheme): SDSPalette => {
       surface: appTheme.colors.gray[50]!,
       surfaceInverse: appTheme.colors.gray[900]!,
       textDisabled: appTheme.colors.gray[300],
+      textDisabledInverse: appTheme.colors.gray[600],
       textOnFill: appTheme.colors.gray[50]!,
       textPrimary: appTheme.colors.gray[900]!,
       textPrimaryInverse: appTheme.colors.gray[50]!,
@@ -163,9 +169,13 @@ export const SDSPaletteDark = (appTheme: AppTheme): SDSPalette => {
       backgroundTertiary: appTheme.colors.gray[200],
       border: appTheme.colors.gray[600],
       borderDisabled: appTheme.colors.gray[300],
+      borderDisabledInverse: appTheme.colors.gray[600],
       borderHover: appTheme.colors.gray[900]!,
-      borderInverse: appTheme.colors.gray[50]!,
+      borderHoverInverse: appTheme.colors.gray[50]!,
+      borderInverse: appTheme.colors.gray[300],
+      borderOnFill: appTheme.colors.gray[50]!,
       borderPressed: appTheme.colors.gray[900]!,
+      borderPressedInverse: appTheme.colors.gray[50]!,
       borderTable: appTheme.colors.gray[300],
       divider: appTheme.colors.gray[200],
       dividerInverse: appTheme.colors.gray[600],
@@ -177,6 +187,7 @@ export const SDSPaletteDark = (appTheme: AppTheme): SDSPalette => {
       fillPrimary: appTheme.colors.gray[100],
       fillSelected: appTheme.colors.gray[900]!,
       ornamentDisabled: appTheme.colors.gray[300],
+      ornamentDisabledInverse: appTheme.colors.gray[600],
       ornamentOnFill: appTheme.colors.gray[900]!,
       ornamentPrimary: appTheme.colors.gray[900]!,
       ornamentPrimaryInverse: appTheme.colors.gray[50]!,
@@ -186,6 +197,7 @@ export const SDSPaletteDark = (appTheme: AppTheme): SDSPalette => {
       surface: appTheme.colors.gray[100],
       surfaceInverse: appTheme.colors.gray[900]!,
       textDisabled: appTheme.colors.gray[300],
+      textDisabledInverse: appTheme.colors.gray[600],
       textOnFill: appTheme.colors.gray[900]!,
       textPrimary: appTheme.colors.gray[900]!,
       textPrimaryInverse: appTheme.colors.gray[50]!,

diff --git a/packages/components/src/core/styles/common/types.ts b/packages/components/src/core/styles/common/types.ts
@@ -37,6 +37,7 @@ export interface BaseColor {
   textSecondary: string;
   textSecondaryInverse: string;
   textDisabled: string;
+  textDisabledInverse: string;
   textOnFill: string;
   fillHover: string;
   fillPressed: string;
@@ -49,10 +50,15 @@ export interface BaseColor {
   border: string;
   borderInverse: string;
   borderHover: string;
+  borderHoverInverse: string;
+  borderOnFill: string;
   borderPressed: string;
+  borderPressedInverse: string;
   borderDisabled: string;
+  borderDisabledInverse: string;
   borderTable: string;
   ornamentDisabled: string;
+  ornamentDisabledInverse: string;
   ornamentOnFill: string;
   ornamentPrimary: string;
   ornamentPrimaryInverse: string;