From dc0fb6f6a4fc1ba9ebd6b066cdfd7ef578d034d6 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/10] 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 70657139e8..bcdb4d46d8 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 = {
@@ -391,9 +392,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 b66bbccb622893ded1c12e84cd624f2f42bca17a 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/10] 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 bcdb4d46d8..21b5d6fe30 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 3b5916d0f6065269e0f7133f4f26a4fa340b9460 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/10] 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 498ec5bd89..5fa4b7fed3 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -80,6 +80,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",
@@ -469,6 +483,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",
@@ -499,6 +514,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",
@@ -551,6 +567,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",
@@ -1030,6 +1060,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",
@@ -1419,6 +1463,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",
@@ -1449,6 +1494,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",
@@ -1501,6 +1547,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",
@@ -1980,6 +2040,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",
@@ -2369,6 +2443,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",
@@ -2399,6 +2474,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",
@@ -2451,6 +2527,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",
@@ -2930,6 +3020,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",
@@ -3319,6 +3423,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",
@@ -3349,6 +3454,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",
@@ -3401,6 +3507,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",
@@ -3880,6 +4000,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",
@@ -4269,6 +4403,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",
@@ -4299,6 +4434,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",
@@ -4351,6 +4487,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",
@@ -4830,6 +4980,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",
@@ -5219,6 +5383,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",
@@ -5249,6 +5414,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",
@@ -5301,6 +5467,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",
@@ -5780,6 +5960,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",
@@ -6169,6 +6363,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",
@@ -6199,6 +6394,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",
@@ -6251,6 +6447,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",
@@ -6730,6 +6940,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",
@@ -7119,6 +7343,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",
@@ -7149,6 +7374,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",
@@ -7201,6 +7427,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 a46d8dafb5..dac2e36045 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -5227,8 +5227,6 @@ Composes with existing Box props such as \`padding\` and \`margin\`.",
               "type": "union",
               "values": [
                 "blue",
-                "cyan",
-                "fuchsia",
                 "green",
                 "grey",
                 "indigo",
@@ -5241,8 +5239,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 3ad4c0a87a..22019ee664 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'
@@ -758,17 +754,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 21b5d6fe30..2c5c80d6cd 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -385,42 +385,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 c3f03d3400..ddf04544a7 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 7605dac2b9c811da9f0305d42ae249840fe7c1a2 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/10] 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 d1197178e87624adf1b13efbf51a4dba088d1d4d 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/10] 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 5fa4b7fed3..10fcde5939 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -84,7 +84,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)",
@@ -483,7 +483,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",
@@ -1064,7 +1063,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)",
@@ -1463,7 +1462,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",
@@ -2044,7 +2042,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)",
@@ -2443,7 +2441,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",
@@ -3024,7 +3021,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)",
@@ -3423,7 +3420,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",
@@ -4004,7 +4000,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)",
@@ -4403,7 +4399,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",
@@ -4984,7 +4979,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)",
@@ -5383,7 +5378,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",
@@ -5964,7 +5958,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)",
@@ -6363,7 +6357,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",
@@ -6944,7 +6937,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)",
@@ -7343,7 +7336,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 2c5c80d6cd..c828c3e224 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)',
@@ -385,14 +377,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!,
@@ -406,8 +401,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 70445a6eadb32b3e34d1f11af377573353d0d2f8 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/10] 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 10fcde5939..897d2b04f5 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -80,20 +80,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",
@@ -228,6 +214,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",
@@ -566,20 +566,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",
@@ -711,6 +697,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",
@@ -1059,20 +1059,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",
@@ -1207,6 +1193,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",
@@ -1545,20 +1545,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",
@@ -1690,6 +1676,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",
@@ -2038,20 +2038,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",
@@ -2186,6 +2172,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",
@@ -2524,20 +2524,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",
@@ -2669,6 +2655,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",
@@ -3017,20 +3017,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",
@@ -3165,6 +3151,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",
@@ -3503,20 +3503,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",
@@ -3648,6 +3634,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",
@@ -3996,20 +3996,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",
@@ -4144,6 +4130,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",
@@ -4482,20 +4482,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",
@@ -4627,6 +4613,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",
@@ -4975,20 +4975,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",
@@ -5123,6 +5109,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",
@@ -5461,20 +5461,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",
@@ -5606,6 +5592,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",
@@ -5954,20 +5954,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",
@@ -6102,6 +6088,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",
@@ -6440,20 +6440,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",
@@ -6585,6 +6571,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",
@@ -6933,20 +6933,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",
@@ -7081,6 +7067,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",
@@ -7419,20 +7419,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",
@@ -7564,6 +7550,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 22019ee664..c8c87850ea 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'
@@ -748,20 +748,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 c828c3e224..c576dae752 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -377,76 +377,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 ddf04544a7..d4c924a4b2 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 3e6bba6619a89780cd90b32d032838feaeee179d 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/10] 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 820088152643ed802bb9eec38bdf53a3c425b4ec 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/10] 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 897d2b04f5..7e0f1bb9b9 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",
@@ -1463,6 +1466,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",
@@ -1538,6 +1542,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",
@@ -1678,9 +1683,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",
@@ -1689,11 +1694,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",
@@ -2442,6 +2448,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",
@@ -2517,6 +2524,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",
@@ -2657,15 +2665,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",
@@ -2673,6 +2681,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",
@@ -3421,6 +3430,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",
@@ -3496,6 +3506,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",
@@ -3636,15 +3647,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",
@@ -3652,6 +3663,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",
@@ -4400,6 +4412,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",
@@ -4475,6 +4488,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",
@@ -4615,15 +4629,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",
@@ -4631,6 +4645,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",
@@ -5379,6 +5394,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",
@@ -5454,6 +5470,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",
@@ -5594,15 +5611,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",
@@ -5610,6 +5627,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",
@@ -6358,6 +6376,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",
@@ -6433,6 +6452,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",
@@ -6573,9 +6593,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",
@@ -6584,11 +6604,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",
@@ -7337,6 +7358,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",
@@ -7412,6 +7434,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",
@@ -7552,9 +7575,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",
@@ -7563,11 +7586,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 9e7719dc90a9ee71338a1847e96555968156ee59 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/10] 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 7e0f1bb9b9..30b658079c 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -1202,7 +1202,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)",
@@ -6112,7 +6112,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)",
@@ -7094,7 +7094,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 ac492158a7e0b5d85fb1c8245951136e27211026 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/10] 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"
     }
   ],