From e1e6e3003ed1fda94128cac7673b0b8031a66c1a Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:23:54 -0400
Subject: [PATCH 01/70] chore(alias-tokens): link accordion tokens

---
 .../tokens/component/accordion-tokens.ts      | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/accordion-tokens.ts b/packages/react/src/themes/tokens/component/accordion-tokens.ts
index 561ea139ea..ae2fb51b6d 100644
--- a/packages/react/src/themes/tokens/component/accordion-tokens.ts
+++ b/packages/react/src/themes/tokens/component/accordion-tokens.ts
@@ -14,8 +14,7 @@ export type AccordionTokens =
     | 'accordion-header-disabled-background-color'
     | 'accordion-header-disabled-border-color'
     | 'accordion-header-disabled-text-color'
-    | 'accordion-header-disabled-icon-color'
-    | 'accordion-header-focus-box-shadow-inset-color';
+    | 'accordion-header-disabled-icon-color';
 
 export type AccordionTokenValue = AliasTokens | RefTokens;
 
@@ -24,18 +23,17 @@ export type AccordionTokenMap = {
 };
 
 export const defaultAccordionTokens: AccordionTokenMap = {
-    'accordion-panel-background-color': 'color-neutral-02',
-    'accordion-panel-border-color': 'color-neutral-15',
-    'accordion-panel-text-color': 'color-neutral-90',
-    'accordion-header-background-color': 'color-white',
-    'accordion-header-border-color': 'color-neutral-15',
-    'accordion-header-text-color': 'color-neutral-90',
-    'accordion-header-hover-background-color': 'color-neutral-15',
-    'accordion-header-hover-border-color': 'color-black',
-    'accordion-header-hover-text-color': 'color-black',
-    'accordion-header-disabled-background-color': 'color-neutral-05',
-    'accordion-header-disabled-border-color': 'color-neutral-15',
-    'accordion-header-disabled-text-color': 'color-neutral-30',
-    'accordion-header-disabled-icon-color': 'color-neutral-30',
-    'accordion-header-focus-box-shadow-inset-color': 'color-brand-20',
+    'accordion-panel-background-color': 'color-bg-isolated',
+    'accordion-panel-border-color': 'color-border',
+    'accordion-panel-text-color': 'color-content',
+    'accordion-header-background-color': 'color-bg',
+    'accordion-header-border-color': 'color-border',
+    'accordion-header-text-color': 'color-content',
+    'accordion-header-hover-background-color': 'color-bg-hover',
+    'accordion-header-hover-border-color': 'color-border-hover',
+    'accordion-header-hover-text-color': 'color-content-hover',
+    'accordion-header-disabled-background-color': 'color-bg-disabled',
+    'accordion-header-disabled-border-color': 'color-border-disabled',
+    'accordion-header-disabled-text-color': 'color-content-disabled',
+    'accordion-header-disabled-icon-color': 'color-content-disabled',
 };

From b6ee31fc6c3b53bf9ce976243d2c698c9f588174 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:24:30 -0400
Subject: [PATCH 02/70] chore(alias-tokens): link avatar tokens

---
 packages/react/src/themes/tokens/component/avatar-tokens.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/avatar-tokens.ts b/packages/react/src/themes/tokens/component/avatar-tokens.ts
index c7ebbda025..681730a3f9 100644
--- a/packages/react/src/themes/tokens/component/avatar-tokens.ts
+++ b/packages/react/src/themes/tokens/component/avatar-tokens.ts
@@ -12,6 +12,6 @@ export type AvatarTokenMap = {
 };
 
 export const defaultAvatarTokens: AvatarTokenMap = {
-    'avatar-background-color': 'color-neutral-05',
-    'avatar-text-color': 'color-neutral-65',
+    'avatar-background-color': 'color-bg-neutral-subtle',
+    'avatar-text-color': 'color-content-subtle',
 };

From d1ba8d0a3d2f0174c487d613ec54fbc13e3f89c4 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:25:10 -0400
Subject: [PATCH 03/70] chore(alias-tokens): link badge tokens

---
 packages/react/src/themes/tokens/component/badge-tokens.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/badge-tokens.ts b/packages/react/src/themes/tokens/component/badge-tokens.ts
index 436b70a6a5..33ff9ff6df 100644
--- a/packages/react/src/themes/tokens/component/badge-tokens.ts
+++ b/packages/react/src/themes/tokens/component/badge-tokens.ts
@@ -12,6 +12,6 @@ export type BadgeTokenMap = {
 };
 
 export const defaultBadgeTokens: BadgeTokenMap = {
-    'badge-background-color': 'color-alert-50',
-    'badge-text-color': 'color-white',
+    'badge-background-color': 'color-feedback-bg-alert-bold',
+    'badge-text-color': 'color-content-inverse',
 };

From 891172f4409a3028fd6221f57d7151cf45ffc092 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:39:16 -0400
Subject: [PATCH 04/70] chore(alias-tokens): link button tokens

---
 .../themes/tokens/component/button-tokens.ts  | 168 +++++++++---------
 1 file changed, 84 insertions(+), 84 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/button-tokens.ts b/packages/react/src/themes/tokens/component/button-tokens.ts
index e8ff32bd35..8686a18097 100644
--- a/packages/react/src/themes/tokens/component/button-tokens.ts
+++ b/packages/react/src/themes/tokens/component/button-tokens.ts
@@ -129,133 +129,133 @@ export type ButtonTokenMap = {
 export const defaultButtonTokens: ButtonTokenMap = {
 
     // Primary
-    'button-primary-background-color': 'color-brand-50',
-    'button-primary-border-color': 'color-brand-50',
-    'button-primary-text-color': 'color-white',
+    'button-primary-background-color': 'color-action',
+    'button-primary-border-color': 'color-action',
+    'button-primary-text-color': 'color-action-inverse',
     // Primary hover
-    'button-primary-hover-background-color': 'color-brand-70',
-    'button-primary-hover-border-color': 'color-brand-70',
-    'button-primary-hover-text-color': 'color-white',
+    'button-primary-hover-background-color': 'color-action-hover',
+    'button-primary-hover-border-color': 'color-action-hover',
+    'button-primary-hover-text-color': 'color-action-inverse',
     // Primary disabled
-    'button-primary-disabled-background-color': 'color-brand-20',
-    'button-primary-disabled-border-color': 'color-brand-20',
-    'button-primary-disabled-text-color': 'color-white',
+    'button-primary-disabled-background-color': 'color-action-disabled',
+    'button-primary-disabled-border-color': 'color-action-disabled',
+    'button-primary-disabled-text-color': 'color-action-inverse',
 
     // Primary inverted
-    'button-primary-inverted-background-color': 'color-white',
-    'button-primary-inverted-border-color': 'color-white',
-    'button-primary-inverted-text-color': 'color-brand-50',
+    'button-primary-inverted-background-color': 'color-action-inverse',
+    'button-primary-inverted-border-color': 'color-action-inverse',
+    'button-primary-inverted-text-color': 'color-action',
     // Primary inverted hover
-    'button-primary-inverted-hover-background-color': 'color-white',
-    'button-primary-inverted-hover-border-color': 'color-white',
-    'button-primary-inverted-hover-text-color': 'color-brand-70',
+    'button-primary-inverted-hover-background-color': 'color-action-inverse-hover',
+    'button-primary-inverted-hover-border-color': 'color-action-inverse-hover',
+    'button-primary-inverted-hover-text-color': 'color-action-hover',
     // Primary inverted disabled
-    'button-primary-inverted-disabled-background-color': 'color-white',
-    'button-primary-inverted-disabled-border-color': 'color-white',
-    'button-primary-inverted-disabled-text-color': 'color-brand-20',
+    'button-primary-inverted-disabled-background-color': 'color-action-inverse-disabled',
+    'button-primary-inverted-disabled-border-color': 'color-action-inverse-disabled',
+    'button-primary-inverted-disabled-text-color': 'color-action-disabled',
 
     // Secondary
-    'button-secondary-background-color': 'color-white',
-    'button-secondary-border-color': 'color-brand-50',
-    'button-secondary-text-color': 'color-brand-50',
+    'button-secondary-background-color': 'transparent-100',
+    'button-secondary-border-color': 'color-action',
+    'button-secondary-text-color': 'color-action',
     // Secondary hover
-    'button-secondary-hover-background-color': 'color-white',
-    'button-secondary-hover-border-color': 'color-brand-70',
-    'button-secondary-hover-text-color': 'color-brand-70',
+    'button-secondary-hover-background-color': 'transparent-100',
+    'button-secondary-hover-border-color': 'color-action-hover',
+    'button-secondary-hover-text-color': 'color-action-hover',
     // Secondary disabled
-    'button-secondary-disabled-background-color': 'color-white',
-    'button-secondary-disabled-border-color': 'color-brand-20',
-    'button-secondary-disabled-text-color': 'color-brand-20',
+    'button-secondary-disabled-background-color': 'transparent-100',
+    'button-secondary-disabled-border-color': 'color-action-disabled',
+    'button-secondary-disabled-text-color': 'color-action-disabled',
     // Secondary inverted
     'button-secondary-inverted-background-color': 'transparent-100',
-    'button-secondary-inverted-border-color': 'color-white',
-    'button-secondary-inverted-text-color': 'color-white',
+    'button-secondary-inverted-border-color': 'color-action-inverse',
+    'button-secondary-inverted-text-color': 'color-action-inverse',
     // Secondary inverted hover
     'button-secondary-inverted-hover-background-color': 'transparent-100',
-    'button-secondary-inverted-hover-border-color': 'color-brand-20',
-    'button-secondary-inverted-hover-text-color': 'color-brand-20',
+    'button-secondary-inverted-hover-border-color': 'color-action-inverse-hover',
+    'button-secondary-inverted-hover-text-color': 'color-action-inverse-hover',
     // Secondary inverted disabled
     'button-secondary-inverted-disabled-background-color': 'transparent-100',
-    'button-secondary-inverted-disabled-border-color': 'color-brand-50',
-    'button-secondary-inverted-disabled-text-color': 'color-brand-50',
+    'button-secondary-inverted-disabled-border-color': 'color-action-inverse-disabled',
+    'button-secondary-inverted-disabled-text-color': 'color-action-inverse-disabled',
 
     // Tertiary
     'button-tertiary-background-color': 'transparent-100',
     'button-tertiary-border-color': 'transparent-100',
-    'button-tertiary-text-color': 'color-neutral-65',
+    'button-tertiary-text-color': 'color-content-subtle',
     // Tertiary hover
     'button-tertiary-hover-background-color': 'transparent-dark-15',
     'button-tertiary-hover-border-color': 'transparent-100',
-    'button-tertiary-hover-text-color': 'color-neutral-90',
+    'button-tertiary-hover-text-color': 'color-content-hover',
     // Tertiary disabled
     'button-tertiary-disabled-background-color': 'transparent-100',
     'button-tertiary-disabled-border-color': 'transparent-100',
-    'button-tertiary-disabled-text-color': 'color-neutral-30',
+    'button-tertiary-disabled-text-color': 'color-content-disabled',
 
     // Tertiary inverted
     'button-tertiary-inverted-background-color': 'transparent-100',
     'button-tertiary-inverted-border-color': 'transparent-100',
-    'button-tertiary-inverted-text-color': 'color-white',
+    'button-tertiary-inverted-text-color': 'color-action-inverse',
     // Tertiary inverted hover
     'button-tertiary-inverted-hover-background-color': 'transparent-dark-50',
     'button-tertiary-inverted-hover-border-color': 'transparent-100',
-    'button-tertiary-inverted-hover-text-color': 'color-white',
+    'button-tertiary-inverted-hover-text-color': 'color-action-inverse',
     // Tertiary inverted disabled
     'button-tertiary-inverted-disabled-background-color': 'transparent-100',
     'button-tertiary-inverted-disabled-border-color': 'transparent-100',
-    'button-tertiary-inverted-disabled-text-color': 'color-brand-50',
+    'button-tertiary-inverted-disabled-text-color': 'color-action-inverse-disabled',
 
     // Destructive
-    'button-destructive-primary-background-color': 'color-alert-50',
-    'button-destructive-primary-border-color': 'color-alert-50',
-    'button-destructive-primary-text-color': 'color-white',
+    'button-destructive-primary-background-color': 'color-action-destructive',
+    'button-destructive-primary-border-color': 'color-action-destructive',
+    'button-destructive-primary-text-color': 'color-action-inverse',
     // Destructive hover
-    'button-destructive-primary-hover-background-color': 'color-alert-70',
-    'button-destructive-primary-hover-border-color': 'color-alert-70',
-    'button-destructive-primary-hover-text-color': 'color-white',
+    'button-destructive-primary-hover-background-color': 'color-action-destructive-hover',
+    'button-destructive-primary-hover-border-color': 'color-action-destructive-hover',
+    'button-destructive-primary-hover-text-color': 'color-action-inverse',
     // Destructive disabled
-    'button-destructive-primary-disabled-background-color': 'color-alert-20',
-    'button-destructive-primary-disabled-border-color': 'color-alert-20',
-    'button-destructive-primary-disabled-text-color': 'color-white',
+    'button-destructive-primary-disabled-background-color': 'color-action-destructive-disabled',
+    'button-destructive-primary-disabled-border-color': 'color-action-destructive-disabled',
+    'button-destructive-primary-disabled-text-color': 'color-action-inverse',
 
     // Destructive inverted
-    'button-destructive-primary-inverted-background-color': 'color-white',
-    'button-destructive-primary-inverted-border-color': 'color-white',
-    'button-destructive-primary-inverted-text-color': 'color-alert-50',
+    'button-destructive-primary-inverted-background-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-border-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-text-color': 'color-action-destructive',
     // Destructive inverted hover
-    'button-destructive-primary-inverted-hover-background-color': 'color-white',
-    'button-destructive-primary-inverted-hover-border-color': 'color-white',
-    'button-destructive-primary-inverted-hover-text-color': 'color-alert-70',
+    'button-destructive-primary-inverted-hover-background-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-hover-border-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-hover-text-color': 'color-action-destructive-hover',
     // Destructive inverted disabled
-    'button-destructive-primary-inverted-disabled-background-color': 'color-white',
-    'button-destructive-primary-inverted-disabled-border-color': 'color-white',
-    'button-destructive-primary-inverted-disabled-text-color': 'color-alert-20',
+    'button-destructive-primary-inverted-disabled-background-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-disabled-border-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-disabled-text-color': 'color-action-destructive-disabled',
 
     // Secondary destructive
-    'button-destructive-secondary-background-color': 'color-white',
-    'button-destructive-secondary-border-color': 'color-alert-50',
-    'button-destructive-secondary-text-color': 'color-alert-50',
+    'button-destructive-secondary-background-color': 'transparent-100',
+    'button-destructive-secondary-border-color': 'color-action-destructive',
+    'button-destructive-secondary-text-color': 'color-action-destructive',
     // Secondary destructive hover
-    'button-destructive-secondary-hover-background-color': 'color-white',
-    'button-destructive-secondary-hover-border-color': 'color-alert-70',
-    'button-destructive-secondary-hover-text-color': 'color-alert-70',
+    'button-destructive-secondary-hover-background-color': 'transparent-100',
+    'button-destructive-secondary-hover-border-color': 'color-action-destructive-hover',
+    'button-destructive-secondary-hover-text-color': 'color-action-destructive-hover',
     // Secondary destructive disabled
-    'button-destructive-secondary-disabled-background-color': 'color-white',
-    'button-destructive-secondary-disabled-border-color': 'color-alert-20',
-    'button-destructive-secondary-disabled-text-color': 'color-alert-20',
+    'button-destructive-secondary-disabled-background-color': 'transparent-100',
+    'button-destructive-secondary-disabled-border-color': 'color-action-destructive-disabled',
+    'button-destructive-secondary-disabled-text-color': 'color-action-destructive-disabled',
 
     // Secondary destructive inverted
     'button-destructive-secondary-inverted-background-color': 'transparent-100',
-    'button-destructive-secondary-inverted-border-color': 'color-alert-50',
-    'button-destructive-secondary-inverted-text-color': 'color-alert-50',
+    'button-destructive-secondary-inverted-border-color': 'color-action-destructive',
+    'button-destructive-secondary-inverted-text-color': 'color-action-destructive',
     // Secondary destructive inverted hover
     'button-destructive-secondary-inverted-hover-background-color': 'transparent-100',
-    'button-destructive-secondary-inverted-hover-border-color': 'color-alert-70',
-    'button-destructive-secondary-inverted-hover-text-color': 'color-alert-70',
+    'button-destructive-secondary-inverted-hover-border-color': 'color-action-destructive-hover',
+    'button-destructive-secondary-inverted-hover-text-color': 'color-action-destructive-hover',
     // Secondary destructive inverted disabled
     'button-destructive-secondary-inverted-disabled-background-color': 'transparent-100',
-    'button-destructive-secondary-inverted-disabled-border-color': 'color-alert-20',
-    'button-destructive-secondary-inverted-disabled-text-color': 'color-alert-20',
+    'button-destructive-secondary-inverted-disabled-border-color': 'color-action-destructive-disabled',
+    'button-destructive-secondary-inverted-disabled-text-color': 'color-action-destructive-disabled',
 
     // Tertiary destructive
     'button-destructive-tertiary-background-color': 'transparent-100',
@@ -283,16 +283,16 @@ export const defaultButtonTokens: ButtonTokenMap = {
     'button-destructive-tertiary-inverted-disabled-border-color': 'transparent-100',
     'button-destructive-tertiary-inverted-disabled-text-color': 'color-alert-20',
 
-    // input button
-    'button-input-background-color': 'color-white',
-    'button-input-border-color': 'color-neutral-65',
-    'button-input-text-color': 'color-neutral-65',
-    // input button hover
-    'button-input-hover-background-color': 'color-neutral-15',
-    'button-input-hover-border-color': 'color-black',
-    'button-input-hover-text-color': 'color-black',
-    // input button disabled
-    'button-input-disabled-background-color': 'color-neutral-05',
-    'button-input-disabled-border-color': 'color-neutral-15',
-    'button-input-disabled-text-color': 'color-neutral-30',
+    // Input button
+    'button-input-background-color': 'color-input-bg',
+    'button-input-border-color': 'color-input-border',
+    'button-input-text-color': 'color-input-content',
+    // Input button hover
+    'button-input-hover-background-color': 'color-input-bg-hover',
+    'button-input-hover-border-color': 'color-input-border-hover',
+    'button-input-hover-text-color': 'color-input-content-hover',
+    // Input button disabled
+    'button-input-disabled-background-color': 'color-input-bg-disabled',
+    'button-input-disabled-border-color': 'color-input-border-disabled',
+    'button-input-disabled-text-color': 'color-input-content-disabled',
 };

From 6a411a36ccbb0bb88b23f91a414082989bd35f1d Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:39:46 -0400
Subject: [PATCH 05/70] chore(alias-tokens): link card tokens

---
 .../src/themes/tokens/component/card-tokens.ts     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/card-tokens.ts b/packages/react/src/themes/tokens/component/card-tokens.ts
index f2b0a21826..d82a5f8180 100644
--- a/packages/react/src/themes/tokens/component/card-tokens.ts
+++ b/packages/react/src/themes/tokens/component/card-tokens.ts
@@ -17,11 +17,11 @@ export type CardTokensMap = {
 };
 
 export const defaultCardTokens : CardTokensMap = {
-    'card-background-color': 'color-white',
-    'card-border-color': 'color-neutral-05',
-    'card-text-color': 'color-neutral-90',
-    'card-link-border-color': 'color-neutral-50',
-    'card-link-hover-border-color': 'color-black',
-    'card-link-hover-background-color': 'color-neutral-15',
-    'card-box-shadow-color': 'transparent-dark-20',
+    'card-background-color': 'color-bg',
+    'card-border-color': 'color-border-subtle',
+    'card-text-color': 'color-content',
+    'card-link-border-color': 'color-border-bold',
+    'card-link-hover-border-color': 'color-border-hover',
+    'card-link-hover-background-color': 'color-bg-hover',
+    'card-box-shadow-color': 'color-box-shadow',
 };

From edfc8c97f3bbc420a51c589c0519f45fa1afa25a Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:40:39 -0400
Subject: [PATCH 06/70] chore(alias-tokens): link carousel tokens

---
 .../react/src/themes/tokens/component/carousel-tokens.ts    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/carousel-tokens.ts b/packages/react/src/themes/tokens/component/carousel-tokens.ts
index fdada469d7..3a41f98b35 100644
--- a/packages/react/src/themes/tokens/component/carousel-tokens.ts
+++ b/packages/react/src/themes/tokens/component/carousel-tokens.ts
@@ -15,9 +15,9 @@ export type CarouselTokenMap = {
 };
 
 export const defaultCarouselTokens: CarouselTokenMap = {
-    'carousel-dot-active-background-color': 'color-brand-50',
-    'carousel-dot-inactive-background-color': 'color-neutral-15',
+    'carousel-dot-active-background-color': 'color-bg-indicator',
+    'carousel-dot-inactive-background-color': 'color-bg-empty',
+    'carousel-arrow-icon-color': 'color-content-subtle',
     'carousel-dot-border-color': 'transparent-100',
     'carousel-nav-button-border-color': 'transparent-100',
-    'carousel-arrow-icon-color': 'color-neutral-65',
 };

From 89924f67716319048e268496800259e2cb98d6ef Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:41:06 -0400
Subject: [PATCH 07/70] chore(alias-tokens): link checkbox tokens

---
 .../tokens/component/checkbox-tokens.ts       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/checkbox-tokens.ts b/packages/react/src/themes/tokens/component/checkbox-tokens.ts
index fe56da08eb..00c4bff0b7 100644
--- a/packages/react/src/themes/tokens/component/checkbox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/checkbox-tokens.ts
@@ -20,14 +20,14 @@ export type CheckboxTokenMap = {
 };
 
 export const defaultCheckboxTokens: CheckboxTokenMap = {
-    'checkbox-unchecked-background-color': 'color-white',
-    'checkbox-unchecked-border-color': 'color-neutral-65',
-    'checkbox-checked-icon-color': 'color-white',
-    'checkbox-checked-background-color': 'color-brand-50',
-    'checkbox-checked-border-color': 'color-brand-50',
-    'checkbox-disabled-background-color': 'color-neutral-05',
-    'checkbox-disabled-border-color': 'color-neutral-15',
-    'checkbox-hover-border-color': 'color-neutral-90',
-    'checkbox-hover-background-color': 'color-neutral-15',
-    'checkbox-error-border-color': 'color-alert-50',
+    'checkbox-unchecked-background-color': 'color-input-bg',
+    'checkbox-unchecked-border-color': 'color-input-border',
+    'checkbox-checked-icon-color': 'color-input-content-checked',
+    'checkbox-checked-background-color': 'color-input-bg-checked',
+    'checkbox-checked-border-color': 'color-input-border-checked',
+    'checkbox-disabled-background-color': 'color-input-bg-disabled',
+    'checkbox-disabled-border-color': 'color-input-border-disabled',
+    'checkbox-hover-border-color': 'color-input-border-hover',
+    'checkbox-hover-background-color': 'color-input-bg-hover',
+    'checkbox-error-border-color': 'color-input-border-error',
 };

From 96e6ab6e70686f335f983fb0d3dd53840e52ab68 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:41:48 -0400
Subject: [PATCH 08/70] chore(alias-tokens): link chooser tokens

---
 .../themes/tokens/component/chooser-tokens.ts | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/chooser-tokens.ts b/packages/react/src/themes/tokens/component/chooser-tokens.ts
index bf125893fe..4743958041 100644
--- a/packages/react/src/themes/tokens/component/chooser-tokens.ts
+++ b/packages/react/src/themes/tokens/component/chooser-tokens.ts
@@ -22,16 +22,16 @@ export type ChooserTokenMap = {
 };
 
 export const defaultChooserTokens: ChooserTokenMap = {
-    'chooser-selected-background-color': 'color-brand-05',
-    'chooser-selected-border-color': 'color-brand-50',
-    'chooser-selected-text-color': 'color-brand-70',
-    'chooser-text-color': 'color-neutral-65',
-    'chooser-background-color': 'color-white',
-    'chooser-border-color': 'color-neutral-65',
-    'chooser-disabled-background-color': 'color-neutral-05',
-    'chooser-disabled-border-color': 'color-neutral-30',
-    'chooser-disabled-text-color': 'color-neutral-30',
-    'chooser-hover-background-color': 'color-neutral-15',
-    'chooser-hover-border-color': 'color-neutral-90',
-    'chooser-hover-text-color': 'color-neutral-90',
+    'chooser-background-color': 'color-input-bg',
+    'chooser-border-color': 'color-input-border',
+    'chooser-text-color': 'color-input-content',
+    'chooser-selected-background-color': 'color-input-bg-selected',
+    'chooser-selected-border-color': 'color-input-border-selected',
+    'chooser-selected-text-color': 'color-input-content-selected',
+    'chooser-hover-background-color': 'color-input-bg-hover',
+    'chooser-hover-border-color': 'color-input-border-hover',
+    'chooser-hover-text-color': 'color-input-content-hover',
+    'chooser-disabled-background-color': 'color-input-bg-disabled',
+    'chooser-disabled-border-color': 'color-input-border-disabled',
+    'chooser-disabled-text-color': 'color-input-content-disabled',
 };

From 320c4a66fca03c04e701bab2ce5adde090e38bce Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:42:28 -0400
Subject: [PATCH 09/70] chore(alias-tokens): link combobox tokens

---
 .../tokens/component/combobox-tokens.ts       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/combobox-tokens.ts b/packages/react/src/themes/tokens/component/combobox-tokens.ts
index afdc1a39d1..5a56dd2d11 100644
--- a/packages/react/src/themes/tokens/component/combobox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/combobox-tokens.ts
@@ -24,18 +24,18 @@ export type ComboboxTokenMap = {
 };
 
 export const defaultComboboxTokens: ComboboxTokenMap = {
-    'combobox-clear-button-border-right-color': 'color-neutral-65',
-    'combobox-clear-button-disabled-icon-color': 'color-neutral-30',
-    'combobox-clear-button-icon-color': 'color-neutral-65',
-    'combobox-placeholder-text-color': 'color-neutral-65',
+    'combobox-clear-button-border-right-color': 'color-input-content',
+    'combobox-clear-button-disabled-icon-color': 'color-input-content-disabled',
+    'combobox-clear-button-icon-color': 'color-input-content',
     'combobox-arrow-button-background-color': 'transparent-100',
     'combobox-arrow-button-hover-background-color': 'transparent-100',
-    'combobox-arrow-button-disabled-icon-color': 'color-neutral-30',
-    'combobox-arrow-button-icon-color': 'color-neutral-65',
-    'combobox-border-color': 'color-neutral-65',
-    'combobox-disabled-background-color': 'color-neutral-05',
-    'combobox-disabled-border-color': 'color-neutral-30',
-    'combobox-disabled-text-color': 'color-neutral-30',
-    'combobox-error-border-color': 'color-alert-50',
-    'combobox-background-color': 'color-white',
+    'combobox-arrow-button-disabled-icon-color': 'color-input-content-disabled',
+    'combobox-arrow-button-icon-color': 'color-input-content',
+    'combobox-border-color': 'color-input-border',
+    'combobox-disabled-background-color': 'color-input-bg-disabled',
+    'combobox-disabled-border-color': 'color-input-border-disabled',
+    'combobox-disabled-text-color': 'color-input-content-disabled',
+    'combobox-error-border-color': 'color-input-border-error',
+    'combobox-background-color': 'color-input-bg',
+    'combobox-placeholder-text-color': 'color-input-content',
 };

From 55c650462a6532530e9c413a14d85d4fd30017d1 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:43:21 -0400
Subject: [PATCH 10/70] chore(alias-tokens): link datepicker tokens

---
 .../tokens/component/datepicker-tokens.ts     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/datepicker-tokens.ts b/packages/react/src/themes/tokens/component/datepicker-tokens.ts
index 2e6ab23b11..51fcd755b0 100644
--- a/packages/react/src/themes/tokens/component/datepicker-tokens.ts
+++ b/packages/react/src/themes/tokens/component/datepicker-tokens.ts
@@ -27,26 +27,26 @@ export type DatepickerTokenMap = {
 };
 
 export const defaultDatepickerTokens: DatepickerTokenMap = {
-    'datepicker-background-color': 'color-white',
-    'datepicker-border-color': 'color-neutral-15',
-    'datepicker-box-shadow-color': 'transparent-dark-20',
+    'datepicker-background-color': 'color-bg-overlay',
+    'datepicker-border-color': 'color-border-overlay',
+    'datepicker-box-shadow-color': 'color-box-shadow',
 
     'datepicker-header-background-color': 'transparent-100',
 
     'datepicker-day-background-color': 'transparent-100',
     'datepicker-day-border-color': 'transparent-100',
-    'datepicker-day-text-color': 'color-black',
+    'datepicker-day-text-color': 'color-content',
 
-    'datepicker-day-hover-background-color': 'color-neutral-15',
-    'datepicker-day-disabled-text-color': 'color-neutral-30',
+    'datepicker-day-hover-background-color': 'color-bg-hover',
+    'datepicker-day-disabled-text-color': 'color-content-disabled',
 
-    'datepicker-day-outside-month-text-color': 'color-neutral-65',
-    'datepicker-day-selected-outside-month-background-color': 'color-brand-05',
-    'datepicker-day-selected-outside-month-border-color': 'color-brand-50',
-    'datepicker-day-selected-outside-month-text-color': 'color-brand-70',
-    'datepicker-day-selected-background-color': 'color-brand-05',
-    'datepicker-day-selected-border-color': 'color-brand-50',
-    'datepicker-day-selected-text-color': 'color-brand-70',
+    'datepicker-day-outside-month-text-color': 'color-content-subtle',
+    'datepicker-day-selected-outside-month-background-color': 'color-bg-selected',
+    'datepicker-day-selected-outside-month-border-color': 'color-border-selected',
+    'datepicker-day-selected-outside-month-text-color': 'color-content-selected',
+    'datepicker-day-selected-background-color': 'color-bg-selected',
+    'datepicker-day-selected-border-color': 'color-border-selected',
+    'datepicker-day-selected-text-color': 'color-content-selected',
 
-    'datepicker-day-today-text-color': 'color-brand-70',
+    'datepicker-day-today-text-color': 'color-content-selected',
 };

From ff876110d10d38c00981a7166f965b9e831e5f27 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:44:03 -0400
Subject: [PATCH 11/70] chore(alias-tokens): link dropdown list tokens

---
 .../tokens/component/dropdown-list-tokens.ts     | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
index 69916d2f57..bdc2dc0297 100644
--- a/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
+++ b/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
@@ -18,12 +18,12 @@ export type DropdownListTokenMap = {
 };
 
 export const defaultDropdownListTokens: DropdownListTokenMap = {
-    'dropdown-list-arrow-color': 'color-neutral-65',
-    'dropdown-list-arrow-disabled-color': 'color-neutral-30',
-    'dropdown-list-input-background-color': 'color-white',
-    'dropdown-list-input-disabled-background-color': 'color-neutral-05',
-    'dropdown-list-input-border-color': 'color-neutral-65',
-    'dropdown-list-input-disabled-border-color': 'color-neutral-30',
-    'dropdown-list-input-error-border-color': 'color-alert-50',
-    'dropdown-list-input-disabled-text-color': 'color-neutral-30',
+    'dropdown-list-input-background-color': 'color-input-bg',
+    'dropdown-list-input-border-color': 'color-input-border',
+    'dropdown-list-input-error-border-color': 'color-input-border-error',
+    'dropdown-list-arrow-color': 'color-input-content',
+    'dropdown-list-input-disabled-background-color': 'color-input-bg-disabled',
+    'dropdown-list-input-disabled-border-color': 'color-input-border-disabled',
+    'dropdown-list-arrow-disabled-color': 'color-input-content-disabled',
+    'dropdown-list-input-disabled-text-color': 'color-input-content-disabled',
 };

From cc8354e3099462c9d4daa220ec88584b92e9d5a5 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:49:25 -0400
Subject: [PATCH 12/70] chore(alias-tokens): link dropdown menu tokens

---
 .../dropdown-menu/list-items/nav-item.tsx     |  2 +-
 .../tokens/component/dropdown-menu-tokens.ts  | 56 ++++++++++---------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx b/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx
index 0a513e4444..38f87882f5 100644
--- a/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx
+++ b/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx
@@ -45,7 +45,7 @@ const NavItemStyle = css<LinkProps>`
     ${({ theme }) => focus({ theme }, { insideOnly: true })};
 
     &:hover {
-        background-color: ${({ disabled, theme }) => (disabled ? theme.component['dropdown-menu-nav-item-hover-disabled-background-color'] : theme.component['dropdown-menu-nav-item-hover-background-color'])};
+        background-color: ${({ disabled, theme }) => (disabled ? theme.component['dropdown-menu-nav-item-disabled-background-color'] : theme.component['dropdown-menu-nav-item-hover-background-color'])};
     }
 
     &[disabled],
diff --git a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
index b5176cc0ec..6bc2c1c2b8 100644
--- a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
+++ b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
@@ -7,7 +7,7 @@ export type DropdownMenuTokens =
     | 'dropdown-menu-text-color'
     | 'dropdown-menu-nav-item-text-color'
     | 'dropdown-menu-nav-item-hover-background-color'
-    | 'dropdown-menu-nav-item-hover-disabled-background-color'
+    | 'dropdown-menu-nav-item-disabled-background-color'
     | 'dropdown-menu-nav-item-disabled-text-color'
     | 'dropdown-menu-nav-item-disabled-icon-color'
     | 'dropdown-menu-nav-item-external-link-icon-color'
@@ -34,28 +34,34 @@ export type DropdownMenuTokenMap = {
 };
 
 export const defaultDropdownMenuTokens: DropdownMenuTokenMap = {
-    'dropdown-menu-border-color': 'color-neutral-65',
-    'dropdown-menu-background-color': 'color-white',
-    'dropdown-menu-text-color': 'color-black',
-    'dropdown-menu-nav-item-text-color': 'color-black',
-    'dropdown-menu-nav-item-hover-background-color': 'color-neutral-15',
-    'dropdown-menu-nav-item-hover-disabled-background-color': 'transparent-100',
-    'dropdown-menu-nav-item-disabled-text-color': 'color-neutral-30',
-    'dropdown-menu-nav-item-disabled-icon-color': 'color-neutral-30',
-    'dropdown-menu-nav-item-external-link-icon-color': 'color-black',
-    'dropdown-menu-nav-item-external-link-text-color': 'color-black',
-    'dropdown-menu-list-item-text-color': 'color-black',
-    'dropdown-menu-external-item-text-color': 'color-black',
-    'dropdown-menu-external-item-hover-background-color': 'color-neutral-15',
-    'dropdown-menu-external-item-icon-visited-text-color': 'color-black',
-    'dropdown-menu-external-item-icon-visited-fill-color': 'color-black',
-    'dropdown-menu-external-item-visited-text-color': 'color-black',
-    'dropdown-menu-external-item-visited-fill-color': 'color-black',
-    'dropdown-menu-external-item-disabled-text-color': 'color-neutral-30',
-    'dropdown-menu-external-item-disabled-fill-color': 'color-neutral-30',
-    'dropdown-menu-group-border-color': 'color-neutral-15',
-    'dropdown-menu-item-content-icon-background-color': 'color-neutral-05',
-    'dropdown-menu-item-content-icon-border-color': 'color-neutral-15',
-    'dropdown-menu-item-content-description-text-color': 'color-neutral-65',
-    'dropdown-menu-box-shadow-color': 'transparent-dark-20',
+    'dropdown-menu-background-color': 'color-menu-bg',
+    'dropdown-menu-border-color': 'color-menu-border',
+    'dropdown-menu-text-color': 'color-menu-item-content',
+
+    'dropdown-menu-item-content-icon-background-color': 'color-bg-neutral-subtle',
+    'dropdown-menu-item-content-icon-border-color': 'color-border',
+    'dropdown-menu-group-border-color': 'color-border',
+
+    'dropdown-menu-nav-item-hover-background-color': 'color-menu-item-bg-hover',
+    'dropdown-menu-external-item-hover-background-color': 'color-menu-item-bg-hover',
+
+    'dropdown-menu-list-item-text-color': 'color-menu-item-content',
+    'dropdown-menu-nav-item-text-color': 'color-menu-item-content',
+    'dropdown-menu-nav-item-external-link-icon-color': 'color-menu-item-content',
+    'dropdown-menu-nav-item-external-link-text-color': 'color-menu-item-content',
+    'dropdown-menu-external-item-text-color': 'color-menu-item-content',
+    'dropdown-menu-item-content-description-text-color': 'color-menu-item-subcontent',
+
+    'dropdown-menu-nav-item-disabled-background-color': 'color-menu-item-bg',
+    'dropdown-menu-nav-item-disabled-text-color': 'color-menu-item-content-disabled',
+    'dropdown-menu-nav-item-disabled-icon-color': 'color-menu-item-content-disabled',
+    'dropdown-menu-external-item-disabled-text-color': 'color-menu-item-content-disabled',
+    'dropdown-menu-external-item-disabled-fill-color': 'color-menu-item-content-disabled',
+
+    'dropdown-menu-external-item-icon-visited-text-color': 'color-link-content-visited',
+    'dropdown-menu-external-item-icon-visited-fill-color': 'color-link-content-visited',
+    'dropdown-menu-external-item-visited-text-color': 'color-link-content-visited',
+    'dropdown-menu-external-item-visited-fill-color': 'color-link-content-visited',
+
+    'dropdown-menu-box-shadow-color': 'color-box-shadow',
 };

From 8c6ff18cb441b08500008a538816bb5f7641a56b Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:50:12 -0400
Subject: [PATCH 13/70] chore(alias-tokens): link field tokens

---
 .../react/src/themes/tokens/component/field-tokens.ts    | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/field-tokens.ts b/packages/react/src/themes/tokens/component/field-tokens.ts
index 48ded22131..d4abc4863c 100644
--- a/packages/react/src/themes/tokens/component/field-tokens.ts
+++ b/packages/react/src/themes/tokens/component/field-tokens.ts
@@ -14,8 +14,9 @@ export type FieldTokenMap = {
 };
 
 export const defaultFieldTokens: FieldTokenMap = {
-    'field-hint-text-color': 'color-neutral-65',
-    'field-input-border-color': 'color-neutral-65',
-    'field-input-error-border-color': 'color-alert-50',
-    'field-error-text-color': 'color-alert-50',
+    'field-hint-text-color': 'color-content-subtle',
+    'field-error-text-color': 'color-input-content-error',
+
+    'field-input-border-color': 'color-input-border',
+    'field-input-error-border-color': 'color-input-border-error',
 };

From a555e376a060de2742de0317ca9dbf499ed10a24 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:50:43 -0400
Subject: [PATCH 14/70] chore(alias-tokens): link focus tokens

---
 .../react/src/themes/tokens/component/focus-tokens.ts     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/focus-tokens.ts b/packages/react/src/themes/tokens/component/focus-tokens.ts
index 1b1b3f1cb3..4c4da88d04 100644
--- a/packages/react/src/themes/tokens/component/focus-tokens.ts
+++ b/packages/react/src/themes/tokens/component/focus-tokens.ts
@@ -14,8 +14,8 @@ export type FocusTokenMap = {
 };
 
 export const defaultFocusTokens: FocusTokenMap = {
-    'focus-inside-border-color': 'color-brand-20',
-    'focus-inverted-inside-border-color': 'color-brand-50',
-    'focus-outside-border-color': 'color-brand-50',
-    'focus-inverted-outside-border-color': 'color-brand-20',
+    'focus-inside-border-color': 'color-border-focus-inside',
+    'focus-outside-border-color': 'color-border-focus-outside',
+    'focus-inverted-inside-border-color': 'color-border-focus-inside-inverse',
+    'focus-inverted-outside-border-color': 'color-border-focus-outside-inverse',
 };

From 3470f280676c620c65b6a9a41ca26cd926674ebe Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:51:56 -0400
Subject: [PATCH 15/70] chore(alias-tokens): link global banner tokens

---
 .../tokens/component/global-banner-tokens.ts  | 81 +++++++++++--------
 1 file changed, 48 insertions(+), 33 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/global-banner-tokens.ts b/packages/react/src/themes/tokens/component/global-banner-tokens.ts
index bf2770e6ab..101ba0936a 100644
--- a/packages/react/src/themes/tokens/component/global-banner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/global-banner-tokens.ts
@@ -46,40 +46,55 @@ export type GlobalBannerTokenMap = {
 };
 
 export const defaultGlobalBannerTokens: GlobalBannerTokenMap = {
-    'global-banner-neutral-background-color': 'color-neutral-65',
-    'global-banner-neutral-text-color': 'color-white',
-    'global-banner-neutral-action-button-border-color': 'color-white',
-    'global-banner-neutral-action-button-text-color': 'color-white',
-    'global-banner-neutral-action-button-hover-border-color': 'color-neutral-30',
-    'global-banner-neutral-action-button-hover-text-color': 'color-neutral-30',
+    /**
+     * neutral
+     */
+    'global-banner-neutral-background-color': 'color-bg-neutral-bold',
     'global-banner-neutral-dismiss-button-background-color': 'transparent-100',
-    'global-banner-neutral-dismiss-button-text-color': 'color-white',
-    'global-banner-neutral-dismiss-button-hover-background-color': 'color-neutral-80',
-    'global-banner-neutral-dismiss-button-hover-text-color': 'color-white',
-    'global-banner-alert-background-color': 'color-alert-50',
-    'global-banner-alert-text-color': 'color-white',
-    'global-banner-alert-action-button-border-color': 'color-white',
-    'global-banner-alert-action-button-text-color': 'color-white',
-    'global-banner-alert-action-button-hover-border-color': 'color-alert-20',
-    'global-banner-alert-action-button-hover-text-color': 'color-alert-20',
-    'global-banner-discovery-background-color': 'color-discovery-50',
-    'global-banner-discovery-text-color': 'color-white',
-    'global-banner-discovery-action-button-border-color': 'color-white',
-    'global-banner-discovery-action-button-text-color': 'color-white',
-    'global-banner-discovery-action-button-hover-border-color': 'color-discovery-20',
-    'global-banner-discovery-action-button-hover-text-color': 'color-discovery-20',
+    'global-banner-neutral-dismiss-button-hover-background-color': 'transparent-dark-50',
+    'global-banner-neutral-text-color': 'color-content-inverse',
+    'global-banner-neutral-action-button-text-color': 'color-content-inverse',
+    'global-banner-neutral-dismiss-button-text-color': 'color-content-inverse',
+    'global-banner-neutral-dismiss-button-hover-text-color': 'color-content-inverse',
+    'global-banner-neutral-action-button-border-color': 'color-border-inverse',
+    'global-banner-neutral-action-button-hover-border-color': 'transparent-light-50',
+    'global-banner-neutral-action-button-hover-text-color': 'transparent-light-50',
+
+    /**
+     * discovery
+     */
+    'global-banner-discovery-background-color': 'color-feedback-bg-discovery-bold',
     'global-banner-discovery-dismiss-button-background-color': 'transparent-100',
-    'global-banner-discovery-dismiss-button-text-color': 'color-white',
-    'global-banner-discovery-dismiss-button-hover-background-color': 'color-discovery-70',
-    'global-banner-discovery-dismiss-button-hover-text-color': 'color-white',
-    'global-banner-warning-background-color': 'color-warning-50',
-    'global-banner-warning-text-color': 'color-neutral-90',
-    'global-banner-warning-action-button-border-color': 'color-neutral-90',
-    'global-banner-warning-action-button-text-color': 'color-neutral-90',
-    'global-banner-warning-action-button-hover-border-color': 'color-warning-70',
-    'global-banner-warning-action-button-hover-text-color': 'color-warning-70',
+    'global-banner-discovery-dismiss-button-hover-background-color': 'transparent-dark-50',
+    'global-banner-discovery-text-color': 'color-content-inverse',
+    'global-banner-discovery-action-button-text-color': 'color-content-inverse',
+    'global-banner-discovery-dismiss-button-text-color': 'color-content-inverse',
+    'global-banner-discovery-dismiss-button-hover-text-color': 'color-content-inverse',
+    'global-banner-discovery-action-button-border-color': 'color-border-inverse',
+    'global-banner-discovery-action-button-hover-border-color': 'transparent-light-50',
+    'global-banner-discovery-action-button-hover-text-color': 'transparent-light-50',
+
+    /**
+     * warning
+     */
+    'global-banner-warning-background-color': 'color-feedback-bg-warning-bold',
     'global-banner-warning-dismiss-button-background-color': 'transparent-100',
-    'global-banner-warning-dismiss-button-text-color': 'color-neutral-90',
-    'global-banner-warning-dismiss-button-hover-background-color': 'color-warning-60',
-    'global-banner-warning-dismiss-button-hover-text-color': 'color-neutral-90',
+    'global-banner-warning-dismiss-button-hover-background-color': 'transparent-dark-30',
+    'global-banner-warning-text-color': 'color-content',
+    'global-banner-warning-action-button-text-color': 'color-content',
+    'global-banner-warning-dismiss-button-hover-text-color': 'color-content',
+    'global-banner-warning-dismiss-button-text-color': 'color-content',
+    'global-banner-warning-action-button-border-color': 'color-content',
+    'global-banner-warning-action-button-hover-border-color': 'transparent-dark-60',
+    'global-banner-warning-action-button-hover-text-color': 'transparent-dark-60',
+
+    /**
+     * alert
+     */
+    'global-banner-alert-background-color': 'color-feedback-bg-alert-bold',
+    'global-banner-alert-text-color': 'color-content-inverse',
+    'global-banner-alert-action-button-text-color': 'color-content-inverse',
+    'global-banner-alert-action-button-border-color': 'color-border-inverse',
+    'global-banner-alert-action-button-hover-border-color': 'transparent-light-50',
+    'global-banner-alert-action-button-hover-text-color': 'transparent-light-50',
 };

From 2fa20a203ee0601db83b90f7494cd334f2703dd9 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:52:37 -0400
Subject: [PATCH 16/70] chore(alias-tokens): link global header tokens

---
 .../src/themes/tokens/component/global-header-tokens.ts   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/global-header-tokens.ts b/packages/react/src/themes/tokens/component/global-header-tokens.ts
index 33cca56fb4..f34616001e 100644
--- a/packages/react/src/themes/tokens/component/global-header-tokens.ts
+++ b/packages/react/src/themes/tokens/component/global-header-tokens.ts
@@ -14,8 +14,8 @@ export type GlobalHeaderTokensMap = {
 };
 
 export const defaultGlobalHeaderTokens : GlobalHeaderTokensMap = {
-    'global-header-background-color': 'color-brand-80',
-    'global-header-content-text-color': 'color-white',
-    'global-header-logo-title-separator-color': 'color-brand-70',
-    'global-header-logo-content-text-color': 'color-white',
+    'global-header-background-color': 'color-bg-brand-bold',
+    'global-header-logo-title-separator-color': 'color-border-brand',
+    'global-header-logo-content-text-color': 'color-content-inverse',
+    'global-header-content-text-color': 'color-content-inverse',
 };

From 3904d4edf0352e3a930d5d680435445e57f7e039 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:53:29 -0400
Subject: [PATCH 17/70] chore(alias-tokens): link global navigation tokens

---
 .../tokens/component/global-navigation-tokens.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/global-navigation-tokens.ts b/packages/react/src/themes/tokens/component/global-navigation-tokens.ts
index d7efb908dc..13a820c947 100644
--- a/packages/react/src/themes/tokens/component/global-navigation-tokens.ts
+++ b/packages/react/src/themes/tokens/component/global-navigation-tokens.ts
@@ -18,12 +18,12 @@ export type GlobalNavigationTokenMap = {
 };
 
 export const defaultGlobalNavigationTokens: GlobalNavigationTokenMap = {
-    'global-navigation-background-color': 'color-white',
-    'global-navigation-box-shadow-color': 'transparent-dark-20',
-    'global-navigation-item-hover-background-color': 'color-neutral-15',
-    'global-navigation-item-hover-text-color': 'color-black',
-    'global-navigation-item-text-color': 'color-neutral-65',
-    'global-navigation-item-selected-background-color': 'color-brand-05',
-    'global-navigation-item-selected-text-color': 'color-brand-70',
-    'global-navigation-separator-border-color': 'color-neutral-15',
+    'global-navigation-background-color': 'color-bg-overlay',
+    'global-navigation-box-shadow-color': 'color-box-shadow',
+    'global-navigation-item-hover-background-color': 'color-bg-hover',
+    'global-navigation-item-hover-text-color': 'color-content-hover',
+    'global-navigation-item-text-color': 'color-content-subtle',
+    'global-navigation-item-selected-background-color': 'color-bg-selected',
+    'global-navigation-item-selected-text-color': 'color-content-selected',
+    'global-navigation-separator-border-color': 'color-border',
 };

From 5f8aff869d67cb32e09a246645d43c149a2b8040 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:54:15 -0400
Subject: [PATCH 18/70] chore(alias-tokens): link legend tokens

---
 packages/react/src/themes/tokens/component/legend-tokens.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/legend-tokens.ts b/packages/react/src/themes/tokens/component/legend-tokens.ts
index 71824f2c07..6cdd28a675 100644
--- a/packages/react/src/themes/tokens/component/legend-tokens.ts
+++ b/packages/react/src/themes/tokens/component/legend-tokens.ts
@@ -12,6 +12,6 @@ export type LegendTokenMap = {
 };
 
 export const defaultLegendTokens: LegendTokenMap = {
-    'legend-item-bullet-color': 'color-brand-20',
-    'legend-item-description-text-color': 'color-neutral-65',
+    'legend-item-bullet-color': 'color-bg-brand-subtle',
+    'legend-item-description-text-color': 'color-content-subtle',
 };

From 6f564fc3ec49f1043b6668fd6a6be3b1ae62ed8c Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:55:04 -0400
Subject: [PATCH 19/70] chore(alias-tokens): link link tokens

---
 .../react/src/themes/tokens/component/link-tokens.ts   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/link-tokens.ts b/packages/react/src/themes/tokens/component/link-tokens.ts
index 5290c8aefc..ef85871e81 100644
--- a/packages/react/src/themes/tokens/component/link-tokens.ts
+++ b/packages/react/src/themes/tokens/component/link-tokens.ts
@@ -19,11 +19,11 @@ export type LinkTokenMap = {
 export const defaultLinkTokens: LinkTokenMap = {
     'external-link-visited-text-color': 'color-link-content-visited',
 
-    'route-link-text-color': 'color-informative-50',
-    'route-link-disabled-text-color': 'color-informative-20',
-    'route-link-hover-text-color': 'color-informative-70',
     'route-link-visited-text-color': 'color-link-content-visited',
+    'route-link-text-color': 'color-link-content',
+    'route-link-disabled-text-color': 'color-link-content-disabled',
+    'route-link-hover-text-color': 'color-link-content-hover',
 
-    'skip-link-background-color': 'color-white',
-    'skip-link-text-color': 'color-informative-50',
+    'skip-link-text-color': 'color-link-content',
+    'skip-link-background-color': 'color-bg',
 };

From c8732415972cb2df31d7140e7bcdb43fb00ffc7e Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 08:59:08 -0400
Subject: [PATCH 20/70] chore(alias-tokens): link listbox tokens

---
 .../themes/tokens/component/listbox-tokens.ts | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/listbox-tokens.ts b/packages/react/src/themes/tokens/component/listbox-tokens.ts
index 8e2e86bac1..18eb67587d 100644
--- a/packages/react/src/themes/tokens/component/listbox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/listbox-tokens.ts
@@ -8,9 +8,6 @@ export type ListboxTokens =
     | 'listbox-item-disabled-background-color'
     | 'listbox-item-disabled-text-color'
     | 'listbox-item-hover-background-color'
-    | 'listbox-item-selected-background-color'
-    | 'listbox-item-selected-border-color'
-    | 'listbox-item-selected-icon-color'
     | 'listbox-item-caption-text-color'
     | 'listbox-item-caption-disabled-text-color'
     | 'listbox-box-shadow-frame-color'
@@ -23,20 +20,17 @@ export type ListboxTokenMap = {
 };
 
 export const defaultListboxTokens: ListboxTokenMap = {
-    'listbox-background-color': 'color-white',
-    'listbox-border-color': 'color-neutral-50',
-    'listbox-item-text-color': 'color-black',
-    'listbox-item-caption-text-color': 'color-neutral-65',
-    'listbox-item-hover-background-color': 'color-neutral-15',
+    'listbox-background-color': 'color-menu-bg',
+    'listbox-border-color': 'color-menu-border',
 
-    'listbox-item-disabled-background-color': 'color-white',
-    'listbox-item-disabled-text-color': 'color-neutral-30',
-    'listbox-item-caption-disabled-text-color': 'color-neutral-15',
+    'listbox-item-text-color': 'color-menu-item-content',
+    'listbox-item-caption-text-color': 'color-menu-item-subcontent',
+    'listbox-item-hover-background-color': 'color-menu-item-bg-hover',
 
-    'listbox-item-selected-background-color': 'color-brand-50',
-    'listbox-item-selected-border-color': 'color-brand-50',
-    'listbox-item-selected-icon-color': 'color-white',
+    'listbox-item-disabled-background-color': 'color-menu-item-bg',
+    'listbox-item-disabled-text-color': 'color-menu-item-content-disabled',
+    'listbox-item-caption-disabled-text-color': 'color-menu-item-content-disabled',
 
     'listbox-box-shadow-frame-color': 'color-neutral-15',
-    'listbox-box-shadow-depth-color': 'transparent-dark-20',
+    'listbox-box-shadow-depth-color': 'color-box-shadow',
 };

From bf06c6bacdbba1e4a2fdd99ccb71ea32bf5ef041 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:03:01 -0400
Subject: [PATCH 21/70] chore(alias-tokens): link lozenge tokens

---
 .../themes/tokens/component/lozenge-tokens.ts | 113 ++++++++++++------
 1 file changed, 77 insertions(+), 36 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/lozenge-tokens.ts b/packages/react/src/themes/tokens/component/lozenge-tokens.ts
index 365aef6187..24ec535cc9 100644
--- a/packages/react/src/themes/tokens/component/lozenge-tokens.ts
+++ b/packages/react/src/themes/tokens/component/lozenge-tokens.ts
@@ -46,40 +46,81 @@ export type LozengeTokensMap = {
 };
 
 export const defaultLozengeTokens: LozengeTokensMap = {
-    'lozenge-neutral-background-color': 'color-neutral-65',
-    'lozenge-neutral-border-color': 'color-neutral-65',
-    'lozenge-neutral-text-color': 'color-white',
-    'lozenge-neutral-subtle-background-color': 'color-neutral-05',
-    'lozenge-neutral-subtle-border-color': 'color-neutral-05',
-    'lozenge-neutral-subtle-text-color': 'color-neutral-65',
-    'lozenge-info-background-color': 'color-informative-50',
-    'lozenge-info-border-color': 'color-informative-50',
-    'lozenge-info-text-color': 'color-white',
-    'lozenge-info-subtle-background-color': 'color-informative-05',
-    'lozenge-info-subtle-border-color': 'color-informative-05',
-    'lozenge-info-subtle-text-color': 'color-informative-70',
-    'lozenge-success-background-color': 'color-success-50',
-    'lozenge-success-border-color': 'color-success-50',
-    'lozenge-success-text-color': 'color-white',
-    'lozenge-success-subtle-background-color': 'color-success-05',
-    'lozenge-success-subtle-border-color': 'color-success-05',
-    'lozenge-success-subtle-text-color': 'color-success-70',
-    'lozenge-discovery-background-color': 'color-discovery-50',
-    'lozenge-discovery-border-color': 'color-discovery-50',
-    'lozenge-discovery-text-color': 'color-white',
-    'lozenge-discovery-subtle-background-color': 'color-discovery-05',
-    'lozenge-discovery-subtle-border-color': 'color-discovery-05',
-    'lozenge-discovery-subtle-text-color': 'color-discovery-70',
-    'lozenge-alert-background-color': 'color-alert-50',
-    'lozenge-alert-border-color': 'color-alert-50',
-    'lozenge-alert-text-color': 'color-white',
-    'lozenge-alert-subtle-background-color': 'color-alert-05',
-    'lozenge-alert-subtle-border-color': 'color-alert-05',
-    'lozenge-alert-subtle-text-color': 'color-alert-50',
-    'lozenge-warning-background-color': 'color-warning-50',
-    'lozenge-warning-border-color': 'color-warning-50',
-    'lozenge-warning-text-color': 'color-neutral-90',
-    'lozenge-warning-subtle-background-color': 'color-warning-05',
-    'lozenge-warning-subtle-border-color': 'color-warning-05',
-    'lozenge-warning-subtle-text-color': 'color-warning-80',
+    /**
+     * neutral
+     */
+    'lozenge-neutral-background-color': 'color-bg-neutral-bold',
+    'lozenge-neutral-border-color': 'color-bg-neutral-bold',
+    'lozenge-neutral-text-color': 'color-content-inverse',
+    /**
+     * neutral subtle
+     */
+    'lozenge-neutral-subtle-background-color': 'color-bg-neutral-subtle',
+    'lozenge-neutral-subtle-border-color': 'color-bg-neutral-subtle',
+    'lozenge-neutral-subtle-text-color': 'color-content-subtle',
+
+    /**
+     * info
+     */
+    'lozenge-info-background-color': 'color-feedback-bg-informative-bold',
+    'lozenge-info-border-color': 'color-feedback-bg-informative-bold',
+    'lozenge-info-text-color': 'color-content-inverse',
+    /**
+     * info subtle
+     */
+    'lozenge-info-subtle-background-color': 'color-feedback-bg-informative-subtle',
+    'lozenge-info-subtle-border-color': 'color-feedback-bg-informative-subtle',
+    'lozenge-info-subtle-text-color': 'color-feedback-content-informative',
+
+    /**
+     * success
+     */
+    'lozenge-success-background-color': 'color-feedback-bg-success-bold',
+    'lozenge-success-border-color': 'color-feedback-bg-success-bold',
+    'lozenge-success-text-color': 'color-content-inverse',
+    /**
+     * success subtle
+     */
+    'lozenge-success-subtle-background-color': 'color-feedback-bg-success-subtle',
+    'lozenge-success-subtle-border-color': 'color-feedback-bg-success-subtle',
+    'lozenge-success-subtle-text-color': 'color-feedback-content-success',
+
+    /**
+     * discovery
+     */
+    'lozenge-discovery-background-color': 'color-feedback-bg-discovery-bold',
+    'lozenge-discovery-border-color': 'color-feedback-bg-discovery-bold',
+    'lozenge-discovery-text-color': 'color-content-inverse',
+    /**
+     * discovery subtle
+     */
+    'lozenge-discovery-subtle-background-color': 'color-feedback-bg-discovery-subtle',
+    'lozenge-discovery-subtle-border-color': 'color-feedback-bg-discovery-subtle',
+    'lozenge-discovery-subtle-text-color': 'color-feedback-content-discovery',
+
+    /**
+     * alert
+     */
+    'lozenge-alert-background-color': 'color-feedback-bg-alert-bold',
+    'lozenge-alert-border-color': 'color-feedback-bg-alert-bold',
+    'lozenge-alert-text-color': 'color-content-inverse',
+    /**
+     * alert subtle
+     */
+    'lozenge-alert-subtle-background-color': 'color-feedback-bg-alert-subtle',
+    'lozenge-alert-subtle-border-color': 'color-feedback-bg-alert-subtle',
+    'lozenge-alert-subtle-text-color': 'color-feedback-content-alert',
+
+    /**
+     * warning
+     */
+    'lozenge-warning-background-color': 'color-feedback-bg-warning-bold',
+    'lozenge-warning-border-color': 'color-feedback-bg-warning-bold',
+    'lozenge-warning-text-color': 'color-content',
+    /**
+     * warning subtle
+     */
+    'lozenge-warning-subtle-background-color': 'color-feedback-bg-warning-subtle',
+    'lozenge-warning-subtle-border-color': 'color-feedback-bg-warning-subtle',
+    'lozenge-warning-subtle-text-color': 'color-feedback-content-warning',
 };

From 069acdad79005bf2ad18b9afc4a70f3c38e94328 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:03:51 -0400
Subject: [PATCH 22/70] chore(alias-tokens): link menu tokens

---
 .../themes/tokens/component/menu-tokens.ts    | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/menu-tokens.ts b/packages/react/src/themes/tokens/component/menu-tokens.ts
index 9ce88b2dad..5a9d11f8e6 100644
--- a/packages/react/src/themes/tokens/component/menu-tokens.ts
+++ b/packages/react/src/themes/tokens/component/menu-tokens.ts
@@ -23,17 +23,20 @@ export type MenuTokenMap = {
 };
 
 export const defaultMenuTokens: MenuTokenMap = {
-    'menu-background-color': 'color-white',
-    'menu-border-color': 'color-neutral-50',
-    'menu-group-text-color': 'color-neutral-65',
-    'menu-item-disabled-text-color': 'color-neutral-30',
-    'menu-item-hover-background-color': 'color-neutral-15',
-    'menu-item-text-color': 'color-neutral-90',
-    'menu-item-hover-text-color': 'color-black',
-    'menu-item-icon-color': 'color-neutral-90',
-    'menu-item-hover-icon-color': 'color-black',
-    'menu-submenu-background-color': 'color-white',
-    'menu-submenu-border-color': 'color-neutral-50',
-    'menu-box-shadow-color': 'transparent-dark-20',
-    'menu-submenu-box-shadow-color': 'transparent-dark-20',
+    'menu-background-color': 'color-menu-bg',
+    'menu-border-color': 'color-menu-border',
+    'menu-submenu-background-color': 'color-menu-bg',
+    'menu-submenu-border-color': 'color-menu-border',
+
+    'menu-group-text-color': 'color-menu-item-subcontent',
+
+    'menu-item-text-color': 'color-menu-item-content',
+    'menu-item-hover-text-color': 'color-menu-item-content-hover',
+    'menu-item-icon-color': 'color-menu-item-content',
+    'menu-item-hover-icon-color': 'color-menu-item-content-hover',
+    'menu-item-disabled-text-color': 'color-menu-item-content-disabled',
+    'menu-item-hover-background-color': 'color-menu-item-bg-hover',
+
+    'menu-submenu-box-shadow-color': 'color-box-shadow',
+    'menu-box-shadow-color': 'color-box-shadow',
 };

From f3293dbec0943b66fa4386578093858ee8d502ae Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:05:24 -0400
Subject: [PATCH 23/70] chore(alias-tokens): link modal tokens

---
 packages/react/src/themes/tokens/component/modal-tokens.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/modal-tokens.ts b/packages/react/src/themes/tokens/component/modal-tokens.ts
index c9e6253780..f979af62bc 100644
--- a/packages/react/src/themes/tokens/component/modal-tokens.ts
+++ b/packages/react/src/themes/tokens/component/modal-tokens.ts
@@ -13,7 +13,7 @@ export type ModalTokenMap = {
 };
 
 export const defaultModalTokens: ModalTokenMap = {
-    'modal-background-color': 'color-white',
-    'modal-border-color': 'color-neutral-50',
-    'modal-overlay-background-color': 'transparent-dark-75',
+    'modal-background-color': 'color-bg-overlay',
+    'modal-border-color': 'color-border-overlay',
+    'modal-overlay-background-color': 'color-blanket-bg',
 };

From 03cb1f70d2bd22040b5efc0b74fc68f960f8b393 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:05:59 -0400
Subject: [PATCH 24/70] chore(alias-tokens): link nav list tokens

---
 .../themes/tokens/component/nav-list-tokens.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/nav-list-tokens.ts b/packages/react/src/themes/tokens/component/nav-list-tokens.ts
index a9114f3162..16944b7560 100644
--- a/packages/react/src/themes/tokens/component/nav-list-tokens.ts
+++ b/packages/react/src/themes/tokens/component/nav-list-tokens.ts
@@ -19,17 +19,17 @@ export type NavListTokenMap = {
 };
 
 export const defaultNavListTokens: NavListTokenMap = {
-    'nav-list-background-color': 'color-white',
-    'nav-list-border-color': 'color-neutral-65',
+    'nav-list-background-color': 'color-menu-bg',
+    'nav-list-border-color': 'color-menu-border',
 
-    'nav-list-item-icon-color': 'color-neutral-90',
-    'nav-list-item-text-color': 'color-neutral-90',
+    'nav-list-item-icon-color': 'color-menu-item-content',
+    'nav-list-item-text-color': 'color-menu-item-content',
 
-    'nav-list-item-hover-background-color': 'color-neutral-15',
-    'nav-list-item-text-hover-color': 'color-black',
-    'nav-list-item-icon-hover-color': 'color-black',
+    'nav-list-item-hover-background-color': 'color-menu-item-bg-hover',
+    'nav-list-item-text-hover-color': 'color-menu-item-content-hover',
+    'nav-list-item-icon-hover-color': 'color-menu-item-content-hover',
 
-    'nav-list-item-disabled-text-color': 'color-neutral-30',
+    'nav-list-item-disabled-text-color': 'color-menu-item-content-disabled',
 
-    'nav-list-box-shadow-color': 'transparent-dark-20',
+    'nav-list-box-shadow-color': 'color-box-shadow',
 };

From fc1f87b87408fe2dcf6b4ca85eb546f06a663a73 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:06:35 -0400
Subject: [PATCH 25/70] chore(alias-tokens): link numeric tokens

---
 .../themes/tokens/component/numeric-input-tokens.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/numeric-input-tokens.ts b/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
index b817af23a7..03f155d741 100644
--- a/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
@@ -16,10 +16,11 @@ export type NumericInputTokenMap = {
 };
 
 export const defaultNumericInputTokens: NumericInputTokenMap = {
-    'numeric-input-background-color': 'color-white',
-    'numeric-input-border-color': 'color-neutral-65',
-    'numeric-input-disabled-adornment-text-color': 'color-neutral-30',
-    'numeric-input-disabled-background-color': 'color-neutral-05',
-    'numeric-input-disabled-border-color': 'color-neutral-15',
-    'numeric-input-error-border-color': 'color-alert-50',
+    'numeric-input-background-color': 'color-input-bg',
+    'numeric-input-border-color': 'color-input-border',
+    'numeric-input-error-border-color': 'color-input-border-error',
+
+    'numeric-input-disabled-adornment-text-color': 'color-input-content-disabled',
+    'numeric-input-disabled-background-color': 'color-input-bg-disabled',
+    'numeric-input-disabled-border-color': 'color-input-border-disabled',
 };

From e8696050a3cc973da4db19c9f5bddc764f5ae611 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:07:04 -0400
Subject: [PATCH 26/70] chore(alias-tokens): link pagination tokens

---
 .../themes/tokens/component/pagination-tokens.ts   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/pagination-tokens.ts b/packages/react/src/themes/tokens/component/pagination-tokens.ts
index 61f433cc6d..075acb5858 100644
--- a/packages/react/src/themes/tokens/component/pagination-tokens.ts
+++ b/packages/react/src/themes/tokens/component/pagination-tokens.ts
@@ -17,12 +17,12 @@ export type PaginationTokenMap = {
 };
 
 export const defaultPaginationTokens: PaginationTokenMap = {
-    'pagination-page-background-color': 'color-white',
-    'pagination-page-text-color': 'color-neutral-65',
-    'pagination-page-hover-background-color': 'color-neutral-15',
+    'pagination-page-background-color': 'transparent-100',
+    'pagination-page-text-color': 'color-content-subtle',
+    'pagination-page-hover-background-color': 'color-bg-hover',
 
-    'pagination-page-selected-hover-background-color': 'color-informative-05',
-    'pagination-page-selected-background-color': 'color-informative-05',
-    'pagination-page-selected-border-color': 'color-informative-50',
-    'pagination-page-selected-text-color': 'color-informative-70',
+    'pagination-page-selected-hover-background-color': 'color-bg-selected',
+    'pagination-page-selected-background-color': 'color-bg-selected',
+    'pagination-page-selected-border-color': 'color-border-selected',
+    'pagination-page-selected-text-color': 'color-content-selected',
 };

From f31128a18226c2f8f9f3e9009c661689547d42be Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:12:12 -0400
Subject: [PATCH 27/70] chore(alias-tokens): link password tokens

---
 .../tokens/component/password-input-tokens.ts      | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/password-input-tokens.ts b/packages/react/src/themes/tokens/component/password-input-tokens.ts
index e7e60f8c14..264a490529 100644
--- a/packages/react/src/themes/tokens/component/password-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/password-input-tokens.ts
@@ -19,13 +19,15 @@ export type PasswordInputTokenMap = {
 };
 
 export const defaultPasswordInputTokens: PasswordInputTokenMap = {
-    'password-rule-empty-text-color': 'color-neutral-65',
-    'password-rule-error-text-color': 'color-alert-50',
-    'password-rule-success-text-color': 'color-success-50',
+    'password-rule-empty-text-color': 'color-content-subtle',
+    'password-rule-error-text-color': 'color-input-content-error',
+    'password-rule-success-text-color': 'color-input-content-success',
+
+    'password-strength-label-text-color': 'color-content-subtle',
+
     'password-strength-meter-empty-color': 'color-neutral-30',
     'password-strength-meter-weak-color': 'color-alert-50',
     'password-strength-meter-fair-color': 'color-warning-50',
-    'password-strength-meter-good-color': 'color-success-20',
-    'password-strength-meter-strong-color': 'color-success-50',
-    'password-strength-label-text-color': 'color-neutral-65',
+    'password-strength-meter-good-color': 'color-success-50',
+    'password-strength-meter-strong-color': 'color-success-70',
 };

From 179425a74c4f5b1a29f459fbd9b65c1748c86f36 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:12:57 -0400
Subject: [PATCH 28/70] chore(alias-tokens): link phone tokens

---
 .../react/src/themes/tokens/component/phone-input-tokens.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/themes/tokens/component/phone-input-tokens.ts b/packages/react/src/themes/tokens/component/phone-input-tokens.ts
index f4425af232..4659b071ce 100644
--- a/packages/react/src/themes/tokens/component/phone-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/phone-input-tokens.ts
@@ -13,5 +13,5 @@ export type PhoneInputTokenMap = {
 
 export const defaultPhoneInputTokens: PhoneInputTokenMap = {
     'phone-input-background-color': 'transparent-100',
-    'phone-input-mask-text-color': 'color-neutral-65',
+    'phone-input-mask-text-color': 'color-input-content',
 };

From b6968acc4f4738258dd032a319049cd9d52c248c Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:13:50 -0400
Subject: [PATCH 29/70] chore(alias-tokens): link progress tokens

---
 .../tokens/component/progress-tokens.ts       | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/progress-tokens.ts b/packages/react/src/themes/tokens/component/progress-tokens.ts
index c8957e9878..b42e62d9e9 100644
--- a/packages/react/src/themes/tokens/component/progress-tokens.ts
+++ b/packages/react/src/themes/tokens/component/progress-tokens.ts
@@ -31,32 +31,32 @@ export type ProgressTokenMap = {
 };
 
 export const defaultProgressTokens: ProgressTokenMap = {
-    'progress-tracker-notification-badge-color': 'color-white',
-    'progress-tracker-notification-badge-fill-color': 'color-alert-50',
+    'progress-tracker-notification-badge-color': 'color-content-inverse',
+    'progress-tracker-notification-badge-fill-color': 'color-feedback-bg-alert-bold',
 
-    'progress-circle-empty-track-color': 'color-neutral-15',
-    'progress-indicator-empty-track-color': 'color-neutral-15',
-    'progress-tracker-bridge-empty-background-color': 'color-neutral-15',
-    'progress-tracker-bridge-filled-background-color': 'color-brand-50',
+    'progress-circle-empty-track-color': 'color-bg-empty',
+    'progress-indicator-empty-track-color': 'color-bg-empty',
+    'progress-tracker-bridge-empty-background-color': 'color-bg-empty',
+    'progress-tracker-bridge-filled-background-color': 'color-bg-indicator',
 
-    'progress-circle-label-text-color': 'color-black',
-    'progress-circle-result-text-color': 'color-black',
-    'progress-indicator-label-text-color': 'color-black',
+    'progress-circle-label-text-color': 'color-content',
+    'progress-circle-result-text-color': 'color-content',
+    'progress-indicator-label-text-color': 'color-content',
 
     // TO-DO
-    'progress-tracker-step-todo-text-color': 'color-brand-50',
-    'progress-tracker-step-todo-background-color': 'color-white',
+    'progress-tracker-step-todo-text-color': 'color-content',
+    'progress-tracker-step-todo-background-color': 'color-bg',
     // Uncompleted
-    'progress-tracker-step-uncompleted-border-color': 'color-neutral-30',
-    'progress-tracker-step-uncompleted-text-color': 'color-neutral-90',
-    'progress-tracker-step-uncompleted-label-text-color': 'color-neutral-65',
+    'progress-tracker-step-uncompleted-border-color': 'color-border-empty',
+    'progress-tracker-step-uncompleted-text-color': 'color-content',
+    'progress-tracker-step-uncompleted-label-text-color': 'color-content-subtle',
     // Active
-    'progress-tracker-step-active-border-color': 'color-brand-50',
-    'progress-tracker-step-active-text-color': 'color-brand-70',
-    'progress-tracker-step-active-label-text-color': 'color-brand-70',
+    'progress-tracker-step-active-border-color': 'color-bg-indicator',
+    'progress-tracker-step-active-text-color': 'color-content-selected',
+    'progress-tracker-step-active-label-text-color': 'color-content-selected',
     // Completed
-    'progress-tracker-step-completed-background-color': 'color-brand-50',
-    'progress-tracker-step-completed-border-color': 'color-brand-50',
-    'progress-tracker-step-completed-text-color': 'color-white',
-    'progress-tracker-step-completed-label-text-color': 'color-brand-50',
+    'progress-tracker-step-completed-background-color': 'color-bg-indicator',
+    'progress-tracker-step-completed-border-color': 'color-bg-indicator',
+    'progress-tracker-step-completed-text-color': 'color-content-inverse',
+    'progress-tracker-step-completed-label-text-color': 'color-content-brand',
 };

From 4ccf1394e820aa34442ff57fecb3e4f0c2c15326 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:14:39 -0400
Subject: [PATCH 30/70] chore(alias-tokens): link radio button tokens

---
 .../component/radio-button-group-tokens.ts    | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts b/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
index 4f3ebcb761..4f6d1be70b 100644
--- a/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
+++ b/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
@@ -19,13 +19,15 @@ export type RadioButtonGroupTokenMap = {
 };
 
 export const defaultRadioButtonGroupTokens: RadioButtonGroupTokenMap = {
-    'radio-button-background-color': 'color-white',
-    'radio-button-border-color': 'color-neutral-65',
-    'radio-button-disabled-background-color': 'color-neutral-05',
-    'radio-button-disabled-border-color': 'color-neutral-15',
-    'radio-button-hover-border-color': 'color-brand-50',
-    'radio-button-disabled-hover-border-color': 'color-neutral-15',
-    'radio-button-checked-background-color': 'color-brand-50',
-    'radio-button-checked-border-color': 'color-brand-50',
-    'radio-button-group-legend-text-color': 'color-black',
+    'radio-button-background-color': 'color-input-bg',
+    'radio-button-border-color': 'color-input-border',
+    'radio-button-group-legend-text-color': 'color-content',
+    'radio-button-hover-border-color': 'color-input-border-hover',
+
+    'radio-button-disabled-background-color': 'color-input-bg-disabled',
+    'radio-button-disabled-border-color': 'color-input-border-disabled',
+    'radio-button-disabled-hover-border-color': 'color-input-border-disabled',
+
+    'radio-button-checked-background-color': 'color-input-bg-checked',
+    'radio-button-checked-border-color': 'color-input-border-checked',
 };

From f2976ac10026a4c9346c060ce220b1bd97ee14e6 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:16:28 -0400
Subject: [PATCH 31/70] chore(alias-tokens): link radio card tokens

---
 .../tokens/component/radio-card-tokens.ts     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/radio-card-tokens.ts b/packages/react/src/themes/tokens/component/radio-card-tokens.ts
index 556c4c0f2c..f8041e7066 100644
--- a/packages/react/src/themes/tokens/component/radio-card-tokens.ts
+++ b/packages/react/src/themes/tokens/component/radio-card-tokens.ts
@@ -21,18 +21,18 @@ export type RadioCardTokenMap = {
 };
 
 export const defaultRadioCardTokens: RadioCardTokenMap = {
-    'radio-card-background-color': 'color-white',
-    'radio-card-text-color': 'color-black',
-    'radio-card-border-color': 'color-black',
+    'radio-card-background-color': 'color-input-bg',
+    'radio-card-border-color': 'color-input-border',
+    'radio-card-text-color': 'color-content',
 
-    'radio-card-hover-background-color': 'color-neutral-15',
-    'radio-card-hover-border-color': 'color-black',
-    'radio-card-hover-text-color': 'color-black',
+    'radio-card-hover-background-color': 'color-input-bg-hover',
+    'radio-card-hover-border-color': 'color-input-border-hover',
+    'radio-card-hover-text-color': 'color-content-hover',
 
-    'radio-card-disabled-background-color': 'color-neutral-05',
-    'radio-card-disabled-border-color': 'color-neutral-15',
-    'radio-card-disabled-text-color': 'color-neutral-30',
+    'radio-card-disabled-background-color': 'color-input-bg-disabled',
+    'radio-card-disabled-border-color': 'color-input-border-disabled',
+    'radio-card-disabled-text-color': 'color-input-content-disabled',
 
-    'radio-card-selected-background-color': 'color-brand-05',
-    'radio-card-selected-border-color': 'color-brand-50',
+    'radio-card-selected-background-color': 'color-input-bg-selected',
+    'radio-card-selected-border-color': 'color-input-border-selected',
 };

From 3147e2744864d393475e4b779ccba435485d8b4d Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:17:14 -0400
Subject: [PATCH 32/70] chore(alias-tokens): link search input tokens

---
 .../src/themes/tokens/component/search-input-tokens.ts      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/search-input-tokens.ts b/packages/react/src/themes/tokens/component/search-input-tokens.ts
index 57b7179a92..607e290797 100644
--- a/packages/react/src/themes/tokens/component/search-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/search-input-tokens.ts
@@ -15,9 +15,9 @@ export type SearchInputTokenMap = {
 };
 
 export const defaultSearchInputTokens: SearchInputTokenMap = {
-    'search-input-disabled-icon-color': 'color-neutral-30',
-    'search-input-icon-color': 'color-neutral-65',
+    'search-input-disabled-icon-color': 'color-input-content-disabled',
+    'search-input-icon-color': 'color-input-content',
+    'search-input-label-text-color': 'color-input-content',
     'search-input-reset-button-background-color': 'transparent-100',
     'search-input-reset-button-border-color': 'transparent-100',
-    'search-input-label-text-color': 'color-neutral-65',
 };

From 4ed35b38a50e414fb63b27557bf673e6707f563e Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:25:38 -0400
Subject: [PATCH 33/70] chore(alias-tokens): link sectional banner tokens

---
 .../component/sectional-banner-tokens.ts      | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts b/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts
index cb56396fad..f60b2ad661 100644
--- a/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts
@@ -28,27 +28,27 @@ export type SectionalBannerTokenMap = {
 };
 
 export const defaultSectionalBannerTokens: SectionalBannerTokenMap = {
-    'sectional-banner-neutral-background-color': 'color-neutral-02',
-    'sectional-banner-neutral-border-color': 'color-neutral-50',
-    'sectional-banner-neutral-icon-color': 'color-neutral-65',
+    'sectional-banner-neutral-background-color': 'color-bg-neutral-subtlest',
+    'sectional-banner-neutral-border-color': 'color-border-bold',
+    'sectional-banner-neutral-icon-color': 'color-content-subtle',
 
-    'sectional-banner-info-background-color': 'color-informative-02',
-    'sectional-banner-info-border-color': 'color-informative-50',
-    'sectional-banner-info-icon-color': 'color-informative-70',
+    'sectional-banner-info-background-color': 'color-feedback-bg-informative-subtlest',
+    'sectional-banner-info-border-color': 'color-feedback-border-informative',
+    'sectional-banner-info-icon-color': 'color-feedback-content-informative',
 
-    'sectional-banner-discovery-background-color': 'color-discovery-02',
-    'sectional-banner-discovery-border-color': 'color-discovery-50',
-    'sectional-banner-discovery-icon-color': 'color-discovery-70',
+    'sectional-banner-discovery-background-color': 'color-feedback-bg-discovery-subtlest',
+    'sectional-banner-discovery-border-color': 'color-feedback-border-discovery',
+    'sectional-banner-discovery-icon-color': 'color-feedback-content-discovery',
 
-    'sectional-banner-success-background-color': 'color-success-02',
-    'sectional-banner-success-border-color': 'color-success-50',
-    'sectional-banner-success-icon-color': 'color-success-70',
+    'sectional-banner-success-background-color': 'color-feedback-bg-success-subtlest',
+    'sectional-banner-success-border-color': 'color-feedback-border-success',
+    'sectional-banner-success-icon-color': 'color-feedback-content-success',
 
-    'sectional-banner-warning-background-color': 'color-warning-02',
-    'sectional-banner-warning-border-color': 'color-warning-50',
-    'sectional-banner-warning-icon-color': 'color-warning-80',
+    'sectional-banner-warning-background-color': 'color-feedback-bg-warning-subtlest',
+    'sectional-banner-warning-border-color': 'color-feedback-border-warning',
+    'sectional-banner-warning-icon-color': 'color-feedback-content-warning',
 
-    'sectional-banner-alert-background-color': 'color-alert-02',
-    'sectional-banner-alert-border-color': 'color-alert-50',
-    'sectional-banner-alert-icon-color': 'color-alert-70',
+    'sectional-banner-alert-background-color': 'color-feedback-bg-alert-subtlest',
+    'sectional-banner-alert-border-color': 'color-feedback-border-alert',
+    'sectional-banner-alert-icon-color': 'color-feedback-content-alert',
 };

From 3782a9daa1b45bbbb90fb0e603bc69c5754ebc09 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:26:22 -0400
Subject: [PATCH 34/70] chore(alias-tokens): link side drawer tokens

---
 .../react/src/themes/tokens/component/side-drawer-tokens.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/side-drawer-tokens.ts b/packages/react/src/themes/tokens/component/side-drawer-tokens.ts
index 3d985c42e3..01b5e28833 100644
--- a/packages/react/src/themes/tokens/component/side-drawer-tokens.ts
+++ b/packages/react/src/themes/tokens/component/side-drawer-tokens.ts
@@ -12,6 +12,6 @@ export type SideDrawerTokensMap = {
 }
 
 export const defaultSideDrawerTokens: SideDrawerTokensMap = {
-    'side-drawer-background-color': 'color-white',
-    'side-drawer-box-shadow-color': 'transparent-dark-10',
+    'side-drawer-background-color': 'color-bg-overlay',
+    'side-drawer-box-shadow-color': 'color-box-shadow',
 };

From 434cf3286531dae93dc524b25db32f5f3f875099 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:29:03 -0400
Subject: [PATCH 35/70] chore(alias-tokens): link spinner tokens

---
 packages/react/src/themes/tokens/component/spinner-tokens.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/themes/tokens/component/spinner-tokens.ts b/packages/react/src/themes/tokens/component/spinner-tokens.ts
index d1734ba1a5..96b11b65cd 100644
--- a/packages/react/src/themes/tokens/component/spinner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/spinner-tokens.ts
@@ -11,5 +11,5 @@ export type SpinnerTokenMap = {
 };
 
 export const defaultSpinnerTokens: SpinnerTokenMap = {
-    'spinner-fill-color': 'color-brand-50',
+    'spinner-fill-color': 'color-bg-indicator',
 };

From 3c0e5860ea6811bfa86cdc0256d151b1332f3561 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:30:28 -0400
Subject: [PATCH 36/70] chore(alias-tokens): link status tokens

---
 .../react/src/themes/tokens/component/status-tokens.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/status-tokens.ts b/packages/react/src/themes/tokens/component/status-tokens.ts
index 9fecd08df4..dd639d40d4 100644
--- a/packages/react/src/themes/tokens/component/status-tokens.ts
+++ b/packages/react/src/themes/tokens/component/status-tokens.ts
@@ -15,9 +15,9 @@ export type StatusTokenMap = {
 };
 
 export const defaultStatusTokens: StatusTokenMap = {
-    'status-circle-blocked-background-color': 'color-alert-50',
-    'status-circle-enabled-background-color': 'color-success-50',
-    'status-circle-disabled-background-color': 'color-white',
-    'status-circle-disabled-border-color': 'color-neutral-65',
-    'status-disabled-text-color': 'color-neutral-65',
+    'status-circle-blocked-background-color': 'color-feedback-bg-alert-bold',
+    'status-circle-enabled-background-color': 'color-feedback-bg-success-bold',
+    'status-circle-disabled-background-color': 'color-bg-disabled',
+    'status-circle-disabled-border-color': 'color-border-disabled',
+    'status-disabled-text-color': 'color-content-disabled',
 };

From 51d0f84bfb47c4fa2f8308f118dee9d693672a42 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:31:52 -0400
Subject: [PATCH 37/70] chore(alias-tokens): link stepper tokens

---
 .../src/themes/tokens/component/stepper-tokens.ts  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/stepper-tokens.ts b/packages/react/src/themes/tokens/component/stepper-tokens.ts
index 49dc0edd5c..1c19ecb8ae 100644
--- a/packages/react/src/themes/tokens/component/stepper-tokens.ts
+++ b/packages/react/src/themes/tokens/component/stepper-tokens.ts
@@ -17,11 +17,11 @@ export type StepperTokenMap = {
 };
 
 export const defaultStepperTokens: StepperTokenMap = {
-    'stepper-button-border-color': 'color-neutral-65',
-    'stepper-button-disabled-background-color': 'color-neutral-05',
-    'stepper-button-disabled-border-color': 'color-neutral-15',
-    'stepper-button-disabled-text-color': 'color-neutral-30',
-    'stepper-button-hover-background-color': 'color-neutral-15',
-    'stepper-button-text-color': 'color-neutral-65',
-    'stepper-button-background-color': 'color-white',
+    'stepper-button-background-color': 'color-input-bg',
+    'stepper-button-border-color': 'color-input-border',
+    'stepper-button-text-color': 'color-input-content',
+    'stepper-button-hover-background-color': 'color-input-bg-hover',
+    'stepper-button-disabled-background-color': 'color-input-bg-disabled',
+    'stepper-button-disabled-border-color': 'color-input-border-disabled',
+    'stepper-button-disabled-text-color': 'color-input-content-disabled',
 };

From 686e939aa4bae9b5454f0b2c925ebf254259d07c Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:36:27 -0400
Subject: [PATCH 38/70] chore(alias-tokens): link table tokens

---
 .../themes/tokens/component/table-tokens.ts   | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/table-tokens.ts b/packages/react/src/themes/tokens/component/table-tokens.ts
index 60ec5fba6e..40c1afd8e1 100644
--- a/packages/react/src/themes/tokens/component/table-tokens.ts
+++ b/packages/react/src/themes/tokens/component/table-tokens.ts
@@ -28,25 +28,27 @@ export type TableTokenMap = {
 };
 
 export const defaultTableTokens: TableTokenMap = {
-    'table-text-color': 'color-neutral-90',
-    'table-background-color': 'color-white',
+    'table-background-color': 'transparent-100',
+    'table-text-color': 'color-content',
 
-    'table-header-background-color': 'color-white',
-    'table-header-border-color': 'color-neutral-15',
+    'table-header-background-color': 'color-bg',
+    'table-header-border-color': 'color-border',
     'table-body-background-color': 'transparent-100',
-    'table-footer-border-color': 'color-neutral-15',
-    'table-footer-background-color': 'color-white',
+    'table-footer-background-color': 'color-bg',
+    'table-footer-border-color': 'color-border',
 
-    'table-cell-hover-background-color': 'color-neutral-15',
-    'table-cell-number-text-color': 'color-neutral-65',
+    'table-cell-hover-background-color': 'color-bg-hover',
+    'table-cell-number-text-color': 'color-content-subtle',
+
+    'table-row-border-color': 'color-border',
+    'table-row-odd-background-color': 'color-bg-isolated',
+    'table-row-selected-background-color': 'color-bg-selected',
+    'table-row-error-background-color': 'color-feedback-bg-alert-subtle',
+    'table-row-error-border-color': 'color-feedback-border-alert',
+
+    'table-sort-button-ascending-icon-color': 'color-content-subtle',
+    'table-sort-button-descending-icon-color': 'color-content-subtle',
+    'table-sort-button-default-icon-color': 'color-content-subtle',
 
     'table-group-border-color': 'color-neutral-15',
-    'table-row-border-color': 'color-neutral-15',
-    'table-row-odd-background-color': 'color-neutral-02',
-    'table-row-selected-background-color': 'color-brand-05',
-    'table-row-error-background-color': 'color-alert-05',
-    'table-row-error-border-color': 'color-alert-50',
-    'table-sort-button-ascending-icon-color': 'color-neutral-65',
-    'table-sort-button-descending-icon-color': 'color-neutral-65',
-    'table-sort-button-default-icon-color': 'color-neutral-65',
 };

From 9ddd6055465f60427e6c4581190dd845bc1fffbd Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:38:59 -0400
Subject: [PATCH 39/70] chore(alias-tokens): link tag tokens

---
 .../src/themes/tokens/component/tag-tokens.ts | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/tag-tokens.ts b/packages/react/src/themes/tokens/component/tag-tokens.ts
index 2df3101f1f..4b27a67a4b 100644
--- a/packages/react/src/themes/tokens/component/tag-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tag-tokens.ts
@@ -62,20 +62,20 @@ export type TagTokenMap = {
 };
 
 export const defaultTagTokens: TagTokenMap = {
-    'tag-background-color': 'color-neutral-05',
-    'tag-border-color': 'color-neutral-50',
-    'tag-text-color': 'color-neutral-90',
-    'tag-icon-color': 'color-neutral-90',
+    'tag-background-color': 'color-bg-neutral-subtle',
+    'tag-border-color': 'color-border-bold',
+    'tag-text-color': 'color-content',
+    'tag-icon-color': 'color-content',
 
-    'tag-hover-background-color': 'color-neutral-15',
-    'tag-hover-border-color': 'color-black',
-    'tag-hover-text-color': 'color-black',
-    'tag-hover-icon-color': 'color-black',
+    'tag-hover-background-color': 'color-bg-hover',
+    'tag-hover-border-color': 'color-border-hover',
+    'tag-hover-icon-color': 'color-content-hover',
+    'tag-hover-text-color': 'color-content-hover',
 
-    'tag-selected-background-color': 'color-brand-05',
-    'tag-selected-border-color': 'color-brand-70',
-    'tag-selected-text-color': 'color-brand-70',
-    'tag-selected-icon-color': 'color-brand-70',
+    'tag-selected-background-color': 'color-bg-selected',
+    'tag-selected-border-color': 'color-border-selected',
+    'tag-selected-text-color': 'color-content-selected',
+    'tag-selected-icon-color': 'color-content-selected',
 
     'tag-decorative-01-background-color': 'color-decorative-01-05',
     'tag-decorative-01-border-color': 'color-decorative-01-50',

From 448f5cc12f5f447b047b9c4c9807213eac8e2e88 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:40:53 -0400
Subject: [PATCH 40/70] chore(alias-tokens): link text area tokens

---
 .../react/src/themes/tokens/component/text-area-tokens.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/text-area-tokens.ts b/packages/react/src/themes/tokens/component/text-area-tokens.ts
index 2527ab9f24..a47c4bdc69 100644
--- a/packages/react/src/themes/tokens/component/text-area-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-area-tokens.ts
@@ -12,6 +12,6 @@ export type TextAreaTokenMap = {
 };
 
 export const defaultTextAreaTokens: TextAreaTokenMap = {
-    'text-area-counter-error-text-color': 'color-alert-50',
-    'text-area-counter-text-color': 'color-neutral-65',
+    'text-area-counter-error-text-color': 'color-input-content-error',
+    'text-area-counter-text-color': 'color-input-content',
 };

From 17ae97db10b341453ebdb547240f25fdeee00cc0 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:43:40 -0400
Subject: [PATCH 41/70] chore(alias-tokens): link text input tokens

---
 .../tokens/component/text-input-tokens.ts     | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/text-input-tokens.ts b/packages/react/src/themes/tokens/component/text-input-tokens.ts
index a6bcd83002..086a581799 100644
--- a/packages/react/src/themes/tokens/component/text-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-input-tokens.ts
@@ -19,13 +19,15 @@ export type TextInputTokenMap = {
 };
 
 export const defaultTextInputTokens: TextInputTokenMap = {
-    'text-input-background-color': 'color-white',
-    'text-input-border-color': 'color-neutral-65',
-    'text-input-error-border-color': 'color-alert-50',
-    'text-input-text-color': 'color-black',
-    'text-input-placeholder-text-color': 'color-neutral-65',
-    'text-input-disabled-background-color': 'color-neutral-05',
-    'text-input-disabled-border-color': 'color-neutral-15',
-    'text-input-disabled-text-color': 'color-neutral-15',
-    'text-input-placeholder-disabled-text-color': 'color-neutral-30',
+    'text-input-background-color': 'color-input-bg',
+    'text-input-border-color': 'color-input-border',
+    'text-input-text-color': 'color-content',
+    'text-input-placeholder-text-color': 'color-input-content',
+
+    'text-input-error-border-color': 'color-input-border-error',
+    'text-input-disabled-background-color': 'color-input-bg-disabled',
+    'text-input-disabled-border-color': 'color-input-border-disabled',
+    'text-input-disabled-text-color': 'color-input-content-disabled',
+
+    'text-input-placeholder-disabled-text-color': 'color-input-content-disabled',
 };

From 9c8cbbb5bcc237159466a46ce20b41fb3f6f65a9 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:50:29 -0400
Subject: [PATCH 42/70] chore(alias-tokens): link toast tokens

---
 .../themes/tokens/component/toast-tokens.ts   | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/toast-tokens.ts b/packages/react/src/themes/tokens/component/toast-tokens.ts
index 2efac00648..8a6bba198b 100644
--- a/packages/react/src/themes/tokens/component/toast-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toast-tokens.ts
@@ -25,23 +25,23 @@ export type ToastTokenMap = {
 };
 
 export const defaultToastTokens: ToastTokenMap = {
-    'toast-neutral-background-color': 'color-neutral-65',
-    'toast-neutral-text-color': 'color-white',
-    'toast-neutral-icon-color': 'color-white',
+    'toast-neutral-background-color': 'color-bg-neutral-bold',
+    'toast-neutral-text-color': 'color-content-inverse',
+    'toast-neutral-icon-color': 'color-content-inverse',
 
-    'toast-alert-background-color': 'color-alert-50',
-    'toast-alert-text-color': 'color-white',
-    'toast-alert-icon-color': 'color-white',
+    'toast-discovery-background-color': 'color-feedback-bg-discovery-bold',
+    'toast-discovery-text-color': 'color-content-inverse',
+    'toast-discovery-icon-color': 'color-content-inverse',
 
-    'toast-discovery-background-color': 'color-discovery-50',
-    'toast-discovery-text-color': 'color-white',
-    'toast-discovery-icon-color': 'color-white',
+    'toast-success-background-color': 'color-feedback-bg-success-bold',
+    'toast-success-text-color': 'color-content-inverse',
+    'toast-success-icon-color': 'color-content-inverse',
 
-    'toast-success-background-color': 'color-success-50',
-    'toast-success-text-color': 'color-white',
-    'toast-success-icon-color': 'color-white',
+    'toast-warning-background-color': 'color-feedback-bg-warning-bold',
+    'toast-warning-text-color': 'color-content',
+    'toast-warning-icon-color': 'color-content',
 
-    'toast-warning-background-color': 'color-warning-50',
-    'toast-warning-text-color': 'color-neutral-90',
-    'toast-warning-icon-color': 'color-neutral-90',
+    'toast-alert-background-color': 'color-feedback-bg-alert-bold',
+    'toast-alert-text-color': 'color-content-inverse',
+    'toast-alert-icon-color': 'color-content-inverse',
 };

From 1879060c0d98999fcb22d6c63342bc0cca6c4ea2 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:57:10 -0400
Subject: [PATCH 43/70] chore(alias-tokens): dropdown menu tokens rename

---
 .../components/dropdown-menu/list-items/external-item.tsx   | 4 ++--
 .../src/themes/tokens/component/dropdown-menu-tokens.ts     | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/dropdown-menu/list-items/external-item.tsx b/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
index 399da6216d..f2f84a3666 100644
--- a/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
+++ b/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
@@ -37,8 +37,8 @@ export const StyledExternalLink = styled(ExternalLink)<ExternalItemsStyledProps>
         fill: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-fill-color']};
 
         svg {
-            color: ${({ theme }) => theme.component['dropdown-menu-external-item-icon-visited-text-color']};
-            fill: ${({ theme }) => theme.component['dropdown-menu-external-item-icon-visited-fill-color']};
+            color: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-icon-color']};
+            fill: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-fill-color']};
         }
     }
 
diff --git a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
index 6bc2c1c2b8..5df5e0b681 100644
--- a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
+++ b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
@@ -17,8 +17,7 @@ export type DropdownMenuTokens =
     | 'dropdown-menu-external-item-hover-background-color'
     | 'dropdown-menu-external-item-visited-text-color'
     | 'dropdown-menu-external-item-visited-fill-color'
-    | 'dropdown-menu-external-item-icon-visited-text-color'
-    | 'dropdown-menu-external-item-icon-visited-fill-color'
+    | 'dropdown-menu-external-item-visited-icon-color'
     | 'dropdown-menu-external-item-disabled-text-color'
     | 'dropdown-menu-external-item-disabled-fill-color'
     | 'dropdown-menu-group-border-color'
@@ -58,8 +57,7 @@ export const defaultDropdownMenuTokens: DropdownMenuTokenMap = {
     'dropdown-menu-external-item-disabled-text-color': 'color-menu-item-content-disabled',
     'dropdown-menu-external-item-disabled-fill-color': 'color-menu-item-content-disabled',
 
-    'dropdown-menu-external-item-icon-visited-text-color': 'color-link-content-visited',
-    'dropdown-menu-external-item-icon-visited-fill-color': 'color-link-content-visited',
+    'dropdown-menu-external-item-visited-icon-color': 'color-link-content-visited',
     'dropdown-menu-external-item-visited-text-color': 'color-link-content-visited',
     'dropdown-menu-external-item-visited-fill-color': 'color-link-content-visited',
 

From b7f2e5904b5cb913c457dc331c5deb6db3a9f225 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:57:49 -0400
Subject: [PATCH 44/70] chore(alias-tokens): link toggle button group tokens

---
 .../component/toggle-button-group-tokens.ts   | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts b/packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts
index f9f0c3dd72..b6a198be3d 100644
--- a/packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts
@@ -22,19 +22,19 @@ export type ToggleButtonGroupTokenMap = {
 };
 
 export const defaultToggleButtonGroupTokens: ToggleButtonGroupTokenMap = {
-    'toggle-button-background-color': 'color-white',
-    'toggle-button-text-color': 'color-neutral-65',
-    'toggle-button-border-color': 'color-neutral-50',
+    'toggle-button-background-color': 'color-input-bg',
+    'toggle-button-border-color': 'color-input-border',
+    'toggle-button-text-color': 'color-input-content',
 
-    'toggle-button-hover-background-color': 'color-neutral-15',
-    'toggle-button-hover-border-color': 'color-neutral-65',
-    'toggle-button-hover-text-color': 'color-black',
+    'toggle-button-hover-background-color': 'color-input-bg-hover',
+    'toggle-button-hover-border-color': 'color-input-border-hover',
+    'toggle-button-hover-text-color': 'color-input-content-hover',
 
-    'toggle-button-disabled-background-color': 'color-white',
-    'toggle-button-disabled-border-color': 'color-neutral-30',
-    'toggle-button-disabled-text-color': 'color-neutral-30',
+    'toggle-button-disabled-background-color': 'color-input-bg-disabled',
+    'toggle-button-disabled-border-color': 'color-input-border-disabled',
+    'toggle-button-disabled-text-color': 'color-input-content-disabled',
 
-    'toggle-button-selected-background-color': 'color-brand-05',
-    'toggle-button-selected-border-color': 'color-brand-80',
-    'toggle-button-selected-text-color': 'color-brand-80',
+    'toggle-button-selected-background-color': 'color-input-bg-selected',
+    'toggle-button-selected-border-color': 'color-input-border-selected',
+    'toggle-button-selected-text-color': 'color-input-content-selected',
 };

From 823b2eb2101d32f18075fb0db050b42bb0fe5169 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:58:57 -0400
Subject: [PATCH 45/70] chore(alias-tokens): link toggle switch tokens

---
 .../tokens/component/toggle-switch-tokens.ts  | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts b/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
index fc992be364..eebbeb2a60 100644
--- a/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
@@ -20,14 +20,16 @@ export type ToggleSwitchTokenMap = {
 };
 
 export const defaultToggleSwitchTokens: ToggleSwitchTokenMap = {
-    'toggle-switch-background-color': 'color-neutral-50',
-    'toggle-switch-border-color': 'color-neutral-30',
-    'toggle-switch-disabled-background-color': 'color-neutral-15',
-    'toggle-switch-disabled-border-color': 'color-neutral-15',
-    'toggle-switch-disabled-toggled-background-color': 'color-success-20',
-    'toggle-switch-disabled-toggled-border-color': 'color-success-20',
-    'toggle-switch-toggled-background-color': 'color-success-50',
-    'toggle-switch-toggled-border-color': 'color-success-50',
-    'toggle-switch-knob-background-color': 'color-white',
-    'toggle-switch-label-text-color': 'color-black',
+    'toggle-switch-background-color': 'color-bg-neutral-bold',
+    'toggle-switch-border-color': 'color-bg-neutral-bold',
+    'toggle-switch-label-text-color': 'color-content',
+    'toggle-switch-knob-background-color': 'color-input-bg',
+
+    'toggle-switch-toggled-background-color': 'color-feedback-bg-success-bold',
+    'toggle-switch-toggled-border-color': 'color-feedback-bg-success-bold',
+
+    'toggle-switch-disabled-background-color': 'color-bg-neutral-bold-disabled',
+    'toggle-switch-disabled-border-color': 'color-bg-neutral-bold-disabled',
+    'toggle-switch-disabled-toggled-background-color': 'color-feedback-bg-success-bold-disabled',
+    'toggle-switch-disabled-toggled-border-color': 'color-feedback-bg-success-bold-disabled',
 };

From d61a3d7c8668cb2ce794f327a42e012f41862599 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 09:59:56 -0400
Subject: [PATCH 46/70] chore(alias-tokens): link toggltip tokens

---
 .../react/src/themes/tokens/component/toggletip-tokens.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/toggletip-tokens.ts b/packages/react/src/themes/tokens/component/toggletip-tokens.ts
index 12883c81ba..0077227e08 100644
--- a/packages/react/src/themes/tokens/component/toggletip-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toggletip-tokens.ts
@@ -13,7 +13,7 @@ export type ToggleTipTokenMap = {
 };
 
 export const defaultToggleTipTokens: ToggleTipTokenMap = {
-    'toggletip-popper-container-background-color': 'color-white',
-    'toggletip-popper-container-border-color': 'color-neutral-65',
-    'toggletip-popper-container-text-color': 'color-black',
+    'toggletip-popper-container-background-color': 'color-bg-overlay',
+    'toggletip-popper-container-border-color': 'color-border-overlay',
+    'toggletip-popper-container-text-color': 'color-content',
 };

From cb4a7423d37f4855a0724d3c33caafa503b96f6b Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 10:03:34 -0400
Subject: [PATCH 47/70] chore(alias-tokens): link tooltip tokens

---
 .../src/themes/tokens/component/tooltip-tokens.ts    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/tooltip-tokens.ts b/packages/react/src/themes/tokens/component/tooltip-tokens.ts
index 15aa878be4..338af7d91e 100644
--- a/packages/react/src/themes/tokens/component/tooltip-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tooltip-tokens.ts
@@ -16,10 +16,10 @@ export type TooltipTokenMap = {
 };
 
 export const defaultTooltipTokens: TooltipTokenMap = {
-    'tooltip-icon-color': 'color-neutral-90',
-    'tooltip-inverted-icon-color': 'color-white',
-    'tooltip-popper-container-border-color': 'color-white',
-    'tooltip-popper-container-text-color': 'color-white',
-    'tooltip-popper-container-success-background-color': 'color-success-50',
-    'tooltip-popper-container-default-background-color': 'color-neutral-65',
+    'tooltip-icon-color': 'color-content',
+    'tooltip-inverted-icon-color': 'color-content-inverse',
+    'tooltip-popper-container-border-color': 'color-border-inverse',
+    'tooltip-popper-container-text-color': 'color-content-inverse',
+    'tooltip-popper-container-default-background-color': 'color-bg-neutral-bold',
+    'tooltip-popper-container-success-background-color': 'color-feedback-bg-success-bold',
 };

From d2c2bd599ab77755924cf47465c099b0881ca610 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 10:39:01 -0400
Subject: [PATCH 48/70] chore(alias-tokens): cleaning global banner tokens

---
 .../global-banner/global-banner.tsx           | 43 ++++++-------------
 .../tokens/component/global-banner-tokens.ts  | 26 +----------
 2 files changed, 13 insertions(+), 56 deletions(-)

diff --git a/packages/react/src/components/global-banner/global-banner.tsx b/packages/react/src/components/global-banner/global-banner.tsx
index 38100364cb..16eddff551 100644
--- a/packages/react/src/components/global-banner/global-banner.tsx
+++ b/packages/react/src/components/global-banner/global-banner.tsx
@@ -2,7 +2,6 @@ import {
     forwardRef,
     MouseEvent,
     MouseEventHandler,
-    PropsWithChildren,
     ReactElement,
     ReactNode,
     Ref,
@@ -132,32 +131,10 @@ const ActionButton = styled(Button).attrs(
     }
 `;
 
-interface DismissButtonProps {
-    bannerType: Exclude<GlobalBannerType, 'alert'>;
-}
-
-function getDismissButtonColors(
-    { bannerType, theme }: StyledProps<ActionButtonProps>,
-    state: GlobalBannerButtonState,
-): FlattenSimpleInterpolation | null {
-    const statePrefix = state === 'hover' ? '-hover' : '';
-    if (bannerType !== 'alert') {
-        return css`
-            background-color: ${theme.component[`global-banner-${bannerType}-dismiss-button${statePrefix}-background-color`]};
-            color: ${theme.component[`global-banner-${bannerType}-dismiss-button${statePrefix}-text-color`]};
-        `;
-    }
-    return null;
-}
-
-const DismissButton = styled(Button).attrs(
-    { buttonType: 'tertiary', inverted: true },
-)<PropsWithChildren<DismissButtonProps>>`
-    ${(props) => getDismissButtonColors(props, 'default')};
-
-    &:hover {
-        ${(props) => getDismissButtonColors(props, 'hover')};
-    }
+const StyledButton = styled(Button)<{ bannerType: GlobalBannerType }>`
+    ${({ bannerType, theme }) => (
+        bannerType === 'warning' ? `color: ${theme.component['global-banner-warning-action-button-text-color']};` : ''
+    )};
 `;
 
 interface GlobalBannerProps {
@@ -242,25 +219,29 @@ export const GlobalBanner = forwardRef(({
                     )}
 
                     {secondaryActionButton && type !== 'alert' && (
-                        <DismissButton
+                        <StyledButton
                             data-testid="secondary-action-button"
+                            buttonType="tertiary"
                             bannerType={type}
+                            inverted={type !== 'warning'}
                             onClick={secondaryActionButton.onClick}
                             type="button"
                         >
                             {secondaryActionButton.label}
-                        </DismissButton>
+                        </StyledButton>
                     )}
 
                     {hasDismissButton && (
-                        <DismissButton
+                        <StyledButton
                             data-testid="dismiss-button"
+                            buttonType="tertiary"
                             bannerType={type}
+                            inverted={type !== 'warning'}
                             onClick={handleDismiss}
                             type="button"
                         >
                             {t('ignore')}
-                        </DismissButton>
+                        </StyledButton>
                     )}
                 </ButtonContainer>
             )}
diff --git a/packages/react/src/themes/tokens/component/global-banner-tokens.ts b/packages/react/src/themes/tokens/component/global-banner-tokens.ts
index 101ba0936a..cbcf84578f 100644
--- a/packages/react/src/themes/tokens/component/global-banner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/global-banner-tokens.ts
@@ -8,10 +8,6 @@ export type GlobalBannerTokens =
     | 'global-banner-neutral-action-button-text-color'
     | 'global-banner-neutral-action-button-hover-border-color'
     | 'global-banner-neutral-action-button-hover-text-color'
-    | 'global-banner-neutral-dismiss-button-background-color'
-    | 'global-banner-neutral-dismiss-button-text-color'
-    | 'global-banner-neutral-dismiss-button-hover-background-color'
-    | 'global-banner-neutral-dismiss-button-hover-text-color'
     | 'global-banner-alert-background-color'
     | 'global-banner-alert-text-color'
     | 'global-banner-alert-action-button-border-color'
@@ -24,20 +20,12 @@ export type GlobalBannerTokens =
     | 'global-banner-discovery-action-button-text-color'
     | 'global-banner-discovery-action-button-hover-border-color'
     | 'global-banner-discovery-action-button-hover-text-color'
-    | 'global-banner-discovery-dismiss-button-background-color'
-    | 'global-banner-discovery-dismiss-button-text-color'
-    | 'global-banner-discovery-dismiss-button-hover-background-color'
-    | 'global-banner-discovery-dismiss-button-hover-text-color'
     | 'global-banner-warning-background-color'
     | 'global-banner-warning-text-color'
     | 'global-banner-warning-action-button-border-color'
     | 'global-banner-warning-action-button-text-color'
     | 'global-banner-warning-action-button-hover-border-color'
-    | 'global-banner-warning-action-button-hover-text-color'
-    | 'global-banner-warning-dismiss-button-background-color'
-    | 'global-banner-warning-dismiss-button-text-color'
-    | 'global-banner-warning-dismiss-button-hover-background-color'
-    | 'global-banner-warning-dismiss-button-hover-text-color';
+    | 'global-banner-warning-action-button-hover-text-color';
 
 export type GlobalBannerTokenValue = AliasTokens | RefTokens;
 
@@ -50,12 +38,8 @@ export const defaultGlobalBannerTokens: GlobalBannerTokenMap = {
      * neutral
      */
     'global-banner-neutral-background-color': 'color-bg-neutral-bold',
-    'global-banner-neutral-dismiss-button-background-color': 'transparent-100',
-    'global-banner-neutral-dismiss-button-hover-background-color': 'transparent-dark-50',
     'global-banner-neutral-text-color': 'color-content-inverse',
     'global-banner-neutral-action-button-text-color': 'color-content-inverse',
-    'global-banner-neutral-dismiss-button-text-color': 'color-content-inverse',
-    'global-banner-neutral-dismiss-button-hover-text-color': 'color-content-inverse',
     'global-banner-neutral-action-button-border-color': 'color-border-inverse',
     'global-banner-neutral-action-button-hover-border-color': 'transparent-light-50',
     'global-banner-neutral-action-button-hover-text-color': 'transparent-light-50',
@@ -64,12 +48,8 @@ export const defaultGlobalBannerTokens: GlobalBannerTokenMap = {
      * discovery
      */
     'global-banner-discovery-background-color': 'color-feedback-bg-discovery-bold',
-    'global-banner-discovery-dismiss-button-background-color': 'transparent-100',
-    'global-banner-discovery-dismiss-button-hover-background-color': 'transparent-dark-50',
     'global-banner-discovery-text-color': 'color-content-inverse',
     'global-banner-discovery-action-button-text-color': 'color-content-inverse',
-    'global-banner-discovery-dismiss-button-text-color': 'color-content-inverse',
-    'global-banner-discovery-dismiss-button-hover-text-color': 'color-content-inverse',
     'global-banner-discovery-action-button-border-color': 'color-border-inverse',
     'global-banner-discovery-action-button-hover-border-color': 'transparent-light-50',
     'global-banner-discovery-action-button-hover-text-color': 'transparent-light-50',
@@ -78,12 +58,8 @@ export const defaultGlobalBannerTokens: GlobalBannerTokenMap = {
      * warning
      */
     'global-banner-warning-background-color': 'color-feedback-bg-warning-bold',
-    'global-banner-warning-dismiss-button-background-color': 'transparent-100',
-    'global-banner-warning-dismiss-button-hover-background-color': 'transparent-dark-30',
     'global-banner-warning-text-color': 'color-content',
     'global-banner-warning-action-button-text-color': 'color-content',
-    'global-banner-warning-dismiss-button-hover-text-color': 'color-content',
-    'global-banner-warning-dismiss-button-text-color': 'color-content',
     'global-banner-warning-action-button-border-color': 'color-content',
     'global-banner-warning-action-button-hover-border-color': 'transparent-dark-60',
     'global-banner-warning-action-button-hover-text-color': 'transparent-dark-60',

From 97f6ecb8c4e4bc5494843d263a02c8ab14425e5d Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 10:42:21 -0400
Subject: [PATCH 49/70] chore(alias-tokens): remove listbox tokens

---
 packages/react/src/components/listbox/listbox.tsx            | 2 +-
 packages/react/src/themes/tokens/component/listbox-tokens.ts | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react/src/components/listbox/listbox.tsx b/packages/react/src/components/listbox/listbox.tsx
index f5640bd563..9eef6a88e6 100644
--- a/packages/react/src/components/listbox/listbox.tsx
+++ b/packages/react/src/components/listbox/listbox.tsx
@@ -95,7 +95,7 @@ const Container = styled.div<ContainerProps>`
     background-color: ${({ theme }) => theme.component['listbox-background-color']};
     border: 1px solid ${({ theme }) => theme.component['listbox-border-color']};
     border-radius: var(--border-radius);
-    box-shadow: 0 0 0 1px ${({ theme }) => theme.component['listbox-box-shadow-frame-color']}, 0 10px 20px 0 ${({ theme }) => theme.component['listbox-box-shadow-depth-color']};
+    box-shadow: 0 10px 20px 0 ${({ theme }) => theme.component['listbox-box-shadow-depth-color']};
     display: flex;
     max-height: 160px;
     overflow-y: auto;
diff --git a/packages/react/src/themes/tokens/component/listbox-tokens.ts b/packages/react/src/themes/tokens/component/listbox-tokens.ts
index 18eb67587d..66914fed50 100644
--- a/packages/react/src/themes/tokens/component/listbox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/listbox-tokens.ts
@@ -10,7 +10,6 @@ export type ListboxTokens =
     | 'listbox-item-hover-background-color'
     | 'listbox-item-caption-text-color'
     | 'listbox-item-caption-disabled-text-color'
-    | 'listbox-box-shadow-frame-color'
     | 'listbox-box-shadow-depth-color';
 
 export type ListboxTokenValue = AliasTokens | RefTokens;
@@ -31,6 +30,5 @@ export const defaultListboxTokens: ListboxTokenMap = {
     'listbox-item-disabled-text-color': 'color-menu-item-content-disabled',
     'listbox-item-caption-disabled-text-color': 'color-menu-item-content-disabled',
 
-    'listbox-box-shadow-frame-color': 'color-neutral-15',
     'listbox-box-shadow-depth-color': 'color-box-shadow',
 };

From 3e23d5ebb7637e87d15aac4036158835da9ab6ca Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 10:52:22 -0400
Subject: [PATCH 50/70] chore(alias-tokens): update snapshots

---
 .../bento-menu-button.test.tsx.snap           |  54 ++++----
 .../components/buttons/button.test.tsx.snap   |  16 +--
 .../buttons/icon-button.test.tsx.snap         |  14 +-
 .../checkbox-group.test.tsx.snap              |  10 +-
 .../checkbox/checkbox.test.tsx.snap           |   2 +-
 .../chooser-button-group.test.tsx.snap        |   8 +-
 .../chooser-button.test.tsx.snap              |   4 +-
 .../combobox/combobox.test.tsx.snap           |  24 ++--
 .../date-picker/date-picker.test.tsx.snap     | 120 +++++++++---------
 .../dropdown-list/dropdown-list.test.tsx.snap |  30 ++---
 .../dropdown-menu-button.test.tsx.snap        |  36 +++---
 .../dropdown-menu/dropdown-menu.test.tsx.snap |  32 ++---
 .../dropdown-navigation.test.tsx.snap         |   6 +-
 .../global-banner/global-banner.test.tsx.snap | 116 +++++------------
 .../global-header/global-header.test.tsx.snap |   4 +-
 .../components/listbox/listbox.test.tsx.snap  |  24 ++--
 .../modal/modal-dialog.test.tsx.snap          |  18 +--
 .../src/components/modal/modal.test.tsx.snap  |   6 +-
 .../money-input/money-input.test.tsx.snap     |  18 +--
 .../nav-list/nav-list.test.tsx.snap           |   4 +-
 .../numeric-input/numeric-input.test.tsx.snap |  26 ++--
 .../password-input.test.tsx.snap              |  24 ++--
 .../progress-circle.test.tsx.snap             |   4 +-
 .../progress-indicator/bar.test.tsx.snap      |   2 +-
 .../progress-indicator.test.tsx.snap          |   4 +-
 .../progress-tracker.test.tsx.snap            |   4 +-
 .../radio-button-group.test.tsx.snap          |   8 +-
 .../radio-card-group.test.tsx.snap            |  24 ++--
 .../search/search-input.test.tsx.snap         |   8 +-
 .../side-drawer/side-drawer.test.tsx.snap     |  14 +-
 .../components/status/status.test.tsx.snap    |   6 +-
 .../stepper-input/stepper-input.test.tsx.snap |  36 +++---
 .../src/components/table/table.test.tsx.snap  |  32 ++---
 .../src/components/tabs/tabs.test.tsx.snap    |   6 +-
 .../src/components/tag/tag.test.tsx.snap      |  24 ++--
 .../text-area/text-area.test.tsx.snap         |  12 +-
 .../text-input/text-input.test.tsx.snap       |  18 +--
 .../toggle-button-group.test.tsx.snap         |  36 +++---
 .../toggle-switch/toggle-switch.test.tsx.snap |  30 ++---
 .../toggletip/toggletip.test.tsx.snap         |  32 ++---
 .../user-profile/user-profile.test.tsx.snap   |  72 +++++------
 41 files changed, 458 insertions(+), 510 deletions(-)

diff --git a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
index 77822b5b9e..7b7d8fe323 100644
--- a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
+++ b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
@@ -97,10 +97,10 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 
 .c4 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -230,7 +230,7 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 }
 
 .c21 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -260,13 +260,13 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 }
 
 .c21:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21[disabled] {
@@ -360,7 +360,7 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -402,7 +402,7 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -917,10 +917,10 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 
 .c4 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -1050,7 +1050,7 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 }
 
 .c21 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1080,13 +1080,13 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 }
 
 .c21:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21[disabled] {
@@ -1180,7 +1180,7 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1222,7 +1222,7 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1649,10 +1649,10 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 
 .c4 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -1782,7 +1782,7 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c21 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1812,13 +1812,13 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c21:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21[disabled] {
@@ -1912,7 +1912,7 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1954,7 +1954,7 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/react/src/components/buttons/button.test.tsx.snap b/packages/react/src/components/buttons/button.test.tsx.snap
index eac1ba822e..6b23f18253 100644
--- a/packages/react/src/components/buttons/button.test.tsx.snap
+++ b/packages/react/src/components/buttons/button.test.tsx.snap
@@ -800,14 +800,14 @@ exports[`Button has primary styles (inverted) 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #FFFFFF;
-  border-color: #FFFFFF;
+  background-color: #84C6EA;
+  border-color: #84C6EA;
   color: #003A5A;
 }
 
 .c1:disabled {
-  background-color: #FFFFFF;
-  border-color: #FFFFFF;
+  background-color: #006296;
+  border-color: #006296;
   color: #84C6EA;
 }
 
@@ -1070,7 +1070,7 @@ exports[`Button has secondary styles 1`] = `
 }
 
 .c1 {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #006296;
   color: #006296;
 }
@@ -1088,13 +1088,13 @@ exports[`Button has secondary styles 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #003A5A;
   color: #003A5A;
 }
 
 .c1:disabled {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
@@ -1474,7 +1474,7 @@ exports[`Button has tertiary styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c1:disabled {
diff --git a/packages/react/src/components/buttons/icon-button.test.tsx.snap b/packages/react/src/components/buttons/icon-button.test.tsx.snap
index 89e31976b7..e057a07254 100644
--- a/packages/react/src/components/buttons/icon-button.test.tsx.snap
+++ b/packages/react/src/components/buttons/icon-button.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`Icon Button Has destructive-secondary styles 1`] = `
 }
 
 .c1 {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #CD2C23;
   color: #CD2C23;
   padding: 0;
@@ -79,13 +79,13 @@ exports[`Icon Button Has destructive-secondary styles 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #7B1A15;
   color: #7B1A15;
 }
 
 .c1:disabled {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #F99D99;
   color: #F99D99;
 }
@@ -500,7 +500,7 @@ exports[`Icon Button Has secondary styles 1`] = `
 }
 
 .c1 {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #006296;
   color: #006296;
   padding: 0;
@@ -520,13 +520,13 @@ exports[`Icon Button Has secondary styles 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #003A5A;
   color: #003A5A;
 }
 
 .c1:disabled {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
@@ -743,7 +743,7 @@ exports[`Icon Button Has tertiary styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c1:disabled {
diff --git a/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap b/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap
index 2746424218..c3f204bc56 100644
--- a/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap
+++ b/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 .c3:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c1 {
@@ -176,7 +176,7 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 .c3:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c1 {
@@ -290,7 +290,7 @@ exports[`Checkbox Matches the snapshot 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
   border-radius: var(--border-radius);
   box-sizing: border-box;
   display: inline-block;
@@ -303,7 +303,7 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 .c3:hover {
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
 }
 
 .c1 {
@@ -432,7 +432,7 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 .c3:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c1 {
diff --git a/packages/react/src/components/checkbox/checkbox.test.tsx.snap b/packages/react/src/components/checkbox/checkbox.test.tsx.snap
index 7317b5d41c..2990c5b193 100644
--- a/packages/react/src/components/checkbox/checkbox.test.tsx.snap
+++ b/packages/react/src/components/checkbox/checkbox.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`Checkbox matches snapshot 1`] = `
 
 .c3:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c1 {
diff --git a/packages/react/src/components/chooser-button-group/chooser-button-group.test.tsx.snap b/packages/react/src/components/chooser-button-group/chooser-button-group.test.tsx.snap
index b71204c154..34d88aac2a 100644
--- a/packages/react/src/components/chooser-button-group/chooser-button-group.test.tsx.snap
+++ b/packages/react/src/components/chooser-button-group/chooser-button-group.test.tsx.snap
@@ -34,8 +34,8 @@ exports[`Chooser Button GroupItem Matches the snapshot 1`] = `
 
 .c3:hover {
   background: #DBDEE1;
-  border-color: #1B1C1E;
-  color: #1B1C1E;
+  border-color: #000000;
+  color: #000000;
 }
 
 input[type='checkbox']:checked + .c2,
@@ -165,8 +165,8 @@ input[type='radio']:disabled + .c3 {
 
 .c3:hover {
   background: #DBDEE1;
-  border-color: #1B1C1E;
-  color: #1B1C1E;
+  border-color: #000000;
+  color: #000000;
 }
 
 input[type='checkbox']:checked + .c2,
diff --git a/packages/react/src/components/chooser-button/chooser-button.test.tsx.snap b/packages/react/src/components/chooser-button/chooser-button.test.tsx.snap
index 61ffe3e915..7240fc5f4d 100644
--- a/packages/react/src/components/chooser-button/chooser-button.test.tsx.snap
+++ b/packages/react/src/components/chooser-button/chooser-button.test.tsx.snap
@@ -53,8 +53,8 @@ exports[`Chooser Button Matches the snapshot 1`] = `
 
 .c1:hover {
   background: #DBDEE1;
-  border-color: #1B1C1E;
-  color: #1B1C1E;
+  border-color: #000000;
+  color: #000000;
 }
 
 input[type='checkbox']:checked + .c0,
diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
index f66b0ab0b5..1af32de0cf 100644
--- a/packages/react/src/components/combobox/combobox.test.tsx.snap
+++ b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`Combobox matches the snapshot (disabled) 1`] = `
 .c7[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c7:disabled {
@@ -111,7 +111,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -136,7 +136,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -538,7 +538,7 @@ exports[`Combobox matches the snapshot (invalid) 1`] = `
 .c9[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c9:disabled {
@@ -616,7 +616,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -641,7 +641,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1057,7 +1057,7 @@ exports[`Combobox matches the snapshot (mobile) 1`] = `
 .c5[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c5:disabled {
@@ -1089,7 +1089,7 @@ exports[`Combobox matches the snapshot (mobile) 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1114,7 +1114,7 @@ exports[`Combobox matches the snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1506,7 +1506,7 @@ exports[`Combobox matches the snapshot 1`] = `
 .c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c8:disabled {
@@ -1570,7 +1570,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1595,7 +1595,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index 5ed3f37c7c..14335496ba 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -109,7 +109,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -124,7 +124,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -227,7 +227,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
@@ -265,8 +265,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -333,7 +333,7 @@ label + .c3 {
 .c7:disabled:focus,
 .c7:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -500,7 +500,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -515,7 +515,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -618,7 +618,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -656,8 +656,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -724,7 +724,7 @@ label + .c3 {
 .c7:disabled:focus,
 .c7:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -893,7 +893,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -908,7 +908,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -1011,7 +1011,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -1049,8 +1049,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -1117,7 +1117,7 @@ label + .c3 {
 .c7:disabled:focus,
 .c7:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -1286,7 +1286,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -1301,7 +1301,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -1404,7 +1404,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -1442,8 +1442,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -1510,7 +1510,7 @@ label + .c3 {
 .c7:disabled:focus,
 .c7:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -1707,7 +1707,7 @@ input + .c1 {
 
 .c6 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -1722,7 +1722,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -1825,7 +1825,7 @@ label + .c5 {
   border: 1px solid #CD2C23;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -1863,8 +1863,8 @@ label + .c5 {
 
 .c7.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c7.datePickerInput:disabled,
@@ -1931,7 +1931,7 @@ label + .c5 {
 .c9:disabled:focus,
 .c9:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -2116,7 +2116,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -2131,7 +2131,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -2234,7 +2234,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
@@ -2272,8 +2272,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -2340,7 +2340,7 @@ label + .c3 {
 .c7:disabled:focus,
 .c7:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -2479,7 +2479,7 @@ exports[`Datepicker matches snapshot (open, desktop) 1`] = `
 .c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c8:disabled {
@@ -2674,7 +2674,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -2689,7 +2689,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -2792,7 +2792,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -2830,8 +2830,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -2898,7 +2898,7 @@ label + .c3 {
 .c17:disabled:focus,
 .c17:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -3736,7 +3736,7 @@ exports[`Datepicker matches snapshot (open, hasTodayButton) 1`] = `
 .c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c8:disabled {
@@ -3751,7 +3751,7 @@ exports[`Datepicker matches snapshot (open, hasTodayButton) 1`] = `
 }
 
 .c18 {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #006296;
   color: #006296;
 }
@@ -3769,13 +3769,13 @@ exports[`Datepicker matches snapshot (open, hasTodayButton) 1`] = `
 
 .c18:hover,
 .c18[aria-expanded='true'] {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #003A5A;
   color: #003A5A;
 }
 
 .c18:disabled {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
@@ -3961,7 +3961,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -3976,7 +3976,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -4079,7 +4079,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -4117,8 +4117,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -4191,7 +4191,7 @@ label + .c3 {
 .c19:disabled:focus,
 .c19:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -5041,7 +5041,7 @@ exports[`Datepicker matches snapshot (open, mobile) 1`] = `
 .c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c8:disabled {
@@ -5236,7 +5236,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -5251,7 +5251,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -5354,7 +5354,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
@@ -5392,8 +5392,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -5460,7 +5460,7 @@ label + .c3 {
 .c17:disabled:focus,
 .c17:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index ecea309b66..86ca7acb62 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -39,7 +39,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -64,7 +64,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -102,7 +102,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -497,7 +497,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -522,7 +522,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -560,7 +560,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -925,7 +925,7 @@ exports[`Dropdown list matches the snapshot (mobile) 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -950,7 +950,7 @@ exports[`Dropdown list matches the snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -987,7 +987,7 @@ exports[`Dropdown list matches the snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1328,7 +1328,7 @@ exports[`Dropdown list matches the snapshot (multiselect) 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1378,7 +1378,7 @@ exports[`Dropdown list matches the snapshot (multiselect) 1`] = `
 
 .c9:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c9 > .c10 {
@@ -1390,7 +1390,7 @@ exports[`Dropdown list matches the snapshot (multiselect) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1921,7 +1921,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1946,7 +1946,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1984,7 +1984,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
index f6aa427bbe..876c8bfa47 100644
--- a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
+++ b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
@@ -171,7 +171,7 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
 }
 
 .c15 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -201,13 +201,13 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
 }
 
 .c15:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c15:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c15[disabled] {
@@ -273,7 +273,7 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -315,7 +315,7 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -384,10 +384,10 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
 
 .c5 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -834,7 +834,7 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
 }
 
 .c15 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -864,13 +864,13 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
 }
 
 .c15:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c15:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c15[disabled] {
@@ -936,7 +936,7 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -978,7 +978,7 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1047,10 +1047,10 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
 
 .c5 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
diff --git a/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap b/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap
index 7ef397642a..164f593b58 100644
--- a/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap
+++ b/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`DropdownMenu Is hidden 1`] = `
 .c0 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -96,7 +96,7 @@ exports[`DropdownMenu Is hidden 1`] = `
 }
 
 .c8 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -126,13 +126,13 @@ exports[`DropdownMenu Is hidden 1`] = `
 }
 
 .c8:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c8:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c8[disabled] {
@@ -198,7 +198,7 @@ exports[`DropdownMenu Is hidden 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -413,10 +413,10 @@ exports[`DropdownMenu Is hidden 1`] = `
 exports[`DropdownMenu Matches the snapshot 1`] = `
 .c0 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -506,7 +506,7 @@ exports[`DropdownMenu Matches the snapshot 1`] = `
 }
 
 .c8 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -536,13 +536,13 @@ exports[`DropdownMenu Matches the snapshot 1`] = `
 }
 
 .c8:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c8:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c8[disabled] {
@@ -608,7 +608,7 @@ exports[`DropdownMenu Matches the snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap b/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap
index e0a019b21b..252ba7ea2a 100644
--- a/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap
+++ b/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap
@@ -136,7 +136,7 @@ exports[`DropdownNavigation Matches Snapshot (defaultOpen) 1`] = `
 
 .c5 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   list-style-type: none;
@@ -399,7 +399,7 @@ exports[`DropdownNavigation Matches Snapshot (tag="nav") 1`] = `
 
 .c5 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   list-style-type: none;
@@ -663,7 +663,7 @@ exports[`DropdownNavigation Matches Snapshot 1`] = `
 
 .c5 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   list-style-type: none;
diff --git a/packages/react/src/components/global-banner/global-banner.test.tsx.snap b/packages/react/src/components/global-banner/global-banner.test.tsx.snap
index 4de5c9b549..38e0d74166 100644
--- a/packages/react/src/components/global-banner/global-banner.test.tsx.snap
+++ b/packages/react/src/components/global-banner/global-banner.test.tsx.snap
@@ -173,8 +173,8 @@ exports[`GlobalBanner matches snapshot (desktop, alert) 1`] = `
 }
 
 .c7:hover {
-  border-color: #F99D99;
-  color: #F99D99;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -423,18 +423,8 @@ exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
 }
 
 .c7:hover {
-  border-color: #CFC1E3;
-  color: #CFC1E3;
-}
-
-.c9 {
-  background-color: transparent;
-  color: #FFFFFF;
-}
-
-.c9:hover {
-  background-color: #3A1C60;
-  color: #FFFFFF;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -477,7 +467,7 @@ exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
       Test button
     </button>
     <button
-      class="c5 c8 c9"
+      class="c5 c8 "
       data-testid="dismiss-button"
       type="button"
     >
@@ -690,18 +680,8 @@ exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
 }
 
 .c7:hover {
-  border-color: #B7BBC2;
-  color: #B7BBC2;
-}
-
-.c9 {
-  background-color: transparent;
-  color: #FFFFFF;
-}
-
-.c9:hover {
-  background-color: #36393D;
-  color: #FFFFFF;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -744,7 +724,7 @@ exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
       Test button
     </button>
     <button
-      class="c5 c8 c9"
+      class="c5 c8 "
       data-testid="dismiss-button"
       type="button"
     >
@@ -845,7 +825,7 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
 .c8 {
   background-color: transparent;
   border-color: transparent;
-  color: #FFFFFF;
+  color: #60666E;
 }
 
 .c8 {
@@ -854,22 +834,22 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
 }
 
 .c8:focus {
-  box-shadow: 0 0 0 2px #84C6EA;
-  outline: 2px solid #006296;
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
 .c8:hover,
 .c8[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.5);
+  background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #FFFFFF;
+  color: #000000;
 }
 
 .c8:disabled {
   background-color: transparent;
   border-color: transparent;
-  color: #006296;
+  color: #B7BBC2;
 }
 
 .c0 {
@@ -957,17 +937,11 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
 }
 
 .c7:hover {
-  border-color: #9E6900;
-  color: #9E6900;
+  border-color: rgb(0 0 0 / 0.6);
+  color: rgb(0 0 0 / 0.6);
 }
 
 .c9 {
-  background-color: transparent;
-  color: #1B1C1E;
-}
-
-.c9:hover {
-  background-color: #C78500;
   color: #1B1C1E;
 }
 
@@ -1198,8 +1172,8 @@ exports[`GlobalBanner matches snapshot (mobile, alert) 1`] = `
 }
 
 .c7:hover {
-  border-color: #F99D99;
-  color: #F99D99;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -1452,18 +1426,8 @@ exports[`GlobalBanner matches snapshot (mobile, discovery) 1`] = `
 }
 
 .c7:hover {
-  border-color: #CFC1E3;
-  color: #CFC1E3;
-}
-
-.c9 {
-  background-color: transparent;
-  color: #FFFFFF;
-}
-
-.c9:hover {
-  background-color: #3A1C60;
-  color: #FFFFFF;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -1506,7 +1470,7 @@ exports[`GlobalBanner matches snapshot (mobile, discovery) 1`] = `
       Test button
     </button>
     <button
-      class="c5 c8 c9"
+      class="c5 c8 "
       data-testid="dismiss-button"
       type="button"
     >
@@ -1723,18 +1687,8 @@ exports[`GlobalBanner matches snapshot (mobile, neutral) 1`] = `
 }
 
 .c7:hover {
-  border-color: #B7BBC2;
-  color: #B7BBC2;
-}
-
-.c9 {
-  background-color: transparent;
-  color: #FFFFFF;
-}
-
-.c9:hover {
-  background-color: #36393D;
-  color: #FFFFFF;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -1777,7 +1731,7 @@ exports[`GlobalBanner matches snapshot (mobile, neutral) 1`] = `
       Test button
     </button>
     <button
-      class="c5 c8 c9"
+      class="c5 c8 "
       data-testid="dismiss-button"
       type="button"
     >
@@ -1878,7 +1832,7 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
 .c8 {
   background-color: transparent;
   border-color: transparent;
-  color: #FFFFFF;
+  color: #60666E;
 }
 
 .c8 {
@@ -1887,22 +1841,22 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
 }
 
 .c8:focus {
-  box-shadow: 0 0 0 2px #84C6EA;
-  outline: 2px solid #006296;
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
 .c8:hover,
 .c8[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.5);
+  background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #FFFFFF;
+  color: #000000;
 }
 
 .c8:disabled {
   background-color: transparent;
   border-color: transparent;
-  color: #006296;
+  color: #B7BBC2;
 }
 
 .c0 {
@@ -1994,17 +1948,11 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
 }
 
 .c7:hover {
-  border-color: #9E6900;
-  color: #9E6900;
+  border-color: rgb(0 0 0 / 0.6);
+  color: rgb(0 0 0 / 0.6);
 }
 
 .c9 {
-  background-color: transparent;
-  color: #1B1C1E;
-}
-
-.c9:hover {
-  background-color: #C78500;
   color: #1B1C1E;
 }
 
diff --git a/packages/react/src/components/global-header/global-header.test.tsx.snap b/packages/react/src/components/global-header/global-header.test.tsx.snap
index 3043f7df41..ea1ffa78cd 100644
--- a/packages/react/src/components/global-header/global-header.test.tsx.snap
+++ b/packages/react/src/components/global-header/global-header.test.tsx.snap
@@ -193,7 +193,7 @@ exports[`Global Header Matches the snapshot (mobile) 1`] = `
 
 .c6 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 56px);
   right: 0;
   overflow-x: hidden;
@@ -412,7 +412,7 @@ exports[`Global Header mobileDrawerContent prop adds a side drawer and burger bu
 
 .c6 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 56px);
   right: 0;
   overflow-x: hidden;
diff --git a/packages/react/src/components/listbox/listbox.test.tsx.snap b/packages/react/src/components/listbox/listbox.test.tsx.snap
index 8daf139128..6cbe51928d 100644
--- a/packages/react/src/components/listbox/listbox.test.tsx.snap
+++ b/packages/react/src/components/listbox/listbox.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -66,7 +66,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
 
 .c4:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c10 {
@@ -93,7 +93,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
 
 .c10:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c10 > .c5 {
@@ -106,7 +106,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
   border-radius: var(--border-radius);
   box-sizing: border-box;
   display: -webkit-box;
@@ -124,7 +124,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
 
 .c12:hover {
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
 }
 
 .c12 > .c5 {
@@ -136,7 +136,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -168,7 +168,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -214,7 +214,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
 }
 
 .c11:hover {
-  background-color: #FFFFFF;
+  background-color: transparent;
 }
 
 .c7 {
@@ -386,7 +386,7 @@ exports[`Listbox Matches the snapshot 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -422,7 +422,7 @@ exports[`Listbox Matches the snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -449,7 +449,7 @@ exports[`Listbox Matches the snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -504,7 +504,7 @@ exports[`Listbox Matches the snapshot 1`] = `
 }
 
 .c6:hover {
-  background-color: #FFFFFF;
+  background-color: transparent;
 }
 
 .c3 {
diff --git a/packages/react/src/components/modal/modal-dialog.test.tsx.snap b/packages/react/src/components/modal/modal-dialog.test.tsx.snap
index c5016eba86..3a51ed88bc 100644
--- a/packages/react/src/components/modal/modal-dialog.test.tsx.snap
+++ b/packages/react/src/components/modal/modal-dialog.test.tsx.snap
@@ -163,7 +163,7 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
 .c14[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c14:disabled {
@@ -206,7 +206,7 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
 .c10[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c10:disabled {
@@ -512,7 +512,7 @@ exports[`Modal-Dialog Matches snapshot (custom footer content) 1`] = `
 .c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c8:disabled {
@@ -812,7 +812,7 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
 .c14[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c14:disabled {
@@ -855,7 +855,7 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
 .c10[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c10:disabled {
@@ -1218,7 +1218,7 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
 .c14[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c14:disabled {
@@ -1261,7 +1261,7 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
 .c10[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c10:disabled {
@@ -1566,7 +1566,7 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
 .c13[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c13:disabled {
@@ -1609,7 +1609,7 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
 .c10[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c10:disabled {
diff --git a/packages/react/src/components/modal/modal.test.tsx.snap b/packages/react/src/components/modal/modal.test.tsx.snap
index 21b093cd7e..f763faf835 100644
--- a/packages/react/src/components/modal/modal.test.tsx.snap
+++ b/packages/react/src/components/modal/modal.test.tsx.snap
@@ -284,7 +284,7 @@ exports[`Modal Matches snapshot (noPadding) 1`] = `
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -488,7 +488,7 @@ exports[`Modal Matches snapshot (opened, desktop) 1`] = `
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -691,7 +691,7 @@ exports[`Modal Matches snapshot (opened, mobile) 1`] = `
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
diff --git a/packages/react/src/components/money-input/money-input.test.tsx.snap b/packages/react/src/components/money-input/money-input.test.tsx.snap
index a906a08815..8f48aa6938 100644
--- a/packages/react/src/components/money-input/money-input.test.tsx.snap
+++ b/packages/react/src/components/money-input/money-input.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -53,8 +53,8 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
@@ -133,7 +133,7 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -166,8 +166,8 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
@@ -246,7 +246,7 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -279,8 +279,8 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
diff --git a/packages/react/src/components/nav-list/nav-list.test.tsx.snap b/packages/react/src/components/nav-list/nav-list.test.tsx.snap
index 5ba705d0ed..4c0b6e416c 100644
--- a/packages/react/src/components/nav-list/nav-list.test.tsx.snap
+++ b/packages/react/src/components/nav-list/nav-list.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`NavList Is hidden 1`] = `
 
 .c0 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   list-style-type: none;
@@ -182,7 +182,7 @@ exports[`NavList Matches the snapshot 1`] = `
 
 .c0 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   list-style-type: none;
diff --git a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
index f14e12e6d6..3dcebb358e 100644
--- a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
+++ b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`NumericInput matches the snapshot (Disabled) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -59,8 +59,8 @@ exports[`NumericInput matches the snapshot (Disabled) 1`] = `
 
 .c4:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c4:disabled,
@@ -111,7 +111,7 @@ exports[`NumericInput matches the snapshot (Disabled) 1`] = `
   display: flex;
   height: var(--size-2x);
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
 }
 
 .c1 {
@@ -199,7 +199,7 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -238,8 +238,8 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
 
 .c5:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5:disabled,
@@ -362,7 +362,7 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at end) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -401,8 +401,8 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at end) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
@@ -508,7 +508,7 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at start) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -547,8 +547,8 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at start) 1`] = `
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 5f931e59d3..2333de853c 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
 .c7[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c7:disabled {
@@ -280,7 +280,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -313,8 +313,8 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
@@ -515,7 +515,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 .c9[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c9:disabled {
@@ -740,7 +740,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -773,8 +773,8 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 
 .c4:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c4:disabled,
@@ -989,7 +989,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
 .c7[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c7:disabled {
@@ -1188,7 +1188,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -1221,8 +1221,8 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
diff --git a/packages/react/src/components/progress-circle/progress-circle.test.tsx.snap b/packages/react/src/components/progress-circle/progress-circle.test.tsx.snap
index 20556c6543..ae8deddcbf 100644
--- a/packages/react/src/components/progress-circle/progress-circle.test.tsx.snap
+++ b/packages/react/src/components/progress-circle/progress-circle.test.tsx.snap
@@ -48,14 +48,14 @@ exports[`ProgressCircle Matches the snapshot 1`] = `
 }
 
 .c4 p {
-  color: #000000;
+  color: #1B1C1E;
   font-size: 1.5rem;
   margin: 0;
   padding: 0;
 }
 
 .c5 {
-  color: #000000;
+  color: #1B1C1E;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
   -moz-letter-spacing: 0.02875rem;
diff --git a/packages/react/src/components/progress-indicator/bar.test.tsx.snap b/packages/react/src/components/progress-indicator/bar.test.tsx.snap
index 0d09b767d8..4d11b21189 100644
--- a/packages/react/src/components/progress-indicator/bar.test.tsx.snap
+++ b/packages/react/src/components/progress-indicator/bar.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Bar Matches the snapshot 1`] = `
 .c0 p {
-  color: #000000;
+  color: #1B1C1E;
   -webkit-letter-spacing: 0.02875rem;
   -moz-letter-spacing: 0.02875rem;
   -ms-letter-spacing: 0.02875rem;
diff --git a/packages/react/src/components/progress-indicator/progress-indicator.test.tsx.snap b/packages/react/src/components/progress-indicator/progress-indicator.test.tsx.snap
index 888c7fdce2..4275bb2f8c 100644
--- a/packages/react/src/components/progress-indicator/progress-indicator.test.tsx.snap
+++ b/packages/react/src/components/progress-indicator/progress-indicator.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ProgressIndicator Matches the snapshot 1`] = `
 .c2 p {
-  color: #000000;
+  color: #1B1C1E;
   -webkit-letter-spacing: 0.02875rem;
   -moz-letter-spacing: 0.02875rem;
   -ms-letter-spacing: 0.02875rem;
@@ -28,7 +28,7 @@ exports[`ProgressIndicator Matches the snapshot 1`] = `
 }
 
 .c1 {
-  color: #000000;
+  color: #1B1C1E;
   display: block;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.02875rem;
diff --git a/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap b/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
index e09a4b09ac..05d3744f9f 100644
--- a/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
+++ b/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`Progress Component Snapshots linear 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #006296;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -255,7 +255,7 @@ exports[`Progress Component Snapshots non linear 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #006296;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/react/src/components/radio-button-group/radio-button-group.test.tsx.snap b/packages/react/src/components/radio-button-group/radio-button-group.test.tsx.snap
index 7fd135b758..5cfae499bb 100644
--- a/packages/react/src/components/radio-button-group/radio-button-group.test.tsx.snap
+++ b/packages/react/src/components/radio-button-group/radio-button-group.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Radio button Matches the snapshot 1`] = `
 }
 
 .c1 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -97,7 +97,7 @@ exports[`Radio button Matches the snapshot 1`] = `
 }
 
 .c2:hover .radioInput {
-  border: 1px solid #006296;
+  border: 1px solid #000000;
 }
 
 .c3 {
@@ -159,7 +159,7 @@ exports[`Radio button Matches the snapshot 1`] = `
 
 .c3 .radioInput {
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
   border-radius: 50%;
   box-sizing: border-box;
   display: inline-block;
@@ -170,7 +170,7 @@ exports[`Radio button Matches the snapshot 1`] = `
 }
 
 .c3:hover .radioInput {
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
 }
 
 <fieldset
diff --git a/packages/react/src/components/radio-card-group/radio-card-group.test.tsx.snap b/packages/react/src/components/radio-card-group/radio-card-group.test.tsx.snap
index 9bc9ffd9d4..725980a315 100644
--- a/packages/react/src/components/radio-card-group/radio-card-group.test.tsx.snap
+++ b/packages/react/src/components/radio-card-group/radio-card-group.test.tsx.snap
@@ -57,10 +57,10 @@ exports[`Radio Card Matches snapshot (Checked, Desktop) 1`] = `
 
 .c3 {
   background-color: #FFFFFF;
-  border: 1px solid #000000;
+  border: 1px solid #60666E;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   padding: var(--spacing-2x) var(--spacing-3x);
   width: 100%;
 }
@@ -229,10 +229,10 @@ exports[`Radio Card Matches snapshot (Default, Desktop) 1`] = `
 
 .c3 {
   background-color: #FFFFFF;
-  border: 1px solid #000000;
+  border: 1px solid #60666E;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   padding: var(--spacing-2x) var(--spacing-3x);
   width: 100%;
 }
@@ -400,10 +400,10 @@ exports[`Radio Card Matches snapshot (Default, Mobile) 1`] = `
 
 .c3 {
   background-color: #FFFFFF;
-  border: 1px solid #000000;
+  border: 1px solid #60666E;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   padding: var(--spacing-2x) var(--spacing-3x);
   width: 100%;
 }
@@ -517,7 +517,7 @@ exports[`Radio Card Matches snapshot (Default, Mobile) 1`] = `
 exports[`Radio Card Matches snapshot (Disabled, Desktop) 1`] = `
 .c10 {
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
   border-radius: 50%;
   box-sizing: border-box;
   display: inline-block;
@@ -571,7 +571,7 @@ exports[`Radio Card Matches snapshot (Disabled, Desktop) 1`] = `
 
 .c3 {
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
   color: #B7BBC2;
@@ -747,10 +747,10 @@ exports[`Radio Card Matches snapshot (Label, Desktop) 1`] = `
 
 .c3 {
   background-color: #FFFFFF;
-  border: 1px solid #000000;
+  border: 1px solid #60666E;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   padding: var(--spacing-2x) var(--spacing-3x);
   width: 100%;
 }
@@ -920,10 +920,10 @@ exports[`Radio Card Matches snapshot (Label, Mobile) 1`] = `
 
 .c3 {
   background-color: #FFFFFF;
-  border: 1px solid #000000;
+  border: 1px solid #60666E;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   padding: var(--spacing-2x) var(--spacing-3x);
   width: 100%;
 }
diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap
index 10519b93ff..30cb7ac42f 100644
--- a/packages/react/src/components/search/search-input.test.tsx.snap
+++ b/packages/react/src/components/search/search-input.test.tsx.snap
@@ -77,7 +77,7 @@ exports[`SearchInput should match the snapshot 1`] = `
 .c12:disabled:focus,
 .c12:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -162,7 +162,7 @@ input + .c2 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -202,8 +202,8 @@ input + .c2 {
 
 .c7:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c7:disabled,
diff --git a/packages/react/src/components/side-drawer/side-drawer.test.tsx.snap b/packages/react/src/components/side-drawer/side-drawer.test.tsx.snap
index 7ff8e6dcaa..7084e378c6 100644
--- a/packages/react/src/components/side-drawer/side-drawer.test.tsx.snap
+++ b/packages/react/src/components/side-drawer/side-drawer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Side Drawer Has different height when in mobile 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 56px);
   right: 0;
   overflow-x: hidden;
@@ -41,7 +41,7 @@ exports[`Side Drawer Has different height when in mobile 1`] = `
 exports[`Side Drawer Has nested drawer 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   left: 0;
   overflow-x: hidden;
@@ -65,7 +65,7 @@ exports[`Side Drawer Has nested drawer 1`] = `
 
 .c2 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   right: 0;
   overflow-x: hidden;
@@ -111,7 +111,7 @@ exports[`Side Drawer Has nested drawer 1`] = `
 exports[`Side Drawer Has width set to 50% 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   right: 0;
   overflow-x: hidden;
@@ -149,7 +149,7 @@ exports[`Side Drawer Has width set to 50% 1`] = `
 exports[`Side Drawer Is closed on left side 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   left: 0;
   overflow-x: hidden;
@@ -186,7 +186,7 @@ exports[`Side Drawer Is closed on left side 1`] = `
 exports[`Side Drawer Is closed on right side 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   right: 0;
   overflow-x: hidden;
@@ -223,7 +223,7 @@ exports[`Side Drawer Is closed on right side 1`] = `
 exports[`Side Drawer Is open 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   right: 0;
   overflow-x: hidden;
diff --git a/packages/react/src/components/status/status.test.tsx.snap b/packages/react/src/components/status/status.test.tsx.snap
index f7f19101e0..d5ad9f1889 100644
--- a/packages/react/src/components/status/status.test.tsx.snap
+++ b/packages/react/src/components/status/status.test.tsx.snap
@@ -59,12 +59,12 @@ exports[`Status matches snapshot (disabled) 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  color: #60666E;
+  color: #B7BBC2;
 }
 
 .c1 {
-  background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  background-color: #F1F2F2;
+  border: 1px solid #DBDEE1;
   border-radius: 50%;
   box-sizing: border-box;
   height: 0.625rem;
diff --git a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
index 2f96aeea4f..603045004c 100644
--- a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
+++ b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
@@ -76,7 +76,7 @@ input + .c1 {
 
 .c6:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -129,7 +129,7 @@ input + .c1 {
 
 .c7:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -168,7 +168,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -204,8 +204,8 @@ input + .c1 {
 
 .c4:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c4:disabled,
@@ -412,7 +412,7 @@ input + .c1 {
 
 .c8:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -465,7 +465,7 @@ input + .c1 {
 
 .c9:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -504,7 +504,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -540,8 +540,8 @@ input + .c1 {
 
 .c6:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c6:disabled,
@@ -709,7 +709,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
@@ -745,8 +745,8 @@ input + .c1 {
 
 .c4:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c4:disabled,
@@ -890,7 +890,7 @@ input + .c1 {
 
 .c6:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -943,7 +943,7 @@ input + .c1 {
 
 .c7:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -982,7 +982,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -1018,8 +1018,8 @@ input + .c1 {
 
 .c4:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c4:disabled,
diff --git a/packages/react/src/components/table/table.test.tsx.snap b/packages/react/src/components/table/table.test.tsx.snap
index 25f7f02ffe..23a6032985 100644
--- a/packages/react/src/components/table/table.test.tsx.snap
+++ b/packages/react/src/components/table/table.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`Table has aria-label on header columns 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -222,7 +222,7 @@ exports[`Table has clickable rows styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -401,7 +401,7 @@ exports[`Table has column with headers grouped 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -608,7 +608,7 @@ exports[`Table has custom text alignment 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -760,7 +760,7 @@ exports[`Table has desktop styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -946,7 +946,7 @@ exports[`Table has error rows styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -1098,7 +1098,7 @@ exports[`Table has mobile styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -1250,7 +1250,7 @@ exports[`Table has rowNumbers styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -1480,7 +1480,7 @@ exports[`Table has selectable rows styles 1`] = `
 
 .c7:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c5 {
@@ -1541,7 +1541,7 @@ exports[`Table has selectable rows styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -1818,7 +1818,7 @@ exports[`Table has small rowSize styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -1992,7 +1992,7 @@ exports[`Table has sorting styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -2222,7 +2222,7 @@ exports[`Table has sticky column styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -2399,7 +2399,7 @@ exports[`Table has sticky header styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -2555,7 +2555,7 @@ exports[`Table has striped styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -2707,7 +2707,7 @@ exports[`Table has tablet styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
diff --git a/packages/react/src/components/tabs/tabs.test.tsx.snap b/packages/react/src/components/tabs/tabs.test.tsx.snap
index f736532262..6b6e11075d 100644
--- a/packages/react/src/components/tabs/tabs.test.tsx.snap
+++ b/packages/react/src/components/tabs/tabs.test.tsx.snap
@@ -222,7 +222,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
 .c2[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c2:disabled {
@@ -656,7 +656,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
 .c2[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c2:disabled {
@@ -1094,7 +1094,7 @@ exports[`Tabs matches snapshot 1`] = `
 .c2[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c2:disabled {
diff --git a/packages/react/src/components/tag/tag.test.tsx.snap b/packages/react/src/components/tag/tag.test.tsx.snap
index 0d82708e14..c63f42f1fd 100644
--- a/packages/react/src/components/tag/tag.test.tsx.snap
+++ b/packages/react/src/components/tag/tag.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop remov
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -363,7 +363,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile remova
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -645,7 +645,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop remov
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -927,7 +927,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile remova
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -1209,7 +1209,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (desktop removable)
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -1491,7 +1491,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (mobile removable) 1
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -1774,7 +1774,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop remova
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -2056,7 +2056,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile removab
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -2339,7 +2339,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop remova
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -2621,7 +2621,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile removab
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -2904,7 +2904,7 @@ exports[`Tag Tag size=small color=default matches snapshot (desktop removable) 1
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -3186,7 +3186,7 @@ exports[`Tag Tag size=small color=default matches snapshot (mobile removable) 1`
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
diff --git a/packages/react/src/components/text-area/text-area.test.tsx.snap b/packages/react/src/components/text-area/text-area.test.tsx.snap
index 703f0afcb4..09b2ab6b49 100644
--- a/packages/react/src/components/text-area/text-area.test.tsx.snap
+++ b/packages/react/src/components/text-area/text-area.test.tsx.snap
@@ -40,7 +40,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -78,8 +78,8 @@ input + .c1 {
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
@@ -177,7 +177,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -215,8 +215,8 @@ input + .c1 {
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index 67a02fecc2..1974734edd 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -40,7 +40,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -73,8 +73,8 @@ input + .c1 {
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
@@ -172,7 +172,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -205,8 +205,8 @@ input + .c1 {
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
@@ -304,7 +304,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -337,8 +337,8 @@ input + .c1 {
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
diff --git a/packages/react/src/components/toggle-button-group/toggle-button-group.test.tsx.snap b/packages/react/src/components/toggle-button-group/toggle-button-group.test.tsx.snap
index 507ce95816..71792fc18e 100644
--- a/packages/react/src/components/toggle-button-group/toggle-button-group.test.tsx.snap
+++ b/packages/react/src/components/toggle-button-group/toggle-button-group.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #FFFFFF;
-  border: 1px solid #878F9A;
+  border: 1px solid #60666E;
   border-right: 0;
   box-sizing: border-box;
   color: #60666E;
@@ -36,7 +36,7 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
 }
 
 .c1:last-child {
-  border-right: 1px solid #878F9A;
+  border-right: 1px solid #60666E;
   margin: 0;
 }
 
@@ -57,19 +57,19 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
 
 .c1:disabled,
 .c1:disabled:hover {
-  background-color: #FFFFFF;
+  background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
 .c1:hover {
   background-color: #DBDEE1;
-  border-color: #60666E;
+  border-color: #000000;
   color: #000000;
 }
 
 .c1:hover + button {
-  border-left-color: #60666E;
+  border-left-color: #000000;
 }
 
 .c2 {
@@ -78,10 +78,10 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #E0F0F9;
-  border: 1px solid #012639;
+  border: 1px solid #006296;
   border-right: 1px solid;
   box-sizing: border-box;
-  color: #012639;
+  color: #003A5A;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.02875rem;
   -moz-letter-spacing: 0.02875rem;
@@ -96,7 +96,7 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
 }
 
 .c2:last-child {
-  border-right: 1px solid #012639;
+  border-right: 1px solid #006296;
   margin: 0;
 }
 
@@ -117,7 +117,7 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
 
 .c2:disabled,
 .c2:disabled:hover {
-  background-color: #FFFFFF;
+  background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
@@ -192,7 +192,7 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #FFFFFF;
-  border: 1px solid #878F9A;
+  border: 1px solid #60666E;
   border-right: 0;
   box-sizing: border-box;
   color: #60666E;
@@ -206,7 +206,7 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
 }
 
 .c1:last-child {
-  border-right: 1px solid #878F9A;
+  border-right: 1px solid #60666E;
   margin: 0;
 }
 
@@ -227,19 +227,19 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
 
 .c1:disabled,
 .c1:disabled:hover {
-  background-color: #FFFFFF;
+  background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
 .c1:hover {
   background-color: #DBDEE1;
-  border-color: #60666E;
+  border-color: #000000;
   color: #000000;
 }
 
 .c1:hover + button {
-  border-left-color: #60666E;
+  border-left-color: #000000;
 }
 
 .c2 {
@@ -248,10 +248,10 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #E0F0F9;
-  border: 1px solid #012639;
+  border: 1px solid #006296;
   border-right: 1px solid;
   box-sizing: border-box;
-  color: #012639;
+  color: #003A5A;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
   -moz-letter-spacing: 0.02875rem;
@@ -266,7 +266,7 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
 }
 
 .c2:last-child {
-  border-right: 1px solid #012639;
+  border-right: 1px solid #006296;
   margin: 0;
 }
 
@@ -287,7 +287,7 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
 
 .c2:disabled,
 .c2:disabled:hover {
-  background-color: #FFFFFF;
+  background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
diff --git a/packages/react/src/components/toggle-switch/toggle-switch.test.tsx.snap b/packages/react/src/components/toggle-switch/toggle-switch.test.tsx.snap
index f131bf40d6..5dfee290aa 100644
--- a/packages/react/src/components/toggle-switch/toggle-switch.test.tsx.snap
+++ b/packages/react/src/components/toggle-switch/toggle-switch.test.tsx.snap
@@ -38,8 +38,8 @@ exports[`ToggleSwitch Matches snapshot (desktop) 1`] = `
 }
 
 .c0[aria-checked='false'] {
-  background: #878F9A;
-  border-color: #B7BBC2;
+  background: #60666E;
+  border-color: #60666E;
 }
 
 .c0[aria-checked='false'] .c1 {
@@ -54,8 +54,8 @@ exports[`ToggleSwitch Matches snapshot (desktop) 1`] = `
 }
 
 .c0:disabled {
-  background: #DBDEE1;
-  border-color: #DBDEE1;
+  background: #B7BBC2;
+  border-color: #B7BBC2;
 }
 
 .c0:disabled[aria-checked='true'] {
@@ -78,7 +78,7 @@ exports[`ToggleSwitch Matches snapshot (desktop) 1`] = `
     />
   </button>,
   .c0 {
-  color: #000000;
+  color: #1B1C1E;
   font-size: 0.875rem;
   line-height: 1.5rem;
   margin-left: var(--spacing-1x);
@@ -136,8 +136,8 @@ exports[`ToggleSwitch Matches snapshot (mobile) 1`] = `
 }
 
 .c0[aria-checked='false'] {
-  background: #878F9A;
-  border-color: #B7BBC2;
+  background: #60666E;
+  border-color: #60666E;
 }
 
 .c0[aria-checked='false'] .c1 {
@@ -152,8 +152,8 @@ exports[`ToggleSwitch Matches snapshot (mobile) 1`] = `
 }
 
 .c0:disabled {
-  background: #DBDEE1;
-  border-color: #DBDEE1;
+  background: #B7BBC2;
+  border-color: #B7BBC2;
 }
 
 .c0:disabled[aria-checked='true'] {
@@ -176,7 +176,7 @@ exports[`ToggleSwitch Matches snapshot (mobile) 1`] = `
     />
   </button>,
   .c0 {
-  color: #000000;
+  color: #1B1C1E;
   font-size: 1rem;
   line-height: 2rem;
   margin-left: var(--spacing-1x);
@@ -234,8 +234,8 @@ exports[`ToggleSwitch has disabled styles 1`] = `
 }
 
 .c0[aria-checked='false'] {
-  background: #878F9A;
-  border-color: #B7BBC2;
+  background: #60666E;
+  border-color: #60666E;
 }
 
 .c0[aria-checked='false'] .c1 {
@@ -250,8 +250,8 @@ exports[`ToggleSwitch has disabled styles 1`] = `
 }
 
 .c0:disabled {
-  background: #DBDEE1;
-  border-color: #DBDEE1;
+  background: #B7BBC2;
+  border-color: #B7BBC2;
 }
 
 .c0:disabled[aria-checked='true'] {
@@ -275,7 +275,7 @@ exports[`ToggleSwitch has disabled styles 1`] = `
     />
   </button>,
   .c0 {
-  color: #000000;
+  color: #1B1C1E;
   font-size: 0.875rem;
   line-height: 1.5rem;
   margin-left: var(--spacing-1x);
diff --git a/packages/react/src/components/toggletip/toggletip.test.tsx.snap b/packages/react/src/components/toggletip/toggletip.test.tsx.snap
index fbbffde591..84f46f9cf2 100644
--- a/packages/react/src/components/toggletip/toggletip.test.tsx.snap
+++ b/packages/react/src/components/toggletip/toggletip.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 .c0[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c0:disabled {
@@ -122,11 +122,11 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 
 .c2 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 19%);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -158,7 +158,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="bottom"] > .c3::before {
-  border-color: transparent transparent #60666E transparent;
+  border-color: transparent transparent #878F9A transparent;
   border-width: 0 0.5rem 0.4rem;
   position: absolute;
   top: -1px;
@@ -178,7 +178,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="top"] > .c3::before {
-  border-color: #60666E transparent transparent transparent;
+  border-color: #878F9A transparent transparent transparent;
   border-width: 0.4rem 0.5rem 0;
   position: absolute;
   top: 1px;
@@ -197,7 +197,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="right"] > .c3::before {
-  border-color: transparent #60666E transparent transparent;
+  border-color: transparent #878F9A transparent transparent;
   border-width: 0.5rem 0.4rem 0.5rem 0;
 }
 
@@ -216,7 +216,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="left"] > .c3::before {
-  border-color: transparent transparent transparent #60666E;
+  border-color: transparent transparent transparent #878F9A;
   border-width: 0.5rem 0 0.5rem 0.4rem;
 }
 
@@ -438,7 +438,7 @@ exports[`Toggletip Has default desktop styles 1`] = `
 .c0[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c0:disabled {
@@ -614,7 +614,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 .c0[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c0:disabled {
@@ -655,11 +655,11 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 
 .c2 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 19%);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -691,7 +691,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="bottom"] > .c3::before {
-  border-color: transparent transparent #60666E transparent;
+  border-color: transparent transparent #878F9A transparent;
   border-width: 0 0.5rem 0.4rem;
   position: absolute;
   top: -1px;
@@ -711,7 +711,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="top"] > .c3::before {
-  border-color: #60666E transparent transparent transparent;
+  border-color: #878F9A transparent transparent transparent;
   border-width: 0.4rem 0.5rem 0;
   position: absolute;
   top: 1px;
@@ -730,7 +730,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="right"] > .c3::before {
-  border-color: transparent #60666E transparent transparent;
+  border-color: transparent #878F9A transparent transparent;
   border-width: 0.5rem 0.4rem 0.5rem 0;
 }
 
@@ -749,7 +749,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="left"] > .c3::before {
-  border-color: transparent transparent transparent #60666E;
+  border-color: transparent transparent transparent #878F9A;
   border-width: 0.5rem 0 0.5rem 0.4rem;
 }
 
@@ -971,7 +971,7 @@ exports[`Toggletip Has mobile styles 1`] = `
 .c0[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c0:disabled {
diff --git a/packages/react/src/components/user-profile/user-profile.test.tsx.snap b/packages/react/src/components/user-profile/user-profile.test.tsx.snap
index 10050c454e..b77b9ded71 100644
--- a/packages/react/src/components/user-profile/user-profile.test.tsx.snap
+++ b/packages/react/src/components/user-profile/user-profile.test.tsx.snap
@@ -117,10 +117,10 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
 
 .c7 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -302,7 +302,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
 }
 
 .c10 {
-  color: #000000;
+  color: #1B1C1E;
   display: block;
   font-size: 0.875rem;
   line-height: 2rem;
@@ -318,7 +318,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -360,7 +360,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -402,7 +402,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -444,7 +444,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -483,11 +483,11 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
 }
 
 .c21:visited svg {
-  color: #000000;
+  color: #1B1C1E;
 }
 
 .c21 span {
-  color: #000000;
+  color: #1B1C1E;
   padding: 0 0 0 var(--spacing-half);
 }
 
@@ -809,10 +809,10 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
 
 .c7 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -994,7 +994,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
 }
 
 .c10 {
-  color: #000000;
+  color: #1B1C1E;
   display: block;
   font-size: 0.875rem;
   line-height: 2rem;
@@ -1010,7 +1010,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1052,7 +1052,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1094,7 +1094,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1136,7 +1136,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1175,11 +1175,11 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
 }
 
 .c21:visited svg {
-  color: #000000;
+  color: #1B1C1E;
 }
 
 .c21 span {
-  color: #000000;
+  color: #1B1C1E;
   padding: 0 0 0 var(--spacing-half);
 }
 
@@ -1509,10 +1509,10 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
 
 .c6 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -1684,7 +1684,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
 }
 
 .c9 {
-  color: #000000;
+  color: #1B1C1E;
   display: block;
   font-size: 1rem;
   line-height: 2.5rem;
@@ -1700,7 +1700,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1742,7 +1742,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1784,7 +1784,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1826,7 +1826,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1865,11 +1865,11 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
 }
 
 .c20:visited svg {
-  color: #000000;
+  color: #1B1C1E;
 }
 
 .c20 span {
-  color: #000000;
+  color: #1B1C1E;
   padding: 0 0 0 var(--spacing-half);
 }
 
@@ -2190,10 +2190,10 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
 
 .c7 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -2375,7 +2375,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c10 {
-  color: #000000;
+  color: #1B1C1E;
   display: block;
   font-size: 0.875rem;
   line-height: 2rem;
@@ -2391,7 +2391,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2433,7 +2433,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2475,7 +2475,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2517,7 +2517,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2556,11 +2556,11 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c21:visited svg {
-  color: #000000;
+  color: #1B1C1E;
 }
 
 .c21 span {
-  color: #000000;
+  color: #1B1C1E;
   padding: 0 0 0 var(--spacing-half);
 }
 

From e000f4c054ee340a01b09634586aec763f7e63c3 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 11:04:03 -0400
Subject: [PATCH 51/70] chore(alias-tokens): update modal tokens

---
 packages/react/src/components/modal/modal.tsx              | 2 +-
 packages/react/src/themes/tokens/alias-tokens.ts           | 4 ++--
 packages/react/src/themes/tokens/component/modal-tokens.ts | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/modal/modal.tsx b/packages/react/src/components/modal/modal.tsx
index 8f642b4797..8d588319b9 100644
--- a/packages/react/src/components/modal/modal.tsx
+++ b/packages/react/src/components/modal/modal.tsx
@@ -171,7 +171,7 @@ export const Modal: FunctionComponent<PropsWithChildren<ModalProps>> = ({
     const customStyles = {
         overlay: {
             alignItems: 'center',
-            backgroundColor: theme.component['modal-overlay-background-color'],
+            backgroundColor: theme.component['modal-backdrop-background-color'],
             display: 'flex',
             justifyContent: 'center',
             zIndex: 10000,
diff --git a/packages/react/src/themes/tokens/alias-tokens.ts b/packages/react/src/themes/tokens/alias-tokens.ts
index f61825adb1..54344ac14e 100644
--- a/packages/react/src/themes/tokens/alias-tokens.ts
+++ b/packages/react/src/themes/tokens/alias-tokens.ts
@@ -99,7 +99,7 @@ export type AliasTokens =
     | 'color-bg-hover'
     | 'color-bg-selected'
     | 'color-bg-selected-hover'
-    | 'color-blanket-bg'
+    | 'color-backdrop-bg'
     /**
      * BORDER
      */
@@ -335,7 +335,7 @@ export const defaultAliasTokens: AliasTokenMap = {
     /**
      * Use for the screen overlay that appears with modal dialogs
      */
-    'color-blanket-bg': 'transparent-dark-75',
+    'color-backdrop-bg': 'transparent-dark-75',
 
     /**
      * BORDER
diff --git a/packages/react/src/themes/tokens/component/modal-tokens.ts b/packages/react/src/themes/tokens/component/modal-tokens.ts
index f979af62bc..70a59fc770 100644
--- a/packages/react/src/themes/tokens/component/modal-tokens.ts
+++ b/packages/react/src/themes/tokens/component/modal-tokens.ts
@@ -4,7 +4,7 @@ import { RefTokens } from '../ref-tokens';
 export type ModalTokens =
     | 'modal-background-color'
     | 'modal-border-color'
-    | 'modal-overlay-background-color';
+    | 'modal-backdrop-background-color';
 
 export type ModalTokenValue = AliasTokens | RefTokens;
 
@@ -15,5 +15,5 @@ export type ModalTokenMap = {
 export const defaultModalTokens: ModalTokenMap = {
     'modal-background-color': 'color-bg-overlay',
     'modal-border-color': 'color-border-overlay',
-    'modal-overlay-background-color': 'color-blanket-bg',
+    'modal-backdrop-background-color': 'color-backdrop-bg',
 };

From e3b811287ca51d1994fa887086362eafacbcdfb9 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 11:06:01 -0400
Subject: [PATCH 52/70] chore(alias-tokens): update table tokens

---
 packages/react/src/themes/tokens/component/table-tokens.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/table-tokens.ts b/packages/react/src/themes/tokens/component/table-tokens.ts
index 40c1afd8e1..dd8c708ae9 100644
--- a/packages/react/src/themes/tokens/component/table-tokens.ts
+++ b/packages/react/src/themes/tokens/component/table-tokens.ts
@@ -37,6 +37,8 @@ export const defaultTableTokens: TableTokenMap = {
     'table-footer-background-color': 'color-bg',
     'table-footer-border-color': 'color-border',
 
+    'table-group-border-color': 'color-border',
+
     'table-cell-hover-background-color': 'color-bg-hover',
     'table-cell-number-text-color': 'color-content-subtle',
 
@@ -49,6 +51,4 @@ export const defaultTableTokens: TableTokenMap = {
     'table-sort-button-ascending-icon-color': 'color-content-subtle',
     'table-sort-button-descending-icon-color': 'color-content-subtle',
     'table-sort-button-default-icon-color': 'color-content-subtle',
-
-    'table-group-border-color': 'color-neutral-15',
 };

From 81ba171b447d695185fccb498db6b57b5f3dea41 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 11:48:43 -0400
Subject: [PATCH 53/70] chore(alias-tokens): update tab tokens

---
 .../react/src/components/tabs/tab-button.tsx  | 16 ++---
 packages/react/src/components/tabs/tabs.tsx   |  4 +-
 .../react/src/themes/tokens/alias-tokens.ts   |  2 +
 .../src/themes/tokens/component/tab-tokens.ts | 60 +++++++++++--------
 4 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/packages/react/src/components/tabs/tab-button.tsx b/packages/react/src/components/tabs/tab-button.tsx
index b291495034..8b3146131e 100644
--- a/packages/react/src/components/tabs/tab-button.tsx
+++ b/packages/react/src/components/tabs/tab-button.tsx
@@ -10,7 +10,7 @@ const selectedIndicatorPosition = (global: boolean | undefined): string => (glob
 
 const StyledButton = styled.button<{ $global?: boolean; $selected?: boolean; $removable?: boolean; }>`
     align-items: center;
-    color: ${({ $selected, theme }) => ($selected ? theme.component['tab-selected-text-color'] : theme.component['tab-text-color'])};
+    color: ${({ $selected, theme }) => ($selected ? theme.component['tab-button-selected-text-color'] : theme.component['tab-button-text-color'])};
     display: flex;
     font-family: var(--font-family);
     font-size: 0.875rem;
@@ -34,27 +34,27 @@ const StyledButton = styled.button<{ $global?: boolean; $selected?: boolean; $re
 
     ${({ $selected, theme }) => !$selected && css`
         &:active {
-            color: ${theme.component['tab-active-text-color']};
+            color: ${theme.component['tab-button-active-text-color']};
             font-weight: var(--font-semi-bold);
 
             &::after {
-                background-color: ${theme.component['tab-active-indicator-color']} !important;
+                background-color: ${theme.component['tab-button-indicator-active-background-color']} !important;
             }
         }
     `}
 
     ${({ $selected, theme }) => $selected && css`
-        background: ${theme.component['tab-selected-background-color']};
+        background: ${theme.component['tab-button-selected-background-color']};
         font-weight: var(--font-semi-bold);
 
         &::after {
-            background-color: ${theme.component['tab-selected-indicator-color']};
+            background-color: ${theme.component['tab-button-indicator-selected-background-color']};
         }
     `}
 `;
 
 const StyledButtonIcon = styled(Icon)`
-    color: ${({ theme }) => theme.component['tab-icon-color']};
+    color: ${({ theme }) => theme.component['tab-button-icon-color']};
     vertical-align: middle;
 `;
 
@@ -66,8 +66,8 @@ const StyledTab = styled.div<{ $selected: boolean; }>`
         &:hover {
             ${StyledButton} {
                 &::after {
-                    background-color: ${theme.component['tab-hover-indicator-color']};
-                    color: ${theme.component['tab-hover-text-color']};
+                    background-color: ${theme.component['tab-button-indicator-hover-background-color']};
+                    color: ${theme.component['tab-button-hover-text-color']};
                 }
             }
         }
diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx
index 9990739f04..1b0cbc5fc2 100644
--- a/packages/react/src/components/tabs/tabs.tsx
+++ b/packages/react/src/components/tabs/tabs.tsx
@@ -20,7 +20,7 @@ import { Button } from '../buttons/button';
 
 const TabButtonsContainer = styled.div<{ $global?: boolean; }>`
     /* stylelint-disable-next-line @stylistic/declaration-bang-space-before */
-    background: ${({ theme, $global }) => ($global ? theme.component['tab-global-background-color'] : theme.component['tab-background-color'])};
+    background: ${({ theme, $global }) => ($global ? theme.component['tab-button-global-background-color'] : theme.component['tab-button-section-background-color'])};
     border-radius: ${({ $global }) => !$global && 'var(--border-radius-2x) var(--border-radius-2x) 0 0'};
     box-sizing: content-box;
     height: var(--size-2halfx);
@@ -52,7 +52,7 @@ const TabButtonsList = styled.div<{ $global?: boolean; }>`
 
 const ScrollButton = styled(Button) <{ $global?: boolean; $position: 'left' | 'right' }>`
     align-items: center;
-    background: ${({ $global, theme }) => ($global ? theme.component['tab-global-background-color'] : theme.component['tab-background-color'])};
+    background: ${({ $global, theme }) => ($global ? theme.component['tab-button-global-background-color'] : theme.component['tab-button-section-background-color'])};
     border-bottom: 1px solid ${({ theme }) => theme.component['tab-border-bottom-color']};
     border-radius: 0;
     bottom: 0;
diff --git a/packages/react/src/themes/tokens/alias-tokens.ts b/packages/react/src/themes/tokens/alias-tokens.ts
index 54344ac14e..b954e7695f 100644
--- a/packages/react/src/themes/tokens/alias-tokens.ts
+++ b/packages/react/src/themes/tokens/alias-tokens.ts
@@ -86,6 +86,7 @@ export type AliasTokens =
     | 'color-bg-brand'
     | 'color-bg-brand-bold'
     | 'color-bg-indicator'
+    | 'color-bg-indicator-active'
     | 'color-border-brand'
     | 'color-content-brand'
     /**
@@ -282,6 +283,7 @@ export const defaultAliasTokens: AliasTokenMap = {
     'color-bg-brand': 'color-brand-50',
     'color-bg-brand-bold': 'color-brand-80',
     'color-bg-indicator': 'color-brand-50',
+    'color-bg-indicator-active': 'color-brand-70',
     'color-border-brand': 'color-brand-70',
     'color-content-brand': 'color-brand-50',
 
diff --git a/packages/react/src/themes/tokens/component/tab-tokens.ts b/packages/react/src/themes/tokens/component/tab-tokens.ts
index 25860867b7..ae8c4b54d2 100644
--- a/packages/react/src/themes/tokens/component/tab-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tab-tokens.ts
@@ -2,18 +2,18 @@ import { AliasTokens } from '../alias-tokens';
 import { RefTokens } from '../ref-tokens';
 
 export type TabTokens =
-    | 'tab-background-color'
+    | 'tab-button-section-background-color'
+    | 'tab-button-global-background-color'
+    | 'tab-button-icon-color'
+    | 'tab-button-text-color'
+    | 'tab-button-indicator-hover-background-color'
+    | 'tab-button-hover-text-color'
+    | 'tab-button-indicator-active-background-color'
+    | 'tab-button-active-text-color'
+    | 'tab-button-indicator-selected-background-color'
+    | 'tab-button-selected-background-color'
+    | 'tab-button-selected-text-color'
     | 'tab-border-bottom-color'
-    | 'tab-global-background-color'
-    | 'tab-icon-color'
-    | 'tab-text-color'
-    | 'tab-hover-indicator-color'
-    | 'tab-hover-text-color'
-    | 'tab-active-indicator-color'
-    | 'tab-active-text-color'
-    | 'tab-selected-indicator-color'
-    | 'tab-selected-background-color'
-    | 'tab-selected-text-color'
     | 'tab-panel-border-color'
     | 'tab-panel-background-color';
 
@@ -24,18 +24,30 @@ export type TabTokenMap = {
 };
 
 export const defaultTabTokens: TabTokenMap = {
-    'tab-background-color': 'color-neutral-05',
+    /**
+     * tab button
+     */
+    'tab-button-global-background-color': 'color-bg',
+    'tab-button-section-background-color': 'color-bg-neutral-subtle', // color-bg-isolated? neutral-02 or neutral-05?
+    'tab-button-selected-background-color': 'color-bg',
+
+    'tab-button-icon-color': 'color-content-subtle',
+    'tab-button-text-color': 'color-content-subtle',
+    'tab-button-hover-text-color': 'color-neutral-65',
+    'tab-button-active-text-color': 'color-neutral-90',
+    'tab-button-selected-text-color': 'color-neutral-90',
+
+    /**
+     * tab button indicator
+     */
+    'tab-button-indicator-hover-background-color': 'color-bg-hover',
+    'tab-button-indicator-active-background-color': 'color-bg-indicator-active', // not sure about this one
+    'tab-button-indicator-selected-background-color': 'color-bg-indicator',
+
+    /**
+     * tab panel
+     */
     'tab-border-bottom-color': 'color-neutral-15',
-    'tab-global-background-color': 'color-white',
-    'tab-icon-color': 'color-neutral-65',
-    'tab-text-color': 'color-neutral-65',
-    'tab-hover-indicator-color': 'color-neutral-15',
-    'tab-hover-text-color': 'color-neutral-65',
-    'tab-active-indicator-color': 'color-brand-70',
-    'tab-active-text-color': 'color-neutral-90',
-    'tab-selected-indicator-color': 'color-brand-50',
-    'tab-selected-background-color': 'color-white',
-    'tab-selected-text-color': 'color-neutral-90',
-    'tab-panel-border-color': 'color-neutral-05',
-    'tab-panel-background-color': 'color-white',
+    'tab-panel-border-color': 'color-neutral-05', // should be the same as 'tab-border-bottom-color'?
+    'tab-panel-background-color': 'color-bg',
 };

From 4e8901d24fa5ca2f76c58516ad76c9d9d6e6def3 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 14:55:07 -0400
Subject: [PATCH 54/70] chore(alias-tokens): update password tokens

---
 .../react/src/themes/tokens/component/password-input-tokens.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/themes/tokens/component/password-input-tokens.ts b/packages/react/src/themes/tokens/component/password-input-tokens.ts
index 264a490529..9800199513 100644
--- a/packages/react/src/themes/tokens/component/password-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/password-input-tokens.ts
@@ -25,7 +25,7 @@ export const defaultPasswordInputTokens: PasswordInputTokenMap = {
 
     'password-strength-label-text-color': 'color-content-subtle',
 
-    'password-strength-meter-empty-color': 'color-neutral-30',
+    'password-strength-meter-empty-color': 'color-bg-empty',
     'password-strength-meter-weak-color': 'color-alert-50',
     'password-strength-meter-fair-color': 'color-warning-50',
     'password-strength-meter-good-color': 'color-success-50',

From c2f69582ff6f39bb057ddcfae5c0241666cfd576 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 15:08:36 -0400
Subject: [PATCH 55/70] chore(alias-tokens): rename segmented control tokens

---
 .../toggle-button-group.tsx                   | 22 +++++-----
 .../src/themes/tokens/component-tokens.ts     |  6 +--
 .../tokens/component/progress-tokens.ts       | 14 +++----
 .../component/segmented-control-tokens.ts     | 40 +++++++++++++++++++
 .../component/toggle-button-group-tokens.ts   | 40 -------------------
 5 files changed, 61 insertions(+), 61 deletions(-)
 create mode 100644 packages/react/src/themes/tokens/component/segmented-control-tokens.ts
 delete mode 100644 packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts

diff --git a/packages/react/src/components/toggle-button-group/toggle-button-group.tsx b/packages/react/src/components/toggle-button-group/toggle-button-group.tsx
index e66ce18d35..068c52fc34 100644
--- a/packages/react/src/components/toggle-button-group/toggle-button-group.tsx
+++ b/packages/react/src/components/toggle-button-group/toggle-button-group.tsx
@@ -24,11 +24,11 @@ interface ToggleButtonProps {
 
 const ToggleButton = styled.button<ToggleButtonProps>`
     align-items: center;
-    background-color: ${({ theme, pressed }) => (pressed ? theme.component['toggle-button-selected-background-color'] : theme.component['toggle-button-background-color'])};
-    border: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['toggle-button-selected-border-color'] : theme.component['toggle-button-border-color'])};
+    background-color: ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-selected-background-color'] : theme.component['segmented-control-background-color'])};
+    border: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-selected-border-color'] : theme.component['segmented-control-border-color'])};
     border-right: ${({ pressed }) => (pressed ? '1px solid' : 0)};
     box-sizing: border-box;
-    color: ${({ theme, pressed }) => (pressed ? theme.component['toggle-button-selected-text-color'] : theme.component['toggle-button-text-color'])};
+    color: ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-selected-text-color'] : theme.component['segmented-control-text-color'])};
     font-size: ${({ isMobile }) => (isMobile ? '1rem' : '0.875rem')};
     letter-spacing: 0.02875rem;
     min-height: ${({ isMobile }) => (isMobile ? 'var(--size-3x)' : 'var(--size-2x)')};
@@ -39,7 +39,7 @@ const ToggleButton = styled.button<ToggleButtonProps>`
     `}
 
     &:last-child {
-        border-right: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['toggle-button-selected-border-color'] : theme.component['toggle-button-border-color'])};
+        border-right: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-selected-border-color'] : theme.component['segmented-control-border-color'])};
         margin: 0;
     }
 
@@ -51,19 +51,19 @@ const ToggleButton = styled.button<ToggleButtonProps>`
 
     &:disabled,
     &:disabled:hover {
-        background-color: ${({ theme }) => theme.component['toggle-button-disabled-background-color']};
-        border-color: ${({ theme }) => theme.component['toggle-button-disabled-border-color']};
-        color: ${({ theme }) => theme.component['toggle-button-disabled-text-color']};
+        background-color: ${({ theme }) => theme.component['segmented-control-disabled-background-color']};
+        border-color: ${({ theme }) => theme.component['segmented-control-disabled-border-color']};
+        color: ${({ theme }) => theme.component['segmented-control-disabled-text-color']};
     }
 
     ${({ theme, pressed }) => !pressed && css`
         &:hover {
-            background-color: ${theme.component['toggle-button-hover-background-color']};
-            border-color: ${theme.component['toggle-button-hover-border-color']};
-            color: ${theme.component['toggle-button-hover-text-color']};
+            background-color: ${theme.component['segmented-control-hover-background-color']};
+            border-color: ${theme.component['segmented-control-hover-border-color']};
+            color: ${theme.component['segmented-control-hover-text-color']};
 
             & + button {
-                border-left-color: ${theme.component['toggle-button-hover-border-color']};
+                border-left-color: ${theme.component['segmented-control-hover-border-color']};
             }
         }
     `}
diff --git a/packages/react/src/themes/tokens/component-tokens.ts b/packages/react/src/themes/tokens/component-tokens.ts
index c7b71d35ee..9da0cbc727 100644
--- a/packages/react/src/themes/tokens/component-tokens.ts
+++ b/packages/react/src/themes/tokens/component-tokens.ts
@@ -28,7 +28,7 @@ import { defaultRadioCardTokens, RadioCardTokens } from './component/radio-card-
 import { defaultSearchInputTokens, SearchInputTokens } from './component/search-input-tokens';
 import { defaultStepperTokens, StepperTokens } from './component/stepper-tokens';
 import { defaultTextAreaTokens, TextAreaTokens } from './component/text-area-tokens';
-import { defaultToggleButtonGroupTokens, ToggleButtonGroupTokens } from './component/toggle-button-group-tokens';
+import { defaultSegmentedControlTokens, SegmentedControlTokens } from './component/segmented-control-tokens';
 import { defaultToggleSwitchTokens, ToggleSwitchTokens } from './component/toggle-switch-tokens';
 import { defaultLegendTokens, LegendTokens } from './component/legend-tokens';
 import { defaultLozengeTokens, LozengeTokens } from './component/lozenge-tokens';
@@ -73,7 +73,7 @@ export type ComponentTokens =
     | TextAreaTokens
     | FieldTokens
     | RadioButtonGroupTokens
-    | ToggleButtonGroupTokens
+    | SegmentedControlTokens
     | ToggleSwitchTokens
     | TextInputTokens
     | RadioCardTokens
@@ -136,7 +136,7 @@ export const defaultComponentTokens: ComponentTokenMap = {
     ...defaultTextAreaTokens,
     ...defaultFieldTokens,
     ...defaultRadioButtonGroupTokens,
-    ...defaultToggleButtonGroupTokens,
+    ...defaultSegmentedControlTokens,
     ...defaultToggleSwitchTokens,
     ...defaultTextInputTokens,
     ...defaultRadioCardTokens,
diff --git a/packages/react/src/themes/tokens/component/progress-tokens.ts b/packages/react/src/themes/tokens/component/progress-tokens.ts
index b42e62d9e9..bc89c080aa 100644
--- a/packages/react/src/themes/tokens/component/progress-tokens.ts
+++ b/packages/react/src/themes/tokens/component/progress-tokens.ts
@@ -31,18 +31,18 @@ export type ProgressTokenMap = {
 };
 
 export const defaultProgressTokens: ProgressTokenMap = {
-    'progress-tracker-notification-badge-color': 'color-content-inverse',
-    'progress-tracker-notification-badge-fill-color': 'color-feedback-bg-alert-bold',
-
     'progress-circle-empty-track-color': 'color-bg-empty',
-    'progress-indicator-empty-track-color': 'color-bg-empty',
-    'progress-tracker-bridge-empty-background-color': 'color-bg-empty',
-    'progress-tracker-bridge-filled-background-color': 'color-bg-indicator',
-
     'progress-circle-label-text-color': 'color-content',
     'progress-circle-result-text-color': 'color-content',
+
     'progress-indicator-label-text-color': 'color-content',
+    'progress-indicator-empty-track-color': 'color-bg-empty',
 
+    'progress-tracker-notification-badge-color': 'color-content-inverse',
+    'progress-tracker-notification-badge-fill-color': 'color-feedback-bg-alert-bold',
+
+    'progress-tracker-bridge-empty-background-color': 'color-bg-empty',
+    'progress-tracker-bridge-filled-background-color': 'color-bg-indicator',
     // TO-DO
     'progress-tracker-step-todo-text-color': 'color-content',
     'progress-tracker-step-todo-background-color': 'color-bg',
diff --git a/packages/react/src/themes/tokens/component/segmented-control-tokens.ts b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
new file mode 100644
index 0000000000..22ce109edf
--- /dev/null
+++ b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
@@ -0,0 +1,40 @@
+import { AliasTokens } from '../alias-tokens';
+import { RefTokens } from '../ref-tokens';
+
+export type SegmentedControlTokens =
+    | 'segmented-control-background-color'
+    | 'segmented-control-selected-background-color'
+    | 'segmented-control-hover-background-color'
+    | 'segmented-control-disabled-background-color'
+    | 'segmented-control-border-color'
+    | 'segmented-control-selected-border-color'
+    | 'segmented-control-hover-border-color'
+    | 'segmented-control-disabled-border-color'
+    | 'segmented-control-text-color'
+    | 'segmented-control-selected-text-color'
+    | 'segmented-control-hover-text-color'
+    | 'segmented-control-disabled-text-color';
+
+export type SegmentedControlTokenValue = AliasTokens | RefTokens;
+
+export type SegmentedControlTokenMap = {
+    [Token in SegmentedControlTokens]: SegmentedControlTokenValue;
+};
+
+export const defaultSegmentedControlTokens: SegmentedControlTokenMap = {
+    'segmented-control-background-color': 'color-input-bg',
+    'segmented-control-border-color': 'color-input-border',
+    'segmented-control-text-color': 'color-input-content',
+
+    'segmented-control-hover-background-color': 'color-input-bg-hover',
+    'segmented-control-hover-border-color': 'color-input-border-hover',
+    'segmented-control-hover-text-color': 'color-input-content-hover',
+
+    'segmented-control-disabled-background-color': 'color-input-bg-disabled',
+    'segmented-control-disabled-border-color': 'color-input-border-disabled',
+    'segmented-control-disabled-text-color': 'color-input-content-disabled',
+
+    'segmented-control-selected-background-color': 'color-input-bg-selected',
+    'segmented-control-selected-border-color': 'color-input-border-selected',
+    'segmented-control-selected-text-color': 'color-input-content-selected',
+};
diff --git a/packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts b/packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts
deleted file mode 100644
index b6a198be3d..0000000000
--- a/packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { AliasTokens } from '../alias-tokens';
-import { RefTokens } from '../ref-tokens';
-
-export type ToggleButtonGroupTokens =
-    | 'toggle-button-background-color'
-    | 'toggle-button-selected-background-color'
-    | 'toggle-button-hover-background-color'
-    | 'toggle-button-disabled-background-color'
-    | 'toggle-button-border-color'
-    | 'toggle-button-selected-border-color'
-    | 'toggle-button-hover-border-color'
-    | 'toggle-button-disabled-border-color'
-    | 'toggle-button-text-color'
-    | 'toggle-button-selected-text-color'
-    | 'toggle-button-hover-text-color'
-    | 'toggle-button-disabled-text-color';
-
-export type ToggleButtonGroupTokenValue = AliasTokens | RefTokens;
-
-export type ToggleButtonGroupTokenMap = {
-    [Token in ToggleButtonGroupTokens]: ToggleButtonGroupTokenValue;
-};
-
-export const defaultToggleButtonGroupTokens: ToggleButtonGroupTokenMap = {
-    'toggle-button-background-color': 'color-input-bg',
-    'toggle-button-border-color': 'color-input-border',
-    'toggle-button-text-color': 'color-input-content',
-
-    'toggle-button-hover-background-color': 'color-input-bg-hover',
-    'toggle-button-hover-border-color': 'color-input-border-hover',
-    'toggle-button-hover-text-color': 'color-input-content-hover',
-
-    'toggle-button-disabled-background-color': 'color-input-bg-disabled',
-    'toggle-button-disabled-border-color': 'color-input-border-disabled',
-    'toggle-button-disabled-text-color': 'color-input-content-disabled',
-
-    'toggle-button-selected-background-color': 'color-input-bg-selected',
-    'toggle-button-selected-border-color': 'color-input-border-selected',
-    'toggle-button-selected-text-color': 'color-input-content-selected',
-};

From cec458f5d39c5fa971ffa8f23115748d845b020a Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 15:23:26 -0400
Subject: [PATCH 56/70] chore(alias-tokens): fix

---
 .../src/themes/tokens/component/toggle-switch-tokens.ts     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts b/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
index eebbeb2a60..c872d4279e 100644
--- a/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
@@ -22,9 +22,6 @@ export type ToggleSwitchTokenMap = {
 export const defaultToggleSwitchTokens: ToggleSwitchTokenMap = {
     'toggle-switch-background-color': 'color-bg-neutral-bold',
     'toggle-switch-border-color': 'color-bg-neutral-bold',
-    'toggle-switch-label-text-color': 'color-content',
-    'toggle-switch-knob-background-color': 'color-input-bg',
-
     'toggle-switch-toggled-background-color': 'color-feedback-bg-success-bold',
     'toggle-switch-toggled-border-color': 'color-feedback-bg-success-bold',
 
@@ -32,4 +29,7 @@ export const defaultToggleSwitchTokens: ToggleSwitchTokenMap = {
     'toggle-switch-disabled-border-color': 'color-bg-neutral-bold-disabled',
     'toggle-switch-disabled-toggled-background-color': 'color-feedback-bg-success-bold-disabled',
     'toggle-switch-disabled-toggled-border-color': 'color-feedback-bg-success-bold-disabled',
+
+    'toggle-switch-label-text-color': 'color-content',
+    'toggle-switch-knob-background-color': 'color-input-bg',
 };

From f6c46034c9b272a676740e820a81b74e9b00d61a Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 16:26:40 -0400
Subject: [PATCH 57/70] chore(alias-tokens): link button tokens

---
 .../src/themes/tokens/component/button-tokens.ts     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/themes/tokens/component/button-tokens.ts b/packages/react/src/themes/tokens/component/button-tokens.ts
index 8686a18097..8768bf4e6c 100644
--- a/packages/react/src/themes/tokens/component/button-tokens.ts
+++ b/packages/react/src/themes/tokens/component/button-tokens.ts
@@ -260,28 +260,28 @@ export const defaultButtonTokens: ButtonTokenMap = {
     // Tertiary destructive
     'button-destructive-tertiary-background-color': 'transparent-100',
     'button-destructive-tertiary-border-color': 'transparent-100',
-    'button-destructive-tertiary-text-color': 'color-alert-50',
+    'button-destructive-tertiary-text-color': 'color-action-destructive',
     // Tertiary destructive hover
     'button-destructive-tertiary-hover-background-color': 'color-alert-05',
     'button-destructive-tertiary-hover-border-color': 'transparent-100',
-    'button-destructive-tertiary-hover-text-color': 'color-alert-70',
+    'button-destructive-tertiary-hover-text-color': 'color-action-destructive-hover',
     // Tertiary destructive disabled
     'button-destructive-tertiary-disabled-background-color': 'transparent-100',
     'button-destructive-tertiary-disabled-border-color': 'transparent-100',
-    'button-destructive-tertiary-disabled-text-color': 'color-alert-20',
+    'button-destructive-tertiary-disabled-text-color': 'color-action-destructive-disabled',
 
     // Tertiairy destructive inverted
     'button-destructive-tertiary-inverted-background-color': 'transparent-100',
     'button-destructive-tertiary-inverted-border-color': 'transparent-100',
-    'button-destructive-tertiary-inverted-text-color': 'color-alert-50',
+    'button-destructive-tertiary-inverted-text-color': 'color-action-destructive',
     // Tertiairy destructive inverted hover
     'button-destructive-tertiary-inverted-hover-background-color': 'color-alert-05',
     'button-destructive-tertiary-inverted-hover-border-color': 'transparent-100',
-    'button-destructive-tertiary-inverted-hover-text-color': 'color-alert-70',
+    'button-destructive-tertiary-inverted-hover-text-color': 'color-action-destructive-hover',
     // Tertiairy destructive inverted disabled
     'button-destructive-tertiary-inverted-disabled-background-color': 'transparent-100',
     'button-destructive-tertiary-inverted-disabled-border-color': 'transparent-100',
-    'button-destructive-tertiary-inverted-disabled-text-color': 'color-alert-20',
+    'button-destructive-tertiary-inverted-disabled-text-color': 'color-action-destructive-disabled',
 
     // Input button
     'button-input-background-color': 'color-input-bg',

From 2969941394cee831967cd031e8ddff77bff8c60c Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 9 May 2024 17:04:38 -0400
Subject: [PATCH 58/70] chore(alias-tokens): update tabs tokens and styling

---
 .../react/src/components/tabs/tab-button.tsx  |   4 +-
 .../react/src/components/tabs/tab-panel.tsx   |   3 -
 .../src/components/tabs/tabs.test.tsx.snap    | 228 ++++++++++--------
 packages/react/src/components/tabs/tabs.tsx   |  17 +-
 .../src/themes/tokens/component/tab-tokens.ts |  48 ++--
 5 files changed, 166 insertions(+), 134 deletions(-)

diff --git a/packages/react/src/components/tabs/tab-button.tsx b/packages/react/src/components/tabs/tab-button.tsx
index 8b3146131e..26c04611ba 100644
--- a/packages/react/src/components/tabs/tab-button.tsx
+++ b/packages/react/src/components/tabs/tab-button.tsx
@@ -43,8 +43,8 @@ const StyledButton = styled.button<{ $global?: boolean; $selected?: boolean; $re
         }
     `}
 
-    ${({ $selected, theme }) => $selected && css`
-        background: ${theme.component['tab-button-selected-background-color']};
+    ${({ $global, $selected, theme }) => $selected && css`
+        background: ${$global ? theme.component['tab-global-button-selected-background-color'] : theme.component['tab-section-button-selected-background-color']};
         font-weight: var(--font-semi-bold);
 
         &::after {
diff --git a/packages/react/src/components/tabs/tab-panel.tsx b/packages/react/src/components/tabs/tab-panel.tsx
index ad9b07d87d..fd3ed97bca 100644
--- a/packages/react/src/components/tabs/tab-panel.tsx
+++ b/packages/react/src/components/tabs/tab-panel.tsx
@@ -11,9 +11,6 @@ interface TabPanelProps {
 }
 
 const StyledDiv = styled.div<{ $isGlobal?: boolean; }>`
-    background: ${({ $isGlobal, theme }) => !$isGlobal && theme.component['tab-panel-background-color']};
-    border: ${({ $isGlobal, theme }) => !$isGlobal && `1px solid ${theme.component['tab-panel-border-color']}`};
-    border-radius: ${({ $isGlobal }) => !$isGlobal && '0 0 var(--border-radius-2x) var(--border-radius-2x)'};
     border-top: none;
 
     ${({ theme }) => focus({ theme }, { focusType: 'focus-visible' })}
diff --git a/packages/react/src/components/tabs/tabs.test.tsx.snap b/packages/react/src/components/tabs/tabs.test.tsx.snap
index 6b6e11075d..e5f2f473f7 100644
--- a/packages/react/src/components/tabs/tabs.test.tsx.snap
+++ b/packages/react/src/components/tabs/tabs.test.tsx.snap
@@ -77,7 +77,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background: #FFFFFF;
+  background: transparent;
   font-weight: var(--font-semi-bold);
 }
 
@@ -232,7 +232,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   box-sizing: content-box;
   height: var(--size-2halfx);
   padding-top: var(--spacing-2x);
@@ -317,7 +317,9 @@ exports[`Tabs matches snapshot (global) 1`] = `
   display: none;
 }
 
-<div>
+<div
+  class=""
+>
   <div
     class="c0"
   >
@@ -432,7 +434,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
 `;
 
 exports[`Tabs matches snapshot (mobile) 1`] = `
-.c1 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -472,24 +474,24 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   user-select: none;
 }
 
-.c1 {
+.c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c1:focus {
+.c2:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c1 > svg {
+.c2 > svg {
   color: inherit;
   height: var(--size-1halfx);
   width: var(--size-1halfx);
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -512,7 +514,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   font-weight: var(--font-semi-bold);
 }
 
-.c7::after {
+.c8::after {
   content: '';
   display: block;
   height: 4px;
@@ -522,22 +524,22 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   top: 0;
 }
 
-.c7 {
+.c8 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c7:focus-visible {
+.c8:focus-visible {
   box-shadow: 0 0 0 0 transparent;
   outline: 2px solid #006296;
   outline-offset: -2px;
 }
 
-.c7::after {
+.c8::after {
   background-color: #006296;
 }
 
-.c10 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -558,7 +560,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   user-select: none;
 }
 
-.c10::after {
+.c11::after {
   content: '';
   display: block;
   height: 4px;
@@ -568,27 +570,27 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   top: 0;
 }
 
-.c10 {
+.c11 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c10:focus-visible {
+.c11:focus-visible {
   box-shadow: 0 0 0 0 transparent;
   outline: 2px solid #006296;
   outline-offset: -2px;
 }
 
-.c10:active {
+.c11:active {
   color: #1B1C1E;
   font-weight: var(--font-semi-bold);
 }
 
-.c10:active::after {
+.c11:active::after {
   background-color: #003A5A !important;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -596,7 +598,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   position: relative;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -604,12 +606,12 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   position: relative;
 }
 
-.c9:hover .c6::after {
+.c10:hover .c7::after {
   background-color: #DBDEE1;
   color: #60666E;
 }
 
-.c8::after {
+.c9::after {
   content: attr(data-content);
   display: block;
   font-weight: var(--font-semi-bold);
@@ -617,55 +619,59 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   visibility: hidden;
 }
 
-.c12 {
-  background: #FFFFFF;
-  border: 1px solid #F1F2F2;
-  border-radius: 0 0 var(--border-radius-2x) var(--border-radius-2x);
+.c13 {
   border-top: none;
 }
 
-.c12 {
+.c13 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c12:focus-visible {
+.c13:focus-visible {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c2 {
+.c3 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
 }
 
-.c2 {
+.c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c2:focus {
+.c3:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c2:hover,
-.c2[aria-expanded='true'] {
+.c3:hover,
+.c3[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
   color: #000000;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
 }
 
 .c0 {
+  background: #FFFFFF;
+  border: 1px solid #DBDEE1;
+  border-radius: var(--border-radius-2x);
+  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.2);
+}
+
+.c1 {
   background: #F1F2F2;
   border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
   box-sizing: content-box;
@@ -673,7 +679,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   position: relative;
 }
 
-.c0::before {
+.c1::before {
   border-bottom: 1px solid #DBDEE1;
   bottom: 0;
   content: '';
@@ -683,7 +689,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   width: 100%;
 }
 
-.c4 {
+.c5 {
   border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
   display: -webkit-box;
   display: -webkit-flex;
@@ -701,12 +707,12 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   white-space: nowrap;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #F1F2F2;
+  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -724,16 +730,16 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   border-radius: var(--border-radius-2x) 0 0 0;
 }
 
-.c3.hidden {
+.c4.hidden {
   display: none;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #F1F2F2;
+  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -751,17 +757,19 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   border-radius: 0 var(--border-radius-2x) 0 0;
 }
 
-.c11.hidden {
+.c12.hidden {
   display: none;
 }
 
-<div>
+<div
+  class="c0"
+>
   <div
-    class="c0"
+    class="c1"
   >
     <button
       aria-hidden="true"
-      class="c1 c2 c3 hidden"
+      class="c2 c3 c4 hidden"
       type="button"
     >
       <svg
@@ -774,24 +782,24 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
     </button>
     <div
       aria-label="tabs label"
-      class="c4"
+      class="c5"
       role="tablist"
     >
       <div
-        class="c5"
+        class="c6"
         data-testid="tab-1"
       >
         <button
           aria-controls="uuid1"
           aria-selected="true"
-          class="c6 c7"
+          class="c7 c8"
           data-testid="tab-1-button"
           id="tab-1"
           role="tab"
           type="button"
         >
           <span
-            class="c8"
+            class="c9"
             data-content="button 1"
             data-testid="tab-1-text"
           >
@@ -800,13 +808,13 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
         </button>
       </div>
       <div
-        class="c9"
+        class="c10"
         data-testid="tab-2"
       >
         <button
           aria-controls="uuid2"
           aria-selected="false"
-          class="c6 c10"
+          class="c7 c11"
           data-testid="tab-2-button"
           id="tab-2"
           role="tab"
@@ -814,7 +822,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
           type="button"
         >
           <span
-            class="c8"
+            class="c9"
             data-content="button 2"
             data-testid="tab-2-text"
           >
@@ -825,7 +833,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
     </div>
     <button
       aria-hidden="true"
-      class="c1 c2 c11 hidden"
+      class="c2 c3 c12 hidden"
       type="button"
     >
       <svg
@@ -840,7 +848,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   <div
     aria-hidden="false"
     aria-labelledby="tab-1"
-    class="c12"
+    class="c13"
     id="uuid1"
     role="tabpanel"
     tabindex="0"
@@ -854,7 +862,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   <div
     aria-hidden="true"
     aria-labelledby="tab-2"
-    class="c12"
+    class="c13"
     hidden=""
     id="uuid2"
     role="tabpanel"
@@ -870,7 +878,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
 `;
 
 exports[`Tabs matches snapshot 1`] = `
-.c1 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -910,24 +918,24 @@ exports[`Tabs matches snapshot 1`] = `
   user-select: none;
 }
 
-.c1 {
+.c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c1:focus {
+.c2:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c1 > svg {
+.c2 > svg {
   color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -950,7 +958,7 @@ exports[`Tabs matches snapshot 1`] = `
   font-weight: var(--font-semi-bold);
 }
 
-.c7::after {
+.c8::after {
   content: '';
   display: block;
   height: 4px;
@@ -960,22 +968,22 @@ exports[`Tabs matches snapshot 1`] = `
   top: 0;
 }
 
-.c7 {
+.c8 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c7:focus-visible {
+.c8:focus-visible {
   box-shadow: 0 0 0 0 transparent;
   outline: 2px solid #006296;
   outline-offset: -2px;
 }
 
-.c7::after {
+.c8::after {
   background-color: #006296;
 }
 
-.c10 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -996,7 +1004,7 @@ exports[`Tabs matches snapshot 1`] = `
   user-select: none;
 }
 
-.c10::after {
+.c11::after {
   content: '';
   display: block;
   height: 4px;
@@ -1006,27 +1014,27 @@ exports[`Tabs matches snapshot 1`] = `
   top: 0;
 }
 
-.c10 {
+.c11 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c10:focus-visible {
+.c11:focus-visible {
   box-shadow: 0 0 0 0 transparent;
   outline: 2px solid #006296;
   outline-offset: -2px;
 }
 
-.c10:active {
+.c11:active {
   color: #1B1C1E;
   font-weight: var(--font-semi-bold);
 }
 
-.c10:active::after {
+.c11:active::after {
   background-color: #003A5A !important;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1034,7 +1042,7 @@ exports[`Tabs matches snapshot 1`] = `
   position: relative;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1042,12 +1050,12 @@ exports[`Tabs matches snapshot 1`] = `
   position: relative;
 }
 
-.c9:hover .c6::after {
+.c10:hover .c7::after {
   background-color: #DBDEE1;
   color: #60666E;
 }
 
-.c8::after {
+.c9::after {
   content: attr(data-content);
   display: block;
   font-weight: var(--font-semi-bold);
@@ -1055,55 +1063,59 @@ exports[`Tabs matches snapshot 1`] = `
   visibility: hidden;
 }
 
-.c12 {
-  background: #FFFFFF;
-  border: 1px solid #F1F2F2;
-  border-radius: 0 0 var(--border-radius-2x) var(--border-radius-2x);
+.c13 {
   border-top: none;
 }
 
-.c12 {
+.c13 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c12:focus-visible {
+.c13:focus-visible {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c2 {
+.c3 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
 }
 
-.c2 {
+.c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c2:focus {
+.c3:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c2:hover,
-.c2[aria-expanded='true'] {
+.c3:hover,
+.c3[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
   color: #000000;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
 }
 
 .c0 {
+  background: #FFFFFF;
+  border: 1px solid #DBDEE1;
+  border-radius: var(--border-radius-2x);
+  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.2);
+}
+
+.c1 {
   background: #F1F2F2;
   border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
   box-sizing: content-box;
@@ -1111,7 +1123,7 @@ exports[`Tabs matches snapshot 1`] = `
   position: relative;
 }
 
-.c0::before {
+.c1::before {
   border-bottom: 1px solid #DBDEE1;
   bottom: 0;
   content: '';
@@ -1121,7 +1133,7 @@ exports[`Tabs matches snapshot 1`] = `
   width: 100%;
 }
 
-.c4 {
+.c5 {
   border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1139,12 +1151,12 @@ exports[`Tabs matches snapshot 1`] = `
   white-space: nowrap;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #F1F2F2;
+  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -1162,16 +1174,16 @@ exports[`Tabs matches snapshot 1`] = `
   border-radius: var(--border-radius-2x) 0 0 0;
 }
 
-.c3.hidden {
+.c4.hidden {
   display: none;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #F1F2F2;
+  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -1189,17 +1201,19 @@ exports[`Tabs matches snapshot 1`] = `
   border-radius: 0 var(--border-radius-2x) 0 0;
 }
 
-.c11.hidden {
+.c12.hidden {
   display: none;
 }
 
-<div>
+<div
+  class="c0"
+>
   <div
-    class="c0"
+    class="c1"
   >
     <button
       aria-hidden="true"
-      class="c1 c2 c3 hidden"
+      class="c2 c3 c4 hidden"
       type="button"
     >
       <svg
@@ -1212,24 +1226,24 @@ exports[`Tabs matches snapshot 1`] = `
     </button>
     <div
       aria-label="tabs label"
-      class="c4"
+      class="c5"
       role="tablist"
     >
       <div
-        class="c5"
+        class="c6"
         data-testid="tab-1"
       >
         <button
           aria-controls="uuid1"
           aria-selected="true"
-          class="c6 c7"
+          class="c7 c8"
           data-testid="tab-1-button"
           id="tab-1"
           role="tab"
           type="button"
         >
           <span
-            class="c8"
+            class="c9"
             data-content="button 1"
             data-testid="tab-1-text"
           >
@@ -1238,13 +1252,13 @@ exports[`Tabs matches snapshot 1`] = `
         </button>
       </div>
       <div
-        class="c9"
+        class="c10"
         data-testid="tab-2"
       >
         <button
           aria-controls="uuid2"
           aria-selected="false"
-          class="c6 c10"
+          class="c7 c11"
           data-testid="tab-2-button"
           id="tab-2"
           role="tab"
@@ -1252,7 +1266,7 @@ exports[`Tabs matches snapshot 1`] = `
           type="button"
         >
           <span
-            class="c8"
+            class="c9"
             data-content="button 2"
             data-testid="tab-2-text"
           >
@@ -1263,7 +1277,7 @@ exports[`Tabs matches snapshot 1`] = `
     </div>
     <button
       aria-hidden="true"
-      class="c1 c2 c11 hidden"
+      class="c2 c3 c12 hidden"
       type="button"
     >
       <svg
@@ -1278,7 +1292,7 @@ exports[`Tabs matches snapshot 1`] = `
   <div
     aria-hidden="false"
     aria-labelledby="tab-1"
-    class="c12"
+    class="c13"
     id="uuid1"
     role="tabpanel"
     tabindex="0"
@@ -1292,7 +1306,7 @@ exports[`Tabs matches snapshot 1`] = `
   <div
     aria-hidden="true"
     aria-labelledby="tab-2"
-    class="c12"
+    class="c13"
     hidden=""
     id="uuid2"
     role="tabpanel"
diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx
index 1b0cbc5fc2..b1fe4da788 100644
--- a/packages/react/src/components/tabs/tabs.tsx
+++ b/packages/react/src/components/tabs/tabs.tsx
@@ -18,9 +18,18 @@ import { TabButton } from './tab-button';
 import { TabPanel } from './tab-panel';
 import { Button } from '../buttons/button';
 
+const TabsWrapper = styled.div<{ $global?: boolean; }>`
+    ${({ theme, $global }) => !$global && css`
+        background: ${theme.component['tab-section-background-color']};
+        border: 1px solid ${theme.component['tab-section-border-color']};
+        border-radius: var(--border-radius-2x);
+        box-shadow: 0 1px 4px 0 ${theme.component['tab-section-box-shadow-color']};
+    `};
+`;
+
 const TabButtonsContainer = styled.div<{ $global?: boolean; }>`
     /* stylelint-disable-next-line @stylistic/declaration-bang-space-before */
-    background: ${({ theme, $global }) => ($global ? theme.component['tab-button-global-background-color'] : theme.component['tab-button-section-background-color'])};
+    background: ${({ theme, $global }) => ($global ? theme.component['tab-global-list-background-color'] : theme.component['tab-section-list-background-color'])};
     border-radius: ${({ $global }) => !$global && 'var(--border-radius-2x) var(--border-radius-2x) 0 0'};
     box-sizing: content-box;
     height: var(--size-2halfx);
@@ -52,7 +61,7 @@ const TabButtonsList = styled.div<{ $global?: boolean; }>`
 
 const ScrollButton = styled(Button) <{ $global?: boolean; $position: 'left' | 'right' }>`
     align-items: center;
-    background: ${({ $global, theme }) => ($global ? theme.component['tab-button-global-background-color'] : theme.component['tab-button-section-background-color'])};
+    background: ${({ $global, theme }) => ($global ? theme.component['tab-global-button-background-color'] : theme.component['tab-section-button-background-color'])};
     border-bottom: 1px solid ${({ theme }) => theme.component['tab-border-bottom-color']};
     border-radius: 0;
     bottom: 0;
@@ -226,7 +235,7 @@ export const Tabs: VoidFunctionComponent<Props> = ({
     }
 
     return (
-        <div className={className}>
+        <TabsWrapper $global={global} className={className}>
             <TabButtonsContainer $global={global}>
                 <ScrollButton
                     className="hidden"
@@ -300,6 +309,6 @@ export const Tabs: VoidFunctionComponent<Props> = ({
                 }
                 return null;
             })}
-        </div>
+        </TabsWrapper>
     );
 };
diff --git a/packages/react/src/themes/tokens/component/tab-tokens.ts b/packages/react/src/themes/tokens/component/tab-tokens.ts
index ae8c4b54d2..de646ba32f 100644
--- a/packages/react/src/themes/tokens/component/tab-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tab-tokens.ts
@@ -2,8 +2,12 @@ import { AliasTokens } from '../alias-tokens';
 import { RefTokens } from '../ref-tokens';
 
 export type TabTokens =
-    | 'tab-button-section-background-color'
-    | 'tab-button-global-background-color'
+    | 'tab-section-border-color'
+    | 'tab-section-box-shadow-color'
+    | 'tab-global-list-background-color'
+    | 'tab-section-list-background-color'
+    | 'tab-section-button-background-color'
+    | 'tab-global-button-background-color'
     | 'tab-button-icon-color'
     | 'tab-button-text-color'
     | 'tab-button-indicator-hover-background-color'
@@ -11,11 +15,11 @@ export type TabTokens =
     | 'tab-button-indicator-active-background-color'
     | 'tab-button-active-text-color'
     | 'tab-button-indicator-selected-background-color'
-    | 'tab-button-selected-background-color'
+    | 'tab-global-button-selected-background-color'
+    | 'tab-section-button-selected-background-color'
     | 'tab-button-selected-text-color'
-    | 'tab-border-bottom-color'
-    | 'tab-panel-border-color'
-    | 'tab-panel-background-color';
+    | 'tab-section-background-color'
+    | 'tab-border-bottom-color';
 
 export type TabTokenValue = AliasTokens | RefTokens;
 
@@ -25,29 +29,37 @@ export type TabTokenMap = {
 
 export const defaultTabTokens: TabTokenMap = {
     /**
-     * tab button
+     * tabs global
+     */
+    'tab-global-button-background-color': 'color-bg',
+    'tab-global-list-background-color': 'transparent-100',
+    'tab-global-button-selected-background-color': 'transparent-100',
+
+    /**
+     * tabs section
      */
-    'tab-button-global-background-color': 'color-bg',
-    'tab-button-section-background-color': 'color-bg-neutral-subtle', // color-bg-isolated? neutral-02 or neutral-05?
-    'tab-button-selected-background-color': 'color-bg',
+    'tab-section-border-color': 'color-border',
+    'tab-section-box-shadow-color': 'color-box-shadow',
+    'tab-section-button-background-color': 'color-bg',
+    'tab-section-button-selected-background-color': 'color-bg',
+    'tab-section-list-background-color': 'color-bg-neutral-subtle',
+    'tab-section-background-color': 'color-bg',
 
+    /**
+     * tab button
+     */
     'tab-button-icon-color': 'color-content-subtle',
     'tab-button-text-color': 'color-content-subtle',
     'tab-button-hover-text-color': 'color-neutral-65',
     'tab-button-active-text-color': 'color-neutral-90',
     'tab-button-selected-text-color': 'color-neutral-90',
 
+    'tab-border-bottom-color': 'color-border',
+
     /**
      * tab button indicator
      */
     'tab-button-indicator-hover-background-color': 'color-bg-hover',
-    'tab-button-indicator-active-background-color': 'color-bg-indicator-active', // not sure about this one
+    'tab-button-indicator-active-background-color': 'color-bg-indicator-active',
     'tab-button-indicator-selected-background-color': 'color-bg-indicator',
-
-    /**
-     * tab panel
-     */
-    'tab-border-bottom-color': 'color-neutral-15',
-    'tab-panel-border-color': 'color-neutral-05', // should be the same as 'tab-border-bottom-color'?
-    'tab-panel-background-color': 'color-bg',
 };

From 093084a8f6029e1e2b2a896e2587e1aeea3b4590 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Mon, 13 May 2024 11:16:28 -0400
Subject: [PATCH 59/70] chore(alias-tokens): update tabs tokens and styling

---
 .../src/components/carousel/carousel.tsx      |  2 +-
 .../progress-tracker/progress-tracker.tsx     |  6 +++---
 .../react/src/components/tabs/tab-button.tsx  |  4 ++++
 packages/react/src/components/tabs/tabs.tsx   |  3 +--
 .../react/src/themes/tokens/alias-tokens.ts   |  6 +++---
 .../tokens/component/carousel-tokens.ts       |  8 ++++----
 .../tokens/component/progress-tokens.ts       | 20 +++++++++----------
 .../themes/tokens/component/spinner-tokens.ts |  2 +-
 .../src/themes/tokens/component/tab-tokens.ts | 14 ++++++-------
 9 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/packages/react/src/components/carousel/carousel.tsx b/packages/react/src/components/carousel/carousel.tsx
index ecc5c077e6..dcbe14c9a7 100644
--- a/packages/react/src/components/carousel/carousel.tsx
+++ b/packages/react/src/components/carousel/carousel.tsx
@@ -59,7 +59,7 @@ interface DotProps {
 }
 
 const Dot = styled.button<DotProps>`
-    background-color: ${({ active, theme }) => (active ? theme.component['carousel-dot-active-background-color'] : theme.component['carousel-dot-inactive-background-color'])};
+    background-color: ${({ active, theme }) => (active ? theme.component['carousel-dot-selected-background-color'] : theme.component['carousel-dot-unselected-background-color'])};
     border: 1px solid  ${({ theme }) => theme.component['carousel-dot-border-color']};
     border-radius: 50%;
     box-sizing: border-box;
diff --git a/packages/react/src/components/progress-tracker/progress-tracker.tsx b/packages/react/src/components/progress-tracker/progress-tracker.tsx
index 91debcc667..f50a4f21ed 100644
--- a/packages/react/src/components/progress-tracker/progress-tracker.tsx
+++ b/packages/react/src/components/progress-tracker/progress-tracker.tsx
@@ -102,9 +102,9 @@ const CompletedStep = styled(StyledStep)`
 
 const ActiveStep = styled(StyledStep)`
     &::before {
-        border-color: ${({ theme }) => theme.component['progress-tracker-step-active-border-color']};
+        border-color: ${({ theme }) => theme.component['progress-tracker-step-current-border-color']};
         border-width: 0.25rem;
-        color: ${({ theme }) => theme.component['progress-tracker-step-active-text-color']};
+        color: ${({ theme }) => theme.component['progress-tracker-step-current-text-color']};
         font-weight: var(--font-semi-bold);
         height: var(--size-2x);
         margin: -0.25rem auto 0;
@@ -118,7 +118,7 @@ const ActiveStep = styled(StyledStep)`
     }
 
     ${Label} {
-        color: ${({ theme }) => theme.component['progress-tracker-step-active-label-text-color']};
+        color: ${({ theme }) => theme.component['progress-tracker-step-current-label-text-color']};
         font-weight: var(--font-semi-bold);
     }
 `;
diff --git a/packages/react/src/components/tabs/tab-button.tsx b/packages/react/src/components/tabs/tab-button.tsx
index 26c04611ba..60ac2cb5f7 100644
--- a/packages/react/src/components/tabs/tab-button.tsx
+++ b/packages/react/src/components/tabs/tab-button.tsx
@@ -20,6 +20,10 @@ const StyledButton = styled.button<{ $global?: boolean; $selected?: boolean; $re
     position: relative;
     user-select: none;
 
+    &:hover {
+        color: ${({ theme }) => theme.component['tab-button-hover-text-color']};
+    }
+
     &::after {
         content: '';
         display: block;
diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx
index b1fe4da788..cb97d0e69a 100644
--- a/packages/react/src/components/tabs/tabs.tsx
+++ b/packages/react/src/components/tabs/tabs.tsx
@@ -59,9 +59,8 @@ const TabButtonsList = styled.div<{ $global?: boolean; }>`
     white-space: nowrap;
 `;
 
-const ScrollButton = styled(Button) <{ $global?: boolean; $position: 'left' | 'right' }>`
+const ScrollButton = styled(Button) <{ $global?: boolean; $position: 'left' | 'right'; }>`
     align-items: center;
-    background: ${({ $global, theme }) => ($global ? theme.component['tab-global-button-background-color'] : theme.component['tab-section-button-background-color'])};
     border-bottom: 1px solid ${({ theme }) => theme.component['tab-border-bottom-color']};
     border-radius: 0;
     bottom: 0;
diff --git a/packages/react/src/themes/tokens/alias-tokens.ts b/packages/react/src/themes/tokens/alias-tokens.ts
index b954e7695f..940d4ed8a6 100644
--- a/packages/react/src/themes/tokens/alias-tokens.ts
+++ b/packages/react/src/themes/tokens/alias-tokens.ts
@@ -85,7 +85,7 @@ export type AliasTokens =
     | 'color-bg-brand-subtle'
     | 'color-bg-brand'
     | 'color-bg-brand-bold'
-    | 'color-bg-indicator'
+    | 'color-bg-indicator-selected'
     | 'color-bg-indicator-active'
     | 'color-border-brand'
     | 'color-content-brand'
@@ -282,8 +282,8 @@ export const defaultAliasTokens: AliasTokenMap = {
     'color-bg-brand-subtle': 'color-brand-20',
     'color-bg-brand': 'color-brand-50',
     'color-bg-brand-bold': 'color-brand-80',
-    'color-bg-indicator': 'color-brand-50',
-    'color-bg-indicator-active': 'color-brand-70',
+    'color-bg-indicator-selected': 'color-brand-50',
+    'color-bg-indicator-active': 'color-brand-80',
     'color-border-brand': 'color-brand-70',
     'color-content-brand': 'color-brand-50',
 
diff --git a/packages/react/src/themes/tokens/component/carousel-tokens.ts b/packages/react/src/themes/tokens/component/carousel-tokens.ts
index 3a41f98b35..8268e64205 100644
--- a/packages/react/src/themes/tokens/component/carousel-tokens.ts
+++ b/packages/react/src/themes/tokens/component/carousel-tokens.ts
@@ -2,8 +2,8 @@ import { AliasTokens } from '../alias-tokens';
 import { RefTokens } from '../ref-tokens';
 
 export type CarouselTokens =
-    | 'carousel-dot-active-background-color'
-    | 'carousel-dot-inactive-background-color'
+    | 'carousel-dot-selected-background-color'
+    | 'carousel-dot-unselected-background-color'
     | 'carousel-dot-border-color'
     | 'carousel-nav-button-border-color'
     | 'carousel-arrow-icon-color';
@@ -15,8 +15,8 @@ export type CarouselTokenMap = {
 };
 
 export const defaultCarouselTokens: CarouselTokenMap = {
-    'carousel-dot-active-background-color': 'color-bg-indicator',
-    'carousel-dot-inactive-background-color': 'color-bg-empty',
+    'carousel-dot-selected-background-color': 'color-bg-indicator-selected',
+    'carousel-dot-unselected-background-color': 'color-bg-empty',
     'carousel-arrow-icon-color': 'color-content-subtle',
     'carousel-dot-border-color': 'transparent-100',
     'carousel-nav-button-border-color': 'transparent-100',
diff --git a/packages/react/src/themes/tokens/component/progress-tokens.ts b/packages/react/src/themes/tokens/component/progress-tokens.ts
index bc89c080aa..d01a8ba2d4 100644
--- a/packages/react/src/themes/tokens/component/progress-tokens.ts
+++ b/packages/react/src/themes/tokens/component/progress-tokens.ts
@@ -11,9 +11,9 @@ export type ProgressTokens =
     | 'progress-tracker-step-uncompleted-border-color'
     | 'progress-tracker-step-uncompleted-text-color'
     | 'progress-tracker-step-uncompleted-label-text-color'
-    | 'progress-tracker-step-active-border-color'
-    | 'progress-tracker-step-active-text-color'
-    | 'progress-tracker-step-active-label-text-color'
+    | 'progress-tracker-step-current-border-color'
+    | 'progress-tracker-step-current-text-color'
+    | 'progress-tracker-step-current-label-text-color'
     | 'progress-tracker-step-completed-background-color'
     | 'progress-tracker-step-completed-border-color'
     | 'progress-tracker-step-completed-text-color'
@@ -42,7 +42,7 @@ export const defaultProgressTokens: ProgressTokenMap = {
     'progress-tracker-notification-badge-fill-color': 'color-feedback-bg-alert-bold',
 
     'progress-tracker-bridge-empty-background-color': 'color-bg-empty',
-    'progress-tracker-bridge-filled-background-color': 'color-bg-indicator',
+    'progress-tracker-bridge-filled-background-color': 'color-bg-brand',
     // TO-DO
     'progress-tracker-step-todo-text-color': 'color-content',
     'progress-tracker-step-todo-background-color': 'color-bg',
@@ -50,13 +50,13 @@ export const defaultProgressTokens: ProgressTokenMap = {
     'progress-tracker-step-uncompleted-border-color': 'color-border-empty',
     'progress-tracker-step-uncompleted-text-color': 'color-content',
     'progress-tracker-step-uncompleted-label-text-color': 'color-content-subtle',
-    // Active
-    'progress-tracker-step-active-border-color': 'color-bg-indicator',
-    'progress-tracker-step-active-text-color': 'color-content-selected',
-    'progress-tracker-step-active-label-text-color': 'color-content-selected',
+    // Current
+    'progress-tracker-step-current-border-color': 'color-bg-brand',
+    'progress-tracker-step-current-text-color': 'color-content-selected',
+    'progress-tracker-step-current-label-text-color': 'color-content-selected',
     // Completed
-    'progress-tracker-step-completed-background-color': 'color-bg-indicator',
-    'progress-tracker-step-completed-border-color': 'color-bg-indicator',
+    'progress-tracker-step-completed-background-color': 'color-bg-brand',
+    'progress-tracker-step-completed-border-color': 'color-bg-brand',
     'progress-tracker-step-completed-text-color': 'color-content-inverse',
     'progress-tracker-step-completed-label-text-color': 'color-content-brand',
 };
diff --git a/packages/react/src/themes/tokens/component/spinner-tokens.ts b/packages/react/src/themes/tokens/component/spinner-tokens.ts
index 96b11b65cd..465dbf924e 100644
--- a/packages/react/src/themes/tokens/component/spinner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/spinner-tokens.ts
@@ -11,5 +11,5 @@ export type SpinnerTokenMap = {
 };
 
 export const defaultSpinnerTokens: SpinnerTokenMap = {
-    'spinner-fill-color': 'color-bg-indicator',
+    'spinner-fill-color': 'color-bg-brand',
 };
diff --git a/packages/react/src/themes/tokens/component/tab-tokens.ts b/packages/react/src/themes/tokens/component/tab-tokens.ts
index de646ba32f..4e2b50b1a1 100644
--- a/packages/react/src/themes/tokens/component/tab-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tab-tokens.ts
@@ -31,28 +31,28 @@ export const defaultTabTokens: TabTokenMap = {
     /**
      * tabs global
      */
-    'tab-global-button-background-color': 'color-bg',
+    'tab-global-button-background-color': 'transparent-100',
     'tab-global-list-background-color': 'transparent-100',
     'tab-global-button-selected-background-color': 'transparent-100',
 
     /**
      * tabs section
      */
+    'tab-section-background-color': 'color-bg',
     'tab-section-border-color': 'color-border',
     'tab-section-box-shadow-color': 'color-box-shadow',
+    'tab-section-list-background-color': 'color-bg-neutral-subtle',
     'tab-section-button-background-color': 'color-bg',
     'tab-section-button-selected-background-color': 'color-bg',
-    'tab-section-list-background-color': 'color-bg-neutral-subtle',
-    'tab-section-background-color': 'color-bg',
 
     /**
      * tab button
      */
     'tab-button-icon-color': 'color-content-subtle',
     'tab-button-text-color': 'color-content-subtle',
-    'tab-button-hover-text-color': 'color-neutral-65',
-    'tab-button-active-text-color': 'color-neutral-90',
-    'tab-button-selected-text-color': 'color-neutral-90',
+    'tab-button-hover-text-color': 'color-content-hover',
+    'tab-button-active-text-color': 'color-content',
+    'tab-button-selected-text-color': 'color-content',
 
     'tab-border-bottom-color': 'color-border',
 
@@ -61,5 +61,5 @@ export const defaultTabTokens: TabTokenMap = {
      */
     'tab-button-indicator-hover-background-color': 'color-bg-hover',
     'tab-button-indicator-active-background-color': 'color-bg-indicator-active',
-    'tab-button-indicator-selected-background-color': 'color-bg-indicator',
+    'tab-button-indicator-selected-background-color': 'color-bg-indicator-selected',
 };

From 85e51d42f8848d48f5d02c406ec141a7b3e22d02 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Mon, 13 May 2024 11:19:18 -0400
Subject: [PATCH 60/70] chore(alias-tokens): update snapshots

---
 .../src/components/tabs/tabs.test.tsx.snap    | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/tabs/tabs.test.tsx.snap b/packages/react/src/components/tabs/tabs.test.tsx.snap
index e5f2f473f7..f2af372b7d 100644
--- a/packages/react/src/components/tabs/tabs.test.tsx.snap
+++ b/packages/react/src/components/tabs/tabs.test.tsx.snap
@@ -81,6 +81,10 @@ exports[`Tabs matches snapshot (global) 1`] = `
   font-weight: var(--font-semi-bold);
 }
 
+.c7:hover {
+  color: #000000;
+}
+
 .c7::after {
   content: '';
   display: block;
@@ -127,6 +131,10 @@ exports[`Tabs matches snapshot (global) 1`] = `
   user-select: none;
 }
 
+.c10:hover {
+  color: #000000;
+}
+
 .c10::after {
   content: '';
   display: block;
@@ -154,7 +162,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
 }
 
 .c10:active::after {
-  background-color: #003A5A !important;
+  background-color: #012639 !important;
 }
 
 .c5 {
@@ -175,7 +183,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
 
 .c9:hover .c6::after {
   background-color: #DBDEE1;
-  color: #60666E;
+  color: #000000;
 }
 
 .c8::after {
@@ -270,7 +278,6 @@ exports[`Tabs matches snapshot (global) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -296,7 +303,6 @@ exports[`Tabs matches snapshot (global) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -514,6 +520,10 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   font-weight: var(--font-semi-bold);
 }
 
+.c8:hover {
+  color: #000000;
+}
+
 .c8::after {
   content: '';
   display: block;
@@ -560,6 +570,10 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   user-select: none;
 }
 
+.c11:hover {
+  color: #000000;
+}
+
 .c11::after {
   content: '';
   display: block;
@@ -587,7 +601,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
 }
 
 .c11:active::after {
-  background-color: #003A5A !important;
+  background-color: #012639 !important;
 }
 
 .c6 {
@@ -608,7 +622,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
 
 .c10:hover .c7::after {
   background-color: #DBDEE1;
-  color: #60666E;
+  color: #000000;
 }
 
 .c9::after {
@@ -712,7 +726,6 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -739,7 +752,6 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -958,6 +970,10 @@ exports[`Tabs matches snapshot 1`] = `
   font-weight: var(--font-semi-bold);
 }
 
+.c8:hover {
+  color: #000000;
+}
+
 .c8::after {
   content: '';
   display: block;
@@ -1004,6 +1020,10 @@ exports[`Tabs matches snapshot 1`] = `
   user-select: none;
 }
 
+.c11:hover {
+  color: #000000;
+}
+
 .c11::after {
   content: '';
   display: block;
@@ -1031,7 +1051,7 @@ exports[`Tabs matches snapshot 1`] = `
 }
 
 .c11:active::after {
-  background-color: #003A5A !important;
+  background-color: #012639 !important;
 }
 
 .c6 {
@@ -1052,7 +1072,7 @@ exports[`Tabs matches snapshot 1`] = `
 
 .c10:hover .c7::after {
   background-color: #DBDEE1;
-  color: #60666E;
+  color: #000000;
 }
 
 .c9::after {
@@ -1156,7 +1176,6 @@ exports[`Tabs matches snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -1183,7 +1202,6 @@ exports[`Tabs matches snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;

From e36289de97f0a0135451f66433815dc4757a7148 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Wed, 15 May 2024 11:15:11 -0400
Subject: [PATCH 61/70] chore(alias-tokens): update breadcrumbs

---
 .../breadcrumb/breadcrumb.test.tsx.snap       | 362 +++++++++++++++---
 .../src/components/breadcrumb/breadcrumb.tsx  |  97 +++--
 .../src/themes/tokens/component-tokens.ts     |   3 +
 .../tokens/component/breadcrumb-tokens.ts     |  23 ++
 4 files changed, 404 insertions(+), 81 deletions(-)
 create mode 100644 packages/react/src/themes/tokens/component/breadcrumb-tokens.ts

diff --git a/packages/react/src/components/breadcrumb/breadcrumb.test.tsx.snap b/packages/react/src/components/breadcrumb/breadcrumb.test.tsx.snap
index 4ebcfae9cb..0728a407f0 100644
--- a/packages/react/src/components/breadcrumb/breadcrumb.test.tsx.snap
+++ b/packages/react/src/components/breadcrumb/breadcrumb.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
 {
   "asFragment": [Function],
-  "baseElement": .c4 {
+  "baseElement": .c7 {
   box-sizing: border-box;
   position: fixed;
   z-index: 100000;
@@ -63,14 +63,57 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
 }
 
 .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c4 {
+  color: #60666E;
+}
+
+.c4:hover {
+  color: #000000;
+}
+
+.c4[disabled] {
+  color: #B7BBC2;
+}
+
+.c6 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
+.c5 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -79,11 +122,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <body>
     <div>
       <nav
@@ -96,34 +134,52 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
             class="c1"
           >
             <a
-              class="c2 c3"
+              class="c2 c3 c4"
               href="/index"
               tabindex="0"
             >
               HOME
             </a>
+            <svg
+              class="c5"
+              color="currentColor"
+              focusable="false"
+              height="20"
+              width="20"
+            />
           </li>
           <li
             class="c1"
           >
             <a
-              class="c2 c3"
+              class="c2 c3 c4"
               href="/route"
               tabindex="0"
             >
               ROUTE
             </a>
+            <svg
+              class="c5"
+              color="currentColor"
+              focusable="false"
+              height="20"
+              width="20"
+            />
           </li>
           <li
             class="c1"
           >
-            THREE
+            <span
+              class="c6"
+            >
+              THREE
+            </span>
           </li>
         </ol>
       </nav>
     </div>
     <div
-      class="c4"
+      class="c7"
       data-testid="toasts"
     />
   </body>,
@@ -179,14 +235,57 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
 }
 
 .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c4 {
+  color: #60666E;
+}
+
+.c4:hover {
+  color: #000000;
+}
+
+.c4[disabled] {
+  color: #B7BBC2;
+}
+
+.c6 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
+.c5 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -195,11 +294,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <div>
     <nav
       aria-label="breadcrumb"
@@ -211,28 +305,46 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
           class="c1"
         >
           <a
-            class="c2 c3"
+            class="c2 c3 c4"
             href="/index"
             tabindex="0"
           >
             HOME
           </a>
+          <svg
+            class="c5"
+            color="currentColor"
+            focusable="false"
+            height="20"
+            width="20"
+          />
         </li>
         <li
           class="c1"
         >
           <a
-            class="c2 c3"
+            class="c2 c3 c4"
             href="/route"
             tabindex="0"
           >
             ROUTE
           </a>
+          <svg
+            class="c5"
+            color="currentColor"
+            focusable="false"
+            height="20"
+            width="20"
+          />
         </li>
         <li
           class="c1"
         >
-          THREE
+          <span
+            class="c6"
+          >
+            THREE
+          </span>
         </li>
       </ol>
     </nav>
@@ -294,7 +406,7 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
 exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
 {
   "asFragment": [Function],
-  "baseElement": .c4 {
+  "baseElement": .c7 {
   box-sizing: border-box;
   position: fixed;
   z-index: 100000;
@@ -354,14 +466,57 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
 }
 
 .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c4 {
+  color: #60666E;
+}
+
+.c4:hover {
+  color: #000000;
+}
+
+.c4[disabled] {
+  color: #B7BBC2;
+}
+
+.c6 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
+.c5 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -370,11 +525,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <body>
     <div>
       <nav
@@ -387,23 +537,34 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
             class="c1"
           >
             <a
-              class="c2 c3"
+              class="c2 c3 c4"
               href="/index"
               tabindex="0"
             >
               HOME
             </a>
+            <svg
+              class="c5"
+              color="currentColor"
+              focusable="false"
+              height="20"
+              width="20"
+            />
           </li>
           <li
             class="c1"
           >
-            ROUTE
+            <span
+              class="c6"
+            >
+              ROUTE
+            </span>
           </li>
         </ol>
       </nav>
     </div>
     <div
-      class="c4"
+      class="c7"
       data-testid="toasts"
     />
   </body>,
@@ -459,14 +620,57 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
 }
 
 .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c4 {
+  color: #60666E;
+}
+
+.c4:hover {
+  color: #000000;
+}
+
+.c4[disabled] {
+  color: #B7BBC2;
+}
+
+.c6 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
+.c5 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -475,11 +679,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <div>
     <nav
       aria-label="breadcrumb"
@@ -491,17 +690,28 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
           class="c1"
         >
           <a
-            class="c2 c3"
+            class="c2 c3 c4"
             href="/index"
             tabindex="0"
           >
             HOME
           </a>
+          <svg
+            class="c5"
+            color="currentColor"
+            focusable="false"
+            height="20"
+            width="20"
+          />
         </li>
         <li
           class="c1"
         >
-          ROUTE
+          <span
+            class="c6"
+          >
+            ROUTE
+          </span>
         </li>
       </ol>
     </nav>
@@ -563,7 +773,7 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
 exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
 {
   "asFragment": [Function],
-  "baseElement": .c2 {
+  "baseElement": .c3 {
   box-sizing: border-box;
   position: fixed;
   z-index: 100000;
@@ -572,14 +782,37 @@ exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
 }
 
 .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c2 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -588,11 +821,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <body>
     <div>
       <nav
@@ -604,25 +832,52 @@ exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
           <li
             class="c1"
           >
-            HOME
+            <span
+              class="c2"
+            >
+              HOME
+            </span>
           </li>
         </ol>
       </nav>
     </div>
     <div
-      class="c2"
+      class="c3"
       data-testid="toasts"
     />
   </body>,
   "container": .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c2 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -631,11 +886,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <div>
     <nav
       aria-label="breadcrumb"
@@ -646,7 +896,11 @@ exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
         <li
           class="c1"
         >
-          HOME
+          <span
+            class="c2"
+          >
+            HOME
+          </span>
         </li>
       </ol>
     </nav>
diff --git a/packages/react/src/components/breadcrumb/breadcrumb.tsx b/packages/react/src/components/breadcrumb/breadcrumb.tsx
index a223e72c84..307835e805 100644
--- a/packages/react/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/react/src/components/breadcrumb/breadcrumb.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { eventIsInside } from '../../utils/events';
 import { IconButton } from '../buttons/icon-button';
+import { Icon } from '../icon/icon';
 import { NavList } from '../nav-list/nav-list';
 import { NavListOption } from '../nav-list/nav-list-option';
 import { RouteLink } from '../route-link/route-link';
@@ -16,24 +17,54 @@ interface BreadcrumbProps {
 }
 
 const StyledOL = styled.ol`
+    align-items: center;
+    display: inline-flex;
     margin: 0;
     max-width: 100%;
     padding: 0;
     white-space: nowrap;
 `;
 
+const StyledLink = styled(RouteLink)`
+    color: ${({ theme }) => theme.component['breadcrumb-link-color']};
+
+    &:hover {
+        color: ${({ theme }) => theme.component['breadcrumb-link-hover-color']};
+    }
+
+    &[disabled] {
+        color: ${({ theme }) => theme.component['breadcrumb-link-disabled-color']};
+    }
+`;
+
+const StyledActiveLink = styled.span`
+    align-self: center;
+    color: ${({ theme }) => theme.component['breadcrumb-link-active-color']};
+    margin: 0 var(--spacing-1x);
+`;
+
+const StyledSeparatorIcon = styled(Icon)`
+    align-self: center;
+    color: ${({ theme }) => theme.component['breadcrumb-separator-color']};
+    margin: 0 var(--spacing-1x);
+`;
+
 const StyledLi = styled.li`
-    display: inline-block;
+    align-items: center;
+    display: inline-flex;
     position: relative;
 
     & > a {
         text-decoration: underline;
     }
+`;
 
-    &:not(:last-child)::after {
-        content: '/';
-        margin: 0 var(--spacing-1x);
-    }
+const StyledListWrapper = styled.div`
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    white-space: nowrap;
+    z-index: 1;
 `;
 
 const StyledNavList = styled(NavList)`
@@ -110,39 +141,51 @@ export const Breadcrumb: VoidFunctionComponent<BreadcrumbProps> = ({ className,
             <StyledOL>
                 {leftShownRoutes.map((route) => (
                     <StyledLi>
-                        <RouteLink
+                        <StyledLink
                             data-testid={`breadcrumb-link-${route.value}`}
                             href={route.href}
                             routerLink={Link}
                             label={truncateLabel(route.label ?? '')}
+                            disabled={route.disabled}
                         />
+                        <StyledSeparatorIcon name="chevronRight" size="20" />
                     </StyledLi>
                 ))}
                 {showHiddenRoutes && (
                     <StyledLi>
-                        <StyledIconButton
-                            ref={buttonRef}
-                            aria-expanded={isOpen}
-                            type="button"
-                            data-testid="ellipse-button"
-                            buttonType="tertiary"
-                            iconName="moreHorizontal"
-                            label="breadcrumb-list"
-                            onClick={() => setOpen(!isOpen)}
-                        />
-                        <StyledNavList
-                            ordered
-                            data-testid="nav-list"
-                            ref={navListRef}
-                            hidden={!isOpen}
-                            focusedValue={focusedValue}
-                            onChange={() => setOpen(false)}
-                            onKeyDown={handleNavListKeyDown}
-                            options={hiddenRoutes}
-                        />
+                        <StyledListWrapper>
+                            <StyledIconButton
+                                ref={buttonRef}
+                                aria-expanded={isOpen}
+                                type="button"
+                                data-testid="ellipse-button"
+                                buttonType="tertiary"
+                                iconName="moreHorizontal"
+                                label="breadcrumb-list"
+                                onClick={() => setOpen(!isOpen)}
+                            />
+                            <StyledNavList
+                                ordered
+                                data-testid="nav-list"
+                                ref={navListRef}
+                                hidden={!isOpen}
+                                focusedValue={focusedValue}
+                                onChange={() => setOpen(false)}
+                                onKeyDown={handleNavListKeyDown}
+                                options={hiddenRoutes}
+                            />
+                        </StyledListWrapper>
+                        <StyledSeparatorIcon name="chevronRight" size="20" />
+                    </StyledLi>
+                )}
+                {showLastRoute
+                    && (
+                    <StyledLi>
+                        <StyledActiveLink>
+                            {truncateLabel(lastRoute.label ?? '')}
+                        </StyledActiveLink>
                     </StyledLi>
                 )}
-                {showLastRoute && <StyledLi>{truncateLabel(lastRoute.label ?? '')}</StyledLi>}
             </StyledOL>
         </nav>
     );
diff --git a/packages/react/src/themes/tokens/component-tokens.ts b/packages/react/src/themes/tokens/component-tokens.ts
index 9da0cbc727..f479c503c6 100644
--- a/packages/react/src/themes/tokens/component-tokens.ts
+++ b/packages/react/src/themes/tokens/component-tokens.ts
@@ -1,6 +1,7 @@
 import { AliasTokens } from './alias-tokens';
 import { AvatarTokens, defaultAvatarTokens } from './component/avatar-tokens';
 import { BentoMenuButtonTokens, defaultBentoMenuButtonTokens } from './component/bento-menu-button-tokens';
+import { BreadcrumbTokens, defaultBreadcrumbTokens } from './component/breadcrumb-tokens';
 import { ButtonTokens, defaultButtonTokens } from './component/button-tokens';
 import { CheckboxTokens, defaultCheckboxTokens } from './component/checkbox-tokens';
 import { ChooserTokens, defaultChooserTokens } from './component/chooser-tokens';
@@ -55,6 +56,7 @@ export type ComponentTokens =
     | AvatarTokens
     | BentoMenuButtonTokens
     | ButtonTokens
+    | BreadcrumbTokens
     | FocusTokens
     | HeadingTokens
     | LabelTokens
@@ -160,6 +162,7 @@ export const defaultComponentTokens: ComponentTokenMap = {
     ...defaultDropdownMenuTokens,
     ...defaultLozengeTokens,
     ...defaultGlobalNavigationTokens,
+    ...defaultBreadcrumbTokens,
 };
 
 export type ResolvedComponentTokenValue = RefTokenValue;
diff --git a/packages/react/src/themes/tokens/component/breadcrumb-tokens.ts b/packages/react/src/themes/tokens/component/breadcrumb-tokens.ts
new file mode 100644
index 0000000000..c0e82e92ff
--- /dev/null
+++ b/packages/react/src/themes/tokens/component/breadcrumb-tokens.ts
@@ -0,0 +1,23 @@
+import { AliasTokens } from '../alias-tokens';
+import { RefTokens } from '../ref-tokens';
+
+export type BreadcrumbTokens =
+    | 'breadcrumb-link-color'
+    | 'breadcrumb-link-hover-color'
+    | 'breadcrumb-link-active-color'
+    | 'breadcrumb-link-disabled-color'
+    | 'breadcrumb-separator-color';
+
+export type BreadcrumbTokensValue = AliasTokens | RefTokens;
+
+export type BreadcrumbTokensMap = {
+    [Token in BreadcrumbTokens]: BreadcrumbTokensValue;
+};
+
+export const defaultBreadcrumbTokens : BreadcrumbTokensMap = {
+    'breadcrumb-link-active-color': 'color-content',
+    'breadcrumb-link-color': 'color-content-subtle',
+    'breadcrumb-link-disabled-color': 'color-content-disabled',
+    'breadcrumb-link-hover-color': 'color-content-hover',
+    'breadcrumb-separator-color': 'color-content-subtle',
+};

From dae84e11483923eb2df73d41494d954ed1aefb16 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Fri, 17 May 2024 11:15:46 -0400
Subject: [PATCH 62/70] chore(alias-tokens): post review changes

---
 .../src/components/breadcrumb/breadcrumb.tsx  |  3 +-
 .../list-items/external-item.tsx              |  6 ++--
 .../src/components/tabs/tabs.test.tsx.snap    | 30 +++++++++++++++++++
 packages/react/src/components/tabs/tabs.tsx   |  5 ++++
 .../tokens/component/dropdown-menu-tokens.ts  |  4 ---
 .../src/themes/tokens/component/tab-tokens.ts |  5 ++++
 6 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/breadcrumb/breadcrumb.tsx b/packages/react/src/components/breadcrumb/breadcrumb.tsx
index 307835e805..cd699372c3 100644
--- a/packages/react/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/react/src/components/breadcrumb/breadcrumb.tsx
@@ -178,8 +178,7 @@ export const Breadcrumb: VoidFunctionComponent<BreadcrumbProps> = ({ className,
                         <StyledSeparatorIcon name="chevronRight" size="20" />
                     </StyledLi>
                 )}
-                {showLastRoute
-                    && (
+                {showLastRoute && (
                     <StyledLi>
                         <StyledActiveLink>
                             {truncateLabel(lastRoute.label ?? '')}
diff --git a/packages/react/src/components/dropdown-menu/list-items/external-item.tsx b/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
index f2f84a3666..f0c0923ec7 100644
--- a/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
+++ b/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
@@ -34,17 +34,17 @@ export const StyledExternalLink = styled(ExternalLink)<ExternalItemsStyledProps>
 
     &:visited {
         color: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-text-color']};
-        fill: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-fill-color']};
+        fill: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-icon-color']};
 
         svg {
             color: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-icon-color']};
-            fill: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-fill-color']};
+            fill: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-icon-color']};
         }
     }
 
     &[disabled] {
         color: ${({ theme }) => theme.component['dropdown-menu-external-item-disabled-text-color']};
-        fill: ${({ theme }) => theme.component['dropdown-menu-external-item-disabled-fill-color']};
+        fill: ${({ theme }) => theme.component['dropdown-menu-external-item-disabled-text-color']};
         pointer-events: none;
     }
 `;
diff --git a/packages/react/src/components/tabs/tabs.test.tsx.snap b/packages/react/src/components/tabs/tabs.test.tsx.snap
index f2af372b7d..1bfae86432 100644
--- a/packages/react/src/components/tabs/tabs.test.tsx.snap
+++ b/packages/react/src/components/tabs/tabs.test.tsx.snap
@@ -278,6 +278,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -294,6 +295,10 @@ exports[`Tabs matches snapshot (global) 1`] = `
   padding: 0 var(--spacing-1x) 0 var(--spacing-2x);
 }
 
+.c3:hover {
+  background: #DBDEE1;
+}
+
 .c3.hidden {
   display: none;
 }
@@ -303,6 +308,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -319,6 +325,10 @@ exports[`Tabs matches snapshot (global) 1`] = `
   right: 0;
 }
 
+.c11:hover {
+  background: #DBDEE1;
+}
+
 .c11.hidden {
   display: none;
 }
@@ -726,6 +736,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -743,6 +754,10 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   border-radius: var(--border-radius-2x) 0 0 0;
 }
 
+.c4:hover {
+  background: #DBDEE1;
+}
+
 .c4.hidden {
   display: none;
 }
@@ -752,6 +767,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -769,6 +785,10 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   border-radius: 0 var(--border-radius-2x) 0 0;
 }
 
+.c12:hover {
+  background: #DBDEE1;
+}
+
 .c12.hidden {
   display: none;
 }
@@ -1176,6 +1196,7 @@ exports[`Tabs matches snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -1193,6 +1214,10 @@ exports[`Tabs matches snapshot 1`] = `
   border-radius: var(--border-radius-2x) 0 0 0;
 }
 
+.c4:hover {
+  background: #DBDEE1;
+}
+
 .c4.hidden {
   display: none;
 }
@@ -1202,6 +1227,7 @@ exports[`Tabs matches snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background: #FFFFFF;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -1219,6 +1245,10 @@ exports[`Tabs matches snapshot 1`] = `
   border-radius: 0 var(--border-radius-2x) 0 0;
 }
 
+.c12:hover {
+  background: #DBDEE1;
+}
+
 .c12.hidden {
   display: none;
 }
diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx
index cb97d0e69a..2687d1a154 100644
--- a/packages/react/src/components/tabs/tabs.tsx
+++ b/packages/react/src/components/tabs/tabs.tsx
@@ -61,6 +61,7 @@ const TabButtonsList = styled.div<{ $global?: boolean; }>`
 
 const ScrollButton = styled(Button) <{ $global?: boolean; $position: 'left' | 'right'; }>`
     align-items: center;
+    background: ${({ theme }) => theme.component['tab-scroll-button-background-color']};
     border-bottom: 1px solid ${({ theme }) => theme.component['tab-border-bottom-color']};
     border-radius: 0;
     bottom: 0;
@@ -70,6 +71,10 @@ const ScrollButton = styled(Button) <{ $global?: boolean; $position: 'left' | 'r
     position: absolute;
     z-index: 1;
 
+    &:hover {
+        background: ${({ theme }) => theme.component['tab-scroll-button-hover-background-color']};
+    }
+
     ${({ $position, $global }) => $position === 'left' && css`
         box-shadow: 3px 0px 3px -2px rgba(0, 0, 0, 0.1);
         left: 0;
diff --git a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
index 5df5e0b681..2891f9e3eb 100644
--- a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
+++ b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
@@ -16,10 +16,8 @@ export type DropdownMenuTokens =
     | 'dropdown-menu-external-item-text-color'
     | 'dropdown-menu-external-item-hover-background-color'
     | 'dropdown-menu-external-item-visited-text-color'
-    | 'dropdown-menu-external-item-visited-fill-color'
     | 'dropdown-menu-external-item-visited-icon-color'
     | 'dropdown-menu-external-item-disabled-text-color'
-    | 'dropdown-menu-external-item-disabled-fill-color'
     | 'dropdown-menu-group-border-color'
     | 'dropdown-menu-item-content-icon-background-color'
     | 'dropdown-menu-item-content-icon-border-color'
@@ -55,11 +53,9 @@ export const defaultDropdownMenuTokens: DropdownMenuTokenMap = {
     'dropdown-menu-nav-item-disabled-text-color': 'color-menu-item-content-disabled',
     'dropdown-menu-nav-item-disabled-icon-color': 'color-menu-item-content-disabled',
     'dropdown-menu-external-item-disabled-text-color': 'color-menu-item-content-disabled',
-    'dropdown-menu-external-item-disabled-fill-color': 'color-menu-item-content-disabled',
 
     'dropdown-menu-external-item-visited-icon-color': 'color-link-content-visited',
     'dropdown-menu-external-item-visited-text-color': 'color-link-content-visited',
-    'dropdown-menu-external-item-visited-fill-color': 'color-link-content-visited',
 
     'dropdown-menu-box-shadow-color': 'color-box-shadow',
 };
diff --git a/packages/react/src/themes/tokens/component/tab-tokens.ts b/packages/react/src/themes/tokens/component/tab-tokens.ts
index 4e2b50b1a1..34f5be1391 100644
--- a/packages/react/src/themes/tokens/component/tab-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tab-tokens.ts
@@ -19,6 +19,8 @@ export type TabTokens =
     | 'tab-section-button-selected-background-color'
     | 'tab-button-selected-text-color'
     | 'tab-section-background-color'
+    | 'tab-scroll-button-background-color'
+    | 'tab-scroll-button-hover-background-color'
     | 'tab-border-bottom-color';
 
 export type TabTokenValue = AliasTokens | RefTokens;
@@ -54,6 +56,9 @@ export const defaultTabTokens: TabTokenMap = {
     'tab-button-active-text-color': 'color-content',
     'tab-button-selected-text-color': 'color-content',
 
+    'tab-scroll-button-background-color': 'color-bg',
+    'tab-scroll-button-hover-background-color': 'color-neutral-15',
+
     'tab-border-bottom-color': 'color-border',
 
     /**

From be51b2f40bd497ffe0f9df05b50e9b7d98e48794 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Fri, 24 May 2024 10:01:33 -0400
Subject: [PATCH 63/70] chore(alias-tokens): update snapshots

---
 packages/react/src/components/carousel/carousel.test.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/carousel/carousel.test.tsx.snap b/packages/react/src/components/carousel/carousel.test.tsx.snap
index 0c7c8893df..6bc71b1d63 100644
--- a/packages/react/src/components/carousel/carousel.test.tsx.snap
+++ b/packages/react/src/components/carousel/carousel.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`Carousel should match snapshot 1`] = `
 .c2[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c2:disabled {

From df8910c4d2417ed5439aa8092e993ff85592d6ad Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Mon, 27 May 2024 15:41:31 -0400
Subject: [PATCH 64/70] chore(alias-tokens): post review changes

---
 packages/react/src/components/tabs/tabs.test.tsx.snap  | 10 +++++-----
 packages/react/src/components/tabs/tabs.tsx            |  2 +-
 .../react/src/themes/tokens/component/tab-tokens.ts    |  4 +---
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/tabs/tabs.test.tsx.snap b/packages/react/src/components/tabs/tabs.test.tsx.snap
index 1bfae86432..ff4f28144d 100644
--- a/packages/react/src/components/tabs/tabs.test.tsx.snap
+++ b/packages/react/src/components/tabs/tabs.test.tsx.snap
@@ -240,7 +240,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
 }
 
 .c0 {
-  background: transparent;
+  background: #FFFFFF;
   box-sizing: content-box;
   height: var(--size-2halfx);
   padding-top: var(--spacing-2x);
@@ -736,7 +736,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #FFFFFF;
+  background: #F1F2F2;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -767,7 +767,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #FFFFFF;
+  background: #F1F2F2;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -1196,7 +1196,7 @@ exports[`Tabs matches snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #FFFFFF;
+  background: #F1F2F2;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
@@ -1227,7 +1227,7 @@ exports[`Tabs matches snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #FFFFFF;
+  background: #F1F2F2;
   border-bottom: 1px solid #DBDEE1;
   border-radius: 0;
   bottom: 0;
diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx
index 2687d1a154..1e8108e5e9 100644
--- a/packages/react/src/components/tabs/tabs.tsx
+++ b/packages/react/src/components/tabs/tabs.tsx
@@ -61,7 +61,7 @@ const TabButtonsList = styled.div<{ $global?: boolean; }>`
 
 const ScrollButton = styled(Button) <{ $global?: boolean; $position: 'left' | 'right'; }>`
     align-items: center;
-    background: ${({ theme }) => theme.component['tab-scroll-button-background-color']};
+    background: ${({ theme, $global }) => theme.component[`tab-${$global ? 'global' : 'section'}-list-background-color`]};
     border-bottom: 1px solid ${({ theme }) => theme.component['tab-border-bottom-color']};
     border-radius: 0;
     bottom: 0;
diff --git a/packages/react/src/themes/tokens/component/tab-tokens.ts b/packages/react/src/themes/tokens/component/tab-tokens.ts
index 34f5be1391..7dc2863a9e 100644
--- a/packages/react/src/themes/tokens/component/tab-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tab-tokens.ts
@@ -19,7 +19,6 @@ export type TabTokens =
     | 'tab-section-button-selected-background-color'
     | 'tab-button-selected-text-color'
     | 'tab-section-background-color'
-    | 'tab-scroll-button-background-color'
     | 'tab-scroll-button-hover-background-color'
     | 'tab-border-bottom-color';
 
@@ -34,7 +33,7 @@ export const defaultTabTokens: TabTokenMap = {
      * tabs global
      */
     'tab-global-button-background-color': 'transparent-100',
-    'tab-global-list-background-color': 'transparent-100',
+    'tab-global-list-background-color': 'color-bg',
     'tab-global-button-selected-background-color': 'transparent-100',
 
     /**
@@ -56,7 +55,6 @@ export const defaultTabTokens: TabTokenMap = {
     'tab-button-active-text-color': 'color-content',
     'tab-button-selected-text-color': 'color-content',
 
-    'tab-scroll-button-background-color': 'color-bg',
     'tab-scroll-button-hover-background-color': 'color-neutral-15',
 
     'tab-border-bottom-color': 'color-border',

From 89de3cac6d278975797bc42ff15a74ecfe3986ad Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Mon, 27 May 2024 15:48:33 -0400
Subject: [PATCH 65/70] chore(alias-tokens): post review changes

---
 .../react/src/themes/tokens/alias-tokens.ts   | 172 +++++++++---------
 .../tokens/component/accordion-tokens.ts      |   8 +-
 .../themes/tokens/component/avatar-tokens.ts  |   2 +-
 .../themes/tokens/component/badge-tokens.ts   |   2 +-
 .../themes/tokens/component/button-tokens.ts  |   6 +-
 .../themes/tokens/component/card-tokens.ts    |   4 +-
 .../tokens/component/carousel-tokens.ts       |   4 +-
 .../tokens/component/checkbox-tokens.ts       |   8 +-
 .../themes/tokens/component/chooser-tokens.ts |   8 +-
 .../tokens/component/combobox-tokens.ts       |   4 +-
 .../tokens/component/datepicker-tokens.ts     |   8 +-
 .../tokens/component/dropdown-list-tokens.ts  |   4 +-
 .../tokens/component/dropdown-menu-tokens.ts  |  10 +-
 .../tokens/component/global-banner-tokens.ts  |   8 +-
 .../tokens/component/global-header-tokens.ts  |   2 +-
 .../component/global-navigation-tokens.ts     |   6 +-
 .../themes/tokens/component/legend-tokens.ts  |   2 +-
 .../themes/tokens/component/link-tokens.ts    |   2 +-
 .../themes/tokens/component/listbox-tokens.ts |   6 +-
 .../themes/tokens/component/lozenge-tokens.ts |  48 ++---
 .../themes/tokens/component/menu-tokens.ts    |   6 +-
 .../themes/tokens/component/modal-tokens.ts   |   4 +-
 .../tokens/component/nav-list-tokens.ts       |   4 +-
 .../tokens/component/numeric-input-tokens.ts  |   4 +-
 .../tokens/component/pagination-tokens.ts     |   6 +-
 .../tokens/component/password-input-tokens.ts |   2 +-
 .../tokens/component/progress-tokens.ts       |  18 +-
 .../component/radio-button-group-tokens.ts    |   6 +-
 .../tokens/component/radio-card-tokens.ts     |   8 +-
 .../component/sectional-banner-tokens.ts      |  12 +-
 .../component/segmented-control-tokens.ts     |   8 +-
 .../tokens/component/side-drawer-tokens.ts    |   2 +-
 .../themes/tokens/component/spinner-tokens.ts |   2 +-
 .../themes/tokens/component/status-tokens.ts  |   6 +-
 .../themes/tokens/component/stepper-tokens.ts |   6 +-
 .../src/themes/tokens/component/tab-tokens.ts |  16 +-
 .../themes/tokens/component/table-tokens.ts   |  12 +-
 .../src/themes/tokens/component/tag-tokens.ts |   6 +-
 .../tokens/component/text-input-tokens.ts     |   4 +-
 .../themes/tokens/component/toast-tokens.ts   |  10 +-
 .../tokens/component/toggle-switch-tokens.ts  |  18 +-
 .../tokens/component/toggletip-tokens.ts      |   2 +-
 .../themes/tokens/component/tooltip-tokens.ts |   4 +-
 43 files changed, 240 insertions(+), 240 deletions(-)

diff --git a/packages/react/src/themes/tokens/alias-tokens.ts b/packages/react/src/themes/tokens/alias-tokens.ts
index 940d4ed8a6..3e15411f95 100644
--- a/packages/react/src/themes/tokens/alias-tokens.ts
+++ b/packages/react/src/themes/tokens/alias-tokens.ts
@@ -17,26 +17,26 @@ export type AliasTokens =
     /**
      * FEEDBACK
      */
-    | 'color-bg-neutral-subtlest'
-    | 'color-bg-neutral-subtle'
-    | 'color-bg-neutral-bold'
-    | 'color-bg-neutral-bold-disabled'
-    | 'color-feedback-bg-success-subtle'
-    | 'color-feedback-bg-warning-subtle'
-    | 'color-feedback-bg-alert-subtle'
-    | 'color-feedback-bg-discovery-subtle'
-    | 'color-feedback-bg-informative-subtle'
-    | 'color-feedback-bg-success-subtlest'
-    | 'color-feedback-bg-warning-subtlest'
-    | 'color-feedback-bg-alert-subtlest'
-    | 'color-feedback-bg-discovery-subtlest'
-    | 'color-feedback-bg-informative-subtlest'
-    | 'color-feedback-bg-success-bold'
-    | 'color-feedback-bg-success-bold-disabled'
-    | 'color-feedback-bg-alert-bold'
-    | 'color-feedback-bg-warning-bold'
-    | 'color-feedback-bg-discovery-bold'
-    | 'color-feedback-bg-informative-bold'
+    | 'color-background-neutral-subtlest'
+    | 'color-background-neutral-subtle'
+    | 'color-background-neutral-bold'
+    | 'color-background-neutral-bold-disabled'
+    | 'color-feedback-background-success-subtle'
+    | 'color-feedback-background-warning-subtle'
+    | 'color-feedback-background-alert-subtle'
+    | 'color-feedback-background-discovery-subtle'
+    | 'color-feedback-background-informative-subtle'
+    | 'color-feedback-background-success-subtlest'
+    | 'color-feedback-background-warning-subtlest'
+    | 'color-feedback-background-alert-subtlest'
+    | 'color-feedback-background-discovery-subtlest'
+    | 'color-feedback-background-informative-subtlest'
+    | 'color-feedback-background-success-bold'
+    | 'color-feedback-background-success-bold-disabled'
+    | 'color-feedback-background-alert-bold'
+    | 'color-feedback-background-warning-bold'
+    | 'color-feedback-background-discovery-bold'
+    | 'color-feedback-background-informative-bold'
     | 'color-feedback-border-success'
     | 'color-feedback-border-warning'
     | 'color-feedback-border-alert'
@@ -50,11 +50,11 @@ export type AliasTokens =
     /**
      * INPUT
      */
-    | 'color-input-bg'
-    | 'color-input-bg-hover'
-    | 'color-input-bg-disabled'
-    | 'color-input-bg-checked'
-    | 'color-input-bg-selected'
+    | 'color-input-background'
+    | 'color-input-background-hover'
+    | 'color-input-background-disabled'
+    | 'color-input-background-checked'
+    | 'color-input-background-selected'
     | 'color-input-border'
     | 'color-input-border-hover'
     | 'color-input-border-disabled'
@@ -71,10 +71,10 @@ export type AliasTokens =
     /**
      * MENU
      */
-    | 'color-menu-bg'
+    | 'color-menu-background'
     | 'color-menu-border'
-    | 'color-menu-item-bg'
-    | 'color-menu-item-bg-hover'
+    | 'color-menu-item-background'
+    | 'color-menu-item-background-hover'
     | 'color-menu-item-content'
     | 'color-menu-item-subcontent'
     | 'color-menu-item-content-hover'
@@ -82,25 +82,25 @@ export type AliasTokens =
     /**
      * BRAND
      */
-    | 'color-bg-brand-subtle'
-    | 'color-bg-brand'
-    | 'color-bg-brand-bold'
-    | 'color-bg-indicator-selected'
-    | 'color-bg-indicator-active'
+    | 'color-background-brand-subtle'
+    | 'color-background-brand'
+    | 'color-background-brand-bold'
+    | 'color-background-indicator-selected'
+    | 'color-background-indicator-active'
     | 'color-border-brand'
     | 'color-content-brand'
     /**
      * BACKGROUND
      */
-    | 'color-bg'
-    | 'color-bg-overlay'
-    | 'color-bg-isolated'
-    | 'color-bg-disabled'
-    | 'color-bg-empty'
-    | 'color-bg-hover'
-    | 'color-bg-selected'
-    | 'color-bg-selected-hover'
-    | 'color-backdrop-bg'
+    | 'color-background'
+    | 'color-background-overlay'
+    | 'color-background-isolated'
+    | 'color-background-disabled'
+    | 'color-background-empty'
+    | 'color-background-hover'
+    | 'color-background-selected'
+    | 'color-background-selected-hover'
+    | 'color-backdrop-background'
     /**
      * BORDER
      */
@@ -174,56 +174,56 @@ export const defaultAliasTokens: AliasTokenMap = {
     /**
      * NEUTRAL
      *  Use for default background of neutral UI elements,
-     *  sometimes on a subtle background. Could also be named color-bg-inverse.
+     *  sometimes on a subtle background. Could also be named color-background-inverse.
      */
-    'color-bg-neutral-subtlest': 'color-neutral-02',
-    'color-bg-neutral-subtle': 'color-neutral-05',
-    'color-bg-neutral-bold': 'color-neutral-65',
-    'color-bg-neutral-bold-disabled': 'color-neutral-30',
+    'color-background-neutral-subtlest': 'color-neutral-02',
+    'color-background-neutral-subtle': 'color-neutral-05',
+    'color-background-neutral-bold': 'color-neutral-65',
+    'color-background-neutral-bold-disabled': 'color-neutral-30',
     /**
      * SUCCESS
      *  Use for UI elements communicating a favorable outcome and success messaging.
      */
-    'color-feedback-bg-success-subtlest': 'color-success-02',
-    'color-feedback-bg-success-subtle': 'color-success-05',
-    'color-feedback-bg-success-bold': 'color-success-50',
-    'color-feedback-bg-success-bold-disabled': 'color-success-20',
+    'color-feedback-background-success-subtlest': 'color-success-02',
+    'color-feedback-background-success-subtle': 'color-success-05',
+    'color-feedback-background-success-bold': 'color-success-50',
+    'color-feedback-background-success-bold-disabled': 'color-success-20',
     'color-feedback-border-success': 'color-success-50',
     'color-feedback-content-success': 'color-success-70',
     /**
      * ALERT
      *  Use for UI elements communicating critical information and error messaging.
      */
-    'color-feedback-bg-alert-subtlest': 'color-alert-02',
-    'color-feedback-bg-alert-subtle': 'color-alert-05',
-    'color-feedback-bg-alert-bold': 'color-alert-50',
+    'color-feedback-background-alert-subtlest': 'color-alert-02',
+    'color-feedback-background-alert-subtle': 'color-alert-05',
+    'color-feedback-background-alert-bold': 'color-alert-50',
     'color-feedback-border-alert': 'color-alert-50',
     'color-feedback-content-alert': 'color-alert-70',
     /**
      * WARNING
      *  Use for UI elements communicating caution.
      */
-    'color-feedback-bg-warning-subtlest': 'color-warning-02',
-    'color-feedback-bg-warning-subtle': 'color-warning-05',
-    'color-feedback-bg-warning-bold': 'color-warning-50',
+    'color-feedback-background-warning-subtlest': 'color-warning-02',
+    'color-feedback-background-warning-subtle': 'color-warning-05',
+    'color-feedback-background-warning-bold': 'color-warning-50',
     'color-feedback-border-warning': 'color-warning-50',
     'color-feedback-content-warning': 'color-warning-80',
     /**
      * DISCOVERY
      *  Use for UI elements communicating change, something new or onboarding spotlights.
      */
-    'color-feedback-bg-discovery-subtlest': 'color-discovery-02',
-    'color-feedback-bg-discovery-subtle': 'color-discovery-05',
-    'color-feedback-bg-discovery-bold': 'color-discovery-50',
+    'color-feedback-background-discovery-subtlest': 'color-discovery-02',
+    'color-feedback-background-discovery-subtle': 'color-discovery-05',
+    'color-feedback-background-discovery-bold': 'color-discovery-50',
     'color-feedback-border-discovery': 'color-discovery-50',
     'color-feedback-content-discovery': 'color-discovery-70',
     /**
      * INFORMATIVE
      *  Use for UI elements communicating information or something in-progress.
      */
-    'color-feedback-bg-informative-subtlest': 'color-informative-02',
-    'color-feedback-bg-informative-subtle': 'color-informative-05',
-    'color-feedback-bg-informative-bold': 'color-informative-50',
+    'color-feedback-background-informative-subtlest': 'color-informative-02',
+    'color-feedback-background-informative-subtle': 'color-informative-05',
+    'color-feedback-background-informative-bold': 'color-informative-50',
     'color-feedback-border-informative': 'color-informative-50',
     'color-feedback-content-informative': 'color-informative-70',
 
@@ -231,11 +231,11 @@ export const defaultAliasTokens: AliasTokenMap = {
      * INPUT
      *  Use for form UI elements, such as inputs, checkboxes, radio buttons, etc.
      */
-    'color-input-bg': 'color-white',
-    'color-input-bg-hover': 'color-neutral-15',
-    'color-input-bg-disabled': 'color-neutral-05',
-    'color-input-bg-checked': 'color-brand-50',
-    'color-input-bg-selected': 'color-brand-05',
+    'color-input-background': 'color-white',
+    'color-input-background-hover': 'color-neutral-15',
+    'color-input-background-disabled': 'color-neutral-05',
+    'color-input-background-checked': 'color-brand-50',
+    'color-input-background-selected': 'color-brand-05',
 
     'color-input-border': 'color-neutral-65',
     'color-input-border-hover': 'color-black',
@@ -256,10 +256,10 @@ export const defaultAliasTokens: AliasTokenMap = {
      * MENU
      * Used for menus, dropdown menus, listbox, navigation list and their items.
      */
-    'color-menu-bg': 'color-bg-overlay',
+    'color-menu-background': 'color-background-overlay',
     'color-menu-border': 'color-border-overlay',
-    'color-menu-item-bg': 'transparent-100',
-    'color-menu-item-bg-hover': 'color-bg-hover', // should use transparency instead
+    'color-menu-item-background': 'transparent-100',
+    'color-menu-item-background-hover': 'color-background-hover', // should use transparency instead
     'color-menu-item-content': 'color-content',
     'color-menu-item-subcontent': 'color-content-subtle',
     'color-menu-item-content-hover': 'color-content-hover',
@@ -279,11 +279,11 @@ export const defaultAliasTokens: AliasTokenMap = {
      * content (text & icons)
      *  used for progress trackers
      */
-    'color-bg-brand-subtle': 'color-brand-20',
-    'color-bg-brand': 'color-brand-50',
-    'color-bg-brand-bold': 'color-brand-80',
-    'color-bg-indicator-selected': 'color-brand-50',
-    'color-bg-indicator-active': 'color-brand-80',
+    'color-background-brand-subtle': 'color-brand-20',
+    'color-background-brand': 'color-brand-50',
+    'color-background-brand-bold': 'color-brand-80',
+    'color-background-indicator-selected': 'color-brand-50',
+    'color-background-indicator-active': 'color-brand-80',
     'color-border-brand': 'color-brand-70',
     'color-content-brand': 'color-brand-50',
 
@@ -294,50 +294,50 @@ export const defaultAliasTokens: AliasTokenMap = {
     /**
      * Use as the primary surface base background of the UI.
      */
-    'color-bg': 'color-white',
+    'color-background': 'color-white',
     /**
      * Use for the elevation surface background of elements that sit on top of other UI elements,
      * such as modals, menus, datepicker calendar, global navigation, toggletips, etc.
      */
-    'color-bg-overlay': 'color-white',
+    'color-background-overlay': 'color-white',
     /**
      * A secondary elevation surface background for the UI commonly used for
      * grouped or isolated items, such as sections, accordion panels, table even rows, etc.
      */
-    'color-bg-isolated': 'color-neutral-02',
+    'color-background-isolated': 'color-neutral-02',
 
     /**
      * Use for the background of elements that appear to have no background in a resting state,
      * such as subtle buttons and menu items.
      */
-    // 'color-bg-subtle': 'transparent-100',
+    // 'color-background-subtle': 'transparent-100',
 
     /**
      * Use for backgrounds of elements in a hovered state,
      * such as navigation elements like accordion headers, card links, table cells, clickable tags, etc.
      */
-    'color-bg-hover': 'color-neutral-15',
+    'color-background-hover': 'color-neutral-15',
     /**
      * Use for backgrounds of elements in a disabled state,
      * such as menu items, navigation elements like accordion, etc.
      */
-    'color-bg-disabled': 'color-neutral-05',
+    'color-background-disabled': 'color-neutral-05',
     /**
      * Use for backgrounds of elements in an empty state,
      * such as carousel dots, progress elements, etc.
      */
-    'color-bg-empty': 'color-neutral-15',
+    'color-background-empty': 'color-neutral-15',
     /**
      * Use for the background of elements in a selected state,
      * such as naviaation elements like pagination pages or items like table rows.
      */
-    'color-bg-selected': 'color-brand-05',
-    'color-bg-selected-hover': 'color-brand-10', // should use transparency instead
+    'color-background-selected': 'color-brand-05',
+    'color-background-selected-hover': 'color-brand-10', // should use transparency instead
 
     /**
      * Use for the screen overlay that appears with modal dialogs
      */
-    'color-backdrop-bg': 'transparent-dark-75',
+    'color-backdrop-background': 'transparent-dark-75',
 
     /**
      * BORDER
diff --git a/packages/react/src/themes/tokens/component/accordion-tokens.ts b/packages/react/src/themes/tokens/component/accordion-tokens.ts
index ae2fb51b6d..6b47e8d7f1 100644
--- a/packages/react/src/themes/tokens/component/accordion-tokens.ts
+++ b/packages/react/src/themes/tokens/component/accordion-tokens.ts
@@ -23,16 +23,16 @@ export type AccordionTokenMap = {
 };
 
 export const defaultAccordionTokens: AccordionTokenMap = {
-    'accordion-panel-background-color': 'color-bg-isolated',
+    'accordion-panel-background-color': 'color-background-isolated',
     'accordion-panel-border-color': 'color-border',
     'accordion-panel-text-color': 'color-content',
-    'accordion-header-background-color': 'color-bg',
+    'accordion-header-background-color': 'color-background',
     'accordion-header-border-color': 'color-border',
     'accordion-header-text-color': 'color-content',
-    'accordion-header-hover-background-color': 'color-bg-hover',
+    'accordion-header-hover-background-color': 'color-background-hover',
     'accordion-header-hover-border-color': 'color-border-hover',
     'accordion-header-hover-text-color': 'color-content-hover',
-    'accordion-header-disabled-background-color': 'color-bg-disabled',
+    'accordion-header-disabled-background-color': 'color-background-disabled',
     'accordion-header-disabled-border-color': 'color-border-disabled',
     'accordion-header-disabled-text-color': 'color-content-disabled',
     'accordion-header-disabled-icon-color': 'color-content-disabled',
diff --git a/packages/react/src/themes/tokens/component/avatar-tokens.ts b/packages/react/src/themes/tokens/component/avatar-tokens.ts
index 681730a3f9..df7565a867 100644
--- a/packages/react/src/themes/tokens/component/avatar-tokens.ts
+++ b/packages/react/src/themes/tokens/component/avatar-tokens.ts
@@ -12,6 +12,6 @@ export type AvatarTokenMap = {
 };
 
 export const defaultAvatarTokens: AvatarTokenMap = {
-    'avatar-background-color': 'color-bg-neutral-subtle',
+    'avatar-background-color': 'color-background-neutral-subtle',
     'avatar-text-color': 'color-content-subtle',
 };
diff --git a/packages/react/src/themes/tokens/component/badge-tokens.ts b/packages/react/src/themes/tokens/component/badge-tokens.ts
index 33ff9ff6df..a6676b77c4 100644
--- a/packages/react/src/themes/tokens/component/badge-tokens.ts
+++ b/packages/react/src/themes/tokens/component/badge-tokens.ts
@@ -12,6 +12,6 @@ export type BadgeTokenMap = {
 };
 
 export const defaultBadgeTokens: BadgeTokenMap = {
-    'badge-background-color': 'color-feedback-bg-alert-bold',
+    'badge-background-color': 'color-feedback-background-alert-bold',
     'badge-text-color': 'color-content-inverse',
 };
diff --git a/packages/react/src/themes/tokens/component/button-tokens.ts b/packages/react/src/themes/tokens/component/button-tokens.ts
index 8768bf4e6c..207ce6c6ba 100644
--- a/packages/react/src/themes/tokens/component/button-tokens.ts
+++ b/packages/react/src/themes/tokens/component/button-tokens.ts
@@ -284,15 +284,15 @@ export const defaultButtonTokens: ButtonTokenMap = {
     'button-destructive-tertiary-inverted-disabled-text-color': 'color-action-destructive-disabled',
 
     // Input button
-    'button-input-background-color': 'color-input-bg',
+    'button-input-background-color': 'color-input-background',
     'button-input-border-color': 'color-input-border',
     'button-input-text-color': 'color-input-content',
     // Input button hover
-    'button-input-hover-background-color': 'color-input-bg-hover',
+    'button-input-hover-background-color': 'color-input-background-hover',
     'button-input-hover-border-color': 'color-input-border-hover',
     'button-input-hover-text-color': 'color-input-content-hover',
     // Input button disabled
-    'button-input-disabled-background-color': 'color-input-bg-disabled',
+    'button-input-disabled-background-color': 'color-input-background-disabled',
     'button-input-disabled-border-color': 'color-input-border-disabled',
     'button-input-disabled-text-color': 'color-input-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/card-tokens.ts b/packages/react/src/themes/tokens/component/card-tokens.ts
index d82a5f8180..c4f7a51309 100644
--- a/packages/react/src/themes/tokens/component/card-tokens.ts
+++ b/packages/react/src/themes/tokens/component/card-tokens.ts
@@ -17,11 +17,11 @@ export type CardTokensMap = {
 };
 
 export const defaultCardTokens : CardTokensMap = {
-    'card-background-color': 'color-bg',
+    'card-background-color': 'color-background',
     'card-border-color': 'color-border-subtle',
     'card-text-color': 'color-content',
     'card-link-border-color': 'color-border-bold',
     'card-link-hover-border-color': 'color-border-hover',
-    'card-link-hover-background-color': 'color-bg-hover',
+    'card-link-hover-background-color': 'color-background-hover',
     'card-box-shadow-color': 'color-box-shadow',
 };
diff --git a/packages/react/src/themes/tokens/component/carousel-tokens.ts b/packages/react/src/themes/tokens/component/carousel-tokens.ts
index 1b9d8567e0..0608950f1b 100644
--- a/packages/react/src/themes/tokens/component/carousel-tokens.ts
+++ b/packages/react/src/themes/tokens/component/carousel-tokens.ts
@@ -13,7 +13,7 @@ export type CarouselTokenMap = {
 };
 
 export const defaultCarouselTokens: CarouselTokenMap = {
-    'carousel-dot-selected-background-color': 'color-bg-indicator-selected',
-    'carousel-dot-unselected-background-color': 'color-bg-empty',
+    'carousel-dot-selected-background-color': 'color-background-indicator-selected',
+    'carousel-dot-unselected-background-color': 'color-background-empty',
     'carousel-dot-border-color': 'transparent-100',
 };
diff --git a/packages/react/src/themes/tokens/component/checkbox-tokens.ts b/packages/react/src/themes/tokens/component/checkbox-tokens.ts
index 00c4bff0b7..911e0d9754 100644
--- a/packages/react/src/themes/tokens/component/checkbox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/checkbox-tokens.ts
@@ -20,14 +20,14 @@ export type CheckboxTokenMap = {
 };
 
 export const defaultCheckboxTokens: CheckboxTokenMap = {
-    'checkbox-unchecked-background-color': 'color-input-bg',
+    'checkbox-unchecked-background-color': 'color-input-background',
     'checkbox-unchecked-border-color': 'color-input-border',
     'checkbox-checked-icon-color': 'color-input-content-checked',
-    'checkbox-checked-background-color': 'color-input-bg-checked',
+    'checkbox-checked-background-color': 'color-input-background-checked',
     'checkbox-checked-border-color': 'color-input-border-checked',
-    'checkbox-disabled-background-color': 'color-input-bg-disabled',
+    'checkbox-disabled-background-color': 'color-input-background-disabled',
     'checkbox-disabled-border-color': 'color-input-border-disabled',
     'checkbox-hover-border-color': 'color-input-border-hover',
-    'checkbox-hover-background-color': 'color-input-bg-hover',
+    'checkbox-hover-background-color': 'color-input-background-hover',
     'checkbox-error-border-color': 'color-input-border-error',
 };
diff --git a/packages/react/src/themes/tokens/component/chooser-tokens.ts b/packages/react/src/themes/tokens/component/chooser-tokens.ts
index 4743958041..2089491ab9 100644
--- a/packages/react/src/themes/tokens/component/chooser-tokens.ts
+++ b/packages/react/src/themes/tokens/component/chooser-tokens.ts
@@ -22,16 +22,16 @@ export type ChooserTokenMap = {
 };
 
 export const defaultChooserTokens: ChooserTokenMap = {
-    'chooser-background-color': 'color-input-bg',
+    'chooser-background-color': 'color-input-background',
     'chooser-border-color': 'color-input-border',
     'chooser-text-color': 'color-input-content',
-    'chooser-selected-background-color': 'color-input-bg-selected',
+    'chooser-selected-background-color': 'color-input-background-selected',
     'chooser-selected-border-color': 'color-input-border-selected',
     'chooser-selected-text-color': 'color-input-content-selected',
-    'chooser-hover-background-color': 'color-input-bg-hover',
+    'chooser-hover-background-color': 'color-input-background-hover',
     'chooser-hover-border-color': 'color-input-border-hover',
     'chooser-hover-text-color': 'color-input-content-hover',
-    'chooser-disabled-background-color': 'color-input-bg-disabled',
+    'chooser-disabled-background-color': 'color-input-background-disabled',
     'chooser-disabled-border-color': 'color-input-border-disabled',
     'chooser-disabled-text-color': 'color-input-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/combobox-tokens.ts b/packages/react/src/themes/tokens/component/combobox-tokens.ts
index 5a56dd2d11..10084ed76b 100644
--- a/packages/react/src/themes/tokens/component/combobox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/combobox-tokens.ts
@@ -32,10 +32,10 @@ export const defaultComboboxTokens: ComboboxTokenMap = {
     'combobox-arrow-button-disabled-icon-color': 'color-input-content-disabled',
     'combobox-arrow-button-icon-color': 'color-input-content',
     'combobox-border-color': 'color-input-border',
-    'combobox-disabled-background-color': 'color-input-bg-disabled',
+    'combobox-disabled-background-color': 'color-input-background-disabled',
     'combobox-disabled-border-color': 'color-input-border-disabled',
     'combobox-disabled-text-color': 'color-input-content-disabled',
     'combobox-error-border-color': 'color-input-border-error',
-    'combobox-background-color': 'color-input-bg',
+    'combobox-background-color': 'color-input-background',
     'combobox-placeholder-text-color': 'color-input-content',
 };
diff --git a/packages/react/src/themes/tokens/component/datepicker-tokens.ts b/packages/react/src/themes/tokens/component/datepicker-tokens.ts
index 51fcd755b0..fba2fb40a1 100644
--- a/packages/react/src/themes/tokens/component/datepicker-tokens.ts
+++ b/packages/react/src/themes/tokens/component/datepicker-tokens.ts
@@ -27,7 +27,7 @@ export type DatepickerTokenMap = {
 };
 
 export const defaultDatepickerTokens: DatepickerTokenMap = {
-    'datepicker-background-color': 'color-bg-overlay',
+    'datepicker-background-color': 'color-background-overlay',
     'datepicker-border-color': 'color-border-overlay',
     'datepicker-box-shadow-color': 'color-box-shadow',
 
@@ -37,14 +37,14 @@ export const defaultDatepickerTokens: DatepickerTokenMap = {
     'datepicker-day-border-color': 'transparent-100',
     'datepicker-day-text-color': 'color-content',
 
-    'datepicker-day-hover-background-color': 'color-bg-hover',
+    'datepicker-day-hover-background-color': 'color-background-hover',
     'datepicker-day-disabled-text-color': 'color-content-disabled',
 
     'datepicker-day-outside-month-text-color': 'color-content-subtle',
-    'datepicker-day-selected-outside-month-background-color': 'color-bg-selected',
+    'datepicker-day-selected-outside-month-background-color': 'color-background-selected',
     'datepicker-day-selected-outside-month-border-color': 'color-border-selected',
     'datepicker-day-selected-outside-month-text-color': 'color-content-selected',
-    'datepicker-day-selected-background-color': 'color-bg-selected',
+    'datepicker-day-selected-background-color': 'color-background-selected',
     'datepicker-day-selected-border-color': 'color-border-selected',
     'datepicker-day-selected-text-color': 'color-content-selected',
 
diff --git a/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
index bdc2dc0297..b90d3af77f 100644
--- a/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
+++ b/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
@@ -18,11 +18,11 @@ export type DropdownListTokenMap = {
 };
 
 export const defaultDropdownListTokens: DropdownListTokenMap = {
-    'dropdown-list-input-background-color': 'color-input-bg',
+    'dropdown-list-input-background-color': 'color-input-background',
     'dropdown-list-input-border-color': 'color-input-border',
     'dropdown-list-input-error-border-color': 'color-input-border-error',
     'dropdown-list-arrow-color': 'color-input-content',
-    'dropdown-list-input-disabled-background-color': 'color-input-bg-disabled',
+    'dropdown-list-input-disabled-background-color': 'color-input-background-disabled',
     'dropdown-list-input-disabled-border-color': 'color-input-border-disabled',
     'dropdown-list-arrow-disabled-color': 'color-input-content-disabled',
     'dropdown-list-input-disabled-text-color': 'color-input-content-disabled',
diff --git a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
index 2891f9e3eb..5098351ff0 100644
--- a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
+++ b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
@@ -31,16 +31,16 @@ export type DropdownMenuTokenMap = {
 };
 
 export const defaultDropdownMenuTokens: DropdownMenuTokenMap = {
-    'dropdown-menu-background-color': 'color-menu-bg',
+    'dropdown-menu-background-color': 'color-menu-background',
     'dropdown-menu-border-color': 'color-menu-border',
     'dropdown-menu-text-color': 'color-menu-item-content',
 
-    'dropdown-menu-item-content-icon-background-color': 'color-bg-neutral-subtle',
+    'dropdown-menu-item-content-icon-background-color': 'color-background-neutral-subtle',
     'dropdown-menu-item-content-icon-border-color': 'color-border',
     'dropdown-menu-group-border-color': 'color-border',
 
-    'dropdown-menu-nav-item-hover-background-color': 'color-menu-item-bg-hover',
-    'dropdown-menu-external-item-hover-background-color': 'color-menu-item-bg-hover',
+    'dropdown-menu-nav-item-hover-background-color': 'color-menu-item-background-hover',
+    'dropdown-menu-external-item-hover-background-color': 'color-menu-item-background-hover',
 
     'dropdown-menu-list-item-text-color': 'color-menu-item-content',
     'dropdown-menu-nav-item-text-color': 'color-menu-item-content',
@@ -49,7 +49,7 @@ export const defaultDropdownMenuTokens: DropdownMenuTokenMap = {
     'dropdown-menu-external-item-text-color': 'color-menu-item-content',
     'dropdown-menu-item-content-description-text-color': 'color-menu-item-subcontent',
 
-    'dropdown-menu-nav-item-disabled-background-color': 'color-menu-item-bg',
+    'dropdown-menu-nav-item-disabled-background-color': 'color-menu-item-background',
     'dropdown-menu-nav-item-disabled-text-color': 'color-menu-item-content-disabled',
     'dropdown-menu-nav-item-disabled-icon-color': 'color-menu-item-content-disabled',
     'dropdown-menu-external-item-disabled-text-color': 'color-menu-item-content-disabled',
diff --git a/packages/react/src/themes/tokens/component/global-banner-tokens.ts b/packages/react/src/themes/tokens/component/global-banner-tokens.ts
index cbcf84578f..a22b070809 100644
--- a/packages/react/src/themes/tokens/component/global-banner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/global-banner-tokens.ts
@@ -37,7 +37,7 @@ export const defaultGlobalBannerTokens: GlobalBannerTokenMap = {
     /**
      * neutral
      */
-    'global-banner-neutral-background-color': 'color-bg-neutral-bold',
+    'global-banner-neutral-background-color': 'color-background-neutral-bold',
     'global-banner-neutral-text-color': 'color-content-inverse',
     'global-banner-neutral-action-button-text-color': 'color-content-inverse',
     'global-banner-neutral-action-button-border-color': 'color-border-inverse',
@@ -47,7 +47,7 @@ export const defaultGlobalBannerTokens: GlobalBannerTokenMap = {
     /**
      * discovery
      */
-    'global-banner-discovery-background-color': 'color-feedback-bg-discovery-bold',
+    'global-banner-discovery-background-color': 'color-feedback-background-discovery-bold',
     'global-banner-discovery-text-color': 'color-content-inverse',
     'global-banner-discovery-action-button-text-color': 'color-content-inverse',
     'global-banner-discovery-action-button-border-color': 'color-border-inverse',
@@ -57,7 +57,7 @@ export const defaultGlobalBannerTokens: GlobalBannerTokenMap = {
     /**
      * warning
      */
-    'global-banner-warning-background-color': 'color-feedback-bg-warning-bold',
+    'global-banner-warning-background-color': 'color-feedback-background-warning-bold',
     'global-banner-warning-text-color': 'color-content',
     'global-banner-warning-action-button-text-color': 'color-content',
     'global-banner-warning-action-button-border-color': 'color-content',
@@ -67,7 +67,7 @@ export const defaultGlobalBannerTokens: GlobalBannerTokenMap = {
     /**
      * alert
      */
-    'global-banner-alert-background-color': 'color-feedback-bg-alert-bold',
+    'global-banner-alert-background-color': 'color-feedback-background-alert-bold',
     'global-banner-alert-text-color': 'color-content-inverse',
     'global-banner-alert-action-button-text-color': 'color-content-inverse',
     'global-banner-alert-action-button-border-color': 'color-border-inverse',
diff --git a/packages/react/src/themes/tokens/component/global-header-tokens.ts b/packages/react/src/themes/tokens/component/global-header-tokens.ts
index f34616001e..e004817e60 100644
--- a/packages/react/src/themes/tokens/component/global-header-tokens.ts
+++ b/packages/react/src/themes/tokens/component/global-header-tokens.ts
@@ -14,7 +14,7 @@ export type GlobalHeaderTokensMap = {
 };
 
 export const defaultGlobalHeaderTokens : GlobalHeaderTokensMap = {
-    'global-header-background-color': 'color-bg-brand-bold',
+    'global-header-background-color': 'color-background-brand-bold',
     'global-header-logo-title-separator-color': 'color-border-brand',
     'global-header-logo-content-text-color': 'color-content-inverse',
     'global-header-content-text-color': 'color-content-inverse',
diff --git a/packages/react/src/themes/tokens/component/global-navigation-tokens.ts b/packages/react/src/themes/tokens/component/global-navigation-tokens.ts
index 13a820c947..9ddd78cef2 100644
--- a/packages/react/src/themes/tokens/component/global-navigation-tokens.ts
+++ b/packages/react/src/themes/tokens/component/global-navigation-tokens.ts
@@ -18,12 +18,12 @@ export type GlobalNavigationTokenMap = {
 };
 
 export const defaultGlobalNavigationTokens: GlobalNavigationTokenMap = {
-    'global-navigation-background-color': 'color-bg-overlay',
+    'global-navigation-background-color': 'color-background-overlay',
     'global-navigation-box-shadow-color': 'color-box-shadow',
-    'global-navigation-item-hover-background-color': 'color-bg-hover',
+    'global-navigation-item-hover-background-color': 'color-background-hover',
     'global-navigation-item-hover-text-color': 'color-content-hover',
     'global-navigation-item-text-color': 'color-content-subtle',
-    'global-navigation-item-selected-background-color': 'color-bg-selected',
+    'global-navigation-item-selected-background-color': 'color-background-selected',
     'global-navigation-item-selected-text-color': 'color-content-selected',
     'global-navigation-separator-border-color': 'color-border',
 };
diff --git a/packages/react/src/themes/tokens/component/legend-tokens.ts b/packages/react/src/themes/tokens/component/legend-tokens.ts
index 6cdd28a675..6d8f37aa77 100644
--- a/packages/react/src/themes/tokens/component/legend-tokens.ts
+++ b/packages/react/src/themes/tokens/component/legend-tokens.ts
@@ -12,6 +12,6 @@ export type LegendTokenMap = {
 };
 
 export const defaultLegendTokens: LegendTokenMap = {
-    'legend-item-bullet-color': 'color-bg-brand-subtle',
+    'legend-item-bullet-color': 'color-background-brand-subtle',
     'legend-item-description-text-color': 'color-content-subtle',
 };
diff --git a/packages/react/src/themes/tokens/component/link-tokens.ts b/packages/react/src/themes/tokens/component/link-tokens.ts
index ef85871e81..5d56d2d6c2 100644
--- a/packages/react/src/themes/tokens/component/link-tokens.ts
+++ b/packages/react/src/themes/tokens/component/link-tokens.ts
@@ -25,5 +25,5 @@ export const defaultLinkTokens: LinkTokenMap = {
     'route-link-hover-text-color': 'color-link-content-hover',
 
     'skip-link-text-color': 'color-link-content',
-    'skip-link-background-color': 'color-bg',
+    'skip-link-background-color': 'color-background',
 };
diff --git a/packages/react/src/themes/tokens/component/listbox-tokens.ts b/packages/react/src/themes/tokens/component/listbox-tokens.ts
index 66914fed50..916ebff6df 100644
--- a/packages/react/src/themes/tokens/component/listbox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/listbox-tokens.ts
@@ -19,14 +19,14 @@ export type ListboxTokenMap = {
 };
 
 export const defaultListboxTokens: ListboxTokenMap = {
-    'listbox-background-color': 'color-menu-bg',
+    'listbox-background-color': 'color-menu-background',
     'listbox-border-color': 'color-menu-border',
 
     'listbox-item-text-color': 'color-menu-item-content',
     'listbox-item-caption-text-color': 'color-menu-item-subcontent',
-    'listbox-item-hover-background-color': 'color-menu-item-bg-hover',
+    'listbox-item-hover-background-color': 'color-menu-item-background-hover',
 
-    'listbox-item-disabled-background-color': 'color-menu-item-bg',
+    'listbox-item-disabled-background-color': 'color-menu-item-background',
     'listbox-item-disabled-text-color': 'color-menu-item-content-disabled',
     'listbox-item-caption-disabled-text-color': 'color-menu-item-content-disabled',
 
diff --git a/packages/react/src/themes/tokens/component/lozenge-tokens.ts b/packages/react/src/themes/tokens/component/lozenge-tokens.ts
index 24ec535cc9..84fe1981c6 100644
--- a/packages/react/src/themes/tokens/component/lozenge-tokens.ts
+++ b/packages/react/src/themes/tokens/component/lozenge-tokens.ts
@@ -49,78 +49,78 @@ export const defaultLozengeTokens: LozengeTokensMap = {
     /**
      * neutral
      */
-    'lozenge-neutral-background-color': 'color-bg-neutral-bold',
-    'lozenge-neutral-border-color': 'color-bg-neutral-bold',
+    'lozenge-neutral-background-color': 'color-background-neutral-bold',
+    'lozenge-neutral-border-color': 'color-background-neutral-bold',
     'lozenge-neutral-text-color': 'color-content-inverse',
     /**
      * neutral subtle
      */
-    'lozenge-neutral-subtle-background-color': 'color-bg-neutral-subtle',
-    'lozenge-neutral-subtle-border-color': 'color-bg-neutral-subtle',
+    'lozenge-neutral-subtle-background-color': 'color-background-neutral-subtle',
+    'lozenge-neutral-subtle-border-color': 'color-background-neutral-subtle',
     'lozenge-neutral-subtle-text-color': 'color-content-subtle',
 
     /**
      * info
      */
-    'lozenge-info-background-color': 'color-feedback-bg-informative-bold',
-    'lozenge-info-border-color': 'color-feedback-bg-informative-bold',
+    'lozenge-info-background-color': 'color-feedback-background-informative-bold',
+    'lozenge-info-border-color': 'color-feedback-background-informative-bold',
     'lozenge-info-text-color': 'color-content-inverse',
     /**
      * info subtle
      */
-    'lozenge-info-subtle-background-color': 'color-feedback-bg-informative-subtle',
-    'lozenge-info-subtle-border-color': 'color-feedback-bg-informative-subtle',
+    'lozenge-info-subtle-background-color': 'color-feedback-background-informative-subtle',
+    'lozenge-info-subtle-border-color': 'color-feedback-background-informative-subtle',
     'lozenge-info-subtle-text-color': 'color-feedback-content-informative',
 
     /**
      * success
      */
-    'lozenge-success-background-color': 'color-feedback-bg-success-bold',
-    'lozenge-success-border-color': 'color-feedback-bg-success-bold',
+    'lozenge-success-background-color': 'color-feedback-background-success-bold',
+    'lozenge-success-border-color': 'color-feedback-background-success-bold',
     'lozenge-success-text-color': 'color-content-inverse',
     /**
      * success subtle
      */
-    'lozenge-success-subtle-background-color': 'color-feedback-bg-success-subtle',
-    'lozenge-success-subtle-border-color': 'color-feedback-bg-success-subtle',
+    'lozenge-success-subtle-background-color': 'color-feedback-background-success-subtle',
+    'lozenge-success-subtle-border-color': 'color-feedback-background-success-subtle',
     'lozenge-success-subtle-text-color': 'color-feedback-content-success',
 
     /**
      * discovery
      */
-    'lozenge-discovery-background-color': 'color-feedback-bg-discovery-bold',
-    'lozenge-discovery-border-color': 'color-feedback-bg-discovery-bold',
+    'lozenge-discovery-background-color': 'color-feedback-background-discovery-bold',
+    'lozenge-discovery-border-color': 'color-feedback-background-discovery-bold',
     'lozenge-discovery-text-color': 'color-content-inverse',
     /**
      * discovery subtle
      */
-    'lozenge-discovery-subtle-background-color': 'color-feedback-bg-discovery-subtle',
-    'lozenge-discovery-subtle-border-color': 'color-feedback-bg-discovery-subtle',
+    'lozenge-discovery-subtle-background-color': 'color-feedback-background-discovery-subtle',
+    'lozenge-discovery-subtle-border-color': 'color-feedback-background-discovery-subtle',
     'lozenge-discovery-subtle-text-color': 'color-feedback-content-discovery',
 
     /**
      * alert
      */
-    'lozenge-alert-background-color': 'color-feedback-bg-alert-bold',
-    'lozenge-alert-border-color': 'color-feedback-bg-alert-bold',
+    'lozenge-alert-background-color': 'color-feedback-background-alert-bold',
+    'lozenge-alert-border-color': 'color-feedback-background-alert-bold',
     'lozenge-alert-text-color': 'color-content-inverse',
     /**
      * alert subtle
      */
-    'lozenge-alert-subtle-background-color': 'color-feedback-bg-alert-subtle',
-    'lozenge-alert-subtle-border-color': 'color-feedback-bg-alert-subtle',
+    'lozenge-alert-subtle-background-color': 'color-feedback-background-alert-subtle',
+    'lozenge-alert-subtle-border-color': 'color-feedback-background-alert-subtle',
     'lozenge-alert-subtle-text-color': 'color-feedback-content-alert',
 
     /**
      * warning
      */
-    'lozenge-warning-background-color': 'color-feedback-bg-warning-bold',
-    'lozenge-warning-border-color': 'color-feedback-bg-warning-bold',
+    'lozenge-warning-background-color': 'color-feedback-background-warning-bold',
+    'lozenge-warning-border-color': 'color-feedback-background-warning-bold',
     'lozenge-warning-text-color': 'color-content',
     /**
      * warning subtle
      */
-    'lozenge-warning-subtle-background-color': 'color-feedback-bg-warning-subtle',
-    'lozenge-warning-subtle-border-color': 'color-feedback-bg-warning-subtle',
+    'lozenge-warning-subtle-background-color': 'color-feedback-background-warning-subtle',
+    'lozenge-warning-subtle-border-color': 'color-feedback-background-warning-subtle',
     'lozenge-warning-subtle-text-color': 'color-feedback-content-warning',
 };
diff --git a/packages/react/src/themes/tokens/component/menu-tokens.ts b/packages/react/src/themes/tokens/component/menu-tokens.ts
index 5a9d11f8e6..4d05083a3c 100644
--- a/packages/react/src/themes/tokens/component/menu-tokens.ts
+++ b/packages/react/src/themes/tokens/component/menu-tokens.ts
@@ -23,9 +23,9 @@ export type MenuTokenMap = {
 };
 
 export const defaultMenuTokens: MenuTokenMap = {
-    'menu-background-color': 'color-menu-bg',
+    'menu-background-color': 'color-menu-background',
     'menu-border-color': 'color-menu-border',
-    'menu-submenu-background-color': 'color-menu-bg',
+    'menu-submenu-background-color': 'color-menu-background',
     'menu-submenu-border-color': 'color-menu-border',
 
     'menu-group-text-color': 'color-menu-item-subcontent',
@@ -35,7 +35,7 @@ export const defaultMenuTokens: MenuTokenMap = {
     'menu-item-icon-color': 'color-menu-item-content',
     'menu-item-hover-icon-color': 'color-menu-item-content-hover',
     'menu-item-disabled-text-color': 'color-menu-item-content-disabled',
-    'menu-item-hover-background-color': 'color-menu-item-bg-hover',
+    'menu-item-hover-background-color': 'color-menu-item-background-hover',
 
     'menu-submenu-box-shadow-color': 'color-box-shadow',
     'menu-box-shadow-color': 'color-box-shadow',
diff --git a/packages/react/src/themes/tokens/component/modal-tokens.ts b/packages/react/src/themes/tokens/component/modal-tokens.ts
index 70a59fc770..29965542f4 100644
--- a/packages/react/src/themes/tokens/component/modal-tokens.ts
+++ b/packages/react/src/themes/tokens/component/modal-tokens.ts
@@ -13,7 +13,7 @@ export type ModalTokenMap = {
 };
 
 export const defaultModalTokens: ModalTokenMap = {
-    'modal-background-color': 'color-bg-overlay',
+    'modal-background-color': 'color-background-overlay',
     'modal-border-color': 'color-border-overlay',
-    'modal-backdrop-background-color': 'color-backdrop-bg',
+    'modal-backdrop-background-color': 'color-backdrop-background',
 };
diff --git a/packages/react/src/themes/tokens/component/nav-list-tokens.ts b/packages/react/src/themes/tokens/component/nav-list-tokens.ts
index 16944b7560..48b4b89417 100644
--- a/packages/react/src/themes/tokens/component/nav-list-tokens.ts
+++ b/packages/react/src/themes/tokens/component/nav-list-tokens.ts
@@ -19,13 +19,13 @@ export type NavListTokenMap = {
 };
 
 export const defaultNavListTokens: NavListTokenMap = {
-    'nav-list-background-color': 'color-menu-bg',
+    'nav-list-background-color': 'color-menu-background',
     'nav-list-border-color': 'color-menu-border',
 
     'nav-list-item-icon-color': 'color-menu-item-content',
     'nav-list-item-text-color': 'color-menu-item-content',
 
-    'nav-list-item-hover-background-color': 'color-menu-item-bg-hover',
+    'nav-list-item-hover-background-color': 'color-menu-item-background-hover',
     'nav-list-item-text-hover-color': 'color-menu-item-content-hover',
     'nav-list-item-icon-hover-color': 'color-menu-item-content-hover',
 
diff --git a/packages/react/src/themes/tokens/component/numeric-input-tokens.ts b/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
index 03f155d741..4a3594d9c2 100644
--- a/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
@@ -16,11 +16,11 @@ export type NumericInputTokenMap = {
 };
 
 export const defaultNumericInputTokens: NumericInputTokenMap = {
-    'numeric-input-background-color': 'color-input-bg',
+    'numeric-input-background-color': 'color-input-background',
     'numeric-input-border-color': 'color-input-border',
     'numeric-input-error-border-color': 'color-input-border-error',
 
     'numeric-input-disabled-adornment-text-color': 'color-input-content-disabled',
-    'numeric-input-disabled-background-color': 'color-input-bg-disabled',
+    'numeric-input-disabled-background-color': 'color-input-background-disabled',
     'numeric-input-disabled-border-color': 'color-input-border-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/pagination-tokens.ts b/packages/react/src/themes/tokens/component/pagination-tokens.ts
index 075acb5858..e632208f7d 100644
--- a/packages/react/src/themes/tokens/component/pagination-tokens.ts
+++ b/packages/react/src/themes/tokens/component/pagination-tokens.ts
@@ -19,10 +19,10 @@ export type PaginationTokenMap = {
 export const defaultPaginationTokens: PaginationTokenMap = {
     'pagination-page-background-color': 'transparent-100',
     'pagination-page-text-color': 'color-content-subtle',
-    'pagination-page-hover-background-color': 'color-bg-hover',
+    'pagination-page-hover-background-color': 'color-background-hover',
 
-    'pagination-page-selected-hover-background-color': 'color-bg-selected',
-    'pagination-page-selected-background-color': 'color-bg-selected',
+    'pagination-page-selected-hover-background-color': 'color-background-selected',
+    'pagination-page-selected-background-color': 'color-background-selected',
     'pagination-page-selected-border-color': 'color-border-selected',
     'pagination-page-selected-text-color': 'color-content-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/password-input-tokens.ts b/packages/react/src/themes/tokens/component/password-input-tokens.ts
index 9800199513..3fd450ba75 100644
--- a/packages/react/src/themes/tokens/component/password-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/password-input-tokens.ts
@@ -25,7 +25,7 @@ export const defaultPasswordInputTokens: PasswordInputTokenMap = {
 
     'password-strength-label-text-color': 'color-content-subtle',
 
-    'password-strength-meter-empty-color': 'color-bg-empty',
+    'password-strength-meter-empty-color': 'color-background-empty',
     'password-strength-meter-weak-color': 'color-alert-50',
     'password-strength-meter-fair-color': 'color-warning-50',
     'password-strength-meter-good-color': 'color-success-50',
diff --git a/packages/react/src/themes/tokens/component/progress-tokens.ts b/packages/react/src/themes/tokens/component/progress-tokens.ts
index d01a8ba2d4..b1ef93028e 100644
--- a/packages/react/src/themes/tokens/component/progress-tokens.ts
+++ b/packages/react/src/themes/tokens/component/progress-tokens.ts
@@ -31,32 +31,32 @@ export type ProgressTokenMap = {
 };
 
 export const defaultProgressTokens: ProgressTokenMap = {
-    'progress-circle-empty-track-color': 'color-bg-empty',
+    'progress-circle-empty-track-color': 'color-background-empty',
     'progress-circle-label-text-color': 'color-content',
     'progress-circle-result-text-color': 'color-content',
 
     'progress-indicator-label-text-color': 'color-content',
-    'progress-indicator-empty-track-color': 'color-bg-empty',
+    'progress-indicator-empty-track-color': 'color-background-empty',
 
     'progress-tracker-notification-badge-color': 'color-content-inverse',
-    'progress-tracker-notification-badge-fill-color': 'color-feedback-bg-alert-bold',
+    'progress-tracker-notification-badge-fill-color': 'color-feedback-background-alert-bold',
 
-    'progress-tracker-bridge-empty-background-color': 'color-bg-empty',
-    'progress-tracker-bridge-filled-background-color': 'color-bg-brand',
+    'progress-tracker-bridge-empty-background-color': 'color-background-empty',
+    'progress-tracker-bridge-filled-background-color': 'color-background-brand',
     // TO-DO
     'progress-tracker-step-todo-text-color': 'color-content',
-    'progress-tracker-step-todo-background-color': 'color-bg',
+    'progress-tracker-step-todo-background-color': 'color-background',
     // Uncompleted
     'progress-tracker-step-uncompleted-border-color': 'color-border-empty',
     'progress-tracker-step-uncompleted-text-color': 'color-content',
     'progress-tracker-step-uncompleted-label-text-color': 'color-content-subtle',
     // Current
-    'progress-tracker-step-current-border-color': 'color-bg-brand',
+    'progress-tracker-step-current-border-color': 'color-background-brand',
     'progress-tracker-step-current-text-color': 'color-content-selected',
     'progress-tracker-step-current-label-text-color': 'color-content-selected',
     // Completed
-    'progress-tracker-step-completed-background-color': 'color-bg-brand',
-    'progress-tracker-step-completed-border-color': 'color-bg-brand',
+    'progress-tracker-step-completed-background-color': 'color-background-brand',
+    'progress-tracker-step-completed-border-color': 'color-background-brand',
     'progress-tracker-step-completed-text-color': 'color-content-inverse',
     'progress-tracker-step-completed-label-text-color': 'color-content-brand',
 };
diff --git a/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts b/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
index 4f6d1be70b..161fcc87e2 100644
--- a/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
+++ b/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
@@ -19,15 +19,15 @@ export type RadioButtonGroupTokenMap = {
 };
 
 export const defaultRadioButtonGroupTokens: RadioButtonGroupTokenMap = {
-    'radio-button-background-color': 'color-input-bg',
+    'radio-button-background-color': 'color-input-background',
     'radio-button-border-color': 'color-input-border',
     'radio-button-group-legend-text-color': 'color-content',
     'radio-button-hover-border-color': 'color-input-border-hover',
 
-    'radio-button-disabled-background-color': 'color-input-bg-disabled',
+    'radio-button-disabled-background-color': 'color-input-background-disabled',
     'radio-button-disabled-border-color': 'color-input-border-disabled',
     'radio-button-disabled-hover-border-color': 'color-input-border-disabled',
 
-    'radio-button-checked-background-color': 'color-input-bg-checked',
+    'radio-button-checked-background-color': 'color-input-background-checked',
     'radio-button-checked-border-color': 'color-input-border-checked',
 };
diff --git a/packages/react/src/themes/tokens/component/radio-card-tokens.ts b/packages/react/src/themes/tokens/component/radio-card-tokens.ts
index f8041e7066..bdd856d273 100644
--- a/packages/react/src/themes/tokens/component/radio-card-tokens.ts
+++ b/packages/react/src/themes/tokens/component/radio-card-tokens.ts
@@ -21,18 +21,18 @@ export type RadioCardTokenMap = {
 };
 
 export const defaultRadioCardTokens: RadioCardTokenMap = {
-    'radio-card-background-color': 'color-input-bg',
+    'radio-card-background-color': 'color-input-background',
     'radio-card-border-color': 'color-input-border',
     'radio-card-text-color': 'color-content',
 
-    'radio-card-hover-background-color': 'color-input-bg-hover',
+    'radio-card-hover-background-color': 'color-input-background-hover',
     'radio-card-hover-border-color': 'color-input-border-hover',
     'radio-card-hover-text-color': 'color-content-hover',
 
-    'radio-card-disabled-background-color': 'color-input-bg-disabled',
+    'radio-card-disabled-background-color': 'color-input-background-disabled',
     'radio-card-disabled-border-color': 'color-input-border-disabled',
     'radio-card-disabled-text-color': 'color-input-content-disabled',
 
-    'radio-card-selected-background-color': 'color-input-bg-selected',
+    'radio-card-selected-background-color': 'color-input-background-selected',
     'radio-card-selected-border-color': 'color-input-border-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts b/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts
index f60b2ad661..2b7a2d7326 100644
--- a/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts
@@ -28,27 +28,27 @@ export type SectionalBannerTokenMap = {
 };
 
 export const defaultSectionalBannerTokens: SectionalBannerTokenMap = {
-    'sectional-banner-neutral-background-color': 'color-bg-neutral-subtlest',
+    'sectional-banner-neutral-background-color': 'color-background-neutral-subtlest',
     'sectional-banner-neutral-border-color': 'color-border-bold',
     'sectional-banner-neutral-icon-color': 'color-content-subtle',
 
-    'sectional-banner-info-background-color': 'color-feedback-bg-informative-subtlest',
+    'sectional-banner-info-background-color': 'color-feedback-background-informative-subtlest',
     'sectional-banner-info-border-color': 'color-feedback-border-informative',
     'sectional-banner-info-icon-color': 'color-feedback-content-informative',
 
-    'sectional-banner-discovery-background-color': 'color-feedback-bg-discovery-subtlest',
+    'sectional-banner-discovery-background-color': 'color-feedback-background-discovery-subtlest',
     'sectional-banner-discovery-border-color': 'color-feedback-border-discovery',
     'sectional-banner-discovery-icon-color': 'color-feedback-content-discovery',
 
-    'sectional-banner-success-background-color': 'color-feedback-bg-success-subtlest',
+    'sectional-banner-success-background-color': 'color-feedback-background-success-subtlest',
     'sectional-banner-success-border-color': 'color-feedback-border-success',
     'sectional-banner-success-icon-color': 'color-feedback-content-success',
 
-    'sectional-banner-warning-background-color': 'color-feedback-bg-warning-subtlest',
+    'sectional-banner-warning-background-color': 'color-feedback-background-warning-subtlest',
     'sectional-banner-warning-border-color': 'color-feedback-border-warning',
     'sectional-banner-warning-icon-color': 'color-feedback-content-warning',
 
-    'sectional-banner-alert-background-color': 'color-feedback-bg-alert-subtlest',
+    'sectional-banner-alert-background-color': 'color-feedback-background-alert-subtlest',
     'sectional-banner-alert-border-color': 'color-feedback-border-alert',
     'sectional-banner-alert-icon-color': 'color-feedback-content-alert',
 };
diff --git a/packages/react/src/themes/tokens/component/segmented-control-tokens.ts b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
index 22ce109edf..00c333a94a 100644
--- a/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
+++ b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
@@ -22,19 +22,19 @@ export type SegmentedControlTokenMap = {
 };
 
 export const defaultSegmentedControlTokens: SegmentedControlTokenMap = {
-    'segmented-control-background-color': 'color-input-bg',
+    'segmented-control-background-color': 'color-input-background',
     'segmented-control-border-color': 'color-input-border',
     'segmented-control-text-color': 'color-input-content',
 
-    'segmented-control-hover-background-color': 'color-input-bg-hover',
+    'segmented-control-hover-background-color': 'color-input-background-hover',
     'segmented-control-hover-border-color': 'color-input-border-hover',
     'segmented-control-hover-text-color': 'color-input-content-hover',
 
-    'segmented-control-disabled-background-color': 'color-input-bg-disabled',
+    'segmented-control-disabled-background-color': 'color-input-background-disabled',
     'segmented-control-disabled-border-color': 'color-input-border-disabled',
     'segmented-control-disabled-text-color': 'color-input-content-disabled',
 
-    'segmented-control-selected-background-color': 'color-input-bg-selected',
+    'segmented-control-selected-background-color': 'color-input-background-selected',
     'segmented-control-selected-border-color': 'color-input-border-selected',
     'segmented-control-selected-text-color': 'color-input-content-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/side-drawer-tokens.ts b/packages/react/src/themes/tokens/component/side-drawer-tokens.ts
index 01b5e28833..8811c3c693 100644
--- a/packages/react/src/themes/tokens/component/side-drawer-tokens.ts
+++ b/packages/react/src/themes/tokens/component/side-drawer-tokens.ts
@@ -12,6 +12,6 @@ export type SideDrawerTokensMap = {
 }
 
 export const defaultSideDrawerTokens: SideDrawerTokensMap = {
-    'side-drawer-background-color': 'color-bg-overlay',
+    'side-drawer-background-color': 'color-background-overlay',
     'side-drawer-box-shadow-color': 'color-box-shadow',
 };
diff --git a/packages/react/src/themes/tokens/component/spinner-tokens.ts b/packages/react/src/themes/tokens/component/spinner-tokens.ts
index 465dbf924e..3ce6f5f7dc 100644
--- a/packages/react/src/themes/tokens/component/spinner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/spinner-tokens.ts
@@ -11,5 +11,5 @@ export type SpinnerTokenMap = {
 };
 
 export const defaultSpinnerTokens: SpinnerTokenMap = {
-    'spinner-fill-color': 'color-bg-brand',
+    'spinner-fill-color': 'color-background-brand',
 };
diff --git a/packages/react/src/themes/tokens/component/status-tokens.ts b/packages/react/src/themes/tokens/component/status-tokens.ts
index dd639d40d4..88cac5f2c9 100644
--- a/packages/react/src/themes/tokens/component/status-tokens.ts
+++ b/packages/react/src/themes/tokens/component/status-tokens.ts
@@ -15,9 +15,9 @@ export type StatusTokenMap = {
 };
 
 export const defaultStatusTokens: StatusTokenMap = {
-    'status-circle-blocked-background-color': 'color-feedback-bg-alert-bold',
-    'status-circle-enabled-background-color': 'color-feedback-bg-success-bold',
-    'status-circle-disabled-background-color': 'color-bg-disabled',
+    'status-circle-blocked-background-color': 'color-feedback-background-alert-bold',
+    'status-circle-enabled-background-color': 'color-feedback-background-success-bold',
+    'status-circle-disabled-background-color': 'color-background-disabled',
     'status-circle-disabled-border-color': 'color-border-disabled',
     'status-disabled-text-color': 'color-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/stepper-tokens.ts b/packages/react/src/themes/tokens/component/stepper-tokens.ts
index 1c19ecb8ae..d0a1595a69 100644
--- a/packages/react/src/themes/tokens/component/stepper-tokens.ts
+++ b/packages/react/src/themes/tokens/component/stepper-tokens.ts
@@ -17,11 +17,11 @@ export type StepperTokenMap = {
 };
 
 export const defaultStepperTokens: StepperTokenMap = {
-    'stepper-button-background-color': 'color-input-bg',
+    'stepper-button-background-color': 'color-input-background',
     'stepper-button-border-color': 'color-input-border',
     'stepper-button-text-color': 'color-input-content',
-    'stepper-button-hover-background-color': 'color-input-bg-hover',
-    'stepper-button-disabled-background-color': 'color-input-bg-disabled',
+    'stepper-button-hover-background-color': 'color-input-background-hover',
+    'stepper-button-disabled-background-color': 'color-input-background-disabled',
     'stepper-button-disabled-border-color': 'color-input-border-disabled',
     'stepper-button-disabled-text-color': 'color-input-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/tab-tokens.ts b/packages/react/src/themes/tokens/component/tab-tokens.ts
index 7dc2863a9e..0ad3852367 100644
--- a/packages/react/src/themes/tokens/component/tab-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tab-tokens.ts
@@ -33,18 +33,18 @@ export const defaultTabTokens: TabTokenMap = {
      * tabs global
      */
     'tab-global-button-background-color': 'transparent-100',
-    'tab-global-list-background-color': 'color-bg',
+    'tab-global-list-background-color': 'color-background',
     'tab-global-button-selected-background-color': 'transparent-100',
 
     /**
      * tabs section
      */
-    'tab-section-background-color': 'color-bg',
+    'tab-section-background-color': 'color-background',
     'tab-section-border-color': 'color-border',
     'tab-section-box-shadow-color': 'color-box-shadow',
-    'tab-section-list-background-color': 'color-bg-neutral-subtle',
-    'tab-section-button-background-color': 'color-bg',
-    'tab-section-button-selected-background-color': 'color-bg',
+    'tab-section-list-background-color': 'color-background-neutral-subtle',
+    'tab-section-button-background-color': 'color-background',
+    'tab-section-button-selected-background-color': 'color-background',
 
     /**
      * tab button
@@ -62,7 +62,7 @@ export const defaultTabTokens: TabTokenMap = {
     /**
      * tab button indicator
      */
-    'tab-button-indicator-hover-background-color': 'color-bg-hover',
-    'tab-button-indicator-active-background-color': 'color-bg-indicator-active',
-    'tab-button-indicator-selected-background-color': 'color-bg-indicator-selected',
+    'tab-button-indicator-hover-background-color': 'color-background-hover',
+    'tab-button-indicator-active-background-color': 'color-background-indicator-active',
+    'tab-button-indicator-selected-background-color': 'color-background-indicator-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/table-tokens.ts b/packages/react/src/themes/tokens/component/table-tokens.ts
index dd8c708ae9..213c8909cb 100644
--- a/packages/react/src/themes/tokens/component/table-tokens.ts
+++ b/packages/react/src/themes/tokens/component/table-tokens.ts
@@ -31,21 +31,21 @@ export const defaultTableTokens: TableTokenMap = {
     'table-background-color': 'transparent-100',
     'table-text-color': 'color-content',
 
-    'table-header-background-color': 'color-bg',
+    'table-header-background-color': 'color-background',
     'table-header-border-color': 'color-border',
     'table-body-background-color': 'transparent-100',
-    'table-footer-background-color': 'color-bg',
+    'table-footer-background-color': 'color-background',
     'table-footer-border-color': 'color-border',
 
     'table-group-border-color': 'color-border',
 
-    'table-cell-hover-background-color': 'color-bg-hover',
+    'table-cell-hover-background-color': 'color-background-hover',
     'table-cell-number-text-color': 'color-content-subtle',
 
     'table-row-border-color': 'color-border',
-    'table-row-odd-background-color': 'color-bg-isolated',
-    'table-row-selected-background-color': 'color-bg-selected',
-    'table-row-error-background-color': 'color-feedback-bg-alert-subtle',
+    'table-row-odd-background-color': 'color-background-isolated',
+    'table-row-selected-background-color': 'color-background-selected',
+    'table-row-error-background-color': 'color-feedback-background-alert-subtle',
     'table-row-error-border-color': 'color-feedback-border-alert',
 
     'table-sort-button-ascending-icon-color': 'color-content-subtle',
diff --git a/packages/react/src/themes/tokens/component/tag-tokens.ts b/packages/react/src/themes/tokens/component/tag-tokens.ts
index 4b27a67a4b..07e183f3b4 100644
--- a/packages/react/src/themes/tokens/component/tag-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tag-tokens.ts
@@ -62,17 +62,17 @@ export type TagTokenMap = {
 };
 
 export const defaultTagTokens: TagTokenMap = {
-    'tag-background-color': 'color-bg-neutral-subtle',
+    'tag-background-color': 'color-background-neutral-subtle',
     'tag-border-color': 'color-border-bold',
     'tag-text-color': 'color-content',
     'tag-icon-color': 'color-content',
 
-    'tag-hover-background-color': 'color-bg-hover',
+    'tag-hover-background-color': 'color-background-hover',
     'tag-hover-border-color': 'color-border-hover',
     'tag-hover-icon-color': 'color-content-hover',
     'tag-hover-text-color': 'color-content-hover',
 
-    'tag-selected-background-color': 'color-bg-selected',
+    'tag-selected-background-color': 'color-background-selected',
     'tag-selected-border-color': 'color-border-selected',
     'tag-selected-text-color': 'color-content-selected',
     'tag-selected-icon-color': 'color-content-selected',
diff --git a/packages/react/src/themes/tokens/component/text-input-tokens.ts b/packages/react/src/themes/tokens/component/text-input-tokens.ts
index 086a581799..38f7eeb008 100644
--- a/packages/react/src/themes/tokens/component/text-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-input-tokens.ts
@@ -19,13 +19,13 @@ export type TextInputTokenMap = {
 };
 
 export const defaultTextInputTokens: TextInputTokenMap = {
-    'text-input-background-color': 'color-input-bg',
+    'text-input-background-color': 'color-input-background',
     'text-input-border-color': 'color-input-border',
     'text-input-text-color': 'color-content',
     'text-input-placeholder-text-color': 'color-input-content',
 
     'text-input-error-border-color': 'color-input-border-error',
-    'text-input-disabled-background-color': 'color-input-bg-disabled',
+    'text-input-disabled-background-color': 'color-input-background-disabled',
     'text-input-disabled-border-color': 'color-input-border-disabled',
     'text-input-disabled-text-color': 'color-input-content-disabled',
 
diff --git a/packages/react/src/themes/tokens/component/toast-tokens.ts b/packages/react/src/themes/tokens/component/toast-tokens.ts
index 8a6bba198b..bdbe9f9ebd 100644
--- a/packages/react/src/themes/tokens/component/toast-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toast-tokens.ts
@@ -25,23 +25,23 @@ export type ToastTokenMap = {
 };
 
 export const defaultToastTokens: ToastTokenMap = {
-    'toast-neutral-background-color': 'color-bg-neutral-bold',
+    'toast-neutral-background-color': 'color-background-neutral-bold',
     'toast-neutral-text-color': 'color-content-inverse',
     'toast-neutral-icon-color': 'color-content-inverse',
 
-    'toast-discovery-background-color': 'color-feedback-bg-discovery-bold',
+    'toast-discovery-background-color': 'color-feedback-background-discovery-bold',
     'toast-discovery-text-color': 'color-content-inverse',
     'toast-discovery-icon-color': 'color-content-inverse',
 
-    'toast-success-background-color': 'color-feedback-bg-success-bold',
+    'toast-success-background-color': 'color-feedback-background-success-bold',
     'toast-success-text-color': 'color-content-inverse',
     'toast-success-icon-color': 'color-content-inverse',
 
-    'toast-warning-background-color': 'color-feedback-bg-warning-bold',
+    'toast-warning-background-color': 'color-feedback-background-warning-bold',
     'toast-warning-text-color': 'color-content',
     'toast-warning-icon-color': 'color-content',
 
-    'toast-alert-background-color': 'color-feedback-bg-alert-bold',
+    'toast-alert-background-color': 'color-feedback-background-alert-bold',
     'toast-alert-text-color': 'color-content-inverse',
     'toast-alert-icon-color': 'color-content-inverse',
 };
diff --git a/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts b/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
index c872d4279e..33c022416a 100644
--- a/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
@@ -20,16 +20,16 @@ export type ToggleSwitchTokenMap = {
 };
 
 export const defaultToggleSwitchTokens: ToggleSwitchTokenMap = {
-    'toggle-switch-background-color': 'color-bg-neutral-bold',
-    'toggle-switch-border-color': 'color-bg-neutral-bold',
-    'toggle-switch-toggled-background-color': 'color-feedback-bg-success-bold',
-    'toggle-switch-toggled-border-color': 'color-feedback-bg-success-bold',
+    'toggle-switch-background-color': 'color-background-neutral-bold',
+    'toggle-switch-border-color': 'color-background-neutral-bold',
+    'toggle-switch-toggled-background-color': 'color-feedback-background-success-bold',
+    'toggle-switch-toggled-border-color': 'color-feedback-background-success-bold',
 
-    'toggle-switch-disabled-background-color': 'color-bg-neutral-bold-disabled',
-    'toggle-switch-disabled-border-color': 'color-bg-neutral-bold-disabled',
-    'toggle-switch-disabled-toggled-background-color': 'color-feedback-bg-success-bold-disabled',
-    'toggle-switch-disabled-toggled-border-color': 'color-feedback-bg-success-bold-disabled',
+    'toggle-switch-disabled-background-color': 'color-background-neutral-bold-disabled',
+    'toggle-switch-disabled-border-color': 'color-background-neutral-bold-disabled',
+    'toggle-switch-disabled-toggled-background-color': 'color-feedback-background-success-bold-disabled',
+    'toggle-switch-disabled-toggled-border-color': 'color-feedback-background-success-bold-disabled',
 
     'toggle-switch-label-text-color': 'color-content',
-    'toggle-switch-knob-background-color': 'color-input-bg',
+    'toggle-switch-knob-background-color': 'color-input-background',
 };
diff --git a/packages/react/src/themes/tokens/component/toggletip-tokens.ts b/packages/react/src/themes/tokens/component/toggletip-tokens.ts
index 0077227e08..188b9441d2 100644
--- a/packages/react/src/themes/tokens/component/toggletip-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toggletip-tokens.ts
@@ -13,7 +13,7 @@ export type ToggleTipTokenMap = {
 };
 
 export const defaultToggleTipTokens: ToggleTipTokenMap = {
-    'toggletip-popper-container-background-color': 'color-bg-overlay',
+    'toggletip-popper-container-background-color': 'color-background-overlay',
     'toggletip-popper-container-border-color': 'color-border-overlay',
     'toggletip-popper-container-text-color': 'color-content',
 };
diff --git a/packages/react/src/themes/tokens/component/tooltip-tokens.ts b/packages/react/src/themes/tokens/component/tooltip-tokens.ts
index 338af7d91e..8fd9424766 100644
--- a/packages/react/src/themes/tokens/component/tooltip-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tooltip-tokens.ts
@@ -20,6 +20,6 @@ export const defaultTooltipTokens: TooltipTokenMap = {
     'tooltip-inverted-icon-color': 'color-content-inverse',
     'tooltip-popper-container-border-color': 'color-border-inverse',
     'tooltip-popper-container-text-color': 'color-content-inverse',
-    'tooltip-popper-container-default-background-color': 'color-bg-neutral-bold',
-    'tooltip-popper-container-success-background-color': 'color-feedback-bg-success-bold',
+    'tooltip-popper-container-default-background-color': 'color-background-neutral-bold',
+    'tooltip-popper-container-success-background-color': 'color-feedback-background-success-bold',
 };

From 260e7ee23dc6c9bca280ab6f2941ce09d587f99d Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Mon, 27 May 2024 15:55:04 -0400
Subject: [PATCH 66/70] chore(alias-tokens): post review changes

---
 .../react/src/themes/tokens/alias-tokens.ts   | 80 +++++++++----------
 .../themes/tokens/component/button-tokens.ts  | 18 ++---
 .../tokens/component/checkbox-tokens.ts       | 20 ++---
 .../themes/tokens/component/chooser-tokens.ts | 24 +++---
 .../tokens/component/combobox-tokens.ts       | 24 +++---
 .../tokens/component/dropdown-list-tokens.ts  | 16 ++--
 .../themes/tokens/component/field-tokens.ts   |  6 +-
 .../tokens/component/numeric-input-tokens.ts  | 12 +--
 .../tokens/component/password-input-tokens.ts |  4 +-
 .../tokens/component/phone-input-tokens.ts    |  2 +-
 .../component/radio-button-group-tokens.ts    | 16 ++--
 .../tokens/component/radio-card-tokens.ts     | 18 ++---
 .../tokens/component/search-input-tokens.ts   |  6 +-
 .../component/segmented-control-tokens.ts     | 24 +++---
 .../themes/tokens/component/stepper-tokens.ts | 14 ++--
 .../tokens/component/text-area-tokens.ts      |  4 +-
 .../tokens/component/text-input-tokens.ts     | 16 ++--
 .../tokens/component/toggle-switch-tokens.ts  |  2 +-
 18 files changed, 153 insertions(+), 153 deletions(-)

diff --git a/packages/react/src/themes/tokens/alias-tokens.ts b/packages/react/src/themes/tokens/alias-tokens.ts
index 3e15411f95..82fa400831 100644
--- a/packages/react/src/themes/tokens/alias-tokens.ts
+++ b/packages/react/src/themes/tokens/alias-tokens.ts
@@ -48,26 +48,26 @@ export type AliasTokens =
     | 'color-feedback-content-discovery'
     | 'color-feedback-content-informative'
     /**
-     * INPUT
-     */
-    | 'color-input-background'
-    | 'color-input-background-hover'
-    | 'color-input-background-disabled'
-    | 'color-input-background-checked'
-    | 'color-input-background-selected'
-    | 'color-input-border'
-    | 'color-input-border-hover'
-    | 'color-input-border-disabled'
-    | 'color-input-border-selected'
-    | 'color-input-border-checked'
-    | 'color-input-border-error'
-    | 'color-input-content'
-    | 'color-input-content-hover'
-    | 'color-input-content-disabled'
-    | 'color-input-content-error'
-    | 'color-input-content-success'
-    | 'color-input-content-checked'
-    | 'color-input-content-selected'
+     * CONTROL
+     */
+    | 'color-control-background'
+    | 'color-control-background-hover'
+    | 'color-control-background-disabled'
+    | 'color-control-background-checked'
+    | 'color-control-background-selected'
+    | 'color-control-border'
+    | 'color-control-border-hover'
+    | 'color-control-border-disabled'
+    | 'color-control-border-selected'
+    | 'color-control-border-checked'
+    | 'color-control-border-error'
+    | 'color-control-content'
+    | 'color-control-content-hover'
+    | 'color-control-content-disabled'
+    | 'color-control-content-error'
+    | 'color-control-content-success'
+    | 'color-control-content-checked'
+    | 'color-control-content-selected'
     /**
      * MENU
      */
@@ -228,29 +228,29 @@ export const defaultAliasTokens: AliasTokenMap = {
     'color-feedback-content-informative': 'color-informative-70',
 
     /**
-     * INPUT
-     *  Use for form UI elements, such as inputs, checkboxes, radio buttons, etc.
+     * CONTROL
+     *  Use for form UI elements, such as inputs, checkboxes, radio buttons, choosers, segmented controls, etc.
      */
-    'color-input-background': 'color-white',
-    'color-input-background-hover': 'color-neutral-15',
-    'color-input-background-disabled': 'color-neutral-05',
-    'color-input-background-checked': 'color-brand-50',
-    'color-input-background-selected': 'color-brand-05',
+    'color-control-background': 'color-white',
+    'color-control-background-hover': 'color-neutral-15',
+    'color-control-background-disabled': 'color-neutral-05',
+    'color-control-background-checked': 'color-brand-50',
+    'color-control-background-selected': 'color-brand-05',
 
-    'color-input-border': 'color-neutral-65',
-    'color-input-border-hover': 'color-black',
-    'color-input-border-disabled': 'color-neutral-30',
-    'color-input-border-selected': 'color-brand-50',
-    'color-input-border-checked': 'color-brand-50',
-    'color-input-border-error': 'color-alert-50',
+    'color-control-border': 'color-neutral-65',
+    'color-control-border-hover': 'color-black',
+    'color-control-border-disabled': 'color-neutral-30',
+    'color-control-border-selected': 'color-brand-50',
+    'color-control-border-checked': 'color-brand-50',
+    'color-control-border-error': 'color-alert-50',
 
-    'color-input-content': 'color-neutral-65',
-    'color-input-content-hover': 'color-black',
-    'color-input-content-disabled': 'color-neutral-30',
-    'color-input-content-error': 'color-alert-50',
-    'color-input-content-success': 'color-success-50',
-    'color-input-content-checked': 'color-white',
-    'color-input-content-selected': 'color-brand-70',
+    'color-control-content': 'color-neutral-65',
+    'color-control-content-hover': 'color-black',
+    'color-control-content-disabled': 'color-neutral-30',
+    'color-control-content-error': 'color-alert-50',
+    'color-control-content-success': 'color-success-50',
+    'color-control-content-checked': 'color-white',
+    'color-control-content-selected': 'color-brand-70',
 
     /**
      * MENU
diff --git a/packages/react/src/themes/tokens/component/button-tokens.ts b/packages/react/src/themes/tokens/component/button-tokens.ts
index 207ce6c6ba..bbe6364437 100644
--- a/packages/react/src/themes/tokens/component/button-tokens.ts
+++ b/packages/react/src/themes/tokens/component/button-tokens.ts
@@ -284,15 +284,15 @@ export const defaultButtonTokens: ButtonTokenMap = {
     'button-destructive-tertiary-inverted-disabled-text-color': 'color-action-destructive-disabled',
 
     // Input button
-    'button-input-background-color': 'color-input-background',
-    'button-input-border-color': 'color-input-border',
-    'button-input-text-color': 'color-input-content',
+    'button-input-background-color': 'color-control-background',
+    'button-input-border-color': 'color-control-border',
+    'button-input-text-color': 'color-control-content',
     // Input button hover
-    'button-input-hover-background-color': 'color-input-background-hover',
-    'button-input-hover-border-color': 'color-input-border-hover',
-    'button-input-hover-text-color': 'color-input-content-hover',
+    'button-input-hover-background-color': 'color-control-background-hover',
+    'button-input-hover-border-color': 'color-control-border-hover',
+    'button-input-hover-text-color': 'color-control-content-hover',
     // Input button disabled
-    'button-input-disabled-background-color': 'color-input-background-disabled',
-    'button-input-disabled-border-color': 'color-input-border-disabled',
-    'button-input-disabled-text-color': 'color-input-content-disabled',
+    'button-input-disabled-background-color': 'color-control-background-disabled',
+    'button-input-disabled-border-color': 'color-control-border-disabled',
+    'button-input-disabled-text-color': 'color-control-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/checkbox-tokens.ts b/packages/react/src/themes/tokens/component/checkbox-tokens.ts
index 911e0d9754..36225d2324 100644
--- a/packages/react/src/themes/tokens/component/checkbox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/checkbox-tokens.ts
@@ -20,14 +20,14 @@ export type CheckboxTokenMap = {
 };
 
 export const defaultCheckboxTokens: CheckboxTokenMap = {
-    'checkbox-unchecked-background-color': 'color-input-background',
-    'checkbox-unchecked-border-color': 'color-input-border',
-    'checkbox-checked-icon-color': 'color-input-content-checked',
-    'checkbox-checked-background-color': 'color-input-background-checked',
-    'checkbox-checked-border-color': 'color-input-border-checked',
-    'checkbox-disabled-background-color': 'color-input-background-disabled',
-    'checkbox-disabled-border-color': 'color-input-border-disabled',
-    'checkbox-hover-border-color': 'color-input-border-hover',
-    'checkbox-hover-background-color': 'color-input-background-hover',
-    'checkbox-error-border-color': 'color-input-border-error',
+    'checkbox-unchecked-background-color': 'color-control-background',
+    'checkbox-unchecked-border-color': 'color-control-border',
+    'checkbox-checked-icon-color': 'color-control-content-checked',
+    'checkbox-checked-background-color': 'color-control-background-checked',
+    'checkbox-checked-border-color': 'color-control-border-checked',
+    'checkbox-disabled-background-color': 'color-control-background-disabled',
+    'checkbox-disabled-border-color': 'color-control-border-disabled',
+    'checkbox-hover-border-color': 'color-control-border-hover',
+    'checkbox-hover-background-color': 'color-control-background-hover',
+    'checkbox-error-border-color': 'color-control-border-error',
 };
diff --git a/packages/react/src/themes/tokens/component/chooser-tokens.ts b/packages/react/src/themes/tokens/component/chooser-tokens.ts
index 2089491ab9..d7185ac4b8 100644
--- a/packages/react/src/themes/tokens/component/chooser-tokens.ts
+++ b/packages/react/src/themes/tokens/component/chooser-tokens.ts
@@ -22,16 +22,16 @@ export type ChooserTokenMap = {
 };
 
 export const defaultChooserTokens: ChooserTokenMap = {
-    'chooser-background-color': 'color-input-background',
-    'chooser-border-color': 'color-input-border',
-    'chooser-text-color': 'color-input-content',
-    'chooser-selected-background-color': 'color-input-background-selected',
-    'chooser-selected-border-color': 'color-input-border-selected',
-    'chooser-selected-text-color': 'color-input-content-selected',
-    'chooser-hover-background-color': 'color-input-background-hover',
-    'chooser-hover-border-color': 'color-input-border-hover',
-    'chooser-hover-text-color': 'color-input-content-hover',
-    'chooser-disabled-background-color': 'color-input-background-disabled',
-    'chooser-disabled-border-color': 'color-input-border-disabled',
-    'chooser-disabled-text-color': 'color-input-content-disabled',
+    'chooser-background-color': 'color-control-background',
+    'chooser-border-color': 'color-control-border',
+    'chooser-text-color': 'color-control-content',
+    'chooser-selected-background-color': 'color-control-background-selected',
+    'chooser-selected-border-color': 'color-control-border-selected',
+    'chooser-selected-text-color': 'color-control-content-selected',
+    'chooser-hover-background-color': 'color-control-background-hover',
+    'chooser-hover-border-color': 'color-control-border-hover',
+    'chooser-hover-text-color': 'color-control-content-hover',
+    'chooser-disabled-background-color': 'color-control-background-disabled',
+    'chooser-disabled-border-color': 'color-control-border-disabled',
+    'chooser-disabled-text-color': 'color-control-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/combobox-tokens.ts b/packages/react/src/themes/tokens/component/combobox-tokens.ts
index 10084ed76b..f8663e21ca 100644
--- a/packages/react/src/themes/tokens/component/combobox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/combobox-tokens.ts
@@ -24,18 +24,18 @@ export type ComboboxTokenMap = {
 };
 
 export const defaultComboboxTokens: ComboboxTokenMap = {
-    'combobox-clear-button-border-right-color': 'color-input-content',
-    'combobox-clear-button-disabled-icon-color': 'color-input-content-disabled',
-    'combobox-clear-button-icon-color': 'color-input-content',
+    'combobox-clear-button-border-right-color': 'color-control-content',
+    'combobox-clear-button-disabled-icon-color': 'color-control-content-disabled',
+    'combobox-clear-button-icon-color': 'color-control-content',
     'combobox-arrow-button-background-color': 'transparent-100',
     'combobox-arrow-button-hover-background-color': 'transparent-100',
-    'combobox-arrow-button-disabled-icon-color': 'color-input-content-disabled',
-    'combobox-arrow-button-icon-color': 'color-input-content',
-    'combobox-border-color': 'color-input-border',
-    'combobox-disabled-background-color': 'color-input-background-disabled',
-    'combobox-disabled-border-color': 'color-input-border-disabled',
-    'combobox-disabled-text-color': 'color-input-content-disabled',
-    'combobox-error-border-color': 'color-input-border-error',
-    'combobox-background-color': 'color-input-background',
-    'combobox-placeholder-text-color': 'color-input-content',
+    'combobox-arrow-button-disabled-icon-color': 'color-control-content-disabled',
+    'combobox-arrow-button-icon-color': 'color-control-content',
+    'combobox-border-color': 'color-control-border',
+    'combobox-disabled-background-color': 'color-control-background-disabled',
+    'combobox-disabled-border-color': 'color-control-border-disabled',
+    'combobox-disabled-text-color': 'color-control-content-disabled',
+    'combobox-error-border-color': 'color-control-border-error',
+    'combobox-background-color': 'color-control-background',
+    'combobox-placeholder-text-color': 'color-control-content',
 };
diff --git a/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
index b90d3af77f..05f67aeccb 100644
--- a/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
+++ b/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
@@ -18,12 +18,12 @@ export type DropdownListTokenMap = {
 };
 
 export const defaultDropdownListTokens: DropdownListTokenMap = {
-    'dropdown-list-input-background-color': 'color-input-background',
-    'dropdown-list-input-border-color': 'color-input-border',
-    'dropdown-list-input-error-border-color': 'color-input-border-error',
-    'dropdown-list-arrow-color': 'color-input-content',
-    'dropdown-list-input-disabled-background-color': 'color-input-background-disabled',
-    'dropdown-list-input-disabled-border-color': 'color-input-border-disabled',
-    'dropdown-list-arrow-disabled-color': 'color-input-content-disabled',
-    'dropdown-list-input-disabled-text-color': 'color-input-content-disabled',
+    'dropdown-list-input-background-color': 'color-control-background',
+    'dropdown-list-input-border-color': 'color-control-border',
+    'dropdown-list-input-error-border-color': 'color-control-border-error',
+    'dropdown-list-arrow-color': 'color-control-content',
+    'dropdown-list-input-disabled-background-color': 'color-control-background-disabled',
+    'dropdown-list-input-disabled-border-color': 'color-control-border-disabled',
+    'dropdown-list-arrow-disabled-color': 'color-control-content-disabled',
+    'dropdown-list-input-disabled-text-color': 'color-control-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/field-tokens.ts b/packages/react/src/themes/tokens/component/field-tokens.ts
index d4abc4863c..e424efc3e0 100644
--- a/packages/react/src/themes/tokens/component/field-tokens.ts
+++ b/packages/react/src/themes/tokens/component/field-tokens.ts
@@ -15,8 +15,8 @@ export type FieldTokenMap = {
 
 export const defaultFieldTokens: FieldTokenMap = {
     'field-hint-text-color': 'color-content-subtle',
-    'field-error-text-color': 'color-input-content-error',
+    'field-error-text-color': 'color-control-content-error',
 
-    'field-input-border-color': 'color-input-border',
-    'field-input-error-border-color': 'color-input-border-error',
+    'field-input-border-color': 'color-control-border',
+    'field-input-error-border-color': 'color-control-border-error',
 };
diff --git a/packages/react/src/themes/tokens/component/numeric-input-tokens.ts b/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
index 4a3594d9c2..b5862996bb 100644
--- a/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
@@ -16,11 +16,11 @@ export type NumericInputTokenMap = {
 };
 
 export const defaultNumericInputTokens: NumericInputTokenMap = {
-    'numeric-input-background-color': 'color-input-background',
-    'numeric-input-border-color': 'color-input-border',
-    'numeric-input-error-border-color': 'color-input-border-error',
+    'numeric-input-background-color': 'color-control-background',
+    'numeric-input-border-color': 'color-control-border',
+    'numeric-input-error-border-color': 'color-control-border-error',
 
-    'numeric-input-disabled-adornment-text-color': 'color-input-content-disabled',
-    'numeric-input-disabled-background-color': 'color-input-background-disabled',
-    'numeric-input-disabled-border-color': 'color-input-border-disabled',
+    'numeric-input-disabled-adornment-text-color': 'color-control-content-disabled',
+    'numeric-input-disabled-background-color': 'color-control-background-disabled',
+    'numeric-input-disabled-border-color': 'color-control-border-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/password-input-tokens.ts b/packages/react/src/themes/tokens/component/password-input-tokens.ts
index 3fd450ba75..a1e04c6a6a 100644
--- a/packages/react/src/themes/tokens/component/password-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/password-input-tokens.ts
@@ -20,8 +20,8 @@ export type PasswordInputTokenMap = {
 
 export const defaultPasswordInputTokens: PasswordInputTokenMap = {
     'password-rule-empty-text-color': 'color-content-subtle',
-    'password-rule-error-text-color': 'color-input-content-error',
-    'password-rule-success-text-color': 'color-input-content-success',
+    'password-rule-error-text-color': 'color-control-content-error',
+    'password-rule-success-text-color': 'color-control-content-success',
 
     'password-strength-label-text-color': 'color-content-subtle',
 
diff --git a/packages/react/src/themes/tokens/component/phone-input-tokens.ts b/packages/react/src/themes/tokens/component/phone-input-tokens.ts
index 4659b071ce..0b86e72b68 100644
--- a/packages/react/src/themes/tokens/component/phone-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/phone-input-tokens.ts
@@ -13,5 +13,5 @@ export type PhoneInputTokenMap = {
 
 export const defaultPhoneInputTokens: PhoneInputTokenMap = {
     'phone-input-background-color': 'transparent-100',
-    'phone-input-mask-text-color': 'color-input-content',
+    'phone-input-mask-text-color': 'color-control-content',
 };
diff --git a/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts b/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
index 161fcc87e2..b25773de55 100644
--- a/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
+++ b/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
@@ -19,15 +19,15 @@ export type RadioButtonGroupTokenMap = {
 };
 
 export const defaultRadioButtonGroupTokens: RadioButtonGroupTokenMap = {
-    'radio-button-background-color': 'color-input-background',
-    'radio-button-border-color': 'color-input-border',
+    'radio-button-background-color': 'color-control-background',
+    'radio-button-border-color': 'color-control-border',
     'radio-button-group-legend-text-color': 'color-content',
-    'radio-button-hover-border-color': 'color-input-border-hover',
+    'radio-button-hover-border-color': 'color-control-border-hover',
 
-    'radio-button-disabled-background-color': 'color-input-background-disabled',
-    'radio-button-disabled-border-color': 'color-input-border-disabled',
-    'radio-button-disabled-hover-border-color': 'color-input-border-disabled',
+    'radio-button-disabled-background-color': 'color-control-background-disabled',
+    'radio-button-disabled-border-color': 'color-control-border-disabled',
+    'radio-button-disabled-hover-border-color': 'color-control-border-disabled',
 
-    'radio-button-checked-background-color': 'color-input-background-checked',
-    'radio-button-checked-border-color': 'color-input-border-checked',
+    'radio-button-checked-background-color': 'color-control-background-checked',
+    'radio-button-checked-border-color': 'color-control-border-checked',
 };
diff --git a/packages/react/src/themes/tokens/component/radio-card-tokens.ts b/packages/react/src/themes/tokens/component/radio-card-tokens.ts
index bdd856d273..ae983616ac 100644
--- a/packages/react/src/themes/tokens/component/radio-card-tokens.ts
+++ b/packages/react/src/themes/tokens/component/radio-card-tokens.ts
@@ -21,18 +21,18 @@ export type RadioCardTokenMap = {
 };
 
 export const defaultRadioCardTokens: RadioCardTokenMap = {
-    'radio-card-background-color': 'color-input-background',
-    'radio-card-border-color': 'color-input-border',
+    'radio-card-background-color': 'color-control-background',
+    'radio-card-border-color': 'color-control-border',
     'radio-card-text-color': 'color-content',
 
-    'radio-card-hover-background-color': 'color-input-background-hover',
-    'radio-card-hover-border-color': 'color-input-border-hover',
+    'radio-card-hover-background-color': 'color-control-background-hover',
+    'radio-card-hover-border-color': 'color-control-border-hover',
     'radio-card-hover-text-color': 'color-content-hover',
 
-    'radio-card-disabled-background-color': 'color-input-background-disabled',
-    'radio-card-disabled-border-color': 'color-input-border-disabled',
-    'radio-card-disabled-text-color': 'color-input-content-disabled',
+    'radio-card-disabled-background-color': 'color-control-background-disabled',
+    'radio-card-disabled-border-color': 'color-control-border-disabled',
+    'radio-card-disabled-text-color': 'color-control-content-disabled',
 
-    'radio-card-selected-background-color': 'color-input-background-selected',
-    'radio-card-selected-border-color': 'color-input-border-selected',
+    'radio-card-selected-background-color': 'color-control-background-selected',
+    'radio-card-selected-border-color': 'color-control-border-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/search-input-tokens.ts b/packages/react/src/themes/tokens/component/search-input-tokens.ts
index 607e290797..608d14057b 100644
--- a/packages/react/src/themes/tokens/component/search-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/search-input-tokens.ts
@@ -15,9 +15,9 @@ export type SearchInputTokenMap = {
 };
 
 export const defaultSearchInputTokens: SearchInputTokenMap = {
-    'search-input-disabled-icon-color': 'color-input-content-disabled',
-    'search-input-icon-color': 'color-input-content',
-    'search-input-label-text-color': 'color-input-content',
+    'search-input-disabled-icon-color': 'color-control-content-disabled',
+    'search-input-icon-color': 'color-control-content',
+    'search-input-label-text-color': 'color-control-content',
     'search-input-reset-button-background-color': 'transparent-100',
     'search-input-reset-button-border-color': 'transparent-100',
 };
diff --git a/packages/react/src/themes/tokens/component/segmented-control-tokens.ts b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
index 00c333a94a..ea8c2bd6fe 100644
--- a/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
+++ b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
@@ -22,19 +22,19 @@ export type SegmentedControlTokenMap = {
 };
 
 export const defaultSegmentedControlTokens: SegmentedControlTokenMap = {
-    'segmented-control-background-color': 'color-input-background',
-    'segmented-control-border-color': 'color-input-border',
-    'segmented-control-text-color': 'color-input-content',
+    'segmented-control-background-color': 'color-control-background',
+    'segmented-control-border-color': 'color-control-border',
+    'segmented-control-text-color': 'color-control-content',
 
-    'segmented-control-hover-background-color': 'color-input-background-hover',
-    'segmented-control-hover-border-color': 'color-input-border-hover',
-    'segmented-control-hover-text-color': 'color-input-content-hover',
+    'segmented-control-hover-background-color': 'color-control-background-hover',
+    'segmented-control-hover-border-color': 'color-control-border-hover',
+    'segmented-control-hover-text-color': 'color-control-content-hover',
 
-    'segmented-control-disabled-background-color': 'color-input-background-disabled',
-    'segmented-control-disabled-border-color': 'color-input-border-disabled',
-    'segmented-control-disabled-text-color': 'color-input-content-disabled',
+    'segmented-control-disabled-background-color': 'color-control-background-disabled',
+    'segmented-control-disabled-border-color': 'color-control-border-disabled',
+    'segmented-control-disabled-text-color': 'color-control-content-disabled',
 
-    'segmented-control-selected-background-color': 'color-input-background-selected',
-    'segmented-control-selected-border-color': 'color-input-border-selected',
-    'segmented-control-selected-text-color': 'color-input-content-selected',
+    'segmented-control-selected-background-color': 'color-control-background-selected',
+    'segmented-control-selected-border-color': 'color-control-border-selected',
+    'segmented-control-selected-text-color': 'color-control-content-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/stepper-tokens.ts b/packages/react/src/themes/tokens/component/stepper-tokens.ts
index d0a1595a69..72115f3b17 100644
--- a/packages/react/src/themes/tokens/component/stepper-tokens.ts
+++ b/packages/react/src/themes/tokens/component/stepper-tokens.ts
@@ -17,11 +17,11 @@ export type StepperTokenMap = {
 };
 
 export const defaultStepperTokens: StepperTokenMap = {
-    'stepper-button-background-color': 'color-input-background',
-    'stepper-button-border-color': 'color-input-border',
-    'stepper-button-text-color': 'color-input-content',
-    'stepper-button-hover-background-color': 'color-input-background-hover',
-    'stepper-button-disabled-background-color': 'color-input-background-disabled',
-    'stepper-button-disabled-border-color': 'color-input-border-disabled',
-    'stepper-button-disabled-text-color': 'color-input-content-disabled',
+    'stepper-button-background-color': 'color-control-background',
+    'stepper-button-border-color': 'color-control-border',
+    'stepper-button-text-color': 'color-control-content',
+    'stepper-button-hover-background-color': 'color-control-background-hover',
+    'stepper-button-disabled-background-color': 'color-control-background-disabled',
+    'stepper-button-disabled-border-color': 'color-control-border-disabled',
+    'stepper-button-disabled-text-color': 'color-control-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/text-area-tokens.ts b/packages/react/src/themes/tokens/component/text-area-tokens.ts
index a47c4bdc69..54ec4a9dd7 100644
--- a/packages/react/src/themes/tokens/component/text-area-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-area-tokens.ts
@@ -12,6 +12,6 @@ export type TextAreaTokenMap = {
 };
 
 export const defaultTextAreaTokens: TextAreaTokenMap = {
-    'text-area-counter-error-text-color': 'color-input-content-error',
-    'text-area-counter-text-color': 'color-input-content',
+    'text-area-counter-error-text-color': 'color-control-content-error',
+    'text-area-counter-text-color': 'color-control-content',
 };
diff --git a/packages/react/src/themes/tokens/component/text-input-tokens.ts b/packages/react/src/themes/tokens/component/text-input-tokens.ts
index 38f7eeb008..4417f52283 100644
--- a/packages/react/src/themes/tokens/component/text-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-input-tokens.ts
@@ -19,15 +19,15 @@ export type TextInputTokenMap = {
 };
 
 export const defaultTextInputTokens: TextInputTokenMap = {
-    'text-input-background-color': 'color-input-background',
-    'text-input-border-color': 'color-input-border',
+    'text-input-background-color': 'color-control-background',
+    'text-input-border-color': 'color-control-border',
     'text-input-text-color': 'color-content',
-    'text-input-placeholder-text-color': 'color-input-content',
+    'text-input-placeholder-text-color': 'color-control-content',
 
-    'text-input-error-border-color': 'color-input-border-error',
-    'text-input-disabled-background-color': 'color-input-background-disabled',
-    'text-input-disabled-border-color': 'color-input-border-disabled',
-    'text-input-disabled-text-color': 'color-input-content-disabled',
+    'text-input-error-border-color': 'color-control-border-error',
+    'text-input-disabled-background-color': 'color-control-background-disabled',
+    'text-input-disabled-border-color': 'color-control-border-disabled',
+    'text-input-disabled-text-color': 'color-control-content-disabled',
 
-    'text-input-placeholder-disabled-text-color': 'color-input-content-disabled',
+    'text-input-placeholder-disabled-text-color': 'color-control-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts b/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
index 33c022416a..62d562fa57 100644
--- a/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
@@ -31,5 +31,5 @@ export const defaultToggleSwitchTokens: ToggleSwitchTokenMap = {
     'toggle-switch-disabled-toggled-border-color': 'color-feedback-background-success-bold-disabled',
 
     'toggle-switch-label-text-color': 'color-content',
-    'toggle-switch-knob-background-color': 'color-input-background',
+    'toggle-switch-knob-background-color': 'color-control-background',
 };

From 18775017d7e44f3efac168a285da3a6d50dcf9fb Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 6 Jun 2024 14:05:15 -0400
Subject: [PATCH 67/70] chore(alias-tokens): selected to pressed on toggle
 button

---
 .../toggle-button-group/toggle-button-group.tsx      |  8 ++++----
 .../tokens/component/segmented-control-tokens.ts     | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/components/toggle-button-group/toggle-button-group.tsx b/packages/react/src/components/toggle-button-group/toggle-button-group.tsx
index 068c52fc34..1f9be7273f 100644
--- a/packages/react/src/components/toggle-button-group/toggle-button-group.tsx
+++ b/packages/react/src/components/toggle-button-group/toggle-button-group.tsx
@@ -24,11 +24,11 @@ interface ToggleButtonProps {
 
 const ToggleButton = styled.button<ToggleButtonProps>`
     align-items: center;
-    background-color: ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-selected-background-color'] : theme.component['segmented-control-background-color'])};
-    border: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-selected-border-color'] : theme.component['segmented-control-border-color'])};
+    background-color: ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-pressed-background-color'] : theme.component['segmented-control-background-color'])};
+    border: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-pressed-border-color'] : theme.component['segmented-control-border-color'])};
     border-right: ${({ pressed }) => (pressed ? '1px solid' : 0)};
     box-sizing: border-box;
-    color: ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-selected-text-color'] : theme.component['segmented-control-text-color'])};
+    color: ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-pressed-text-color'] : theme.component['segmented-control-text-color'])};
     font-size: ${({ isMobile }) => (isMobile ? '1rem' : '0.875rem')};
     letter-spacing: 0.02875rem;
     min-height: ${({ isMobile }) => (isMobile ? 'var(--size-3x)' : 'var(--size-2x)')};
@@ -39,7 +39,7 @@ const ToggleButton = styled.button<ToggleButtonProps>`
     `}
 
     &:last-child {
-        border-right: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-selected-border-color'] : theme.component['segmented-control-border-color'])};
+        border-right: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-pressed-border-color'] : theme.component['segmented-control-border-color'])};
         margin: 0;
     }
 
diff --git a/packages/react/src/themes/tokens/component/segmented-control-tokens.ts b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
index ea8c2bd6fe..5c66d18783 100644
--- a/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
+++ b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
@@ -3,15 +3,15 @@ import { RefTokens } from '../ref-tokens';
 
 export type SegmentedControlTokens =
     | 'segmented-control-background-color'
-    | 'segmented-control-selected-background-color'
+    | 'segmented-control-pressed-background-color'
     | 'segmented-control-hover-background-color'
     | 'segmented-control-disabled-background-color'
     | 'segmented-control-border-color'
-    | 'segmented-control-selected-border-color'
+    | 'segmented-control-pressed-border-color'
     | 'segmented-control-hover-border-color'
     | 'segmented-control-disabled-border-color'
     | 'segmented-control-text-color'
-    | 'segmented-control-selected-text-color'
+    | 'segmented-control-pressed-text-color'
     | 'segmented-control-hover-text-color'
     | 'segmented-control-disabled-text-color';
 
@@ -34,7 +34,7 @@ export const defaultSegmentedControlTokens: SegmentedControlTokenMap = {
     'segmented-control-disabled-border-color': 'color-control-border-disabled',
     'segmented-control-disabled-text-color': 'color-control-content-disabled',
 
-    'segmented-control-selected-background-color': 'color-control-background-selected',
-    'segmented-control-selected-border-color': 'color-control-border-selected',
-    'segmented-control-selected-text-color': 'color-control-content-selected',
+    'segmented-control-pressed-background-color': 'color-control-background-selected',
+    'segmented-control-pressed-border-color': 'color-control-border-selected',
+    'segmented-control-pressed-text-color': 'color-control-content-selected',
 };

From 488c1b4841b0eaa59cfdab4c9c2db0c9ae7ece5a Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 6 Jun 2024 14:08:30 -0400
Subject: [PATCH 68/70] chore(alias-tokens): caption to subcontent on listbox

---
 packages/react/src/components/listbox/listbox.tsx         | 2 +-
 .../react/src/themes/tokens/component/listbox-tokens.ts   | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/listbox/listbox.tsx b/packages/react/src/components/listbox/listbox.tsx
index 9eef6a88e6..67f1a07240 100644
--- a/packages/react/src/components/listbox/listbox.tsx
+++ b/packages/react/src/components/listbox/listbox.tsx
@@ -195,7 +195,7 @@ const ListItemTextContainer = styled.span`
 `;
 
 const ListItemCaption = styled.span<{ $disabled?: boolean, $isMobile: boolean }>`
-    color: ${({ $disabled, theme }) => ($disabled ? theme.component['listbox-item-caption-disabled-text-color'] : theme.component['listbox-item-caption-text-color'])};
+    color: ${({ $disabled, theme }) => ($disabled ? theme.component['listbox-item-subcontent-disabled-text-color'] : theme.component['listbox-item-subcontent-text-color'])};
     display: block;
     font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
 `;
diff --git a/packages/react/src/themes/tokens/component/listbox-tokens.ts b/packages/react/src/themes/tokens/component/listbox-tokens.ts
index 916ebff6df..afd41ffe03 100644
--- a/packages/react/src/themes/tokens/component/listbox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/listbox-tokens.ts
@@ -8,8 +8,8 @@ export type ListboxTokens =
     | 'listbox-item-disabled-background-color'
     | 'listbox-item-disabled-text-color'
     | 'listbox-item-hover-background-color'
-    | 'listbox-item-caption-text-color'
-    | 'listbox-item-caption-disabled-text-color'
+    | 'listbox-item-subcontent-text-color'
+    | 'listbox-item-subcontent-disabled-text-color'
     | 'listbox-box-shadow-depth-color';
 
 export type ListboxTokenValue = AliasTokens | RefTokens;
@@ -23,12 +23,12 @@ export const defaultListboxTokens: ListboxTokenMap = {
     'listbox-border-color': 'color-menu-border',
 
     'listbox-item-text-color': 'color-menu-item-content',
-    'listbox-item-caption-text-color': 'color-menu-item-subcontent',
+    'listbox-item-subcontent-text-color': 'color-menu-item-subcontent',
     'listbox-item-hover-background-color': 'color-menu-item-background-hover',
 
     'listbox-item-disabled-background-color': 'color-menu-item-background',
     'listbox-item-disabled-text-color': 'color-menu-item-content-disabled',
-    'listbox-item-caption-disabled-text-color': 'color-menu-item-content-disabled',
+    'listbox-item-subcontent-disabled-text-color': 'color-menu-item-content-disabled',
 
     'listbox-box-shadow-depth-color': 'color-box-shadow',
 };

From 0eff2e941d7fb2410fcc971d23ede444f7a7bbfb Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 6 Jun 2024 14:31:03 -0400
Subject: [PATCH 69/70] chore(alias-tokens): controls content auxiliary

---
 .../react/src/themes/tokens/alias-tokens.ts   | 34 +++++++++++--------
 .../themes/tokens/component/button-tokens.ts  |  6 ++--
 .../tokens/component/checkbox-tokens.ts       |  2 +-
 .../themes/tokens/component/chooser-tokens.ts |  8 ++---
 .../tokens/component/combobox-tokens.ts       | 14 ++++----
 .../tokens/component/dropdown-list-tokens.ts  |  6 ++--
 .../themes/tokens/component/field-tokens.ts   |  4 +--
 .../tokens/component/numeric-input-tokens.ts  |  2 +-
 .../tokens/component/password-input-tokens.ts |  4 +--
 .../tokens/component/phone-input-tokens.ts    |  2 +-
 .../tokens/component/radio-card-tokens.ts     |  6 ++--
 .../tokens/component/search-input-tokens.ts   |  6 ++--
 .../component/segmented-control-tokens.ts     |  8 ++---
 .../themes/tokens/component/stepper-tokens.ts |  4 +--
 .../tokens/component/text-area-tokens.ts      |  4 +--
 .../tokens/component/text-input-tokens.ts     | 14 ++++----
 16 files changed, 66 insertions(+), 58 deletions(-)

diff --git a/packages/react/src/themes/tokens/alias-tokens.ts b/packages/react/src/themes/tokens/alias-tokens.ts
index 82fa400831..1260a43e47 100644
--- a/packages/react/src/themes/tokens/alias-tokens.ts
+++ b/packages/react/src/themes/tokens/alias-tokens.ts
@@ -61,13 +61,16 @@ export type AliasTokens =
     | 'color-control-border-selected'
     | 'color-control-border-checked'
     | 'color-control-border-error'
-    | 'color-control-content'
-    | 'color-control-content-hover'
-    | 'color-control-content-disabled'
-    | 'color-control-content-error'
-    | 'color-control-content-success'
-    | 'color-control-content-checked'
-    | 'color-control-content-selected'
+    | 'color-control-value'
+    | 'color-control-value-hover'
+    | 'color-control-value-disabled'
+    | 'color-control-auxiliary'
+    | 'color-control-auxiliary-hover'
+    | 'color-control-auxiliary-disabled'
+    | 'color-control-auxiliary-error'
+    | 'color-control-auxiliary-success'
+    | 'color-control-auxiliary-checked'
+    | 'color-control-auxiliary-selected'
     /**
      * MENU
      */
@@ -244,13 +247,16 @@ export const defaultAliasTokens: AliasTokenMap = {
     'color-control-border-checked': 'color-brand-50',
     'color-control-border-error': 'color-alert-50',
 
-    'color-control-content': 'color-neutral-65',
-    'color-control-content-hover': 'color-black',
-    'color-control-content-disabled': 'color-neutral-30',
-    'color-control-content-error': 'color-alert-50',
-    'color-control-content-success': 'color-success-50',
-    'color-control-content-checked': 'color-white',
-    'color-control-content-selected': 'color-brand-70',
+    'color-control-value': 'color-content',
+    'color-control-value-hover': 'color-content-hover',
+    'color-control-value-disabled': 'color-content-disabled',
+    'color-control-auxiliary': 'color-neutral-65',
+    'color-control-auxiliary-hover': 'color-black',
+    'color-control-auxiliary-disabled': 'color-neutral-30',
+    'color-control-auxiliary-error': 'color-alert-50',
+    'color-control-auxiliary-success': 'color-success-50',
+    'color-control-auxiliary-checked': 'color-white',
+    'color-control-auxiliary-selected': 'color-brand-70',
 
     /**
      * MENU
diff --git a/packages/react/src/themes/tokens/component/button-tokens.ts b/packages/react/src/themes/tokens/component/button-tokens.ts
index bbe6364437..387c7c8ccf 100644
--- a/packages/react/src/themes/tokens/component/button-tokens.ts
+++ b/packages/react/src/themes/tokens/component/button-tokens.ts
@@ -286,13 +286,13 @@ export const defaultButtonTokens: ButtonTokenMap = {
     // Input button
     'button-input-background-color': 'color-control-background',
     'button-input-border-color': 'color-control-border',
-    'button-input-text-color': 'color-control-content',
+    'button-input-text-color': 'color-control-auxiliary',
     // Input button hover
     'button-input-hover-background-color': 'color-control-background-hover',
     'button-input-hover-border-color': 'color-control-border-hover',
-    'button-input-hover-text-color': 'color-control-content-hover',
+    'button-input-hover-text-color': 'color-control-auxiliary-hover',
     // Input button disabled
     'button-input-disabled-background-color': 'color-control-background-disabled',
     'button-input-disabled-border-color': 'color-control-border-disabled',
-    'button-input-disabled-text-color': 'color-control-content-disabled',
+    'button-input-disabled-text-color': 'color-control-auxiliary-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/checkbox-tokens.ts b/packages/react/src/themes/tokens/component/checkbox-tokens.ts
index 36225d2324..498e90e016 100644
--- a/packages/react/src/themes/tokens/component/checkbox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/checkbox-tokens.ts
@@ -22,7 +22,7 @@ export type CheckboxTokenMap = {
 export const defaultCheckboxTokens: CheckboxTokenMap = {
     'checkbox-unchecked-background-color': 'color-control-background',
     'checkbox-unchecked-border-color': 'color-control-border',
-    'checkbox-checked-icon-color': 'color-control-content-checked',
+    'checkbox-checked-icon-color': 'color-control-auxiliary-checked',
     'checkbox-checked-background-color': 'color-control-background-checked',
     'checkbox-checked-border-color': 'color-control-border-checked',
     'checkbox-disabled-background-color': 'color-control-background-disabled',
diff --git a/packages/react/src/themes/tokens/component/chooser-tokens.ts b/packages/react/src/themes/tokens/component/chooser-tokens.ts
index d7185ac4b8..98e22d36fd 100644
--- a/packages/react/src/themes/tokens/component/chooser-tokens.ts
+++ b/packages/react/src/themes/tokens/component/chooser-tokens.ts
@@ -24,14 +24,14 @@ export type ChooserTokenMap = {
 export const defaultChooserTokens: ChooserTokenMap = {
     'chooser-background-color': 'color-control-background',
     'chooser-border-color': 'color-control-border',
-    'chooser-text-color': 'color-control-content',
+    'chooser-text-color': 'color-control-auxiliary',
     'chooser-selected-background-color': 'color-control-background-selected',
     'chooser-selected-border-color': 'color-control-border-selected',
-    'chooser-selected-text-color': 'color-control-content-selected',
+    'chooser-selected-text-color': 'color-control-auxiliary-selected',
     'chooser-hover-background-color': 'color-control-background-hover',
     'chooser-hover-border-color': 'color-control-border-hover',
-    'chooser-hover-text-color': 'color-control-content-hover',
+    'chooser-hover-text-color': 'color-control-auxiliary-hover',
     'chooser-disabled-background-color': 'color-control-background-disabled',
     'chooser-disabled-border-color': 'color-control-border-disabled',
-    'chooser-disabled-text-color': 'color-control-content-disabled',
+    'chooser-disabled-text-color': 'color-control-auxiliary-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/combobox-tokens.ts b/packages/react/src/themes/tokens/component/combobox-tokens.ts
index f8663e21ca..65f19c5610 100644
--- a/packages/react/src/themes/tokens/component/combobox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/combobox-tokens.ts
@@ -24,18 +24,18 @@ export type ComboboxTokenMap = {
 };
 
 export const defaultComboboxTokens: ComboboxTokenMap = {
-    'combobox-clear-button-border-right-color': 'color-control-content',
-    'combobox-clear-button-disabled-icon-color': 'color-control-content-disabled',
-    'combobox-clear-button-icon-color': 'color-control-content',
+    'combobox-clear-button-border-right-color': 'color-control-auxiliary',
+    'combobox-clear-button-disabled-icon-color': 'color-control-auxiliary-disabled',
+    'combobox-clear-button-icon-color': 'color-control-auxiliary',
     'combobox-arrow-button-background-color': 'transparent-100',
     'combobox-arrow-button-hover-background-color': 'transparent-100',
-    'combobox-arrow-button-disabled-icon-color': 'color-control-content-disabled',
-    'combobox-arrow-button-icon-color': 'color-control-content',
+    'combobox-arrow-button-disabled-icon-color': 'color-control-auxiliary-disabled',
+    'combobox-arrow-button-icon-color': 'color-control-auxiliary',
     'combobox-border-color': 'color-control-border',
     'combobox-disabled-background-color': 'color-control-background-disabled',
     'combobox-disabled-border-color': 'color-control-border-disabled',
-    'combobox-disabled-text-color': 'color-control-content-disabled',
+    'combobox-disabled-text-color': 'color-control-auxiliary-disabled',
     'combobox-error-border-color': 'color-control-border-error',
     'combobox-background-color': 'color-control-background',
-    'combobox-placeholder-text-color': 'color-control-content',
+    'combobox-placeholder-text-color': 'color-control-auxiliary',
 };
diff --git a/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
index 05f67aeccb..37c50dbcd2 100644
--- a/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
+++ b/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
@@ -21,9 +21,9 @@ export const defaultDropdownListTokens: DropdownListTokenMap = {
     'dropdown-list-input-background-color': 'color-control-background',
     'dropdown-list-input-border-color': 'color-control-border',
     'dropdown-list-input-error-border-color': 'color-control-border-error',
-    'dropdown-list-arrow-color': 'color-control-content',
+    'dropdown-list-arrow-color': 'color-control-auxiliary',
     'dropdown-list-input-disabled-background-color': 'color-control-background-disabled',
     'dropdown-list-input-disabled-border-color': 'color-control-border-disabled',
-    'dropdown-list-arrow-disabled-color': 'color-control-content-disabled',
-    'dropdown-list-input-disabled-text-color': 'color-control-content-disabled',
+    'dropdown-list-arrow-disabled-color': 'color-control-auxiliary-disabled',
+    'dropdown-list-input-disabled-text-color': 'color-control-auxiliary-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/field-tokens.ts b/packages/react/src/themes/tokens/component/field-tokens.ts
index e424efc3e0..5974ca616e 100644
--- a/packages/react/src/themes/tokens/component/field-tokens.ts
+++ b/packages/react/src/themes/tokens/component/field-tokens.ts
@@ -14,8 +14,8 @@ export type FieldTokenMap = {
 };
 
 export const defaultFieldTokens: FieldTokenMap = {
-    'field-hint-text-color': 'color-content-subtle',
-    'field-error-text-color': 'color-control-content-error',
+    'field-hint-text-color': 'color-control-auxiliary',
+    'field-error-text-color': 'color-control-auxiliary-error',
 
     'field-input-border-color': 'color-control-border',
     'field-input-error-border-color': 'color-control-border-error',
diff --git a/packages/react/src/themes/tokens/component/numeric-input-tokens.ts b/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
index b5862996bb..d777fc516d 100644
--- a/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
@@ -20,7 +20,7 @@ export const defaultNumericInputTokens: NumericInputTokenMap = {
     'numeric-input-border-color': 'color-control-border',
     'numeric-input-error-border-color': 'color-control-border-error',
 
-    'numeric-input-disabled-adornment-text-color': 'color-control-content-disabled',
+    'numeric-input-disabled-adornment-text-color': 'color-control-auxiliary-disabled',
     'numeric-input-disabled-background-color': 'color-control-background-disabled',
     'numeric-input-disabled-border-color': 'color-control-border-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/password-input-tokens.ts b/packages/react/src/themes/tokens/component/password-input-tokens.ts
index a1e04c6a6a..5d26c2bfdb 100644
--- a/packages/react/src/themes/tokens/component/password-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/password-input-tokens.ts
@@ -20,8 +20,8 @@ export type PasswordInputTokenMap = {
 
 export const defaultPasswordInputTokens: PasswordInputTokenMap = {
     'password-rule-empty-text-color': 'color-content-subtle',
-    'password-rule-error-text-color': 'color-control-content-error',
-    'password-rule-success-text-color': 'color-control-content-success',
+    'password-rule-error-text-color': 'color-control-auxiliary-error',
+    'password-rule-success-text-color': 'color-control-auxiliary-success',
 
     'password-strength-label-text-color': 'color-content-subtle',
 
diff --git a/packages/react/src/themes/tokens/component/phone-input-tokens.ts b/packages/react/src/themes/tokens/component/phone-input-tokens.ts
index 0b86e72b68..c92fd30339 100644
--- a/packages/react/src/themes/tokens/component/phone-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/phone-input-tokens.ts
@@ -13,5 +13,5 @@ export type PhoneInputTokenMap = {
 
 export const defaultPhoneInputTokens: PhoneInputTokenMap = {
     'phone-input-background-color': 'transparent-100',
-    'phone-input-mask-text-color': 'color-control-content',
+    'phone-input-mask-text-color': 'color-control-auxiliary',
 };
diff --git a/packages/react/src/themes/tokens/component/radio-card-tokens.ts b/packages/react/src/themes/tokens/component/radio-card-tokens.ts
index ae983616ac..74fb085200 100644
--- a/packages/react/src/themes/tokens/component/radio-card-tokens.ts
+++ b/packages/react/src/themes/tokens/component/radio-card-tokens.ts
@@ -23,15 +23,15 @@ export type RadioCardTokenMap = {
 export const defaultRadioCardTokens: RadioCardTokenMap = {
     'radio-card-background-color': 'color-control-background',
     'radio-card-border-color': 'color-control-border',
-    'radio-card-text-color': 'color-content',
+    'radio-card-text-color': 'color-control-value',
 
     'radio-card-hover-background-color': 'color-control-background-hover',
     'radio-card-hover-border-color': 'color-control-border-hover',
-    'radio-card-hover-text-color': 'color-content-hover',
+    'radio-card-hover-text-color': 'color-control-value-hover',
 
     'radio-card-disabled-background-color': 'color-control-background-disabled',
     'radio-card-disabled-border-color': 'color-control-border-disabled',
-    'radio-card-disabled-text-color': 'color-control-content-disabled',
+    'radio-card-disabled-text-color': 'color-control-auxiliary-disabled',
 
     'radio-card-selected-background-color': 'color-control-background-selected',
     'radio-card-selected-border-color': 'color-control-border-selected',
diff --git a/packages/react/src/themes/tokens/component/search-input-tokens.ts b/packages/react/src/themes/tokens/component/search-input-tokens.ts
index 608d14057b..a2f54c326c 100644
--- a/packages/react/src/themes/tokens/component/search-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/search-input-tokens.ts
@@ -15,9 +15,9 @@ export type SearchInputTokenMap = {
 };
 
 export const defaultSearchInputTokens: SearchInputTokenMap = {
-    'search-input-disabled-icon-color': 'color-control-content-disabled',
-    'search-input-icon-color': 'color-control-content',
-    'search-input-label-text-color': 'color-control-content',
+    'search-input-disabled-icon-color': 'color-control-auxiliary-disabled',
+    'search-input-icon-color': 'color-control-auxiliary',
+    'search-input-label-text-color': 'color-control-auxiliary',
     'search-input-reset-button-background-color': 'transparent-100',
     'search-input-reset-button-border-color': 'transparent-100',
 };
diff --git a/packages/react/src/themes/tokens/component/segmented-control-tokens.ts b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
index 5c66d18783..8a34d36efb 100644
--- a/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
+++ b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
@@ -24,17 +24,17 @@ export type SegmentedControlTokenMap = {
 export const defaultSegmentedControlTokens: SegmentedControlTokenMap = {
     'segmented-control-background-color': 'color-control-background',
     'segmented-control-border-color': 'color-control-border',
-    'segmented-control-text-color': 'color-control-content',
+    'segmented-control-text-color': 'color-control-auxiliary',
 
     'segmented-control-hover-background-color': 'color-control-background-hover',
     'segmented-control-hover-border-color': 'color-control-border-hover',
-    'segmented-control-hover-text-color': 'color-control-content-hover',
+    'segmented-control-hover-text-color': 'color-control-auxiliary-hover',
 
     'segmented-control-disabled-background-color': 'color-control-background-disabled',
     'segmented-control-disabled-border-color': 'color-control-border-disabled',
-    'segmented-control-disabled-text-color': 'color-control-content-disabled',
+    'segmented-control-disabled-text-color': 'color-control-auxiliary-disabled',
 
     'segmented-control-pressed-background-color': 'color-control-background-selected',
     'segmented-control-pressed-border-color': 'color-control-border-selected',
-    'segmented-control-pressed-text-color': 'color-control-content-selected',
+    'segmented-control-pressed-text-color': 'color-control-auxiliary-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/stepper-tokens.ts b/packages/react/src/themes/tokens/component/stepper-tokens.ts
index 72115f3b17..9035e8a1fc 100644
--- a/packages/react/src/themes/tokens/component/stepper-tokens.ts
+++ b/packages/react/src/themes/tokens/component/stepper-tokens.ts
@@ -19,9 +19,9 @@ export type StepperTokenMap = {
 export const defaultStepperTokens: StepperTokenMap = {
     'stepper-button-background-color': 'color-control-background',
     'stepper-button-border-color': 'color-control-border',
-    'stepper-button-text-color': 'color-control-content',
+    'stepper-button-text-color': 'color-control-auxiliary',
     'stepper-button-hover-background-color': 'color-control-background-hover',
     'stepper-button-disabled-background-color': 'color-control-background-disabled',
     'stepper-button-disabled-border-color': 'color-control-border-disabled',
-    'stepper-button-disabled-text-color': 'color-control-content-disabled',
+    'stepper-button-disabled-text-color': 'color-control-auxiliary-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/text-area-tokens.ts b/packages/react/src/themes/tokens/component/text-area-tokens.ts
index 54ec4a9dd7..c6192c0e52 100644
--- a/packages/react/src/themes/tokens/component/text-area-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-area-tokens.ts
@@ -12,6 +12,6 @@ export type TextAreaTokenMap = {
 };
 
 export const defaultTextAreaTokens: TextAreaTokenMap = {
-    'text-area-counter-error-text-color': 'color-control-content-error',
-    'text-area-counter-text-color': 'color-control-content',
+    'text-area-counter-error-text-color': 'color-control-auxiliary-error',
+    'text-area-counter-text-color': 'color-control-auxiliary',
 };
diff --git a/packages/react/src/themes/tokens/component/text-input-tokens.ts b/packages/react/src/themes/tokens/component/text-input-tokens.ts
index 4417f52283..c28cf83442 100644
--- a/packages/react/src/themes/tokens/component/text-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-input-tokens.ts
@@ -20,14 +20,16 @@ export type TextInputTokenMap = {
 
 export const defaultTextInputTokens: TextInputTokenMap = {
     'text-input-background-color': 'color-control-background',
+    'text-input-disabled-background-color': 'color-control-background-disabled',
+
     'text-input-border-color': 'color-control-border',
-    'text-input-text-color': 'color-content',
-    'text-input-placeholder-text-color': 'color-control-content',
+    'text-input-disabled-border-color': 'color-control-border-disabled',
 
     'text-input-error-border-color': 'color-control-border-error',
-    'text-input-disabled-background-color': 'color-control-background-disabled',
-    'text-input-disabled-border-color': 'color-control-border-disabled',
-    'text-input-disabled-text-color': 'color-control-content-disabled',
 
-    'text-input-placeholder-disabled-text-color': 'color-control-content-disabled',
+    'text-input-text-color': 'color-control-value',
+    'text-input-disabled-text-color': 'color-control-value-disabled',
+
+    'text-input-placeholder-text-color': 'color-control-auxiliary',
+    'text-input-placeholder-disabled-text-color': 'color-control-auxiliary-disabled',
 };

From 75805dbe0d4c18388172a3545747d6c6c5b100ca Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 6 Jun 2024 14:47:16 -0400
Subject: [PATCH 70/70] chore(alias-tokens): update snapshots

---
 .../components/dropdown-list/dropdown-list.test.tsx.snap    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index ac4234ff05..4eed643782 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -483,7 +483,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -508,7 +508,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -546,7 +546,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;