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

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tay1orjones

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

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

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

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