From fe08674fa4a593d43fbbcc03a89b4f15c428b315 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Thu, 10 Mar 2022 14:31:16 -0600
Subject: [PATCH] feat(colors): update background tokens to be compatible with
 layers

---
 packages/themes/src/next/g10.js   | 8 ++++----
 packages/themes/src/next/g100.js  | 9 ++++-----
 packages/themes/src/next/g90.js   | 8 ++++----
 packages/themes/src/next/white.js | 8 ++++----
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/themes/src/next/g10.js b/packages/themes/src/next/g10.js
index dde98ef6be61..a710cd4627a5 100644
--- 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
index d82f6e60a979..128de3d20481 100644
--- 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
index 981b82693f7e..4c0f50cf4cf0 100644
--- 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
index 7730ba0c6a28..b3a27bbf3ef4 100644
--- 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