fix(theme): update tokens to correct values (#10525)

* fix(theme): update g100 tokens to correct values * fix(theme): update white tokens to correct values * fix(theme): update g10 tokens to correct values * fix(theme): update g90 tokens to correct values * fix(theme): update g100 tokens to correct values * fix(theme): update button tokens to correct values * fix(themes): ensure correct token names are populated when there are collisions for white theme values Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jan 27, 2022 · d0c0791 · d0c0791
1 parent 4035903
commit d0c0791
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 62 deletions.
diff --git a/packages/styles/scss/components/button/_tokens.scss b/packages/styles/scss/components/button/_tokens.scss
@@ -230,15 +230,15 @@ $button-tertiary-active: (
 ) !default;
 
 $button-danger-hover: (
-  fallback: #b81921,
+  fallback: #b81922,
   values: (
     (
       theme: themes.$white,
-      value: #b81921,
+      value: #b81922,
     ),
     (
       theme: themes.$g10,
-      value: #b81921,
+      value: #b81922,
     ),
     (
       theme: themes.$g90,
@@ -252,59 +252,59 @@ $button-danger-hover: (
 ) !default;
 
 $button-primary-hover: (
-  fallback: #0353e9,
+  fallback: #0050e6,
   values: (
     (
       theme: themes.$white,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g10,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g90,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g100,
-      value: #0353e9,
+      value: #0050e6,
     ),
   ),
 ) !default;
 
 $button-secondary-hover: (
-  fallback: #4c4c4c,
+  fallback: #474747,
   values: (
     (
       theme: themes.$white,
-      value: #4c4c4c,
+      value: #474747,
     ),
     (
       theme: themes.$g10,
-      value: #4c4c4c,
+      value: #474747,
     ),
     (
       theme: themes.$g90,
-      value: #606060,
+      value: #5e5e5e,
     ),
     (
       theme: themes.$g100,
-      value: #606060,
+      value: #5e5e5e,
     ),
   ),
 ) !default;
 
 $button-tertiary-hover: (
-  fallback: #0353e9,
+  fallback: #0050e6,
   values: (
     (
       theme: themes.$white,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g10,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g90,

diff --git a/packages/themes/examples/preview-v11/src/pages/index.js b/packages/themes/examples/preview-v11/src/pages/index.js
@@ -222,7 +222,7 @@ export default function IndexPage() {
                             <span>
                               {getColorByValue(
                                 themes.white[exportName],
-                                'white'
+                                'gray'
                               )}
                             </span>
                             <span className="hex-value">

diff --git a/packages/themes/src/next/g10.js b/packages/themes/src/next/g10.js
@@ -23,6 +23,7 @@ import {
   gray60,
   gray70,
   gray80,
+  gray80Hover,
   gray100,
 
   // Support
@@ -39,17 +40,17 @@ import {
   white,
   whiteHover,
 } from '@carbon/colors';
-import { adjustLightness, adjustAlpha } from '../tools';
+import { adjustAlpha } from '../tools';
 
 // Background
 export const background = gray10;
 export const backgroundInverse = gray80;
 export const backgroundBrand = blue60;
 export const backgroundActive = gray30;
-export const backgroundHover = adjustLightness(background, -5);
-export const backgroundInverseHover = adjustLightness(backgroundInverse, 6);
+export const backgroundHover = gray10Hover;
+export const backgroundInverseHover = gray80Hover;
 export const backgroundSelected = gray20;
-export const backgroundSelectedHover = adjustLightness(backgroundSelected, -6);
+export const backgroundSelectedHover = gray20Hover;
 
 // Layer
 // layer-01
@@ -81,17 +82,17 @@ export const layerSelectedDisabled = gray50;
 // layer-accent-01
 export const layerAccent01 = gray20;
 export const layerAccentActive01 = gray40;
-export const layerAccentHover01 = adjustLightness(layerAccent01, -6);
+export const layerAccentHover01 = gray20Hover;
 
 // layer-accent-02
 export const layerAccent02 = gray20;
 export const layerAccentActive02 = gray40;
-export const layerAccentHover02 = adjustLightness(layerAccent01, -6);
+export const layerAccentHover02 = gray20Hover;
 
 // layer-accent-03
 export const layerAccent03 = gray20;
 export const layerAccentActive03 = gray40;
-export const layerAccentHover03 = adjustLightness(layerAccent01, -6);
+export const layerAccentHover03 = gray20Hover;
 
 // Field
 // field-01
@@ -163,7 +164,7 @@ export const iconSecondary = gray70;
 export const iconInverse = white;
 export const iconOnColor = white;
 export const iconOnColorDisabled = gray50;
-export const iconDisabled = gray30;
+export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
 
 // Support
 export const supportError = red60;
@@ -184,7 +185,7 @@ export const focusInset = white;
 export const focusInverse = white;
 
 // Skeleton
-export const skeletonBackground = adjustLightness(background, -5);
+export const skeletonBackground = gray10Hover;
 export const skeletonElement = gray30;
 
 // Misc

diff --git a/packages/themes/src/next/g100.js b/packages/themes/src/next/g100.js
@@ -7,9 +7,10 @@
 
 import {
   // Blue
-  blue20,
   blue40,
   blue60,
+  blue70,
+  blue80,
 
   // Gray
   gray10,
@@ -33,7 +34,7 @@ import {
   green50,
   yellow30,
   orange40,
-  red30,
+  red40,
   red50,
   red60,
   purple40,
@@ -45,6 +46,8 @@ import {
 
   // Tools
   rgba,
+  gray100Hover,
+  gray10Hover,
 } from '@carbon/colors';
 import { adjustLightness, adjustAlpha } from '../tools';
 
@@ -53,16 +56,16 @@ export const background = gray100;
 export const backgroundInverse = gray10;
 export const backgroundBrand = blue60;
 export const backgroundActive = gray80;
-export const backgroundHover = adjustLightness(background, 7);
-export const backgroundInverseHover = adjustLightness(backgroundInverse, -5);
+export const backgroundHover = gray100Hover;
+export const backgroundInverseHover = gray10Hover;
 export const backgroundSelected = gray90;
-export const backgroundSelectedHover = adjustLightness(backgroundSelected, 5);
+export const backgroundSelectedHover = gray90Hover;
 
 // Layer
 // layer-01
 export const layer01 = gray90;
 export const layerActive01 = gray70;
-export const layerHover01 = adjustLightness(layer01, 5);
+export const layerHover01 = gray90Hover;
 export const layerSelected01 = gray80;
 export const layerSelectedHover01 = gray80Hover;
 
@@ -88,7 +91,7 @@ export const layerSelectedDisabled = gray40;
 // layer-accent-01
 export const layerAccent01 = gray80;
 export const layerAccentActive01 = gray60;
-export const layerAccentHover01 = adjustLightness(layerAccent01, 6);
+export const layerAccentHover01 = gray80Hover;
 
 // layer-accent-02
 export const layerAccent02 = gray70;
@@ -151,7 +154,7 @@ export const textPrimary = gray10;
 export const textSecondary = gray30;
 export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
 export const textHelper = gray40;
-export const textError = red30;
+export const textError = red40;
 export const textInverse = gray100;
 export const textOnColor = white;
 export const textOnColorDisabled = adjustAlpha(textOnColor, 0.25);
@@ -170,7 +173,7 @@ export const iconSecondary = gray30;
 export const iconInverse = gray100;
 export const iconOnColor = white;
 export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
-export const iconDisabled = gray70;
+export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
 
 // Support
 export const supportError = red50;
@@ -180,7 +183,7 @@ export const supportInfo = blue50;
 export const supportErrorInverse = red60;
 export const supportSuccessInverse = green50;
 export const supportWarningInverse = yellow30;
-export const supportInfoInverse = blue60;
+export const supportInfoInverse = blue70;
 export const supportCautionMinor = yellow30;
 export const supportCautionMajor = orange40;
 export const supportCautionUndefined = purple50;
@@ -196,9 +199,9 @@ export const skeletonElement = gray80;
 
 // Misc
 export const interactive = blue50;
-export const highlight = blue20;
+export const highlight = blue80;
 export const overlay = rgba(black, 0.65);
-export const toggleOff = gray50;
+export const toggleOff = gray60;
 export const shadow = rgba(black, 0.8);
 
 export {

diff --git a/packages/themes/src/next/g90.js b/packages/themes/src/next/g90.js
@@ -44,24 +44,27 @@ import {
 
   // Tools
   rgba,
+  gray90Hover,
+  gray10Hover,
+  gray80Hover,
 } from '@carbon/colors';
-import { adjustLightness, adjustAlpha } from '../tools';
+import { adjustAlpha } from '../tools';
 
 // Background
 export const background = gray90;
 export const backgroundInverse = gray10;
 export const backgroundBrand = blue60;
 export const backgroundActive = gray80;
-export const backgroundHover = adjustLightness(background, 5);
-export const backgroundInverseHover = adjustLightness(backgroundInverse, -5);
+export const backgroundHover = gray90Hover;
+export const backgroundInverseHover = gray10Hover;
 export const backgroundSelected = gray80;
-export const backgroundSelectedHover = adjustLightness(backgroundSelected, 6);
+export const backgroundSelectedHover = gray80Hover;
 
 // Layer
 // layer-01
 export const layer01 = gray80;
 export const layerActive01 = gray60;
-export const layerHover01 = adjustLightness(layer01, 6);
+export const layerHover01 = gray80Hover;
 export const layerSelected01 = gray70;
 export const layerSelectedHover01 = gray70Hover;
 
@@ -87,12 +90,12 @@ export const layerSelectedDisabled = gray40;
 // layer-accent-01
 export const layerAccent01 = gray70;
 export const layerAccentActive01 = gray50;
-export const layerAccentHover01 = adjustLightness(layerAccent01, 7);
+export const layerAccentHover01 = gray70Hover;
 
 // layer-accent-02
 export const layerAccent02 = gray60;
 export const layerAccentActive02 = gray80;
-export const layerAccentHover02 = adjustLightness(layerAccent01, -7);
+export const layerAccentHover02 = gray60Hover;
 
 // layer-accent-03
 export const layerAccent03 = gray50;
@@ -102,7 +105,7 @@ export const layerAccentHover03 = gray50Hover;
 // Field
 // field-01
 export const field01 = gray80;
-export const fieldHover01 = adjustLightness(field01, 6);
+export const fieldHover01 = gray80Hover;
 
 // field-02
 export const field02 = gray70;
@@ -169,7 +172,7 @@ export const iconSecondary = gray30;
 export const iconInverse = gray100;
 export const iconOnColor = white;
 export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
-export const iconDisabled = gray60;
+export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
 
 // Support
 export const supportError = red40;
@@ -179,7 +182,7 @@ export const supportInfo = blue50;
 export const supportErrorInverse = red60;
 export const supportSuccessInverse = green50;
 export const supportWarningInverse = yellow30;
-export const supportInfoInverse = blue60;
+export const supportInfoInverse = blue70;
 export const supportCautionMinor = yellow30;
 export const supportCautionMajor = orange40;
 export const supportCautionUndefined = purple50;
@@ -190,7 +193,7 @@ export const focusInset = gray100;
 export const focusInverse = blue60;
 
 // Skeleton
-export const skeletonBackground = adjustLightness(background, 5);
+export const skeletonBackground = gray90Hover;
 export const skeletonElement = gray70;
 
 // Misc