From a643aed10198ba2ff3860978e75e759bf3a25653 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 20 Jul 2026 22:22:23 +0200
Subject: [PATCH 01/12] chore: Refactor visual accent colors to use explicit
 token references

---
 src/box/visual-accent.scss                | 102 ++++++++++++++++------
 style-dictionary/utils/index.ts           |  20 +++++
 style-dictionary/visual-refresh/colors.ts |   9 +-
 3 files changed, 102 insertions(+), 29 deletions(-)

diff --git a/src/box/visual-accent.scss b/src/box/visual-accent.scss
index 7226c7c49e..dca9e66cc7 100644
--- a/src/box/visual-accent.scss
+++ b/src/box/visual-accent.scss
@@ -4,7 +4,6 @@
 */
 
 @use 'sass:map';
-@use 'sass:meta';
 @use '../internal/styles/tokens' as awsui;
 
 // T-shirt size keywords mirror the Box spacing scale (see spacing.scss).
@@ -85,33 +84,86 @@ $accent-radii: (
 // stylesheet source order. Winning here preserves the guaranteed background/foreground color
 // contrast of the accent pair. Descendants (nested Box, Icon) inherit this color.
 //
-// Token variables are looked up dynamically from the tokens module, so adding a color only
-// requires extending `$accent-colors`.
+// Keep literal token references in this map so the style build can discover every token and emit
+// its mode-specific custom property declarations.
 $accent-colors: (
-  'red',
-  'yellow',
-  'indigo',
-  'green',
-  'orange',
-  'purple',
-  'mint',
-  'lime',
-  'grey',
-  'teal',
-  'cyan',
-  'blue',
-  'violet',
-  'fuchsia',
-  'magenta',
-  'pink',
-  'rose',
-  'amber'
+  'red': (
+    background: awsui.$color-background-accent-red,
+    foreground: awsui.$color-text-accent-red,
+  ),
+  'yellow': (
+    background: awsui.$color-background-accent-yellow,
+    foreground: awsui.$color-text-accent-yellow,
+  ),
+  'indigo': (
+    background: awsui.$color-background-accent-indigo,
+    foreground: awsui.$color-text-accent-indigo,
+  ),
+  'green': (
+    background: awsui.$color-background-accent-green,
+    foreground: awsui.$color-text-accent-green,
+  ),
+  'orange': (
+    background: awsui.$color-background-accent-orange,
+    foreground: awsui.$color-text-accent-orange,
+  ),
+  'purple': (
+    background: awsui.$color-background-accent-purple,
+    foreground: awsui.$color-text-accent-purple,
+  ),
+  'mint': (
+    background: awsui.$color-background-accent-mint,
+    foreground: awsui.$color-text-accent-mint,
+  ),
+  'lime': (
+    background: awsui.$color-background-accent-lime,
+    foreground: awsui.$color-text-accent-lime,
+  ),
+  'grey': (
+    background: awsui.$color-background-accent-grey,
+    foreground: awsui.$color-text-accent-grey,
+  ),
+  'teal': (
+    background: awsui.$color-background-accent-teal,
+    foreground: awsui.$color-text-accent-teal,
+  ),
+  'cyan': (
+    background: awsui.$color-background-accent-cyan,
+    foreground: awsui.$color-text-accent-cyan,
+  ),
+  'blue': (
+    background: awsui.$color-background-accent-blue,
+    foreground: awsui.$color-text-accent-blue,
+  ),
+  'violet': (
+    background: awsui.$color-background-accent-violet,
+    foreground: awsui.$color-text-accent-violet,
+  ),
+  'fuchsia': (
+    background: awsui.$color-background-accent-fuchsia,
+    foreground: awsui.$color-text-accent-fuchsia,
+  ),
+  'magenta': (
+    background: awsui.$color-background-accent-magenta,
+    foreground: awsui.$color-text-accent-magenta,
+  ),
+  'pink': (
+    background: awsui.$color-background-accent-pink,
+    foreground: awsui.$color-text-accent-pink,
+  ),
+  'rose': (
+    background: awsui.$color-background-accent-rose,
+    foreground: awsui.$color-text-accent-rose,
+  ),
+  'amber': (
+    background: awsui.$color-background-accent-amber,
+    foreground: awsui.$color-text-accent-amber,
+  ),
 );
-$tokens: meta.module-variables('awsui');
 
-@each $accent in $accent-colors {
+@each $accent, $colors in $accent-colors {
   .box.visual-accent.visual-accent-#{$accent} {
-    background-color: map.get($tokens, 'color-background-accent-#{$accent}');
-    color: map.get($tokens, 'color-text-accent-#{$accent}');
+    background-color: map.get($colors, 'background');
+    color: map.get($colors, 'foreground');
   }
 }
diff --git a/style-dictionary/utils/index.ts b/style-dictionary/utils/index.ts
index f60b6f45de..ae54b351c8 100644
--- a/style-dictionary/utils/index.ts
+++ b/style-dictionary/utils/index.ts
@@ -88,6 +88,26 @@ export const expandReferenceTokens = (referenceTokens: ReferenceTokens) => {
   return { ...referenceTokens, color: expandedColor };
 };
 
+/**
+ * Converts a hex color primitive (e.g. '#fa6f00') into an `rgba()` string with the given alpha.
+ * Lets semantic tokens derive translucent values straight from the color palette instead of
+ * hardcoding the individual rgb channel numbers.
+ */
+export const hexToRgba = (hex: string, alpha: number): string => {
+  const normalized = hex.replace('#', '');
+  const expanded =
+    normalized.length === 3
+      ? normalized
+          .split('')
+          .map(char => char + char)
+          .join('')
+      : normalized;
+  const r = parseInt(expanded.slice(0, 2), 16);
+  const g = parseInt(expanded.slice(2, 4), 16);
+  const b = parseInt(expanded.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
 export const pickState = (tokenCategory: TokenCategory<string, Record<string, string>>, state: string) => {
   return Object.fromEntries(
     Object.entries(tokenCategory).map(([token, value]) => {
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index c564718031..f33f965532 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { expandColorDictionary } from '../utils/index.js';
+import { paletteTokens } from '../core/color-palette.js';
+import { expandColorDictionary, hexToRgba } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
 
 const tokens: StyleDictionary.ColorsDictionary = {
@@ -390,9 +391,9 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundAccentViolet: { light: '{colorViolet100}', dark: 'rgba(133, 117, 255, 0.2)' },
   colorBackgroundAccentFuchsia: { light: '{colorFuchsia100}', dark: 'rgba(228, 51, 255, 0.2)' },
   colorBackgroundAccentMagenta: { light: '{colorMagenta100}', dark: 'rgba(255, 26, 224, 0.2)' },
-  colorBackgroundAccentPink: { light: '{colorPink100}', dark: 'rgba(255, 51, 153, 0.2)' },
-  colorBackgroundAccentRose: { light: '{colorRose100}', dark: 'rgba(255, 56, 106, 0.2)' },
-  colorBackgroundAccentAmber: { light: '{colorAmber100}', dark: 'rgba(250, 111, 0, 0.2)' },
+  colorBackgroundAccentPink: { light: '{colorPink100}', dark: hexToRgba(paletteTokens.colorPink500!, 0.2) },
+  colorBackgroundAccentRose: { light: '{colorRose100}', dark: hexToRgba(paletteTokens.colorRose500!, 0.2) },
+  colorBackgroundAccentAmber: { light: '{colorAmber100}', dark: hexToRgba(paletteTokens.colorAmber500!, 0.2) },
   colorTextAccentRed: { light: '{colorError800}', dark: '{colorError400}' },
   colorTextAccentYellow: { light: '{colorWarning900}', dark: '{colorWarning400}' },
   colorTextAccentIndigo: { light: '{colorInfo800}', dark: '{colorInfo400}' },

From e655361b3d39ff108e08694bc6e671a356364cc3 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 20 Jul 2026 22:49:47 +0200
Subject: [PATCH 02/12] chore: Bring the hexToRgba

---
 style-dictionary/utils/index.ts           | 20 --------------------
 style-dictionary/visual-refresh/colors.ts | 10 +++++++++-
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/style-dictionary/utils/index.ts b/style-dictionary/utils/index.ts
index ae54b351c8..f60b6f45de 100644
--- a/style-dictionary/utils/index.ts
+++ b/style-dictionary/utils/index.ts
@@ -88,26 +88,6 @@ export const expandReferenceTokens = (referenceTokens: ReferenceTokens) => {
   return { ...referenceTokens, color: expandedColor };
 };
 
-/**
- * Converts a hex color primitive (e.g. '#fa6f00') into an `rgba()` string with the given alpha.
- * Lets semantic tokens derive translucent values straight from the color palette instead of
- * hardcoding the individual rgb channel numbers.
- */
-export const hexToRgba = (hex: string, alpha: number): string => {
-  const normalized = hex.replace('#', '');
-  const expanded =
-    normalized.length === 3
-      ? normalized
-          .split('')
-          .map(char => char + char)
-          .join('')
-      : normalized;
-  const r = parseInt(expanded.slice(0, 2), 16);
-  const g = parseInt(expanded.slice(2, 4), 16);
-  const b = parseInt(expanded.slice(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
-
 export const pickState = (tokenCategory: TokenCategory<string, Record<string, string>>, state: string) => {
   return Object.fromEntries(
     Object.entries(tokenCategory).map(([token, value]) => {
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index f33f965532..7bbaefefb1 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -1,9 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { paletteTokens } from '../core/color-palette.js';
-import { expandColorDictionary, hexToRgba } from '../utils/index.js';
+import { expandColorDictionary } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
 
+const hexToRgba = (hex: string, alpha: number): string => {
+  const normalized = hex.replace('#', '');
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
 const tokens: StyleDictionary.ColorsDictionary = {
   colorGreyOpaque10: 'rgba(0, 0, 0, 0.1)',
   colorGreyOpaque25: 'rgba(255, 255, 255, 0.25)',

From 2273965c571d1937d10929ed9ae49fe4faf41220 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 22 Jul 2026 10:21:04 +0200
Subject: [PATCH 03/12] chore: Refactor visual accent styles

---
 pages/box/visual-accent.page.tsx              |  35 ++-
 .../__snapshots__/themes.test.ts.snap         | 240 ++++++++++++++++++
 .../__snapshots__/documenter.test.ts.snap     |   4 -
 src/box/__tests__/box.test.tsx                |   1 -
 src/box/interfaces.ts                         |   4 -
 src/box/visual-accent.scss                    |  16 --
 style-dictionary/utils/token-names.ts         |   8 -
 .../visual-refresh/color-palette.ts           |   1 +
 style-dictionary/visual-refresh/colors.ts     |  85 ++++---
 .../visual-refresh/metadata/colors.ts         |  40 ---
 10 files changed, 313 insertions(+), 121 deletions(-)

diff --git a/pages/box/visual-accent.page.tsx b/pages/box/visual-accent.page.tsx
index fca512442b..906f75144c 100644
--- a/pages/box/visual-accent.page.tsx
+++ b/pages/box/visual-accent.page.tsx
@@ -15,29 +15,28 @@ import ScreenshotArea from '../utils/screenshot-area';
 // ─── Data ──────────────────────────────────────────────────────────────────────
 
 const ALL_VARIANTS: BoxProps.VisualAccent.Color[] = [
-  'red',
-  'yellow',
+  'grey',
   'indigo',
+  'red',
   'green',
-  'orange',
-  'purple',
-  'mint',
-  'lime',
-  'grey',
+  'yellow',
+
+  'amber',
   'teal',
-  'cyan',
+  'purple',
   'blue',
-  'violet',
-  'fuchsia',
   'magenta',
+  'lime',
+
+  'violet',
+
   'pink',
-  'rose',
-  'amber',
+  'orange',
 ];
 
 const BOX_VARIANTS: { variant: BoxProps['variant']; label: string; content: string }[] = [
-  { variant: 'h3', label: 'h3', content: 'Heading 3' },
-  { variant: 'p', label: 'p', content: 'Body paragraph text' },
+  { variant: 'h3', label: 'h3', content: 'Heading' },
+  { variant: 'p', label: 'p', content: 'Paragraph' },
 ];
 
 const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.VisualAccent.Color }[] = [
@@ -46,7 +45,7 @@ const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.V
   { id: 'network', content: 'Network configuration', icon: 'globe', color: 'grey' },
   { id: 'multi-session', content: 'Multi-session data', icon: 'multiscreen', color: 'purple' },
   { id: 'alert', content: 'Alert center', icon: 'security', color: 'red' },
-  { id: 'communication', content: 'Communication', icon: 'contact', color: 'mint' },
+  { id: 'communication', content: 'Communication', icon: 'contact', color: 'teal' },
 ];
 
 // ─── Page ──────────────────────────────────────────────────────────────────────
@@ -114,7 +113,7 @@ export default function StyleBoxPage() {
                 label: 'Components',
                 value: (
                   <Box
-                    visualAccent={{ color: 'mint' }}
+                    visualAccent={{ color: 'teal' }}
                     padding={{ horizontal: 'xxxs', vertical: 'xxxs' }}
                     margin={{ top: 'xxs' }}
                   >
@@ -126,7 +125,7 @@ export default function StyleBoxPage() {
                 label: 'Patterns',
                 value: (
                   <Box
-                    visualAccent={{ color: 'mint' }}
+                    visualAccent={{ color: 'teal' }}
                     padding={{ horizontal: 'xxxs', vertical: 'xxxs' }}
                     margin={{ top: 'xxs' }}
                   >
@@ -138,7 +137,7 @@ export default function StyleBoxPage() {
                 label: 'Demos',
                 value: (
                   <Box
-                    visualAccent={{ color: 'mint' }}
+                    visualAccent={{ color: 'teal' }}
                     padding={{ horizontal: 'xxxs', vertical: 'xxxs' }}
                     margin={{ top: 'xxs' }}
                   >
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index b0892e0e9b..d58fa04cb6 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -79,6 +79,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "rgba(255, 232, 189, 0.7)",
+  "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
+  "color-background-accent-green": "#d9ffd6",
+  "color-background-accent-grey": "#eaeded",
+  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-lime": "#ebffcc",
+  "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
+  "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
+  "color-background-accent-pink": "rgba(255, 224, 240, 0.7)",
+  "color-background-accent-purple": "rgba(242, 229, 255, 0.6)",
+  "color-background-accent-red": "#ffe0e0",
+  "color-background-accent-teal": "rgba(204, 255, 252, 0.7)",
+  "color-background-accent-violet": "rgba(232, 229, 255, 0.6)",
+  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -467,6 +481,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
+  "color-error-500": "#ff3d3d",
   "color-error-600": "#d13212",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -497,6 +512,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
+  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -549,6 +565,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#0073bb",
+  "color-text-accent-amber": "#9e3700",
+  "color-text-accent-blue": "#006ce0",
+  "color-text-accent-green": "#005c26",
+  "color-text-accent-grey": "#21252c",
+  "color-text-accent-indigo": "#003b8f",
+  "color-text-accent-lime": "#007000",
+  "color-text-accent-magenta": "#b2008f",
+  "color-text-accent-orange": "#a82700",
+  "color-text-accent-pink": "#bb005d",
+  "color-text-accent-purple": "#962eff",
+  "color-text-accent-red": "#990000",
+  "color-text-accent-teal": "#008077",
+  "color-text-accent-violet": "#6842ff",
+  "color-text-accent-yellow": "#906806",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -1025,6 +1055,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "rgba(250, 111, 0, 0.2)",
+  "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
+  "color-background-accent-grey": "#414750",
+  "color-background-accent-indigo": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
+  "color-background-accent-magenta": "rgba(255, 26, 224, 0.15)",
+  "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
+  "color-background-accent-pink": "rgba(255, 51, 153, 0.2)",
+  "color-background-accent-purple": "rgba(173, 92, 255, 0.2)",
+  "color-background-accent-red": "rgba(255, 61, 61, 0.2)",
+  "color-background-accent-teal": "rgba(0, 173, 162, 0.2)",
+  "color-background-accent-violet": "rgba(133, 117, 255, 0.2)",
+  "color-background-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-background-action-card-active": "#414750",
   "color-background-action-card-default": "#1a2029",
   "color-background-action-card-disabled": "#21252c",
@@ -1413,6 +1457,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
+  "color-error-500": "#ff3d3d",
   "color-error-600": "#d13212",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -1443,6 +1488,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#44b9d6",
+  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -1495,6 +1541,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#44b9d6",
+  "color-text-accent-amber": "#ffbb45",
+  "color-text-accent-blue": "#75cfff",
+  "color-text-accent-green": "#00e500",
+  "color-text-accent-grey": "#d5dbdb",
+  "color-text-accent-indigo": "#00a1c9",
+  "color-text-accent-lime": "#acff2e",
+  "color-text-accent-magenta": "#ff57e9",
+  "color-text-accent-orange": "#ff997a",
+  "color-text-accent-pink": "#ff99cc",
+  "color-text-accent-purple": "#d4a8ff",
+  "color-text-accent-red": "#ff5d64",
+  "color-text-accent-teal": "#00f5e4",
+  "color-text-accent-violet": "#b2a8ff",
+  "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -1971,6 +2031,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "rgba(255, 232, 189, 0.7)",
+  "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
+  "color-background-accent-green": "#d9ffd6",
+  "color-background-accent-grey": "#eaeded",
+  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-lime": "#ebffcc",
+  "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
+  "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
+  "color-background-accent-pink": "rgba(255, 224, 240, 0.7)",
+  "color-background-accent-purple": "rgba(242, 229, 255, 0.6)",
+  "color-background-accent-red": "#ffe0e0",
+  "color-background-accent-teal": "rgba(204, 255, 252, 0.7)",
+  "color-background-accent-violet": "rgba(232, 229, 255, 0.6)",
+  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -2359,6 +2433,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
+  "color-error-500": "#ff3d3d",
   "color-error-600": "#d13212",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -2389,6 +2464,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
+  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -2441,6 +2517,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#0073bb",
+  "color-text-accent-amber": "#9e3700",
+  "color-text-accent-blue": "#006ce0",
+  "color-text-accent-green": "#005c26",
+  "color-text-accent-grey": "#21252c",
+  "color-text-accent-indigo": "#003b8f",
+  "color-text-accent-lime": "#007000",
+  "color-text-accent-magenta": "#b2008f",
+  "color-text-accent-orange": "#a82700",
+  "color-text-accent-pink": "#bb005d",
+  "color-text-accent-purple": "#962eff",
+  "color-text-accent-red": "#990000",
+  "color-text-accent-teal": "#008077",
+  "color-text-accent-violet": "#6842ff",
+  "color-text-accent-yellow": "#906806",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -2917,6 +3007,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "rgba(255, 232, 189, 0.7)",
+  "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
+  "color-background-accent-green": "#d9ffd6",
+  "color-background-accent-grey": "#eaeded",
+  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-lime": "#ebffcc",
+  "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
+  "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
+  "color-background-accent-pink": "rgba(255, 224, 240, 0.7)",
+  "color-background-accent-purple": "rgba(242, 229, 255, 0.6)",
+  "color-background-accent-red": "#ffe0e0",
+  "color-background-accent-teal": "rgba(204, 255, 252, 0.7)",
+  "color-background-accent-violet": "rgba(232, 229, 255, 0.6)",
+  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -3305,6 +3409,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
+  "color-error-500": "#ff3d3d",
   "color-error-600": "#d13212",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -3335,6 +3440,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
+  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -3387,6 +3493,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#0073bb",
+  "color-text-accent-amber": "#9e3700",
+  "color-text-accent-blue": "#006ce0",
+  "color-text-accent-green": "#005c26",
+  "color-text-accent-grey": "#21252c",
+  "color-text-accent-indigo": "#003b8f",
+  "color-text-accent-lime": "#007000",
+  "color-text-accent-magenta": "#b2008f",
+  "color-text-accent-orange": "#a82700",
+  "color-text-accent-pink": "#bb005d",
+  "color-text-accent-purple": "#962eff",
+  "color-text-accent-red": "#990000",
+  "color-text-accent-teal": "#008077",
+  "color-text-accent-violet": "#6842ff",
+  "color-text-accent-yellow": "#906806",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -3863,6 +3983,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "rgba(255, 232, 189, 0.7)",
+  "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
+  "color-background-accent-green": "#d9ffd6",
+  "color-background-accent-grey": "#ebebf0",
+  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-lime": "#ebffcc",
+  "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
+  "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
+  "color-background-accent-pink": "rgba(255, 224, 240, 0.7)",
+  "color-background-accent-purple": "rgba(242, 229, 255, 0.6)",
+  "color-background-accent-red": "#ffe0e0",
+  "color-background-accent-teal": "rgba(204, 255, 252, 0.7)",
+  "color-background-accent-violet": "rgba(232, 229, 255, 0.6)",
+  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#ffffff",
@@ -4251,6 +4385,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
+  "color-error-500": "#ff3d3d",
   "color-error-600": "#db0000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -4281,6 +4416,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#006ce0",
+  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -4333,6 +4469,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#006ce0",
+  "color-text-accent-amber": "#9e3700",
+  "color-text-accent-blue": "#006ce0",
+  "color-text-accent-green": "#005c26",
+  "color-text-accent-grey": "#1b232d",
+  "color-text-accent-indigo": "#003b8f",
+  "color-text-accent-lime": "#007000",
+  "color-text-accent-magenta": "#b2008f",
+  "color-text-accent-orange": "#a82700",
+  "color-text-accent-pink": "#bb005d",
+  "color-text-accent-purple": "#962eff",
+  "color-text-accent-red": "#990000",
+  "color-text-accent-teal": "#008077",
+  "color-text-accent-violet": "#6842ff",
+  "color-text-accent-yellow": "#855900",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -4809,6 +4959,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "rgba(255, 232, 189, 0.7)",
+  "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
+  "color-background-accent-green": "#d9ffd6",
+  "color-background-accent-grey": "#ebebf0",
+  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-lime": "#ebffcc",
+  "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
+  "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
+  "color-background-accent-pink": "rgba(255, 224, 240, 0.7)",
+  "color-background-accent-purple": "rgba(242, 229, 255, 0.6)",
+  "color-background-accent-red": "#ffe0e0",
+  "color-background-accent-teal": "rgba(204, 255, 252, 0.7)",
+  "color-background-accent-violet": "rgba(232, 229, 255, 0.6)",
+  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#ffffff",
@@ -5197,6 +5361,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
+  "color-error-500": "#ff3d3d",
   "color-error-600": "#db0000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -5227,6 +5392,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#006ce0",
+  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -5279,6 +5445,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#006ce0",
+  "color-text-accent-amber": "#9e3700",
+  "color-text-accent-blue": "#006ce0",
+  "color-text-accent-green": "#005c26",
+  "color-text-accent-grey": "#1b232d",
+  "color-text-accent-indigo": "#003b8f",
+  "color-text-accent-lime": "#007000",
+  "color-text-accent-magenta": "#b2008f",
+  "color-text-accent-orange": "#a82700",
+  "color-text-accent-pink": "#bb005d",
+  "color-text-accent-purple": "#962eff",
+  "color-text-accent-red": "#990000",
+  "color-text-accent-teal": "#008077",
+  "color-text-accent-violet": "#6842ff",
+  "color-text-accent-yellow": "#855900",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -5755,6 +5935,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "rgba(250, 111, 0, 0.2)",
+  "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
+  "color-background-accent-grey": "#333843",
+  "color-background-accent-indigo": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
+  "color-background-accent-magenta": "rgba(255, 26, 224, 0.15)",
+  "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
+  "color-background-accent-pink": "rgba(255, 51, 153, 0.2)",
+  "color-background-accent-purple": "rgba(173, 92, 255, 0.2)",
+  "color-background-accent-red": "rgba(255, 61, 61, 0.2)",
+  "color-background-accent-teal": "rgba(0, 173, 162, 0.2)",
+  "color-background-accent-violet": "rgba(133, 117, 255, 0.2)",
+  "color-background-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-background-action-card-active": "#333843",
   "color-background-action-card-default": "#161d26",
   "color-background-action-card-disabled": "#161d26",
@@ -6143,6 +6337,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
+  "color-error-500": "#ff3d3d",
   "color-error-600": "#db0000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -6173,6 +6368,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#42b4ff",
+  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -6225,6 +6421,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#42b4ff",
+  "color-text-accent-amber": "#ffbb45",
+  "color-text-accent-blue": "#75cfff",
+  "color-text-accent-green": "#00e500",
+  "color-text-accent-grey": "#dedee3",
+  "color-text-accent-indigo": "#42b4ff",
+  "color-text-accent-lime": "#acff2e",
+  "color-text-accent-magenta": "#ff57e9",
+  "color-text-accent-orange": "#ff997a",
+  "color-text-accent-pink": "#ff99cc",
+  "color-text-accent-purple": "#d4a8ff",
+  "color-text-accent-red": "#ff7a7a",
+  "color-text-accent-teal": "#00f5e4",
+  "color-text-accent-violet": "#b2a8ff",
+  "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -6701,6 +6911,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "rgba(250, 111, 0, 0.2)",
+  "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
+  "color-background-accent-grey": "#333843",
+  "color-background-accent-indigo": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
+  "color-background-accent-magenta": "rgba(255, 26, 224, 0.15)",
+  "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
+  "color-background-accent-pink": "rgba(255, 51, 153, 0.2)",
+  "color-background-accent-purple": "rgba(173, 92, 255, 0.2)",
+  "color-background-accent-red": "rgba(255, 61, 61, 0.2)",
+  "color-background-accent-teal": "rgba(0, 173, 162, 0.2)",
+  "color-background-accent-violet": "rgba(133, 117, 255, 0.2)",
+  "color-background-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-background-action-card-active": "#333843",
   "color-background-action-card-default": "#161d26",
   "color-background-action-card-disabled": "#161d26",
@@ -7089,6 +7313,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
+  "color-error-500": "#ff3d3d",
   "color-error-600": "#db0000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -7119,6 +7344,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#42b4ff",
+  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -7171,6 +7397,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#42b4ff",
+  "color-text-accent-amber": "#ffbb45",
+  "color-text-accent-blue": "#75cfff",
+  "color-text-accent-green": "#00e500",
+  "color-text-accent-grey": "#dedee3",
+  "color-text-accent-indigo": "#42b4ff",
+  "color-text-accent-lime": "#acff2e",
+  "color-text-accent-magenta": "#ff57e9",
+  "color-text-accent-orange": "#ff997a",
+  "color-text-accent-pink": "#ff99cc",
+  "color-text-accent-purple": "#d4a8ff",
+  "color-text-accent-red": "#ff7a7a",
+  "color-text-accent-teal": "#00f5e4",
+  "color-text-accent-violet": "#b2a8ff",
+  "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 65987a3dc6..8f1c23ddcb 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -5171,8 +5171,6 @@ Composes with existing Box props such as \`padding\` and \`margin\`.",
               "type": "union",
               "values": [
                 "blue",
-                "cyan",
-                "fuchsia",
                 "green",
                 "grey",
                 "indigo",
@@ -5185,8 +5183,6 @@ Composes with existing Box props such as \`padding\` and \`margin\`.",
                 "teal",
                 "violet",
                 "yellow",
-                "mint",
-                "rose",
                 "amber",
               ],
             },
diff --git a/src/box/__tests__/box.test.tsx b/src/box/__tests__/box.test.tsx
index 47d9a9bb8b..5117f998b2 100644
--- a/src/box/__tests__/box.test.tsx
+++ b/src/box/__tests__/box.test.tsx
@@ -199,7 +199,6 @@ describe('Box', () => {
         'green',
         'orange',
         'purple',
-        'mint',
         'lime',
         'grey',
       ];
diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts
index ce250a3604..ace15884a5 100644
--- a/src/box/interfaces.ts
+++ b/src/box/interfaces.ts
@@ -219,17 +219,13 @@ export namespace BoxProps {
       | 'green'
       | 'orange'
       | 'purple'
-      | 'mint'
       | 'lime'
       | 'grey'
       | 'teal'
-      | 'cyan'
       | 'blue'
       | 'violet'
-      | 'fuchsia'
       | 'magenta'
       | 'pink'
-      | 'rose'
       | 'amber';
     export type AspectRatio = 'auto' | 'equal';
     export type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full';
diff --git a/src/box/visual-accent.scss b/src/box/visual-accent.scss
index dca9e66cc7..2ed6c4637e 100644
--- a/src/box/visual-accent.scss
+++ b/src/box/visual-accent.scss
@@ -111,10 +111,6 @@ $accent-colors: (
     background: awsui.$color-background-accent-purple,
     foreground: awsui.$color-text-accent-purple,
   ),
-  'mint': (
-    background: awsui.$color-background-accent-mint,
-    foreground: awsui.$color-text-accent-mint,
-  ),
   'lime': (
     background: awsui.$color-background-accent-lime,
     foreground: awsui.$color-text-accent-lime,
@@ -127,10 +123,6 @@ $accent-colors: (
     background: awsui.$color-background-accent-teal,
     foreground: awsui.$color-text-accent-teal,
   ),
-  'cyan': (
-    background: awsui.$color-background-accent-cyan,
-    foreground: awsui.$color-text-accent-cyan,
-  ),
   'blue': (
     background: awsui.$color-background-accent-blue,
     foreground: awsui.$color-text-accent-blue,
@@ -139,10 +131,6 @@ $accent-colors: (
     background: awsui.$color-background-accent-violet,
     foreground: awsui.$color-text-accent-violet,
   ),
-  'fuchsia': (
-    background: awsui.$color-background-accent-fuchsia,
-    foreground: awsui.$color-text-accent-fuchsia,
-  ),
   'magenta': (
     background: awsui.$color-background-accent-magenta,
     foreground: awsui.$color-text-accent-magenta,
@@ -151,10 +139,6 @@ $accent-colors: (
     background: awsui.$color-background-accent-pink,
     foreground: awsui.$color-text-accent-pink,
   ),
-  'rose': (
-    background: awsui.$color-background-accent-rose,
-    foreground: awsui.$color-text-accent-rose,
-  ),
   'amber': (
     background: awsui.$color-background-accent-amber,
     foreground: awsui.$color-text-accent-amber,
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 421df0f115..28e699be99 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -615,17 +615,13 @@ export type ColorsTokenName =
   | 'colorBackgroundAccentGreen'
   | 'colorBackgroundAccentOrange'
   | 'colorBackgroundAccentPurple'
-  | 'colorBackgroundAccentMint'
   | 'colorBackgroundAccentLime'
   | 'colorBackgroundAccentGrey'
   | 'colorBackgroundAccentTeal'
-  | 'colorBackgroundAccentCyan'
   | 'colorBackgroundAccentBlue'
   | 'colorBackgroundAccentViolet'
-  | 'colorBackgroundAccentFuchsia'
   | 'colorBackgroundAccentMagenta'
   | 'colorBackgroundAccentPink'
-  | 'colorBackgroundAccentRose'
   | 'colorBackgroundAccentAmber'
   | 'colorBackgroundPopover'
   | 'colorBackgroundProgressBarValueDefault'
@@ -757,17 +753,13 @@ export type ColorsTokenName =
   | 'colorTextAccentGreen'
   | 'colorTextAccentOrange'
   | 'colorTextAccentPurple'
-  | 'colorTextAccentMint'
   | 'colorTextAccentLime'
   | 'colorTextAccentGrey'
   | 'colorTextAccentTeal'
-  | 'colorTextAccentCyan'
   | 'colorTextAccentBlue'
   | 'colorTextAccentViolet'
-  | 'colorTextAccentFuchsia'
   | 'colorTextAccentMagenta'
   | 'colorTextAccentPink'
-  | 'colorTextAccentRose'
   | 'colorTextAccentAmber'
   | 'colorTextBodyDefault'
   | 'colorTextBodySecondary'
diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index d6a4dc1a4b..46bec8051b 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -199,6 +199,7 @@ const referenceTokens: ReferenceTokens = {
       50: brand.colorRed50,
       100: brand.colorRed100,
       400: brand.colorRed400,
+      500: brand.colorRed500,
       600: brand.colorRed600,
       800: brand.colorRed800,
       900: brand.colorRed900,
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 7bbaefefb1..91145a63d8 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -384,42 +384,67 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundCodeView: { light: '#f8f8f8', dark: '#282c34' },
 
   // ── Visual accent ───────────────────────────────────
-  colorBackgroundAccentRed: { light: '{colorError100}', dark: 'rgba(255, 61, 61, 0.2)' },
-  colorBackgroundAccentYellow: { light: '{colorWarning100}', dark: 'rgba(251, 211, 50, 0.2)' },
-  colorBackgroundAccentIndigo: { light: '{colorInfo100}', dark: 'rgba(0, 153, 255, 0.2)' },
-  colorBackgroundAccentGreen: { light: '{colorSuccess100}', dark: 'rgba(43, 181, 52, 0.2)' },
-  colorBackgroundAccentOrange: { light: '{colorOrange100}', dark: 'rgba(255, 75, 20, 0.2)' },
-  colorBackgroundAccentPurple: { light: '{colorPurple100}', dark: 'rgba(173, 92, 255, 0.2)' },
-  colorBackgroundAccentMint: { light: '{colorMint100}', dark: 'rgba(0, 189, 107, 0.2)' },
-  colorBackgroundAccentLime: { light: '{colorLime100}', dark: 'rgba(49, 184, 0, 0.2)' },
+  colorBackgroundAccentRed: { light: paletteTokens.colorRed100!, dark: hexToRgba(paletteTokens.colorRed500!, 0.2) },
+  colorBackgroundAccentYellow: {
+    light: paletteTokens.colorYellow100!,
+    dark: hexToRgba(paletteTokens.colorYellow500!, 0.2),
+  },
+  colorBackgroundAccentIndigo: {
+    light: paletteTokens.colorBlue100!,
+    dark: hexToRgba(paletteTokens.colorBlue500!, 0.2),
+  },
+  colorBackgroundAccentGreen: {
+    light: paletteTokens.colorGreen100!,
+    dark: hexToRgba(paletteTokens.colorGreen500!, 0.2),
+  },
+  colorBackgroundAccentOrange: {
+    light: hexToRgba(paletteTokens.colorOrange100!, 0.6),
+    dark: hexToRgba(paletteTokens.colorOrange500!, 0.2),
+  },
+  colorBackgroundAccentPurple: {
+    light: hexToRgba(paletteTokens.colorPurple100!, 0.6),
+    dark: hexToRgba(paletteTokens.colorPurple500!, 0.2),
+  },
+  colorBackgroundAccentLime: { light: '{colorLime100}', dark: hexToRgba(paletteTokens.colorLime500!, 0.2) },
   colorBackgroundAccentGrey: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
-  colorBackgroundAccentTeal: { light: '{colorTeal100}', dark: 'rgba(0, 173, 162, 0.2)' },
-  colorBackgroundAccentCyan: { light: '{colorCyan100}', dark: 'rgba(0, 164, 189, 0.2)' },
-  colorBackgroundAccentBlue: { light: '{colorInfo100}', dark: 'rgba(0, 153, 255, 0.2)' },
-  colorBackgroundAccentViolet: { light: '{colorViolet100}', dark: 'rgba(133, 117, 255, 0.2)' },
-  colorBackgroundAccentFuchsia: { light: '{colorFuchsia100}', dark: 'rgba(228, 51, 255, 0.2)' },
-  colorBackgroundAccentMagenta: { light: '{colorMagenta100}', dark: 'rgba(255, 26, 224, 0.2)' },
-  colorBackgroundAccentPink: { light: '{colorPink100}', dark: hexToRgba(paletteTokens.colorPink500!, 0.2) },
-  colorBackgroundAccentRose: { light: '{colorRose100}', dark: hexToRgba(paletteTokens.colorRose500!, 0.2) },
-  colorBackgroundAccentAmber: { light: '{colorAmber100}', dark: hexToRgba(paletteTokens.colorAmber500!, 0.2) },
+  colorBackgroundAccentTeal: {
+    light: hexToRgba(paletteTokens.colorTeal100!, 0.7),
+    dark: hexToRgba(paletteTokens.colorTeal500!, 0.2),
+  },
+  colorBackgroundAccentBlue: {
+    light: hexToRgba(paletteTokens.colorBlue100!, 0.6),
+    dark: hexToRgba(paletteTokens.colorBlue500!, 0.2),
+  },
+  colorBackgroundAccentViolet: {
+    light: hexToRgba(paletteTokens.colorViolet100!, 0.6),
+    dark: hexToRgba(paletteTokens.colorViolet500!, 0.2),
+  },
+  colorBackgroundAccentMagenta: {
+    light: hexToRgba(paletteTokens.colorMagenta100!, 0.6),
+    dark: hexToRgba(paletteTokens.colorMagenta500!, 0.15),
+  },
+  colorBackgroundAccentPink: {
+    light: hexToRgba(paletteTokens.colorPink100!, 0.7),
+    dark: hexToRgba(paletteTokens.colorPink500!, 0.2),
+  },
+  colorBackgroundAccentAmber: {
+    light: hexToRgba(paletteTokens.colorAmber100!, 0.7),
+    dark: hexToRgba(paletteTokens.colorAmber500!, 0.2),
+  },
   colorTextAccentRed: { light: '{colorError800}', dark: '{colorError400}' },
   colorTextAccentYellow: { light: '{colorWarning900}', dark: '{colorWarning400}' },
   colorTextAccentIndigo: { light: '{colorInfo800}', dark: '{colorInfo400}' },
   colorTextAccentGreen: { light: '{colorSuccess800}', dark: '{colorSuccess400}' },
-  colorTextAccentOrange: { light: '{colorOrange800}', dark: '{colorOrange400}' },
-  colorTextAccentPurple: { light: '{colorPurple800}', dark: '{colorPurple400}' },
-  colorTextAccentMint: { light: '{colorMint800}', dark: '{colorMint400}' },
-  colorTextAccentLime: { light: '{colorLime800}', dark: '{colorLime400}' },
+  colorTextAccentOrange: { light: paletteTokens.colorOrange700!, dark: paletteTokens.colorOrange300! },
+  colorTextAccentPurple: { light: paletteTokens.colorPurple600!, dark: paletteTokens.colorPurple300! },
+  colorTextAccentLime: { light: paletteTokens.colorLime700!, dark: paletteTokens.colorLime300! },
   colorTextAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral300}' },
-  colorTextAccentTeal: { light: '{colorTeal800}', dark: '{colorTeal400}' },
-  colorTextAccentCyan: { light: '{colorCyan800}', dark: '{colorCyan400}' },
-  colorTextAccentBlue: { light: '{colorInfo800}', dark: '{colorInfo400}' },
-  colorTextAccentViolet: { light: '{colorViolet800}', dark: '{colorViolet400}' },
-  colorTextAccentFuchsia: { light: '{colorFuchsia800}', dark: '{colorFuchsia400}' },
-  colorTextAccentMagenta: { light: '{colorMagenta800}', dark: '{colorMagenta400}' },
-  colorTextAccentPink: { light: '{colorPink800}', dark: '{colorPink400}' },
-  colorTextAccentRose: { light: '{colorRose800}', dark: '{colorRose400}' },
-  colorTextAccentAmber: { light: '{colorAmber800}', dark: '{colorAmber400}' },
+  colorTextAccentTeal: { light: paletteTokens.colorTeal600!, dark: paletteTokens.colorTeal300! },
+  colorTextAccentBlue: { light: paletteTokens.colorBlue600!, dark: paletteTokens.colorBlue300! },
+  colorTextAccentViolet: { light: paletteTokens.colorViolet600!, dark: paletteTokens.colorViolet300! },
+  colorTextAccentMagenta: { light: paletteTokens.colorMagenta700!, dark: paletteTokens.colorMagenta400! },
+  colorTextAccentPink: { light: paletteTokens.colorPink700!, dark: paletteTokens.colorPink300! },
+  colorTextAccentAmber: { light: paletteTokens.colorAmber700!, dark: paletteTokens.colorAmber300! },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index ad8097e63c..2616439af7 100644
--- a/style-dictionary/visual-refresh/metadata/colors.ts
+++ b/style-dictionary/visual-refresh/metadata/colors.ts
@@ -311,11 +311,6 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentMint: {
-    description: 'The background color of the mint accent in the Box `awsui-accent` variant.',
-    public: false,
-    themeable: false,
-  },
   colorBackgroundAccentLime: {
     description: 'The background color of the lime accent in the Box `awsui-accent` variant.',
     public: false,
@@ -331,11 +326,6 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentCyan: {
-    description: 'The background color of the cyan accent in the Box `awsui-accent` variant.',
-    public: false,
-    themeable: false,
-  },
   colorBackgroundAccentBlue: {
     description: 'The background color of the blue accent in the Box `awsui-accent` variant.',
     public: false,
@@ -346,11 +336,6 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentFuchsia: {
-    description: 'The background color of the fuchsia accent in the Box `awsui-accent` variant.',
-    public: false,
-    themeable: false,
-  },
   colorBackgroundAccentMagenta: {
     description: 'The background color of the magenta accent in the Box `awsui-accent` variant.',
     public: false,
@@ -361,11 +346,6 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentRose: {
-    description: 'The background color of the rose accent in the Box `awsui-accent` variant.',
-    public: false,
-    themeable: false,
-  },
   colorBackgroundAccentAmber: {
     description: 'The background color of the amber accent in the Box `awsui-accent` variant.',
     public: false,
@@ -401,11 +381,6 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: false,
     themeable: false,
   },
-  colorTextAccentMint: {
-    description: 'The content color of the mint accent in the Box `awsui-accent` variant.',
-    public: false,
-    themeable: false,
-  },
   colorTextAccentLime: {
     description: 'The content color of the lime accent in the Box `awsui-accent` variant.',
     public: false,
@@ -421,11 +396,6 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: false,
     themeable: false,
   },
-  colorTextAccentCyan: {
-    description: 'The content color of the cyan accent in the Box `awsui-accent` variant.',
-    public: false,
-    themeable: false,
-  },
   colorTextAccentBlue: {
     description: 'The content color of the blue accent in the Box `awsui-accent` variant.',
     public: false,
@@ -436,11 +406,6 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: false,
     themeable: false,
   },
-  colorTextAccentFuchsia: {
-    description: 'The content color of the fuchsia accent in the Box `awsui-accent` variant.',
-    public: false,
-    themeable: false,
-  },
   colorTextAccentMagenta: {
     description: 'The content color of the magenta accent in the Box `awsui-accent` variant.',
     public: false,
@@ -451,11 +416,6 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: false,
     themeable: false,
   },
-  colorTextAccentRose: {
-    description: 'The content color of the rose accent in the Box `awsui-accent` variant.',
-    public: false,
-    themeable: false,
-  },
   colorTextAccentAmber: {
     description: 'The content color of the amber accent in the Box `awsui-accent` variant.',
     public: false,

From 604d0612fc29de058b626653bf529fa0e070b615 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 22 Jul 2026 10:31:58 +0200
Subject: [PATCH 04/12] chore: Remove unnecessary reference token

---
 style-dictionary/visual-refresh/color-palette.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index 46bec8051b..d6a4dc1a4b 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -199,7 +199,6 @@ const referenceTokens: ReferenceTokens = {
       50: brand.colorRed50,
       100: brand.colorRed100,
       400: brand.colorRed400,
-      500: brand.colorRed500,
       600: brand.colorRed600,
       800: brand.colorRed800,
       900: brand.colorRed900,

From 0f8f344446cef212d4a2c4ee38845989f342ea6f Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 22 Jul 2026 14:05:51 +0200
Subject: [PATCH 05/12] chore: Update accent indigo and remove error-500 color
 tokens

---
 .../__snapshots__/themes.test.ts.snap         | 24 +++++----------
 style-dictionary/one-theme/colors.ts          | 11 +++----
 style-dictionary/utils/index.ts               | 13 +++++++++
 style-dictionary/visual-refresh/colors.ts     | 29 ++++++++++---------
 4 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index d58fa04cb6..cde617f745 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -83,7 +83,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
   "color-background-accent-green": "#d9ffd6",
   "color-background-accent-grey": "#eaeded",
-  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-indigo": "#dbe4ff",
   "color-background-accent-lime": "#ebffcc",
   "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
   "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
@@ -481,7 +481,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
-  "color-error-500": "#ff3d3d",
   "color-error-600": "#d13212",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -1059,7 +1058,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
   "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
   "color-background-accent-grey": "#414750",
-  "color-background-accent-indigo": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-indigo": "rgba(92, 127, 255, 0.2)",
   "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
   "color-background-accent-magenta": "rgba(255, 26, 224, 0.15)",
   "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
@@ -1457,7 +1456,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
-  "color-error-500": "#ff3d3d",
   "color-error-600": "#d13212",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -2035,7 +2033,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
   "color-background-accent-green": "#d9ffd6",
   "color-background-accent-grey": "#eaeded",
-  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-indigo": "#dbe4ff",
   "color-background-accent-lime": "#ebffcc",
   "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
   "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
@@ -2433,7 +2431,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
-  "color-error-500": "#ff3d3d",
   "color-error-600": "#d13212",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -3011,7 +3008,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
   "color-background-accent-green": "#d9ffd6",
   "color-background-accent-grey": "#eaeded",
-  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-indigo": "#dbe4ff",
   "color-background-accent-lime": "#ebffcc",
   "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
   "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
@@ -3409,7 +3406,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
-  "color-error-500": "#ff3d3d",
   "color-error-600": "#d13212",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -3987,7 +3983,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
   "color-background-accent-green": "#d9ffd6",
   "color-background-accent-grey": "#ebebf0",
-  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-indigo": "#dbe4ff",
   "color-background-accent-lime": "#ebffcc",
   "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
   "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
@@ -4385,7 +4381,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
-  "color-error-500": "#ff3d3d",
   "color-error-600": "#db0000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -4963,7 +4958,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
   "color-background-accent-green": "#d9ffd6",
   "color-background-accent-grey": "#ebebf0",
-  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-indigo": "#dbe4ff",
   "color-background-accent-lime": "#ebffcc",
   "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
   "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
@@ -5361,7 +5356,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
-  "color-error-500": "#ff3d3d",
   "color-error-600": "#db0000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -5939,7 +5933,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
   "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
   "color-background-accent-grey": "#333843",
-  "color-background-accent-indigo": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-indigo": "rgba(92, 127, 255, 0.2)",
   "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
   "color-background-accent-magenta": "rgba(255, 26, 224, 0.15)",
   "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
@@ -6337,7 +6331,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
-  "color-error-500": "#ff3d3d",
   "color-error-600": "#db0000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
@@ -6915,7 +6908,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
   "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
   "color-background-accent-grey": "#333843",
-  "color-background-accent-indigo": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-indigo": "rgba(92, 127, 255, 0.2)",
   "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
   "color-background-accent-magenta": "rgba(255, 26, 224, 0.15)",
   "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
@@ -7313,7 +7306,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
-  "color-error-500": "#ff3d3d",
   "color-error-600": "#db0000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts
index 7b37cb9316..445d2009a0 100644
--- a/style-dictionary/one-theme/colors.ts
+++ b/style-dictionary/one-theme/colors.ts
@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import merge from 'lodash/merge.js';
 
-import { expandColorDictionary } from '../utils/index.js';
+import { paletteTokens } from '../core/color-palette.js';
+import { expandColorDictionary, hexToRgba } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
 import { tokens as parentTokens } from '../visual-refresh/colors.js';
 
@@ -130,10 +131,10 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundProgressBarValueDefault: { light: '{colorPrimary600}', dark: '{colorPrimary500}' },
 
   // ── Badge ─────────────────────────────────────────────────────────
-  colorBackgroundBadgeGreen: { light: '{colorSuccess100}', dark: 'rgba(43, 181, 52, 0.2)' },
-  colorBackgroundBadgeBlue: { light: '{colorInfo100}', dark: 'rgba(92, 127, 255, 0.2)' },
-  colorBackgroundBadgeRed: { light: '{colorError100}', dark: 'rgba(255, 61, 61, 0.2)' },
-  colorBackgroundBadgeYellow: { light: '{colorWarning100}', dark: 'rgba(251, 211, 50, 0.2)' },
+  colorBackgroundBadgeGreen: { light: '{colorSuccess100}', dark: hexToRgba(paletteTokens.colorGreen500!, 0.2) },
+  colorBackgroundBadgeBlue: { light: '{colorInfo100}', dark: hexToRgba(paletteTokens.colorIndigo500!, 0.2) },
+  colorBackgroundBadgeRed: { light: '{colorError100}', dark: hexToRgba(paletteTokens.colorRed500!, 0.2) },
+  colorBackgroundBadgeYellow: { light: '{colorWarning100}', dark: hexToRgba(paletteTokens.colorYellow500!, 0.2) },
   colorBackgroundBadgeGrey: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
   colorTextNotificationDefault: { light: '{colorNeutral100}', dark: '{colorNeutral100}' },
 
diff --git a/style-dictionary/utils/index.ts b/style-dictionary/utils/index.ts
index f60b6f45de..a12ae468b2 100644
--- a/style-dictionary/utils/index.ts
+++ b/style-dictionary/utils/index.ts
@@ -95,3 +95,16 @@ export const pickState = (tokenCategory: TokenCategory<string, Record<string, st
     })
   );
 };
+
+/**
+ * Converts a 6-digit hex color string and an alpha value to an rgba() CSS string.
+ * @param hex - A 6-digit hex color (with or without leading '#').
+ * @param alpha - Opacity value between 0 and 1.
+ */
+export const hexToRgba = (hex: string, alpha: number): string => {
+  const normalized = hex.replace('#', '');
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 91145a63d8..e308a2c2aa 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -1,17 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { paletteTokens } from '../core/color-palette.js';
-import { expandColorDictionary } from '../utils/index.js';
+import { expandColorDictionary, hexToRgba } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
 
-const hexToRgba = (hex: string, alpha: number): string => {
-  const normalized = hex.replace('#', '');
-  const r = parseInt(normalized.slice(0, 2), 16);
-  const g = parseInt(normalized.slice(2, 4), 16);
-  const b = parseInt(normalized.slice(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
-
 const tokens: StyleDictionary.ColorsDictionary = {
   colorGreyOpaque10: 'rgba(0, 0, 0, 0.1)',
   colorGreyOpaque25: 'rgba(255, 255, 255, 0.25)',
@@ -384,14 +376,17 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundCodeView: { light: '#f8f8f8', dark: '#282c34' },
 
   // ── Visual accent ───────────────────────────────────
-  colorBackgroundAccentRed: { light: paletteTokens.colorRed100!, dark: hexToRgba(paletteTokens.colorRed500!, 0.2) },
+  colorBackgroundAccentRed: {
+    light: paletteTokens.colorRed100!,
+    dark: hexToRgba(paletteTokens.colorRed500!, 0.2),
+  },
   colorBackgroundAccentYellow: {
     light: paletteTokens.colorYellow100!,
     dark: hexToRgba(paletteTokens.colorYellow500!, 0.2),
   },
   colorBackgroundAccentIndigo: {
-    light: paletteTokens.colorBlue100!,
-    dark: hexToRgba(paletteTokens.colorBlue500!, 0.2),
+    light: paletteTokens.colorIndigo100!,
+    dark: hexToRgba(paletteTokens.colorIndigo500!, 0.2),
   },
   colorBackgroundAccentGreen: {
     light: paletteTokens.colorGreen100!,
@@ -405,8 +400,14 @@ const tokens: StyleDictionary.ColorsDictionary = {
     light: hexToRgba(paletteTokens.colorPurple100!, 0.6),
     dark: hexToRgba(paletteTokens.colorPurple500!, 0.2),
   },
-  colorBackgroundAccentLime: { light: '{colorLime100}', dark: hexToRgba(paletteTokens.colorLime500!, 0.2) },
-  colorBackgroundAccentGrey: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
+  colorBackgroundAccentLime: {
+    light: '{colorLime100}',
+    dark: hexToRgba(paletteTokens.colorLime500!, 0.2),
+  },
+  colorBackgroundAccentGrey: {
+    light: '{colorNeutral250}',
+    dark: '{colorNeutral700}',
+  },
   colorBackgroundAccentTeal: {
     light: hexToRgba(paletteTokens.colorTeal100!, 0.7),
     dark: hexToRgba(paletteTokens.colorTeal500!, 0.2),

From 3e2fc9a5d79698d8a6e8ee7ad5726d9aef4be5f0 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 22 Jul 2026 16:59:32 +0200
Subject: [PATCH 06/12] chore: Updated token names for the visual-accent

---
 .../__snapshots__/themes.test.ts.snap         | 448 +++++++++---------
 src/box/visual-accent.scss                    |  56 +--
 style-dictionary/utils/token-names.ts         |  56 +--
 style-dictionary/visual-refresh/colors.ts     |  56 +--
 .../visual-refresh/metadata/colors.ts         |  56 +--
 5 files changed, 336 insertions(+), 336 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index cde617f745..659fc5bc83 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -79,20 +79,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(255, 232, 189, 0.7)",
-  "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
-  "color-background-accent-green": "#d9ffd6",
-  "color-background-accent-grey": "#eaeded",
-  "color-background-accent-indigo": "#dbe4ff",
-  "color-background-accent-lime": "#ebffcc",
-  "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
-  "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
-  "color-background-accent-pink": "rgba(255, 224, 240, 0.7)",
-  "color-background-accent-purple": "rgba(242, 229, 255, 0.6)",
-  "color-background-accent-red": "#ffe0e0",
-  "color-background-accent-teal": "rgba(204, 255, 252, 0.7)",
-  "color-background-accent-violet": "rgba(232, 229, 255, 0.6)",
-  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -227,6 +213,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-toggle-button-normal-pressed": "#eaeded",
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
+  "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)",
+  "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)",
+  "color-background-visual-accent-green": "#d9ffd6",
+  "color-background-visual-accent-grey": "#eaeded",
+  "color-background-visual-accent-indigo": "#dbe4ff",
+  "color-background-visual-accent-lime": "#ebffcc",
+  "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)",
+  "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)",
+  "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)",
+  "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)",
+  "color-background-visual-accent-red": "#ffe0e0",
+  "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)",
+  "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)",
+  "color-background-visual-accent-yellow": "#fffbbd",
   "color-black": "#000000",
   "color-board-placeholder-active": "#d5dbdb",
   "color-board-placeholder-hover": "#99cbe4",
@@ -564,20 +564,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#0073bb",
-  "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#006ce0",
-  "color-text-accent-green": "#005c26",
-  "color-text-accent-grey": "#21252c",
-  "color-text-accent-indigo": "#003b8f",
-  "color-text-accent-lime": "#007000",
-  "color-text-accent-magenta": "#b2008f",
-  "color-text-accent-orange": "#a82700",
-  "color-text-accent-pink": "#bb005d",
-  "color-text-accent-purple": "#962eff",
-  "color-text-accent-red": "#990000",
-  "color-text-accent-teal": "#008077",
-  "color-text-accent-violet": "#6842ff",
-  "color-text-accent-yellow": "#906806",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -709,6 +695,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-text-top-navigation-title": "#16191f",
   "color-text-tutorial-hotspot-default": "#0073bb",
   "color-text-tutorial-hotspot-hover": "#0a4a74",
+  "color-text-visual-accent-amber": "#9e3700",
+  "color-text-visual-accent-blue": "#006ce0",
+  "color-text-visual-accent-green": "#005c26",
+  "color-text-visual-accent-grey": "#21252c",
+  "color-text-visual-accent-indigo": "#003b8f",
+  "color-text-visual-accent-lime": "#007000",
+  "color-text-visual-accent-magenta": "#b2008f",
+  "color-text-visual-accent-orange": "#a82700",
+  "color-text-visual-accent-pink": "#bb005d",
+  "color-text-visual-accent-purple": "#962eff",
+  "color-text-visual-accent-red": "#990000",
+  "color-text-visual-accent-teal": "#008077",
+  "color-text-visual-accent-violet": "#6842ff",
+  "color-text-visual-accent-yellow": "#906806",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
   "color-warning-100": "#fffbbd",
@@ -1054,20 +1054,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(250, 111, 0, 0.2)",
-  "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
-  "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
-  "color-background-accent-grey": "#414750",
-  "color-background-accent-indigo": "rgba(92, 127, 255, 0.2)",
-  "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
-  "color-background-accent-magenta": "rgba(255, 26, 224, 0.15)",
-  "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
-  "color-background-accent-pink": "rgba(255, 51, 153, 0.2)",
-  "color-background-accent-purple": "rgba(173, 92, 255, 0.2)",
-  "color-background-accent-red": "rgba(255, 61, 61, 0.2)",
-  "color-background-accent-teal": "rgba(0, 173, 162, 0.2)",
-  "color-background-accent-violet": "rgba(133, 117, 255, 0.2)",
-  "color-background-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-background-action-card-active": "#414750",
   "color-background-action-card-default": "#1a2029",
   "color-background-action-card-disabled": "#21252c",
@@ -1202,6 +1188,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-toggle-button-normal-pressed": "#16191f",
   "color-background-toggle-checked-disabled": "#0a4a74",
   "color-background-toggle-default": "#879596",
+  "color-background-visual-accent-amber": "rgba(250, 111, 0, 0.2)",
+  "color-background-visual-accent-blue": "rgba(0, 153, 255, 0.2)",
+  "color-background-visual-accent-green": "rgba(43, 181, 52, 0.2)",
+  "color-background-visual-accent-grey": "#414750",
+  "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)",
+  "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)",
+  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.15)",
+  "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)",
+  "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)",
+  "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)",
+  "color-background-visual-accent-red": "rgba(255, 61, 61, 0.2)",
+  "color-background-visual-accent-teal": "rgba(0, 173, 162, 0.2)",
+  "color-background-visual-accent-violet": "rgba(133, 117, 255, 0.2)",
+  "color-background-visual-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-black": "#000000",
   "color-board-placeholder-active": "#687078",
   "color-board-placeholder-hover": "#0073bb",
@@ -1539,20 +1539,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#44b9d6",
-  "color-text-accent-amber": "#ffbb45",
-  "color-text-accent-blue": "#75cfff",
-  "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#d5dbdb",
-  "color-text-accent-indigo": "#00a1c9",
-  "color-text-accent-lime": "#acff2e",
-  "color-text-accent-magenta": "#ff57e9",
-  "color-text-accent-orange": "#ff997a",
-  "color-text-accent-pink": "#ff99cc",
-  "color-text-accent-purple": "#d4a8ff",
-  "color-text-accent-red": "#ff5d64",
-  "color-text-accent-teal": "#00f5e4",
-  "color-text-accent-violet": "#b2a8ff",
-  "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -1684,6 +1670,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-text-top-navigation-title": "#fafafa",
   "color-text-tutorial-hotspot-default": "#44b9d6",
   "color-text-tutorial-hotspot-hover": "#99cbe4",
+  "color-text-visual-accent-amber": "#ffbb45",
+  "color-text-visual-accent-blue": "#75cfff",
+  "color-text-visual-accent-green": "#00e500",
+  "color-text-visual-accent-grey": "#d5dbdb",
+  "color-text-visual-accent-indigo": "#00a1c9",
+  "color-text-visual-accent-lime": "#acff2e",
+  "color-text-visual-accent-magenta": "#ff57e9",
+  "color-text-visual-accent-orange": "#ff997a",
+  "color-text-visual-accent-pink": "#ff99cc",
+  "color-text-visual-accent-purple": "#d4a8ff",
+  "color-text-visual-accent-red": "#ff5d64",
+  "color-text-visual-accent-teal": "#00f5e4",
+  "color-text-visual-accent-violet": "#b2a8ff",
+  "color-text-visual-accent-yellow": "#ffe347",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#d5dbdb",
   "color-warning-100": "#fffbbd",
@@ -2029,20 +2029,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(255, 232, 189, 0.7)",
-  "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
-  "color-background-accent-green": "#d9ffd6",
-  "color-background-accent-grey": "#eaeded",
-  "color-background-accent-indigo": "#dbe4ff",
-  "color-background-accent-lime": "#ebffcc",
-  "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
-  "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
-  "color-background-accent-pink": "rgba(255, 224, 240, 0.7)",
-  "color-background-accent-purple": "rgba(242, 229, 255, 0.6)",
-  "color-background-accent-red": "#ffe0e0",
-  "color-background-accent-teal": "rgba(204, 255, 252, 0.7)",
-  "color-background-accent-violet": "rgba(232, 229, 255, 0.6)",
-  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -2177,6 +2163,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-toggle-button-normal-pressed": "#eaeded",
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
+  "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)",
+  "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)",
+  "color-background-visual-accent-green": "#d9ffd6",
+  "color-background-visual-accent-grey": "#eaeded",
+  "color-background-visual-accent-indigo": "#dbe4ff",
+  "color-background-visual-accent-lime": "#ebffcc",
+  "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)",
+  "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)",
+  "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)",
+  "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)",
+  "color-background-visual-accent-red": "#ffe0e0",
+  "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)",
+  "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)",
+  "color-background-visual-accent-yellow": "#fffbbd",
   "color-black": "#000000",
   "color-board-placeholder-active": "#d5dbdb",
   "color-board-placeholder-hover": "#99cbe4",
@@ -2514,20 +2514,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#0073bb",
-  "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#006ce0",
-  "color-text-accent-green": "#005c26",
-  "color-text-accent-grey": "#21252c",
-  "color-text-accent-indigo": "#003b8f",
-  "color-text-accent-lime": "#007000",
-  "color-text-accent-magenta": "#b2008f",
-  "color-text-accent-orange": "#a82700",
-  "color-text-accent-pink": "#bb005d",
-  "color-text-accent-purple": "#962eff",
-  "color-text-accent-red": "#990000",
-  "color-text-accent-teal": "#008077",
-  "color-text-accent-violet": "#6842ff",
-  "color-text-accent-yellow": "#906806",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -2659,6 +2645,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-text-top-navigation-title": "#16191f",
   "color-text-tutorial-hotspot-default": "#0073bb",
   "color-text-tutorial-hotspot-hover": "#0a4a74",
+  "color-text-visual-accent-amber": "#9e3700",
+  "color-text-visual-accent-blue": "#006ce0",
+  "color-text-visual-accent-green": "#005c26",
+  "color-text-visual-accent-grey": "#21252c",
+  "color-text-visual-accent-indigo": "#003b8f",
+  "color-text-visual-accent-lime": "#007000",
+  "color-text-visual-accent-magenta": "#b2008f",
+  "color-text-visual-accent-orange": "#a82700",
+  "color-text-visual-accent-pink": "#bb005d",
+  "color-text-visual-accent-purple": "#962eff",
+  "color-text-visual-accent-red": "#990000",
+  "color-text-visual-accent-teal": "#008077",
+  "color-text-visual-accent-violet": "#6842ff",
+  "color-text-visual-accent-yellow": "#906806",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
   "color-warning-100": "#fffbbd",
@@ -3004,20 +3004,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(255, 232, 189, 0.7)",
-  "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
-  "color-background-accent-green": "#d9ffd6",
-  "color-background-accent-grey": "#eaeded",
-  "color-background-accent-indigo": "#dbe4ff",
-  "color-background-accent-lime": "#ebffcc",
-  "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
-  "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
-  "color-background-accent-pink": "rgba(255, 224, 240, 0.7)",
-  "color-background-accent-purple": "rgba(242, 229, 255, 0.6)",
-  "color-background-accent-red": "#ffe0e0",
-  "color-background-accent-teal": "rgba(204, 255, 252, 0.7)",
-  "color-background-accent-violet": "rgba(232, 229, 255, 0.6)",
-  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -3152,6 +3138,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-toggle-button-normal-pressed": "#eaeded",
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
+  "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)",
+  "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)",
+  "color-background-visual-accent-green": "#d9ffd6",
+  "color-background-visual-accent-grey": "#eaeded",
+  "color-background-visual-accent-indigo": "#dbe4ff",
+  "color-background-visual-accent-lime": "#ebffcc",
+  "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)",
+  "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)",
+  "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)",
+  "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)",
+  "color-background-visual-accent-red": "#ffe0e0",
+  "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)",
+  "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)",
+  "color-background-visual-accent-yellow": "#fffbbd",
   "color-black": "#000000",
   "color-board-placeholder-active": "#d5dbdb",
   "color-board-placeholder-hover": "#99cbe4",
@@ -3489,20 +3489,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#0073bb",
-  "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#006ce0",
-  "color-text-accent-green": "#005c26",
-  "color-text-accent-grey": "#21252c",
-  "color-text-accent-indigo": "#003b8f",
-  "color-text-accent-lime": "#007000",
-  "color-text-accent-magenta": "#b2008f",
-  "color-text-accent-orange": "#a82700",
-  "color-text-accent-pink": "#bb005d",
-  "color-text-accent-purple": "#962eff",
-  "color-text-accent-red": "#990000",
-  "color-text-accent-teal": "#008077",
-  "color-text-accent-violet": "#6842ff",
-  "color-text-accent-yellow": "#906806",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -3634,6 +3620,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-text-top-navigation-title": "#16191f",
   "color-text-tutorial-hotspot-default": "#0073bb",
   "color-text-tutorial-hotspot-hover": "#0a4a74",
+  "color-text-visual-accent-amber": "#9e3700",
+  "color-text-visual-accent-blue": "#006ce0",
+  "color-text-visual-accent-green": "#005c26",
+  "color-text-visual-accent-grey": "#21252c",
+  "color-text-visual-accent-indigo": "#003b8f",
+  "color-text-visual-accent-lime": "#007000",
+  "color-text-visual-accent-magenta": "#b2008f",
+  "color-text-visual-accent-orange": "#a82700",
+  "color-text-visual-accent-pink": "#bb005d",
+  "color-text-visual-accent-purple": "#962eff",
+  "color-text-visual-accent-red": "#990000",
+  "color-text-visual-accent-teal": "#008077",
+  "color-text-visual-accent-violet": "#6842ff",
+  "color-text-visual-accent-yellow": "#906806",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
   "color-warning-100": "#fffbbd",
@@ -3979,20 +3979,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(255, 232, 189, 0.7)",
-  "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
-  "color-background-accent-green": "#d9ffd6",
-  "color-background-accent-grey": "#ebebf0",
-  "color-background-accent-indigo": "#dbe4ff",
-  "color-background-accent-lime": "#ebffcc",
-  "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
-  "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
-  "color-background-accent-pink": "rgba(255, 224, 240, 0.7)",
-  "color-background-accent-purple": "rgba(242, 229, 255, 0.6)",
-  "color-background-accent-red": "#ffe0e0",
-  "color-background-accent-teal": "rgba(204, 255, 252, 0.7)",
-  "color-background-accent-violet": "rgba(232, 229, 255, 0.6)",
-  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#ffffff",
@@ -4127,6 +4113,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-toggle-button-normal-pressed": "#d1f1ff",
   "color-background-toggle-checked-disabled": "#b8e7ff",
   "color-background-toggle-default": "#424650",
+  "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)",
+  "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)",
+  "color-background-visual-accent-green": "#d9ffd6",
+  "color-background-visual-accent-grey": "#ebebf0",
+  "color-background-visual-accent-indigo": "#dbe4ff",
+  "color-background-visual-accent-lime": "#ebffcc",
+  "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)",
+  "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)",
+  "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)",
+  "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)",
+  "color-background-visual-accent-red": "#ffe0e0",
+  "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)",
+  "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)",
+  "color-background-visual-accent-yellow": "#fffbbd",
   "color-black": "#000000",
   "color-board-placeholder-active": "#ebebf0",
   "color-board-placeholder-hover": "#d1f1ff",
@@ -4464,20 +4464,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#006ce0",
-  "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#006ce0",
-  "color-text-accent-green": "#005c26",
-  "color-text-accent-grey": "#1b232d",
-  "color-text-accent-indigo": "#003b8f",
-  "color-text-accent-lime": "#007000",
-  "color-text-accent-magenta": "#b2008f",
-  "color-text-accent-orange": "#a82700",
-  "color-text-accent-pink": "#bb005d",
-  "color-text-accent-purple": "#962eff",
-  "color-text-accent-red": "#990000",
-  "color-text-accent-teal": "#008077",
-  "color-text-accent-violet": "#6842ff",
-  "color-text-accent-yellow": "#855900",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -4609,6 +4595,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-text-top-navigation-title": "#0f141a",
   "color-text-tutorial-hotspot-default": "#006ce0",
   "color-text-tutorial-hotspot-hover": "#002b66",
+  "color-text-visual-accent-amber": "#9e3700",
+  "color-text-visual-accent-blue": "#006ce0",
+  "color-text-visual-accent-green": "#005c26",
+  "color-text-visual-accent-grey": "#1b232d",
+  "color-text-visual-accent-indigo": "#003b8f",
+  "color-text-visual-accent-lime": "#007000",
+  "color-text-visual-accent-magenta": "#b2008f",
+  "color-text-visual-accent-orange": "#a82700",
+  "color-text-visual-accent-pink": "#bb005d",
+  "color-text-visual-accent-purple": "#962eff",
+  "color-text-visual-accent-red": "#990000",
+  "color-text-visual-accent-teal": "#008077",
+  "color-text-visual-accent-violet": "#6842ff",
+  "color-text-visual-accent-yellow": "#855900",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#8c8c94",
   "color-warning-100": "#fffbbd",
@@ -4954,20 +4954,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(255, 232, 189, 0.7)",
-  "color-background-accent-blue": "rgba(209, 241, 255, 0.6)",
-  "color-background-accent-green": "#d9ffd6",
-  "color-background-accent-grey": "#ebebf0",
-  "color-background-accent-indigo": "#dbe4ff",
-  "color-background-accent-lime": "#ebffcc",
-  "color-background-accent-magenta": "rgba(255, 224, 251, 0.6)",
-  "color-background-accent-orange": "rgba(255, 224, 214, 0.6)",
-  "color-background-accent-pink": "rgba(255, 224, 240, 0.7)",
-  "color-background-accent-purple": "rgba(242, 229, 255, 0.6)",
-  "color-background-accent-red": "#ffe0e0",
-  "color-background-accent-teal": "rgba(204, 255, 252, 0.7)",
-  "color-background-accent-violet": "rgba(232, 229, 255, 0.6)",
-  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#ffffff",
@@ -5102,6 +5088,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-button-normal-pressed": "#d1f1ff",
   "color-background-toggle-checked-disabled": "#b8e7ff",
   "color-background-toggle-default": "#424650",
+  "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)",
+  "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)",
+  "color-background-visual-accent-green": "#d9ffd6",
+  "color-background-visual-accent-grey": "#ebebf0",
+  "color-background-visual-accent-indigo": "#dbe4ff",
+  "color-background-visual-accent-lime": "#ebffcc",
+  "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)",
+  "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)",
+  "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)",
+  "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)",
+  "color-background-visual-accent-red": "#ffe0e0",
+  "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)",
+  "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)",
+  "color-background-visual-accent-yellow": "#fffbbd",
   "color-black": "#000000",
   "color-board-placeholder-active": "#ebebf0",
   "color-board-placeholder-hover": "#d1f1ff",
@@ -5439,20 +5439,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#006ce0",
-  "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#006ce0",
-  "color-text-accent-green": "#005c26",
-  "color-text-accent-grey": "#1b232d",
-  "color-text-accent-indigo": "#003b8f",
-  "color-text-accent-lime": "#007000",
-  "color-text-accent-magenta": "#b2008f",
-  "color-text-accent-orange": "#a82700",
-  "color-text-accent-pink": "#bb005d",
-  "color-text-accent-purple": "#962eff",
-  "color-text-accent-red": "#990000",
-  "color-text-accent-teal": "#008077",
-  "color-text-accent-violet": "#6842ff",
-  "color-text-accent-yellow": "#855900",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -5584,6 +5570,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-top-navigation-title": "#0f141a",
   "color-text-tutorial-hotspot-default": "#006ce0",
   "color-text-tutorial-hotspot-hover": "#002b66",
+  "color-text-visual-accent-amber": "#9e3700",
+  "color-text-visual-accent-blue": "#006ce0",
+  "color-text-visual-accent-green": "#005c26",
+  "color-text-visual-accent-grey": "#1b232d",
+  "color-text-visual-accent-indigo": "#003b8f",
+  "color-text-visual-accent-lime": "#007000",
+  "color-text-visual-accent-magenta": "#b2008f",
+  "color-text-visual-accent-orange": "#a82700",
+  "color-text-visual-accent-pink": "#bb005d",
+  "color-text-visual-accent-purple": "#962eff",
+  "color-text-visual-accent-red": "#990000",
+  "color-text-visual-accent-teal": "#008077",
+  "color-text-visual-accent-violet": "#6842ff",
+  "color-text-visual-accent-yellow": "#855900",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#8c8c94",
   "color-warning-100": "#fffbbd",
@@ -5929,20 +5929,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(250, 111, 0, 0.2)",
-  "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
-  "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
-  "color-background-accent-grey": "#333843",
-  "color-background-accent-indigo": "rgba(92, 127, 255, 0.2)",
-  "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
-  "color-background-accent-magenta": "rgba(255, 26, 224, 0.15)",
-  "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
-  "color-background-accent-pink": "rgba(255, 51, 153, 0.2)",
-  "color-background-accent-purple": "rgba(173, 92, 255, 0.2)",
-  "color-background-accent-red": "rgba(255, 61, 61, 0.2)",
-  "color-background-accent-teal": "rgba(0, 173, 162, 0.2)",
-  "color-background-accent-violet": "rgba(133, 117, 255, 0.2)",
-  "color-background-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-background-action-card-active": "#333843",
   "color-background-action-card-default": "#161d26",
   "color-background-action-card-disabled": "#161d26",
@@ -6077,6 +6063,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-button-normal-pressed": "#333843",
   "color-background-toggle-checked-disabled": "#002b66",
   "color-background-toggle-default": "#8c8c94",
+  "color-background-visual-accent-amber": "rgba(250, 111, 0, 0.2)",
+  "color-background-visual-accent-blue": "rgba(0, 153, 255, 0.2)",
+  "color-background-visual-accent-green": "rgba(43, 181, 52, 0.2)",
+  "color-background-visual-accent-grey": "#333843",
+  "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)",
+  "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)",
+  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.15)",
+  "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)",
+  "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)",
+  "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)",
+  "color-background-visual-accent-red": "rgba(255, 61, 61, 0.2)",
+  "color-background-visual-accent-teal": "rgba(0, 173, 162, 0.2)",
+  "color-background-visual-accent-violet": "rgba(133, 117, 255, 0.2)",
+  "color-background-visual-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-black": "#000000",
   "color-board-placeholder-active": "#656871",
   "color-board-placeholder-hover": "#006ce0",
@@ -6414,20 +6414,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#42b4ff",
-  "color-text-accent-amber": "#ffbb45",
-  "color-text-accent-blue": "#75cfff",
-  "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#dedee3",
-  "color-text-accent-indigo": "#42b4ff",
-  "color-text-accent-lime": "#acff2e",
-  "color-text-accent-magenta": "#ff57e9",
-  "color-text-accent-orange": "#ff997a",
-  "color-text-accent-pink": "#ff99cc",
-  "color-text-accent-purple": "#d4a8ff",
-  "color-text-accent-red": "#ff7a7a",
-  "color-text-accent-teal": "#00f5e4",
-  "color-text-accent-violet": "#b2a8ff",
-  "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -6559,6 +6545,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-top-navigation-title": "#f9f9fa",
   "color-text-tutorial-hotspot-default": "#42b4ff",
   "color-text-tutorial-hotspot-hover": "#75cfff",
+  "color-text-visual-accent-amber": "#ffbb45",
+  "color-text-visual-accent-blue": "#75cfff",
+  "color-text-visual-accent-green": "#00e500",
+  "color-text-visual-accent-grey": "#dedee3",
+  "color-text-visual-accent-indigo": "#42b4ff",
+  "color-text-visual-accent-lime": "#acff2e",
+  "color-text-visual-accent-magenta": "#ff57e9",
+  "color-text-visual-accent-orange": "#ff997a",
+  "color-text-visual-accent-pink": "#ff99cc",
+  "color-text-visual-accent-purple": "#d4a8ff",
+  "color-text-visual-accent-red": "#ff7a7a",
+  "color-text-visual-accent-teal": "#00f5e4",
+  "color-text-visual-accent-violet": "#b2a8ff",
+  "color-text-visual-accent-yellow": "#ffe347",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#dedee3",
   "color-warning-100": "#fffbbd",
@@ -6904,20 +6904,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(250, 111, 0, 0.2)",
-  "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
-  "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
-  "color-background-accent-grey": "#333843",
-  "color-background-accent-indigo": "rgba(92, 127, 255, 0.2)",
-  "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
-  "color-background-accent-magenta": "rgba(255, 26, 224, 0.15)",
-  "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
-  "color-background-accent-pink": "rgba(255, 51, 153, 0.2)",
-  "color-background-accent-purple": "rgba(173, 92, 255, 0.2)",
-  "color-background-accent-red": "rgba(255, 61, 61, 0.2)",
-  "color-background-accent-teal": "rgba(0, 173, 162, 0.2)",
-  "color-background-accent-violet": "rgba(133, 117, 255, 0.2)",
-  "color-background-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-background-action-card-active": "#333843",
   "color-background-action-card-default": "#161d26",
   "color-background-action-card-disabled": "#161d26",
@@ -7052,6 +7038,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-button-normal-pressed": "#333843",
   "color-background-toggle-checked-disabled": "#002b66",
   "color-background-toggle-default": "#8c8c94",
+  "color-background-visual-accent-amber": "rgba(250, 111, 0, 0.2)",
+  "color-background-visual-accent-blue": "rgba(0, 153, 255, 0.2)",
+  "color-background-visual-accent-green": "rgba(43, 181, 52, 0.2)",
+  "color-background-visual-accent-grey": "#333843",
+  "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)",
+  "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)",
+  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.15)",
+  "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)",
+  "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)",
+  "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)",
+  "color-background-visual-accent-red": "rgba(255, 61, 61, 0.2)",
+  "color-background-visual-accent-teal": "rgba(0, 173, 162, 0.2)",
+  "color-background-visual-accent-violet": "rgba(133, 117, 255, 0.2)",
+  "color-background-visual-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-black": "#000000",
   "color-board-placeholder-active": "#656871",
   "color-board-placeholder-hover": "#006ce0",
@@ -7389,20 +7389,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-800": "#005c26",
   "color-success-950": "#003311",
   "color-text-accent": "#42b4ff",
-  "color-text-accent-amber": "#ffbb45",
-  "color-text-accent-blue": "#75cfff",
-  "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#dedee3",
-  "color-text-accent-indigo": "#42b4ff",
-  "color-text-accent-lime": "#acff2e",
-  "color-text-accent-magenta": "#ff57e9",
-  "color-text-accent-orange": "#ff997a",
-  "color-text-accent-pink": "#ff99cc",
-  "color-text-accent-purple": "#d4a8ff",
-  "color-text-accent-red": "#ff7a7a",
-  "color-text-accent-teal": "#00f5e4",
-  "color-text-accent-violet": "#b2a8ff",
-  "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -7534,6 +7520,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-top-navigation-title": "#f9f9fa",
   "color-text-tutorial-hotspot-default": "#42b4ff",
   "color-text-tutorial-hotspot-hover": "#75cfff",
+  "color-text-visual-accent-amber": "#ffbb45",
+  "color-text-visual-accent-blue": "#75cfff",
+  "color-text-visual-accent-green": "#00e500",
+  "color-text-visual-accent-grey": "#dedee3",
+  "color-text-visual-accent-indigo": "#42b4ff",
+  "color-text-visual-accent-lime": "#acff2e",
+  "color-text-visual-accent-magenta": "#ff57e9",
+  "color-text-visual-accent-orange": "#ff997a",
+  "color-text-visual-accent-pink": "#ff99cc",
+  "color-text-visual-accent-purple": "#d4a8ff",
+  "color-text-visual-accent-red": "#ff7a7a",
+  "color-text-visual-accent-teal": "#00f5e4",
+  "color-text-visual-accent-violet": "#b2a8ff",
+  "color-text-visual-accent-yellow": "#ffe347",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#dedee3",
   "color-warning-100": "#fffbbd",
diff --git a/src/box/visual-accent.scss b/src/box/visual-accent.scss
index 2ed6c4637e..8aba9a6301 100644
--- a/src/box/visual-accent.scss
+++ b/src/box/visual-accent.scss
@@ -88,60 +88,60 @@ $accent-radii: (
 // its mode-specific custom property declarations.
 $accent-colors: (
   'red': (
-    background: awsui.$color-background-accent-red,
-    foreground: awsui.$color-text-accent-red,
+    background: awsui.$color-background-visual-accent-red,
+    foreground: awsui.$color-text-visual-accent-red,
   ),
   'yellow': (
-    background: awsui.$color-background-accent-yellow,
-    foreground: awsui.$color-text-accent-yellow,
+    background: awsui.$color-background-visual-accent-yellow,
+    foreground: awsui.$color-text-visual-accent-yellow,
   ),
   'indigo': (
-    background: awsui.$color-background-accent-indigo,
-    foreground: awsui.$color-text-accent-indigo,
+    background: awsui.$color-background-visual-accent-indigo,
+    foreground: awsui.$color-text-visual-accent-indigo,
   ),
   'green': (
-    background: awsui.$color-background-accent-green,
-    foreground: awsui.$color-text-accent-green,
+    background: awsui.$color-background-visual-accent-green,
+    foreground: awsui.$color-text-visual-accent-green,
   ),
   'orange': (
-    background: awsui.$color-background-accent-orange,
-    foreground: awsui.$color-text-accent-orange,
+    background: awsui.$color-background-visual-accent-orange,
+    foreground: awsui.$color-text-visual-accent-orange,
   ),
   'purple': (
-    background: awsui.$color-background-accent-purple,
-    foreground: awsui.$color-text-accent-purple,
+    background: awsui.$color-background-visual-accent-purple,
+    foreground: awsui.$color-text-visual-accent-purple,
   ),
   'lime': (
-    background: awsui.$color-background-accent-lime,
-    foreground: awsui.$color-text-accent-lime,
+    background: awsui.$color-background-visual-accent-lime,
+    foreground: awsui.$color-text-visual-accent-lime,
   ),
   'grey': (
-    background: awsui.$color-background-accent-grey,
-    foreground: awsui.$color-text-accent-grey,
+    background: awsui.$color-background-visual-accent-grey,
+    foreground: awsui.$color-text-visual-accent-grey,
   ),
   'teal': (
-    background: awsui.$color-background-accent-teal,
-    foreground: awsui.$color-text-accent-teal,
+    background: awsui.$color-background-visual-accent-teal,
+    foreground: awsui.$color-text-visual-accent-teal,
   ),
   'blue': (
-    background: awsui.$color-background-accent-blue,
-    foreground: awsui.$color-text-accent-blue,
+    background: awsui.$color-background-visual-accent-blue,
+    foreground: awsui.$color-text-visual-accent-blue,
   ),
   'violet': (
-    background: awsui.$color-background-accent-violet,
-    foreground: awsui.$color-text-accent-violet,
+    background: awsui.$color-background-visual-accent-violet,
+    foreground: awsui.$color-text-visual-accent-violet,
   ),
   'magenta': (
-    background: awsui.$color-background-accent-magenta,
-    foreground: awsui.$color-text-accent-magenta,
+    background: awsui.$color-background-visual-accent-magenta,
+    foreground: awsui.$color-text-visual-accent-magenta,
   ),
   'pink': (
-    background: awsui.$color-background-accent-pink,
-    foreground: awsui.$color-text-accent-pink,
+    background: awsui.$color-background-visual-accent-pink,
+    foreground: awsui.$color-text-visual-accent-pink,
   ),
   'amber': (
-    background: awsui.$color-background-accent-amber,
-    foreground: awsui.$color-text-accent-amber,
+    background: awsui.$color-background-visual-accent-amber,
+    foreground: awsui.$color-text-visual-accent-amber,
   ),
 );
 
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 28e699be99..56f04ff94c 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -609,20 +609,20 @@ export type ColorsTokenName =
   | 'colorBackgroundNotificationStackBar'
   | 'colorBackgroundNotificationStackBarActive'
   | 'colorBackgroundNotificationStackBarHover'
-  | 'colorBackgroundAccentRed'
-  | 'colorBackgroundAccentYellow'
-  | 'colorBackgroundAccentIndigo'
-  | 'colorBackgroundAccentGreen'
-  | 'colorBackgroundAccentOrange'
-  | 'colorBackgroundAccentPurple'
-  | 'colorBackgroundAccentLime'
-  | 'colorBackgroundAccentGrey'
-  | 'colorBackgroundAccentTeal'
-  | 'colorBackgroundAccentBlue'
-  | 'colorBackgroundAccentViolet'
-  | 'colorBackgroundAccentMagenta'
-  | 'colorBackgroundAccentPink'
-  | 'colorBackgroundAccentAmber'
+  | 'colorBackgroundVisualAccentRed'
+  | 'colorBackgroundVisualAccentYellow'
+  | 'colorBackgroundVisualAccentIndigo'
+  | 'colorBackgroundVisualAccentGreen'
+  | 'colorBackgroundVisualAccentOrange'
+  | 'colorBackgroundVisualAccentPurple'
+  | 'colorBackgroundVisualAccentLime'
+  | 'colorBackgroundVisualAccentGrey'
+  | 'colorBackgroundVisualAccentTeal'
+  | 'colorBackgroundVisualAccentBlue'
+  | 'colorBackgroundVisualAccentViolet'
+  | 'colorBackgroundVisualAccentMagenta'
+  | 'colorBackgroundVisualAccentPink'
+  | 'colorBackgroundVisualAccentAmber'
   | 'colorBackgroundPopover'
   | 'colorBackgroundProgressBarValueDefault'
   | 'colorBackgroundProgressBarDefault'
@@ -747,20 +747,20 @@ export type ColorsTokenName =
   | 'colorStrokeCodeEditorGutterActiveLineDefault'
   | 'colorStrokeCodeEditorGutterActiveLineHover'
   | 'colorTextAccent'
-  | 'colorTextAccentRed'
-  | 'colorTextAccentYellow'
-  | 'colorTextAccentIndigo'
-  | 'colorTextAccentGreen'
-  | 'colorTextAccentOrange'
-  | 'colorTextAccentPurple'
-  | 'colorTextAccentLime'
-  | 'colorTextAccentGrey'
-  | 'colorTextAccentTeal'
-  | 'colorTextAccentBlue'
-  | 'colorTextAccentViolet'
-  | 'colorTextAccentMagenta'
-  | 'colorTextAccentPink'
-  | 'colorTextAccentAmber'
+  | 'colorTextVisualAccentRed'
+  | 'colorTextVisualAccentYellow'
+  | 'colorTextVisualAccentIndigo'
+  | 'colorTextVisualAccentGreen'
+  | 'colorTextVisualAccentOrange'
+  | 'colorTextVisualAccentPurple'
+  | 'colorTextVisualAccentLime'
+  | 'colorTextVisualAccentGrey'
+  | 'colorTextVisualAccentTeal'
+  | 'colorTextVisualAccentBlue'
+  | 'colorTextVisualAccentViolet'
+  | 'colorTextVisualAccentMagenta'
+  | 'colorTextVisualAccentPink'
+  | 'colorTextVisualAccentAmber'
   | 'colorTextBodyDefault'
   | 'colorTextBodySecondary'
   | 'colorTextBreadcrumbCurrent'
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index e308a2c2aa..0be7dbec4a 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -376,76 +376,76 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundCodeView: { light: '#f8f8f8', dark: '#282c34' },
 
   // ── Visual accent ───────────────────────────────────
-  colorBackgroundAccentRed: {
+  colorBackgroundVisualAccentRed: {
     light: paletteTokens.colorRed100!,
     dark: hexToRgba(paletteTokens.colorRed500!, 0.2),
   },
-  colorBackgroundAccentYellow: {
+  colorBackgroundVisualAccentYellow: {
     light: paletteTokens.colorYellow100!,
     dark: hexToRgba(paletteTokens.colorYellow500!, 0.2),
   },
-  colorBackgroundAccentIndigo: {
+  colorBackgroundVisualAccentIndigo: {
     light: paletteTokens.colorIndigo100!,
     dark: hexToRgba(paletteTokens.colorIndigo500!, 0.2),
   },
-  colorBackgroundAccentGreen: {
+  colorBackgroundVisualAccentGreen: {
     light: paletteTokens.colorGreen100!,
     dark: hexToRgba(paletteTokens.colorGreen500!, 0.2),
   },
-  colorBackgroundAccentOrange: {
+  colorBackgroundVisualAccentOrange: {
     light: hexToRgba(paletteTokens.colorOrange100!, 0.6),
     dark: hexToRgba(paletteTokens.colorOrange500!, 0.2),
   },
-  colorBackgroundAccentPurple: {
+  colorBackgroundVisualAccentPurple: {
     light: hexToRgba(paletteTokens.colorPurple100!, 0.6),
     dark: hexToRgba(paletteTokens.colorPurple500!, 0.2),
   },
-  colorBackgroundAccentLime: {
+  colorBackgroundVisualAccentLime: {
     light: '{colorLime100}',
     dark: hexToRgba(paletteTokens.colorLime500!, 0.2),
   },
-  colorBackgroundAccentGrey: {
+  colorBackgroundVisualAccentGrey: {
     light: '{colorNeutral250}',
     dark: '{colorNeutral700}',
   },
-  colorBackgroundAccentTeal: {
+  colorBackgroundVisualAccentTeal: {
     light: hexToRgba(paletteTokens.colorTeal100!, 0.7),
     dark: hexToRgba(paletteTokens.colorTeal500!, 0.2),
   },
-  colorBackgroundAccentBlue: {
+  colorBackgroundVisualAccentBlue: {
     light: hexToRgba(paletteTokens.colorBlue100!, 0.6),
     dark: hexToRgba(paletteTokens.colorBlue500!, 0.2),
   },
-  colorBackgroundAccentViolet: {
+  colorBackgroundVisualAccentViolet: {
     light: hexToRgba(paletteTokens.colorViolet100!, 0.6),
     dark: hexToRgba(paletteTokens.colorViolet500!, 0.2),
   },
-  colorBackgroundAccentMagenta: {
+  colorBackgroundVisualAccentMagenta: {
     light: hexToRgba(paletteTokens.colorMagenta100!, 0.6),
     dark: hexToRgba(paletteTokens.colorMagenta500!, 0.15),
   },
-  colorBackgroundAccentPink: {
+  colorBackgroundVisualAccentPink: {
     light: hexToRgba(paletteTokens.colorPink100!, 0.7),
     dark: hexToRgba(paletteTokens.colorPink500!, 0.2),
   },
-  colorBackgroundAccentAmber: {
+  colorBackgroundVisualAccentAmber: {
     light: hexToRgba(paletteTokens.colorAmber100!, 0.7),
     dark: hexToRgba(paletteTokens.colorAmber500!, 0.2),
   },
-  colorTextAccentRed: { light: '{colorError800}', dark: '{colorError400}' },
-  colorTextAccentYellow: { light: '{colorWarning900}', dark: '{colorWarning400}' },
-  colorTextAccentIndigo: { light: '{colorInfo800}', dark: '{colorInfo400}' },
-  colorTextAccentGreen: { light: '{colorSuccess800}', dark: '{colorSuccess400}' },
-  colorTextAccentOrange: { light: paletteTokens.colorOrange700!, dark: paletteTokens.colorOrange300! },
-  colorTextAccentPurple: { light: paletteTokens.colorPurple600!, dark: paletteTokens.colorPurple300! },
-  colorTextAccentLime: { light: paletteTokens.colorLime700!, dark: paletteTokens.colorLime300! },
-  colorTextAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral300}' },
-  colorTextAccentTeal: { light: paletteTokens.colorTeal600!, dark: paletteTokens.colorTeal300! },
-  colorTextAccentBlue: { light: paletteTokens.colorBlue600!, dark: paletteTokens.colorBlue300! },
-  colorTextAccentViolet: { light: paletteTokens.colorViolet600!, dark: paletteTokens.colorViolet300! },
-  colorTextAccentMagenta: { light: paletteTokens.colorMagenta700!, dark: paletteTokens.colorMagenta400! },
-  colorTextAccentPink: { light: paletteTokens.colorPink700!, dark: paletteTokens.colorPink300! },
-  colorTextAccentAmber: { light: paletteTokens.colorAmber700!, dark: paletteTokens.colorAmber300! },
+  colorTextVisualAccentRed: { light: '{colorError800}', dark: '{colorError400}' },
+  colorTextVisualAccentYellow: { light: '{colorWarning900}', dark: '{colorWarning400}' },
+  colorTextVisualAccentIndigo: { light: '{colorInfo800}', dark: '{colorInfo400}' },
+  colorTextVisualAccentGreen: { light: '{colorSuccess800}', dark: '{colorSuccess400}' },
+  colorTextVisualAccentOrange: { light: paletteTokens.colorOrange700!, dark: paletteTokens.colorOrange300! },
+  colorTextVisualAccentPurple: { light: paletteTokens.colorPurple600!, dark: paletteTokens.colorPurple300! },
+  colorTextVisualAccentLime: { light: paletteTokens.colorLime700!, dark: paletteTokens.colorLime300! },
+  colorTextVisualAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral300}' },
+  colorTextVisualAccentTeal: { light: paletteTokens.colorTeal600!, dark: paletteTokens.colorTeal300! },
+  colorTextVisualAccentBlue: { light: paletteTokens.colorBlue600!, dark: paletteTokens.colorBlue300! },
+  colorTextVisualAccentViolet: { light: paletteTokens.colorViolet600!, dark: paletteTokens.colorViolet300! },
+  colorTextVisualAccentMagenta: { light: paletteTokens.colorMagenta700!, dark: paletteTokens.colorMagenta400! },
+  colorTextVisualAccentPink: { light: paletteTokens.colorPink700!, dark: paletteTokens.colorPink300! },
+  colorTextVisualAccentAmber: { light: paletteTokens.colorAmber700!, dark: paletteTokens.colorAmber300! },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index 2616439af7..9f18b3c85d 100644
--- a/style-dictionary/visual-refresh/metadata/colors.ts
+++ b/style-dictionary/visual-refresh/metadata/colors.ts
@@ -281,142 +281,142 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
-  colorBackgroundAccentRed: {
+  colorBackgroundVisualAccentRed: {
     description: 'The background color of the red accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentYellow: {
+  colorBackgroundVisualAccentYellow: {
     description: 'The background color of the yellow accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentIndigo: {
+  colorBackgroundVisualAccentIndigo: {
     description: 'The background color of the indigo accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentGreen: {
+  colorBackgroundVisualAccentGreen: {
     description: 'The background color of the green accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentOrange: {
+  colorBackgroundVisualAccentOrange: {
     description: 'The background color of the orange accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentPurple: {
+  colorBackgroundVisualAccentPurple: {
     description: 'The background color of the purple accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentLime: {
+  colorBackgroundVisualAccentLime: {
     description: 'The background color of the lime accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentGrey: {
+  colorBackgroundVisualAccentGrey: {
     description: 'The background color of the grey accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentTeal: {
+  colorBackgroundVisualAccentTeal: {
     description: 'The background color of the teal accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentBlue: {
+  colorBackgroundVisualAccentBlue: {
     description: 'The background color of the blue accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentViolet: {
+  colorBackgroundVisualAccentViolet: {
     description: 'The background color of the violet accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentMagenta: {
+  colorBackgroundVisualAccentMagenta: {
     description: 'The background color of the magenta accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentPink: {
+  colorBackgroundVisualAccentPink: {
     description: 'The background color of the pink accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorBackgroundAccentAmber: {
+  colorBackgroundVisualAccentAmber: {
     description: 'The background color of the amber accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentRed: {
+  colorTextVisualAccentRed: {
     description: 'The content color of the red accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentYellow: {
+  colorTextVisualAccentYellow: {
     description: 'The content color of the yellow accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentIndigo: {
+  colorTextVisualAccentIndigo: {
     description: 'The content color of the indigo accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentGreen: {
+  colorTextVisualAccentGreen: {
     description: 'The content color of the green accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentOrange: {
+  colorTextVisualAccentOrange: {
     description: 'The content color of the orange accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentPurple: {
+  colorTextVisualAccentPurple: {
     description: 'The content color of the purple accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentLime: {
+  colorTextVisualAccentLime: {
     description: 'The content color of the lime accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentGrey: {
+  colorTextVisualAccentGrey: {
     description: 'The content color of the grey accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentTeal: {
+  colorTextVisualAccentTeal: {
     description: 'The content color of the teal accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentBlue: {
+  colorTextVisualAccentBlue: {
     description: 'The content color of the blue accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentViolet: {
+  colorTextVisualAccentViolet: {
     description: 'The content color of the violet accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentMagenta: {
+  colorTextVisualAccentMagenta: {
     description: 'The content color of the magenta accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentPink: {
+  colorTextVisualAccentPink: {
     description: 'The content color of the pink accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,
   },
-  colorTextAccentAmber: {
+  colorTextVisualAccentAmber: {
     description: 'The content color of the amber accent in the Box `awsui-accent` variant.',
     public: false,
     themeable: false,

From c205c5031c509bf585310725fab5180b904e0a1c Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 23 Jul 2026 13:44:45 +0200
Subject: [PATCH 07/12] chore: Update visual accent and badge styles to be
 latest ones

---
 style-dictionary/one-theme/colors.ts      |  8 ++++----
 style-dictionary/visual-refresh/colors.ts | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts
index 445d2009a0..b2ba394373 100644
--- a/style-dictionary/one-theme/colors.ts
+++ b/style-dictionary/one-theme/colors.ts
@@ -138,10 +138,10 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundBadgeGrey: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
   colorTextNotificationDefault: { light: '{colorNeutral100}', dark: '{colorNeutral100}' },
 
-  colorTextBadgeGreen: { light: '{colorSuccess800}', dark: '{colorSuccess200}' },
-  colorTextBadgeBlue: { light: '{colorInfo800}', dark: '{colorInfo300}' },
-  colorTextBadgeRed: { light: '{colorError800}', dark: '{colorError400}' },
-  colorTextBadgeGrey: { light: '{colorNeutral800}', dark: '{colorNeutral300}' },
+  colorTextBadgeGreen: { light: '{colorSuccess600}', dark: '{colorSuccess200}' },
+  colorTextBadgeBlue: { light: '{colorInfo600}', dark: '{colorInfo300}' },
+  colorTextBadgeRed: { light: '{colorError700}', dark: '{colorError400}' },
+  colorTextBadgeGrey: { light: '{colorNeutral850}', dark: '{colorNeutral300}' },
 
   // ── Flashbar (one-theme: subtle alert-style backgrounds) ───────────────────
   colorBackgroundFlashbarSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' },
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index c576dae752..5d5969bfba 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -433,14 +433,14 @@ const tokens: StyleDictionary.ColorsDictionary = {
     light: hexToRgba(paletteTokens.colorAmber100!, 0.7),
     dark: hexToRgba(paletteTokens.colorAmber500!, 0.2),
   },
-  colorTextVisualAccentRed: { light: '{colorError800}', dark: '{colorError400}' },
-  colorTextVisualAccentYellow: { light: '{colorWarning900}', dark: '{colorWarning400}' },
-  colorTextVisualAccentIndigo: { light: '{colorInfo800}', dark: '{colorInfo400}' },
-  colorTextVisualAccentGreen: { light: '{colorSuccess800}', dark: '{colorSuccess400}' },
+  colorTextVisualAccentRed: { light: '{colorError700}', dark: '{colorError400}' },
+  colorTextVisualAccentYellow: { light: '{colorWarning900}', dark: '{colorWarning200}' },
+  colorTextVisualAccentIndigo: { light: '{colorInfo800}', dark: '{colorInfo300}' },
+  colorTextVisualAccentGreen: { light: '{colorSuccess600}', dark: '{colorSuccess200}' },
   colorTextVisualAccentOrange: { light: paletteTokens.colorOrange700!, dark: paletteTokens.colorOrange300! },
   colorTextVisualAccentPurple: { light: paletteTokens.colorPurple600!, dark: paletteTokens.colorPurple300! },
   colorTextVisualAccentLime: { light: paletteTokens.colorLime700!, dark: paletteTokens.colorLime300! },
-  colorTextVisualAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral300}' },
+  colorTextVisualAccentGrey: { light: '{colorNeutral850}', dark: '{colorNeutral300}' },
   colorTextVisualAccentTeal: { light: paletteTokens.colorTeal600!, dark: paletteTokens.colorTeal300! },
   colorTextVisualAccentBlue: { light: paletteTokens.colorBlue600!, dark: paletteTokens.colorBlue300! },
   colorTextVisualAccentViolet: { light: paletteTokens.colorViolet600!, dark: paletteTokens.colorViolet300! },

From 74058c4edaef53dff5d697ec19e6299881726fb2 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 23 Jul 2026 14:30:51 +0200
Subject: [PATCH 08/12] chore: Add missing palette and update snapshots

---
 .../__snapshots__/themes.test.ts.snap         | 72 ++++++++++++-------
 style-dictionary/one-theme/color-palette.ts   |  1 +
 .../visual-refresh/color-palette.ts           |  3 +
 3 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index b50c0bf44f..ef0c502cfd 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -484,6 +484,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
+  "color-error-700": "#c20000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
@@ -559,6 +560,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-stroke-chart-line": "#879596",
   "color-success-100": "#d9ffd6",
   "color-success-1000": "#172211",
+  "color-success-200": "#aeffa8",
   "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
@@ -699,15 +701,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-text-tutorial-hotspot-hover": "#0a4a74",
   "color-text-visual-accent-amber": "#9e3700",
   "color-text-visual-accent-blue": "#006ce0",
-  "color-text-visual-accent-green": "#005c26",
-  "color-text-visual-accent-grey": "#21252c",
+  "color-text-visual-accent-green": "#1d8102",
+  "color-text-visual-accent-grey": "#1a2029",
   "color-text-visual-accent-indigo": "#003b8f",
   "color-text-visual-accent-lime": "#007000",
   "color-text-visual-accent-magenta": "#b2008f",
   "color-text-visual-accent-orange": "#a82700",
   "color-text-visual-accent-pink": "#bb005d",
   "color-text-visual-accent-purple": "#962eff",
-  "color-text-visual-accent-red": "#990000",
+  "color-text-visual-accent-red": "#c20000",
   "color-text-visual-accent-teal": "#008077",
   "color-text-visual-accent-violet": "#6842ff",
   "color-text-visual-accent-yellow": "#906806",
@@ -715,6 +717,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-tree-view-connector-line": "#879596",
   "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
+  "color-warning-200": "#fef571",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
@@ -1461,6 +1464,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
+  "color-error-700": "#c20000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
@@ -1536,6 +1540,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-stroke-chart-line": "#879596",
   "color-success-100": "#d9ffd6",
   "color-success-1000": "#172211",
+  "color-success-200": "#aeffa8",
   "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
@@ -1676,9 +1681,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-text-tutorial-hotspot-hover": "#99cbe4",
   "color-text-visual-accent-amber": "#ffbb45",
   "color-text-visual-accent-blue": "#75cfff",
-  "color-text-visual-accent-green": "#00e500",
+  "color-text-visual-accent-green": "#aeffa8",
   "color-text-visual-accent-grey": "#d5dbdb",
-  "color-text-visual-accent-indigo": "#00a1c9",
+  "color-text-visual-accent-indigo": "#44b9d6",
   "color-text-visual-accent-lime": "#acff2e",
   "color-text-visual-accent-magenta": "#ff57e9",
   "color-text-visual-accent-orange": "#ff997a",
@@ -1687,11 +1692,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-text-visual-accent-red": "#ff5d64",
   "color-text-visual-accent-teal": "#00f5e4",
   "color-text-visual-accent-violet": "#b2a8ff",
-  "color-text-visual-accent-yellow": "#ffe347",
+  "color-text-visual-accent-yellow": "#fef571",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#d5dbdb",
   "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
+  "color-warning-200": "#fef571",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
@@ -2438,6 +2444,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
+  "color-error-700": "#c20000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
@@ -2513,6 +2520,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-stroke-chart-line": "#879596",
   "color-success-100": "#d9ffd6",
   "color-success-1000": "#172211",
+  "color-success-200": "#aeffa8",
   "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
@@ -2653,15 +2661,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-text-tutorial-hotspot-hover": "#0a4a74",
   "color-text-visual-accent-amber": "#9e3700",
   "color-text-visual-accent-blue": "#006ce0",
-  "color-text-visual-accent-green": "#005c26",
-  "color-text-visual-accent-grey": "#21252c",
+  "color-text-visual-accent-green": "#1d8102",
+  "color-text-visual-accent-grey": "#1a2029",
   "color-text-visual-accent-indigo": "#003b8f",
   "color-text-visual-accent-lime": "#007000",
   "color-text-visual-accent-magenta": "#b2008f",
   "color-text-visual-accent-orange": "#a82700",
   "color-text-visual-accent-pink": "#bb005d",
   "color-text-visual-accent-purple": "#962eff",
-  "color-text-visual-accent-red": "#990000",
+  "color-text-visual-accent-red": "#c20000",
   "color-text-visual-accent-teal": "#008077",
   "color-text-visual-accent-violet": "#6842ff",
   "color-text-visual-accent-yellow": "#906806",
@@ -2669,6 +2677,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-tree-view-connector-line": "#879596",
   "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
+  "color-warning-200": "#fef571",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
@@ -3415,6 +3424,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
+  "color-error-700": "#c20000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
@@ -3490,6 +3500,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-stroke-chart-line": "#879596",
   "color-success-100": "#d9ffd6",
   "color-success-1000": "#172211",
+  "color-success-200": "#aeffa8",
   "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
@@ -3630,15 +3641,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-text-tutorial-hotspot-hover": "#0a4a74",
   "color-text-visual-accent-amber": "#9e3700",
   "color-text-visual-accent-blue": "#006ce0",
-  "color-text-visual-accent-green": "#005c26",
-  "color-text-visual-accent-grey": "#21252c",
+  "color-text-visual-accent-green": "#1d8102",
+  "color-text-visual-accent-grey": "#1a2029",
   "color-text-visual-accent-indigo": "#003b8f",
   "color-text-visual-accent-lime": "#007000",
   "color-text-visual-accent-magenta": "#b2008f",
   "color-text-visual-accent-orange": "#a82700",
   "color-text-visual-accent-pink": "#bb005d",
   "color-text-visual-accent-purple": "#962eff",
-  "color-text-visual-accent-red": "#990000",
+  "color-text-visual-accent-red": "#c20000",
   "color-text-visual-accent-teal": "#008077",
   "color-text-visual-accent-violet": "#6842ff",
   "color-text-visual-accent-yellow": "#906806",
@@ -3646,6 +3657,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-tree-view-connector-line": "#879596",
   "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
+  "color-warning-200": "#fef571",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
@@ -4392,6 +4404,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
+  "color-error-700": "#c20000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
@@ -4467,6 +4480,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-stroke-chart-line": "#8c8c94",
   "color-success-100": "#d9ffd6",
   "color-success-1000": "#001401",
+  "color-success-200": "#aeffa8",
   "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
@@ -4607,15 +4621,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-text-tutorial-hotspot-hover": "#002b66",
   "color-text-visual-accent-amber": "#9e3700",
   "color-text-visual-accent-blue": "#006ce0",
-  "color-text-visual-accent-green": "#005c26",
-  "color-text-visual-accent-grey": "#1b232d",
+  "color-text-visual-accent-green": "#00802f",
+  "color-text-visual-accent-grey": "#161d26",
   "color-text-visual-accent-indigo": "#003b8f",
   "color-text-visual-accent-lime": "#007000",
   "color-text-visual-accent-magenta": "#b2008f",
   "color-text-visual-accent-orange": "#a82700",
   "color-text-visual-accent-pink": "#bb005d",
   "color-text-visual-accent-purple": "#962eff",
-  "color-text-visual-accent-red": "#990000",
+  "color-text-visual-accent-red": "#c20000",
   "color-text-visual-accent-teal": "#008077",
   "color-text-visual-accent-violet": "#6842ff",
   "color-text-visual-accent-yellow": "#855900",
@@ -4623,6 +4637,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-tree-view-connector-line": "#8c8c94",
   "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
+  "color-warning-200": "#fef571",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
@@ -5369,6 +5384,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
+  "color-error-700": "#c20000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
@@ -5444,6 +5460,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-stroke-chart-line": "#8c8c94",
   "color-success-100": "#d9ffd6",
   "color-success-1000": "#001401",
+  "color-success-200": "#aeffa8",
   "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
@@ -5584,15 +5601,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-tutorial-hotspot-hover": "#002b66",
   "color-text-visual-accent-amber": "#9e3700",
   "color-text-visual-accent-blue": "#006ce0",
-  "color-text-visual-accent-green": "#005c26",
-  "color-text-visual-accent-grey": "#1b232d",
+  "color-text-visual-accent-green": "#00802f",
+  "color-text-visual-accent-grey": "#161d26",
   "color-text-visual-accent-indigo": "#003b8f",
   "color-text-visual-accent-lime": "#007000",
   "color-text-visual-accent-magenta": "#b2008f",
   "color-text-visual-accent-orange": "#a82700",
   "color-text-visual-accent-pink": "#bb005d",
   "color-text-visual-accent-purple": "#962eff",
-  "color-text-visual-accent-red": "#990000",
+  "color-text-visual-accent-red": "#c20000",
   "color-text-visual-accent-teal": "#008077",
   "color-text-visual-accent-violet": "#6842ff",
   "color-text-visual-accent-yellow": "#855900",
@@ -5600,6 +5617,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-tree-view-connector-line": "#8c8c94",
   "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
+  "color-warning-200": "#fef571",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
@@ -6346,6 +6364,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
+  "color-error-700": "#c20000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
@@ -6421,6 +6440,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-stroke-chart-line": "#8c8c94",
   "color-success-100": "#d9ffd6",
   "color-success-1000": "#001401",
+  "color-success-200": "#aeffa8",
   "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
@@ -6561,9 +6581,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-tutorial-hotspot-hover": "#75cfff",
   "color-text-visual-accent-amber": "#ffbb45",
   "color-text-visual-accent-blue": "#75cfff",
-  "color-text-visual-accent-green": "#00e500",
+  "color-text-visual-accent-green": "#aeffa8",
   "color-text-visual-accent-grey": "#dedee3",
-  "color-text-visual-accent-indigo": "#42b4ff",
+  "color-text-visual-accent-indigo": "#75cfff",
   "color-text-visual-accent-lime": "#acff2e",
   "color-text-visual-accent-magenta": "#ff57e9",
   "color-text-visual-accent-orange": "#ff997a",
@@ -6572,11 +6592,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-visual-accent-red": "#ff7a7a",
   "color-text-visual-accent-teal": "#00f5e4",
   "color-text-visual-accent-violet": "#b2a8ff",
-  "color-text-visual-accent-yellow": "#ffe347",
+  "color-text-visual-accent-yellow": "#fef571",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#dedee3",
   "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
+  "color-warning-200": "#fef571",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
@@ -7323,6 +7344,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
+  "color-error-700": "#c20000",
   "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
@@ -7398,6 +7420,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-stroke-chart-line": "#8c8c94",
   "color-success-100": "#d9ffd6",
   "color-success-1000": "#001401",
+  "color-success-200": "#aeffa8",
   "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
@@ -7538,9 +7561,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-tutorial-hotspot-hover": "#75cfff",
   "color-text-visual-accent-amber": "#ffbb45",
   "color-text-visual-accent-blue": "#75cfff",
-  "color-text-visual-accent-green": "#00e500",
+  "color-text-visual-accent-green": "#aeffa8",
   "color-text-visual-accent-grey": "#dedee3",
-  "color-text-visual-accent-indigo": "#42b4ff",
+  "color-text-visual-accent-indigo": "#75cfff",
   "color-text-visual-accent-lime": "#acff2e",
   "color-text-visual-accent-magenta": "#ff57e9",
   "color-text-visual-accent-orange": "#ff997a",
@@ -7549,11 +7572,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-visual-accent-red": "#ff7a7a",
   "color-text-visual-accent-teal": "#00f5e4",
   "color-text-visual-accent-violet": "#b2a8ff",
-  "color-text-visual-accent-yellow": "#ffe347",
+  "color-text-visual-accent-yellow": "#fef571",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#dedee3",
   "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
+  "color-warning-200": "#fef571",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
diff --git a/style-dictionary/one-theme/color-palette.ts b/style-dictionary/one-theme/color-palette.ts
index 3403913666..c35e285648 100644
--- a/style-dictionary/one-theme/color-palette.ts
+++ b/style-dictionary/one-theme/color-palette.ts
@@ -148,6 +148,7 @@ const referenceTokens: ReferenceTokens = {
     warning: {
       50: brand.colorYellow50,
       100: brand.colorYellow100,
+      200: brand.colorYellow200,
       300: brand.colorYellow300,
       400: brand.colorYellow400,
       500: brand.colorYellow500,
diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index d6a4dc1a4b..41eb730e03 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -200,6 +200,7 @@ const referenceTokens: ReferenceTokens = {
       100: brand.colorRed100,
       400: brand.colorRed400,
       600: brand.colorRed600,
+      700: brand.colorRed700,
       800: brand.colorRed800,
       900: brand.colorRed900,
       950: brand.colorRed950,
@@ -208,6 +209,7 @@ const referenceTokens: ReferenceTokens = {
     success: {
       50: brand.colorGreen50,
       100: brand.colorGreen100,
+      200: brand.colorGreen200,
       400: brand.colorGreen400,
       500: brand.colorGreen500,
       600: brand.colorGreen600,
@@ -218,6 +220,7 @@ const referenceTokens: ReferenceTokens = {
     warning: {
       50: brand.colorYellow50,
       100: brand.colorYellow100,
+      200: brand.colorYellow200,
       400: brand.colorYellow400,
       500: brand.colorYellow500,
       600: brand.colorYellow600,

From f47054938769fa5e8c237278d6dd9843b96710ae Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 24 Jul 2026 12:47:11 +0200
Subject: [PATCH 09/12] chore: Remove rgba converting function and apply raw
 rgba values

---
 .../__snapshots__/themes.test.ts.snap         |  6 +--
 style-dictionary/one-theme/colors.ts          | 11 +++--
 style-dictionary/utils/index.ts               | 13 ------
 style-dictionary/visual-refresh/colors.ts     | 44 +++++++++----------
 4 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index ef0c502cfd..e4867983f1 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -1200,7 +1200,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-visual-accent-grey": "#414750",
   "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)",
   "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)",
-  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.15)",
+  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.2)",
   "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)",
   "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)",
   "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)",
@@ -6100,7 +6100,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-visual-accent-grey": "#333843",
   "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)",
   "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)",
-  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.15)",
+  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.2)",
   "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)",
   "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)",
   "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)",
@@ -7080,7 +7080,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-visual-accent-grey": "#333843",
   "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)",
   "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)",
-  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.15)",
+  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.2)",
   "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)",
   "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)",
   "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)",
diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts
index b2ba394373..6b97a83a57 100644
--- a/style-dictionary/one-theme/colors.ts
+++ b/style-dictionary/one-theme/colors.ts
@@ -2,8 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import merge from 'lodash/merge.js';
 
-import { paletteTokens } from '../core/color-palette.js';
-import { expandColorDictionary, hexToRgba } from '../utils/index.js';
+import { expandColorDictionary } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
 import { tokens as parentTokens } from '../visual-refresh/colors.js';
 
@@ -131,10 +130,10 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundProgressBarValueDefault: { light: '{colorPrimary600}', dark: '{colorPrimary500}' },
 
   // ── Badge ─────────────────────────────────────────────────────────
-  colorBackgroundBadgeGreen: { light: '{colorSuccess100}', dark: hexToRgba(paletteTokens.colorGreen500!, 0.2) },
-  colorBackgroundBadgeBlue: { light: '{colorInfo100}', dark: hexToRgba(paletteTokens.colorIndigo500!, 0.2) },
-  colorBackgroundBadgeRed: { light: '{colorError100}', dark: hexToRgba(paletteTokens.colorRed500!, 0.2) },
-  colorBackgroundBadgeYellow: { light: '{colorWarning100}', dark: hexToRgba(paletteTokens.colorYellow500!, 0.2) },
+  colorBackgroundBadgeGreen: { light: '{colorSuccess100}', dark: 'rgba(43, 181, 52, 0.2)' },
+  colorBackgroundBadgeBlue: { light: '{colorInfo100}', dark: 'rgba(92, 127, 255, 0.2)' },
+  colorBackgroundBadgeRed: { light: '{colorError100}', dark: 'rgba(255, 61, 61, 0.2)' },
+  colorBackgroundBadgeYellow: { light: '{colorWarning100}', dark: 'rgba(251, 211, 50, 0.2)' },
   colorBackgroundBadgeGrey: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
   colorTextNotificationDefault: { light: '{colorNeutral100}', dark: '{colorNeutral100}' },
 
diff --git a/style-dictionary/utils/index.ts b/style-dictionary/utils/index.ts
index a12ae468b2..f60b6f45de 100644
--- a/style-dictionary/utils/index.ts
+++ b/style-dictionary/utils/index.ts
@@ -95,16 +95,3 @@ export const pickState = (tokenCategory: TokenCategory<string, Record<string, st
     })
   );
 };
-
-/**
- * Converts a 6-digit hex color string and an alpha value to an rgba() CSS string.
- * @param hex - A 6-digit hex color (with or without leading '#').
- * @param alpha - Opacity value between 0 and 1.
- */
-export const hexToRgba = (hex: string, alpha: number): string => {
-  const normalized = hex.replace('#', '');
-  const r = parseInt(normalized.slice(0, 2), 16);
-  const g = parseInt(normalized.slice(2, 4), 16);
-  const b = parseInt(normalized.slice(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 5d5969bfba..a66d124b99 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { paletteTokens } from '../core/color-palette.js';
-import { expandColorDictionary, hexToRgba } from '../utils/index.js';
+import { expandColorDictionary } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
 
 const tokens: StyleDictionary.ColorsDictionary = {
@@ -379,59 +379,59 @@ const tokens: StyleDictionary.ColorsDictionary = {
   // ── Visual accent ───────────────────────────────────
   colorBackgroundVisualAccentRed: {
     light: paletteTokens.colorRed100!,
-    dark: hexToRgba(paletteTokens.colorRed500!, 0.2),
+    dark: 'rgba(255, 61, 61, 0.2)',
   },
   colorBackgroundVisualAccentYellow: {
     light: paletteTokens.colorYellow100!,
-    dark: hexToRgba(paletteTokens.colorYellow500!, 0.2),
+    dark: 'rgba(251, 211, 50, 0.2)',
   },
   colorBackgroundVisualAccentIndigo: {
     light: paletteTokens.colorIndigo100!,
-    dark: hexToRgba(paletteTokens.colorIndigo500!, 0.2),
+    dark: 'rgba(92, 127, 255, 0.2)',
   },
   colorBackgroundVisualAccentGreen: {
     light: paletteTokens.colorGreen100!,
-    dark: hexToRgba(paletteTokens.colorGreen500!, 0.2),
+    dark: 'rgba(43, 181, 52, 0.2)',
   },
   colorBackgroundVisualAccentOrange: {
-    light: hexToRgba(paletteTokens.colorOrange100!, 0.6),
-    dark: hexToRgba(paletteTokens.colorOrange500!, 0.2),
+    light: 'rgba(255, 224, 214, 0.6)',
+    dark: 'rgba(255, 75, 20, 0.2)',
   },
   colorBackgroundVisualAccentPurple: {
-    light: hexToRgba(paletteTokens.colorPurple100!, 0.6),
-    dark: hexToRgba(paletteTokens.colorPurple500!, 0.2),
+    light: 'rgba(242, 229, 255, 0.6)',
+    dark: 'rgba(173, 92, 255, 0.2)',
   },
   colorBackgroundVisualAccentLime: {
     light: '{colorLime100}',
-    dark: hexToRgba(paletteTokens.colorLime500!, 0.2),
+    dark: 'rgba(49, 184, 0, 0.2)',
   },
   colorBackgroundVisualAccentGrey: {
     light: '{colorNeutral250}',
     dark: '{colorNeutral700}',
   },
   colorBackgroundVisualAccentTeal: {
-    light: hexToRgba(paletteTokens.colorTeal100!, 0.7),
-    dark: hexToRgba(paletteTokens.colorTeal500!, 0.2),
+    light: 'rgba(204, 255, 252, 0.7)',
+    dark: 'rgba(0, 173, 162, 0.2)',
   },
   colorBackgroundVisualAccentBlue: {
-    light: hexToRgba(paletteTokens.colorBlue100!, 0.6),
-    dark: hexToRgba(paletteTokens.colorBlue500!, 0.2),
+    light: 'rgba(209, 241, 255, 0.6)',
+    dark: 'rgba(0, 153, 255, 0.2)',
   },
   colorBackgroundVisualAccentViolet: {
-    light: hexToRgba(paletteTokens.colorViolet100!, 0.6),
-    dark: hexToRgba(paletteTokens.colorViolet500!, 0.2),
+    light: 'rgba(232, 229, 255, 0.6)',
+    dark: 'rgba(133, 117, 255, 0.2)',
   },
   colorBackgroundVisualAccentMagenta: {
-    light: hexToRgba(paletteTokens.colorMagenta100!, 0.6),
-    dark: hexToRgba(paletteTokens.colorMagenta500!, 0.15),
+    light: 'rgba(255, 224, 251, 0.6)',
+    dark: 'rgba(255, 26, 224, 0.2)',
   },
   colorBackgroundVisualAccentPink: {
-    light: hexToRgba(paletteTokens.colorPink100!, 0.7),
-    dark: hexToRgba(paletteTokens.colorPink500!, 0.2),
+    light: 'rgba(255, 224, 240, 0.7)',
+    dark: 'rgba(255, 51, 153, 0.2)',
   },
   colorBackgroundVisualAccentAmber: {
-    light: hexToRgba(paletteTokens.colorAmber100!, 0.7),
-    dark: hexToRgba(paletteTokens.colorAmber500!, 0.2),
+    light: 'rgba(255, 232, 189, 0.7)',
+    dark: 'rgba(250, 111, 0, 0.2)',
   },
   colorTextVisualAccentRed: { light: '{colorError700}', dark: '{colorError400}' },
   colorTextVisualAccentYellow: { light: '{colorWarning900}', dark: '{colorWarning200}' },

From b3214e8e37a9e9ab0c8d0aff7720218ef3d7f3b4 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 27 Jul 2026 09:29:33 +0900
Subject: [PATCH 10/12] chore: Increase size limit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index adfe07c55b..27237b2daa 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1360 kB",
+      "limit": "1370 kB",
       "ignore": "react-dom"
     }
   ],

From 87e5ad1f539ccfefe3cfc73e849f51112ff88e04 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 8 Oct 2026 11:17:53 +0200
Subject: [PATCH 11/12] chore: Consolidate visualAccent color options

---
 pages/box/visual-accent.page.tsx              |  9 -------
 .../__snapshots__/documenter.test.ts.snap     |  6 -----
 src/box/__tests__/box.test.tsx                |  2 +-
 src/box/interfaces.ts                         | 19 ++++-----------
 src/box/visual-accent.scss                    | 24 -------------------
 5 files changed, 5 insertions(+), 55 deletions(-)

diff --git a/pages/box/visual-accent.page.tsx b/pages/box/visual-accent.page.tsx
index 906f75144c..e8c18d2b38 100644
--- a/pages/box/visual-accent.page.tsx
+++ b/pages/box/visual-accent.page.tsx
@@ -20,17 +20,8 @@ const ALL_VARIANTS: BoxProps.VisualAccent.Color[] = [
   'red',
   'green',
   'yellow',
-
-  'amber',
   'teal',
   'purple',
-  'blue',
-  'magenta',
-  'lime',
-
-  'violet',
-
-  'pink',
   'orange',
 ];
 
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 8c7ac5b5a1..b1f9c6ca25 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -5229,20 +5229,14 @@ This is a One Theme only feature and must not be used in VR.",
               "name": "BoxProps.VisualAccent.Color",
               "type": "union",
               "values": [
-                "blue",
                 "green",
                 "grey",
                 "indigo",
-                "lime",
-                "magenta",
                 "orange",
-                "pink",
                 "purple",
                 "red",
                 "teal",
-                "violet",
                 "yellow",
-                "amber",
               ],
             },
             "name": "color",
diff --git a/src/box/__tests__/box.test.tsx b/src/box/__tests__/box.test.tsx
index 5117f998b2..d07af28b85 100644
--- a/src/box/__tests__/box.test.tsx
+++ b/src/box/__tests__/box.test.tsx
@@ -199,8 +199,8 @@ describe('Box', () => {
         'green',
         'orange',
         'purple',
-        'lime',
         'grey',
+        'teal',
       ];
       colors.forEach(color => {
         const boxWrapper = renderBox({ visualAccent: { color } });
diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts
index 8c3b5f1fd0..515ff570e8 100644
--- a/src/box/interfaces.ts
+++ b/src/box/interfaces.ts
@@ -187,6 +187,9 @@ export namespace BoxProps {
      * The coordinated background and foreground color pair applied to the accent wrapper.
      * Each color works in both light and dark modes.
      *
+     * Use one of the following color options: `indigo`, `yellow`, `red`, `green`, `grey`,
+     * `purple`, `orange`, or `teal`.
+     *
      * The background color is applied directly to the wrapper. The foreground color is applied
      * as the wrapper's CSS `color` and is therefore only picked up by content that inherits the
      * current color, such as an `Icon` or a nested `Box` with `color="inherit"`. Content that
@@ -215,21 +218,7 @@ export namespace BoxProps {
   }
 
   export namespace VisualAccent {
-    export type Color =
-      | 'red'
-      | 'yellow'
-      | 'indigo'
-      | 'green'
-      | 'orange'
-      | 'purple'
-      | 'lime'
-      | 'grey'
-      | 'teal'
-      | 'blue'
-      | 'violet'
-      | 'magenta'
-      | 'pink'
-      | 'amber';
+    export type Color = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'grey' | 'teal';
     export type AspectRatio = 'auto' | 'equal';
     export type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full';
   }
diff --git a/src/box/visual-accent.scss b/src/box/visual-accent.scss
index cdba30f1de..8944dc6f7b 100644
--- a/src/box/visual-accent.scss
+++ b/src/box/visual-accent.scss
@@ -109,10 +109,6 @@ $accent-colors: (
     background: awsui.$color-background-visual-accent-purple,
     foreground: awsui.$color-text-visual-accent-purple,
   ),
-  'lime': (
-    background: awsui.$color-background-visual-accent-lime,
-    foreground: awsui.$color-text-visual-accent-lime,
-  ),
   'grey': (
     background: awsui.$color-background-visual-accent-grey,
     foreground: awsui.$color-text-visual-accent-grey,
@@ -121,26 +117,6 @@ $accent-colors: (
     background: awsui.$color-background-visual-accent-teal,
     foreground: awsui.$color-text-visual-accent-teal,
   ),
-  'blue': (
-    background: awsui.$color-background-visual-accent-blue,
-    foreground: awsui.$color-text-visual-accent-blue,
-  ),
-  'violet': (
-    background: awsui.$color-background-visual-accent-violet,
-    foreground: awsui.$color-text-visual-accent-violet,
-  ),
-  'magenta': (
-    background: awsui.$color-background-visual-accent-magenta,
-    foreground: awsui.$color-text-visual-accent-magenta,
-  ),
-  'pink': (
-    background: awsui.$color-background-visual-accent-pink,
-    foreground: awsui.$color-text-visual-accent-pink,
-  ),
-  'amber': (
-    background: awsui.$color-background-visual-accent-amber,
-    foreground: awsui.$color-text-visual-accent-amber,
-  ),
 );
 
 @each $accent, $colors in $accent-colors {

From df6e9564ae9fa5e4eb470ba16ec611b386989648 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 8 Oct 2026 12:39:14 +0200
Subject: [PATCH 12/12] chore: Update snapshots

---
 .../__snapshots__/themes.test.ts.snap         | 104 ------------------
 1 file changed, 104 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index ddfdd5a2ce..7320636eea 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -226,19 +226,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-toggle-button-normal-pressed": "#eaeded",
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
-  "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)",
-  "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)",
   "color-background-visual-accent-green": "#d9ffd6",
   "color-background-visual-accent-grey": "#eaeded",
   "color-background-visual-accent-indigo": "#dbe4ff",
-  "color-background-visual-accent-lime": "#ebffcc",
-  "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)",
   "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)",
-  "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)",
   "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)",
   "color-background-visual-accent-red": "#ffe0e0",
   "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)",
-  "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)",
   "color-background-visual-accent-yellow": "#fffbbd",
   "color-black": "#000000",
   "color-board-placeholder-active": "#d5dbdb",
@@ -527,7 +521,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
-  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -727,19 +720,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-text-top-navigation-title": "#16191f",
   "color-text-tutorial-hotspot-default": "#0073bb",
   "color-text-tutorial-hotspot-hover": "#0a4a74",
-  "color-text-visual-accent-amber": "#9e3700",
-  "color-text-visual-accent-blue": "#006ce0",
   "color-text-visual-accent-green": "#1d8102",
   "color-text-visual-accent-grey": "#1a2029",
   "color-text-visual-accent-indigo": "#003b8f",
-  "color-text-visual-accent-lime": "#007000",
-  "color-text-visual-accent-magenta": "#b2008f",
   "color-text-visual-accent-orange": "#a82700",
-  "color-text-visual-accent-pink": "#bb005d",
   "color-text-visual-accent-purple": "#962eff",
   "color-text-visual-accent-red": "#c20000",
   "color-text-visual-accent-teal": "#008077",
-  "color-text-visual-accent-violet": "#6842ff",
   "color-text-visual-accent-yellow": "#906806",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
@@ -1252,19 +1239,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-toggle-button-normal-pressed": "#16191f",
   "color-background-toggle-checked-disabled": "#0a4a74",
   "color-background-toggle-default": "#879596",
-  "color-background-visual-accent-amber": "rgba(250, 111, 0, 0.2)",
-  "color-background-visual-accent-blue": "rgba(0, 153, 255, 0.2)",
   "color-background-visual-accent-green": "rgba(43, 181, 52, 0.2)",
   "color-background-visual-accent-grey": "#414750",
   "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)",
-  "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)",
-  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.2)",
   "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)",
-  "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)",
   "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)",
   "color-background-visual-accent-red": "rgba(255, 61, 61, 0.2)",
   "color-background-visual-accent-teal": "rgba(0, 173, 162, 0.2)",
-  "color-background-visual-accent-violet": "rgba(133, 117, 255, 0.2)",
   "color-background-visual-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-black": "#000000",
   "color-board-placeholder-active": "#687078",
@@ -1553,7 +1534,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#44b9d6",
-  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -1753,19 +1733,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-text-top-navigation-title": "#fafafa",
   "color-text-tutorial-hotspot-default": "#44b9d6",
   "color-text-tutorial-hotspot-hover": "#99cbe4",
-  "color-text-visual-accent-amber": "#ffbb45",
-  "color-text-visual-accent-blue": "#75cfff",
   "color-text-visual-accent-green": "#aeffa8",
   "color-text-visual-accent-grey": "#d5dbdb",
   "color-text-visual-accent-indigo": "#44b9d6",
-  "color-text-visual-accent-lime": "#acff2e",
-  "color-text-visual-accent-magenta": "#ff57e9",
   "color-text-visual-accent-orange": "#ff997a",
-  "color-text-visual-accent-pink": "#ff99cc",
   "color-text-visual-accent-purple": "#d4a8ff",
   "color-text-visual-accent-red": "#ff5d64",
   "color-text-visual-accent-teal": "#00f5e4",
-  "color-text-visual-accent-violet": "#b2a8ff",
   "color-text-visual-accent-yellow": "#fef571",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#d5dbdb",
@@ -2278,19 +2252,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-toggle-button-normal-pressed": "#eaeded",
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
-  "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)",
-  "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)",
   "color-background-visual-accent-green": "#d9ffd6",
   "color-background-visual-accent-grey": "#eaeded",
   "color-background-visual-accent-indigo": "#dbe4ff",
-  "color-background-visual-accent-lime": "#ebffcc",
-  "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)",
   "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)",
-  "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)",
   "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)",
   "color-background-visual-accent-red": "#ffe0e0",
   "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)",
-  "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)",
   "color-background-visual-accent-yellow": "#fffbbd",
   "color-black": "#000000",
   "color-board-placeholder-active": "#d5dbdb",
@@ -2579,7 +2547,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
-  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -2779,19 +2746,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-text-top-navigation-title": "#16191f",
   "color-text-tutorial-hotspot-default": "#0073bb",
   "color-text-tutorial-hotspot-hover": "#0a4a74",
-  "color-text-visual-accent-amber": "#9e3700",
-  "color-text-visual-accent-blue": "#006ce0",
   "color-text-visual-accent-green": "#1d8102",
   "color-text-visual-accent-grey": "#1a2029",
   "color-text-visual-accent-indigo": "#003b8f",
-  "color-text-visual-accent-lime": "#007000",
-  "color-text-visual-accent-magenta": "#b2008f",
   "color-text-visual-accent-orange": "#a82700",
-  "color-text-visual-accent-pink": "#bb005d",
   "color-text-visual-accent-purple": "#962eff",
   "color-text-visual-accent-red": "#c20000",
   "color-text-visual-accent-teal": "#008077",
-  "color-text-visual-accent-violet": "#6842ff",
   "color-text-visual-accent-yellow": "#906806",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
@@ -3304,19 +3265,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-toggle-button-normal-pressed": "#eaeded",
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
-  "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)",
-  "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)",
   "color-background-visual-accent-green": "#d9ffd6",
   "color-background-visual-accent-grey": "#eaeded",
   "color-background-visual-accent-indigo": "#dbe4ff",
-  "color-background-visual-accent-lime": "#ebffcc",
-  "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)",
   "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)",
-  "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)",
   "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)",
   "color-background-visual-accent-red": "#ffe0e0",
   "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)",
-  "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)",
   "color-background-visual-accent-yellow": "#fffbbd",
   "color-black": "#000000",
   "color-board-placeholder-active": "#d5dbdb",
@@ -3605,7 +3560,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
-  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -3805,19 +3759,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-text-top-navigation-title": "#16191f",
   "color-text-tutorial-hotspot-default": "#0073bb",
   "color-text-tutorial-hotspot-hover": "#0a4a74",
-  "color-text-visual-accent-amber": "#9e3700",
-  "color-text-visual-accent-blue": "#006ce0",
   "color-text-visual-accent-green": "#1d8102",
   "color-text-visual-accent-grey": "#1a2029",
   "color-text-visual-accent-indigo": "#003b8f",
-  "color-text-visual-accent-lime": "#007000",
-  "color-text-visual-accent-magenta": "#b2008f",
   "color-text-visual-accent-orange": "#a82700",
-  "color-text-visual-accent-pink": "#bb005d",
   "color-text-visual-accent-purple": "#962eff",
   "color-text-visual-accent-red": "#c20000",
   "color-text-visual-accent-teal": "#008077",
-  "color-text-visual-accent-violet": "#6842ff",
   "color-text-visual-accent-yellow": "#906806",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
@@ -4330,19 +4278,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-toggle-button-normal-pressed": "#d1f1ff",
   "color-background-toggle-checked-disabled": "#b8e7ff",
   "color-background-toggle-default": "#424650",
-  "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)",
-  "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)",
   "color-background-visual-accent-green": "#d9ffd6",
   "color-background-visual-accent-grey": "#ebebf0",
   "color-background-visual-accent-indigo": "#dbe4ff",
-  "color-background-visual-accent-lime": "#ebffcc",
-  "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)",
   "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)",
-  "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)",
   "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)",
   "color-background-visual-accent-red": "#ffe0e0",
   "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)",
-  "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)",
   "color-background-visual-accent-yellow": "#fffbbd",
   "color-black": "#000000",
   "color-board-placeholder-active": "#ebebf0",
@@ -4631,7 +4573,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#006ce0",
-  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -4831,19 +4772,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-text-top-navigation-title": "#0f141a",
   "color-text-tutorial-hotspot-default": "#006ce0",
   "color-text-tutorial-hotspot-hover": "#002b66",
-  "color-text-visual-accent-amber": "#9e3700",
-  "color-text-visual-accent-blue": "#006ce0",
   "color-text-visual-accent-green": "#00802f",
   "color-text-visual-accent-grey": "#161d26",
   "color-text-visual-accent-indigo": "#003b8f",
-  "color-text-visual-accent-lime": "#007000",
-  "color-text-visual-accent-magenta": "#b2008f",
   "color-text-visual-accent-orange": "#a82700",
-  "color-text-visual-accent-pink": "#bb005d",
   "color-text-visual-accent-purple": "#962eff",
   "color-text-visual-accent-red": "#c20000",
   "color-text-visual-accent-teal": "#008077",
-  "color-text-visual-accent-violet": "#6842ff",
   "color-text-visual-accent-yellow": "#855900",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#8c8c94",
@@ -5356,19 +5291,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-button-normal-pressed": "#d1f1ff",
   "color-background-toggle-checked-disabled": "#b8e7ff",
   "color-background-toggle-default": "#424650",
-  "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)",
-  "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)",
   "color-background-visual-accent-green": "#d9ffd6",
   "color-background-visual-accent-grey": "#ebebf0",
   "color-background-visual-accent-indigo": "#dbe4ff",
-  "color-background-visual-accent-lime": "#ebffcc",
-  "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)",
   "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)",
-  "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)",
   "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)",
   "color-background-visual-accent-red": "#ffe0e0",
   "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)",
-  "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)",
   "color-background-visual-accent-yellow": "#fffbbd",
   "color-black": "#000000",
   "color-board-placeholder-active": "#ebebf0",
@@ -5657,7 +5586,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#006ce0",
-  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -5857,19 +5785,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-top-navigation-title": "#0f141a",
   "color-text-tutorial-hotspot-default": "#006ce0",
   "color-text-tutorial-hotspot-hover": "#002b66",
-  "color-text-visual-accent-amber": "#9e3700",
-  "color-text-visual-accent-blue": "#006ce0",
   "color-text-visual-accent-green": "#00802f",
   "color-text-visual-accent-grey": "#161d26",
   "color-text-visual-accent-indigo": "#003b8f",
-  "color-text-visual-accent-lime": "#007000",
-  "color-text-visual-accent-magenta": "#b2008f",
   "color-text-visual-accent-orange": "#a82700",
-  "color-text-visual-accent-pink": "#bb005d",
   "color-text-visual-accent-purple": "#962eff",
   "color-text-visual-accent-red": "#c20000",
   "color-text-visual-accent-teal": "#008077",
-  "color-text-visual-accent-violet": "#6842ff",
   "color-text-visual-accent-yellow": "#855900",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#8c8c94",
@@ -6382,19 +6304,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-button-normal-pressed": "#333843",
   "color-background-toggle-checked-disabled": "#002b66",
   "color-background-toggle-default": "#8c8c94",
-  "color-background-visual-accent-amber": "rgba(250, 111, 0, 0.2)",
-  "color-background-visual-accent-blue": "rgba(0, 153, 255, 0.2)",
   "color-background-visual-accent-green": "rgba(43, 181, 52, 0.2)",
   "color-background-visual-accent-grey": "#333843",
   "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)",
-  "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)",
-  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.2)",
   "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)",
-  "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)",
   "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)",
   "color-background-visual-accent-red": "rgba(255, 61, 61, 0.2)",
   "color-background-visual-accent-teal": "rgba(0, 173, 162, 0.2)",
-  "color-background-visual-accent-violet": "rgba(133, 117, 255, 0.2)",
   "color-background-visual-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-black": "#000000",
   "color-board-placeholder-active": "#656871",
@@ -6683,7 +6599,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#42b4ff",
-  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -6883,19 +6798,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-top-navigation-title": "#f9f9fa",
   "color-text-tutorial-hotspot-default": "#42b4ff",
   "color-text-tutorial-hotspot-hover": "#75cfff",
-  "color-text-visual-accent-amber": "#ffbb45",
-  "color-text-visual-accent-blue": "#75cfff",
   "color-text-visual-accent-green": "#aeffa8",
   "color-text-visual-accent-grey": "#dedee3",
   "color-text-visual-accent-indigo": "#75cfff",
-  "color-text-visual-accent-lime": "#acff2e",
-  "color-text-visual-accent-magenta": "#ff57e9",
   "color-text-visual-accent-orange": "#ff997a",
-  "color-text-visual-accent-pink": "#ff99cc",
   "color-text-visual-accent-purple": "#d4a8ff",
   "color-text-visual-accent-red": "#ff7a7a",
   "color-text-visual-accent-teal": "#00f5e4",
-  "color-text-visual-accent-violet": "#b2a8ff",
   "color-text-visual-accent-yellow": "#fef571",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#dedee3",
@@ -7408,19 +7317,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-button-normal-pressed": "#333843",
   "color-background-toggle-checked-disabled": "#002b66",
   "color-background-toggle-default": "#8c8c94",
-  "color-background-visual-accent-amber": "rgba(250, 111, 0, 0.2)",
-  "color-background-visual-accent-blue": "rgba(0, 153, 255, 0.2)",
   "color-background-visual-accent-green": "rgba(43, 181, 52, 0.2)",
   "color-background-visual-accent-grey": "#333843",
   "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)",
-  "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)",
-  "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.2)",
   "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)",
-  "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)",
   "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)",
   "color-background-visual-accent-red": "rgba(255, 61, 61, 0.2)",
   "color-background-visual-accent-teal": "rgba(0, 173, 162, 0.2)",
-  "color-background-visual-accent-violet": "rgba(133, 117, 255, 0.2)",
   "color-background-visual-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-black": "#000000",
   "color-board-placeholder-active": "#656871",
@@ -7709,7 +7612,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#42b4ff",
-  "color-lime-100": "#ebffcc",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -7909,19 +7811,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-top-navigation-title": "#f9f9fa",
   "color-text-tutorial-hotspot-default": "#42b4ff",
   "color-text-tutorial-hotspot-hover": "#75cfff",
-  "color-text-visual-accent-amber": "#ffbb45",
-  "color-text-visual-accent-blue": "#75cfff",
   "color-text-visual-accent-green": "#aeffa8",
   "color-text-visual-accent-grey": "#dedee3",
   "color-text-visual-accent-indigo": "#75cfff",
-  "color-text-visual-accent-lime": "#acff2e",
-  "color-text-visual-accent-magenta": "#ff57e9",
   "color-text-visual-accent-orange": "#ff997a",
-  "color-text-visual-accent-pink": "#ff99cc",
   "color-text-visual-accent-purple": "#d4a8ff",
   "color-text-visual-accent-red": "#ff7a7a",
   "color-text-visual-accent-teal": "#00f5e4",
-  "color-text-visual-accent-violet": "#b2a8ff",
   "color-text-visual-accent-yellow": "#fef571",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#dedee3",