feat(colors): update background tokens to be compatible with layers (#…

…10954) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 11, 2022 · 6b0e702 · 6b0e702
1 parent 05b57e9
commit 6b0e702
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 17 deletions.
diff --git a/packages/themes/src/next/g10.js b/packages/themes/src/next/g10.js
@@ -47,11 +47,11 @@ import { adjustAlpha } from '../tools';
 export const background = gray10;
 export const backgroundInverse = gray80;
 export const backgroundBrand = blue60;
-export const backgroundActive = gray30;
-export const backgroundHover = gray10Hover;
+export const backgroundActive = adjustAlpha(gray50, 0.5);
+export const backgroundHover = adjustAlpha(gray50, 0.12);
 export const backgroundInverseHover = gray80Hover;
-export const backgroundSelected = gray20;
-export const backgroundSelectedHover = gray20Hover;
+export const backgroundSelected = adjustAlpha(gray50, 0.2);
+export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
 
 // Layer
 // layer-01

diff --git a/packages/themes/src/next/g100.js b/packages/themes/src/next/g100.js
@@ -46,7 +46,6 @@ import {
 
   // Tools
   rgba,
-  gray100Hover,
   gray10Hover,
 } from '@carbon/colors';
 import { adjustLightness, adjustAlpha } from '../tools';
@@ -55,11 +54,11 @@ import { adjustLightness, adjustAlpha } from '../tools';
 export const background = gray100;
 export const backgroundInverse = gray10;
 export const backgroundBrand = blue60;
-export const backgroundActive = gray80;
-export const backgroundHover = gray100Hover;
+export const backgroundActive = adjustAlpha(gray50, 0.4);
+export const backgroundHover = adjustAlpha(gray50, 0.16);
 export const backgroundInverseHover = gray10Hover;
-export const backgroundSelected = gray90;
-export const backgroundSelectedHover = gray90Hover;
+export const backgroundSelected = adjustAlpha(gray50, 0.24);
+export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
 
 // Layer
 // layer-01

diff --git a/packages/themes/src/next/g90.js b/packages/themes/src/next/g90.js
@@ -54,11 +54,11 @@ import { adjustAlpha } from '../tools';
 export const background = gray90;
 export const backgroundInverse = gray10;
 export const backgroundBrand = blue60;
-export const backgroundActive = gray80;
-export const backgroundHover = gray90Hover;
+export const backgroundActive = adjustAlpha(gray50, 0.4);
+export const backgroundHover = adjustAlpha(gray50, 0.16);
 export const backgroundInverseHover = gray10Hover;
-export const backgroundSelected = gray80;
-export const backgroundSelectedHover = gray80Hover;
+export const backgroundSelected = adjustAlpha(gray50, 0.24);
+export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
 
 // Layer
 // layer-01

diff --git a/packages/themes/src/next/white.js b/packages/themes/src/next/white.js
@@ -47,11 +47,11 @@ import { adjustAlpha } from '../tools';
 export const background = white;
 export const backgroundInverse = gray80;
 export const backgroundBrand = blue60;
-export const backgroundActive = gray30;
-export const backgroundHover = whiteHover;
+export const backgroundActive = adjustAlpha(gray50, 0.5);
+export const backgroundHover = adjustAlpha(gray50, 0.12);
 export const backgroundInverseHover = gray80Hover;
-export const backgroundSelected = gray20;
-export const backgroundSelectedHover = gray20Hover;
+export const backgroundSelected = adjustAlpha(gray50, 0.2);
+export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
 
 // Layer
 // layer-01