From dd9f9bcce0456f15157d399dc37612a0602b91ea Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Tue, 25 Mar 2025 11:32:30 +0100
Subject: [PATCH 01/35] apply second direction for vr improvements

---
 .../full-page-table.page.tsx                  |   67 +
 pages/app-layout-toolbar/with-wizard.page.tsx |  107 +
 .../__snapshots__/themes.test.ts.snap         |   24 +-
 .../__snapshots__/design-tokens.test.ts.snap  | 2791 ++++++++++++++++-
 src/app-layout-toolbar/index.tsx              |    5 +-
 src/code-editor/styles.scss                   |    4 +-
 src/input/styles.scss                         |    4 +-
 .../components/button-trigger/styles.scss     |    4 +-
 .../components/checkbox-icon/index.tsx        |    6 +-
 .../components/checkbox-icon/styles.scss      |    2 +-
 src/internal/styles/forms/mixins.scss         |    6 +-
 src/radio-group/radio-button.tsx              |    2 +-
 src/textarea/styles.scss                      |    4 +-
 src/tiles/styles.scss                         |    9 +-
 style-dictionary/utils/contexts.ts            |    8 +
 style-dictionary/utils/token-names.ts         |    2 +
 style-dictionary/visual-refresh/borders.ts    |    3 +-
 .../visual-refresh/color-palette.ts           |    1 +
 style-dictionary/visual-refresh/colors.ts     |    2 +-
 .../contexts/app-layout-toolbar.ts            |   17 +
 style-dictionary/visual-refresh/index.ts      |    2 +
 21 files changed, 2906 insertions(+), 164 deletions(-)
 create mode 100644 pages/app-layout-toolbar/full-page-table.page.tsx
 create mode 100644 pages/app-layout-toolbar/with-wizard.page.tsx
 create mode 100644 style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts

diff --git a/pages/app-layout-toolbar/full-page-table.page.tsx b/pages/app-layout-toolbar/full-page-table.page.tsx
new file mode 100644
index 0000000000..d6b5581478
--- /dev/null
+++ b/pages/app-layout-toolbar/full-page-table.page.tsx
@@ -0,0 +1,67 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useState } from 'react';
+
+import { AppLayoutToolbar, Button, Header, Link, Table } from '~components';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { Breadcrumbs, Footer, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks';
+import labels from '../app-layout/utils/labels';
+import * as toolsContent from '../app-layout/utils/tools-content';
+import { generateItems, Instance } from '../table/generate-data';
+import { columnsConfig } from '../table/shared-configs';
+import ScreenshotArea from '../utils/screenshot-area';
+
+type PageContext = React.Context<AppContextType<{ stickyNotifications: boolean }>>;
+
+const items = generateItems(20);
+
+export default function () {
+  const [toolsOpen, setToolsOpen] = useState(false);
+  const [selectedTool, setSelectedTool] = useState<keyof typeof toolsContent>('long');
+  const { urlParams } = useContext(AppContext as PageContext);
+
+  function openHelp(article: keyof typeof toolsContent) {
+    setToolsOpen(true);
+    setSelectedTool(article);
+  }
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayoutToolbar
+        ariaLabels={labels}
+        breadcrumbs={<Breadcrumbs />}
+        navigation={<Navigation />}
+        contentType="table"
+        tools={<Tools>{toolsContent[selectedTool]}</Tools>}
+        toolsOpen={toolsOpen}
+        onToolsChange={({ detail }) => setToolsOpen(detail.open)}
+        notifications={<Notifications />}
+        stickyNotifications={urlParams.stickyNotifications}
+        content={
+          <Table<Instance>
+            header={
+              <Header
+                variant="awsui-h1-sticky"
+                description="Demo page with footer"
+                info={
+                  <Link variant="info" onFollow={() => openHelp('long')}>
+                    Long help text
+                  </Link>
+                }
+                actions={<Button variant="primary">Create</Button>}
+              >
+                Sticky Scrollbar Example
+              </Header>
+            }
+            stickyHeader={true}
+            variant="full-page"
+            columnDefinitions={columnsConfig}
+            items={items}
+          />
+        }
+      />
+      <Footer legacyConsoleNav={false} />
+    </ScreenshotArea>
+  );
+}
diff --git a/pages/app-layout-toolbar/with-wizard.page.tsx b/pages/app-layout-toolbar/with-wizard.page.tsx
new file mode 100644
index 0000000000..6fe801d9c3
--- /dev/null
+++ b/pages/app-layout-toolbar/with-wizard.page.tsx
@@ -0,0 +1,107 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useState } from 'react';
+
+import {
+  AppLayoutToolbar,
+  Box,
+  Button,
+  ColumnLayout,
+  Container,
+  Header,
+  SpaceBetween,
+  Table,
+  Wizard,
+} from '~components';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { Breadcrumbs } from '../app-layout/utils/content-blocks';
+import labels from '../app-layout/utils/labels';
+import { generateItems, Instance } from '../table/generate-data';
+import { columnsConfig } from '../table/shared-configs';
+import ScreenshotArea from '../utils/screenshot-area';
+
+type DemoContext = React.Context<
+  AppContextType<{ hasBreadcrumbs: boolean; hasNotifications: boolean; disableOverlap: boolean }>
+>;
+
+const items = generateItems(20);
+
+export default function () {
+  const { urlParams } = useContext(AppContext as DemoContext);
+  const [activeStepIndex, setActiveStepIndex] = useState(0);
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayoutToolbar
+        ariaLabels={labels}
+        navigationHide={false}
+        breadcrumbs={urlParams.hasBreadcrumbs && <Breadcrumbs />}
+        content={
+          <Wizard
+            i18nStrings={{
+              stepNumberLabel: stepNumber => `Step ${stepNumber}`,
+              collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`,
+              skipToButtonLabel: step => `Skip to ${step.title}`,
+              navigationAriaLabel: 'Steps',
+              cancelButton: 'Cancel',
+              previousButton: 'Previous',
+              nextButton: 'Next',
+              submitButton: 'Launch instance',
+              optional: 'optional',
+            }}
+            onNavigate={({ detail }) => setActiveStepIndex(detail.requestedStepIndex)}
+            activeStepIndex={activeStepIndex}
+            allowSkipTo={true}
+            steps={[
+              {
+                title: 'Add storage',
+                content: (
+                  <Box>
+                    <Table<Instance>
+                      header={
+                        <Header
+                          variant="awsui-h1-sticky"
+                          description="Demo page with footer"
+                          actions={<Button variant="primary">Create</Button>}
+                        >
+                          Sticky Scrollbar Example
+                        </Header>
+                      }
+                      columnDefinitions={columnsConfig}
+                      items={items}
+                    />
+                  </Box>
+                ),
+                isOptional: true,
+              },
+              {
+                title: 'Review and launch',
+                content: (
+                  <SpaceBetween size="xs">
+                    <Header variant="h3" actions={<Button onClick={() => setActiveStepIndex(0)}>Edit</Button>}>
+                      Step 1: Instance type
+                    </Header>
+                    <Container header={<Header variant="h2">Container title</Header>}>
+                      <ColumnLayout columns={2} variant="text-grid">
+                        <div>
+                          <Box variant="awsui-key-label">First field</Box>
+                          <div>Value</div>
+                        </div>
+                        <div>
+                          <Box variant="awsui-key-label">Second Field</Box>
+                          <div>Value</div>
+                        </div>
+                      </ColumnLayout>
+                    </Container>
+                  </SpaceBetween>
+                ),
+              },
+            ]}
+          />
+        }
+        contentType="wizard"
+      />
+    </ScreenshotArea>
+  );
+}
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index dd4ef32afc..cff9d38e13 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -42,6 +42,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-field": "1px",
+  "border-width-form-control": "1px",
   "border-width-popover": "1px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
@@ -707,6 +708,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-field": "1px",
+  "border-width-form-control": "1px",
   "border-width-popover": "1px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
@@ -1372,6 +1374,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-field": "1px",
+  "border-width-form-control": "1px",
   "border-width-popover": "1px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
@@ -2037,6 +2040,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-field": "1px",
+  "border-width-form-control": "1px",
   "border-width-popover": "1px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
@@ -2666,7 +2670,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -2702,6 +2706,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-field": "2px",
+  "border-width-form-control": "1px",
   "border-width-popover": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
@@ -2828,7 +2833,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#002b66",
+  "color-border-input-focused": "#006ce0",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
@@ -3331,7 +3336,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -3367,6 +3372,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-field": "2px",
+  "border-width-form-control": "1px",
   "border-width-popover": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
@@ -3493,7 +3499,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#002b66",
+  "color-border-input-focused": "#006ce0",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
@@ -3996,7 +4002,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4032,6 +4038,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-field": "2px",
+  "border-width-form-control": "1px",
   "border-width-popover": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
@@ -4158,7 +4165,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#b8e7ff",
+  "color-border-input-focused": "#75cfff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
@@ -4661,7 +4668,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4697,6 +4704,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-field": "2px",
+  "border-width-form-control": "1px",
   "border-width-popover": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
@@ -4823,7 +4831,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#b8e7ff",
+  "color-border-input-focused": "#75cfff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index d0e5119c22..a8b6800efe 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -18244,8 +18244,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -20364,14 +20364,2539 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of shaded table cells.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-chat-bubble-incoming": {
+          "$description": "The background color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-chat-bubble-outgoing": {
+          "$description": "The background color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-container-content": {
+          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-container-header": {
+          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-checked": {
+          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-control-default": {
+          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-disabled": {
+          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-default": {
+          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-dropdown-item-filter-match": {
+          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-hover": {
+          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
+          "$value": {
+            "dark": "#131920",
+            "light": "#131920",
+          },
+        },
+        "color-background-home-header": {
+          "$description": "The background color of the home header, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-input-default": {
+          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-input-disabled": {
+          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-item-selected": {
+          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-layout-main": {
+          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-layout-toggle-active": {
+          "$description": "The background color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-default": {
+          "$description": "The default background color of the app layout toggle button.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-hover": {
+          "$description": "The background color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-layout-toggle-selected-active": {
+          "$description": "The background color of the app layout toggle button when it's selected and active.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-default": {
+          "$description": "The default background color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-hover": {
+          "$description": "The background color of the app layout toggle button on hover when it's selected.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-background-loading-bar-gen-ai": {
+          "$description": "The background color of gen-ai loading bars.",
+          "$value": {
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+          },
+        },
+        "color-background-notification-blue": {
+          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-notification-green": {
+          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
+          "$value": {
+            "dark": "#00802f",
+            "light": "#00802f",
+          },
+        },
+        "color-background-notification-grey": {
+          "$description": "Background color for grey notifications. For example: grey badges.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-red": {
+          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
+          "$value": {
+            "dark": "#db0000",
+            "light": "#db0000",
+          },
+        },
+        "color-background-notification-severity-critical": {
+          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#870303",
+          },
+        },
+        "color-background-notification-severity-high": {
+          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ce3311",
+          },
+        },
+        "color-background-notification-severity-low": {
+          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#f2cd54",
+            "light": "#f2cd54",
+          },
+        },
+        "color-background-notification-severity-medium": {
+          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#f89256",
+          },
+        },
+        "color-background-notification-severity-neutral": {
+          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-yellow": {
+          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
+        "color-background-popover": {
+          "$description": "Background color for the popover container.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-segment-active": {
+          "$description": "The background color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-segment-default": {
+          "$description": "The background color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-segment-disabled": {
+          "$description": "The background color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-segment-hover": {
+          "$description": "The background color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "color-background-status-error": {
+          "$description": "The background color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#1f0000",
+            "light": "#1f0000",
+          },
+        },
+        "color-background-status-info": {
+          "$description": "The background color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-status-success": {
+          "$description": "The background color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#001401",
+            "light": "#001401",
+          },
+        },
+        "color-background-status-warning": {
+          "$description": "The background color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#191100",
+            "light": "#191100",
+          },
+        },
+        "color-background-toggle-button-normal-pressed": {
+          "$description": "The background color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-toggle-checked-disabled": {
+          "$description": "The background color of checked toggles in disabled state.",
+          "$value": {
+            "dark": "#002b66",
+            "light": "#002b66",
+          },
+        },
+        "color-board-placeholder-active": {
+          "$description": "The color of board placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-board-placeholder-hover": {
+          "$description": "The color of board placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-border-button-normal-active": {
+          "$description": "The border color of normal buttons in active state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-normal-default": {
+          "$description": "The border color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-button-normal-disabled": {
+          "$description": "The border color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-button-normal-hover": {
+          "$description": "The border color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-primary-disabled": {
+          "$description": "The border color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-container-top": {
+          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-border-control-default": {
+          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-border-divider-default": {
+          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-divider-secondary": {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-dropdown-item-focused": {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-dropdown-item-hover": {
+          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-default": {
+          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-focused": {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-border-item-focused": {
+          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-border-item-selected": {
+          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-segment-active": {
+          "$description": "The border color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-default": {
+          "$description": "The border color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-disabled": {
+          "$description": "The border color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-hover": {
+          "$description": "The border color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-status-error": {
+          "$description": "The border color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-border-status-info": {
+          "$description": "The border color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-status-success": {
+          "$description": "The border color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-border-status-warning": {
+          "$description": "The border color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-border-toggle-button-normal-pressed": {
+          "$description": "The border color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-charts-blue-1-1000": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#b3e4f8",
+            "light": "#01437d",
+          },
+        },
+        "color-charts-blue-1-1100": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#caedfc",
+            "light": "#003c75",
+          },
+        },
+        "color-charts-blue-1-1200": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ddf4ff",
+            "light": "#00366d",
+          },
+        },
+        "color-charts-blue-1-300": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#00819c",
+            "light": "#529ccb",
+          },
+        },
+        "color-charts-blue-1-400": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#0497ba",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-blue-1-500": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#0273bb",
+          },
+        },
+        "color-charts-blue-1-600": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#44b9dd",
+            "light": "#0166ab",
+          },
+        },
+        "color-charts-blue-1-700": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#63c6e7",
+            "light": "#015b9d",
+          },
+        },
+        "color-charts-blue-1-800": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#79d2f0",
+            "light": "#015292",
+          },
+        },
+        "color-charts-blue-1-900": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#98dcf5",
+            "light": "#014a87",
+          },
+        },
+        "color-charts-blue-2-1000": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-blue-2-1100": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-blue-2-1200": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-blue-2-300": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-blue-2-400": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-blue-2-500": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-blue-2-600": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-blue-2-700": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-blue-2-800": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-blue-2-900": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-green-1000": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#c5e7a8",
+            "light": "#104d01",
+          },
+        },
+        "color-charts-green-1100": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#d5efbe",
+            "light": "#0f4601",
+          },
+        },
+        "color-charts-green-1200": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#e4f7d5",
+            "light": "#0d4000",
+          },
+        },
+        "color-charts-green-300": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#48851a",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-green-400": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#5a9b29",
+            "light": "#41902c",
+          },
+        },
+        "color-charts-green-500": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#1f8104",
+          },
+        },
+        "color-charts-green-600": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#7dbd4c",
+            "light": "#1a7302",
+          },
+        },
+        "color-charts-green-700": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#8fca61",
+            "light": "#176702",
+          },
+        },
+        "color-charts-green-800": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#9fd673",
+            "light": "#145d02",
+          },
+        },
+        "color-charts-green-900": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#b2df8d",
+            "light": "#125502",
+          },
+        },
+        "color-charts-line-axis": {
+          "$description": "Color of the axis lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-grid": {
+          "$description": "Color of the grid lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-tick": {
+          "$description": "Color of the tick marks in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-orange-1000": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-orange-1100": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-orange-1200": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-orange-300": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-orange-400": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-orange-500": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-orange-600": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-orange-700": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-orange-800": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-orange-900": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-1": {
+          "$description": "Color #1 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-palette-categorical-10": {
+          "$description": "Color #10 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-palette-categorical-11": {
+          "$description": "Color #11 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-palette-categorical-12": {
+          "$description": "Color #12 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-palette-categorical-13": {
+          "$description": "Color #13 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-palette-categorical-14": {
+          "$description": "Color #14 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-palette-categorical-15": {
+          "$description": "Color #15 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-16": {
+          "$description": "Color #16 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-palette-categorical-17": {
+          "$description": "Color #17 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-palette-categorical-18": {
+          "$description": "Color #18 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-palette-categorical-19": {
+          "$description": "Color #19 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-palette-categorical-2": {
+          "$description": "Color #2 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-palette-categorical-20": {
+          "$description": "Color #20 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-palette-categorical-21": {
+          "$description": "Color #21 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-palette-categorical-22": {
+          "$description": "Color #22 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-palette-categorical-23": {
+          "$description": "Color #23 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-palette-categorical-24": {
+          "$description": "Color #24 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-palette-categorical-25": {
+          "$description": "Color #25 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-palette-categorical-26": {
+          "$description": "Color #26 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-palette-categorical-27": {
+          "$description": "Color #27 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-palette-categorical-28": {
+          "$description": "Color #28 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-palette-categorical-29": {
+          "$description": "Color #29 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-palette-categorical-3": {
+          "$description": "Color #3 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-palette-categorical-30": {
+          "$description": "Color #30 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-palette-categorical-31": {
+          "$description": "Color #31 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-palette-categorical-32": {
+          "$description": "Color #32 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-palette-categorical-33": {
+          "$description": "Color #33 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-palette-categorical-34": {
+          "$description": "Color #34 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-palette-categorical-35": {
+          "$description": "Color #35 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-palette-categorical-36": {
+          "$description": "Color #36 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-palette-categorical-37": {
+          "$description": "Color #37 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-palette-categorical-38": {
+          "$description": "Color #38 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-palette-categorical-39": {
+          "$description": "Color #39 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-palette-categorical-4": {
+          "$description": "Color #4 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-palette-categorical-40": {
+          "$description": "Color #40 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-palette-categorical-41": {
+          "$description": "Color #41 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-palette-categorical-42": {
+          "$description": "Color #42 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-palette-categorical-43": {
+          "$description": "Color #43 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-palette-categorical-44": {
+          "$description": "Color #44 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-palette-categorical-45": {
+          "$description": "Color #45 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-palette-categorical-46": {
+          "$description": "Color #46 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-palette-categorical-47": {
+          "$description": "Color #47 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-palette-categorical-48": {
+          "$description": "Color #48 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-palette-categorical-49": {
+          "$description": "Color #49 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-palette-categorical-5": {
+          "$description": "Color #5 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-palette-categorical-50": {
+          "$description": "Color #50 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-palette-categorical-6": {
+          "$description": "Color #6 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-palette-categorical-7": {
+          "$description": "Color #7 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-palette-categorical-8": {
+          "$description": "Color #8 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-palette-categorical-9": {
+          "$description": "Color #9 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-pink-1000": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-pink-1100": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-pink-1200": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-pink-300": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-pink-400": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-pink-500": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-pink-600": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-pink-700": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-pink-800": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-pink-900": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-purple-1000": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-purple-1100": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-purple-1200": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-purple-300": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-purple-400": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-purple-500": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-purple-600": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-purple-700": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-purple-800": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-purple-900": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-red-1000": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd2cf",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-red-1100": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe0dd",
+            "light": "#721e03",
+          },
+        },
+        "color-charts-red-1200": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecea",
+            "light": "#671c00",
+          },
+        },
+        "color-charts-red-300": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#ea7158",
+          },
+        },
+        "color-charts-red-400": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#ed5958",
+            "light": "#dc5032",
+          },
+        },
+        "color-charts-red-500": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#d13313",
+          },
+        },
+        "color-charts-red-600": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#ff8a8a",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-red-700": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#ffa09e",
+            "light": "#a82a0c",
+          },
+        },
+        "color-charts-red-800": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb3b0",
+            "light": "#972709",
+          },
+        },
+        "color-charts-red-900": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc4c0",
+            "light": "#892407",
+          },
+        },
+        "color-charts-status-critical": {
+          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-status-high": {
+          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-status-info": {
+          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-status-low": {
+          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-status-medium": {
+          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-status-neutral": {
+          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-charts-status-positive": {
+          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-teal-1000": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-teal-1100": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-teal-1200": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-teal-300": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-teal-400": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-teal-500": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-teal-600": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-teal-700": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-teal-800": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-teal-900": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-threshold-info": {
+          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#006ce0",
+          },
+        },
+        "color-charts-threshold-negative": {
+          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-charts-threshold-neutral": {
+          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#656871",
+          },
+        },
+        "color-charts-threshold-positive": {
+          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#00802f",
+          },
+        },
+        "color-charts-yellow-1000": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#f7db8a",
+            "light": "#553f03",
+          },
+        },
+        "color-charts-yellow-1100": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#fce5a8",
+            "light": "#4d3901",
+          },
+        },
+        "color-charts-yellow-1200": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffefc9",
+            "light": "#483300",
+          },
+        },
+        "color-charts-yellow-300": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#977001",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-yellow-400": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#b08400",
+            "light": "#9c7b0b",
+          },
+        },
+        "color-charts-yellow-500": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#c59600",
+            "light": "#8a6b05",
+          },
+        },
+        "color-charts-yellow-600": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#d3a61c",
+            "light": "#7b5f04",
+          },
+        },
+        "color-charts-yellow-700": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#6f5504",
+          },
+        },
+        "color-charts-yellow-800": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#eac33a",
+            "light": "#654d03",
+          },
+        },
+        "color-charts-yellow-900": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#f1cf65",
+            "light": "#5d4503",
+          },
+        },
+        "color-drag-placeholder-active": {
+          "$description": "The color of drag placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-drag-placeholder-hover": {
+          "$description": "The color of drag placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-foreground-control-default": {
+          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-foreground-control-disabled": {
+          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-foreground-control-read-only": {
+          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-accent": {
+          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-avatar": {
+          "$description": "The text and icon color of avatars.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-body-default": {
+          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-body-secondary": {
+          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-breadcrumb-current": {
+          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-breadcrumb-icon": {
+          "$description": "The color used for the icon delimiter between breadcrumb items.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-button-normal-active": {
+          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-normal-default": {
+          "$description": "The default text color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-button-normal-disabled": {
+          "$description": "The text color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-normal-hover": {
+          "$description": "The hover text color of normal buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-primary-active": {
+          "$description": "The active text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-default": {
+          "$description": "The default text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-disabled": {
+          "$description": "The text color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-primary-hover": {
+          "$description": "The hover text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-chat-bubble-incoming": {
+          "$description": "Text color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-chat-bubble-outgoing": {
+          "$description": "Text color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-counter": {
+          "$description": "The default color for counters. For example: counters in table headers",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-dropdown-item-default": {
+          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-dropdown-item-disabled": {
+          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-dropdown-item-filter-match": {
+          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-dropdown-item-highlighted": {
+          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-empty": {
+          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-default": {
+          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-secondary": {
+          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-group-label": {
+          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-heading-default": {
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-heading-secondary": {
+          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-home-header-default": {
+          "$description": "The color of the home header's text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-home-header-secondary": {
+          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-input-disabled": {
+          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-input-placeholder": {
+          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-interactive-active": {
+          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-default": {
+          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-disabled": {
+          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-interactive-hover": {
+          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-inverted-default": {
+          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-inverted-hover": {
+          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-label": {
+          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-label-gen-ai": {
+          "$description": "The default color for labels indicating that content is produced by generative AI.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-layout-toggle": {
+          "$description": "The default color of the app layout toggle.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-layout-toggle-active": {
+          "$description": "The color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-text-layout-toggle-hover": {
+          "$description": "The color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-layout-toggle-selected": {
+          "$description": "The color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-link-default": {
+          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-link-hover": {
+          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-notification-default": {
+          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-critical": {
+          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#000000",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-high": {
+          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-low": {
+          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-medium": {
+          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-neutral": {
+          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-segment-active": {
+          "$description": "The text color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-segment-default": {
+          "$description": "The text color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-segment-hover": {
+          "$description": "The text color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-status-error": {
+          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-text-status-inactive": {
+          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-status-info": {
+          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-status-success": {
+          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-text-status-warning": {
+          "$description": "The color of warning icons.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-text-toggle-button-icon-pressed": {
+          "$description": "The pressed text color of icon toggle buttons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-toggle-button-normal-pressed": {
+          "$description": "The pressed text color of normal toggle buttons.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-top-navigation-title": {
+          "$description": "The color of the title in the top navigation.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "font-family-base": {
+          "$description": "The default font family that will be applied globally to the product interface.",
+          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+        },
+        "font-family-monospace": {
+          "$description": "The monospace font family that will be applied globally to the product interface.",
+          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
+        },
+        "font-size-body-m": {
+          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
+          "$value": "14px",
+        },
+        "font-size-body-s": {
+          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
+          "$value": "12px",
+        },
+        "font-size-display-l": {
+          "$description": "The default font size for large display text.",
+          "$value": "42px",
+        },
+        "font-size-heading-l": {
+          "$description": "The default font size for h2s.",
+          "$value": "20px",
+        },
+        "font-size-heading-m": {
+          "$description": "The default font size for h3s.",
+          "$value": "18px",
+        },
+        "font-size-heading-s": {
+          "$description": "The default font size for h4s.",
+          "$value": "16px",
+        },
+        "font-size-heading-xl": {
+          "$description": "The default font size for h1s.",
+          "$value": "24px",
+        },
+        "font-size-heading-xs": {
+          "$description": "The default font size for h5s.",
+          "$value": "14px",
+        },
+        "font-weight-button": {
+          "$description": "The default font weight for button text.",
+          "$value": "700",
+        },
+        "font-weight-heading-l": {
+          "$description": "The default font weight for h2s.",
+          "$value": "700",
+        },
+        "font-weight-heading-m": {
+          "$description": "The default font weight for h3s.",
+          "$value": "700",
+        },
+        "font-weight-heading-s": {
+          "$description": "The default font weight for h4s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xl": {
+          "$description": "The default font weight for h1s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xs": {
+          "$description": "The default font weight for h5s.",
+          "$value": "700",
+        },
+        "line-height-body-m": {
+          "$description": "The default line height for regular body text.",
+          "$value": "20px",
+        },
+        "line-height-body-s": {
+          "$description": "The default line height for small body text.",
+          "$value": "16px",
+        },
+        "line-height-display-l": {
+          "$description": "The default line height for large display text.",
+          "$value": "48px",
+        },
+        "line-height-heading-l": {
+          "$description": "The default line height for h2s.",
+          "$value": "24px",
+        },
+        "line-height-heading-m": {
+          "$description": "The default line height for h3s.",
+          "$value": "22px",
+        },
+        "line-height-heading-s": {
+          "$description": "The default line height for h4s.",
+          "$value": "20px",
+        },
+        "line-height-heading-xl": {
+          "$description": "The default line height for h1s.",
+          "$value": "30px",
+        },
+        "line-height-heading-xs": {
+          "$description": "The default line height for h5s.",
+          "$value": "18px",
+        },
+        "motion-duration-avatar-gen-ai-gradient": {
+          "$description": "The duration for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "3600ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-avatar-loading-dots": {
+          "$description": "The duration for loading motion of avatars.",
+          "$value": {
+            "default": "1200ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-complex": {
+          "$description": "The duration for drawing more attention or accommodating for more complexity.",
+          "$value": {
+            "default": "250ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-expressive": {
+          "$description": "The duration for accommodating the motion with more expressiveness.",
+          "$value": {
+            "default": "165ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-responsive": {
+          "$description": "The duration for making the motion feel quick and responsive.",
+          "$value": {
+            "default": "115ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-easing-avatar-gen-ai-gradient": {
+          "$description": "The easing curve for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
+            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
+          },
+        },
+        "motion-easing-expressive": {
+          "$description": "The easing curve for drawing a user's attention in an expressive way.",
+          "$value": {
+            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
+            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
+          },
+        },
+        "motion-easing-responsive": {
+          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
+          "$value": {
+            "default": "cubic-bezier(0, 0, 0, 1)",
+            "disabled": "cubic-bezier(0, 0, 0, 1)",
+          },
+        },
+        "motion-easing-sticky": {
+          "$description": "The easing curve for making an element sticky to a certain state.",
+          "$value": {
+            "default": "cubic-bezier(1, 0, 0.83, 1)",
+            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
+          },
+        },
+        "motion-keyframes-fade-in": {
+          "$description": "The CSS keyframes for showing an element.",
+          "$value": {
+            "default": "awsui-fade-in-35003c",
+            "disabled": "awsui-fade-in-35003c",
+          },
+        },
+        "motion-keyframes-fade-out": {
+          "$description": "The CSS keyframes for hiding an element.",
+          "$value": {
+            "default": "awsui-fade-out-35003c",
+            "disabled": "awsui-fade-out-35003c",
+          },
+        },
+        "motion-keyframes-scale-popup": {
+          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
+          "$value": {
+            "default": "awsui-scale-popup-35003c",
+            "disabled": "awsui-scale-popup-35003c",
+          },
+        },
+        "motion-keyframes-status-icon-error": {
+          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
+          "$value": {
+            "default": "awsui-status-icon-error-35003c",
+            "disabled": "awsui-status-icon-error-35003c",
+          },
+        },
+        "shadow-container-active": {
+          "$description": "Shadow for containers and cards in active state.",
+          "$value": {
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
+          },
+        },
+        "space-container-horizontal": {
+          "$description": "The horizontal padding inside a container.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-field-horizontal": {
+          "$description": "The horizontal padding inside field components.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-l": {
+          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "16px",
+          },
+        },
+        "space-scaled-m": {
+          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-s": {
+          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "8px",
+          },
+        },
+        "space-scaled-xl": {
+          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "20px",
+          },
+        },
+        "space-scaled-xs": {
+          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "4px",
+          },
+        },
+        "space-scaled-xxl": {
+          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "24px",
+          },
+        },
+        "space-scaled-xxs": {
+          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "2px",
+          },
+        },
+        "space-scaled-xxxl": {
+          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "32px",
+          },
+        },
+        "space-scaled-xxxs": {
+          "$description": "The XXXS spacing unit which scales between modes.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "0px",
+          },
+        },
+        "space-static-l": {
+          "$description": "The static L spacing unit.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-static-m": {
+          "$description": "The static M spacing unit.",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "16px",
+          },
+        },
+        "space-static-s": {
+          "$description": "The static S spacing unit.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-static-xl": {
+          "$description": "The static XL spacing unit.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "24px",
+          },
+        },
+        "space-static-xs": {
+          "$description": "The static XS spacing unit.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "8px",
+          },
+        },
+        "space-static-xxl": {
+          "$description": "The static XXL spacing unit.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "32px",
+          },
+        },
+        "space-static-xxs": {
+          "$description": "The static XXS spacing unit.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "4px",
+          },
+        },
+        "space-static-xxxl": {
+          "$description": "The static XXXL spacing unit.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "40px",
+          },
+        },
+        "space-static-xxxs": {
+          "$description": "The static XXXS spacing unit.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "2px",
+          },
+        },
+      },
+    },
+    "app-layout-toolbar": {
+      "tokens": {
+        "border-radius-alert": {
+          "$description": "The border radius of alerts.",
+          "$value": "12px",
+        },
+        "border-radius-badge": {
+          "$description": "The border radius of badges.",
+          "$value": "4px",
+        },
+        "border-radius-button": {
+          "$description": "The border radius of buttons and segmented control's segments.",
+          "$value": "20px",
+        },
+        "border-radius-calendar-day-focus-ring": {
+          "$description": "The border radius of the focused day in date picker and date range picker.",
+          "$value": "3px",
+        },
+        "border-radius-chat-bubble": {
+          "$description": "The border radius of chat bubbles.",
+          "$value": "8px",
+        },
+        "border-radius-container": {
+          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
+          "$value": "16px",
+        },
+        "border-radius-control-circular-focus-ring": {
+          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
+          "$value": "4px",
+        },
+        "border-radius-control-default-focus-ring": {
+          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
+          "$value": "4px",
+        },
+        "border-radius-dropdown": {
+          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
+          "$value": "8px",
+        },
+        "border-radius-flashbar": {
+          "$description": "The border radius of flash messages in flashbars.",
+          "$value": "12px",
+        },
+        "border-radius-input": {
+          "$description": "The border radius of form controls. For example: input, select.",
+          "$value": "8px",
+        },
+        "border-radius-item": {
+          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
+          "$value": "8px",
+        },
+        "border-radius-popover": {
+          "$description": "The border radius of popovers.",
+          "$value": "8px",
+        },
+        "border-radius-tabs-focus-ring": {
+          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
+          "$value": "20px",
+        },
+        "border-radius-tiles": {
+          "$description": "The border radius of tiles.",
+          "$value": "8px",
+        },
+        "border-radius-token": {
+          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
+          "$value": "8px",
+        },
+        "border-radius-tutorial-panel-item": {
+          "$description": "The border radius of tutorials inside a tutorial panel.",
+          "$value": "8px",
+        },
+        "border-width-alert": {
+          "$description": "The border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-field": {
+          "$description": "The border width of form fields.",
+          "$value": "2px",
+        },
+        "border-width-popover": {
+          "$description": "The border width of popovers.",
+          "$value": "2px",
+        },
+        "color-background-avatar-default": {
+          "$description": "The default background color of avatars.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-avatar-gen-ai": {
+          "$description": "The gen-ai background color of avatars.",
+          "$value": {
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+          },
+        },
+        "color-background-button-normal-active": {
+          "$description": "The background color of normal buttons in active state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#d1f1ff",
+          },
+        },
+        "color-background-button-normal-default": {
+          "$description": "The default background color of normal buttons.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-button-normal-disabled": {
+          "$description": "The background color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-button-normal-hover": {
+          "$description": "The background color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#f0fbff",
+          },
+        },
+        "color-background-button-primary-active": {
+          "$description": "The background color of primary buttons in active state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#002b66",
+          },
+        },
+        "color-background-button-primary-default": {
+          "$description": "The default background color of primary buttons.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-button-primary-disabled": {
+          "$description": "The background color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#ebebf0",
+          },
+        },
+        "color-background-button-primary-hover": {
+          "$description": "The background color of primary buttons in hover state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#002b66",
+          },
+        },
+        "color-background-cell-shaded": {
+          "$description": "The background color of shaded table cells.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-incoming": {
           "$description": "The background color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-outgoing": {
@@ -20385,56 +22910,56 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-container-header": {
           "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-control-checked": {
           "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-control-default": {
           "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-control-disabled": {
           "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#dedee3",
           },
         },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-dropdown-item-filter-match": {
           "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#f0fbff",
           },
         },
         "color-background-dropdown-item-hover": {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": {
             "dark": "#131920",
-            "light": "#131920",
+            "light": "#f3f3f7",
           },
         },
         "color-background-home-header": {
@@ -20448,28 +22973,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-input-disabled": {
           "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ebebf0",
           },
         },
         "color-background-item-selected": {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-layout-main": {
           "$description": "The background color of the main content area on a page. For example: content area in app layout.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
+            "dark": "#131920",
+            "light": "#fcfcfd",
           },
         },
         "color-background-layout-toggle-active": {
@@ -20497,21 +23022,21 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the app layout toggle button when it's selected and active.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-default": {
           "$description": "The default background color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-hover": {
           "$description": "The background color of the app layout toggle button on hover when it's selected.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#004a9e",
           },
         },
         "color-background-loading-bar-gen-ai": {
@@ -20539,7 +23064,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for grey notifications. For example: grey badges.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#424650",
           },
         },
         "color-background-notification-red": {
@@ -20595,126 +23120,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for the popover container.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-active": {
           "$description": "The background color of the active segment in a segmented control.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-segment-default": {
           "$description": "The background color of inactive segments in a segmented control.",
           "$value": {
-            "dark": "transparent",
-            "light": "transparent",
+            "dark": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-disabled": {
           "$description": "The background color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-hover": {
           "$description": "The background color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
+            "dark": "#1b232d",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-error": {
           "$description": "The background color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#1f0000",
-            "light": "#1f0000",
+            "light": "#fff5f5",
           },
         },
         "color-background-status-info": {
           "$description": "The background color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-success": {
           "$description": "The background color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#001401",
-            "light": "#001401",
+            "light": "#effff1",
           },
         },
         "color-background-status-warning": {
           "$description": "The background color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#191100",
-            "light": "#191100",
+            "light": "#fffef0",
           },
         },
         "color-background-toggle-button-normal-pressed": {
           "$description": "The background color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#d1f1ff",
           },
         },
         "color-background-toggle-checked-disabled": {
           "$description": "The background color of checked toggles in disabled state.",
           "$value": {
             "dark": "#002b66",
-            "light": "#002b66",
+            "light": "#b8e7ff",
           },
         },
         "color-board-placeholder-active": {
           "$description": "The color of board placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-board-placeholder-hover": {
           "$description": "The color of board placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-border-button-normal-active": {
           "$description": "The border color of normal buttons in active state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-normal-default": {
           "$description": "The border color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-button-normal-disabled": {
           "$description": "The border color of normal buttons in disabled state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-border-button-normal-hover": {
           "$description": "The border color of normal buttons in hover state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-primary-disabled": {
           "$description": "The border color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-container-top": {
@@ -20734,120 +23259,120 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-border-divider-secondary": {
           "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-dropdown-item-focused": {
           "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-dropdown-item-hover": {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-default": {
           "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-selected": {
           "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-segment-active": {
           "$description": "The border color of the active segment in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-default": {
           "$description": "The border color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-disabled": {
           "$description": "The border color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-hover": {
           "$description": "The border color of inactive segments in a segmented control on hover.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-status-error": {
           "$description": "The border color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-border-status-info": {
           "$description": "The border color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-status-success": {
           "$description": "The border color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-border-status-warning": {
           "$description": "The border color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-border-toggle-button-normal-pressed": {
           "$description": "The border color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-charts-blue-1-1000": {
@@ -21932,42 +24457,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of drag placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-drag-placeholder-hover": {
           "$description": "The color of drag placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-disabled": {
           "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-read-only": {
           "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-accent": {
           "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-avatar": {
@@ -21981,42 +24506,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-body-secondary": {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-breadcrumb-current": {
           "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
           "$value": {
             "dark": "#8c8c94",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-text-breadcrumb-icon": {
           "$description": "The color used for the icon delimiter between breadcrumb items.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-normal-default": {
           "$description": "The default text color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-button-normal-disabled": {
@@ -22029,22 +24554,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-hover": {
           "$description": "The hover text color of normal buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-primary-active": {
           "$description": "The active text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-default": {
           "$description": "The default text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-disabled": {
@@ -22058,98 +24583,98 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The hover text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-chat-bubble-incoming": {
           "$description": "Text color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-chat-bubble-outgoing": {
           "$description": "Text color of \`outgoing\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-counter": {
           "$description": "The default color for counters. For example: counters in table headers",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-dropdown-item-default": {
           "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-dropdown-item-disabled": {
           "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-dropdown-item-filter-match": {
           "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-text-dropdown-item-highlighted": {
           "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-empty": {
           "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#656871",
           },
         },
         "color-text-form-default": {
           "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-form-secondary": {
           "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-group-label": {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-heading-default": {
           "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-heading-secondary": {
           "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#424650",
           },
         },
         "color-text-home-header-default": {
@@ -22170,42 +24695,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-input-placeholder": {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-interactive-active": {
           "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-default": {
           "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-interactive-disabled": {
           "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-interactive-hover": {
           "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-inverted-default": {
@@ -22226,14 +24751,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-label-gen-ai": {
           "$description": "The default color for labels indicating that content is produced by generative AI.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#bf80ff",
+            "light": "#7300e5",
           },
         },
         "color-text-layout-toggle": {
@@ -22247,35 +24772,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the app layout toggle button when it's active.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-text-layout-toggle-hover": {
           "$description": "The color of the app layout toggle button on hover.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-layout-toggle-selected": {
           "$description": "The color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-link-default": {
           "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-link-hover": {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-notification-default": {
@@ -22324,77 +24849,77 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The text color of the active segment in a segmented control.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-segment-default": {
           "$description": "The text color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-segment-hover": {
           "$description": "The text color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-status-error": {
           "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-text-status-inactive": {
           "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-status-info": {
           "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-status-success": {
           "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-text-status-warning": {
           "$description": "The color of warning icons.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-text-toggle-button-icon-pressed": {
           "$description": "The pressed text color of icon toggle buttons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-toggle-button-normal-pressed": {
           "$description": "The pressed text color of normal toggle buttons.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-top-navigation-title": {
           "$description": "The color of the title in the top navigation.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "font-family-base": {
@@ -23294,8 +25819,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -25819,8 +28344,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -28344,8 +30869,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -30869,8 +33394,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#75cfff",
+            "light": "#75cfff",
           },
         },
         "color-border-item-focused": {
@@ -33394,8 +35919,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#75cfff",
+            "light": "#75cfff",
           },
         },
         "color-border-item-focused": {
@@ -35919,8 +38444,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-border-input-focused": {
       "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
       "$value": {
-        "dark": "#b8e7ff",
-        "light": "#002b66",
+        "dark": "#75cfff",
+        "light": "#006ce0",
       },
     },
     "color-border-item-focused": {
diff --git a/src/app-layout-toolbar/index.tsx b/src/app-layout-toolbar/index.tsx
index 3a043e4d3d..a5fb22e0c0 100644
--- a/src/app-layout-toolbar/index.tsx
+++ b/src/app-layout-toolbar/index.tsx
@@ -11,6 +11,7 @@ import AppLayoutToolbarInternal from '../app-layout/visual-refresh-toolbar';
 import { AppLayoutToolbarPublicContext } from '../app-layout/visual-refresh-toolbar/contexts';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
+import VisualContext from '../internal/components/visual-context';
 import { NonCancelableCustomEvent } from '../internal/events';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { useControllable } from '../internal/hooks/use-controllable';
@@ -129,7 +130,9 @@ const AppLayoutToolbar = React.forwardRef(
     return (
       <AppLayoutToolbarPublicContext.Provider value={true}>
         <div ref={useMergeRefs(__internalRootRef, rootRef)} {...baseProps}>
-          <AppLayoutToolbarInternal ref={ref} {...props} />
+          <VisualContext contextName="app-layout-toolbar">
+            <AppLayoutToolbarInternal ref={ref} {...props} />
+          </VisualContext>
         </div>
       </AppLayoutToolbarPublicContext.Provider>
     );
diff --git a/src/code-editor/styles.scss b/src/code-editor/styles.scss
index 842f5613d5..309a10d9c0 100644
--- a/src/code-editor/styles.scss
+++ b/src/code-editor/styles.scss
@@ -13,8 +13,8 @@
 .code-editor {
   @include styles.styles-reset;
   display: block;
-  border-block: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-inline: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-code-editor-default;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-code-editor-default;
   border-start-start-radius: awsui.$border-radius-code-editor;
   border-start-end-radius: awsui.$border-radius-code-editor;
   border-end-start-radius: awsui.$border-radius-code-editor;
diff --git a/src/input/styles.scss b/src/input/styles.scss
index 88bd151b32..f4c884d0e3 100644
--- a/src/input/styles.scss
+++ b/src/input/styles.scss
@@ -50,8 +50,8 @@
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
   @include styles.font-body-m;
   block-size: awsui.$size-vertical-input;
 
diff --git a/src/internal/components/button-trigger/styles.scss b/src/internal/components/button-trigger/styles.scss
index 14593a2f69..2127fba1c2 100644
--- a/src/internal/components/button-trigger/styles.scss
+++ b/src/internal/components/button-trigger/styles.scss
@@ -29,8 +29,8 @@ $padding-block-inner-filtering-token: 0px;
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
   min-block-size: awsui.$size-vertical-input;
 
   &.in-filtering-token-root,
diff --git a/src/internal/components/checkbox-icon/index.tsx b/src/internal/components/checkbox-icon/index.tsx
index 231051a2d1..24a6129a3e 100644
--- a/src/internal/components/checkbox-icon/index.tsx
+++ b/src/internal/components/checkbox-icon/index.tsx
@@ -37,9 +37,9 @@ const dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension> =
     viewBox: '0 0 16 16',
     indeterminate: '3.5,8 12.5,8',
     checked: '3.5,8 7,11 12,4',
-    xy: 1,
-    r: 2,
-    size: 14,
+    xy: 0.5,
+    r: 3,
+    size: 15,
   },
 };
 
diff --git a/src/internal/components/checkbox-icon/styles.scss b/src/internal/components/checkbox-icon/styles.scss
index 3062553095..4601d62089 100644
--- a/src/internal/components/checkbox-icon/styles.scss
+++ b/src/internal/components/checkbox-icon/styles.scss
@@ -16,7 +16,7 @@
   > .styled-box {
     fill: awsui.$color-background-control-default;
     stroke: awsui.$color-border-control-default;
-    stroke-width: styles.$control-border-width;
+    stroke-width: awsui.$border-width-form-control;
     @include styles.with-motion {
       transition:
         fill awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index 0c77e8e5d9..26747f5900 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -114,14 +114,14 @@
   // See focus-highlight above.
   outline: 2px dotted transparent;
 
-  border-block: constants.$control-border-width solid awsui.$color-border-input-focused;
-  border-inline: constants.$control-border-width solid awsui.$color-border-input-focused;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-focused;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-focused;
   border-start-start-radius: $border-radius;
   border-start-end-radius: $border-radius;
   border-end-start-radius: $border-radius;
   border-end-end-radius: $border-radius;
 
-  box-shadow: foundation.$box-shadow-focused-light;
+  box-shadow: inset foundation.$box-shadow-focused-light;
 }
 
 @mixin form-disabled-element {
diff --git a/src/radio-group/radio-button.tsx b/src/radio-group/radio-button.tsx
index 7a7a55d1f7..a2e521950f 100644
--- a/src/radio-group/radio-button.tsx
+++ b/src/radio-group/radio-button.tsx
@@ -83,7 +83,7 @@ export default React.forwardRef(function RadioButton(
               [styles['styled-circle-disabled']]: disabled,
               [styles['styled-circle-readonly']]: readOnly,
             })}
-            strokeWidth={isVisualRefresh ? 12 : 8}
+            strokeWidth={8}
             cx={50}
             cy={50}
             r={isVisualRefresh ? 44 : 46}
diff --git a/src/textarea/styles.scss b/src/textarea/styles.scss
index f4b9a96f42..5b19667904 100644
--- a/src/textarea/styles.scss
+++ b/src/textarea/styles.scss
@@ -32,8 +32,8 @@
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
   @include styles.font-body-m;
 
   &.textarea-readonly {
diff --git a/src/tiles/styles.scss b/src/tiles/styles.scss
index eb9ac4483c..0b40115b3d 100644
--- a/src/tiles/styles.scss
+++ b/src/tiles/styles.scss
@@ -29,8 +29,8 @@ $gutter: awsui.$space-tile-gutter;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
   border-start-start-radius: awsui.$border-radius-tiles;
   border-start-end-radius: awsui.$border-radius-tiles;
   border-end-start-radius: awsui.$border-radius-tiles;
@@ -58,9 +58,10 @@ $gutter: awsui.$space-tile-gutter;
   }
 
   &.selected {
-    border-block: styles.$control-border-width solid awsui.$color-border-item-selected;
-    border-inline: styles.$control-border-width solid awsui.$color-border-item-selected;
+    border-block: awsui.$border-width-form-control solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-width-form-control solid awsui.$color-border-item-selected;
     background: awsui.$color-background-item-selected;
+    box-shadow: inset 0 0 0 awsui.$border-width-form-control awsui.$color-border-item-focused;
   }
 
   &.disabled {
diff --git a/style-dictionary/utils/contexts.ts b/style-dictionary/utils/contexts.ts
index a4dc6b0137..738cdcfd06 100644
--- a/style-dictionary/utils/contexts.ts
+++ b/style-dictionary/utils/contexts.ts
@@ -57,3 +57,11 @@ export const createAppLayoutToolsDrawerTriggerContext = (tokens: TokenCategory<s
     tokens,
   };
 };
+
+export const createAppLayoutToolbarContext = (tokens: TokenCategory<string, GlobalValue | ModeValue>) => {
+  return {
+    id: 'app-layout-toolbar',
+    selector: '.awsui-context-app-layout-toolbar',
+    tokens,
+  };
+};
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 872d68ef7c..440662de64 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -19,6 +19,7 @@ export type ColorPaletteTokenName =
   | 'colorGreen600'
   | 'colorGreen700'
   | 'colorGreen900'
+  | 'colorGrey50'
   | 'colorGrey100'
   | 'colorGrey125'
   | 'colorGrey150'
@@ -585,6 +586,7 @@ export type BordersTokenName =
   | 'borderLinkFocusRingShadowSpread'
   | 'borderWidthAlert'
   | 'borderWidthField'
+  | 'borderWidthFormControl'
   | 'borderWidthPopover';
 export type MotionTokenName =
   | 'motionDurationExtraFast'
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index 0fc4bd4a73..9c0df01d87 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -7,7 +7,7 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderCodeEditorStatusDividerWidth: '{borderDividerSectionWidth}',
   borderContainerStickyWidth: '0px',
   borderContainerTopWidth: '0px',
-  borderControlFocusRingShadowSpread: '0px',
+  borderControlFocusRingShadowSpread: '1px',
   borderControlInvalidFocusRingShadowSpread: '2px',
   borderDividerListWidth: '1px',
   borderDividerSectionWidth: '1px',
@@ -43,5 +43,6 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderLinkFocusRingShadowSpread: '2px',
   borderWidthAlert: '2px',
   borderWidthField: '2px',
+  borderWidthFormControl: '1px',
   borderWidthPopover: '2px',
 };
diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index fe65b622d4..8774201f0f 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -21,6 +21,7 @@ export const tokens: StyleDictionary.ColorPaletteDictionary = {
   colorGreen600: '#00802f',
   colorGreen700: '#00471e',
   colorGreen900: '#001401',
+  colorGrey50: '#fcfcfd',
   colorGrey100: '#f9f9fa',
   colorGrey125: '#f6f6f9',
   colorGrey150: '#f3f3f7',
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index ab4c2143cb..c399842929 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -140,7 +140,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderEditableCellHover: '{colorBorderDropdownItemHover}',
   colorBorderInputDefault: { light: '{colorGrey500}', dark: '{colorGrey550}' },
   colorBorderInputDisabled: '{colorBackgroundInputDisabled}',
-  colorBorderInputFocused: { light: '{colorBlue800}', dark: '{colorBlue300}' },
+  colorBorderInputFocused: { light: '{colorBlue600}', dark: '{colorBlue400}' },
   colorBorderItemFocused: { light: '{colorBlue600}', dark: '{colorBlue500}' },
   colorBorderDropdownItemFocused: { light: '{colorGrey600}', dark: '{colorGrey300}' },
   colorBorderItemPlaceholder: '{colorBorderItemSelected}',
diff --git a/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts b/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts
new file mode 100644
index 0000000000..1d2a6c2fc4
--- /dev/null
+++ b/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts
@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
+
+const tokens = {
+  colorBackgroundLayoutMain: { light: '{colorGrey50}', dark: '{colorGrey850}' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
+  merge({}, parentTokens, { ...tokens })
+);
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/visual-refresh/index.ts b/style-dictionary/visual-refresh/index.ts
index 5477497457..17fb2a16f1 100644
--- a/style-dictionary/visual-refresh/index.ts
+++ b/style-dictionary/visual-refresh/index.ts
@@ -4,6 +4,7 @@ import { ThemeBuilder } from '@cloudscape-design/theming-build';
 
 import {
   createAlertContext,
+  createAppLayoutToolbarContext,
   createCompactTableContext,
   createFlashbarContext,
   createFlashbarWarningContext,
@@ -45,6 +46,7 @@ export async function buildVisualRefresh(builder: ThemeBuilder) {
   builder.addContext(createFlashbarContext((await import('./contexts/flashbar.js')).tokens));
   builder.addContext(createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens));
   builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens));
+  builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens));
   builder.addContext({
     id: 'alert-header',
     selector: '.awsui-context-content-header .awsui-context-alert',

From 647d7c8ee44ed625746092f70f7120169ea238de Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 26 Mar 2025 18:39:46 +0100
Subject: [PATCH 02/35] update with consolidated tech strategy

---
 .../__snapshots__/themes.test.ts.snap         | 32 ++++++++++++-------
 .../__snapshots__/design-tokens.test.ts.snap  | 18 +++++------
 src/code-editor/styles.scss                   |  4 +--
 src/input/styles.scss                         |  4 +--
 .../components/button-trigger/styles.scss     |  4 +--
 .../components/checkbox-icon/styles.scss      |  2 +-
 src/internal/styles/forms/constants.scss      |  2 +-
 src/internal/styles/forms/mixins.scss         |  8 ++---
 src/prompt-input/styles.scss                  |  4 +--
 src/select/parts/styles.scss                  |  4 +--
 src/textarea/styles.scss                      |  4 +--
 src/tiles/styles.scss                         | 10 +++---
 src/token-group/mixins.scss                   |  4 +--
 style-dictionary/utils/token-names.ts         |  3 +-
 style-dictionary/visual-refresh/borders.ts    |  5 +--
 15 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index cff9d38e13..e9fe0a0692 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -41,9 +41,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
-  "border-width-form-control": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#d13212",
@@ -707,9 +708,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
-  "border-width-form-control": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#ff5d64",
@@ -1373,9 +1375,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
-  "border-width-form-control": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#d13212",
@@ -2039,9 +2042,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
-  "border-width-form-control": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#d13212",
@@ -2705,9 +2709,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
-  "border-width-form-control": "1px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#db0000",
@@ -3371,9 +3376,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
-  "border-width-form-control": "1px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#db0000",
@@ -4037,9 +4043,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
-  "border-width-form-control": "1px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#ff7a7a",
@@ -4703,9 +4710,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
-  "border-width-form-control": "1px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#ff7a7a",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index a8b6800efe..69c591ee3b 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -17759,7 +17759,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20284,7 +20284,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -22809,7 +22809,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -25334,7 +25334,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -27859,7 +27859,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -30384,7 +30384,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -32909,7 +32909,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -35434,7 +35434,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -37959,7 +37959,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "2px",
+      "$value": "1px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
diff --git a/src/code-editor/styles.scss b/src/code-editor/styles.scss
index 309a10d9c0..096b4783d4 100644
--- a/src/code-editor/styles.scss
+++ b/src/code-editor/styles.scss
@@ -13,8 +13,8 @@
 .code-editor {
   @include styles.styles-reset;
   display: block;
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-code-editor-default;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-code-editor-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
   border-start-start-radius: awsui.$border-radius-code-editor;
   border-start-end-radius: awsui.$border-radius-code-editor;
   border-end-start-radius: awsui.$border-radius-code-editor;
diff --git a/src/input/styles.scss b/src/input/styles.scss
index f4c884d0e3..ca0ccccd4d 100644
--- a/src/input/styles.scss
+++ b/src/input/styles.scss
@@ -50,8 +50,8 @@
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   @include styles.font-body-m;
   block-size: awsui.$size-vertical-input;
 
diff --git a/src/internal/components/button-trigger/styles.scss b/src/internal/components/button-trigger/styles.scss
index 2127fba1c2..4235be45e9 100644
--- a/src/internal/components/button-trigger/styles.scss
+++ b/src/internal/components/button-trigger/styles.scss
@@ -29,8 +29,8 @@ $padding-block-inner-filtering-token: 0px;
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   min-block-size: awsui.$size-vertical-input;
 
   &.in-filtering-token-root,
diff --git a/src/internal/components/checkbox-icon/styles.scss b/src/internal/components/checkbox-icon/styles.scss
index 4601d62089..120f7a5bc3 100644
--- a/src/internal/components/checkbox-icon/styles.scss
+++ b/src/internal/components/checkbox-icon/styles.scss
@@ -16,7 +16,7 @@
   > .styled-box {
     fill: awsui.$color-background-control-default;
     stroke: awsui.$color-border-control-default;
-    stroke-width: awsui.$border-width-form-control;
+    stroke-width: awsui.$border-width-field;
     @include styles.with-motion {
       transition:
         fill awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
diff --git a/src/internal/styles/forms/constants.scss b/src/internal/styles/forms/constants.scss
index 30b75e5571..b4fb849bdb 100644
--- a/src/internal/styles/forms/constants.scss
+++ b/src/internal/styles/forms/constants.scss
@@ -6,7 +6,7 @@
 @use '../utils/theming' as theming;
 @use '../tokens' as awsui;
 
-$control-border-width: awsui.$border-width-field;
+$control-border-width: awsui.$border-width-button;
 $control-border-radius: awsui.$border-radius-input;
 
 // Use for options in dropdowns
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index 26747f5900..99df14c084 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -114,8 +114,8 @@
   // See focus-highlight above.
   outline: 2px dotted transparent;
 
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-focused;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-focused;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-focused;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-focused;
   border-start-start-radius: $border-radius;
   border-start-end-radius: $border-radius;
   border-end-start-radius: $border-radius;
@@ -238,8 +238,8 @@
     inset-inline-start: 0px;
     inset-inline-end: 0px;
     background-color: transparent;
-    border-block: awsui.$border-width-field solid awsui.$color-border-dropdown-container;
-    border-inline: awsui.$border-width-field solid awsui.$color-border-dropdown-container;
+    border-block: awsui.$border-width-popover solid awsui.$color-border-dropdown-container;
+    border-inline: awsui.$border-width-popover solid awsui.$color-border-dropdown-container;
     border-start-start-radius: awsui.$border-radius-dropdown;
     border-start-end-radius: awsui.$border-radius-dropdown;
     border-end-start-radius: awsui.$border-radius-dropdown;
diff --git a/src/prompt-input/styles.scss b/src/prompt-input/styles.scss
index bca6623a76..8a6022b24f 100644
--- a/src/prompt-input/styles.scss
+++ b/src/prompt-input/styles.scss
@@ -20,8 +20,8 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
 
   background-color: awsui.$color-background-input-default;
 
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
 
   &.textarea-readonly {
     @include styles.form-readonly-element;
diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
index 797cda2ee4..0c90cab688 100644
--- a/src/select/parts/styles.scss
+++ b/src/select/parts/styles.scss
@@ -88,8 +88,8 @@ $inlineLabel-border-radius: 2px;
     min-inline-size: max-content;
     block-size: 18px;
 
-    border-block: awsui.$border-width-field solid awsui.$color-border-item-selected;
-    border-inline: awsui.$border-width-field solid awsui.$color-border-item-selected;
+    border-block: awsui.$border-width-token solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-width-token solid awsui.$color-border-item-selected;
     padding-block: 0;
     padding-inline: awsui.$space-xxs;
     background: awsui.$color-background-item-selected;
diff --git a/src/textarea/styles.scss b/src/textarea/styles.scss
index 5b19667904..7e84d3801f 100644
--- a/src/textarea/styles.scss
+++ b/src/textarea/styles.scss
@@ -32,8 +32,8 @@
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   @include styles.font-body-m;
 
   &.textarea-readonly {
diff --git a/src/tiles/styles.scss b/src/tiles/styles.scss
index 0b40115b3d..52908b26e2 100644
--- a/src/tiles/styles.scss
+++ b/src/tiles/styles.scss
@@ -29,8 +29,8 @@ $gutter: awsui.$space-tile-gutter;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   border-start-start-radius: awsui.$border-radius-tiles;
   border-start-end-radius: awsui.$border-radius-tiles;
   border-end-start-radius: awsui.$border-radius-tiles;
@@ -58,10 +58,10 @@ $gutter: awsui.$space-tile-gutter;
   }
 
   &.selected {
-    border-block: awsui.$border-width-form-control solid awsui.$color-border-item-selected;
-    border-inline: awsui.$border-width-form-control solid awsui.$color-border-item-selected;
+    border-block: awsui.$border-width-field solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-width-field solid awsui.$color-border-item-selected;
     background: awsui.$color-background-item-selected;
-    box-shadow: inset 0 0 0 awsui.$border-width-form-control awsui.$color-border-item-focused;
+    box-shadow: inset 0 0 0 awsui.$border-width-field awsui.$color-border-item-focused;
   }
 
   &.disabled {
diff --git a/src/token-group/mixins.scss b/src/token-group/mixins.scss
index fdfab6f093..b7916cf207 100644
--- a/src/token-group/mixins.scss
+++ b/src/token-group/mixins.scss
@@ -9,8 +9,8 @@
 @mixin token-box-styles {
   position: relative;
   block-size: 100%;
-  border-block: awsui.$border-width-field solid constants.$token-border-color;
-  border-inline: awsui.$border-width-field solid constants.$token-border-color;
+  border-block: awsui.$border-width-token solid constants.$token-border-color;
+  border-inline: awsui.$border-width-token solid constants.$token-border-color;
   padding-block-start: styles.$control-padding-vertical;
   padding-block-end: styles.$control-padding-vertical;
   padding-inline-start: styles.$control-padding-horizontal;
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 440662de64..56166e9c58 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -586,7 +586,8 @@ export type BordersTokenName =
   | 'borderLinkFocusRingShadowSpread'
   | 'borderWidthAlert'
   | 'borderWidthField'
-  | 'borderWidthFormControl'
+  | 'borderWidthButton'
+  | 'borderWidthToken'
   | 'borderWidthPopover';
 export type MotionTokenName =
   | 'motionDurationExtraFast'
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index 9c0df01d87..26f9fff099 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -42,7 +42,8 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderLinkFocusRingOutline: '0',
   borderLinkFocusRingShadowSpread: '2px',
   borderWidthAlert: '2px',
-  borderWidthField: '2px',
-  borderWidthFormControl: '1px',
+  borderWidthField: '1px',
+  borderWidthButton: '2px',
+  borderWidthToken: '2px',
   borderWidthPopover: '2px',
 };

From eabd377d82d8a4f14212cf70eb3fca7acdf46aef Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 28 Mar 2025 16:37:00 +0100
Subject: [PATCH 03/35] move visual context to inner part

---
 .../full-page-cards.page.tsx                  | 110 ++++++++++++++++
 .../full-page-table.page.tsx                  |   1 +
 .../__snapshots__/themes.test.ts.snap         |   4 +-
 src/app-layout-toolbar/index.tsx              |   5 +-
 .../visual-refresh-toolbar/skeleton/index.tsx | 121 +++++++++---------
 src/segmented-control/styles.scss             |   4 +-
 style-dictionary/visual-refresh/colors.ts     |   2 +-
 7 files changed, 179 insertions(+), 68 deletions(-)
 create mode 100644 pages/app-layout-toolbar/full-page-cards.page.tsx

diff --git a/pages/app-layout-toolbar/full-page-cards.page.tsx b/pages/app-layout-toolbar/full-page-cards.page.tsx
new file mode 100644
index 0000000000..3103eeaa13
--- /dev/null
+++ b/pages/app-layout-toolbar/full-page-cards.page.tsx
@@ -0,0 +1,110 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import range from 'lodash/range';
+
+import { AppLayoutToolbar } from '~components';
+import Button from '~components/button';
+import Cards, { CardsProps } from '~components/cards';
+import Header from '~components/header';
+import Link from '~components/link';
+
+import * as toolsContent from '../app-layout//utils/tools-content';
+import { Breadcrumbs, Footer, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks';
+import labels from '../app-layout/utils/labels';
+import ScreenshotArea from '../utils/screenshot-area';
+
+interface Item {
+  number: number;
+  text: string;
+}
+
+function createSimpleItems(count: number) {
+  const texts = ['One', 'Two', 'Three', 'Four', 'Five'];
+  return range(count).map(number => ({ number, text: texts[number % texts.length] }));
+}
+
+const cardDefinition: CardsProps.CardDefinition<Item> = {
+  header: item => item.text,
+  sections: [
+    {
+      id: 'description',
+      header: 'Number',
+      content: item => item.number,
+    },
+    {
+      id: 'type',
+      header: 'Text',
+      content: item => item.text,
+    },
+  ],
+};
+
+const config: CardsProps['cardsPerRow'] = [
+  {
+    cards: 1,
+  },
+  {
+    minWidth: 400,
+    cards: 2,
+  },
+  {
+    cards: 3,
+    minWidth: 700,
+  },
+  {
+    cards: 4,
+    minWidth: 1000,
+  },
+];
+
+const items = createSimpleItems(16);
+
+export default function () {
+  const [toolsOpen, setToolsOpen] = useState(false);
+  const [selectedTool, setSelectedTool] = useState<keyof typeof toolsContent>('long');
+
+  function openHelp(article: keyof typeof toolsContent) {
+    setToolsOpen(true);
+    setSelectedTool(article);
+  }
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayoutToolbar
+        ariaLabels={labels}
+        breadcrumbs={<Breadcrumbs />}
+        navigation={<Navigation />}
+        contentType="cards"
+        tools={<Tools>{toolsContent[selectedTool]}</Tools>}
+        toolsOpen={toolsOpen}
+        onToolsChange={({ detail }) => setToolsOpen(detail.open)}
+        notifications={<Notifications />}
+        content={
+          <Cards<Item>
+            items={items}
+            cardDefinition={cardDefinition}
+            stickyHeader={true}
+            variant="full-page"
+            header={
+              <Header
+                variant="awsui-h1-sticky"
+                description="Demo page with footer"
+                info={
+                  <Link variant="info" onFollow={() => openHelp('long')}>
+                    Long help text
+                  </Link>
+                }
+                actions={<Button variant="primary">Create</Button>}
+              >
+                Sticky Scrollbar Example
+              </Header>
+            }
+            cardsPerRow={config}
+          />
+        }
+      />
+      <Footer legacyConsoleNav={false} />
+    </ScreenshotArea>
+  );
+}
diff --git a/pages/app-layout-toolbar/full-page-table.page.tsx b/pages/app-layout-toolbar/full-page-table.page.tsx
index d6b5581478..006ef18458 100644
--- a/pages/app-layout-toolbar/full-page-table.page.tsx
+++ b/pages/app-layout-toolbar/full-page-table.page.tsx
@@ -58,6 +58,7 @@ export default function () {
             variant="full-page"
             columnDefinitions={columnsConfig}
             items={items}
+            stripedRows={true}
           />
         }
       />
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index e9fe0a0692..1820659156 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -2842,7 +2842,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#b4b4bb",
+  "color-border-layout": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -3509,7 +3509,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#b4b4bb",
+  "color-border-layout": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
diff --git a/src/app-layout-toolbar/index.tsx b/src/app-layout-toolbar/index.tsx
index a5fb22e0c0..3a043e4d3d 100644
--- a/src/app-layout-toolbar/index.tsx
+++ b/src/app-layout-toolbar/index.tsx
@@ -11,7 +11,6 @@ import AppLayoutToolbarInternal from '../app-layout/visual-refresh-toolbar';
 import { AppLayoutToolbarPublicContext } from '../app-layout/visual-refresh-toolbar/contexts';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
-import VisualContext from '../internal/components/visual-context';
 import { NonCancelableCustomEvent } from '../internal/events';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { useControllable } from '../internal/hooks/use-controllable';
@@ -130,9 +129,7 @@ const AppLayoutToolbar = React.forwardRef(
     return (
       <AppLayoutToolbarPublicContext.Provider value={true}>
         <div ref={useMergeRefs(__internalRootRef, rootRef)} {...baseProps}>
-          <VisualContext contextName="app-layout-toolbar">
-            <AppLayoutToolbarInternal ref={ref} {...props} />
-          </VisualContext>
+          <AppLayoutToolbarInternal ref={ref} {...props} />
         </div>
       </AppLayoutToolbarPublicContext.Provider>
     );
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
index 05deec3818..38115018e0 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import VisualContext from '../../../internal/components/visual-context';
 import customCssProps from '../../../internal/generated/custom-css-properties';
 import { useMobile } from '../../../internal/hooks/use-mobile';
 import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
@@ -76,73 +77,75 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
     const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
     const anyPanelOpen = navigationOpen || toolsOpen;
     return (
-      <div
-        ref={ref}
-        className={clsx(styles.root, testutilStyles.root, {
-          [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
-          [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
-        })}
-        style={{
-          minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
-          [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
-          [customCssProps.navigationWidth]: `${navigationWidth}px`,
-          [customCssProps.toolsWidth]: `${toolsWidth}px`,
-        }}
-      >
-        {toolbar}
-        {navigation && (
-          <div
-            className={clsx(
-              styles.navigation,
-              !navigationOpen && styles['panel-hidden'],
-              toolsOpen && styles['unfocusable-mobile'],
-              !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']
-            )}
-          >
-            {navigation}
-          </div>
-        )}
-        <main className={clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'])}>
-          {notifications && (
+      <VisualContext contextName="app-layout-toolbar">
+        <div
+          ref={ref}
+          className={clsx(styles.root, testutilStyles.root, {
+            [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
+            [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
+          })}
+          style={{
+            minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
+            [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
+            [customCssProps.navigationWidth]: `${navigationWidth}px`,
+            [customCssProps.toolsWidth]: `${toolsWidth}px`,
+          }}
+        >
+          {toolbar}
+          {navigation && (
             <div
               className={clsx(
-                styles['notifications-background'],
-                headerVariant === 'high-contrast' && highContrastHeaderClassName
+                styles.navigation,
+                !navigationOpen && styles['panel-hidden'],
+                toolsOpen && styles['unfocusable-mobile'],
+                !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']
               )}
-            ></div>
+            >
+              {navigation}
+            </div>
           )}
-          {notifications}
-          <div
-            className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}
-            style={style}
-          >
-            {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}
-            <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>
-          </div>
-          {bottomSplitPanel && (
-            <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>
-              {bottomSplitPanel}
+          <main className={clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'])}>
+            {notifications && (
+              <div
+                className={clsx(
+                  styles['notifications-background'],
+                  headerVariant === 'high-contrast' && highContrastHeaderClassName
+                )}
+              ></div>
+            )}
+            {notifications}
+            <div
+              className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}
+              style={style}
+            >
+              {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}
+              <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>
+            </div>
+            {bottomSplitPanel && (
+              <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>
+                {bottomSplitPanel}
+              </div>
+            )}
+          </main>
+          {sideSplitPanel && (
+            <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>
+              {sideSplitPanel}
             </div>
           )}
-        </main>
-        {sideSplitPanel && (
-          <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>
-            {sideSplitPanel}
+          <div
+            className={clsx(
+              styles.tools,
+              !toolsOpen && styles['panel-hidden'],
+              sharedStyles['with-motion-horizontal'],
+              navigationOpen && !toolsOpen && styles['unfocusable-mobile'],
+              toolsOpen && styles['tools-open']
+            )}
+          >
+            {tools}
           </div>
-        )}
-        <div
-          className={clsx(
-            styles.tools,
-            !toolsOpen && styles['panel-hidden'],
-            sharedStyles['with-motion-horizontal'],
-            navigationOpen && !toolsOpen && styles['unfocusable-mobile'],
-            toolsOpen && styles['tools-open']
-          )}
-        >
-          {tools}
+          <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>
         </div>
-        <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>
-      </div>
+      </VisualContext>
     );
   }
 );
diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
index d9cea75719..86ef7b608d 100644
--- a/src/segmented-control/styles.scss
+++ b/src/segmented-control/styles.scss
@@ -25,8 +25,8 @@
 .segment-part {
   display: -ms-inline-grid;
   display: inline-grid;
-  border-inline: solid awsui.$border-width-field awsui.$color-border-input-default;
-  border-block: solid awsui.$border-width-field awsui.$color-border-input-default;
+  border-inline: solid awsui.$border-width-button awsui.$color-border-input-default;
+  border-block: solid awsui.$border-width-button awsui.$color-border-input-default;
   border-start-start-radius: awsui.$border-radius-button;
   border-start-end-radius: awsui.$border-radius-button;
   border-end-start-radius: awsui.$border-radius-button;
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index c399842929..f7ae88da3c 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -145,7 +145,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderDropdownItemFocused: { light: '{colorGrey600}', dark: '{colorGrey300}' },
   colorBorderItemPlaceholder: '{colorBorderItemSelected}',
   colorBorderItemSelected: { light: '{colorBlue600}', dark: '{colorBlue500}' },
-  colorBorderLayout: { light: '{colorGrey400}', dark: '{colorGrey600}' },
+  colorBorderLayout: { light: '{colorGrey350}', dark: '{colorGrey600}' },
   colorBorderNotificationStackBar: '{colorGrey700}',
   colorBorderPanelHeader: '{colorBorderDividerDefault}',
   colorBorderPopover: { light: '{colorGrey400}', dark: '{colorGrey550}' },

From 565543accaf89e219bb37bcfc45e2946528ffeb8 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 31 Mar 2025 18:27:44 +0200
Subject: [PATCH 04/35] update snapshot

---
 .../__snapshots__/themes.test.ts.snap         | 667 +-----------------
 1 file changed, 1 insertion(+), 666 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 1820659156..2a412749de 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -2668,672 +2668,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
 }
 `;
 
-exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" 1`] = `
-{
-  "border-active-width": "4px",
-  "border-code-editor-status-divider-width": "1px",
-  "border-container-sticky-width": "0px",
-  "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
-  "border-control-invalid-focus-ring-shadow-spread": "2px",
-  "border-divider-list-width": "1px",
-  "border-divider-section-width": "1px",
-  "border-dropdown-virtual-offset-width": "2px",
-  "border-invalid-width": "8px",
-  "border-item-width": "2px",
-  "border-line-chart-dash-array": "3 5",
-  "border-line-chart-line-join": "round",
-  "border-line-chart-width": "2px",
-  "border-link-focus-ring-outline": "0",
-  "border-link-focus-ring-shadow-spread": "2px",
-  "border-panel-header-width": "1px",
-  "border-panel-top-width": "1px",
-  "border-radius-alert": "12px",
-  "border-radius-badge": "4px",
-  "border-radius-button": "20px",
-  "border-radius-calendar-day-focus-ring": "3px",
-  "border-radius-chat-bubble": "8px",
-  "border-radius-code-editor": "8px",
-  "border-radius-container": "16px",
-  "border-radius-control-circular-focus-ring": "4px",
-  "border-radius-control-default-focus-ring": "4px",
-  "border-radius-dropdown": "8px",
-  "border-radius-dropzone": "12px",
-  "border-radius-flashbar": "12px",
-  "border-radius-input": "8px",
-  "border-radius-item": "8px",
-  "border-radius-popover": "8px",
-  "border-radius-tabs-focus-ring": "20px",
-  "border-radius-tiles": "8px",
-  "border-radius-token": "8px",
-  "border-radius-tutorial-panel-item": "8px",
-  "border-table-sticky-width": "1px",
-  "border-width-alert": "2px",
-  "border-width-button": "2px",
-  "border-width-field": "1px",
-  "border-width-popover": "2px",
-  "border-width-token": "2px",
-  "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-  "color-background-badge-icon": "#db0000",
-  "color-background-button-link-active": "#d1f1ff",
-  "color-background-button-link-hover": "#f0fbff",
-  "color-background-button-normal-active": "#d1f1ff",
-  "color-background-button-normal-default": "#ffffff",
-  "color-background-button-normal-disabled": "#ffffff",
-  "color-background-button-normal-hover": "#f0fbff",
-  "color-background-button-primary-active": "#002b66",
-  "color-background-button-primary-default": "#006ce0",
-  "color-background-button-primary-disabled": "#ebebf0",
-  "color-background-button-primary-hover": "#002b66",
-  "color-background-calendar-current-date": "#f3f3f7",
-  "color-background-cell-shaded": "#f6f6f9",
-  "color-background-chat-bubble-incoming": "#f6f6f9",
-  "color-background-chat-bubble-outgoing": "transparent",
-  "color-background-code-editor-gutter-active-line-default": "#656871",
-  "color-background-code-editor-gutter-active-line-error": "#db0000",
-  "color-background-code-editor-gutter-default": "#f3f3f7",
-  "color-background-code-editor-loading": "#f9f9fa",
-  "color-background-code-editor-pane-item-hover": "#ebebf0",
-  "color-background-code-editor-status-bar": "#f3f3f7",
-  "color-background-container-content": "#ffffff",
-  "color-background-container-header": "#ffffff",
-  "color-background-control-checked": "#006ce0",
-  "color-background-control-default": "#ffffff",
-  "color-background-control-disabled": "#dedee3",
-  "color-background-direction-button-active": "#232b37",
-  "color-background-direction-button-default": "#424650",
-  "color-background-direction-button-disabled": "#ebebf0",
-  "color-background-direction-button-hover": "#333843",
-  "color-background-dropdown-item-default": "#ffffff",
-  "color-background-dropdown-item-dimmed": "transparent",
-  "color-background-dropdown-item-filter-match": "#f0fbff",
-  "color-background-dropdown-item-hover": "#f3f3f7",
-  "color-background-dropdown-item-selected": "#f0fbff",
-  "color-background-home-header": "#0f141a",
-  "color-background-input-default": "#ffffff",
-  "color-background-input-disabled": "#ebebf0",
-  "color-background-item-selected": "#f0fbff",
-  "color-background-layout-main": "#ffffff",
-  "color-background-layout-mobile-panel": "#0f141a",
-  "color-background-layout-panel-content": "#ffffff",
-  "color-background-layout-panel-hover": "#ebebf0",
-  "color-background-layout-toggle-active": "#424650",
-  "color-background-layout-toggle-default": "#424650",
-  "color-background-layout-toggle-hover": "#656871",
-  "color-background-layout-toggle-selected-active": "#006ce0",
-  "color-background-layout-toggle-selected-default": "#006ce0",
-  "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-  "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
-  "color-background-notification-blue": "#006ce0",
-  "color-background-notification-green": "#00802f",
-  "color-background-notification-grey": "#424650",
-  "color-background-notification-red": "#db0000",
-  "color-background-notification-severity-critical": "#870303",
-  "color-background-notification-severity-high": "#ce3311",
-  "color-background-notification-severity-low": "#f2cd54",
-  "color-background-notification-severity-medium": "#f89256",
-  "color-background-notification-severity-neutral": "#656871",
-  "color-background-notification-stack-bar": "#232b37",
-  "color-background-notification-stack-bar-active": "#232b37",
-  "color-background-notification-stack-bar-hover": "#424650",
-  "color-background-notification-yellow": "#ffe347",
-  "color-background-popover": "#ffffff",
-  "color-background-progress-bar-content-default": "#006ce0",
-  "color-background-progress-bar-content-in-flash": "#ffffff",
-  "color-background-progress-bar-layout-default": "#ebebf0",
-  "color-background-progress-bar-layout-in-flash": "rgba(255, 255, 255, 0.25)",
-  "color-background-segment-active": "#006ce0",
-  "color-background-segment-default": "#ffffff",
-  "color-background-segment-disabled": "#ffffff",
-  "color-background-segment-hover": "#f0fbff",
-  "color-background-slider-error-pressed": "#700000",
-  "color-background-slider-handle-active": "#004a9e",
-  "color-background-slider-handle-default": "#006ce0",
-  "color-background-slider-handle-ring": "#ffffff",
-  "color-background-slider-track": "#8c8c94",
-  "color-background-slider-warning-pressed": "#855900",
-  "color-background-status-error": "#fff5f5",
-  "color-background-status-info": "#f0fbff",
-  "color-background-status-success": "#effff1",
-  "color-background-status-warning": "#fffef0",
-  "color-background-table-header": "#ffffff",
-  "color-background-tiles-disabled": "#ebebf0",
-  "color-background-toggle-button-normal-pressed": "#d1f1ff",
-  "color-background-toggle-checked-disabled": "#b8e7ff",
-  "color-background-toggle-default": "#424650",
-  "color-board-placeholder-active": "#ebebf0",
-  "color-board-placeholder-hover": "#d1f1ff",
-  "color-border-button-normal-active": "#002b66",
-  "color-border-button-normal-default": "#006ce0",
-  "color-border-button-normal-disabled": "#b4b4bb",
-  "color-border-button-normal-hover": "#002b66",
-  "color-border-button-primary-disabled": "#ebebf0",
-  "color-border-calendar-grid": "transparent",
-  "color-border-calendar-grid-selected-focus-ring": "#f9f9fa",
-  "color-border-code-editor-ace-active-line-dark-theme": "#656871",
-  "color-border-code-editor-ace-active-line-light-theme": "#dedee3",
-  "color-border-code-editor-default": "#dedee3",
-  "color-border-code-editor-pane-item-hover": "#8c8c94",
-  "color-border-container-divider": "transparent",
-  "color-border-container-top": "transparent",
-  "color-border-control-checked": "#006ce0",
-  "color-border-control-default": "#8c8c94",
-  "color-border-control-disabled": "#dedee3",
-  "color-border-divider-active": "#0f141a",
-  "color-border-divider-default": "#c6c6cd",
-  "color-border-divider-interactive-default": "#8c8c94",
-  "color-border-divider-panel-bottom": "#c6c6cd",
-  "color-border-divider-panel-side": "#c6c6cd",
-  "color-border-divider-secondary": "#ebebf0",
-  "color-border-dropdown-container": "#b4b4bb",
-  "color-border-dropdown-group": "#c6c6cd",
-  "color-border-dropdown-item-default": "#c6c6cd",
-  "color-border-dropdown-item-dimmed-hover": "#8c8c94",
-  "color-border-dropdown-item-focused": "#424650",
-  "color-border-dropdown-item-hover": "#8c8c94",
-  "color-border-dropdown-item-selected": "#006ce0",
-  "color-border-dropdown-item-top": "transparent",
-  "color-border-editable-cell-hover": "#8c8c94",
-  "color-border-input-default": "#8c8c94",
-  "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#006ce0",
-  "color-border-item-focused": "#006ce0",
-  "color-border-item-placeholder": "#006ce0",
-  "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#c6c6cd",
-  "color-border-notification-stack-bar": "#232b37",
-  "color-border-panel-header": "#c6c6cd",
-  "color-border-popover": "#b4b4bb",
-  "color-border-segment-active": "#424650",
-  "color-border-segment-default": "#424650",
-  "color-border-segment-disabled": "#424650",
-  "color-border-segment-hover": "#424650",
-  "color-border-status-error": "#db0000",
-  "color-border-status-info": "#006ce0",
-  "color-border-status-success": "#00802f",
-  "color-border-status-warning": "#855900",
-  "color-border-tabs-divider": "#c6c6cd",
-  "color-border-tabs-shadow": "rgba(15, 20, 26, 0.12)",
-  "color-border-tabs-underline": "#006ce0",
-  "color-border-tiles-disabled": "#ebebf0",
-  "color-border-toggle-button-normal-pressed": "#006ce0",
-  "color-border-tutorial": "#dedee3",
-  "color-charts-blue-1-1000": "#01437d",
-  "color-charts-blue-1-1100": "#003c75",
-  "color-charts-blue-1-1200": "#00366d",
-  "color-charts-blue-1-300": "#529ccb",
-  "color-charts-blue-1-400": "#3184c2",
-  "color-charts-blue-1-500": "#0273bb",
-  "color-charts-blue-1-600": "#0166ab",
-  "color-charts-blue-1-700": "#015b9d",
-  "color-charts-blue-1-800": "#015292",
-  "color-charts-blue-1-900": "#014a87",
-  "color-charts-blue-2-1000": "#23379b",
-  "color-charts-blue-2-1100": "#1f3191",
-  "color-charts-blue-2-1200": "#1b2b88",
-  "color-charts-blue-2-300": "#688ae8",
-  "color-charts-blue-2-400": "#5978e3",
-  "color-charts-blue-2-500": "#4066df",
-  "color-charts-blue-2-600": "#3759ce",
-  "color-charts-blue-2-700": "#314fbf",
-  "color-charts-blue-2-800": "#2c46b1",
-  "color-charts-blue-2-900": "#273ea5",
-  "color-charts-green-1000": "#104d01",
-  "color-charts-green-1100": "#0f4601",
-  "color-charts-green-1200": "#0d4000",
-  "color-charts-green-300": "#67a353",
-  "color-charts-green-400": "#41902c",
-  "color-charts-green-500": "#1f8104",
-  "color-charts-green-600": "#1a7302",
-  "color-charts-green-700": "#176702",
-  "color-charts-green-800": "#145d02",
-  "color-charts-green-900": "#125502",
-  "color-charts-line-axis": "#dedee3",
-  "color-charts-line-grid": "#dedee3",
-  "color-charts-line-tick": "#dedee3",
-  "color-charts-orange-1000": "#732c02",
-  "color-charts-orange-1100": "#692801",
-  "color-charts-orange-1200": "#602400",
-  "color-charts-orange-300": "#e07941",
-  "color-charts-orange-400": "#cc5f21",
-  "color-charts-orange-500": "#bc4d01",
-  "color-charts-orange-600": "#a84401",
-  "color-charts-orange-700": "#983c02",
-  "color-charts-orange-800": "#8a3603",
-  "color-charts-orange-900": "#7e3103",
-  "color-charts-palette-categorical-1": "#688ae8",
-  "color-charts-palette-categorical-10": "#a84401",
-  "color-charts-palette-categorical-11": "#273ea5",
-  "color-charts-palette-categorical-12": "#780d35",
-  "color-charts-palette-categorical-13": "#03524a",
-  "color-charts-palette-categorical-14": "#4a238b",
-  "color-charts-palette-categorical-15": "#7e3103",
-  "color-charts-palette-categorical-16": "#1b2b88",
-  "color-charts-palette-categorical-17": "#ce567c",
-  "color-charts-palette-categorical-18": "#003e38",
-  "color-charts-palette-categorical-19": "#9469d6",
-  "color-charts-palette-categorical-2": "#c33d69",
-  "color-charts-palette-categorical-20": "#602400",
-  "color-charts-palette-categorical-21": "#4066df",
-  "color-charts-palette-categorical-22": "#a32952",
-  "color-charts-palette-categorical-23": "#0d7d70",
-  "color-charts-palette-categorical-24": "#6b40b2",
-  "color-charts-palette-categorical-25": "#bc4d01",
-  "color-charts-palette-categorical-26": "#2c46b1",
-  "color-charts-palette-categorical-27": "#81143b",
-  "color-charts-palette-categorical-28": "#045b52",
-  "color-charts-palette-categorical-29": "#512994",
-  "color-charts-palette-categorical-3": "#2ea597",
-  "color-charts-palette-categorical-30": "#8a3603",
-  "color-charts-palette-categorical-31": "#1f3191",
-  "color-charts-palette-categorical-32": "#da7596",
-  "color-charts-palette-categorical-33": "#01443e",
-  "color-charts-palette-categorical-34": "#a783e1",
-  "color-charts-palette-categorical-35": "#692801",
-  "color-charts-palette-categorical-36": "#5978e3",
-  "color-charts-palette-categorical-37": "#b1325c",
-  "color-charts-palette-categorical-38": "#1c8e81",
-  "color-charts-palette-categorical-39": "#7749bf",
-  "color-charts-palette-categorical-4": "#8456ce",
-  "color-charts-palette-categorical-40": "#cc5f21",
-  "color-charts-palette-categorical-41": "#314fbf",
-  "color-charts-palette-categorical-42": "#8b1b42",
-  "color-charts-palette-categorical-43": "#06645a",
-  "color-charts-palette-categorical-44": "#59309d",
-  "color-charts-palette-categorical-45": "#983c02",
-  "color-charts-palette-categorical-46": "#23379b",
-  "color-charts-palette-categorical-47": "#6f062f",
-  "color-charts-palette-categorical-48": "#014b44",
-  "color-charts-palette-categorical-49": "#431d84",
-  "color-charts-palette-categorical-5": "#e07941",
-  "color-charts-palette-categorical-50": "#732c02",
-  "color-charts-palette-categorical-6": "#3759ce",
-  "color-charts-palette-categorical-7": "#962249",
-  "color-charts-palette-categorical-8": "#096f64",
-  "color-charts-palette-categorical-9": "#6237a7",
-  "color-charts-pink-1000": "#81143b",
-  "color-charts-pink-1100": "#780d35",
-  "color-charts-pink-1200": "#6f062f",
-  "color-charts-pink-300": "#da7596",
-  "color-charts-pink-400": "#ce567c",
-  "color-charts-pink-500": "#c33d69",
-  "color-charts-pink-600": "#b1325c",
-  "color-charts-pink-700": "#a32952",
-  "color-charts-pink-800": "#962249",
-  "color-charts-pink-900": "#8b1b42",
-  "color-charts-purple-1000": "#512994",
-  "color-charts-purple-1100": "#4a238b",
-  "color-charts-purple-1200": "#431d84",
-  "color-charts-purple-300": "#a783e1",
-  "color-charts-purple-400": "#9469d6",
-  "color-charts-purple-500": "#8456ce",
-  "color-charts-purple-600": "#7749bf",
-  "color-charts-purple-700": "#6b40b2",
-  "color-charts-purple-800": "#6237a7",
-  "color-charts-purple-900": "#59309d",
-  "color-charts-red-1000": "#7d2105",
-  "color-charts-red-1100": "#721e03",
-  "color-charts-red-1200": "#671c00",
-  "color-charts-red-300": "#ea7158",
-  "color-charts-red-400": "#dc5032",
-  "color-charts-red-500": "#d13313",
-  "color-charts-red-600": "#ba2e0f",
-  "color-charts-red-700": "#a82a0c",
-  "color-charts-red-800": "#972709",
-  "color-charts-red-900": "#892407",
-  "color-charts-status-critical": "#7d2105",
-  "color-charts-status-high": "#ba2e0f",
-  "color-charts-status-info": "#3184c2",
-  "color-charts-status-low": "#b2911c",
-  "color-charts-status-medium": "#cc5f21",
-  "color-charts-status-neutral": "#8c8c94",
-  "color-charts-status-positive": "#67a353",
-  "color-charts-teal-1000": "#014b44",
-  "color-charts-teal-1100": "#01443e",
-  "color-charts-teal-1200": "#003e38",
-  "color-charts-teal-300": "#2ea597",
-  "color-charts-teal-400": "#1c8e81",
-  "color-charts-teal-500": "#0d7d70",
-  "color-charts-teal-600": "#096f64",
-  "color-charts-teal-700": "#06645a",
-  "color-charts-teal-800": "#045b52",
-  "color-charts-teal-900": "#03524a",
-  "color-charts-threshold-info": "#006ce0",
-  "color-charts-threshold-negative": "#db0000",
-  "color-charts-threshold-neutral": "#656871",
-  "color-charts-threshold-positive": "#00802f",
-  "color-charts-yellow-1000": "#553f03",
-  "color-charts-yellow-1100": "#4d3901",
-  "color-charts-yellow-1200": "#483300",
-  "color-charts-yellow-300": "#b2911c",
-  "color-charts-yellow-400": "#9c7b0b",
-  "color-charts-yellow-500": "#8a6b05",
-  "color-charts-yellow-600": "#7b5f04",
-  "color-charts-yellow-700": "#6f5504",
-  "color-charts-yellow-800": "#654d03",
-  "color-charts-yellow-900": "#5d4503",
-  "color-drag-placeholder-active": "#ebebf0",
-  "color-drag-placeholder-hover": "#d1f1ff",
-  "color-dropzone-background-default": "#ffffff",
-  "color-dropzone-background-hover": "#f0fbff",
-  "color-dropzone-border-default": "#8c8c94",
-  "color-dropzone-border-hover": "#002b66",
-  "color-dropzone-text-default": "#424650",
-  "color-dropzone-text-hover": "#424650",
-  "color-foreground-control-default": "#ffffff",
-  "color-foreground-control-disabled": "#ffffff",
-  "color-foreground-control-read-only": "#656871",
-  "color-shadow-default": "rgba(15, 20, 26, 0.12)",
-  "color-stroke-chart-line": "#8c8c94",
-  "color-text-accent": "#006ce0",
-  "color-text-avatar": "#ffffff",
-  "color-text-body-default": "#0f141a",
-  "color-text-body-secondary": "#424650",
-  "color-text-breadcrumb-current": "#656871",
-  "color-text-breadcrumb-icon": "#8c8c94",
-  "color-text-button-inline-icon-default": "#006ce0",
-  "color-text-button-inline-icon-disabled": "#b4b4bb",
-  "color-text-button-inline-icon-hover": "#002b66",
-  "color-text-button-normal-active": "#002b66",
-  "color-text-button-normal-default": "#006ce0",
-  "color-text-button-normal-disabled": "#8c8c94",
-  "color-text-button-normal-hover": "#002b66",
-  "color-text-button-primary-active": "#ffffff",
-  "color-text-button-primary-default": "#ffffff",
-  "color-text-button-primary-disabled": "#8c8c94",
-  "color-text-button-primary-hover": "#ffffff",
-  "color-text-calendar-date-hover": "#0f141a",
-  "color-text-calendar-month": "#656871",
-  "color-text-chat-bubble-incoming": "#0f141a",
-  "color-text-chat-bubble-outgoing": "#0f141a",
-  "color-text-code-editor-gutter-active-line": "#ffffff",
-  "color-text-code-editor-gutter-default": "#0f141a",
-  "color-text-code-editor-status-bar-disabled": "#8c8c94",
-  "color-text-code-editor-tab-button-error": "#ffffff",
-  "color-text-column-header": "#424650",
-  "color-text-column-sorting-icon": "#424650",
-  "color-text-control-disabled": "#b4b4bb",
-  "color-text-counter": "#656871",
-  "color-text-direction-button-default": "#ffffff",
-  "color-text-direction-button-disabled": "#b4b4bb",
-  "color-text-disabled": "#b4b4bb",
-  "color-text-disabled-inline-edit": "#424650",
-  "color-text-dropdown-footer": "#656871",
-  "color-text-dropdown-group-label": "#424650",
-  "color-text-dropdown-item-default": "#0f141a",
-  "color-text-dropdown-item-dimmed": "#b4b4bb",
-  "color-text-dropdown-item-disabled": "#b4b4bb",
-  "color-text-dropdown-item-filter-match": "#006ce0",
-  "color-text-dropdown-item-highlighted": "#0f141a",
-  "color-text-dropdown-item-secondary": "#656871",
-  "color-text-dropdown-item-secondary-hover": "#656871",
-  "color-text-empty": "#656871",
-  "color-text-expandable-section-default": "#0f141a",
-  "color-text-expandable-section-hover": "#006ce0",
-  "color-text-expandable-section-navigation-icon-default": "#424650",
-  "color-text-form-default": "#0f141a",
-  "color-text-form-label": "#0f141a",
-  "color-text-form-secondary": "#656871",
-  "color-text-group-label": "#424650",
-  "color-text-heading-default": "#0f141a",
-  "color-text-heading-secondary": "#424650",
-  "color-text-home-header-default": "#ebebf0",
-  "color-text-home-header-secondary": "#c6c6cd",
-  "color-text-icon-subtle": "#656871",
-  "color-text-input-disabled": "#b4b4bb",
-  "color-text-input-placeholder": "#656871",
-  "color-text-input-placeholder-disabled": "#b4b4bb",
-  "color-text-interactive-active": "#0f141a",
-  "color-text-interactive-default": "#424650",
-  "color-text-interactive-disabled": "#b4b4bb",
-  "color-text-interactive-hover": "#0f141a",
-  "color-text-interactive-inverted-default": "#dedee3",
-  "color-text-interactive-inverted-hover": "#f9f9fa",
-  "color-text-inverted": "#ffffff",
-  "color-text-label": "#0f141a",
-  "color-text-label-gen-ai": "#7300e5",
-  "color-text-layout-toggle": "#ffffff",
-  "color-text-layout-toggle-active": "#ffffff",
-  "color-text-layout-toggle-hover": "#006ce0",
-  "color-text-layout-toggle-selected": "#ffffff",
-  "color-text-link-button-normal-active": "#002b66",
-  "color-text-link-button-normal-default": "#006ce0",
-  "color-text-link-button-normal-hover": "#002b66",
-  "color-text-link-button-underline": "transparent",
-  "color-text-link-button-underline-hover": "transparent",
-  "color-text-link-default": "#006ce0",
-  "color-text-link-hover": "#002b66",
-  "color-text-link-inverted-hover": "#ffffff",
-  "color-text-notification-default": "#f9f9fa",
-  "color-text-notification-severity-critical": "#f9f9fa",
-  "color-text-notification-severity-high": "#f9f9fa",
-  "color-text-notification-severity-low": "#0f141a",
-  "color-text-notification-severity-medium": "#0f141a",
-  "color-text-notification-severity-neutral": "#f9f9fa",
-  "color-text-notification-stack-bar": "#ffffff",
-  "color-text-notification-yellow": "#0f141a",
-  "color-text-pagination-page-number-active-disabled": "#b4b4bb",
-  "color-text-pagination-page-number-default": "#424650",
-  "color-text-segment-active": "#ffffff",
-  "color-text-segment-default": "#424650",
-  "color-text-segment-hover": "#002b66",
-  "color-text-small": "#656871",
-  "color-text-status-error": "#db0000",
-  "color-text-status-inactive": "#656871",
-  "color-text-status-info": "#006ce0",
-  "color-text-status-success": "#00802f",
-  "color-text-status-warning": "#855900",
-  "color-text-toggle-button-icon-pressed": "#0f141a",
-  "color-text-toggle-button-normal-pressed": "#002b66",
-  "color-text-top-navigation-title": "#0f141a",
-  "color-transparent": "transparent",
-  "font-box-value-large-weight": "700",
-  "font-button-letter-spacing": "0.005em",
-  "font-chart-detail-size": "12px",
-  "font-display-label-weight": "700",
-  "font-expandable-heading-size": "16px",
-  "font-family-base": ""Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif",
-  "font-family-monospace": "Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace",
-  "font-header-h2-description-line-height": "20px",
-  "font-header-h2-description-size": "14px",
-  "font-link-button-letter-spacing": "0.005em",
-  "font-link-button-weight": "700",
-  "font-panel-header-line-height": "22px",
-  "font-panel-header-size": "18px",
-  "font-size-body-m": "14px",
-  "font-size-body-s": "12px",
-  "font-size-display-l": "42px",
-  "font-size-heading-l": "20px",
-  "font-size-heading-m": "18px",
-  "font-size-heading-s": "16px",
-  "font-size-heading-xl": "24px",
-  "font-size-heading-xs": "14px",
-  "font-smoothing-moz-osx": "grayscale",
-  "font-smoothing-webkit": "antialiased",
-  "font-tabs-disabled-weight": "700",
-  "font-tabs-line-height": "20px",
-  "font-tabs-size": "16px",
-  "font-wayfinding-link-active-weight": "700",
-  "font-weight-button": "700",
-  "font-weight-heading-l": "700",
-  "font-weight-heading-m": "700",
-  "font-weight-heading-s": "700",
-  "font-weight-heading-xl": "700",
-  "font-weight-heading-xs": "700",
-  "font-weight-heavy": "700",
-  "letter-spacing-body-s": "0.005em",
-  "letter-spacing-display-l": "-0.03em",
-  "letter-spacing-heading-l": "-0.015em",
-  "letter-spacing-heading-m": "-0.01em",
-  "letter-spacing-heading-s": "-0.005em",
-  "letter-spacing-heading-xl": "-0.02em",
-  "line-height-body-m": "20px",
-  "line-height-body-s": "16px",
-  "line-height-display-l": "48px",
-  "line-height-heading-l": "24px",
-  "line-height-heading-m": "22px",
-  "line-height-heading-s": "20px",
-  "line-height-heading-xl": "30px",
-  "line-height-heading-xs": "18px",
-  "motion-duration-avatar-gen-ai-gradient": "3600ms",
-  "motion-duration-avatar-loading-dots": "1200ms",
-  "motion-duration-complex": "250ms",
-  "motion-duration-expressive": "165ms",
-  "motion-duration-extra-slow": "270ms",
-  "motion-duration-fast": "90ms",
-  "motion-duration-moderate": "135ms",
-  "motion-duration-refresh-only-fast": "115ms",
-  "motion-duration-refresh-only-medium": "165ms",
-  "motion-duration-refresh-only-slow": "250ms",
-  "motion-duration-responsive": "115ms",
-  "motion-duration-rotate-180": "135ms",
-  "motion-duration-rotate-90": "135ms",
-  "motion-duration-show-paced": "180ms",
-  "motion-duration-show-quick": "135ms",
-  "motion-duration-slow": "180ms",
-  "motion-duration-transition-quick": "90ms",
-  "motion-duration-transition-show-paced": "180ms",
-  "motion-duration-transition-show-quick": "90ms",
-  "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
-  "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
-  "motion-easing-expressive": "cubic-bezier(0.84, 0, 0.16, 1)",
-  "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
-  "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
-  "motion-easing-refresh-only-c": "cubic-bezier(0.84, 0, 0.16, 1)",
-  "motion-easing-responsive": "cubic-bezier(0, 0, 0, 1)",
-  "motion-easing-rotate-180": "cubic-bezier(0.165, 0.84, 0.44, 1)",
-  "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)",
-  "motion-easing-show-paced": "ease-out",
-  "motion-easing-show-quick": "ease-out",
-  "motion-easing-sticky": "cubic-bezier(1, 0, 0.83, 1)",
-  "motion-easing-transition-quick": "linear",
-  "motion-easing-transition-show-paced": "ease-out",
-  "motion-keyframes-fade-in": "awsui-fade-in-35003c",
-  "motion-keyframes-fade-out": "awsui-fade-out-35003c",
-  "motion-keyframes-scale-popup": "awsui-scale-popup-35003c",
-  "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c",
-  "shadow-container": "0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)",
-  "shadow-container-active": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
-  "shadow-dropdown": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-dropup": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-flash-collapsed": "0px 4px 4px rgba(0, 0, 0, 0.25)",
-  "shadow-flash-sticky": "0px 4px 8px rgba(0, 7, 22, 0.1)",
-  "shadow-modal": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-panel": "0px 0px 0px 1px #b6bec9",
-  "shadow-panel-toggle": "0px 6px 12px 1px rgba(0, 7, 22, 0.12)",
-  "shadow-popover": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-split-bottom": "0px -36px 36px -36px rgba(0, 7, 22, 0.1)",
-  "shadow-split-side": "-1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.1)",
-  "shadow-sticky": "0px 4px 8px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-sticky-column-first": "4px 0px 8px 1px rgba(0, 7, 22, 0.1)",
-  "shadow-sticky-column-last": "-4px 0 8px 1px rgba(0, 28, 36, 0.1)",
-  "shadow-sticky-embedded": "0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1)",
-  "size-calendar-grid-width": "238px",
-  "size-control": "16px",
-  "size-icon-big": "32px",
-  "size-icon-large": "48px",
-  "size-icon-medium": "20px",
-  "size-icon-normal": "16px",
-  "size-table-selection-horizontal": "40px",
-  "size-vertical-input": "32px",
-  "size-vertical-panel-icon-offset": "15px",
-  "space-alert-action-left": "12px",
-  "space-alert-horizontal": "16px",
-  "space-alert-message-right": "4px",
-  "space-alert-vertical": "8px",
-  "space-button-focus-outline-gutter": "4px",
-  "space-button-horizontal": "20px",
-  "space-button-icon-focus-outline-gutter-vertical": "0px",
-  "space-button-icon-only-horizontal": "6px",
-  "space-button-inline-icon-focus-outline-gutter": "0px",
-  "space-button-modal-dismiss-vertical": "2px",
-  "space-calendar-grid-focus-outline-gutter": "-5px",
-  "space-calendar-grid-gutter": "6px",
-  "space-calendar-grid-selected-focus-outline-gutter": "-5px",
-  "space-card-horizontal": "20px",
-  "space-card-vertical": "16px",
-  "space-code-editor-status-focus-outline-gutter": "-7px",
-  "space-container-content-top": "4px",
-  "space-container-header-bottom": "8px",
-  "space-container-header-top": "12px",
-  "space-container-horizontal": "20px",
-  "space-content-header-padding-bottom": "16px",
-  "space-dark-header-overlap-distance": "36px",
-  "space-expandable-section-icon-offset-top": "4px",
-  "space-field-horizontal": "12px",
-  "space-field-icon-offset": "36px",
-  "space-filtering-token-dismiss-button-focus-outline-gutter": "-5px",
-  "space-filtering-token-operation-select-focus-outline-gutter": "-5px",
-  "space-flashbar-action-left": "12px",
-  "space-flashbar-dismiss-right": "0px",
-  "space-flashbar-horizontal": "16px",
-  "space-grid-gutter": "20px",
-  "space-key-value-gap": "0px",
-  "space-l": "20px",
-  "space-layout-content-bottom": "40px",
-  "space-layout-content-horizontal": "24px",
-  "space-layout-toggle-diameter": "36px",
-  "space-layout-toggle-padding": "12px",
-  "space-m": "16px",
-  "space-modal-content-bottom": "16px",
-  "space-modal-horizontal": "20px",
-  "space-none": "0px",
-  "space-option-icon-big-top": "0px",
-  "space-panel-content-bottom": "40px",
-  "space-panel-content-top": "20px",
-  "space-panel-divider-margin-horizontal": "8px",
-  "space-panel-header-vertical": "20px",
-  "space-panel-nav-left": "28px",
-  "space-panel-side-left": "28px",
-  "space-panel-side-right": "24px",
-  "space-panel-split-bottom": "20px",
-  "space-panel-split-top": "20px",
-  "space-s": "12px",
-  "space-scaled-2x-l": "20px",
-  "space-scaled-2x-m": "16px",
-  "space-scaled-2x-xl": "24px",
-  "space-scaled-2x-xxs": "4px",
-  "space-scaled-l": "20px",
-  "space-scaled-m": "16px",
-  "space-scaled-none": "0px",
-  "space-scaled-s": "12px",
-  "space-scaled-xl": "24px",
-  "space-scaled-xs": "8px",
-  "space-scaled-xxl": "32px",
-  "space-scaled-xxs": "4px",
-  "space-scaled-xxxl": "40px",
-  "space-scaled-xxxs": "2px",
-  "space-segmented-control-focus-outline-gutter": "6px",
-  "space-static-l": "20px",
-  "space-static-m": "16px",
-  "space-static-s": "12px",
-  "space-static-xl": "24px",
-  "space-static-xs": "8px",
-  "space-static-xxl": "32px",
-  "space-static-xxs": "4px",
-  "space-static-xxxl": "40px",
-  "space-static-xxxs": "2px",
-  "space-table-content-bottom": "4px",
-  "space-table-embedded-header-top": "0px",
-  "space-table-footer-horizontal": "0px",
-  "space-table-header-focus-outline-gutter": "0px",
-  "space-table-header-horizontal": "0px",
-  "space-table-header-tools-bottom": "0px",
-  "space-table-header-tools-full-page-bottom": "4px",
-  "space-table-horizontal": "20px",
-  "space-tabs-content-top": "12px",
-  "space-tabs-focus-outline-gutter": "-8px",
-  "space-tile-gutter": "24px",
-  "space-xl": "24px",
-  "space-xs": "8px",
-  "space-xxl": "32px",
-  "space-xxs": "4px",
-  "space-xxxl": "40px",
-  "space-xxxs": "2px",
-}
-`;
+exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" 1`] = `{}`;
 
 exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-compact" 1`] = `
 {

From c5080e1a28c1d3fbacc29fbd706b8208c6436632 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 2 Apr 2025 14:24:48 +0200
Subject: [PATCH 05/35] fix inlineLabelText background issue

---
 .../full-page-table.page.tsx                  | 21 ++++++++++++++++++-
 src/select/parts/styles.scss                  |  2 +-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/pages/app-layout-toolbar/full-page-table.page.tsx b/pages/app-layout-toolbar/full-page-table.page.tsx
index 006ef18458..ff9ecaee20 100644
--- a/pages/app-layout-toolbar/full-page-table.page.tsx
+++ b/pages/app-layout-toolbar/full-page-table.page.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useContext, useState } from 'react';
 
-import { AppLayoutToolbar, Button, Header, Link, Table } from '~components';
+import { AppLayoutToolbar, Button, Header, Link, Select, Table } from '~components';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import { Breadcrumbs, Footer, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks';
@@ -26,6 +26,8 @@ export default function () {
     setSelectedTool(article);
   }
 
+  const [selectedOption, setSelectedOption] = React.useState({ label: 'Option 1', value: '1' });
+
   return (
     <ScreenshotArea gutters={false}>
       <AppLayoutToolbar
@@ -40,6 +42,23 @@ export default function () {
         stickyNotifications={urlParams.stickyNotifications}
         content={
           <Table<Instance>
+            filter={
+              <Select
+                selectedOption={selectedOption}
+                onChange={({ detail }) =>
+                  setSelectedOption({
+                    label: detail.selectedOption.label || '',
+                    value: detail.selectedOption.value || '',
+                  })
+                }
+                options={[
+                  { label: 'Option 1', value: '1' },
+                  { label: 'Option 2', value: '2' },
+                  { label: 'Option 3', value: '3' },
+                ]}
+                inlineLabelText="Engine"
+              />
+            }
             header={
               <Header
                 variant="awsui-h1-sticky"
diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
index 0c90cab688..7da80a7f80 100644
--- a/src/select/parts/styles.scss
+++ b/src/select/parts/styles.scss
@@ -132,7 +132,7 @@ $inlineLabel-border-radius: 2px;
 }
 
 .inline-label {
-  background: awsui.$color-background-container-header;
+  background: awsui.$color-background-layout-main;
   border-start-start-radius: $inlineLabel-border-radius;
   border-start-end-radius: $inlineLabel-border-radius;
   border-end-start-radius: $inlineLabel-border-radius;

From 76db14b09433725da26204735317a814ce593f36 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 2 Apr 2025 16:14:04 +0200
Subject: [PATCH 06/35] resolve conflicts

---
 .../__snapshots__/themes.test.ts.snap         | 667 +++++++++++++++++-
 src/__integ__/utils.ts                        |  10 +
 .../functional-tests/public-exports.test.ts   |   4 +-
 src/__tests__/functional-tests/ssr.test.ts    |   2 +-
 .../test-utils-selectors.test.tsx             |   5 +-
 src/__tests__/utils.tsx                       |   9 +-
 6 files changed, 688 insertions(+), 9 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 2a412749de..1820659156 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -2668,7 +2668,672 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
 }
 `;
 
-exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" 1`] = `{}`;
+exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" 1`] = `
+{
+  "border-active-width": "4px",
+  "border-code-editor-status-divider-width": "1px",
+  "border-container-sticky-width": "0px",
+  "border-container-top-width": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-invalid-focus-ring-shadow-spread": "2px",
+  "border-divider-list-width": "1px",
+  "border-divider-section-width": "1px",
+  "border-dropdown-virtual-offset-width": "2px",
+  "border-invalid-width": "8px",
+  "border-item-width": "2px",
+  "border-line-chart-dash-array": "3 5",
+  "border-line-chart-line-join": "round",
+  "border-line-chart-width": "2px",
+  "border-link-focus-ring-outline": "0",
+  "border-link-focus-ring-shadow-spread": "2px",
+  "border-panel-header-width": "1px",
+  "border-panel-top-width": "1px",
+  "border-radius-alert": "12px",
+  "border-radius-badge": "4px",
+  "border-radius-button": "20px",
+  "border-radius-calendar-day-focus-ring": "3px",
+  "border-radius-chat-bubble": "8px",
+  "border-radius-code-editor": "8px",
+  "border-radius-container": "16px",
+  "border-radius-control-circular-focus-ring": "4px",
+  "border-radius-control-default-focus-ring": "4px",
+  "border-radius-dropdown": "8px",
+  "border-radius-dropzone": "12px",
+  "border-radius-flashbar": "12px",
+  "border-radius-input": "8px",
+  "border-radius-item": "8px",
+  "border-radius-popover": "8px",
+  "border-radius-tabs-focus-ring": "20px",
+  "border-radius-tiles": "8px",
+  "border-radius-token": "8px",
+  "border-radius-tutorial-panel-item": "8px",
+  "border-table-sticky-width": "1px",
+  "border-width-alert": "2px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
+  "border-width-popover": "2px",
+  "border-width-token": "2px",
+  "color-background-avatar-default": "#424650",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-badge-icon": "#db0000",
+  "color-background-button-link-active": "#d1f1ff",
+  "color-background-button-link-hover": "#f0fbff",
+  "color-background-button-normal-active": "#d1f1ff",
+  "color-background-button-normal-default": "#ffffff",
+  "color-background-button-normal-disabled": "#ffffff",
+  "color-background-button-normal-hover": "#f0fbff",
+  "color-background-button-primary-active": "#002b66",
+  "color-background-button-primary-default": "#006ce0",
+  "color-background-button-primary-disabled": "#ebebf0",
+  "color-background-button-primary-hover": "#002b66",
+  "color-background-calendar-current-date": "#f3f3f7",
+  "color-background-cell-shaded": "#f6f6f9",
+  "color-background-chat-bubble-incoming": "#f6f6f9",
+  "color-background-chat-bubble-outgoing": "transparent",
+  "color-background-code-editor-gutter-active-line-default": "#656871",
+  "color-background-code-editor-gutter-active-line-error": "#db0000",
+  "color-background-code-editor-gutter-default": "#f3f3f7",
+  "color-background-code-editor-loading": "#f9f9fa",
+  "color-background-code-editor-pane-item-hover": "#ebebf0",
+  "color-background-code-editor-status-bar": "#f3f3f7",
+  "color-background-container-content": "#ffffff",
+  "color-background-container-header": "#ffffff",
+  "color-background-control-checked": "#006ce0",
+  "color-background-control-default": "#ffffff",
+  "color-background-control-disabled": "#dedee3",
+  "color-background-direction-button-active": "#232b37",
+  "color-background-direction-button-default": "#424650",
+  "color-background-direction-button-disabled": "#ebebf0",
+  "color-background-direction-button-hover": "#333843",
+  "color-background-dropdown-item-default": "#ffffff",
+  "color-background-dropdown-item-dimmed": "transparent",
+  "color-background-dropdown-item-filter-match": "#f0fbff",
+  "color-background-dropdown-item-hover": "#f3f3f7",
+  "color-background-dropdown-item-selected": "#f0fbff",
+  "color-background-home-header": "#0f141a",
+  "color-background-input-default": "#ffffff",
+  "color-background-input-disabled": "#ebebf0",
+  "color-background-item-selected": "#f0fbff",
+  "color-background-layout-main": "#ffffff",
+  "color-background-layout-mobile-panel": "#0f141a",
+  "color-background-layout-panel-content": "#ffffff",
+  "color-background-layout-panel-hover": "#ebebf0",
+  "color-background-layout-toggle-active": "#424650",
+  "color-background-layout-toggle-default": "#424650",
+  "color-background-layout-toggle-hover": "#656871",
+  "color-background-layout-toggle-selected-active": "#006ce0",
+  "color-background-layout-toggle-selected-default": "#006ce0",
+  "color-background-layout-toggle-selected-hover": "#004a9e",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
+  "color-background-notification-blue": "#006ce0",
+  "color-background-notification-green": "#00802f",
+  "color-background-notification-grey": "#424650",
+  "color-background-notification-red": "#db0000",
+  "color-background-notification-severity-critical": "#870303",
+  "color-background-notification-severity-high": "#ce3311",
+  "color-background-notification-severity-low": "#f2cd54",
+  "color-background-notification-severity-medium": "#f89256",
+  "color-background-notification-severity-neutral": "#656871",
+  "color-background-notification-stack-bar": "#232b37",
+  "color-background-notification-stack-bar-active": "#232b37",
+  "color-background-notification-stack-bar-hover": "#424650",
+  "color-background-notification-yellow": "#ffe347",
+  "color-background-popover": "#ffffff",
+  "color-background-progress-bar-content-default": "#006ce0",
+  "color-background-progress-bar-content-in-flash": "#ffffff",
+  "color-background-progress-bar-layout-default": "#ebebf0",
+  "color-background-progress-bar-layout-in-flash": "rgba(255, 255, 255, 0.25)",
+  "color-background-segment-active": "#006ce0",
+  "color-background-segment-default": "#ffffff",
+  "color-background-segment-disabled": "#ffffff",
+  "color-background-segment-hover": "#f0fbff",
+  "color-background-slider-error-pressed": "#700000",
+  "color-background-slider-handle-active": "#004a9e",
+  "color-background-slider-handle-default": "#006ce0",
+  "color-background-slider-handle-ring": "#ffffff",
+  "color-background-slider-track": "#8c8c94",
+  "color-background-slider-warning-pressed": "#855900",
+  "color-background-status-error": "#fff5f5",
+  "color-background-status-info": "#f0fbff",
+  "color-background-status-success": "#effff1",
+  "color-background-status-warning": "#fffef0",
+  "color-background-table-header": "#ffffff",
+  "color-background-tiles-disabled": "#ebebf0",
+  "color-background-toggle-button-normal-pressed": "#d1f1ff",
+  "color-background-toggle-checked-disabled": "#b8e7ff",
+  "color-background-toggle-default": "#424650",
+  "color-board-placeholder-active": "#ebebf0",
+  "color-board-placeholder-hover": "#d1f1ff",
+  "color-border-button-normal-active": "#002b66",
+  "color-border-button-normal-default": "#006ce0",
+  "color-border-button-normal-disabled": "#b4b4bb",
+  "color-border-button-normal-hover": "#002b66",
+  "color-border-button-primary-disabled": "#ebebf0",
+  "color-border-calendar-grid": "transparent",
+  "color-border-calendar-grid-selected-focus-ring": "#f9f9fa",
+  "color-border-code-editor-ace-active-line-dark-theme": "#656871",
+  "color-border-code-editor-ace-active-line-light-theme": "#dedee3",
+  "color-border-code-editor-default": "#dedee3",
+  "color-border-code-editor-pane-item-hover": "#8c8c94",
+  "color-border-container-divider": "transparent",
+  "color-border-container-top": "transparent",
+  "color-border-control-checked": "#006ce0",
+  "color-border-control-default": "#8c8c94",
+  "color-border-control-disabled": "#dedee3",
+  "color-border-divider-active": "#0f141a",
+  "color-border-divider-default": "#c6c6cd",
+  "color-border-divider-interactive-default": "#8c8c94",
+  "color-border-divider-panel-bottom": "#c6c6cd",
+  "color-border-divider-panel-side": "#c6c6cd",
+  "color-border-divider-secondary": "#ebebf0",
+  "color-border-dropdown-container": "#b4b4bb",
+  "color-border-dropdown-group": "#c6c6cd",
+  "color-border-dropdown-item-default": "#c6c6cd",
+  "color-border-dropdown-item-dimmed-hover": "#8c8c94",
+  "color-border-dropdown-item-focused": "#424650",
+  "color-border-dropdown-item-hover": "#8c8c94",
+  "color-border-dropdown-item-selected": "#006ce0",
+  "color-border-dropdown-item-top": "transparent",
+  "color-border-editable-cell-hover": "#8c8c94",
+  "color-border-input-default": "#8c8c94",
+  "color-border-input-disabled": "#ebebf0",
+  "color-border-input-focused": "#006ce0",
+  "color-border-item-focused": "#006ce0",
+  "color-border-item-placeholder": "#006ce0",
+  "color-border-item-selected": "#006ce0",
+  "color-border-layout": "#c6c6cd",
+  "color-border-notification-stack-bar": "#232b37",
+  "color-border-panel-header": "#c6c6cd",
+  "color-border-popover": "#b4b4bb",
+  "color-border-segment-active": "#424650",
+  "color-border-segment-default": "#424650",
+  "color-border-segment-disabled": "#424650",
+  "color-border-segment-hover": "#424650",
+  "color-border-status-error": "#db0000",
+  "color-border-status-info": "#006ce0",
+  "color-border-status-success": "#00802f",
+  "color-border-status-warning": "#855900",
+  "color-border-tabs-divider": "#c6c6cd",
+  "color-border-tabs-shadow": "rgba(15, 20, 26, 0.12)",
+  "color-border-tabs-underline": "#006ce0",
+  "color-border-tiles-disabled": "#ebebf0",
+  "color-border-toggle-button-normal-pressed": "#006ce0",
+  "color-border-tutorial": "#dedee3",
+  "color-charts-blue-1-1000": "#01437d",
+  "color-charts-blue-1-1100": "#003c75",
+  "color-charts-blue-1-1200": "#00366d",
+  "color-charts-blue-1-300": "#529ccb",
+  "color-charts-blue-1-400": "#3184c2",
+  "color-charts-blue-1-500": "#0273bb",
+  "color-charts-blue-1-600": "#0166ab",
+  "color-charts-blue-1-700": "#015b9d",
+  "color-charts-blue-1-800": "#015292",
+  "color-charts-blue-1-900": "#014a87",
+  "color-charts-blue-2-1000": "#23379b",
+  "color-charts-blue-2-1100": "#1f3191",
+  "color-charts-blue-2-1200": "#1b2b88",
+  "color-charts-blue-2-300": "#688ae8",
+  "color-charts-blue-2-400": "#5978e3",
+  "color-charts-blue-2-500": "#4066df",
+  "color-charts-blue-2-600": "#3759ce",
+  "color-charts-blue-2-700": "#314fbf",
+  "color-charts-blue-2-800": "#2c46b1",
+  "color-charts-blue-2-900": "#273ea5",
+  "color-charts-green-1000": "#104d01",
+  "color-charts-green-1100": "#0f4601",
+  "color-charts-green-1200": "#0d4000",
+  "color-charts-green-300": "#67a353",
+  "color-charts-green-400": "#41902c",
+  "color-charts-green-500": "#1f8104",
+  "color-charts-green-600": "#1a7302",
+  "color-charts-green-700": "#176702",
+  "color-charts-green-800": "#145d02",
+  "color-charts-green-900": "#125502",
+  "color-charts-line-axis": "#dedee3",
+  "color-charts-line-grid": "#dedee3",
+  "color-charts-line-tick": "#dedee3",
+  "color-charts-orange-1000": "#732c02",
+  "color-charts-orange-1100": "#692801",
+  "color-charts-orange-1200": "#602400",
+  "color-charts-orange-300": "#e07941",
+  "color-charts-orange-400": "#cc5f21",
+  "color-charts-orange-500": "#bc4d01",
+  "color-charts-orange-600": "#a84401",
+  "color-charts-orange-700": "#983c02",
+  "color-charts-orange-800": "#8a3603",
+  "color-charts-orange-900": "#7e3103",
+  "color-charts-palette-categorical-1": "#688ae8",
+  "color-charts-palette-categorical-10": "#a84401",
+  "color-charts-palette-categorical-11": "#273ea5",
+  "color-charts-palette-categorical-12": "#780d35",
+  "color-charts-palette-categorical-13": "#03524a",
+  "color-charts-palette-categorical-14": "#4a238b",
+  "color-charts-palette-categorical-15": "#7e3103",
+  "color-charts-palette-categorical-16": "#1b2b88",
+  "color-charts-palette-categorical-17": "#ce567c",
+  "color-charts-palette-categorical-18": "#003e38",
+  "color-charts-palette-categorical-19": "#9469d6",
+  "color-charts-palette-categorical-2": "#c33d69",
+  "color-charts-palette-categorical-20": "#602400",
+  "color-charts-palette-categorical-21": "#4066df",
+  "color-charts-palette-categorical-22": "#a32952",
+  "color-charts-palette-categorical-23": "#0d7d70",
+  "color-charts-palette-categorical-24": "#6b40b2",
+  "color-charts-palette-categorical-25": "#bc4d01",
+  "color-charts-palette-categorical-26": "#2c46b1",
+  "color-charts-palette-categorical-27": "#81143b",
+  "color-charts-palette-categorical-28": "#045b52",
+  "color-charts-palette-categorical-29": "#512994",
+  "color-charts-palette-categorical-3": "#2ea597",
+  "color-charts-palette-categorical-30": "#8a3603",
+  "color-charts-palette-categorical-31": "#1f3191",
+  "color-charts-palette-categorical-32": "#da7596",
+  "color-charts-palette-categorical-33": "#01443e",
+  "color-charts-palette-categorical-34": "#a783e1",
+  "color-charts-palette-categorical-35": "#692801",
+  "color-charts-palette-categorical-36": "#5978e3",
+  "color-charts-palette-categorical-37": "#b1325c",
+  "color-charts-palette-categorical-38": "#1c8e81",
+  "color-charts-palette-categorical-39": "#7749bf",
+  "color-charts-palette-categorical-4": "#8456ce",
+  "color-charts-palette-categorical-40": "#cc5f21",
+  "color-charts-palette-categorical-41": "#314fbf",
+  "color-charts-palette-categorical-42": "#8b1b42",
+  "color-charts-palette-categorical-43": "#06645a",
+  "color-charts-palette-categorical-44": "#59309d",
+  "color-charts-palette-categorical-45": "#983c02",
+  "color-charts-palette-categorical-46": "#23379b",
+  "color-charts-palette-categorical-47": "#6f062f",
+  "color-charts-palette-categorical-48": "#014b44",
+  "color-charts-palette-categorical-49": "#431d84",
+  "color-charts-palette-categorical-5": "#e07941",
+  "color-charts-palette-categorical-50": "#732c02",
+  "color-charts-palette-categorical-6": "#3759ce",
+  "color-charts-palette-categorical-7": "#962249",
+  "color-charts-palette-categorical-8": "#096f64",
+  "color-charts-palette-categorical-9": "#6237a7",
+  "color-charts-pink-1000": "#81143b",
+  "color-charts-pink-1100": "#780d35",
+  "color-charts-pink-1200": "#6f062f",
+  "color-charts-pink-300": "#da7596",
+  "color-charts-pink-400": "#ce567c",
+  "color-charts-pink-500": "#c33d69",
+  "color-charts-pink-600": "#b1325c",
+  "color-charts-pink-700": "#a32952",
+  "color-charts-pink-800": "#962249",
+  "color-charts-pink-900": "#8b1b42",
+  "color-charts-purple-1000": "#512994",
+  "color-charts-purple-1100": "#4a238b",
+  "color-charts-purple-1200": "#431d84",
+  "color-charts-purple-300": "#a783e1",
+  "color-charts-purple-400": "#9469d6",
+  "color-charts-purple-500": "#8456ce",
+  "color-charts-purple-600": "#7749bf",
+  "color-charts-purple-700": "#6b40b2",
+  "color-charts-purple-800": "#6237a7",
+  "color-charts-purple-900": "#59309d",
+  "color-charts-red-1000": "#7d2105",
+  "color-charts-red-1100": "#721e03",
+  "color-charts-red-1200": "#671c00",
+  "color-charts-red-300": "#ea7158",
+  "color-charts-red-400": "#dc5032",
+  "color-charts-red-500": "#d13313",
+  "color-charts-red-600": "#ba2e0f",
+  "color-charts-red-700": "#a82a0c",
+  "color-charts-red-800": "#972709",
+  "color-charts-red-900": "#892407",
+  "color-charts-status-critical": "#7d2105",
+  "color-charts-status-high": "#ba2e0f",
+  "color-charts-status-info": "#3184c2",
+  "color-charts-status-low": "#b2911c",
+  "color-charts-status-medium": "#cc5f21",
+  "color-charts-status-neutral": "#8c8c94",
+  "color-charts-status-positive": "#67a353",
+  "color-charts-teal-1000": "#014b44",
+  "color-charts-teal-1100": "#01443e",
+  "color-charts-teal-1200": "#003e38",
+  "color-charts-teal-300": "#2ea597",
+  "color-charts-teal-400": "#1c8e81",
+  "color-charts-teal-500": "#0d7d70",
+  "color-charts-teal-600": "#096f64",
+  "color-charts-teal-700": "#06645a",
+  "color-charts-teal-800": "#045b52",
+  "color-charts-teal-900": "#03524a",
+  "color-charts-threshold-info": "#006ce0",
+  "color-charts-threshold-negative": "#db0000",
+  "color-charts-threshold-neutral": "#656871",
+  "color-charts-threshold-positive": "#00802f",
+  "color-charts-yellow-1000": "#553f03",
+  "color-charts-yellow-1100": "#4d3901",
+  "color-charts-yellow-1200": "#483300",
+  "color-charts-yellow-300": "#b2911c",
+  "color-charts-yellow-400": "#9c7b0b",
+  "color-charts-yellow-500": "#8a6b05",
+  "color-charts-yellow-600": "#7b5f04",
+  "color-charts-yellow-700": "#6f5504",
+  "color-charts-yellow-800": "#654d03",
+  "color-charts-yellow-900": "#5d4503",
+  "color-drag-placeholder-active": "#ebebf0",
+  "color-drag-placeholder-hover": "#d1f1ff",
+  "color-dropzone-background-default": "#ffffff",
+  "color-dropzone-background-hover": "#f0fbff",
+  "color-dropzone-border-default": "#8c8c94",
+  "color-dropzone-border-hover": "#002b66",
+  "color-dropzone-text-default": "#424650",
+  "color-dropzone-text-hover": "#424650",
+  "color-foreground-control-default": "#ffffff",
+  "color-foreground-control-disabled": "#ffffff",
+  "color-foreground-control-read-only": "#656871",
+  "color-shadow-default": "rgba(15, 20, 26, 0.12)",
+  "color-stroke-chart-line": "#8c8c94",
+  "color-text-accent": "#006ce0",
+  "color-text-avatar": "#ffffff",
+  "color-text-body-default": "#0f141a",
+  "color-text-body-secondary": "#424650",
+  "color-text-breadcrumb-current": "#656871",
+  "color-text-breadcrumb-icon": "#8c8c94",
+  "color-text-button-inline-icon-default": "#006ce0",
+  "color-text-button-inline-icon-disabled": "#b4b4bb",
+  "color-text-button-inline-icon-hover": "#002b66",
+  "color-text-button-normal-active": "#002b66",
+  "color-text-button-normal-default": "#006ce0",
+  "color-text-button-normal-disabled": "#8c8c94",
+  "color-text-button-normal-hover": "#002b66",
+  "color-text-button-primary-active": "#ffffff",
+  "color-text-button-primary-default": "#ffffff",
+  "color-text-button-primary-disabled": "#8c8c94",
+  "color-text-button-primary-hover": "#ffffff",
+  "color-text-calendar-date-hover": "#0f141a",
+  "color-text-calendar-month": "#656871",
+  "color-text-chat-bubble-incoming": "#0f141a",
+  "color-text-chat-bubble-outgoing": "#0f141a",
+  "color-text-code-editor-gutter-active-line": "#ffffff",
+  "color-text-code-editor-gutter-default": "#0f141a",
+  "color-text-code-editor-status-bar-disabled": "#8c8c94",
+  "color-text-code-editor-tab-button-error": "#ffffff",
+  "color-text-column-header": "#424650",
+  "color-text-column-sorting-icon": "#424650",
+  "color-text-control-disabled": "#b4b4bb",
+  "color-text-counter": "#656871",
+  "color-text-direction-button-default": "#ffffff",
+  "color-text-direction-button-disabled": "#b4b4bb",
+  "color-text-disabled": "#b4b4bb",
+  "color-text-disabled-inline-edit": "#424650",
+  "color-text-dropdown-footer": "#656871",
+  "color-text-dropdown-group-label": "#424650",
+  "color-text-dropdown-item-default": "#0f141a",
+  "color-text-dropdown-item-dimmed": "#b4b4bb",
+  "color-text-dropdown-item-disabled": "#b4b4bb",
+  "color-text-dropdown-item-filter-match": "#006ce0",
+  "color-text-dropdown-item-highlighted": "#0f141a",
+  "color-text-dropdown-item-secondary": "#656871",
+  "color-text-dropdown-item-secondary-hover": "#656871",
+  "color-text-empty": "#656871",
+  "color-text-expandable-section-default": "#0f141a",
+  "color-text-expandable-section-hover": "#006ce0",
+  "color-text-expandable-section-navigation-icon-default": "#424650",
+  "color-text-form-default": "#0f141a",
+  "color-text-form-label": "#0f141a",
+  "color-text-form-secondary": "#656871",
+  "color-text-group-label": "#424650",
+  "color-text-heading-default": "#0f141a",
+  "color-text-heading-secondary": "#424650",
+  "color-text-home-header-default": "#ebebf0",
+  "color-text-home-header-secondary": "#c6c6cd",
+  "color-text-icon-subtle": "#656871",
+  "color-text-input-disabled": "#b4b4bb",
+  "color-text-input-placeholder": "#656871",
+  "color-text-input-placeholder-disabled": "#b4b4bb",
+  "color-text-interactive-active": "#0f141a",
+  "color-text-interactive-default": "#424650",
+  "color-text-interactive-disabled": "#b4b4bb",
+  "color-text-interactive-hover": "#0f141a",
+  "color-text-interactive-inverted-default": "#dedee3",
+  "color-text-interactive-inverted-hover": "#f9f9fa",
+  "color-text-inverted": "#ffffff",
+  "color-text-label": "#0f141a",
+  "color-text-label-gen-ai": "#7300e5",
+  "color-text-layout-toggle": "#ffffff",
+  "color-text-layout-toggle-active": "#ffffff",
+  "color-text-layout-toggle-hover": "#006ce0",
+  "color-text-layout-toggle-selected": "#ffffff",
+  "color-text-link-button-normal-active": "#002b66",
+  "color-text-link-button-normal-default": "#006ce0",
+  "color-text-link-button-normal-hover": "#002b66",
+  "color-text-link-button-underline": "transparent",
+  "color-text-link-button-underline-hover": "transparent",
+  "color-text-link-default": "#006ce0",
+  "color-text-link-hover": "#002b66",
+  "color-text-link-inverted-hover": "#ffffff",
+  "color-text-notification-default": "#f9f9fa",
+  "color-text-notification-severity-critical": "#f9f9fa",
+  "color-text-notification-severity-high": "#f9f9fa",
+  "color-text-notification-severity-low": "#0f141a",
+  "color-text-notification-severity-medium": "#0f141a",
+  "color-text-notification-severity-neutral": "#f9f9fa",
+  "color-text-notification-stack-bar": "#ffffff",
+  "color-text-notification-yellow": "#0f141a",
+  "color-text-pagination-page-number-active-disabled": "#b4b4bb",
+  "color-text-pagination-page-number-default": "#424650",
+  "color-text-segment-active": "#ffffff",
+  "color-text-segment-default": "#424650",
+  "color-text-segment-hover": "#002b66",
+  "color-text-small": "#656871",
+  "color-text-status-error": "#db0000",
+  "color-text-status-inactive": "#656871",
+  "color-text-status-info": "#006ce0",
+  "color-text-status-success": "#00802f",
+  "color-text-status-warning": "#855900",
+  "color-text-toggle-button-icon-pressed": "#0f141a",
+  "color-text-toggle-button-normal-pressed": "#002b66",
+  "color-text-top-navigation-title": "#0f141a",
+  "color-transparent": "transparent",
+  "font-box-value-large-weight": "700",
+  "font-button-letter-spacing": "0.005em",
+  "font-chart-detail-size": "12px",
+  "font-display-label-weight": "700",
+  "font-expandable-heading-size": "16px",
+  "font-family-base": ""Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif",
+  "font-family-monospace": "Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace",
+  "font-header-h2-description-line-height": "20px",
+  "font-header-h2-description-size": "14px",
+  "font-link-button-letter-spacing": "0.005em",
+  "font-link-button-weight": "700",
+  "font-panel-header-line-height": "22px",
+  "font-panel-header-size": "18px",
+  "font-size-body-m": "14px",
+  "font-size-body-s": "12px",
+  "font-size-display-l": "42px",
+  "font-size-heading-l": "20px",
+  "font-size-heading-m": "18px",
+  "font-size-heading-s": "16px",
+  "font-size-heading-xl": "24px",
+  "font-size-heading-xs": "14px",
+  "font-smoothing-moz-osx": "grayscale",
+  "font-smoothing-webkit": "antialiased",
+  "font-tabs-disabled-weight": "700",
+  "font-tabs-line-height": "20px",
+  "font-tabs-size": "16px",
+  "font-wayfinding-link-active-weight": "700",
+  "font-weight-button": "700",
+  "font-weight-heading-l": "700",
+  "font-weight-heading-m": "700",
+  "font-weight-heading-s": "700",
+  "font-weight-heading-xl": "700",
+  "font-weight-heading-xs": "700",
+  "font-weight-heavy": "700",
+  "letter-spacing-body-s": "0.005em",
+  "letter-spacing-display-l": "-0.03em",
+  "letter-spacing-heading-l": "-0.015em",
+  "letter-spacing-heading-m": "-0.01em",
+  "letter-spacing-heading-s": "-0.005em",
+  "letter-spacing-heading-xl": "-0.02em",
+  "line-height-body-m": "20px",
+  "line-height-body-s": "16px",
+  "line-height-display-l": "48px",
+  "line-height-heading-l": "24px",
+  "line-height-heading-m": "22px",
+  "line-height-heading-s": "20px",
+  "line-height-heading-xl": "30px",
+  "line-height-heading-xs": "18px",
+  "motion-duration-avatar-gen-ai-gradient": "3600ms",
+  "motion-duration-avatar-loading-dots": "1200ms",
+  "motion-duration-complex": "250ms",
+  "motion-duration-expressive": "165ms",
+  "motion-duration-extra-slow": "270ms",
+  "motion-duration-fast": "90ms",
+  "motion-duration-moderate": "135ms",
+  "motion-duration-refresh-only-fast": "115ms",
+  "motion-duration-refresh-only-medium": "165ms",
+  "motion-duration-refresh-only-slow": "250ms",
+  "motion-duration-responsive": "115ms",
+  "motion-duration-rotate-180": "135ms",
+  "motion-duration-rotate-90": "135ms",
+  "motion-duration-show-paced": "180ms",
+  "motion-duration-show-quick": "135ms",
+  "motion-duration-slow": "180ms",
+  "motion-duration-transition-quick": "90ms",
+  "motion-duration-transition-show-paced": "180ms",
+  "motion-duration-transition-show-quick": "90ms",
+  "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
+  "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expressive": "cubic-bezier(0.84, 0, 0.16, 1)",
+  "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
+  "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
+  "motion-easing-refresh-only-c": "cubic-bezier(0.84, 0, 0.16, 1)",
+  "motion-easing-responsive": "cubic-bezier(0, 0, 0, 1)",
+  "motion-easing-rotate-180": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-show-paced": "ease-out",
+  "motion-easing-show-quick": "ease-out",
+  "motion-easing-sticky": "cubic-bezier(1, 0, 0.83, 1)",
+  "motion-easing-transition-quick": "linear",
+  "motion-easing-transition-show-paced": "ease-out",
+  "motion-keyframes-fade-in": "awsui-fade-in-35003c",
+  "motion-keyframes-fade-out": "awsui-fade-out-35003c",
+  "motion-keyframes-scale-popup": "awsui-scale-popup-35003c",
+  "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c",
+  "shadow-container": "0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)",
+  "shadow-container-active": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
+  "shadow-dropdown": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
+  "shadow-dropup": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
+  "shadow-flash-collapsed": "0px 4px 4px rgba(0, 0, 0, 0.25)",
+  "shadow-flash-sticky": "0px 4px 8px rgba(0, 7, 22, 0.1)",
+  "shadow-modal": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
+  "shadow-panel": "0px 0px 0px 1px #b6bec9",
+  "shadow-panel-toggle": "0px 6px 12px 1px rgba(0, 7, 22, 0.12)",
+  "shadow-popover": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
+  "shadow-split-bottom": "0px -36px 36px -36px rgba(0, 7, 22, 0.1)",
+  "shadow-split-side": "-1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.1)",
+  "shadow-sticky": "0px 4px 8px 1px rgba(0, 7, 22, 0.1)",
+  "shadow-sticky-column-first": "4px 0px 8px 1px rgba(0, 7, 22, 0.1)",
+  "shadow-sticky-column-last": "-4px 0 8px 1px rgba(0, 28, 36, 0.1)",
+  "shadow-sticky-embedded": "0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1)",
+  "size-calendar-grid-width": "238px",
+  "size-control": "16px",
+  "size-icon-big": "32px",
+  "size-icon-large": "48px",
+  "size-icon-medium": "20px",
+  "size-icon-normal": "16px",
+  "size-table-selection-horizontal": "40px",
+  "size-vertical-input": "32px",
+  "size-vertical-panel-icon-offset": "15px",
+  "space-alert-action-left": "12px",
+  "space-alert-horizontal": "16px",
+  "space-alert-message-right": "4px",
+  "space-alert-vertical": "8px",
+  "space-button-focus-outline-gutter": "4px",
+  "space-button-horizontal": "20px",
+  "space-button-icon-focus-outline-gutter-vertical": "0px",
+  "space-button-icon-only-horizontal": "6px",
+  "space-button-inline-icon-focus-outline-gutter": "0px",
+  "space-button-modal-dismiss-vertical": "2px",
+  "space-calendar-grid-focus-outline-gutter": "-5px",
+  "space-calendar-grid-gutter": "6px",
+  "space-calendar-grid-selected-focus-outline-gutter": "-5px",
+  "space-card-horizontal": "20px",
+  "space-card-vertical": "16px",
+  "space-code-editor-status-focus-outline-gutter": "-7px",
+  "space-container-content-top": "4px",
+  "space-container-header-bottom": "8px",
+  "space-container-header-top": "12px",
+  "space-container-horizontal": "20px",
+  "space-content-header-padding-bottom": "16px",
+  "space-dark-header-overlap-distance": "36px",
+  "space-expandable-section-icon-offset-top": "4px",
+  "space-field-horizontal": "12px",
+  "space-field-icon-offset": "36px",
+  "space-filtering-token-dismiss-button-focus-outline-gutter": "-5px",
+  "space-filtering-token-operation-select-focus-outline-gutter": "-5px",
+  "space-flashbar-action-left": "12px",
+  "space-flashbar-dismiss-right": "0px",
+  "space-flashbar-horizontal": "16px",
+  "space-grid-gutter": "20px",
+  "space-key-value-gap": "0px",
+  "space-l": "20px",
+  "space-layout-content-bottom": "40px",
+  "space-layout-content-horizontal": "24px",
+  "space-layout-toggle-diameter": "36px",
+  "space-layout-toggle-padding": "12px",
+  "space-m": "16px",
+  "space-modal-content-bottom": "16px",
+  "space-modal-horizontal": "20px",
+  "space-none": "0px",
+  "space-option-icon-big-top": "0px",
+  "space-panel-content-bottom": "40px",
+  "space-panel-content-top": "20px",
+  "space-panel-divider-margin-horizontal": "8px",
+  "space-panel-header-vertical": "20px",
+  "space-panel-nav-left": "28px",
+  "space-panel-side-left": "28px",
+  "space-panel-side-right": "24px",
+  "space-panel-split-bottom": "20px",
+  "space-panel-split-top": "20px",
+  "space-s": "12px",
+  "space-scaled-2x-l": "20px",
+  "space-scaled-2x-m": "16px",
+  "space-scaled-2x-xl": "24px",
+  "space-scaled-2x-xxs": "4px",
+  "space-scaled-l": "20px",
+  "space-scaled-m": "16px",
+  "space-scaled-none": "0px",
+  "space-scaled-s": "12px",
+  "space-scaled-xl": "24px",
+  "space-scaled-xs": "8px",
+  "space-scaled-xxl": "32px",
+  "space-scaled-xxs": "4px",
+  "space-scaled-xxxl": "40px",
+  "space-scaled-xxxs": "2px",
+  "space-segmented-control-focus-outline-gutter": "6px",
+  "space-static-l": "20px",
+  "space-static-m": "16px",
+  "space-static-s": "12px",
+  "space-static-xl": "24px",
+  "space-static-xs": "8px",
+  "space-static-xxl": "32px",
+  "space-static-xxs": "4px",
+  "space-static-xxxl": "40px",
+  "space-static-xxxs": "2px",
+  "space-table-content-bottom": "4px",
+  "space-table-embedded-header-top": "0px",
+  "space-table-footer-horizontal": "0px",
+  "space-table-header-focus-outline-gutter": "0px",
+  "space-table-header-horizontal": "0px",
+  "space-table-header-tools-bottom": "0px",
+  "space-table-header-tools-full-page-bottom": "4px",
+  "space-table-horizontal": "20px",
+  "space-tabs-content-top": "12px",
+  "space-tabs-focus-outline-gutter": "-8px",
+  "space-tile-gutter": "24px",
+  "space-xl": "24px",
+  "space-xs": "8px",
+  "space-xxl": "32px",
+  "space-xxs": "4px",
+  "space-xxxl": "40px",
+  "space-xxxs": "2px",
+}
+`;
 
 exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-compact" 1`] = `
 {
diff --git a/src/__integ__/utils.ts b/src/__integ__/utils.ts
index 5f6b1694ba..44f3edb7ca 100644
--- a/src/__integ__/utils.ts
+++ b/src/__integ__/utils.ts
@@ -2,6 +2,16 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as glob from 'glob';
 
+export type Theme = 'classic' | 'refresh' | 'refresh-toolbar';
+export type Size = 'desktop' | 'mobile';
+
 export function findAllPages(): string[] {
   return glob.sync('**/*.page.tsx', { cwd: 'pages' }).map(file => file.replace(/\.page\.tsx$/, ''));
 }
+
+export async function times(n: number, fn: () => Promise<void>) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  for (const _ of new Array(n)) {
+    await fn();
+  }
+}
diff --git a/src/__tests__/functional-tests/public-exports.test.ts b/src/__tests__/functional-tests/public-exports.test.ts
index 9a992c6190..fa4b5fdf42 100644
--- a/src/__tests__/functional-tests/public-exports.test.ts
+++ b/src/__tests__/functional-tests/public-exports.test.ts
@@ -1,11 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { readFileSync } from 'fs';
 import path from 'path';
 
 // There are no typings for package.json
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const packageJson = require('../../../lib/components/package.json');
+const packageJson = JSON.parse(readFileSync(path.join(__dirname, '../../../lib/components/package.json'), 'utf-8'));
 
 test('all exports declarations resolve to a file', () => {
   for (const exportPath of Object.values<string>(packageJson.exports)) {
diff --git a/src/__tests__/functional-tests/ssr.test.ts b/src/__tests__/functional-tests/ssr.test.ts
index d594eb6771..7425a67850 100644
--- a/src/__tests__/functional-tests/ssr.test.ts
+++ b/src/__tests__/functional-tests/ssr.test.ts
@@ -52,6 +52,6 @@ describe.each(vrOnlyComponents)('VR only component %s', componentName => {
   test('should throw an error in classic', () => {
     const { default: Component } = requireComponent(componentName);
     const props = getRequiredPropsForComponent(componentName);
-    expect(() => renderToStaticMarkup(React.createElement(Component, props, 'test content'))).toThrowError();
+    expect(() => renderToStaticMarkup(React.createElement(Component, props, 'test content'))).toThrow();
   });
 });
diff --git a/src/__tests__/snapshot-tests/test-utils-selectors.test.tsx b/src/__tests__/snapshot-tests/test-utils-selectors.test.tsx
index 32d5e5e889..3cbbae49f6 100644
--- a/src/__tests__/snapshot-tests/test-utils-selectors.test.tsx
+++ b/src/__tests__/snapshot-tests/test-utils-selectors.test.tsx
@@ -7,6 +7,7 @@ import glob from 'glob';
 import { flatten, zip } from 'lodash';
 import path from 'path';
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const defaultPlugins = [require('@babel/plugin-syntax-typescript')] as const;
 
 // The test extracts generated selectors from the compiled output and matches those against the snapshot.
@@ -86,11 +87,11 @@ function extractSelectorProperties(file: string, onExtract: (filePath: string, p
     } as PluginObj;
   }
   const source = fs.readFileSync(file, 'utf-8');
-  transformSync(source, { babelrc: false, configFile: false, plugins: [...defaultPlugins, extractor] })?.code;
+  transformSync(source, { babelrc: false, configFile: false, plugins: [...defaultPlugins, extractor] });
 }
 
 function extractComponentSelectors(file: string, usedProperties: string[], onExtract: (selector: string) => void) {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const source = require(file);
   if (typeof source.default !== 'object') {
     throw new Error(`Unexpected selectors file format at ${file}.`);
diff --git a/src/__tests__/utils.tsx b/src/__tests__/utils.tsx
index aa333e69db..d4c41377e7 100644
--- a/src/__tests__/utils.tsx
+++ b/src/__tests__/utils.tsx
@@ -1,5 +1,3 @@
-/* eslint-env node */
-/* eslint-disable header/header */
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
@@ -62,16 +60,21 @@ function wrap({ default: Component }: { default: React.ComponentType }, Wrapper:
 
 export function requireComponent(componentName: string): any {
   if (componentName === 'split-panel') {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     return wrap(require(path.join(componentsDir, 'split-panel')), WrappedSplitPanel);
   }
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(path.join(componentsDir, componentName));
 }
 
 export function requireComponentDefinition(componentName: string): any {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(path.join(definitionsDir, componentName));
 }
 
 export function requireDesignTokensFile(fileName: string): any {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(path.join(designTokensDir, fileName));
 }
+
+export const testIf = (condition: boolean) => (condition ? test : test.skip);

From 680940e58e9a85c4002088462a15d3abb3e349c1 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 2 Apr 2025 17:24:26 +0200
Subject: [PATCH 07/35] fix inline label background issue

---
 .../__snapshots__/themes.test.ts.snap         |   76 +-
 .../__snapshots__/design-tokens.test.ts.snap  | 2953 ++---------------
 src/select/parts/styles.scss                  |    2 +-
 style-dictionary/visual-refresh/colors.ts     |    2 +-
 4 files changed, 246 insertions(+), 2787 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 1820659156..6a4497519b 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -41,12 +41,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
-  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -96,7 +94,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -708,12 +706,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
-  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff5d64",
   "color-background-button-link-active": "#16191f",
   "color-background-button-link-hover": "#21252c",
@@ -763,7 +759,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-layout-toggle-selected-active": "#00a1c9",
   "color-background-layout-toggle-selected-default": "#44b9d6",
   "color-background-layout-toggle-selected-hover": "#44b9d6",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(22, 25, 31, 0.8)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -1375,12 +1371,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
-  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -1430,7 +1424,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -2042,12 +2036,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
-  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -2097,7 +2089,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -2674,7 +2666,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -2709,12 +2701,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-button": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#db0000",
   "color-background-button-link-active": "#d1f1ff",
   "color-background-button-link-hover": "#f0fbff",
@@ -2764,7 +2754,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-layout-toggle-selected-active": "#006ce0",
   "color-background-layout-toggle-selected-default": "#006ce0",
   "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -2838,11 +2828,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#006ce0",
+  "color-border-input-focused": "#002b66",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#c6c6cd",
+  "color-border-layout": "#b4b4bb",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -3341,7 +3331,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -3376,12 +3366,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-button": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#db0000",
   "color-background-button-link-active": "#d1f1ff",
   "color-background-button-link-hover": "#f0fbff",
@@ -3431,7 +3419,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#006ce0",
   "color-background-layout-toggle-selected-default": "#006ce0",
   "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -3505,11 +3493,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#006ce0",
+  "color-border-input-focused": "#002b66",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#c6c6cd",
+  "color-border-layout": "#b4b4bb",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -4008,7 +3996,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4043,12 +4031,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-button": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff7a7a",
   "color-background-button-link-active": "#333843",
   "color-background-button-link-hover": "#1b232d",
@@ -4098,7 +4084,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#42b4ff",
   "color-background-layout-toggle-selected-default": "#42b4ff",
   "color-background-layout-toggle-selected-hover": "#75cfff",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -4172,7 +4158,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#75cfff",
+  "color-border-input-focused": "#b8e7ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
@@ -4675,7 +4661,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4710,12 +4696,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-button": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff7a7a",
   "color-background-button-link-active": "#333843",
   "color-background-button-link-hover": "#1b232d",
@@ -4765,7 +4749,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#42b4ff",
   "color-background-layout-toggle-selected-default": "#42b4ff",
   "color-background-layout-toggle-selected-hover": "#75cfff",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -4839,7 +4823,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#75cfff",
+  "color-border-input-focused": "#b8e7ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 69c591ee3b..4cf000c1fa 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -95,8 +95,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -312,8 +312,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -2620,8 +2620,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -2837,8 +2837,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -5145,8 +5145,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -5362,8 +5362,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -7670,8 +7670,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -7887,8 +7887,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -10195,8 +10195,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -10412,8 +10412,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -12720,8 +12720,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -12937,8 +12937,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -15245,8 +15245,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-avatar-gen-ai": {
       "$description": "The gen-ai background color of avatars.",
       "$value": {
-        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
       },
     },
     "color-background-button-normal-active": {
@@ -15462,8 +15462,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-loading-bar-gen-ai": {
       "$description": "The background color of gen-ai loading bars.",
       "$value": {
-        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
       },
     },
     "color-background-notification-blue": {
@@ -17759,7 +17759,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -17775,8 +17775,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -17992,8 +17992,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -18244,8 +18244,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -20284,2532 +20284,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
-        },
-        "border-width-popover": {
-          "$description": "The border width of popovers.",
-          "$value": "2px",
-        },
-        "color-background-avatar-default": {
-          "$description": "The default background color of avatars.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-avatar-gen-ai": {
-          "$description": "The gen-ai background color of avatars.",
-          "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-          },
-        },
-        "color-background-button-normal-active": {
-          "$description": "The background color of normal buttons in active state.",
-          "$value": {
-            "dark": "rgba(255, 255, 255, 0.15)",
-            "light": "rgba(255, 255, 255, 0.15)",
-          },
-        },
-        "color-background-button-normal-default": {
-          "$description": "The default background color of normal buttons.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-background-button-normal-disabled": {
-          "$description": "The background color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-button-normal-hover": {
-          "$description": "The background color of normal buttons in hover state.",
-          "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
-          },
-        },
-        "color-background-button-primary-active": {
-          "$description": "The background color of primary buttons in active state.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-button-primary-default": {
-          "$description": "The default background color of primary buttons.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-background-button-primary-disabled": {
-          "$description": "The background color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
-          },
-        },
-        "color-background-button-primary-hover": {
-          "$description": "The background color of primary buttons in hover state.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-cell-shaded": {
-          "$description": "The background color of shaded table cells.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-chat-bubble-incoming": {
-          "$description": "The background color of \`incoming\` chat bubble.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-background-chat-bubble-outgoing": {
-          "$description": "The background color of \`outgoing\` chat bubble.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-background-container-content": {
-          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-container-header": {
-          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-control-checked": {
-          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-control-default": {
-          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-control-disabled": {
-          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-dropdown-item-default": {
-          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-dropdown-item-filter-match": {
-          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-dropdown-item-hover": {
-          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
-          "$value": {
-            "dark": "#131920",
-            "light": "#131920",
-          },
-        },
-        "color-background-home-header": {
-          "$description": "The background color of the home header, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-background-input-default": {
-          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-input-disabled": {
-          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-item-selected": {
-          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
-          "$value": {
-            "dark": "#001129",
-            "light": "#001129",
-          },
-        },
-        "color-background-layout-main": {
-          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-layout-toggle-active": {
-          "$description": "The background color of the app layout toggle button when it's active.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-layout-toggle-default": {
-          "$description": "The default background color of the app layout toggle button.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-layout-toggle-hover": {
-          "$description": "The background color of the app layout toggle button on hover.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-layout-toggle-selected-active": {
-          "$description": "The background color of the app layout toggle button when it's selected and active.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-layout-toggle-selected-default": {
-          "$description": "The default background color of the app layout toggle button when it's selected.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-layout-toggle-selected-hover": {
-          "$description": "The background color of the app layout toggle button on hover when it's selected.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-background-loading-bar-gen-ai": {
-          "$description": "The background color of gen-ai loading bars.",
-          "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-          },
-        },
-        "color-background-notification-blue": {
-          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-background-notification-green": {
-          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
-          "$value": {
-            "dark": "#00802f",
-            "light": "#00802f",
-          },
-        },
-        "color-background-notification-grey": {
-          "$description": "Background color for grey notifications. For example: grey badges.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-notification-red": {
-          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
-          "$value": {
-            "dark": "#db0000",
-            "light": "#db0000",
-          },
-        },
-        "color-background-notification-severity-critical": {
-          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#870303",
-          },
-        },
-        "color-background-notification-severity-high": {
-          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#ce3311",
-          },
-        },
-        "color-background-notification-severity-low": {
-          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#f2cd54",
-            "light": "#f2cd54",
-          },
-        },
-        "color-background-notification-severity-medium": {
-          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#f89256",
-          },
-        },
-        "color-background-notification-severity-neutral": {
-          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-notification-yellow": {
-          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
-          "$value": {
-            "dark": "#ffe347",
-            "light": "#ffe347",
-          },
-        },
-        "color-background-popover": {
-          "$description": "Background color for the popover container.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-segment-active": {
-          "$description": "The background color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-segment-default": {
-          "$description": "The background color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-background-segment-disabled": {
-          "$description": "The background color of disabled segments in a segmented control.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-segment-hover": {
-          "$description": "The background color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
-          },
-        },
-        "color-background-status-error": {
-          "$description": "The background color of an item in error state. For example: error alerts.",
-          "$value": {
-            "dark": "#1f0000",
-            "light": "#1f0000",
-          },
-        },
-        "color-background-status-info": {
-          "$description": "The background color of an informational item. For example: information alerts.",
-          "$value": {
-            "dark": "#001129",
-            "light": "#001129",
-          },
-        },
-        "color-background-status-success": {
-          "$description": "The background color of an item in success state. For example: success alerts.",
-          "$value": {
-            "dark": "#001401",
-            "light": "#001401",
-          },
-        },
-        "color-background-status-warning": {
-          "$description": "The background color of an item in warning state. For example: warning alerts.",
-          "$value": {
-            "dark": "#191100",
-            "light": "#191100",
-          },
-        },
-        "color-background-toggle-button-normal-pressed": {
-          "$description": "The background color of normal toggle buttons in pressed state.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-toggle-checked-disabled": {
-          "$description": "The background color of checked toggles in disabled state.",
-          "$value": {
-            "dark": "#002b66",
-            "light": "#002b66",
-          },
-        },
-        "color-board-placeholder-active": {
-          "$description": "The color of board placeholder in active state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-board-placeholder-hover": {
-          "$description": "The color of board placeholder in hovered state.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-border-button-normal-active": {
-          "$description": "The border color of normal buttons in active state.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-border-button-normal-default": {
-          "$description": "The border color of normal buttons.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-button-normal-disabled": {
-          "$description": "The border color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-button-normal-hover": {
-          "$description": "The border color of normal buttons in hover state.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-border-button-primary-disabled": {
-          "$description": "The border color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
-          },
-        },
-        "color-border-container-top": {
-          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-border-control-default": {
-          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-border-divider-default": {
-          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-divider-secondary": {
-          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
-          },
-        },
-        "color-border-dropdown-item-focused": {
-          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-dropdown-item-hover": {
-          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-input-default": {
-          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-input-focused": {
-          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-border-item-focused": {
-          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-border-item-selected": {
-          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-segment-active": {
-          "$description": "The border color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-default": {
-          "$description": "The border color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-disabled": {
-          "$description": "The border color of disabled segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-hover": {
-          "$description": "The border color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-status-error": {
-          "$description": "The border color of an item in error state. For example: error alerts.",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#ff7a7a",
-          },
-        },
-        "color-border-status-info": {
-          "$description": "The border color of an informational item. For example: information alerts.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-status-success": {
-          "$description": "The border color of an item in success state. For example: success alerts.",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#2bb534",
-          },
-        },
-        "color-border-status-warning": {
-          "$description": "The border color of an item in warning state. For example: warning alerts.",
-          "$value": {
-            "dark": "#fbd332",
-            "light": "#fbd332",
-          },
-        },
-        "color-border-toggle-button-normal-pressed": {
-          "$description": "The border color of normal toggle buttons in pressed state.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-charts-blue-1-1000": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#b3e4f8",
-            "light": "#01437d",
-          },
-        },
-        "color-charts-blue-1-1100": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#caedfc",
-            "light": "#003c75",
-          },
-        },
-        "color-charts-blue-1-1200": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ddf4ff",
-            "light": "#00366d",
-          },
-        },
-        "color-charts-blue-1-300": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#00819c",
-            "light": "#529ccb",
-          },
-        },
-        "color-charts-blue-1-400": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#0497ba",
-            "light": "#3184c2",
-          },
-        },
-        "color-charts-blue-1-500": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#08aad2",
-            "light": "#0273bb",
-          },
-        },
-        "color-charts-blue-1-600": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#44b9dd",
-            "light": "#0166ab",
-          },
-        },
-        "color-charts-blue-1-700": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#63c6e7",
-            "light": "#015b9d",
-          },
-        },
-        "color-charts-blue-1-800": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#79d2f0",
-            "light": "#015292",
-          },
-        },
-        "color-charts-blue-1-900": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#98dcf5",
-            "light": "#014a87",
-          },
-        },
-        "color-charts-blue-2-1000": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#d2dcff",
-            "light": "#23379b",
-          },
-        },
-        "color-charts-blue-2-1100": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#dfe6ff",
-            "light": "#1f3191",
-          },
-        },
-        "color-charts-blue-2-1200": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ecf0ff",
-            "light": "#1b2b88",
-          },
-        },
-        "color-charts-blue-2-300": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#486de8",
-            "light": "#688ae8",
-          },
-        },
-        "color-charts-blue-2-400": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#6384f5",
-            "light": "#5978e3",
-          },
-        },
-        "color-charts-blue-2-500": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#7698fe",
-            "light": "#4066df",
-          },
-        },
-        "color-charts-blue-2-600": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#8ea9ff",
-            "light": "#3759ce",
-          },
-        },
-        "color-charts-blue-2-700": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#a2b8ff",
-            "light": "#314fbf",
-          },
-        },
-        "color-charts-blue-2-800": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#b1c5ff",
-            "light": "#2c46b1",
-          },
-        },
-        "color-charts-blue-2-900": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#c3d1ff",
-            "light": "#273ea5",
-          },
-        },
-        "color-charts-green-1000": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#c5e7a8",
-            "light": "#104d01",
-          },
-        },
-        "color-charts-green-1100": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#d5efbe",
-            "light": "#0f4601",
-          },
-        },
-        "color-charts-green-1200": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#e4f7d5",
-            "light": "#0d4000",
-          },
-        },
-        "color-charts-green-300": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#48851a",
-            "light": "#67a353",
-          },
-        },
-        "color-charts-green-400": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#5a9b29",
-            "light": "#41902c",
-          },
-        },
-        "color-charts-green-500": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#69ae34",
-            "light": "#1f8104",
-          },
-        },
-        "color-charts-green-600": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#7dbd4c",
-            "light": "#1a7302",
-          },
-        },
-        "color-charts-green-700": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#8fca61",
-            "light": "#176702",
-          },
-        },
-        "color-charts-green-800": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#9fd673",
-            "light": "#145d02",
-          },
-        },
-        "color-charts-green-900": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#b2df8d",
-            "light": "#125502",
-          },
-        },
-        "color-charts-line-axis": {
-          "$description": "Color of the axis lines in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-line-grid": {
-          "$description": "Color of the grid lines in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-line-tick": {
-          "$description": "Color of the tick marks in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-orange-1000": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd4bb",
-            "light": "#732c02",
-          },
-        },
-        "color-charts-orange-1100": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffe1cf",
-            "light": "#692801",
-          },
-        },
-        "color-charts-orange-1200": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffede2",
-            "light": "#602400",
-          },
-        },
-        "color-charts-orange-300": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#c55305",
-            "light": "#e07941",
-          },
-        },
-        "color-charts-orange-400": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#de6923",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-orange-500": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#f27c36",
-            "light": "#bc4d01",
-          },
-        },
-        "color-charts-orange-600": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#a84401",
-          },
-        },
-        "color-charts-orange-700": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#fca572",
-            "light": "#983c02",
-          },
-        },
-        "color-charts-orange-800": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb68b",
-            "light": "#8a3603",
-          },
-        },
-        "color-charts-orange-900": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc6a4",
-            "light": "#7e3103",
-          },
-        },
-        "color-charts-palette-categorical-1": {
-          "$description": "Color #1 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#486de8",
-            "light": "#688ae8",
-          },
-        },
-        "color-charts-palette-categorical-10": {
-          "$description": "Color #10 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#a84401",
-          },
-        },
-        "color-charts-palette-categorical-11": {
-          "$description": "Color #11 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c3d1ff",
-            "light": "#273ea5",
-          },
-        },
-        "color-charts-palette-categorical-12": {
-          "$description": "Color #12 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffdfe8",
-            "light": "#780d35",
-          },
-        },
-        "color-charts-palette-categorical-13": {
-          "$description": "Color #13 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#94e0d0",
-            "light": "#03524a",
-          },
-        },
-        "color-charts-palette-categorical-14": {
-          "$description": "Color #14 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#efe2ff",
-            "light": "#4a238b",
-          },
-        },
-        "color-charts-palette-categorical-15": {
-          "$description": "Color #15 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffc6a4",
-            "light": "#7e3103",
-          },
-        },
-        "color-charts-palette-categorical-16": {
-          "$description": "Color #16 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ecf0ff",
-            "light": "#1b2b88",
-          },
-        },
-        "color-charts-palette-categorical-17": {
-          "$description": "Color #17 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d56889",
-            "light": "#ce567c",
-          },
-        },
-        "color-charts-palette-categorical-18": {
-          "$description": "Color #18 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d7f7f0",
-            "light": "#003e38",
-          },
-        },
-        "color-charts-palette-categorical-19": {
-          "$description": "Color #19 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#a173ea",
-            "light": "#9469d6",
-          },
-        },
-        "color-charts-palette-categorical-2": {
-          "$description": "Color #2 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#e07f9d",
-            "light": "#c33d69",
-          },
-        },
-        "color-charts-palette-categorical-20": {
-          "$description": "Color #20 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffede2",
-            "light": "#602400",
-          },
-        },
-        "color-charts-palette-categorical-21": {
-          "$description": "Color #21 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#7698fe",
-            "light": "#4066df",
-          },
-        },
-        "color-charts-palette-categorical-22": {
-          "$description": "Color #22 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f5a2bb",
-            "light": "#a32952",
-          },
-        },
-        "color-charts-palette-categorical-23": {
-          "$description": "Color #23 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#00b09b",
-            "light": "#0d7d70",
-          },
-        },
-        "color-charts-palette-categorical-24": {
-          "$description": "Color #24 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#cbabfc",
-            "light": "#6b40b2",
-          },
-        },
-        "color-charts-palette-categorical-25": {
-          "$description": "Color #25 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f27c36",
-            "light": "#bc4d01",
-          },
-        },
-        "color-charts-palette-categorical-26": {
-          "$description": "Color #26 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#b1c5ff",
-            "light": "#2c46b1",
-          },
-        },
-        "color-charts-palette-categorical-27": {
-          "$description": "Color #27 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffd1de",
-            "light": "#81143b",
-          },
-        },
-        "color-charts-palette-categorical-28": {
-          "$description": "Color #28 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#77d7c3",
-            "light": "#045b52",
-          },
-        },
-        "color-charts-palette-categorical-29": {
-          "$description": "Color #29 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#e8d5ff",
-            "light": "#512994",
-          },
-        },
-        "color-charts-palette-categorical-3": {
-          "$description": "Color #3 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#018977",
-            "light": "#2ea597",
-          },
-        },
-        "color-charts-palette-categorical-30": {
-          "$description": "Color #30 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffb68b",
-            "light": "#8a3603",
-          },
-        },
-        "color-charts-palette-categorical-31": {
-          "$description": "Color #31 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#dfe6ff",
-            "light": "#1f3191",
-          },
-        },
-        "color-charts-palette-categorical-32": {
-          "$description": "Color #32 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c64a70",
-            "light": "#da7596",
-          },
-        },
-        "color-charts-palette-categorical-33": {
-          "$description": "Color #33 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c2f0e6",
-            "light": "#01443e",
-          },
-        },
-        "color-charts-palette-categorical-34": {
-          "$description": "Color #34 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#8d59de",
-            "light": "#a783e1",
-          },
-        },
-        "color-charts-palette-categorical-35": {
-          "$description": "Color #35 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffe1cf",
-            "light": "#692801",
-          },
-        },
-        "color-charts-palette-categorical-36": {
-          "$description": "Color #36 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#6384f5",
-            "light": "#5978e3",
-          },
-        },
-        "color-charts-palette-categorical-37": {
-          "$description": "Color #37 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#eb92ad",
-            "light": "#b1325c",
-          },
-        },
-        "color-charts-palette-categorical-38": {
-          "$description": "Color #38 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#009d89",
-            "light": "#1c8e81",
-          },
-        },
-        "color-charts-palette-categorical-39": {
-          "$description": "Color #39 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#bf9bf9",
-            "light": "#7749bf",
-          },
-        },
-        "color-charts-palette-categorical-4": {
-          "$description": "Color #4 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#b088f5",
-            "light": "#8456ce",
-          },
-        },
-        "color-charts-palette-categorical-40": {
-          "$description": "Color #40 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#de6923",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-palette-categorical-41": {
-          "$description": "Color #41 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#a2b8ff",
-            "light": "#314fbf",
-          },
-        },
-        "color-charts-palette-categorical-42": {
-          "$description": "Color #42 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffc1d4",
-            "light": "#8b1b42",
-          },
-        },
-        "color-charts-palette-categorical-43": {
-          "$description": "Color #43 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#5fccb7",
-            "light": "#06645a",
-          },
-        },
-        "color-charts-palette-categorical-44": {
-          "$description": "Color #44 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#dfc8ff",
-            "light": "#59309d",
-          },
-        },
-        "color-charts-palette-categorical-45": {
-          "$description": "Color #45 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#fca572",
-            "light": "#983c02",
-          },
-        },
-        "color-charts-palette-categorical-46": {
-          "$description": "Color #46 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d2dcff",
-            "light": "#23379b",
-          },
-        },
-        "color-charts-palette-categorical-47": {
-          "$description": "Color #47 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffecf1",
-            "light": "#6f062f",
-          },
-        },
-        "color-charts-palette-categorical-48": {
-          "$description": "Color #48 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ace9db",
-            "light": "#014b44",
-          },
-        },
-        "color-charts-palette-categorical-49": {
-          "$description": "Color #49 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f5edff",
-            "light": "#431d84",
-          },
-        },
-        "color-charts-palette-categorical-5": {
-          "$description": "Color #5 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c55305",
-            "light": "#e07941",
-          },
-        },
-        "color-charts-palette-categorical-50": {
-          "$description": "Color #50 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffd4bb",
-            "light": "#732c02",
-          },
-        },
-        "color-charts-palette-categorical-6": {
-          "$description": "Color #6 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#8ea9ff",
-            "light": "#3759ce",
-          },
-        },
-        "color-charts-palette-categorical-7": {
-          "$description": "Color #7 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffb0c8",
-            "light": "#962249",
-          },
-        },
-        "color-charts-palette-categorical-8": {
-          "$description": "Color #8 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#40bfa9",
-            "light": "#096f64",
-          },
-        },
-        "color-charts-palette-categorical-9": {
-          "$description": "Color #9 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d6baff",
-            "light": "#6237a7",
-          },
-        },
-        "color-charts-pink-1000": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd1de",
-            "light": "#81143b",
-          },
-        },
-        "color-charts-pink-1100": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffdfe8",
-            "light": "#780d35",
-          },
-        },
-        "color-charts-pink-1200": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffecf1",
-            "light": "#6f062f",
-          },
-        },
-        "color-charts-pink-300": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#c64a70",
-            "light": "#da7596",
-          },
-        },
-        "color-charts-pink-400": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#d56889",
-            "light": "#ce567c",
-          },
-        },
-        "color-charts-pink-500": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#e07f9d",
-            "light": "#c33d69",
-          },
-        },
-        "color-charts-pink-600": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#eb92ad",
-            "light": "#b1325c",
-          },
-        },
-        "color-charts-pink-700": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#f5a2bb",
-            "light": "#a32952",
-          },
-        },
-        "color-charts-pink-800": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb0c8",
-            "light": "#962249",
-          },
-        },
-        "color-charts-pink-900": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc1d4",
-            "light": "#8b1b42",
-          },
-        },
-        "color-charts-purple-1000": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#e8d5ff",
-            "light": "#512994",
-          },
-        },
-        "color-charts-purple-1100": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#efe2ff",
-            "light": "#4a238b",
-          },
-        },
-        "color-charts-purple-1200": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#f5edff",
-            "light": "#431d84",
-          },
-        },
-        "color-charts-purple-300": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#8d59de",
-            "light": "#a783e1",
-          },
-        },
-        "color-charts-purple-400": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#a173ea",
-            "light": "#9469d6",
-          },
-        },
-        "color-charts-purple-500": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#b088f5",
-            "light": "#8456ce",
-          },
-        },
-        "color-charts-purple-600": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#bf9bf9",
-            "light": "#7749bf",
-          },
-        },
-        "color-charts-purple-700": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#cbabfc",
-            "light": "#6b40b2",
-          },
-        },
-        "color-charts-purple-800": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#d6baff",
-            "light": "#6237a7",
-          },
-        },
-        "color-charts-purple-900": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#dfc8ff",
-            "light": "#59309d",
-          },
-        },
-        "color-charts-red-1000": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd2cf",
-            "light": "#7d2105",
-          },
-        },
-        "color-charts-red-1100": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffe0dd",
-            "light": "#721e03",
-          },
-        },
-        "color-charts-red-1200": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffecea",
-            "light": "#671c00",
-          },
-        },
-        "color-charts-red-300": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#ea7158",
-          },
-        },
-        "color-charts-red-400": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#ed5958",
-            "light": "#dc5032",
-          },
-        },
-        "color-charts-red-500": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#d13313",
-          },
-        },
-        "color-charts-red-600": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#ff8a8a",
-            "light": "#ba2e0f",
-          },
-        },
-        "color-charts-red-700": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#ffa09e",
-            "light": "#a82a0c",
-          },
-        },
-        "color-charts-red-800": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb3b0",
-            "light": "#972709",
-          },
-        },
-        "color-charts-red-900": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc4c0",
-            "light": "#892407",
-          },
-        },
-        "color-charts-status-critical": {
-          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#7d2105",
-          },
-        },
-        "color-charts-status-high": {
-          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#ba2e0f",
-          },
-        },
-        "color-charts-status-info": {
-          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
-          "$value": {
-            "dark": "#08aad2",
-            "light": "#3184c2",
-          },
-        },
-        "color-charts-status-low": {
-          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#dfb52c",
-            "light": "#b2911c",
-          },
-        },
-        "color-charts-status-medium": {
-          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-status-neutral": {
-          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-charts-status-positive": {
-          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
-          "$value": {
-            "dark": "#69ae34",
-            "light": "#67a353",
-          },
-        },
-        "color-charts-teal-1000": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ace9db",
-            "light": "#014b44",
-          },
-        },
-        "color-charts-teal-1100": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#c2f0e6",
-            "light": "#01443e",
-          },
-        },
-        "color-charts-teal-1200": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#d7f7f0",
-            "light": "#003e38",
-          },
-        },
-        "color-charts-teal-300": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#018977",
-            "light": "#2ea597",
-          },
-        },
-        "color-charts-teal-400": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#009d89",
-            "light": "#1c8e81",
-          },
-        },
-        "color-charts-teal-500": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#00b09b",
-            "light": "#0d7d70",
-          },
-        },
-        "color-charts-teal-600": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#40bfa9",
-            "light": "#096f64",
-          },
-        },
-        "color-charts-teal-700": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#5fccb7",
-            "light": "#06645a",
-          },
-        },
-        "color-charts-teal-800": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#77d7c3",
-            "light": "#045b52",
-          },
-        },
-        "color-charts-teal-900": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#94e0d0",
-            "light": "#03524a",
-          },
-        },
-        "color-charts-threshold-info": {
-          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
-          },
-        },
-        "color-charts-threshold-negative": {
-          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#db0000",
-          },
-        },
-        "color-charts-threshold-neutral": {
-          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#656871",
-          },
-        },
-        "color-charts-threshold-positive": {
-          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#00802f",
-          },
-        },
-        "color-charts-yellow-1000": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#f7db8a",
-            "light": "#553f03",
-          },
-        },
-        "color-charts-yellow-1100": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#fce5a8",
-            "light": "#4d3901",
-          },
-        },
-        "color-charts-yellow-1200": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffefc9",
-            "light": "#483300",
-          },
-        },
-        "color-charts-yellow-300": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#977001",
-            "light": "#b2911c",
-          },
-        },
-        "color-charts-yellow-400": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#b08400",
-            "light": "#9c7b0b",
-          },
-        },
-        "color-charts-yellow-500": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#c59600",
-            "light": "#8a6b05",
-          },
-        },
-        "color-charts-yellow-600": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#d3a61c",
-            "light": "#7b5f04",
-          },
-        },
-        "color-charts-yellow-700": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#dfb52c",
-            "light": "#6f5504",
-          },
-        },
-        "color-charts-yellow-800": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#eac33a",
-            "light": "#654d03",
-          },
-        },
-        "color-charts-yellow-900": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#f1cf65",
-            "light": "#5d4503",
-          },
-        },
-        "color-drag-placeholder-active": {
-          "$description": "The color of drag placeholder in active state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-drag-placeholder-hover": {
-          "$description": "The color of drag placeholder in hovered state.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-foreground-control-default": {
-          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-foreground-control-disabled": {
-          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-foreground-control-read-only": {
-          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-accent": {
-          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-avatar": {
-          "$description": "The text and icon color of avatars.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-body-default": {
-          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-body-secondary": {
-          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-breadcrumb-current": {
-          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-breadcrumb-icon": {
-          "$description": "The color used for the icon delimiter between breadcrumb items.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-button-normal-active": {
-          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-button-normal-default": {
-          "$description": "The default text color of normal buttons.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-button-normal-disabled": {
-          "$description": "The text color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-button-normal-hover": {
-          "$description": "The hover text color of normal buttons.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-button-primary-active": {
-          "$description": "The active text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-button-primary-default": {
-          "$description": "The default text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-button-primary-disabled": {
-          "$description": "The text color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-button-primary-hover": {
-          "$description": "The hover text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-chat-bubble-incoming": {
-          "$description": "Text color of \`incoming\` chat bubble.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-chat-bubble-outgoing": {
-          "$description": "Text color of \`outgoing\` chat bubble.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-counter": {
-          "$description": "The default color for counters. For example: counters in table headers",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-dropdown-item-default": {
-          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-dropdown-item-disabled": {
-          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-dropdown-item-filter-match": {
-          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-dropdown-item-highlighted": {
-          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-empty": {
-          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-form-default": {
-          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-form-secondary": {
-          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-group-label": {
-          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-heading-default": {
-          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-heading-secondary": {
-          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-home-header-default": {
-          "$description": "The color of the home header's text, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-home-header-secondary": {
-          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-input-disabled": {
-          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-input-placeholder": {
-          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-interactive-active": {
-          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-interactive-default": {
-          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-interactive-disabled": {
-          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-interactive-hover": {
-          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-interactive-inverted-default": {
-          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-interactive-inverted-hover": {
-          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-label": {
-          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-label-gen-ai": {
-          "$description": "The default color for labels indicating that content is produced by generative AI.",
-          "$value": {
-            "dark": "#bf80ff",
-            "light": "#bf80ff",
-          },
-        },
-        "color-text-layout-toggle": {
-          "$description": "The default color of the app layout toggle.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-layout-toggle-active": {
-          "$description": "The color of the app layout toggle button when it's active.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-text-layout-toggle-hover": {
-          "$description": "The color of the app layout toggle button on hover.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-layout-toggle-selected": {
-          "$description": "The color of the app layout toggle button when it's selected.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-link-default": {
-          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-link-hover": {
-          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-notification-default": {
-          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-critical": {
-          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#000000",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-high": {
-          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-low": {
-          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-notification-severity-medium": {
-          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-notification-severity-neutral": {
-          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-segment-active": {
-          "$description": "The text color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-segment-default": {
-          "$description": "The text color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-segment-hover": {
-          "$description": "The text color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-status-error": {
-          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#ff7a7a",
-          },
-        },
-        "color-text-status-inactive": {
-          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-status-info": {
-          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-status-success": {
-          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#2bb534",
-          },
-        },
-        "color-text-status-warning": {
-          "$description": "The color of warning icons.",
-          "$value": {
-            "dark": "#fbd332",
-            "light": "#fbd332",
-          },
-        },
-        "color-text-toggle-button-icon-pressed": {
-          "$description": "The pressed text color of icon toggle buttons.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-toggle-button-normal-pressed": {
-          "$description": "The pressed text color of normal toggle buttons.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-top-navigation-title": {
-          "$description": "The color of the title in the top navigation.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "font-family-base": {
-          "$description": "The default font family that will be applied globally to the product interface.",
-          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
-        },
-        "font-family-monospace": {
-          "$description": "The monospace font family that will be applied globally to the product interface.",
-          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
-        },
-        "font-size-body-m": {
-          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
-          "$value": "14px",
-        },
-        "font-size-body-s": {
-          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
-          "$value": "12px",
-        },
-        "font-size-display-l": {
-          "$description": "The default font size for large display text.",
-          "$value": "42px",
-        },
-        "font-size-heading-l": {
-          "$description": "The default font size for h2s.",
-          "$value": "20px",
-        },
-        "font-size-heading-m": {
-          "$description": "The default font size for h3s.",
-          "$value": "18px",
-        },
-        "font-size-heading-s": {
-          "$description": "The default font size for h4s.",
-          "$value": "16px",
-        },
-        "font-size-heading-xl": {
-          "$description": "The default font size for h1s.",
-          "$value": "24px",
-        },
-        "font-size-heading-xs": {
-          "$description": "The default font size for h5s.",
-          "$value": "14px",
-        },
-        "font-weight-button": {
-          "$description": "The default font weight for button text.",
-          "$value": "700",
-        },
-        "font-weight-heading-l": {
-          "$description": "The default font weight for h2s.",
-          "$value": "700",
-        },
-        "font-weight-heading-m": {
-          "$description": "The default font weight for h3s.",
-          "$value": "700",
-        },
-        "font-weight-heading-s": {
-          "$description": "The default font weight for h4s.",
-          "$value": "700",
-        },
-        "font-weight-heading-xl": {
-          "$description": "The default font weight for h1s.",
-          "$value": "700",
-        },
-        "font-weight-heading-xs": {
-          "$description": "The default font weight for h5s.",
-          "$value": "700",
-        },
-        "line-height-body-m": {
-          "$description": "The default line height for regular body text.",
-          "$value": "20px",
-        },
-        "line-height-body-s": {
-          "$description": "The default line height for small body text.",
-          "$value": "16px",
-        },
-        "line-height-display-l": {
-          "$description": "The default line height for large display text.",
-          "$value": "48px",
-        },
-        "line-height-heading-l": {
-          "$description": "The default line height for h2s.",
-          "$value": "24px",
-        },
-        "line-height-heading-m": {
-          "$description": "The default line height for h3s.",
-          "$value": "22px",
-        },
-        "line-height-heading-s": {
-          "$description": "The default line height for h4s.",
-          "$value": "20px",
-        },
-        "line-height-heading-xl": {
-          "$description": "The default line height for h1s.",
-          "$value": "30px",
-        },
-        "line-height-heading-xs": {
-          "$description": "The default line height for h5s.",
-          "$value": "18px",
-        },
-        "motion-duration-avatar-gen-ai-gradient": {
-          "$description": "The duration for gradient motion of gen-ai avatars.",
-          "$value": {
-            "default": "3600ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-avatar-loading-dots": {
-          "$description": "The duration for loading motion of avatars.",
-          "$value": {
-            "default": "1200ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-complex": {
-          "$description": "The duration for drawing more attention or accommodating for more complexity.",
-          "$value": {
-            "default": "250ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-expressive": {
-          "$description": "The duration for accommodating the motion with more expressiveness.",
-          "$value": {
-            "default": "165ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-responsive": {
-          "$description": "The duration for making the motion feel quick and responsive.",
-          "$value": {
-            "default": "115ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-easing-avatar-gen-ai-gradient": {
-          "$description": "The easing curve for gradient motion of gen-ai avatars.",
-          "$value": {
-            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
-            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
-          },
-        },
-        "motion-easing-expressive": {
-          "$description": "The easing curve for drawing a user's attention in an expressive way.",
-          "$value": {
-            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
-            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
-          },
-        },
-        "motion-easing-responsive": {
-          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
-          "$value": {
-            "default": "cubic-bezier(0, 0, 0, 1)",
-            "disabled": "cubic-bezier(0, 0, 0, 1)",
-          },
-        },
-        "motion-easing-sticky": {
-          "$description": "The easing curve for making an element sticky to a certain state.",
-          "$value": {
-            "default": "cubic-bezier(1, 0, 0.83, 1)",
-            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
-          },
-        },
-        "motion-keyframes-fade-in": {
-          "$description": "The CSS keyframes for showing an element.",
-          "$value": {
-            "default": "awsui-fade-in-35003c",
-            "disabled": "awsui-fade-in-35003c",
-          },
-        },
-        "motion-keyframes-fade-out": {
-          "$description": "The CSS keyframes for hiding an element.",
-          "$value": {
-            "default": "awsui-fade-out-35003c",
-            "disabled": "awsui-fade-out-35003c",
-          },
-        },
-        "motion-keyframes-scale-popup": {
-          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
-          "$value": {
-            "default": "awsui-scale-popup-35003c",
-            "disabled": "awsui-scale-popup-35003c",
-          },
-        },
-        "motion-keyframes-status-icon-error": {
-          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
-          "$value": {
-            "default": "awsui-status-icon-error-35003c",
-            "disabled": "awsui-status-icon-error-35003c",
-          },
-        },
-        "shadow-container-active": {
-          "$description": "Shadow for containers and cards in active state.",
-          "$value": {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
-            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
-          },
-        },
-        "space-container-horizontal": {
-          "$description": "The horizontal padding inside a container.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "20px",
-          },
-        },
-        "space-field-horizontal": {
-          "$description": "The horizontal padding inside field components.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "12px",
-          },
-        },
-        "space-scaled-l": {
-          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "16px",
-          },
-        },
-        "space-scaled-m": {
-          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
-          "$value": {
-            "comfortable": "16px",
-            "compact": "12px",
-          },
-        },
-        "space-scaled-s": {
-          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "8px",
-          },
-        },
-        "space-scaled-xl": {
-          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
-          "$value": {
-            "comfortable": "24px",
-            "compact": "20px",
-          },
-        },
-        "space-scaled-xs": {
-          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
-          "$value": {
-            "comfortable": "8px",
-            "compact": "4px",
-          },
-        },
-        "space-scaled-xxl": {
-          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
-          "$value": {
-            "comfortable": "32px",
-            "compact": "24px",
-          },
-        },
-        "space-scaled-xxs": {
-          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
-          "$value": {
-            "comfortable": "4px",
-            "compact": "2px",
-          },
-        },
-        "space-scaled-xxxl": {
-          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
-          "$value": {
-            "comfortable": "40px",
-            "compact": "32px",
-          },
-        },
-        "space-scaled-xxxs": {
-          "$description": "The XXXS spacing unit which scales between modes.",
-          "$value": {
-            "comfortable": "2px",
-            "compact": "0px",
-          },
-        },
-        "space-static-l": {
-          "$description": "The static L spacing unit.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "20px",
-          },
-        },
-        "space-static-m": {
-          "$description": "The static M spacing unit.",
-          "$value": {
-            "comfortable": "16px",
-            "compact": "16px",
-          },
-        },
-        "space-static-s": {
-          "$description": "The static S spacing unit.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "12px",
-          },
-        },
-        "space-static-xl": {
-          "$description": "The static XL spacing unit.",
-          "$value": {
-            "comfortable": "24px",
-            "compact": "24px",
-          },
-        },
-        "space-static-xs": {
-          "$description": "The static XS spacing unit.",
-          "$value": {
-            "comfortable": "8px",
-            "compact": "8px",
-          },
-        },
-        "space-static-xxl": {
-          "$description": "The static XXL spacing unit.",
-          "$value": {
-            "comfortable": "32px",
-            "compact": "32px",
-          },
-        },
-        "space-static-xxs": {
-          "$description": "The static XXS spacing unit.",
-          "$value": {
-            "comfortable": "4px",
-            "compact": "4px",
-          },
-        },
-        "space-static-xxxl": {
-          "$description": "The static XXXL spacing unit.",
-          "$value": {
-            "comfortable": "40px",
-            "compact": "40px",
-          },
-        },
-        "space-static-xxxs": {
-          "$description": "The static XXXS spacing unit.",
-          "$value": {
-            "comfortable": "2px",
-            "compact": "2px",
-          },
-        },
-      },
-    },
-    "app-layout-toolbar": {
-      "tokens": {
-        "border-radius-alert": {
-          "$description": "The border radius of alerts.",
-          "$value": "12px",
-        },
-        "border-radius-badge": {
-          "$description": "The border radius of badges.",
-          "$value": "4px",
-        },
-        "border-radius-button": {
-          "$description": "The border radius of buttons and segmented control's segments.",
-          "$value": "20px",
-        },
-        "border-radius-calendar-day-focus-ring": {
-          "$description": "The border radius of the focused day in date picker and date range picker.",
-          "$value": "3px",
-        },
-        "border-radius-chat-bubble": {
-          "$description": "The border radius of chat bubbles.",
-          "$value": "8px",
-        },
-        "border-radius-container": {
-          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
-          "$value": "16px",
-        },
-        "border-radius-control-circular-focus-ring": {
-          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
-          "$value": "4px",
-        },
-        "border-radius-control-default-focus-ring": {
-          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
-          "$value": "4px",
-        },
-        "border-radius-dropdown": {
-          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
-          "$value": "8px",
-        },
-        "border-radius-flashbar": {
-          "$description": "The border radius of flash messages in flashbars.",
-          "$value": "12px",
-        },
-        "border-radius-input": {
-          "$description": "The border radius of form controls. For example: input, select.",
-          "$value": "8px",
-        },
-        "border-radius-item": {
-          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
-          "$value": "8px",
-        },
-        "border-radius-popover": {
-          "$description": "The border radius of popovers.",
-          "$value": "8px",
-        },
-        "border-radius-tabs-focus-ring": {
-          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
-          "$value": "20px",
-        },
-        "border-radius-tiles": {
-          "$description": "The border radius of tiles.",
-          "$value": "8px",
-        },
-        "border-radius-token": {
-          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
-          "$value": "8px",
-        },
-        "border-radius-tutorial-panel-item": {
-          "$description": "The border radius of tutorials inside a tutorial panel.",
-          "$value": "8px",
-        },
-        "border-width-alert": {
-          "$description": "The border width of alerts.",
-          "$value": "2px",
-        },
-        "border-width-field": {
-          "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -22825,78 +20300,78 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
           "$description": "The background color of normal buttons in active state.",
           "$value": {
-            "dark": "#333843",
-            "light": "#d1f1ff",
+            "dark": "rgba(255, 255, 255, 0.15)",
+            "light": "rgba(255, 255, 255, 0.15)",
           },
         },
         "color-background-button-normal-default": {
           "$description": "The default background color of normal buttons.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
+            "dark": "transparent",
+            "light": "transparent",
           },
         },
         "color-background-button-normal-disabled": {
           "$description": "The background color of normal buttons in disabled state.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-button-normal-hover": {
           "$description": "The background color of normal buttons in hover state.",
           "$value": {
-            "dark": "#1b232d",
-            "light": "#f0fbff",
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
           },
         },
         "color-background-button-primary-active": {
           "$description": "The background color of primary buttons in active state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#002b66",
+            "light": "#42b4ff",
           },
         },
         "color-background-button-primary-default": {
           "$description": "The default background color of primary buttons.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-background-button-primary-disabled": {
           "$description": "The background color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#ebebf0",
+            "light": "#232b37",
           },
         },
         "color-background-button-primary-hover": {
           "$description": "The background color of primary buttons in hover state.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-background-cell-shaded": {
           "$description": "The background color of shaded table cells.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#f6f6f9",
+            "light": "#1b232d",
           },
         },
         "color-background-chat-bubble-incoming": {
           "$description": "The background color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#f6f6f9",
+            "light": "#0f141a",
           },
         },
         "color-background-chat-bubble-outgoing": {
@@ -22910,56 +20385,56 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-container-header": {
           "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-control-checked": {
           "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-control-default": {
           "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-control-disabled": {
           "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
           "$value": {
             "dark": "#333843",
-            "light": "#dedee3",
+            "light": "#333843",
           },
         },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ffffff",
+            "light": "#1b232d",
           },
         },
         "color-background-dropdown-item-filter-match": {
           "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#333843",
-            "light": "#f0fbff",
+            "light": "#333843",
           },
         },
         "color-background-dropdown-item-hover": {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": {
             "dark": "#131920",
-            "light": "#f3f3f7",
+            "light": "#131920",
           },
         },
         "color-background-home-header": {
@@ -22973,28 +20448,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-input-disabled": {
           "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ebebf0",
+            "light": "#1b232d",
           },
         },
         "color-background-item-selected": {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": {
             "dark": "#001129",
-            "light": "#f0fbff",
+            "light": "#001129",
           },
         },
         "color-background-layout-main": {
           "$description": "The background color of the main content area on a page. For example: content area in app layout.",
           "$value": {
-            "dark": "#131920",
-            "light": "#fcfcfd",
+            "dark": "#161d26",
+            "light": "#161d26",
           },
         },
         "color-background-layout-toggle-active": {
@@ -23022,28 +20497,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the app layout toggle button when it's selected and active.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-layout-toggle-selected-default": {
           "$description": "The default background color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-layout-toggle-selected-hover": {
           "$description": "The background color of the app layout toggle button on hover when it's selected.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#004a9e",
+            "light": "#75cfff",
           },
         },
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -23064,7 +20539,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for grey notifications. For example: grey badges.",
           "$value": {
             "dark": "#656871",
-            "light": "#424650",
+            "light": "#656871",
           },
         },
         "color-background-notification-red": {
@@ -23120,126 +20595,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for the popover container.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ffffff",
+            "light": "#1b232d",
           },
         },
         "color-background-segment-active": {
           "$description": "The background color of the active segment in a segmented control.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-segment-default": {
           "$description": "The background color of inactive segments in a segmented control.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
+            "dark": "transparent",
+            "light": "transparent",
           },
         },
         "color-background-segment-disabled": {
           "$description": "The background color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-segment-hover": {
           "$description": "The background color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#1b232d",
-            "light": "#f0fbff",
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
           },
         },
         "color-background-status-error": {
           "$description": "The background color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#1f0000",
-            "light": "#fff5f5",
+            "light": "#1f0000",
           },
         },
         "color-background-status-info": {
           "$description": "The background color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#001129",
-            "light": "#f0fbff",
+            "light": "#001129",
           },
         },
         "color-background-status-success": {
           "$description": "The background color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#001401",
-            "light": "#effff1",
+            "light": "#001401",
           },
         },
         "color-background-status-warning": {
           "$description": "The background color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#191100",
-            "light": "#fffef0",
+            "light": "#191100",
           },
         },
         "color-background-toggle-button-normal-pressed": {
           "$description": "The background color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#333843",
-            "light": "#d1f1ff",
+            "light": "#333843",
           },
         },
         "color-background-toggle-checked-disabled": {
           "$description": "The background color of checked toggles in disabled state.",
           "$value": {
             "dark": "#002b66",
-            "light": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-board-placeholder-active": {
           "$description": "The color of board placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#ebebf0",
+            "light": "#656871",
           },
         },
         "color-board-placeholder-hover": {
           "$description": "The color of board placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#d1f1ff",
+            "light": "#006ce0",
           },
         },
         "color-border-button-normal-active": {
           "$description": "The border color of normal buttons in active state.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-border-button-normal-default": {
           "$description": "The border color of normal buttons.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-border-button-normal-disabled": {
           "$description": "The border color of normal buttons in disabled state.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-border-button-normal-hover": {
           "$description": "The border color of normal buttons in hover state.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-border-button-primary-disabled": {
           "$description": "The border color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#ebebf0",
+            "light": "#232b37",
           },
         },
         "color-border-container-top": {
@@ -23259,120 +20734,120 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
-            "dark": "#424650",
-            "light": "#c6c6cd",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-border-divider-secondary": {
           "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
           "$value": {
             "dark": "#232b37",
-            "light": "#ebebf0",
+            "light": "#232b37",
           },
         },
         "color-border-dropdown-item-focused": {
           "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-dropdown-item-hover": {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-border-input-default": {
           "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
           },
         },
         "color-border-item-selected": {
           "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-border-segment-active": {
           "$description": "The border color of the active segment in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-default": {
           "$description": "The border color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-disabled": {
           "$description": "The border color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-hover": {
           "$description": "The border color of inactive segments in a segmented control on hover.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-status-error": {
           "$description": "The border color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#ff7a7a",
           },
         },
         "color-border-status-info": {
           "$description": "The border color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-border-status-success": {
           "$description": "The border color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#00802f",
+            "light": "#2bb534",
           },
         },
         "color-border-status-warning": {
           "$description": "The border color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#855900",
+            "light": "#fbd332",
           },
         },
         "color-border-toggle-button-normal-pressed": {
           "$description": "The border color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-charts-blue-1-1000": {
@@ -24457,42 +21932,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of drag placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#ebebf0",
+            "light": "#656871",
           },
         },
         "color-drag-placeholder-hover": {
           "$description": "The color of drag placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#d1f1ff",
+            "light": "#006ce0",
           },
         },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-foreground-control-disabled": {
           "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-foreground-control-read-only": {
           "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-accent": {
           "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-avatar": {
@@ -24506,42 +21981,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-body-secondary": {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-text-breadcrumb-current": {
           "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
           "$value": {
             "dark": "#8c8c94",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-text-breadcrumb-icon": {
           "$description": "The color used for the icon delimiter between breadcrumb items.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-button-normal-default": {
           "$description": "The default text color of normal buttons.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-text-button-normal-disabled": {
@@ -24554,22 +22029,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-hover": {
           "$description": "The hover text color of normal buttons.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-active": {
           "$description": "The active text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-button-primary-default": {
           "$description": "The default text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-button-primary-disabled": {
@@ -24583,98 +22058,98 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The hover text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-chat-bubble-incoming": {
           "$description": "Text color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-chat-bubble-outgoing": {
           "$description": "Text color of \`outgoing\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-counter": {
           "$description": "The default color for counters. For example: counters in table headers",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-dropdown-item-default": {
           "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-dropdown-item-disabled": {
           "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-dropdown-item-filter-match": {
           "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#006ce0",
+            "light": "#75cfff",
           },
         },
         "color-text-dropdown-item-highlighted": {
           "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#0f141a",
+            "light": "#ebebf0",
           },
         },
         "color-text-empty": {
           "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#656871",
+            "light": "#dedee3",
           },
         },
         "color-text-form-default": {
           "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-form-secondary": {
           "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-group-label": {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-text-heading-default": {
           "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#0f141a",
+            "light": "#ebebf0",
           },
         },
         "color-text-heading-secondary": {
           "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#424650",
+            "light": "#a4a4ad",
           },
         },
         "color-text-home-header-default": {
@@ -24695,42 +22170,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-input-placeholder": {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-interactive-active": {
           "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-interactive-default": {
           "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-text-interactive-disabled": {
           "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-interactive-hover": {
           "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-interactive-inverted-default": {
@@ -24751,14 +22226,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-label-gen-ai": {
           "$description": "The default color for labels indicating that content is produced by generative AI.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#bf80ff",
           },
         },
         "color-text-layout-toggle": {
@@ -24772,35 +22247,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the app layout toggle button when it's active.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-text-layout-toggle-hover": {
           "$description": "The color of the app layout toggle button on hover.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-layout-toggle-selected": {
           "$description": "The color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-link-default": {
           "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-link-hover": {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#002b66",
+            "light": "#75cfff",
           },
         },
         "color-text-notification-default": {
@@ -24849,77 +22324,77 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The text color of the active segment in a segmented control.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-segment-default": {
           "$description": "The text color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-text-segment-hover": {
           "$description": "The text color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-status-error": {
           "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#ff7a7a",
           },
         },
         "color-text-status-inactive": {
           "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-status-info": {
           "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-status-success": {
           "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#00802f",
+            "light": "#2bb534",
           },
         },
         "color-text-status-warning": {
           "$description": "The color of warning icons.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#855900",
+            "light": "#fbd332",
           },
         },
         "color-text-toggle-button-icon-pressed": {
           "$description": "The pressed text color of icon toggle buttons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-toggle-button-normal-pressed": {
           "$description": "The pressed text color of normal toggle buttons.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#002b66",
+            "light": "#75cfff",
           },
         },
         "color-text-top-navigation-title": {
           "$description": "The color of the title in the top navigation.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "font-family-base": {
@@ -25334,7 +22809,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -25350,8 +22825,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -25567,8 +23042,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -25819,8 +23294,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -27859,7 +25334,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -27875,8 +25350,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -28092,8 +25567,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -28344,8 +25819,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -30384,7 +27859,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -30400,8 +27875,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -30617,8 +28092,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -30869,8 +28344,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -32909,7 +30384,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -32925,8 +30400,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -33142,8 +30617,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -33394,8 +30869,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
@@ -35434,7 +32909,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -35450,8 +32925,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -35667,8 +33142,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -35919,8 +33394,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
@@ -37959,7 +35434,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "1px",
+      "$value": "2px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
@@ -37975,8 +35450,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-avatar-gen-ai": {
       "$description": "The gen-ai background color of avatars.",
       "$value": {
-        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
       },
     },
     "color-background-button-normal-active": {
@@ -38192,8 +35667,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-loading-bar-gen-ai": {
       "$description": "The background color of gen-ai loading bars.",
       "$value": {
-        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
       },
     },
     "color-background-notification-blue": {
@@ -38444,8 +35919,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-border-input-focused": {
       "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
       "$value": {
-        "dark": "#75cfff",
-        "light": "#006ce0",
+        "dark": "#b8e7ff",
+        "light": "#002b66",
       },
     },
     "color-border-item-focused": {
diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
index 7da80a7f80..b18eb4d5cc 100644
--- a/src/select/parts/styles.scss
+++ b/src/select/parts/styles.scss
@@ -132,7 +132,7 @@ $inlineLabel-border-radius: 2px;
 }
 
 .inline-label {
-  background: awsui.$color-background-layout-main;
+  background: linear-gradient(to bottom, awsui.$color-background-layout-main, awsui.$color-background-input-default);
   border-start-start-radius: $inlineLabel-border-radius;
   border-start-end-radius: $inlineLabel-border-radius;
   border-end-start-radius: $inlineLabel-border-radius;
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index f7ae88da3c..598a703754 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -140,7 +140,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderEditableCellHover: '{colorBorderDropdownItemHover}',
   colorBorderInputDefault: { light: '{colorGrey500}', dark: '{colorGrey550}' },
   colorBorderInputDisabled: '{colorBackgroundInputDisabled}',
-  colorBorderInputFocused: { light: '{colorBlue600}', dark: '{colorBlue400}' },
+  colorBorderInputFocused: { light: '{colorBlue600}', dark: '{colorBlue500}' },
   colorBorderItemFocused: { light: '{colorBlue600}', dark: '{colorBlue500}' },
   colorBorderDropdownItemFocused: { light: '{colorGrey600}', dark: '{colorGrey300}' },
   colorBorderItemPlaceholder: '{colorBorderItemSelected}',

From 988d047c853a9a0b5cd9ba8b65d465fd0419b07e Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 2 Apr 2025 17:38:26 +0200
Subject: [PATCH 08/35] update snapshots

---
 .../__snapshots__/themes.test.ts.snap         |   76 +-
 .../__snapshots__/design-tokens.test.ts.snap  | 2953 +++++++++++++++--
 2 files changed, 2785 insertions(+), 244 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 6a4497519b..02307a666e 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -41,10 +41,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -94,7 +96,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -706,10 +708,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#ff5d64",
   "color-background-button-link-active": "#16191f",
   "color-background-button-link-hover": "#21252c",
@@ -759,7 +763,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-layout-toggle-selected-active": "#00a1c9",
   "color-background-layout-toggle-selected-default": "#44b9d6",
   "color-background-layout-toggle-selected-hover": "#44b9d6",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(22, 25, 31, 0.8)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -1371,10 +1375,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -1424,7 +1430,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -2036,10 +2042,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -2089,7 +2097,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -2666,7 +2674,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -2701,10 +2709,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#db0000",
   "color-background-button-link-active": "#d1f1ff",
   "color-background-button-link-hover": "#f0fbff",
@@ -2754,7 +2764,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-layout-toggle-selected-active": "#006ce0",
   "color-background-layout-toggle-selected-default": "#006ce0",
   "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -2828,11 +2838,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#002b66",
+  "color-border-input-focused": "#006ce0",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#b4b4bb",
+  "color-border-layout": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -3331,7 +3341,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -3366,10 +3376,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#db0000",
   "color-background-button-link-active": "#d1f1ff",
   "color-background-button-link-hover": "#f0fbff",
@@ -3419,7 +3431,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#006ce0",
   "color-background-layout-toggle-selected-default": "#006ce0",
   "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -3493,11 +3505,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#002b66",
+  "color-border-input-focused": "#006ce0",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#b4b4bb",
+  "color-border-layout": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -3996,7 +4008,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4031,10 +4043,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#ff7a7a",
   "color-background-button-link-active": "#333843",
   "color-background-button-link-hover": "#1b232d",
@@ -4084,7 +4098,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#42b4ff",
   "color-background-layout-toggle-selected-default": "#42b4ff",
   "color-background-layout-toggle-selected-hover": "#75cfff",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -4158,7 +4172,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#b8e7ff",
+  "color-border-input-focused": "#42b4ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
@@ -4661,7 +4675,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4696,10 +4710,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#ff7a7a",
   "color-background-button-link-active": "#333843",
   "color-background-button-link-hover": "#1b232d",
@@ -4749,7 +4765,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#42b4ff",
   "color-background-layout-toggle-selected-default": "#42b4ff",
   "color-background-layout-toggle-selected-hover": "#75cfff",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -4823,7 +4839,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#b8e7ff",
+  "color-border-input-focused": "#42b4ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 4cf000c1fa..290d84182a 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -95,8 +95,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -312,8 +312,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -2620,8 +2620,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -2837,8 +2837,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -5145,8 +5145,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -5362,8 +5362,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -7670,8 +7670,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -7887,8 +7887,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -10195,8 +10195,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -10412,8 +10412,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -12720,8 +12720,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -12937,8 +12937,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -15245,8 +15245,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-avatar-gen-ai": {
       "$description": "The gen-ai background color of avatars.",
       "$value": {
-        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
       },
     },
     "color-background-button-normal-active": {
@@ -15462,8 +15462,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-loading-bar-gen-ai": {
       "$description": "The background color of gen-ai loading bars.",
       "$value": {
-        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
       },
     },
     "color-background-notification-blue": {
@@ -17759,7 +17759,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -17775,8 +17775,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -17992,8 +17992,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -18244,8 +18244,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -20284,7 +20284,2532 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
+        },
+        "border-width-popover": {
+          "$description": "The border width of popovers.",
+          "$value": "2px",
+        },
+        "color-background-avatar-default": {
+          "$description": "The default background color of avatars.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-avatar-gen-ai": {
+          "$description": "The gen-ai background color of avatars.",
+          "$value": {
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+          },
+        },
+        "color-background-button-normal-active": {
+          "$description": "The background color of normal buttons in active state.",
+          "$value": {
+            "dark": "rgba(255, 255, 255, 0.15)",
+            "light": "rgba(255, 255, 255, 0.15)",
+          },
+        },
+        "color-background-button-normal-default": {
+          "$description": "The default background color of normal buttons.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-button-normal-disabled": {
+          "$description": "The background color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-button-normal-hover": {
+          "$description": "The background color of normal buttons in hover state.",
+          "$value": {
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "color-background-button-primary-active": {
+          "$description": "The background color of primary buttons in active state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-button-primary-default": {
+          "$description": "The default background color of primary buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-background-button-primary-disabled": {
+          "$description": "The background color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-background-button-primary-hover": {
+          "$description": "The background color of primary buttons in hover state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-cell-shaded": {
+          "$description": "The background color of shaded table cells.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-chat-bubble-incoming": {
+          "$description": "The background color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-chat-bubble-outgoing": {
+          "$description": "The background color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-container-content": {
+          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-container-header": {
+          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-checked": {
+          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-control-default": {
+          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-disabled": {
+          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-default": {
+          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-dropdown-item-filter-match": {
+          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-hover": {
+          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
+          "$value": {
+            "dark": "#131920",
+            "light": "#131920",
+          },
+        },
+        "color-background-home-header": {
+          "$description": "The background color of the home header, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-input-default": {
+          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-input-disabled": {
+          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-item-selected": {
+          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-layout-main": {
+          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-layout-toggle-active": {
+          "$description": "The background color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-default": {
+          "$description": "The default background color of the app layout toggle button.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-hover": {
+          "$description": "The background color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-layout-toggle-selected-active": {
+          "$description": "The background color of the app layout toggle button when it's selected and active.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-default": {
+          "$description": "The default background color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-hover": {
+          "$description": "The background color of the app layout toggle button on hover when it's selected.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-background-loading-bar-gen-ai": {
+          "$description": "The background color of gen-ai loading bars.",
+          "$value": {
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+          },
+        },
+        "color-background-notification-blue": {
+          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-notification-green": {
+          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
+          "$value": {
+            "dark": "#00802f",
+            "light": "#00802f",
+          },
+        },
+        "color-background-notification-grey": {
+          "$description": "Background color for grey notifications. For example: grey badges.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-red": {
+          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
+          "$value": {
+            "dark": "#db0000",
+            "light": "#db0000",
+          },
+        },
+        "color-background-notification-severity-critical": {
+          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#870303",
+          },
+        },
+        "color-background-notification-severity-high": {
+          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ce3311",
+          },
+        },
+        "color-background-notification-severity-low": {
+          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#f2cd54",
+            "light": "#f2cd54",
+          },
+        },
+        "color-background-notification-severity-medium": {
+          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#f89256",
+          },
+        },
+        "color-background-notification-severity-neutral": {
+          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-yellow": {
+          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
+        "color-background-popover": {
+          "$description": "Background color for the popover container.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-segment-active": {
+          "$description": "The background color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-segment-default": {
+          "$description": "The background color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-segment-disabled": {
+          "$description": "The background color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-segment-hover": {
+          "$description": "The background color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "color-background-status-error": {
+          "$description": "The background color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#1f0000",
+            "light": "#1f0000",
+          },
+        },
+        "color-background-status-info": {
+          "$description": "The background color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-status-success": {
+          "$description": "The background color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#001401",
+            "light": "#001401",
+          },
+        },
+        "color-background-status-warning": {
+          "$description": "The background color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#191100",
+            "light": "#191100",
+          },
+        },
+        "color-background-toggle-button-normal-pressed": {
+          "$description": "The background color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-toggle-checked-disabled": {
+          "$description": "The background color of checked toggles in disabled state.",
+          "$value": {
+            "dark": "#002b66",
+            "light": "#002b66",
+          },
+        },
+        "color-board-placeholder-active": {
+          "$description": "The color of board placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-board-placeholder-hover": {
+          "$description": "The color of board placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-border-button-normal-active": {
+          "$description": "The border color of normal buttons in active state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-normal-default": {
+          "$description": "The border color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-button-normal-disabled": {
+          "$description": "The border color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-button-normal-hover": {
+          "$description": "The border color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-primary-disabled": {
+          "$description": "The border color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-container-top": {
+          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-border-control-default": {
+          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-border-divider-default": {
+          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-divider-secondary": {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-dropdown-item-focused": {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-dropdown-item-hover": {
+          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-default": {
+          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-focused": {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-item-focused": {
+          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-border-item-selected": {
+          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-segment-active": {
+          "$description": "The border color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-default": {
+          "$description": "The border color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-disabled": {
+          "$description": "The border color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-hover": {
+          "$description": "The border color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-status-error": {
+          "$description": "The border color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-border-status-info": {
+          "$description": "The border color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-status-success": {
+          "$description": "The border color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-border-status-warning": {
+          "$description": "The border color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-border-toggle-button-normal-pressed": {
+          "$description": "The border color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-charts-blue-1-1000": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#b3e4f8",
+            "light": "#01437d",
+          },
+        },
+        "color-charts-blue-1-1100": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#caedfc",
+            "light": "#003c75",
+          },
+        },
+        "color-charts-blue-1-1200": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ddf4ff",
+            "light": "#00366d",
+          },
+        },
+        "color-charts-blue-1-300": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#00819c",
+            "light": "#529ccb",
+          },
+        },
+        "color-charts-blue-1-400": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#0497ba",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-blue-1-500": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#0273bb",
+          },
+        },
+        "color-charts-blue-1-600": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#44b9dd",
+            "light": "#0166ab",
+          },
+        },
+        "color-charts-blue-1-700": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#63c6e7",
+            "light": "#015b9d",
+          },
+        },
+        "color-charts-blue-1-800": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#79d2f0",
+            "light": "#015292",
+          },
+        },
+        "color-charts-blue-1-900": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#98dcf5",
+            "light": "#014a87",
+          },
+        },
+        "color-charts-blue-2-1000": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-blue-2-1100": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-blue-2-1200": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-blue-2-300": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-blue-2-400": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-blue-2-500": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-blue-2-600": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-blue-2-700": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-blue-2-800": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-blue-2-900": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-green-1000": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#c5e7a8",
+            "light": "#104d01",
+          },
+        },
+        "color-charts-green-1100": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#d5efbe",
+            "light": "#0f4601",
+          },
+        },
+        "color-charts-green-1200": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#e4f7d5",
+            "light": "#0d4000",
+          },
+        },
+        "color-charts-green-300": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#48851a",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-green-400": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#5a9b29",
+            "light": "#41902c",
+          },
+        },
+        "color-charts-green-500": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#1f8104",
+          },
+        },
+        "color-charts-green-600": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#7dbd4c",
+            "light": "#1a7302",
+          },
+        },
+        "color-charts-green-700": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#8fca61",
+            "light": "#176702",
+          },
+        },
+        "color-charts-green-800": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#9fd673",
+            "light": "#145d02",
+          },
+        },
+        "color-charts-green-900": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#b2df8d",
+            "light": "#125502",
+          },
+        },
+        "color-charts-line-axis": {
+          "$description": "Color of the axis lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-grid": {
+          "$description": "Color of the grid lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-tick": {
+          "$description": "Color of the tick marks in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-orange-1000": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-orange-1100": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-orange-1200": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-orange-300": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-orange-400": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-orange-500": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-orange-600": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-orange-700": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-orange-800": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-orange-900": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-1": {
+          "$description": "Color #1 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-palette-categorical-10": {
+          "$description": "Color #10 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-palette-categorical-11": {
+          "$description": "Color #11 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-palette-categorical-12": {
+          "$description": "Color #12 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-palette-categorical-13": {
+          "$description": "Color #13 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-palette-categorical-14": {
+          "$description": "Color #14 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-palette-categorical-15": {
+          "$description": "Color #15 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-16": {
+          "$description": "Color #16 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-palette-categorical-17": {
+          "$description": "Color #17 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-palette-categorical-18": {
+          "$description": "Color #18 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-palette-categorical-19": {
+          "$description": "Color #19 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-palette-categorical-2": {
+          "$description": "Color #2 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-palette-categorical-20": {
+          "$description": "Color #20 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-palette-categorical-21": {
+          "$description": "Color #21 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-palette-categorical-22": {
+          "$description": "Color #22 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-palette-categorical-23": {
+          "$description": "Color #23 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-palette-categorical-24": {
+          "$description": "Color #24 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-palette-categorical-25": {
+          "$description": "Color #25 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-palette-categorical-26": {
+          "$description": "Color #26 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-palette-categorical-27": {
+          "$description": "Color #27 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-palette-categorical-28": {
+          "$description": "Color #28 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-palette-categorical-29": {
+          "$description": "Color #29 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-palette-categorical-3": {
+          "$description": "Color #3 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-palette-categorical-30": {
+          "$description": "Color #30 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-palette-categorical-31": {
+          "$description": "Color #31 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-palette-categorical-32": {
+          "$description": "Color #32 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-palette-categorical-33": {
+          "$description": "Color #33 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-palette-categorical-34": {
+          "$description": "Color #34 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-palette-categorical-35": {
+          "$description": "Color #35 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-palette-categorical-36": {
+          "$description": "Color #36 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-palette-categorical-37": {
+          "$description": "Color #37 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-palette-categorical-38": {
+          "$description": "Color #38 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-palette-categorical-39": {
+          "$description": "Color #39 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-palette-categorical-4": {
+          "$description": "Color #4 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-palette-categorical-40": {
+          "$description": "Color #40 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-palette-categorical-41": {
+          "$description": "Color #41 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-palette-categorical-42": {
+          "$description": "Color #42 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-palette-categorical-43": {
+          "$description": "Color #43 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-palette-categorical-44": {
+          "$description": "Color #44 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-palette-categorical-45": {
+          "$description": "Color #45 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-palette-categorical-46": {
+          "$description": "Color #46 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-palette-categorical-47": {
+          "$description": "Color #47 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-palette-categorical-48": {
+          "$description": "Color #48 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-palette-categorical-49": {
+          "$description": "Color #49 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-palette-categorical-5": {
+          "$description": "Color #5 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-palette-categorical-50": {
+          "$description": "Color #50 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-palette-categorical-6": {
+          "$description": "Color #6 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-palette-categorical-7": {
+          "$description": "Color #7 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-palette-categorical-8": {
+          "$description": "Color #8 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-palette-categorical-9": {
+          "$description": "Color #9 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-pink-1000": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-pink-1100": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-pink-1200": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-pink-300": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-pink-400": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-pink-500": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-pink-600": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-pink-700": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-pink-800": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-pink-900": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-purple-1000": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-purple-1100": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-purple-1200": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-purple-300": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-purple-400": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-purple-500": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-purple-600": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-purple-700": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-purple-800": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-purple-900": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-red-1000": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd2cf",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-red-1100": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe0dd",
+            "light": "#721e03",
+          },
+        },
+        "color-charts-red-1200": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecea",
+            "light": "#671c00",
+          },
+        },
+        "color-charts-red-300": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#ea7158",
+          },
+        },
+        "color-charts-red-400": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#ed5958",
+            "light": "#dc5032",
+          },
+        },
+        "color-charts-red-500": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#d13313",
+          },
+        },
+        "color-charts-red-600": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#ff8a8a",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-red-700": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#ffa09e",
+            "light": "#a82a0c",
+          },
+        },
+        "color-charts-red-800": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb3b0",
+            "light": "#972709",
+          },
+        },
+        "color-charts-red-900": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc4c0",
+            "light": "#892407",
+          },
+        },
+        "color-charts-status-critical": {
+          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-status-high": {
+          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-status-info": {
+          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-status-low": {
+          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-status-medium": {
+          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-status-neutral": {
+          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-charts-status-positive": {
+          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-teal-1000": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-teal-1100": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-teal-1200": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-teal-300": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-teal-400": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-teal-500": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-teal-600": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-teal-700": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-teal-800": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-teal-900": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-threshold-info": {
+          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#006ce0",
+          },
+        },
+        "color-charts-threshold-negative": {
+          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-charts-threshold-neutral": {
+          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#656871",
+          },
+        },
+        "color-charts-threshold-positive": {
+          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#00802f",
+          },
+        },
+        "color-charts-yellow-1000": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#f7db8a",
+            "light": "#553f03",
+          },
+        },
+        "color-charts-yellow-1100": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#fce5a8",
+            "light": "#4d3901",
+          },
+        },
+        "color-charts-yellow-1200": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffefc9",
+            "light": "#483300",
+          },
+        },
+        "color-charts-yellow-300": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#977001",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-yellow-400": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#b08400",
+            "light": "#9c7b0b",
+          },
+        },
+        "color-charts-yellow-500": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#c59600",
+            "light": "#8a6b05",
+          },
+        },
+        "color-charts-yellow-600": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#d3a61c",
+            "light": "#7b5f04",
+          },
+        },
+        "color-charts-yellow-700": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#6f5504",
+          },
+        },
+        "color-charts-yellow-800": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#eac33a",
+            "light": "#654d03",
+          },
+        },
+        "color-charts-yellow-900": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#f1cf65",
+            "light": "#5d4503",
+          },
+        },
+        "color-drag-placeholder-active": {
+          "$description": "The color of drag placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-drag-placeholder-hover": {
+          "$description": "The color of drag placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-foreground-control-default": {
+          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-foreground-control-disabled": {
+          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-foreground-control-read-only": {
+          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-accent": {
+          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-avatar": {
+          "$description": "The text and icon color of avatars.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-body-default": {
+          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-body-secondary": {
+          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-breadcrumb-current": {
+          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-breadcrumb-icon": {
+          "$description": "The color used for the icon delimiter between breadcrumb items.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-button-normal-active": {
+          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-normal-default": {
+          "$description": "The default text color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-button-normal-disabled": {
+          "$description": "The text color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-normal-hover": {
+          "$description": "The hover text color of normal buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-primary-active": {
+          "$description": "The active text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-default": {
+          "$description": "The default text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-disabled": {
+          "$description": "The text color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-primary-hover": {
+          "$description": "The hover text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-chat-bubble-incoming": {
+          "$description": "Text color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-chat-bubble-outgoing": {
+          "$description": "Text color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-counter": {
+          "$description": "The default color for counters. For example: counters in table headers",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-dropdown-item-default": {
+          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-dropdown-item-disabled": {
+          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-dropdown-item-filter-match": {
+          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-dropdown-item-highlighted": {
+          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-empty": {
+          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-default": {
+          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-secondary": {
+          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-group-label": {
+          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-heading-default": {
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-heading-secondary": {
+          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-home-header-default": {
+          "$description": "The color of the home header's text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-home-header-secondary": {
+          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-input-disabled": {
+          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-input-placeholder": {
+          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-interactive-active": {
+          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-default": {
+          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-disabled": {
+          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-interactive-hover": {
+          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-inverted-default": {
+          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-inverted-hover": {
+          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-label": {
+          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-label-gen-ai": {
+          "$description": "The default color for labels indicating that content is produced by generative AI.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-layout-toggle": {
+          "$description": "The default color of the app layout toggle.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-layout-toggle-active": {
+          "$description": "The color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-text-layout-toggle-hover": {
+          "$description": "The color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-layout-toggle-selected": {
+          "$description": "The color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-link-default": {
+          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-link-hover": {
+          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-notification-default": {
+          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-critical": {
+          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#000000",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-high": {
+          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-low": {
+          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-medium": {
+          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-neutral": {
+          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-segment-active": {
+          "$description": "The text color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-segment-default": {
+          "$description": "The text color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-segment-hover": {
+          "$description": "The text color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-status-error": {
+          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-text-status-inactive": {
+          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-status-info": {
+          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-status-success": {
+          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-text-status-warning": {
+          "$description": "The color of warning icons.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-text-toggle-button-icon-pressed": {
+          "$description": "The pressed text color of icon toggle buttons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-toggle-button-normal-pressed": {
+          "$description": "The pressed text color of normal toggle buttons.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-top-navigation-title": {
+          "$description": "The color of the title in the top navigation.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "font-family-base": {
+          "$description": "The default font family that will be applied globally to the product interface.",
+          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+        },
+        "font-family-monospace": {
+          "$description": "The monospace font family that will be applied globally to the product interface.",
+          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
+        },
+        "font-size-body-m": {
+          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
+          "$value": "14px",
+        },
+        "font-size-body-s": {
+          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
+          "$value": "12px",
+        },
+        "font-size-display-l": {
+          "$description": "The default font size for large display text.",
+          "$value": "42px",
+        },
+        "font-size-heading-l": {
+          "$description": "The default font size for h2s.",
+          "$value": "20px",
+        },
+        "font-size-heading-m": {
+          "$description": "The default font size for h3s.",
+          "$value": "18px",
+        },
+        "font-size-heading-s": {
+          "$description": "The default font size for h4s.",
+          "$value": "16px",
+        },
+        "font-size-heading-xl": {
+          "$description": "The default font size for h1s.",
+          "$value": "24px",
+        },
+        "font-size-heading-xs": {
+          "$description": "The default font size for h5s.",
+          "$value": "14px",
+        },
+        "font-weight-button": {
+          "$description": "The default font weight for button text.",
+          "$value": "700",
+        },
+        "font-weight-heading-l": {
+          "$description": "The default font weight for h2s.",
+          "$value": "700",
+        },
+        "font-weight-heading-m": {
+          "$description": "The default font weight for h3s.",
+          "$value": "700",
+        },
+        "font-weight-heading-s": {
+          "$description": "The default font weight for h4s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xl": {
+          "$description": "The default font weight for h1s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xs": {
+          "$description": "The default font weight for h5s.",
+          "$value": "700",
+        },
+        "line-height-body-m": {
+          "$description": "The default line height for regular body text.",
+          "$value": "20px",
+        },
+        "line-height-body-s": {
+          "$description": "The default line height for small body text.",
+          "$value": "16px",
+        },
+        "line-height-display-l": {
+          "$description": "The default line height for large display text.",
+          "$value": "48px",
+        },
+        "line-height-heading-l": {
+          "$description": "The default line height for h2s.",
+          "$value": "24px",
+        },
+        "line-height-heading-m": {
+          "$description": "The default line height for h3s.",
+          "$value": "22px",
+        },
+        "line-height-heading-s": {
+          "$description": "The default line height for h4s.",
+          "$value": "20px",
+        },
+        "line-height-heading-xl": {
+          "$description": "The default line height for h1s.",
+          "$value": "30px",
+        },
+        "line-height-heading-xs": {
+          "$description": "The default line height for h5s.",
+          "$value": "18px",
+        },
+        "motion-duration-avatar-gen-ai-gradient": {
+          "$description": "The duration for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "3600ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-avatar-loading-dots": {
+          "$description": "The duration for loading motion of avatars.",
+          "$value": {
+            "default": "1200ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-complex": {
+          "$description": "The duration for drawing more attention or accommodating for more complexity.",
+          "$value": {
+            "default": "250ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-expressive": {
+          "$description": "The duration for accommodating the motion with more expressiveness.",
+          "$value": {
+            "default": "165ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-responsive": {
+          "$description": "The duration for making the motion feel quick and responsive.",
+          "$value": {
+            "default": "115ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-easing-avatar-gen-ai-gradient": {
+          "$description": "The easing curve for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
+            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
+          },
+        },
+        "motion-easing-expressive": {
+          "$description": "The easing curve for drawing a user's attention in an expressive way.",
+          "$value": {
+            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
+            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
+          },
+        },
+        "motion-easing-responsive": {
+          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
+          "$value": {
+            "default": "cubic-bezier(0, 0, 0, 1)",
+            "disabled": "cubic-bezier(0, 0, 0, 1)",
+          },
+        },
+        "motion-easing-sticky": {
+          "$description": "The easing curve for making an element sticky to a certain state.",
+          "$value": {
+            "default": "cubic-bezier(1, 0, 0.83, 1)",
+            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
+          },
+        },
+        "motion-keyframes-fade-in": {
+          "$description": "The CSS keyframes for showing an element.",
+          "$value": {
+            "default": "awsui-fade-in-35003c",
+            "disabled": "awsui-fade-in-35003c",
+          },
+        },
+        "motion-keyframes-fade-out": {
+          "$description": "The CSS keyframes for hiding an element.",
+          "$value": {
+            "default": "awsui-fade-out-35003c",
+            "disabled": "awsui-fade-out-35003c",
+          },
+        },
+        "motion-keyframes-scale-popup": {
+          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
+          "$value": {
+            "default": "awsui-scale-popup-35003c",
+            "disabled": "awsui-scale-popup-35003c",
+          },
+        },
+        "motion-keyframes-status-icon-error": {
+          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
+          "$value": {
+            "default": "awsui-status-icon-error-35003c",
+            "disabled": "awsui-status-icon-error-35003c",
+          },
+        },
+        "shadow-container-active": {
+          "$description": "Shadow for containers and cards in active state.",
+          "$value": {
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
+          },
+        },
+        "space-container-horizontal": {
+          "$description": "The horizontal padding inside a container.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-field-horizontal": {
+          "$description": "The horizontal padding inside field components.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-l": {
+          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "16px",
+          },
+        },
+        "space-scaled-m": {
+          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-s": {
+          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "8px",
+          },
+        },
+        "space-scaled-xl": {
+          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "20px",
+          },
+        },
+        "space-scaled-xs": {
+          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "4px",
+          },
+        },
+        "space-scaled-xxl": {
+          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "24px",
+          },
+        },
+        "space-scaled-xxs": {
+          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "2px",
+          },
+        },
+        "space-scaled-xxxl": {
+          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "32px",
+          },
+        },
+        "space-scaled-xxxs": {
+          "$description": "The XXXS spacing unit which scales between modes.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "0px",
+          },
+        },
+        "space-static-l": {
+          "$description": "The static L spacing unit.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-static-m": {
+          "$description": "The static M spacing unit.",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "16px",
+          },
+        },
+        "space-static-s": {
+          "$description": "The static S spacing unit.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-static-xl": {
+          "$description": "The static XL spacing unit.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "24px",
+          },
+        },
+        "space-static-xs": {
+          "$description": "The static XS spacing unit.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "8px",
+          },
+        },
+        "space-static-xxl": {
+          "$description": "The static XXL spacing unit.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "32px",
+          },
+        },
+        "space-static-xxs": {
+          "$description": "The static XXS spacing unit.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "4px",
+          },
+        },
+        "space-static-xxxl": {
+          "$description": "The static XXXL spacing unit.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "40px",
+          },
+        },
+        "space-static-xxxs": {
+          "$description": "The static XXXS spacing unit.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "2px",
+          },
+        },
+      },
+    },
+    "app-layout-toolbar": {
+      "tokens": {
+        "border-radius-alert": {
+          "$description": "The border radius of alerts.",
+          "$value": "12px",
+        },
+        "border-radius-badge": {
+          "$description": "The border radius of badges.",
+          "$value": "4px",
+        },
+        "border-radius-button": {
+          "$description": "The border radius of buttons and segmented control's segments.",
+          "$value": "20px",
+        },
+        "border-radius-calendar-day-focus-ring": {
+          "$description": "The border radius of the focused day in date picker and date range picker.",
+          "$value": "3px",
+        },
+        "border-radius-chat-bubble": {
+          "$description": "The border radius of chat bubbles.",
+          "$value": "8px",
+        },
+        "border-radius-container": {
+          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
+          "$value": "16px",
+        },
+        "border-radius-control-circular-focus-ring": {
+          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
+          "$value": "4px",
+        },
+        "border-radius-control-default-focus-ring": {
+          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
+          "$value": "4px",
+        },
+        "border-radius-dropdown": {
+          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
+          "$value": "8px",
+        },
+        "border-radius-flashbar": {
+          "$description": "The border radius of flash messages in flashbars.",
+          "$value": "12px",
+        },
+        "border-radius-input": {
+          "$description": "The border radius of form controls. For example: input, select.",
+          "$value": "8px",
+        },
+        "border-radius-item": {
+          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
+          "$value": "8px",
+        },
+        "border-radius-popover": {
+          "$description": "The border radius of popovers.",
+          "$value": "8px",
+        },
+        "border-radius-tabs-focus-ring": {
+          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
+          "$value": "20px",
+        },
+        "border-radius-tiles": {
+          "$description": "The border radius of tiles.",
+          "$value": "8px",
+        },
+        "border-radius-token": {
+          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
+          "$value": "8px",
+        },
+        "border-radius-tutorial-panel-item": {
+          "$description": "The border radius of tutorials inside a tutorial panel.",
+          "$value": "8px",
+        },
+        "border-width-alert": {
+          "$description": "The border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-field": {
+          "$description": "The border width of form fields.",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20300,78 +22825,78 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
           "$description": "The background color of normal buttons in active state.",
           "$value": {
-            "dark": "rgba(255, 255, 255, 0.15)",
-            "light": "rgba(255, 255, 255, 0.15)",
+            "dark": "#333843",
+            "light": "#d1f1ff",
           },
         },
         "color-background-button-normal-default": {
           "$description": "The default background color of normal buttons.",
           "$value": {
-            "dark": "transparent",
-            "light": "transparent",
+            "dark": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-button-normal-disabled": {
           "$description": "The background color of normal buttons in disabled state.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-button-normal-hover": {
           "$description": "The background color of normal buttons in hover state.",
           "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
+            "dark": "#1b232d",
+            "light": "#f0fbff",
           },
         },
         "color-background-button-primary-active": {
           "$description": "The background color of primary buttons in active state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#002b66",
           },
         },
         "color-background-button-primary-default": {
           "$description": "The default background color of primary buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-button-primary-disabled": {
           "$description": "The background color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-background-button-primary-hover": {
           "$description": "The background color of primary buttons in hover state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-background-cell-shaded": {
           "$description": "The background color of shaded table cells.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-incoming": {
           "$description": "The background color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-outgoing": {
@@ -20385,56 +22910,56 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-container-header": {
           "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-control-checked": {
           "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-control-default": {
           "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-control-disabled": {
           "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#dedee3",
           },
         },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-dropdown-item-filter-match": {
           "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#f0fbff",
           },
         },
         "color-background-dropdown-item-hover": {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": {
             "dark": "#131920",
-            "light": "#131920",
+            "light": "#f3f3f7",
           },
         },
         "color-background-home-header": {
@@ -20448,28 +22973,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-input-disabled": {
           "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ebebf0",
           },
         },
         "color-background-item-selected": {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-layout-main": {
           "$description": "The background color of the main content area on a page. For example: content area in app layout.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
+            "dark": "#131920",
+            "light": "#fcfcfd",
           },
         },
         "color-background-layout-toggle-active": {
@@ -20497,28 +23022,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the app layout toggle button when it's selected and active.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-default": {
           "$description": "The default background color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-hover": {
           "$description": "The background color of the app layout toggle button on hover when it's selected.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#004a9e",
           },
         },
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -20539,7 +23064,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for grey notifications. For example: grey badges.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#424650",
           },
         },
         "color-background-notification-red": {
@@ -20595,126 +23120,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for the popover container.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-active": {
           "$description": "The background color of the active segment in a segmented control.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-segment-default": {
           "$description": "The background color of inactive segments in a segmented control.",
           "$value": {
-            "dark": "transparent",
-            "light": "transparent",
+            "dark": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-disabled": {
           "$description": "The background color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-hover": {
           "$description": "The background color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
+            "dark": "#1b232d",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-error": {
           "$description": "The background color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#1f0000",
-            "light": "#1f0000",
+            "light": "#fff5f5",
           },
         },
         "color-background-status-info": {
           "$description": "The background color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-success": {
           "$description": "The background color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#001401",
-            "light": "#001401",
+            "light": "#effff1",
           },
         },
         "color-background-status-warning": {
           "$description": "The background color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#191100",
-            "light": "#191100",
+            "light": "#fffef0",
           },
         },
         "color-background-toggle-button-normal-pressed": {
           "$description": "The background color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#d1f1ff",
           },
         },
         "color-background-toggle-checked-disabled": {
           "$description": "The background color of checked toggles in disabled state.",
           "$value": {
             "dark": "#002b66",
-            "light": "#002b66",
+            "light": "#b8e7ff",
           },
         },
         "color-board-placeholder-active": {
           "$description": "The color of board placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-board-placeholder-hover": {
           "$description": "The color of board placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-border-button-normal-active": {
           "$description": "The border color of normal buttons in active state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-normal-default": {
           "$description": "The border color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-button-normal-disabled": {
           "$description": "The border color of normal buttons in disabled state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-border-button-normal-hover": {
           "$description": "The border color of normal buttons in hover state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-primary-disabled": {
           "$description": "The border color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-container-top": {
@@ -20734,120 +23259,120 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-border-divider-secondary": {
           "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-dropdown-item-focused": {
           "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-dropdown-item-hover": {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-default": {
           "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-selected": {
           "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-segment-active": {
           "$description": "The border color of the active segment in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-default": {
           "$description": "The border color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-disabled": {
           "$description": "The border color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-hover": {
           "$description": "The border color of inactive segments in a segmented control on hover.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-status-error": {
           "$description": "The border color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-border-status-info": {
           "$description": "The border color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-status-success": {
           "$description": "The border color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-border-status-warning": {
           "$description": "The border color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-border-toggle-button-normal-pressed": {
           "$description": "The border color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-charts-blue-1-1000": {
@@ -21932,42 +24457,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of drag placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-drag-placeholder-hover": {
           "$description": "The color of drag placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-disabled": {
           "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-read-only": {
           "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-accent": {
           "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-avatar": {
@@ -21981,42 +24506,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-body-secondary": {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-breadcrumb-current": {
           "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
           "$value": {
             "dark": "#8c8c94",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-text-breadcrumb-icon": {
           "$description": "The color used for the icon delimiter between breadcrumb items.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-normal-default": {
           "$description": "The default text color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-button-normal-disabled": {
@@ -22029,22 +24554,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-hover": {
           "$description": "The hover text color of normal buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-primary-active": {
           "$description": "The active text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-default": {
           "$description": "The default text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-disabled": {
@@ -22058,98 +24583,98 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The hover text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-chat-bubble-incoming": {
           "$description": "Text color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-chat-bubble-outgoing": {
           "$description": "Text color of \`outgoing\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-counter": {
           "$description": "The default color for counters. For example: counters in table headers",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-dropdown-item-default": {
           "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-dropdown-item-disabled": {
           "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-dropdown-item-filter-match": {
           "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-text-dropdown-item-highlighted": {
           "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-empty": {
           "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#656871",
           },
         },
         "color-text-form-default": {
           "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-form-secondary": {
           "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-group-label": {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-heading-default": {
           "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-heading-secondary": {
           "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#424650",
           },
         },
         "color-text-home-header-default": {
@@ -22170,42 +24695,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-input-placeholder": {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-interactive-active": {
           "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-default": {
           "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-interactive-disabled": {
           "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-interactive-hover": {
           "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-inverted-default": {
@@ -22226,14 +24751,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-label-gen-ai": {
           "$description": "The default color for labels indicating that content is produced by generative AI.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#bf80ff",
+            "light": "#7300e5",
           },
         },
         "color-text-layout-toggle": {
@@ -22247,35 +24772,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the app layout toggle button when it's active.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-text-layout-toggle-hover": {
           "$description": "The color of the app layout toggle button on hover.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-layout-toggle-selected": {
           "$description": "The color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-link-default": {
           "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-link-hover": {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-notification-default": {
@@ -22324,77 +24849,77 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The text color of the active segment in a segmented control.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-segment-default": {
           "$description": "The text color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-segment-hover": {
           "$description": "The text color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-status-error": {
           "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-text-status-inactive": {
           "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-status-info": {
           "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-status-success": {
           "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-text-status-warning": {
           "$description": "The color of warning icons.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-text-toggle-button-icon-pressed": {
           "$description": "The pressed text color of icon toggle buttons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-toggle-button-normal-pressed": {
           "$description": "The pressed text color of normal toggle buttons.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-top-navigation-title": {
           "$description": "The color of the title in the top navigation.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "font-family-base": {
@@ -22809,7 +25334,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -22825,8 +25350,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -23042,8 +25567,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -23294,8 +25819,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -25334,7 +27859,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -25350,8 +27875,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -25567,8 +28092,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -25819,8 +28344,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -27859,7 +30384,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -27875,8 +30400,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -28092,8 +30617,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -28344,8 +30869,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -30384,7 +32909,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -30400,8 +32925,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -30617,8 +33142,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -30869,8 +33394,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-border-item-focused": {
@@ -32909,7 +35434,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -32925,8 +35450,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -33142,8 +35667,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -33394,8 +35919,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-border-item-focused": {
@@ -35434,7 +37959,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "2px",
+      "$value": "1px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
@@ -35450,8 +37975,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-avatar-gen-ai": {
       "$description": "The gen-ai background color of avatars.",
       "$value": {
-        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
       },
     },
     "color-background-button-normal-active": {
@@ -35667,8 +38192,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-loading-bar-gen-ai": {
       "$description": "The background color of gen-ai loading bars.",
       "$value": {
-        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
       },
     },
     "color-background-notification-blue": {
@@ -35919,8 +38444,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-border-input-focused": {
       "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
       "$value": {
-        "dark": "#b8e7ff",
-        "light": "#002b66",
+        "dark": "#42b4ff",
+        "light": "#006ce0",
       },
     },
     "color-border-item-focused": {

From ccabeae0e913ef20977e09751cf40283c5a64dbf Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 2 Apr 2025 17:43:39 +0200
Subject: [PATCH 09/35] Temporarly increase package size limit for exploration

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

diff --git a/package.json b/package.json
index cf5847f4d0..03d5054243 100644
--- a/package.json
+++ b/package.json
@@ -165,7 +165,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "750 kB"
+      "limit": "800 kB"
     }
   ],
   "browserslist": [

From c4ba38bc8374673ecf7bd12dff9ee961f5a881d3 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Tue, 25 Mar 2025 11:32:30 +0100
Subject: [PATCH 10/35] apply second direction for vr improvements

---
 .../full-page-table.page.tsx                  |   67 +
 pages/app-layout-toolbar/with-wizard.page.tsx |  107 +
 .../__snapshots__/themes.test.ts.snap         |   24 +-
 .../__snapshots__/design-tokens.test.ts.snap  | 2795 ++++++++++++++++-
 src/app-layout-toolbar/index.tsx              |    5 +-
 src/code-editor/styles.scss                   |    4 +-
 src/input/styles.scss                         |    4 +-
 .../components/button-trigger/styles.scss     |    4 +-
 .../components/checkbox-icon/index.tsx        |    6 +-
 .../components/checkbox-icon/styles.scss      |    2 +-
 src/internal/styles/forms/mixins.scss         |    6 +-
 src/radio-group/radio-button.tsx              |    2 +-
 src/textarea/styles.scss                      |    4 +-
 src/tiles/styles.scss                         |    9 +-
 style-dictionary/utils/contexts.ts            |    8 +
 style-dictionary/utils/token-names.ts         |    2 +
 style-dictionary/visual-refresh/borders.ts    |    3 +-
 .../visual-refresh/color-palette.ts           |    1 +
 style-dictionary/visual-refresh/colors.ts     |    2 +-
 .../contexts/app-layout-toolbar.ts            |   17 +
 style-dictionary/visual-refresh/index.ts      |    2 +
 21 files changed, 2908 insertions(+), 166 deletions(-)
 create mode 100644 pages/app-layout-toolbar/full-page-table.page.tsx
 create mode 100644 pages/app-layout-toolbar/with-wizard.page.tsx
 create mode 100644 style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts

diff --git a/pages/app-layout-toolbar/full-page-table.page.tsx b/pages/app-layout-toolbar/full-page-table.page.tsx
new file mode 100644
index 0000000000..d6b5581478
--- /dev/null
+++ b/pages/app-layout-toolbar/full-page-table.page.tsx
@@ -0,0 +1,67 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useState } from 'react';
+
+import { AppLayoutToolbar, Button, Header, Link, Table } from '~components';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { Breadcrumbs, Footer, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks';
+import labels from '../app-layout/utils/labels';
+import * as toolsContent from '../app-layout/utils/tools-content';
+import { generateItems, Instance } from '../table/generate-data';
+import { columnsConfig } from '../table/shared-configs';
+import ScreenshotArea from '../utils/screenshot-area';
+
+type PageContext = React.Context<AppContextType<{ stickyNotifications: boolean }>>;
+
+const items = generateItems(20);
+
+export default function () {
+  const [toolsOpen, setToolsOpen] = useState(false);
+  const [selectedTool, setSelectedTool] = useState<keyof typeof toolsContent>('long');
+  const { urlParams } = useContext(AppContext as PageContext);
+
+  function openHelp(article: keyof typeof toolsContent) {
+    setToolsOpen(true);
+    setSelectedTool(article);
+  }
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayoutToolbar
+        ariaLabels={labels}
+        breadcrumbs={<Breadcrumbs />}
+        navigation={<Navigation />}
+        contentType="table"
+        tools={<Tools>{toolsContent[selectedTool]}</Tools>}
+        toolsOpen={toolsOpen}
+        onToolsChange={({ detail }) => setToolsOpen(detail.open)}
+        notifications={<Notifications />}
+        stickyNotifications={urlParams.stickyNotifications}
+        content={
+          <Table<Instance>
+            header={
+              <Header
+                variant="awsui-h1-sticky"
+                description="Demo page with footer"
+                info={
+                  <Link variant="info" onFollow={() => openHelp('long')}>
+                    Long help text
+                  </Link>
+                }
+                actions={<Button variant="primary">Create</Button>}
+              >
+                Sticky Scrollbar Example
+              </Header>
+            }
+            stickyHeader={true}
+            variant="full-page"
+            columnDefinitions={columnsConfig}
+            items={items}
+          />
+        }
+      />
+      <Footer legacyConsoleNav={false} />
+    </ScreenshotArea>
+  );
+}
diff --git a/pages/app-layout-toolbar/with-wizard.page.tsx b/pages/app-layout-toolbar/with-wizard.page.tsx
new file mode 100644
index 0000000000..6fe801d9c3
--- /dev/null
+++ b/pages/app-layout-toolbar/with-wizard.page.tsx
@@ -0,0 +1,107 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useState } from 'react';
+
+import {
+  AppLayoutToolbar,
+  Box,
+  Button,
+  ColumnLayout,
+  Container,
+  Header,
+  SpaceBetween,
+  Table,
+  Wizard,
+} from '~components';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { Breadcrumbs } from '../app-layout/utils/content-blocks';
+import labels from '../app-layout/utils/labels';
+import { generateItems, Instance } from '../table/generate-data';
+import { columnsConfig } from '../table/shared-configs';
+import ScreenshotArea from '../utils/screenshot-area';
+
+type DemoContext = React.Context<
+  AppContextType<{ hasBreadcrumbs: boolean; hasNotifications: boolean; disableOverlap: boolean }>
+>;
+
+const items = generateItems(20);
+
+export default function () {
+  const { urlParams } = useContext(AppContext as DemoContext);
+  const [activeStepIndex, setActiveStepIndex] = useState(0);
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayoutToolbar
+        ariaLabels={labels}
+        navigationHide={false}
+        breadcrumbs={urlParams.hasBreadcrumbs && <Breadcrumbs />}
+        content={
+          <Wizard
+            i18nStrings={{
+              stepNumberLabel: stepNumber => `Step ${stepNumber}`,
+              collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`,
+              skipToButtonLabel: step => `Skip to ${step.title}`,
+              navigationAriaLabel: 'Steps',
+              cancelButton: 'Cancel',
+              previousButton: 'Previous',
+              nextButton: 'Next',
+              submitButton: 'Launch instance',
+              optional: 'optional',
+            }}
+            onNavigate={({ detail }) => setActiveStepIndex(detail.requestedStepIndex)}
+            activeStepIndex={activeStepIndex}
+            allowSkipTo={true}
+            steps={[
+              {
+                title: 'Add storage',
+                content: (
+                  <Box>
+                    <Table<Instance>
+                      header={
+                        <Header
+                          variant="awsui-h1-sticky"
+                          description="Demo page with footer"
+                          actions={<Button variant="primary">Create</Button>}
+                        >
+                          Sticky Scrollbar Example
+                        </Header>
+                      }
+                      columnDefinitions={columnsConfig}
+                      items={items}
+                    />
+                  </Box>
+                ),
+                isOptional: true,
+              },
+              {
+                title: 'Review and launch',
+                content: (
+                  <SpaceBetween size="xs">
+                    <Header variant="h3" actions={<Button onClick={() => setActiveStepIndex(0)}>Edit</Button>}>
+                      Step 1: Instance type
+                    </Header>
+                    <Container header={<Header variant="h2">Container title</Header>}>
+                      <ColumnLayout columns={2} variant="text-grid">
+                        <div>
+                          <Box variant="awsui-key-label">First field</Box>
+                          <div>Value</div>
+                        </div>
+                        <div>
+                          <Box variant="awsui-key-label">Second Field</Box>
+                          <div>Value</div>
+                        </div>
+                      </ColumnLayout>
+                    </Container>
+                  </SpaceBetween>
+                ),
+              },
+            ]}
+          />
+        }
+        contentType="wizard"
+      />
+    </ScreenshotArea>
+  );
+}
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 6a4497519b..9198b591f8 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -42,6 +42,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-field": "1px",
+  "border-width-form-control": "1px",
   "border-width-popover": "1px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
@@ -707,6 +708,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-field": "1px",
+  "border-width-form-control": "1px",
   "border-width-popover": "1px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
@@ -1372,6 +1374,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-field": "1px",
+  "border-width-form-control": "1px",
   "border-width-popover": "1px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
@@ -2037,6 +2040,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-field": "1px",
+  "border-width-form-control": "1px",
   "border-width-popover": "1px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
@@ -2666,7 +2670,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -2702,6 +2706,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-field": "2px",
+  "border-width-form-control": "1px",
   "border-width-popover": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
@@ -2828,7 +2833,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#002b66",
+  "color-border-input-focused": "#006ce0",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
@@ -3331,7 +3336,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -3367,6 +3372,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-field": "2px",
+  "border-width-form-control": "1px",
   "border-width-popover": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
@@ -3493,7 +3499,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#002b66",
+  "color-border-input-focused": "#006ce0",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
@@ -3996,7 +4002,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4032,6 +4038,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-field": "2px",
+  "border-width-form-control": "1px",
   "border-width-popover": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
@@ -4158,7 +4165,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#b8e7ff",
+  "color-border-input-focused": "#75cfff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
@@ -4661,7 +4668,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4697,6 +4704,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-field": "2px",
+  "border-width-form-control": "1px",
   "border-width-popover": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
@@ -4823,7 +4831,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#b8e7ff",
+  "color-border-input-focused": "#75cfff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 4cf000c1fa..24f86e23f9 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -18244,8 +18244,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -20364,14 +20364,2539 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of shaded table cells.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-chat-bubble-incoming": {
+          "$description": "The background color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-chat-bubble-outgoing": {
+          "$description": "The background color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-container-content": {
+          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-container-header": {
+          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-checked": {
+          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-control-default": {
+          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-disabled": {
+          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-default": {
+          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-dropdown-item-filter-match": {
+          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-hover": {
+          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
+          "$value": {
+            "dark": "#131920",
+            "light": "#131920",
+          },
+        },
+        "color-background-home-header": {
+          "$description": "The background color of the home header, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-input-default": {
+          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-input-disabled": {
+          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-item-selected": {
+          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-layout-main": {
+          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-layout-toggle-active": {
+          "$description": "The background color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-default": {
+          "$description": "The default background color of the app layout toggle button.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-hover": {
+          "$description": "The background color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-layout-toggle-selected-active": {
+          "$description": "The background color of the app layout toggle button when it's selected and active.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-default": {
+          "$description": "The default background color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-hover": {
+          "$description": "The background color of the app layout toggle button on hover when it's selected.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-background-loading-bar-gen-ai": {
+          "$description": "The background color of gen-ai loading bars.",
+          "$value": {
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+          },
+        },
+        "color-background-notification-blue": {
+          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-notification-green": {
+          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
+          "$value": {
+            "dark": "#00802f",
+            "light": "#00802f",
+          },
+        },
+        "color-background-notification-grey": {
+          "$description": "Background color for grey notifications. For example: grey badges.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-red": {
+          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
+          "$value": {
+            "dark": "#db0000",
+            "light": "#db0000",
+          },
+        },
+        "color-background-notification-severity-critical": {
+          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#870303",
+          },
+        },
+        "color-background-notification-severity-high": {
+          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ce3311",
+          },
+        },
+        "color-background-notification-severity-low": {
+          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#f2cd54",
+            "light": "#f2cd54",
+          },
+        },
+        "color-background-notification-severity-medium": {
+          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#f89256",
+          },
+        },
+        "color-background-notification-severity-neutral": {
+          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-yellow": {
+          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
+        "color-background-popover": {
+          "$description": "Background color for the popover container.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-segment-active": {
+          "$description": "The background color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-segment-default": {
+          "$description": "The background color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-segment-disabled": {
+          "$description": "The background color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-segment-hover": {
+          "$description": "The background color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "color-background-status-error": {
+          "$description": "The background color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#1f0000",
+            "light": "#1f0000",
+          },
+        },
+        "color-background-status-info": {
+          "$description": "The background color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-status-success": {
+          "$description": "The background color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#001401",
+            "light": "#001401",
+          },
+        },
+        "color-background-status-warning": {
+          "$description": "The background color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#191100",
+            "light": "#191100",
+          },
+        },
+        "color-background-toggle-button-normal-pressed": {
+          "$description": "The background color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-toggle-checked-disabled": {
+          "$description": "The background color of checked toggles in disabled state.",
+          "$value": {
+            "dark": "#002b66",
+            "light": "#002b66",
+          },
+        },
+        "color-board-placeholder-active": {
+          "$description": "The color of board placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-board-placeholder-hover": {
+          "$description": "The color of board placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-border-button-normal-active": {
+          "$description": "The border color of normal buttons in active state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-normal-default": {
+          "$description": "The border color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-button-normal-disabled": {
+          "$description": "The border color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-button-normal-hover": {
+          "$description": "The border color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-primary-disabled": {
+          "$description": "The border color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-container-top": {
+          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-border-control-default": {
+          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-border-divider-default": {
+          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-divider-secondary": {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-dropdown-item-focused": {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-dropdown-item-hover": {
+          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-default": {
+          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-focused": {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-border-item-focused": {
+          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-border-item-selected": {
+          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-segment-active": {
+          "$description": "The border color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-default": {
+          "$description": "The border color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-disabled": {
+          "$description": "The border color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-hover": {
+          "$description": "The border color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-status-error": {
+          "$description": "The border color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-border-status-info": {
+          "$description": "The border color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-status-success": {
+          "$description": "The border color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-border-status-warning": {
+          "$description": "The border color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-border-toggle-button-normal-pressed": {
+          "$description": "The border color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-charts-blue-1-1000": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#b3e4f8",
+            "light": "#01437d",
+          },
+        },
+        "color-charts-blue-1-1100": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#caedfc",
+            "light": "#003c75",
+          },
+        },
+        "color-charts-blue-1-1200": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ddf4ff",
+            "light": "#00366d",
+          },
+        },
+        "color-charts-blue-1-300": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#00819c",
+            "light": "#529ccb",
+          },
+        },
+        "color-charts-blue-1-400": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#0497ba",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-blue-1-500": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#0273bb",
+          },
+        },
+        "color-charts-blue-1-600": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#44b9dd",
+            "light": "#0166ab",
+          },
+        },
+        "color-charts-blue-1-700": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#63c6e7",
+            "light": "#015b9d",
+          },
+        },
+        "color-charts-blue-1-800": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#79d2f0",
+            "light": "#015292",
+          },
+        },
+        "color-charts-blue-1-900": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#98dcf5",
+            "light": "#014a87",
+          },
+        },
+        "color-charts-blue-2-1000": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-blue-2-1100": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-blue-2-1200": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-blue-2-300": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-blue-2-400": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-blue-2-500": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-blue-2-600": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-blue-2-700": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-blue-2-800": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-blue-2-900": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-green-1000": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#c5e7a8",
+            "light": "#104d01",
+          },
+        },
+        "color-charts-green-1100": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#d5efbe",
+            "light": "#0f4601",
+          },
+        },
+        "color-charts-green-1200": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#e4f7d5",
+            "light": "#0d4000",
+          },
+        },
+        "color-charts-green-300": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#48851a",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-green-400": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#5a9b29",
+            "light": "#41902c",
+          },
+        },
+        "color-charts-green-500": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#1f8104",
+          },
+        },
+        "color-charts-green-600": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#7dbd4c",
+            "light": "#1a7302",
+          },
+        },
+        "color-charts-green-700": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#8fca61",
+            "light": "#176702",
+          },
+        },
+        "color-charts-green-800": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#9fd673",
+            "light": "#145d02",
+          },
+        },
+        "color-charts-green-900": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#b2df8d",
+            "light": "#125502",
+          },
+        },
+        "color-charts-line-axis": {
+          "$description": "Color of the axis lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-grid": {
+          "$description": "Color of the grid lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-tick": {
+          "$description": "Color of the tick marks in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-orange-1000": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-orange-1100": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-orange-1200": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-orange-300": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-orange-400": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-orange-500": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-orange-600": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-orange-700": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-orange-800": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-orange-900": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-1": {
+          "$description": "Color #1 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-palette-categorical-10": {
+          "$description": "Color #10 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-palette-categorical-11": {
+          "$description": "Color #11 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-palette-categorical-12": {
+          "$description": "Color #12 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-palette-categorical-13": {
+          "$description": "Color #13 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-palette-categorical-14": {
+          "$description": "Color #14 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-palette-categorical-15": {
+          "$description": "Color #15 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-16": {
+          "$description": "Color #16 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-palette-categorical-17": {
+          "$description": "Color #17 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-palette-categorical-18": {
+          "$description": "Color #18 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-palette-categorical-19": {
+          "$description": "Color #19 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-palette-categorical-2": {
+          "$description": "Color #2 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-palette-categorical-20": {
+          "$description": "Color #20 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-palette-categorical-21": {
+          "$description": "Color #21 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-palette-categorical-22": {
+          "$description": "Color #22 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-palette-categorical-23": {
+          "$description": "Color #23 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-palette-categorical-24": {
+          "$description": "Color #24 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-palette-categorical-25": {
+          "$description": "Color #25 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-palette-categorical-26": {
+          "$description": "Color #26 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-palette-categorical-27": {
+          "$description": "Color #27 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-palette-categorical-28": {
+          "$description": "Color #28 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-palette-categorical-29": {
+          "$description": "Color #29 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-palette-categorical-3": {
+          "$description": "Color #3 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-palette-categorical-30": {
+          "$description": "Color #30 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-palette-categorical-31": {
+          "$description": "Color #31 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-palette-categorical-32": {
+          "$description": "Color #32 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-palette-categorical-33": {
+          "$description": "Color #33 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-palette-categorical-34": {
+          "$description": "Color #34 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-palette-categorical-35": {
+          "$description": "Color #35 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-palette-categorical-36": {
+          "$description": "Color #36 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-palette-categorical-37": {
+          "$description": "Color #37 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-palette-categorical-38": {
+          "$description": "Color #38 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-palette-categorical-39": {
+          "$description": "Color #39 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-palette-categorical-4": {
+          "$description": "Color #4 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-palette-categorical-40": {
+          "$description": "Color #40 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-palette-categorical-41": {
+          "$description": "Color #41 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-palette-categorical-42": {
+          "$description": "Color #42 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-palette-categorical-43": {
+          "$description": "Color #43 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-palette-categorical-44": {
+          "$description": "Color #44 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-palette-categorical-45": {
+          "$description": "Color #45 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-palette-categorical-46": {
+          "$description": "Color #46 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-palette-categorical-47": {
+          "$description": "Color #47 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-palette-categorical-48": {
+          "$description": "Color #48 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-palette-categorical-49": {
+          "$description": "Color #49 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-palette-categorical-5": {
+          "$description": "Color #5 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-palette-categorical-50": {
+          "$description": "Color #50 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-palette-categorical-6": {
+          "$description": "Color #6 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-palette-categorical-7": {
+          "$description": "Color #7 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-palette-categorical-8": {
+          "$description": "Color #8 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-palette-categorical-9": {
+          "$description": "Color #9 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-pink-1000": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-pink-1100": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-pink-1200": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-pink-300": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-pink-400": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-pink-500": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-pink-600": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-pink-700": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-pink-800": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-pink-900": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-purple-1000": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-purple-1100": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-purple-1200": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-purple-300": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-purple-400": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-purple-500": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-purple-600": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-purple-700": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-purple-800": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-purple-900": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-red-1000": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd2cf",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-red-1100": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe0dd",
+            "light": "#721e03",
+          },
+        },
+        "color-charts-red-1200": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecea",
+            "light": "#671c00",
+          },
+        },
+        "color-charts-red-300": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#ea7158",
+          },
+        },
+        "color-charts-red-400": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#ed5958",
+            "light": "#dc5032",
+          },
+        },
+        "color-charts-red-500": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#d13313",
+          },
+        },
+        "color-charts-red-600": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#ff8a8a",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-red-700": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#ffa09e",
+            "light": "#a82a0c",
+          },
+        },
+        "color-charts-red-800": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb3b0",
+            "light": "#972709",
+          },
+        },
+        "color-charts-red-900": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc4c0",
+            "light": "#892407",
+          },
+        },
+        "color-charts-status-critical": {
+          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-status-high": {
+          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-status-info": {
+          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-status-low": {
+          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-status-medium": {
+          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-status-neutral": {
+          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-charts-status-positive": {
+          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-teal-1000": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-teal-1100": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-teal-1200": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-teal-300": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-teal-400": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-teal-500": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-teal-600": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-teal-700": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-teal-800": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-teal-900": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-threshold-info": {
+          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#006ce0",
+          },
+        },
+        "color-charts-threshold-negative": {
+          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-charts-threshold-neutral": {
+          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#656871",
+          },
+        },
+        "color-charts-threshold-positive": {
+          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#00802f",
+          },
+        },
+        "color-charts-yellow-1000": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#f7db8a",
+            "light": "#553f03",
+          },
+        },
+        "color-charts-yellow-1100": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#fce5a8",
+            "light": "#4d3901",
+          },
+        },
+        "color-charts-yellow-1200": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffefc9",
+            "light": "#483300",
+          },
+        },
+        "color-charts-yellow-300": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#977001",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-yellow-400": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#b08400",
+            "light": "#9c7b0b",
+          },
+        },
+        "color-charts-yellow-500": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#c59600",
+            "light": "#8a6b05",
+          },
+        },
+        "color-charts-yellow-600": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#d3a61c",
+            "light": "#7b5f04",
+          },
+        },
+        "color-charts-yellow-700": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#6f5504",
+          },
+        },
+        "color-charts-yellow-800": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#eac33a",
+            "light": "#654d03",
+          },
+        },
+        "color-charts-yellow-900": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#f1cf65",
+            "light": "#5d4503",
+          },
+        },
+        "color-drag-placeholder-active": {
+          "$description": "The color of drag placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-drag-placeholder-hover": {
+          "$description": "The color of drag placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-foreground-control-default": {
+          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-foreground-control-disabled": {
+          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-foreground-control-read-only": {
+          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-accent": {
+          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-avatar": {
+          "$description": "The text and icon color of avatars.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-body-default": {
+          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-body-secondary": {
+          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-breadcrumb-current": {
+          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-breadcrumb-icon": {
+          "$description": "The color used for the icon delimiter between breadcrumb items.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-button-normal-active": {
+          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-normal-default": {
+          "$description": "The default text color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-button-normal-disabled": {
+          "$description": "The text color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-normal-hover": {
+          "$description": "The hover text color of normal buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-primary-active": {
+          "$description": "The active text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-default": {
+          "$description": "The default text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-disabled": {
+          "$description": "The text color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-primary-hover": {
+          "$description": "The hover text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-chat-bubble-incoming": {
+          "$description": "Text color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-chat-bubble-outgoing": {
+          "$description": "Text color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-counter": {
+          "$description": "The default color for counters. For example: counters in table headers",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-dropdown-item-default": {
+          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-dropdown-item-disabled": {
+          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-dropdown-item-filter-match": {
+          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-dropdown-item-highlighted": {
+          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-empty": {
+          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-default": {
+          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-secondary": {
+          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-group-label": {
+          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-heading-default": {
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-heading-secondary": {
+          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-home-header-default": {
+          "$description": "The color of the home header's text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-home-header-secondary": {
+          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-input-disabled": {
+          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-input-placeholder": {
+          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-interactive-active": {
+          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-default": {
+          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-disabled": {
+          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-interactive-hover": {
+          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-inverted-default": {
+          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-inverted-hover": {
+          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-label": {
+          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-label-gen-ai": {
+          "$description": "The default color for labels indicating that content is produced by generative AI.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-layout-toggle": {
+          "$description": "The default color of the app layout toggle.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-layout-toggle-active": {
+          "$description": "The color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-text-layout-toggle-hover": {
+          "$description": "The color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-layout-toggle-selected": {
+          "$description": "The color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-link-default": {
+          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-link-hover": {
+          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-notification-default": {
+          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-critical": {
+          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#000000",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-high": {
+          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-low": {
+          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-medium": {
+          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-neutral": {
+          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-segment-active": {
+          "$description": "The text color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-segment-default": {
+          "$description": "The text color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-segment-hover": {
+          "$description": "The text color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-status-error": {
+          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-text-status-inactive": {
+          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-status-info": {
+          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-status-success": {
+          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-text-status-warning": {
+          "$description": "The color of warning icons.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-text-toggle-button-icon-pressed": {
+          "$description": "The pressed text color of icon toggle buttons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-toggle-button-normal-pressed": {
+          "$description": "The pressed text color of normal toggle buttons.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-top-navigation-title": {
+          "$description": "The color of the title in the top navigation.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "font-family-base": {
+          "$description": "The default font family that will be applied globally to the product interface.",
+          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+        },
+        "font-family-monospace": {
+          "$description": "The monospace font family that will be applied globally to the product interface.",
+          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
+        },
+        "font-size-body-m": {
+          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
+          "$value": "14px",
+        },
+        "font-size-body-s": {
+          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
+          "$value": "12px",
+        },
+        "font-size-display-l": {
+          "$description": "The default font size for large display text.",
+          "$value": "42px",
+        },
+        "font-size-heading-l": {
+          "$description": "The default font size for h2s.",
+          "$value": "20px",
+        },
+        "font-size-heading-m": {
+          "$description": "The default font size for h3s.",
+          "$value": "18px",
+        },
+        "font-size-heading-s": {
+          "$description": "The default font size for h4s.",
+          "$value": "16px",
+        },
+        "font-size-heading-xl": {
+          "$description": "The default font size for h1s.",
+          "$value": "24px",
+        },
+        "font-size-heading-xs": {
+          "$description": "The default font size for h5s.",
+          "$value": "14px",
+        },
+        "font-weight-button": {
+          "$description": "The default font weight for button text.",
+          "$value": "700",
+        },
+        "font-weight-heading-l": {
+          "$description": "The default font weight for h2s.",
+          "$value": "700",
+        },
+        "font-weight-heading-m": {
+          "$description": "The default font weight for h3s.",
+          "$value": "700",
+        },
+        "font-weight-heading-s": {
+          "$description": "The default font weight for h4s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xl": {
+          "$description": "The default font weight for h1s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xs": {
+          "$description": "The default font weight for h5s.",
+          "$value": "700",
+        },
+        "line-height-body-m": {
+          "$description": "The default line height for regular body text.",
+          "$value": "20px",
+        },
+        "line-height-body-s": {
+          "$description": "The default line height for small body text.",
+          "$value": "16px",
+        },
+        "line-height-display-l": {
+          "$description": "The default line height for large display text.",
+          "$value": "48px",
+        },
+        "line-height-heading-l": {
+          "$description": "The default line height for h2s.",
+          "$value": "24px",
+        },
+        "line-height-heading-m": {
+          "$description": "The default line height for h3s.",
+          "$value": "22px",
+        },
+        "line-height-heading-s": {
+          "$description": "The default line height for h4s.",
+          "$value": "20px",
+        },
+        "line-height-heading-xl": {
+          "$description": "The default line height for h1s.",
+          "$value": "30px",
+        },
+        "line-height-heading-xs": {
+          "$description": "The default line height for h5s.",
+          "$value": "18px",
+        },
+        "motion-duration-avatar-gen-ai-gradient": {
+          "$description": "The duration for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "3600ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-avatar-loading-dots": {
+          "$description": "The duration for loading motion of avatars.",
+          "$value": {
+            "default": "1200ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-complex": {
+          "$description": "The duration for drawing more attention or accommodating for more complexity.",
+          "$value": {
+            "default": "250ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-expressive": {
+          "$description": "The duration for accommodating the motion with more expressiveness.",
+          "$value": {
+            "default": "165ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-responsive": {
+          "$description": "The duration for making the motion feel quick and responsive.",
+          "$value": {
+            "default": "115ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-easing-avatar-gen-ai-gradient": {
+          "$description": "The easing curve for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
+            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
+          },
+        },
+        "motion-easing-expressive": {
+          "$description": "The easing curve for drawing a user's attention in an expressive way.",
+          "$value": {
+            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
+            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
+          },
+        },
+        "motion-easing-responsive": {
+          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
+          "$value": {
+            "default": "cubic-bezier(0, 0, 0, 1)",
+            "disabled": "cubic-bezier(0, 0, 0, 1)",
+          },
+        },
+        "motion-easing-sticky": {
+          "$description": "The easing curve for making an element sticky to a certain state.",
+          "$value": {
+            "default": "cubic-bezier(1, 0, 0.83, 1)",
+            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
+          },
+        },
+        "motion-keyframes-fade-in": {
+          "$description": "The CSS keyframes for showing an element.",
+          "$value": {
+            "default": "awsui-fade-in-35003c",
+            "disabled": "awsui-fade-in-35003c",
+          },
+        },
+        "motion-keyframes-fade-out": {
+          "$description": "The CSS keyframes for hiding an element.",
+          "$value": {
+            "default": "awsui-fade-out-35003c",
+            "disabled": "awsui-fade-out-35003c",
+          },
+        },
+        "motion-keyframes-scale-popup": {
+          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
+          "$value": {
+            "default": "awsui-scale-popup-35003c",
+            "disabled": "awsui-scale-popup-35003c",
+          },
+        },
+        "motion-keyframes-status-icon-error": {
+          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
+          "$value": {
+            "default": "awsui-status-icon-error-35003c",
+            "disabled": "awsui-status-icon-error-35003c",
+          },
+        },
+        "shadow-container-active": {
+          "$description": "Shadow for containers and cards in active state.",
+          "$value": {
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
+          },
+        },
+        "space-container-horizontal": {
+          "$description": "The horizontal padding inside a container.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-field-horizontal": {
+          "$description": "The horizontal padding inside field components.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-l": {
+          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "16px",
+          },
+        },
+        "space-scaled-m": {
+          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-s": {
+          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "8px",
+          },
+        },
+        "space-scaled-xl": {
+          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "20px",
+          },
+        },
+        "space-scaled-xs": {
+          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "4px",
+          },
+        },
+        "space-scaled-xxl": {
+          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "24px",
+          },
+        },
+        "space-scaled-xxs": {
+          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "2px",
+          },
+        },
+        "space-scaled-xxxl": {
+          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "32px",
+          },
+        },
+        "space-scaled-xxxs": {
+          "$description": "The XXXS spacing unit which scales between modes.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "0px",
+          },
+        },
+        "space-static-l": {
+          "$description": "The static L spacing unit.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-static-m": {
+          "$description": "The static M spacing unit.",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "16px",
+          },
+        },
+        "space-static-s": {
+          "$description": "The static S spacing unit.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-static-xl": {
+          "$description": "The static XL spacing unit.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "24px",
+          },
+        },
+        "space-static-xs": {
+          "$description": "The static XS spacing unit.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "8px",
+          },
+        },
+        "space-static-xxl": {
+          "$description": "The static XXL spacing unit.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "32px",
+          },
+        },
+        "space-static-xxs": {
+          "$description": "The static XXS spacing unit.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "4px",
+          },
+        },
+        "space-static-xxxl": {
+          "$description": "The static XXXL spacing unit.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "40px",
+          },
+        },
+        "space-static-xxxs": {
+          "$description": "The static XXXS spacing unit.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "2px",
+          },
+        },
+      },
+    },
+    "app-layout-toolbar": {
+      "tokens": {
+        "border-radius-alert": {
+          "$description": "The border radius of alerts.",
+          "$value": "12px",
+        },
+        "border-radius-badge": {
+          "$description": "The border radius of badges.",
+          "$value": "4px",
+        },
+        "border-radius-button": {
+          "$description": "The border radius of buttons and segmented control's segments.",
+          "$value": "20px",
+        },
+        "border-radius-calendar-day-focus-ring": {
+          "$description": "The border radius of the focused day in date picker and date range picker.",
+          "$value": "3px",
+        },
+        "border-radius-chat-bubble": {
+          "$description": "The border radius of chat bubbles.",
+          "$value": "8px",
+        },
+        "border-radius-container": {
+          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
+          "$value": "16px",
+        },
+        "border-radius-control-circular-focus-ring": {
+          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
+          "$value": "4px",
+        },
+        "border-radius-control-default-focus-ring": {
+          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
+          "$value": "4px",
+        },
+        "border-radius-dropdown": {
+          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
+          "$value": "8px",
+        },
+        "border-radius-flashbar": {
+          "$description": "The border radius of flash messages in flashbars.",
+          "$value": "12px",
+        },
+        "border-radius-input": {
+          "$description": "The border radius of form controls. For example: input, select.",
+          "$value": "8px",
+        },
+        "border-radius-item": {
+          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
+          "$value": "8px",
+        },
+        "border-radius-popover": {
+          "$description": "The border radius of popovers.",
+          "$value": "8px",
+        },
+        "border-radius-tabs-focus-ring": {
+          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
+          "$value": "20px",
+        },
+        "border-radius-tiles": {
+          "$description": "The border radius of tiles.",
+          "$value": "8px",
+        },
+        "border-radius-token": {
+          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
+          "$value": "8px",
+        },
+        "border-radius-tutorial-panel-item": {
+          "$description": "The border radius of tutorials inside a tutorial panel.",
+          "$value": "8px",
+        },
+        "border-width-alert": {
+          "$description": "The border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-field": {
+          "$description": "The border width of form fields.",
+          "$value": "2px",
+        },
+        "border-width-popover": {
+          "$description": "The border width of popovers.",
+          "$value": "2px",
+        },
+        "color-background-avatar-default": {
+          "$description": "The default background color of avatars.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-avatar-gen-ai": {
+          "$description": "The gen-ai background color of avatars.",
+          "$value": {
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+          },
+        },
+        "color-background-button-normal-active": {
+          "$description": "The background color of normal buttons in active state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#d1f1ff",
+          },
+        },
+        "color-background-button-normal-default": {
+          "$description": "The default background color of normal buttons.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-button-normal-disabled": {
+          "$description": "The background color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-button-normal-hover": {
+          "$description": "The background color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#f0fbff",
+          },
+        },
+        "color-background-button-primary-active": {
+          "$description": "The background color of primary buttons in active state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#002b66",
+          },
+        },
+        "color-background-button-primary-default": {
+          "$description": "The default background color of primary buttons.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-button-primary-disabled": {
+          "$description": "The background color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#ebebf0",
+          },
+        },
+        "color-background-button-primary-hover": {
+          "$description": "The background color of primary buttons in hover state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#002b66",
+          },
+        },
+        "color-background-cell-shaded": {
+          "$description": "The background color of shaded table cells.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-incoming": {
           "$description": "The background color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-outgoing": {
@@ -20385,56 +22910,56 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-container-header": {
           "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-control-checked": {
           "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-control-default": {
           "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-control-disabled": {
           "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#dedee3",
           },
         },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-dropdown-item-filter-match": {
           "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#f0fbff",
           },
         },
         "color-background-dropdown-item-hover": {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": {
             "dark": "#131920",
-            "light": "#131920",
+            "light": "#f3f3f7",
           },
         },
         "color-background-home-header": {
@@ -20448,28 +22973,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-input-disabled": {
           "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ebebf0",
           },
         },
         "color-background-item-selected": {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-layout-main": {
           "$description": "The background color of the main content area on a page. For example: content area in app layout.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
+            "dark": "#131920",
+            "light": "#fcfcfd",
           },
         },
         "color-background-layout-toggle-active": {
@@ -20497,28 +23022,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the app layout toggle button when it's selected and active.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-default": {
           "$description": "The default background color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-hover": {
           "$description": "The background color of the app layout toggle button on hover when it's selected.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#004a9e",
           },
         },
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -20539,7 +23064,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for grey notifications. For example: grey badges.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#424650",
           },
         },
         "color-background-notification-red": {
@@ -20595,126 +23120,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for the popover container.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-active": {
           "$description": "The background color of the active segment in a segmented control.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-segment-default": {
           "$description": "The background color of inactive segments in a segmented control.",
           "$value": {
-            "dark": "transparent",
-            "light": "transparent",
+            "dark": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-disabled": {
           "$description": "The background color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-hover": {
           "$description": "The background color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
+            "dark": "#1b232d",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-error": {
           "$description": "The background color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#1f0000",
-            "light": "#1f0000",
+            "light": "#fff5f5",
           },
         },
         "color-background-status-info": {
           "$description": "The background color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-success": {
           "$description": "The background color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#001401",
-            "light": "#001401",
+            "light": "#effff1",
           },
         },
         "color-background-status-warning": {
           "$description": "The background color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#191100",
-            "light": "#191100",
+            "light": "#fffef0",
           },
         },
         "color-background-toggle-button-normal-pressed": {
           "$description": "The background color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#d1f1ff",
           },
         },
         "color-background-toggle-checked-disabled": {
           "$description": "The background color of checked toggles in disabled state.",
           "$value": {
             "dark": "#002b66",
-            "light": "#002b66",
+            "light": "#b8e7ff",
           },
         },
         "color-board-placeholder-active": {
           "$description": "The color of board placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-board-placeholder-hover": {
           "$description": "The color of board placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-border-button-normal-active": {
           "$description": "The border color of normal buttons in active state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-normal-default": {
           "$description": "The border color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-button-normal-disabled": {
           "$description": "The border color of normal buttons in disabled state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-border-button-normal-hover": {
           "$description": "The border color of normal buttons in hover state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-primary-disabled": {
           "$description": "The border color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-container-top": {
@@ -20734,120 +23259,120 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-border-divider-secondary": {
           "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-dropdown-item-focused": {
           "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-dropdown-item-hover": {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-default": {
           "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-selected": {
           "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-segment-active": {
           "$description": "The border color of the active segment in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-default": {
           "$description": "The border color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-disabled": {
           "$description": "The border color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-hover": {
           "$description": "The border color of inactive segments in a segmented control on hover.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-status-error": {
           "$description": "The border color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-border-status-info": {
           "$description": "The border color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-status-success": {
           "$description": "The border color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-border-status-warning": {
           "$description": "The border color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-border-toggle-button-normal-pressed": {
           "$description": "The border color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-charts-blue-1-1000": {
@@ -21932,42 +24457,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of drag placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-drag-placeholder-hover": {
           "$description": "The color of drag placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-disabled": {
           "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-read-only": {
           "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-accent": {
           "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-avatar": {
@@ -21981,42 +24506,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-body-secondary": {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-breadcrumb-current": {
           "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
           "$value": {
             "dark": "#8c8c94",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-text-breadcrumb-icon": {
           "$description": "The color used for the icon delimiter between breadcrumb items.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-normal-default": {
           "$description": "The default text color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-button-normal-disabled": {
@@ -22029,22 +24554,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-hover": {
           "$description": "The hover text color of normal buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-primary-active": {
           "$description": "The active text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-default": {
           "$description": "The default text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-disabled": {
@@ -22058,98 +24583,98 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The hover text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-chat-bubble-incoming": {
           "$description": "Text color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-chat-bubble-outgoing": {
           "$description": "Text color of \`outgoing\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-counter": {
           "$description": "The default color for counters. For example: counters in table headers",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-dropdown-item-default": {
           "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-dropdown-item-disabled": {
           "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-dropdown-item-filter-match": {
           "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-text-dropdown-item-highlighted": {
           "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-empty": {
           "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#656871",
           },
         },
         "color-text-form-default": {
           "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-form-secondary": {
           "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-group-label": {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-heading-default": {
           "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-heading-secondary": {
           "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#424650",
           },
         },
         "color-text-home-header-default": {
@@ -22170,42 +24695,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-input-placeholder": {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-interactive-active": {
           "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-default": {
           "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-interactive-disabled": {
           "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-interactive-hover": {
           "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-inverted-default": {
@@ -22226,14 +24751,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-label-gen-ai": {
           "$description": "The default color for labels indicating that content is produced by generative AI.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#bf80ff",
+            "light": "#7300e5",
           },
         },
         "color-text-layout-toggle": {
@@ -22247,35 +24772,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the app layout toggle button when it's active.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-text-layout-toggle-hover": {
           "$description": "The color of the app layout toggle button on hover.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-layout-toggle-selected": {
           "$description": "The color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-link-default": {
           "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-link-hover": {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-notification-default": {
@@ -22324,77 +24849,77 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The text color of the active segment in a segmented control.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-segment-default": {
           "$description": "The text color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-segment-hover": {
           "$description": "The text color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-status-error": {
           "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-text-status-inactive": {
           "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-status-info": {
           "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-status-success": {
           "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-text-status-warning": {
           "$description": "The color of warning icons.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-text-toggle-button-icon-pressed": {
           "$description": "The pressed text color of icon toggle buttons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-toggle-button-normal-pressed": {
           "$description": "The pressed text color of normal toggle buttons.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-top-navigation-title": {
           "$description": "The color of the title in the top navigation.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "font-family-base": {
@@ -23294,8 +25819,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -25819,8 +28344,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -28344,8 +30869,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -30869,8 +33394,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#75cfff",
+            "light": "#75cfff",
           },
         },
         "color-border-item-focused": {
@@ -33394,8 +35919,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#75cfff",
+            "light": "#75cfff",
           },
         },
         "color-border-item-focused": {
@@ -35919,8 +38444,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-border-input-focused": {
       "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
       "$value": {
-        "dark": "#b8e7ff",
-        "light": "#002b66",
+        "dark": "#75cfff",
+        "light": "#006ce0",
       },
     },
     "color-border-item-focused": {
diff --git a/src/app-layout-toolbar/index.tsx b/src/app-layout-toolbar/index.tsx
index 3a043e4d3d..a5fb22e0c0 100644
--- a/src/app-layout-toolbar/index.tsx
+++ b/src/app-layout-toolbar/index.tsx
@@ -11,6 +11,7 @@ import AppLayoutToolbarInternal from '../app-layout/visual-refresh-toolbar';
 import { AppLayoutToolbarPublicContext } from '../app-layout/visual-refresh-toolbar/contexts';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
+import VisualContext from '../internal/components/visual-context';
 import { NonCancelableCustomEvent } from '../internal/events';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { useControllable } from '../internal/hooks/use-controllable';
@@ -129,7 +130,9 @@ const AppLayoutToolbar = React.forwardRef(
     return (
       <AppLayoutToolbarPublicContext.Provider value={true}>
         <div ref={useMergeRefs(__internalRootRef, rootRef)} {...baseProps}>
-          <AppLayoutToolbarInternal ref={ref} {...props} />
+          <VisualContext contextName="app-layout-toolbar">
+            <AppLayoutToolbarInternal ref={ref} {...props} />
+          </VisualContext>
         </div>
       </AppLayoutToolbarPublicContext.Provider>
     );
diff --git a/src/code-editor/styles.scss b/src/code-editor/styles.scss
index 842f5613d5..309a10d9c0 100644
--- a/src/code-editor/styles.scss
+++ b/src/code-editor/styles.scss
@@ -13,8 +13,8 @@
 .code-editor {
   @include styles.styles-reset;
   display: block;
-  border-block: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-inline: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-code-editor-default;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-code-editor-default;
   border-start-start-radius: awsui.$border-radius-code-editor;
   border-start-end-radius: awsui.$border-radius-code-editor;
   border-end-start-radius: awsui.$border-radius-code-editor;
diff --git a/src/input/styles.scss b/src/input/styles.scss
index 88bd151b32..f4c884d0e3 100644
--- a/src/input/styles.scss
+++ b/src/input/styles.scss
@@ -50,8 +50,8 @@
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
   @include styles.font-body-m;
   block-size: awsui.$size-vertical-input;
 
diff --git a/src/internal/components/button-trigger/styles.scss b/src/internal/components/button-trigger/styles.scss
index 14593a2f69..2127fba1c2 100644
--- a/src/internal/components/button-trigger/styles.scss
+++ b/src/internal/components/button-trigger/styles.scss
@@ -29,8 +29,8 @@ $padding-block-inner-filtering-token: 0px;
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
   min-block-size: awsui.$size-vertical-input;
 
   &.in-filtering-token-root,
diff --git a/src/internal/components/checkbox-icon/index.tsx b/src/internal/components/checkbox-icon/index.tsx
index 231051a2d1..24a6129a3e 100644
--- a/src/internal/components/checkbox-icon/index.tsx
+++ b/src/internal/components/checkbox-icon/index.tsx
@@ -37,9 +37,9 @@ const dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension> =
     viewBox: '0 0 16 16',
     indeterminate: '3.5,8 12.5,8',
     checked: '3.5,8 7,11 12,4',
-    xy: 1,
-    r: 2,
-    size: 14,
+    xy: 0.5,
+    r: 3,
+    size: 15,
   },
 };
 
diff --git a/src/internal/components/checkbox-icon/styles.scss b/src/internal/components/checkbox-icon/styles.scss
index 3062553095..4601d62089 100644
--- a/src/internal/components/checkbox-icon/styles.scss
+++ b/src/internal/components/checkbox-icon/styles.scss
@@ -16,7 +16,7 @@
   > .styled-box {
     fill: awsui.$color-background-control-default;
     stroke: awsui.$color-border-control-default;
-    stroke-width: styles.$control-border-width;
+    stroke-width: awsui.$border-width-form-control;
     @include styles.with-motion {
       transition:
         fill awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index 0c77e8e5d9..26747f5900 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -114,14 +114,14 @@
   // See focus-highlight above.
   outline: 2px dotted transparent;
 
-  border-block: constants.$control-border-width solid awsui.$color-border-input-focused;
-  border-inline: constants.$control-border-width solid awsui.$color-border-input-focused;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-focused;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-focused;
   border-start-start-radius: $border-radius;
   border-start-end-radius: $border-radius;
   border-end-start-radius: $border-radius;
   border-end-end-radius: $border-radius;
 
-  box-shadow: foundation.$box-shadow-focused-light;
+  box-shadow: inset foundation.$box-shadow-focused-light;
 }
 
 @mixin form-disabled-element {
diff --git a/src/radio-group/radio-button.tsx b/src/radio-group/radio-button.tsx
index 7a7a55d1f7..a2e521950f 100644
--- a/src/radio-group/radio-button.tsx
+++ b/src/radio-group/radio-button.tsx
@@ -83,7 +83,7 @@ export default React.forwardRef(function RadioButton(
               [styles['styled-circle-disabled']]: disabled,
               [styles['styled-circle-readonly']]: readOnly,
             })}
-            strokeWidth={isVisualRefresh ? 12 : 8}
+            strokeWidth={8}
             cx={50}
             cy={50}
             r={isVisualRefresh ? 44 : 46}
diff --git a/src/textarea/styles.scss b/src/textarea/styles.scss
index f4b9a96f42..5b19667904 100644
--- a/src/textarea/styles.scss
+++ b/src/textarea/styles.scss
@@ -32,8 +32,8 @@
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
   @include styles.font-body-m;
 
   &.textarea-readonly {
diff --git a/src/tiles/styles.scss b/src/tiles/styles.scss
index eb9ac4483c..0b40115b3d 100644
--- a/src/tiles/styles.scss
+++ b/src/tiles/styles.scss
@@ -29,8 +29,8 @@ $gutter: awsui.$space-tile-gutter;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
   border-start-start-radius: awsui.$border-radius-tiles;
   border-start-end-radius: awsui.$border-radius-tiles;
   border-end-start-radius: awsui.$border-radius-tiles;
@@ -58,9 +58,10 @@ $gutter: awsui.$space-tile-gutter;
   }
 
   &.selected {
-    border-block: styles.$control-border-width solid awsui.$color-border-item-selected;
-    border-inline: styles.$control-border-width solid awsui.$color-border-item-selected;
+    border-block: awsui.$border-width-form-control solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-width-form-control solid awsui.$color-border-item-selected;
     background: awsui.$color-background-item-selected;
+    box-shadow: inset 0 0 0 awsui.$border-width-form-control awsui.$color-border-item-focused;
   }
 
   &.disabled {
diff --git a/style-dictionary/utils/contexts.ts b/style-dictionary/utils/contexts.ts
index a4dc6b0137..738cdcfd06 100644
--- a/style-dictionary/utils/contexts.ts
+++ b/style-dictionary/utils/contexts.ts
@@ -57,3 +57,11 @@ export const createAppLayoutToolsDrawerTriggerContext = (tokens: TokenCategory<s
     tokens,
   };
 };
+
+export const createAppLayoutToolbarContext = (tokens: TokenCategory<string, GlobalValue | ModeValue>) => {
+  return {
+    id: 'app-layout-toolbar',
+    selector: '.awsui-context-app-layout-toolbar',
+    tokens,
+  };
+};
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 872d68ef7c..440662de64 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -19,6 +19,7 @@ export type ColorPaletteTokenName =
   | 'colorGreen600'
   | 'colorGreen700'
   | 'colorGreen900'
+  | 'colorGrey50'
   | 'colorGrey100'
   | 'colorGrey125'
   | 'colorGrey150'
@@ -585,6 +586,7 @@ export type BordersTokenName =
   | 'borderLinkFocusRingShadowSpread'
   | 'borderWidthAlert'
   | 'borderWidthField'
+  | 'borderWidthFormControl'
   | 'borderWidthPopover';
 export type MotionTokenName =
   | 'motionDurationExtraFast'
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index 0fc4bd4a73..9c0df01d87 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -7,7 +7,7 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderCodeEditorStatusDividerWidth: '{borderDividerSectionWidth}',
   borderContainerStickyWidth: '0px',
   borderContainerTopWidth: '0px',
-  borderControlFocusRingShadowSpread: '0px',
+  borderControlFocusRingShadowSpread: '1px',
   borderControlInvalidFocusRingShadowSpread: '2px',
   borderDividerListWidth: '1px',
   borderDividerSectionWidth: '1px',
@@ -43,5 +43,6 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderLinkFocusRingShadowSpread: '2px',
   borderWidthAlert: '2px',
   borderWidthField: '2px',
+  borderWidthFormControl: '1px',
   borderWidthPopover: '2px',
 };
diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index fe65b622d4..8774201f0f 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -21,6 +21,7 @@ export const tokens: StyleDictionary.ColorPaletteDictionary = {
   colorGreen600: '#00802f',
   colorGreen700: '#00471e',
   colorGreen900: '#001401',
+  colorGrey50: '#fcfcfd',
   colorGrey100: '#f9f9fa',
   colorGrey125: '#f6f6f9',
   colorGrey150: '#f3f3f7',
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 1dc58622a7..bdf8966ae1 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -140,7 +140,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderEditableCellHover: '{colorBorderDropdownItemHover}',
   colorBorderInputDefault: { light: '{colorGrey500}', dark: '{colorGrey550}' },
   colorBorderInputDisabled: '{colorBackgroundInputDisabled}',
-  colorBorderInputFocused: { light: '{colorBlue800}', dark: '{colorBlue300}' },
+  colorBorderInputFocused: { light: '{colorBlue600}', dark: '{colorBlue400}' },
   colorBorderItemFocused: { light: '{colorBlue600}', dark: '{colorBlue500}' },
   colorBorderDropdownItemFocused: { light: '{colorGrey600}', dark: '{colorGrey300}' },
   colorBorderItemPlaceholder: '{colorBorderItemSelected}',
diff --git a/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts b/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts
new file mode 100644
index 0000000000..1d2a6c2fc4
--- /dev/null
+++ b/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts
@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
+
+const tokens = {
+  colorBackgroundLayoutMain: { light: '{colorGrey50}', dark: '{colorGrey850}' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
+  merge({}, parentTokens, { ...tokens })
+);
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/visual-refresh/index.ts b/style-dictionary/visual-refresh/index.ts
index 5477497457..17fb2a16f1 100644
--- a/style-dictionary/visual-refresh/index.ts
+++ b/style-dictionary/visual-refresh/index.ts
@@ -4,6 +4,7 @@ import { ThemeBuilder } from '@cloudscape-design/theming-build';
 
 import {
   createAlertContext,
+  createAppLayoutToolbarContext,
   createCompactTableContext,
   createFlashbarContext,
   createFlashbarWarningContext,
@@ -45,6 +46,7 @@ export async function buildVisualRefresh(builder: ThemeBuilder) {
   builder.addContext(createFlashbarContext((await import('./contexts/flashbar.js')).tokens));
   builder.addContext(createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens));
   builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens));
+  builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens));
   builder.addContext({
     id: 'alert-header',
     selector: '.awsui-context-content-header .awsui-context-alert',

From c20087ae184eeef6b0e8c6174c9135fda6b5d349 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 26 Mar 2025 18:39:46 +0100
Subject: [PATCH 11/35] update with consolidated tech strategy

---
 .../__snapshots__/themes.test.ts.snap         | 32 ++++++++++++-------
 .../__snapshots__/design-tokens.test.ts.snap  | 18 +++++------
 src/code-editor/styles.scss                   |  4 +--
 src/input/styles.scss                         |  4 +--
 .../components/button-trigger/styles.scss     |  4 +--
 .../components/checkbox-icon/styles.scss      |  2 +-
 src/internal/styles/forms/constants.scss      |  2 +-
 src/internal/styles/forms/mixins.scss         |  8 ++---
 src/prompt-input/styles.scss                  |  4 +--
 src/select/parts/styles.scss                  |  4 +--
 src/textarea/styles.scss                      |  4 +--
 src/tiles/styles.scss                         | 10 +++---
 src/token-group/mixins.scss                   |  4 +--
 style-dictionary/utils/token-names.ts         |  3 +-
 style-dictionary/visual-refresh/borders.ts    |  5 +--
 15 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 9198b591f8..403ca152f4 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -41,9 +41,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
-  "border-width-form-control": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
@@ -707,9 +708,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
-  "border-width-form-control": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff5d64",
@@ -1373,9 +1375,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
-  "border-width-form-control": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
@@ -2039,9 +2042,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
-  "border-width-form-control": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
@@ -2705,9 +2709,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
-  "border-width-form-control": "1px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#db0000",
@@ -3371,9 +3376,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
-  "border-width-form-control": "1px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#db0000",
@@ -4037,9 +4043,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
-  "border-width-form-control": "1px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff7a7a",
@@ -4703,9 +4710,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
-  "border-width-form-control": "1px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff7a7a",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 24f86e23f9..9ca55cd35c 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -17759,7 +17759,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20284,7 +20284,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -22809,7 +22809,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -25334,7 +25334,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -27859,7 +27859,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -30384,7 +30384,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -32909,7 +32909,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -35434,7 +35434,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -37959,7 +37959,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "2px",
+      "$value": "1px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
diff --git a/src/code-editor/styles.scss b/src/code-editor/styles.scss
index 309a10d9c0..096b4783d4 100644
--- a/src/code-editor/styles.scss
+++ b/src/code-editor/styles.scss
@@ -13,8 +13,8 @@
 .code-editor {
   @include styles.styles-reset;
   display: block;
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-code-editor-default;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-code-editor-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
   border-start-start-radius: awsui.$border-radius-code-editor;
   border-start-end-radius: awsui.$border-radius-code-editor;
   border-end-start-radius: awsui.$border-radius-code-editor;
diff --git a/src/input/styles.scss b/src/input/styles.scss
index f4c884d0e3..ca0ccccd4d 100644
--- a/src/input/styles.scss
+++ b/src/input/styles.scss
@@ -50,8 +50,8 @@
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   @include styles.font-body-m;
   block-size: awsui.$size-vertical-input;
 
diff --git a/src/internal/components/button-trigger/styles.scss b/src/internal/components/button-trigger/styles.scss
index 2127fba1c2..4235be45e9 100644
--- a/src/internal/components/button-trigger/styles.scss
+++ b/src/internal/components/button-trigger/styles.scss
@@ -29,8 +29,8 @@ $padding-block-inner-filtering-token: 0px;
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   min-block-size: awsui.$size-vertical-input;
 
   &.in-filtering-token-root,
diff --git a/src/internal/components/checkbox-icon/styles.scss b/src/internal/components/checkbox-icon/styles.scss
index 4601d62089..120f7a5bc3 100644
--- a/src/internal/components/checkbox-icon/styles.scss
+++ b/src/internal/components/checkbox-icon/styles.scss
@@ -16,7 +16,7 @@
   > .styled-box {
     fill: awsui.$color-background-control-default;
     stroke: awsui.$color-border-control-default;
-    stroke-width: awsui.$border-width-form-control;
+    stroke-width: awsui.$border-width-field;
     @include styles.with-motion {
       transition:
         fill awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
diff --git a/src/internal/styles/forms/constants.scss b/src/internal/styles/forms/constants.scss
index 30b75e5571..b4fb849bdb 100644
--- a/src/internal/styles/forms/constants.scss
+++ b/src/internal/styles/forms/constants.scss
@@ -6,7 +6,7 @@
 @use '../utils/theming' as theming;
 @use '../tokens' as awsui;
 
-$control-border-width: awsui.$border-width-field;
+$control-border-width: awsui.$border-width-button;
 $control-border-radius: awsui.$border-radius-input;
 
 // Use for options in dropdowns
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index 26747f5900..99df14c084 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -114,8 +114,8 @@
   // See focus-highlight above.
   outline: 2px dotted transparent;
 
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-focused;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-focused;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-focused;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-focused;
   border-start-start-radius: $border-radius;
   border-start-end-radius: $border-radius;
   border-end-start-radius: $border-radius;
@@ -238,8 +238,8 @@
     inset-inline-start: 0px;
     inset-inline-end: 0px;
     background-color: transparent;
-    border-block: awsui.$border-width-field solid awsui.$color-border-dropdown-container;
-    border-inline: awsui.$border-width-field solid awsui.$color-border-dropdown-container;
+    border-block: awsui.$border-width-popover solid awsui.$color-border-dropdown-container;
+    border-inline: awsui.$border-width-popover solid awsui.$color-border-dropdown-container;
     border-start-start-radius: awsui.$border-radius-dropdown;
     border-start-end-radius: awsui.$border-radius-dropdown;
     border-end-start-radius: awsui.$border-radius-dropdown;
diff --git a/src/prompt-input/styles.scss b/src/prompt-input/styles.scss
index bca6623a76..8a6022b24f 100644
--- a/src/prompt-input/styles.scss
+++ b/src/prompt-input/styles.scss
@@ -20,8 +20,8 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
 
   background-color: awsui.$color-background-input-default;
 
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
 
   &.textarea-readonly {
     @include styles.form-readonly-element;
diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
index 797cda2ee4..0c90cab688 100644
--- a/src/select/parts/styles.scss
+++ b/src/select/parts/styles.scss
@@ -88,8 +88,8 @@ $inlineLabel-border-radius: 2px;
     min-inline-size: max-content;
     block-size: 18px;
 
-    border-block: awsui.$border-width-field solid awsui.$color-border-item-selected;
-    border-inline: awsui.$border-width-field solid awsui.$color-border-item-selected;
+    border-block: awsui.$border-width-token solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-width-token solid awsui.$color-border-item-selected;
     padding-block: 0;
     padding-inline: awsui.$space-xxs;
     background: awsui.$color-background-item-selected;
diff --git a/src/textarea/styles.scss b/src/textarea/styles.scss
index 5b19667904..7e84d3801f 100644
--- a/src/textarea/styles.scss
+++ b/src/textarea/styles.scss
@@ -32,8 +32,8 @@
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   @include styles.font-body-m;
 
   &.textarea-readonly {
diff --git a/src/tiles/styles.scss b/src/tiles/styles.scss
index 0b40115b3d..52908b26e2 100644
--- a/src/tiles/styles.scss
+++ b/src/tiles/styles.scss
@@ -29,8 +29,8 @@ $gutter: awsui.$space-tile-gutter;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  border-block: awsui.$border-width-form-control solid awsui.$color-border-input-default;
-  border-inline: awsui.$border-width-form-control solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   border-start-start-radius: awsui.$border-radius-tiles;
   border-start-end-radius: awsui.$border-radius-tiles;
   border-end-start-radius: awsui.$border-radius-tiles;
@@ -58,10 +58,10 @@ $gutter: awsui.$space-tile-gutter;
   }
 
   &.selected {
-    border-block: awsui.$border-width-form-control solid awsui.$color-border-item-selected;
-    border-inline: awsui.$border-width-form-control solid awsui.$color-border-item-selected;
+    border-block: awsui.$border-width-field solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-width-field solid awsui.$color-border-item-selected;
     background: awsui.$color-background-item-selected;
-    box-shadow: inset 0 0 0 awsui.$border-width-form-control awsui.$color-border-item-focused;
+    box-shadow: inset 0 0 0 awsui.$border-width-field awsui.$color-border-item-focused;
   }
 
   &.disabled {
diff --git a/src/token-group/mixins.scss b/src/token-group/mixins.scss
index fdfab6f093..b7916cf207 100644
--- a/src/token-group/mixins.scss
+++ b/src/token-group/mixins.scss
@@ -9,8 +9,8 @@
 @mixin token-box-styles {
   position: relative;
   block-size: 100%;
-  border-block: awsui.$border-width-field solid constants.$token-border-color;
-  border-inline: awsui.$border-width-field solid constants.$token-border-color;
+  border-block: awsui.$border-width-token solid constants.$token-border-color;
+  border-inline: awsui.$border-width-token solid constants.$token-border-color;
   padding-block-start: styles.$control-padding-vertical;
   padding-block-end: styles.$control-padding-vertical;
   padding-inline-start: styles.$control-padding-horizontal;
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 440662de64..56166e9c58 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -586,7 +586,8 @@ export type BordersTokenName =
   | 'borderLinkFocusRingShadowSpread'
   | 'borderWidthAlert'
   | 'borderWidthField'
-  | 'borderWidthFormControl'
+  | 'borderWidthButton'
+  | 'borderWidthToken'
   | 'borderWidthPopover';
 export type MotionTokenName =
   | 'motionDurationExtraFast'
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index 9c0df01d87..26f9fff099 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -42,7 +42,8 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderLinkFocusRingOutline: '0',
   borderLinkFocusRingShadowSpread: '2px',
   borderWidthAlert: '2px',
-  borderWidthField: '2px',
-  borderWidthFormControl: '1px',
+  borderWidthField: '1px',
+  borderWidthButton: '2px',
+  borderWidthToken: '2px',
   borderWidthPopover: '2px',
 };

From 2b9a4a4ebe4fad8c61dd91fd0a9da16871f268d6 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 28 Mar 2025 16:37:00 +0100
Subject: [PATCH 12/35] move visual context to inner part

---
 .../full-page-cards.page.tsx                  | 110 ++++++++++++++++
 .../full-page-table.page.tsx                  |   1 +
 .../__snapshots__/themes.test.ts.snap         |   4 +-
 src/app-layout-toolbar/index.tsx              |   5 +-
 .../visual-refresh-toolbar/skeleton/index.tsx | 121 +++++++++---------
 src/segmented-control/styles.scss             |   4 +-
 style-dictionary/visual-refresh/colors.ts     |   2 +-
 7 files changed, 179 insertions(+), 68 deletions(-)
 create mode 100644 pages/app-layout-toolbar/full-page-cards.page.tsx

diff --git a/pages/app-layout-toolbar/full-page-cards.page.tsx b/pages/app-layout-toolbar/full-page-cards.page.tsx
new file mode 100644
index 0000000000..3103eeaa13
--- /dev/null
+++ b/pages/app-layout-toolbar/full-page-cards.page.tsx
@@ -0,0 +1,110 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import range from 'lodash/range';
+
+import { AppLayoutToolbar } from '~components';
+import Button from '~components/button';
+import Cards, { CardsProps } from '~components/cards';
+import Header from '~components/header';
+import Link from '~components/link';
+
+import * as toolsContent from '../app-layout//utils/tools-content';
+import { Breadcrumbs, Footer, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks';
+import labels from '../app-layout/utils/labels';
+import ScreenshotArea from '../utils/screenshot-area';
+
+interface Item {
+  number: number;
+  text: string;
+}
+
+function createSimpleItems(count: number) {
+  const texts = ['One', 'Two', 'Three', 'Four', 'Five'];
+  return range(count).map(number => ({ number, text: texts[number % texts.length] }));
+}
+
+const cardDefinition: CardsProps.CardDefinition<Item> = {
+  header: item => item.text,
+  sections: [
+    {
+      id: 'description',
+      header: 'Number',
+      content: item => item.number,
+    },
+    {
+      id: 'type',
+      header: 'Text',
+      content: item => item.text,
+    },
+  ],
+};
+
+const config: CardsProps['cardsPerRow'] = [
+  {
+    cards: 1,
+  },
+  {
+    minWidth: 400,
+    cards: 2,
+  },
+  {
+    cards: 3,
+    minWidth: 700,
+  },
+  {
+    cards: 4,
+    minWidth: 1000,
+  },
+];
+
+const items = createSimpleItems(16);
+
+export default function () {
+  const [toolsOpen, setToolsOpen] = useState(false);
+  const [selectedTool, setSelectedTool] = useState<keyof typeof toolsContent>('long');
+
+  function openHelp(article: keyof typeof toolsContent) {
+    setToolsOpen(true);
+    setSelectedTool(article);
+  }
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayoutToolbar
+        ariaLabels={labels}
+        breadcrumbs={<Breadcrumbs />}
+        navigation={<Navigation />}
+        contentType="cards"
+        tools={<Tools>{toolsContent[selectedTool]}</Tools>}
+        toolsOpen={toolsOpen}
+        onToolsChange={({ detail }) => setToolsOpen(detail.open)}
+        notifications={<Notifications />}
+        content={
+          <Cards<Item>
+            items={items}
+            cardDefinition={cardDefinition}
+            stickyHeader={true}
+            variant="full-page"
+            header={
+              <Header
+                variant="awsui-h1-sticky"
+                description="Demo page with footer"
+                info={
+                  <Link variant="info" onFollow={() => openHelp('long')}>
+                    Long help text
+                  </Link>
+                }
+                actions={<Button variant="primary">Create</Button>}
+              >
+                Sticky Scrollbar Example
+              </Header>
+            }
+            cardsPerRow={config}
+          />
+        }
+      />
+      <Footer legacyConsoleNav={false} />
+    </ScreenshotArea>
+  );
+}
diff --git a/pages/app-layout-toolbar/full-page-table.page.tsx b/pages/app-layout-toolbar/full-page-table.page.tsx
index d6b5581478..006ef18458 100644
--- a/pages/app-layout-toolbar/full-page-table.page.tsx
+++ b/pages/app-layout-toolbar/full-page-table.page.tsx
@@ -58,6 +58,7 @@ export default function () {
             variant="full-page"
             columnDefinitions={columnsConfig}
             items={items}
+            stripedRows={true}
           />
         }
       />
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 403ca152f4..00f8260c95 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -2842,7 +2842,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#b4b4bb",
+  "color-border-layout": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -3509,7 +3509,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#b4b4bb",
+  "color-border-layout": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
diff --git a/src/app-layout-toolbar/index.tsx b/src/app-layout-toolbar/index.tsx
index a5fb22e0c0..3a043e4d3d 100644
--- a/src/app-layout-toolbar/index.tsx
+++ b/src/app-layout-toolbar/index.tsx
@@ -11,7 +11,6 @@ import AppLayoutToolbarInternal from '../app-layout/visual-refresh-toolbar';
 import { AppLayoutToolbarPublicContext } from '../app-layout/visual-refresh-toolbar/contexts';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
-import VisualContext from '../internal/components/visual-context';
 import { NonCancelableCustomEvent } from '../internal/events';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { useControllable } from '../internal/hooks/use-controllable';
@@ -130,9 +129,7 @@ const AppLayoutToolbar = React.forwardRef(
     return (
       <AppLayoutToolbarPublicContext.Provider value={true}>
         <div ref={useMergeRefs(__internalRootRef, rootRef)} {...baseProps}>
-          <VisualContext contextName="app-layout-toolbar">
-            <AppLayoutToolbarInternal ref={ref} {...props} />
-          </VisualContext>
+          <AppLayoutToolbarInternal ref={ref} {...props} />
         </div>
       </AppLayoutToolbarPublicContext.Provider>
     );
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
index 05deec3818..38115018e0 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import VisualContext from '../../../internal/components/visual-context';
 import customCssProps from '../../../internal/generated/custom-css-properties';
 import { useMobile } from '../../../internal/hooks/use-mobile';
 import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
@@ -76,73 +77,75 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
     const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
     const anyPanelOpen = navigationOpen || toolsOpen;
     return (
-      <div
-        ref={ref}
-        className={clsx(styles.root, testutilStyles.root, {
-          [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
-          [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
-        })}
-        style={{
-          minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
-          [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
-          [customCssProps.navigationWidth]: `${navigationWidth}px`,
-          [customCssProps.toolsWidth]: `${toolsWidth}px`,
-        }}
-      >
-        {toolbar}
-        {navigation && (
-          <div
-            className={clsx(
-              styles.navigation,
-              !navigationOpen && styles['panel-hidden'],
-              toolsOpen && styles['unfocusable-mobile'],
-              !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']
-            )}
-          >
-            {navigation}
-          </div>
-        )}
-        <main className={clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'])}>
-          {notifications && (
+      <VisualContext contextName="app-layout-toolbar">
+        <div
+          ref={ref}
+          className={clsx(styles.root, testutilStyles.root, {
+            [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
+            [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
+          })}
+          style={{
+            minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
+            [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
+            [customCssProps.navigationWidth]: `${navigationWidth}px`,
+            [customCssProps.toolsWidth]: `${toolsWidth}px`,
+          }}
+        >
+          {toolbar}
+          {navigation && (
             <div
               className={clsx(
-                styles['notifications-background'],
-                headerVariant === 'high-contrast' && highContrastHeaderClassName
+                styles.navigation,
+                !navigationOpen && styles['panel-hidden'],
+                toolsOpen && styles['unfocusable-mobile'],
+                !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']
               )}
-            ></div>
+            >
+              {navigation}
+            </div>
           )}
-          {notifications}
-          <div
-            className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}
-            style={style}
-          >
-            {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}
-            <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>
-          </div>
-          {bottomSplitPanel && (
-            <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>
-              {bottomSplitPanel}
+          <main className={clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'])}>
+            {notifications && (
+              <div
+                className={clsx(
+                  styles['notifications-background'],
+                  headerVariant === 'high-contrast' && highContrastHeaderClassName
+                )}
+              ></div>
+            )}
+            {notifications}
+            <div
+              className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}
+              style={style}
+            >
+              {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}
+              <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>
+            </div>
+            {bottomSplitPanel && (
+              <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>
+                {bottomSplitPanel}
+              </div>
+            )}
+          </main>
+          {sideSplitPanel && (
+            <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>
+              {sideSplitPanel}
             </div>
           )}
-        </main>
-        {sideSplitPanel && (
-          <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>
-            {sideSplitPanel}
+          <div
+            className={clsx(
+              styles.tools,
+              !toolsOpen && styles['panel-hidden'],
+              sharedStyles['with-motion-horizontal'],
+              navigationOpen && !toolsOpen && styles['unfocusable-mobile'],
+              toolsOpen && styles['tools-open']
+            )}
+          >
+            {tools}
           </div>
-        )}
-        <div
-          className={clsx(
-            styles.tools,
-            !toolsOpen && styles['panel-hidden'],
-            sharedStyles['with-motion-horizontal'],
-            navigationOpen && !toolsOpen && styles['unfocusable-mobile'],
-            toolsOpen && styles['tools-open']
-          )}
-        >
-          {tools}
+          <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>
         </div>
-        <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>
-      </div>
+      </VisualContext>
     );
   }
 );
diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
index d9cea75719..86ef7b608d 100644
--- a/src/segmented-control/styles.scss
+++ b/src/segmented-control/styles.scss
@@ -25,8 +25,8 @@
 .segment-part {
   display: -ms-inline-grid;
   display: inline-grid;
-  border-inline: solid awsui.$border-width-field awsui.$color-border-input-default;
-  border-block: solid awsui.$border-width-field awsui.$color-border-input-default;
+  border-inline: solid awsui.$border-width-button awsui.$color-border-input-default;
+  border-block: solid awsui.$border-width-button awsui.$color-border-input-default;
   border-start-start-radius: awsui.$border-radius-button;
   border-start-end-radius: awsui.$border-radius-button;
   border-end-start-radius: awsui.$border-radius-button;
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index bdf8966ae1..3831571bb6 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -145,7 +145,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderDropdownItemFocused: { light: '{colorGrey600}', dark: '{colorGrey300}' },
   colorBorderItemPlaceholder: '{colorBorderItemSelected}',
   colorBorderItemSelected: { light: '{colorBlue600}', dark: '{colorBlue500}' },
-  colorBorderLayout: { light: '{colorGrey400}', dark: '{colorGrey600}' },
+  colorBorderLayout: { light: '{colorGrey350}', dark: '{colorGrey600}' },
   colorBorderNotificationStackBar: '{colorGrey700}',
   colorBorderPanelHeader: '{colorBorderDividerDefault}',
   colorBorderPopover: { light: '{colorGrey400}', dark: '{colorGrey550}' },

From 6ba68394697ec86f4c341ea941167356625547e9 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 2 Apr 2025 14:24:48 +0200
Subject: [PATCH 13/35] fix inlineLabelText background issue

---
 .../full-page-table.page.tsx                  | 21 ++++++++++++++++++-
 src/select/parts/styles.scss                  |  2 +-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/pages/app-layout-toolbar/full-page-table.page.tsx b/pages/app-layout-toolbar/full-page-table.page.tsx
index 006ef18458..ff9ecaee20 100644
--- a/pages/app-layout-toolbar/full-page-table.page.tsx
+++ b/pages/app-layout-toolbar/full-page-table.page.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useContext, useState } from 'react';
 
-import { AppLayoutToolbar, Button, Header, Link, Table } from '~components';
+import { AppLayoutToolbar, Button, Header, Link, Select, Table } from '~components';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import { Breadcrumbs, Footer, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks';
@@ -26,6 +26,8 @@ export default function () {
     setSelectedTool(article);
   }
 
+  const [selectedOption, setSelectedOption] = React.useState({ label: 'Option 1', value: '1' });
+
   return (
     <ScreenshotArea gutters={false}>
       <AppLayoutToolbar
@@ -40,6 +42,23 @@ export default function () {
         stickyNotifications={urlParams.stickyNotifications}
         content={
           <Table<Instance>
+            filter={
+              <Select
+                selectedOption={selectedOption}
+                onChange={({ detail }) =>
+                  setSelectedOption({
+                    label: detail.selectedOption.label || '',
+                    value: detail.selectedOption.value || '',
+                  })
+                }
+                options={[
+                  { label: 'Option 1', value: '1' },
+                  { label: 'Option 2', value: '2' },
+                  { label: 'Option 3', value: '3' },
+                ]}
+                inlineLabelText="Engine"
+              />
+            }
             header={
               <Header
                 variant="awsui-h1-sticky"
diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
index 0c90cab688..7da80a7f80 100644
--- a/src/select/parts/styles.scss
+++ b/src/select/parts/styles.scss
@@ -132,7 +132,7 @@ $inlineLabel-border-radius: 2px;
 }
 
 .inline-label {
-  background: awsui.$color-background-container-header;
+  background: awsui.$color-background-layout-main;
   border-start-start-radius: $inlineLabel-border-radius;
   border-start-end-radius: $inlineLabel-border-radius;
   border-end-start-radius: $inlineLabel-border-radius;

From d2fd93ea04ecb7f4822d9d582aaf67dee88c2627 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 2 Apr 2025 17:24:26 +0200
Subject: [PATCH 14/35] fix inline label background issue

---
 .../__snapshots__/themes.test.ts.snap         |   44 +-
 .../__snapshots__/design-tokens.test.ts.snap  | 2799 +----------------
 src/select/parts/styles.scss                  |    2 +-
 style-dictionary/visual-refresh/colors.ts     |    2 +-
 4 files changed, 153 insertions(+), 2694 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 00f8260c95..6a4497519b 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -41,10 +41,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
-  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
@@ -708,10 +706,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
-  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff5d64",
@@ -1375,10 +1371,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
-  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
@@ -2042,10 +2036,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
-  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
@@ -2674,7 +2666,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -2709,10 +2701,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-button": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#db0000",
@@ -2838,11 +2828,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#006ce0",
+  "color-border-input-focused": "#002b66",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#c6c6cd",
+  "color-border-layout": "#b4b4bb",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -3341,7 +3331,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -3376,10 +3366,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-button": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#db0000",
@@ -3505,11 +3493,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#006ce0",
+  "color-border-input-focused": "#002b66",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#c6c6cd",
+  "color-border-layout": "#b4b4bb",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -4008,7 +3996,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4043,10 +4031,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-button": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff7a7a",
@@ -4172,7 +4158,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#75cfff",
+  "color-border-input-focused": "#b8e7ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
@@ -4675,7 +4661,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4710,10 +4696,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-button": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
-  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
   "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff7a7a",
@@ -4839,7 +4823,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#75cfff",
+  "color-border-input-focused": "#b8e7ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 9ca55cd35c..4cf000c1fa 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -17759,7 +17759,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -18244,8 +18244,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -20284,7 +20284,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20413,2553 +20413,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-dropdown-item-default": {
-          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-dropdown-item-filter-match": {
-          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-dropdown-item-hover": {
-          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
-          "$value": {
-            "dark": "#131920",
-            "light": "#131920",
-          },
-        },
-        "color-background-home-header": {
-          "$description": "The background color of the home header, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-background-input-default": {
-          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-input-disabled": {
-          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-item-selected": {
-          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
-          "$value": {
-            "dark": "#001129",
-            "light": "#001129",
-          },
-        },
-        "color-background-layout-main": {
-          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-layout-toggle-active": {
-          "$description": "The background color of the app layout toggle button when it's active.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-layout-toggle-default": {
-          "$description": "The default background color of the app layout toggle button.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-layout-toggle-hover": {
-          "$description": "The background color of the app layout toggle button on hover.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-layout-toggle-selected-active": {
-          "$description": "The background color of the app layout toggle button when it's selected and active.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-layout-toggle-selected-default": {
-          "$description": "The default background color of the app layout toggle button when it's selected.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-layout-toggle-selected-hover": {
-          "$description": "The background color of the app layout toggle button on hover when it's selected.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-background-loading-bar-gen-ai": {
-          "$description": "The background color of gen-ai loading bars.",
-          "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-          },
-        },
-        "color-background-notification-blue": {
-          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-background-notification-green": {
-          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
-          "$value": {
-            "dark": "#00802f",
-            "light": "#00802f",
-          },
-        },
-        "color-background-notification-grey": {
-          "$description": "Background color for grey notifications. For example: grey badges.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-notification-red": {
-          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
-          "$value": {
-            "dark": "#db0000",
-            "light": "#db0000",
-          },
-        },
-        "color-background-notification-severity-critical": {
-          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#870303",
-          },
-        },
-        "color-background-notification-severity-high": {
-          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#ce3311",
-          },
-        },
-        "color-background-notification-severity-low": {
-          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#f2cd54",
-            "light": "#f2cd54",
-          },
-        },
-        "color-background-notification-severity-medium": {
-          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#f89256",
-          },
-        },
-        "color-background-notification-severity-neutral": {
-          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-notification-yellow": {
-          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
-          "$value": {
-            "dark": "#ffe347",
-            "light": "#ffe347",
-          },
-        },
-        "color-background-popover": {
-          "$description": "Background color for the popover container.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-segment-active": {
-          "$description": "The background color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-segment-default": {
-          "$description": "The background color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-background-segment-disabled": {
-          "$description": "The background color of disabled segments in a segmented control.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-segment-hover": {
-          "$description": "The background color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
-          },
-        },
-        "color-background-status-error": {
-          "$description": "The background color of an item in error state. For example: error alerts.",
-          "$value": {
-            "dark": "#1f0000",
-            "light": "#1f0000",
-          },
-        },
-        "color-background-status-info": {
-          "$description": "The background color of an informational item. For example: information alerts.",
-          "$value": {
-            "dark": "#001129",
-            "light": "#001129",
-          },
-        },
-        "color-background-status-success": {
-          "$description": "The background color of an item in success state. For example: success alerts.",
-          "$value": {
-            "dark": "#001401",
-            "light": "#001401",
-          },
-        },
-        "color-background-status-warning": {
-          "$description": "The background color of an item in warning state. For example: warning alerts.",
-          "$value": {
-            "dark": "#191100",
-            "light": "#191100",
-          },
-        },
-        "color-background-toggle-button-normal-pressed": {
-          "$description": "The background color of normal toggle buttons in pressed state.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-toggle-checked-disabled": {
-          "$description": "The background color of checked toggles in disabled state.",
-          "$value": {
-            "dark": "#002b66",
-            "light": "#002b66",
-          },
-        },
-        "color-board-placeholder-active": {
-          "$description": "The color of board placeholder in active state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-board-placeholder-hover": {
-          "$description": "The color of board placeholder in hovered state.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-border-button-normal-active": {
-          "$description": "The border color of normal buttons in active state.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-border-button-normal-default": {
-          "$description": "The border color of normal buttons.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-button-normal-disabled": {
-          "$description": "The border color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-button-normal-hover": {
-          "$description": "The border color of normal buttons in hover state.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-border-button-primary-disabled": {
-          "$description": "The border color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
-          },
-        },
-        "color-border-container-top": {
-          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-border-control-default": {
-          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-border-divider-default": {
-          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-divider-secondary": {
-          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
-          },
-        },
-        "color-border-dropdown-item-focused": {
-          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-dropdown-item-hover": {
-          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-input-default": {
-          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-input-focused": {
-          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-border-item-focused": {
-          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-border-item-selected": {
-          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-segment-active": {
-          "$description": "The border color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-default": {
-          "$description": "The border color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-disabled": {
-          "$description": "The border color of disabled segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-hover": {
-          "$description": "The border color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-status-error": {
-          "$description": "The border color of an item in error state. For example: error alerts.",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#ff7a7a",
-          },
-        },
-        "color-border-status-info": {
-          "$description": "The border color of an informational item. For example: information alerts.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-status-success": {
-          "$description": "The border color of an item in success state. For example: success alerts.",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#2bb534",
-          },
-        },
-        "color-border-status-warning": {
-          "$description": "The border color of an item in warning state. For example: warning alerts.",
-          "$value": {
-            "dark": "#fbd332",
-            "light": "#fbd332",
-          },
-        },
-        "color-border-toggle-button-normal-pressed": {
-          "$description": "The border color of normal toggle buttons in pressed state.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-charts-blue-1-1000": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#b3e4f8",
-            "light": "#01437d",
-          },
-        },
-        "color-charts-blue-1-1100": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#caedfc",
-            "light": "#003c75",
-          },
-        },
-        "color-charts-blue-1-1200": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ddf4ff",
-            "light": "#00366d",
-          },
-        },
-        "color-charts-blue-1-300": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#00819c",
-            "light": "#529ccb",
-          },
-        },
-        "color-charts-blue-1-400": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#0497ba",
-            "light": "#3184c2",
-          },
-        },
-        "color-charts-blue-1-500": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#08aad2",
-            "light": "#0273bb",
-          },
-        },
-        "color-charts-blue-1-600": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#44b9dd",
-            "light": "#0166ab",
-          },
-        },
-        "color-charts-blue-1-700": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#63c6e7",
-            "light": "#015b9d",
-          },
-        },
-        "color-charts-blue-1-800": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#79d2f0",
-            "light": "#015292",
-          },
-        },
-        "color-charts-blue-1-900": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#98dcf5",
-            "light": "#014a87",
-          },
-        },
-        "color-charts-blue-2-1000": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#d2dcff",
-            "light": "#23379b",
-          },
-        },
-        "color-charts-blue-2-1100": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#dfe6ff",
-            "light": "#1f3191",
-          },
-        },
-        "color-charts-blue-2-1200": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ecf0ff",
-            "light": "#1b2b88",
-          },
-        },
-        "color-charts-blue-2-300": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#486de8",
-            "light": "#688ae8",
-          },
-        },
-        "color-charts-blue-2-400": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#6384f5",
-            "light": "#5978e3",
-          },
-        },
-        "color-charts-blue-2-500": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#7698fe",
-            "light": "#4066df",
-          },
-        },
-        "color-charts-blue-2-600": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#8ea9ff",
-            "light": "#3759ce",
-          },
-        },
-        "color-charts-blue-2-700": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#a2b8ff",
-            "light": "#314fbf",
-          },
-        },
-        "color-charts-blue-2-800": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#b1c5ff",
-            "light": "#2c46b1",
-          },
-        },
-        "color-charts-blue-2-900": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#c3d1ff",
-            "light": "#273ea5",
-          },
-        },
-        "color-charts-green-1000": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#c5e7a8",
-            "light": "#104d01",
-          },
-        },
-        "color-charts-green-1100": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#d5efbe",
-            "light": "#0f4601",
-          },
-        },
-        "color-charts-green-1200": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#e4f7d5",
-            "light": "#0d4000",
-          },
-        },
-        "color-charts-green-300": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#48851a",
-            "light": "#67a353",
-          },
-        },
-        "color-charts-green-400": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#5a9b29",
-            "light": "#41902c",
-          },
-        },
-        "color-charts-green-500": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#69ae34",
-            "light": "#1f8104",
-          },
-        },
-        "color-charts-green-600": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#7dbd4c",
-            "light": "#1a7302",
-          },
-        },
-        "color-charts-green-700": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#8fca61",
-            "light": "#176702",
-          },
-        },
-        "color-charts-green-800": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#9fd673",
-            "light": "#145d02",
-          },
-        },
-        "color-charts-green-900": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#b2df8d",
-            "light": "#125502",
-          },
-        },
-        "color-charts-line-axis": {
-          "$description": "Color of the axis lines in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-line-grid": {
-          "$description": "Color of the grid lines in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-line-tick": {
-          "$description": "Color of the tick marks in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-orange-1000": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd4bb",
-            "light": "#732c02",
-          },
-        },
-        "color-charts-orange-1100": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffe1cf",
-            "light": "#692801",
-          },
-        },
-        "color-charts-orange-1200": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffede2",
-            "light": "#602400",
-          },
-        },
-        "color-charts-orange-300": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#c55305",
-            "light": "#e07941",
-          },
-        },
-        "color-charts-orange-400": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#de6923",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-orange-500": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#f27c36",
-            "light": "#bc4d01",
-          },
-        },
-        "color-charts-orange-600": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#a84401",
-          },
-        },
-        "color-charts-orange-700": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#fca572",
-            "light": "#983c02",
-          },
-        },
-        "color-charts-orange-800": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb68b",
-            "light": "#8a3603",
-          },
-        },
-        "color-charts-orange-900": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc6a4",
-            "light": "#7e3103",
-          },
-        },
-        "color-charts-palette-categorical-1": {
-          "$description": "Color #1 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#486de8",
-            "light": "#688ae8",
-          },
-        },
-        "color-charts-palette-categorical-10": {
-          "$description": "Color #10 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#a84401",
-          },
-        },
-        "color-charts-palette-categorical-11": {
-          "$description": "Color #11 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c3d1ff",
-            "light": "#273ea5",
-          },
-        },
-        "color-charts-palette-categorical-12": {
-          "$description": "Color #12 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffdfe8",
-            "light": "#780d35",
-          },
-        },
-        "color-charts-palette-categorical-13": {
-          "$description": "Color #13 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#94e0d0",
-            "light": "#03524a",
-          },
-        },
-        "color-charts-palette-categorical-14": {
-          "$description": "Color #14 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#efe2ff",
-            "light": "#4a238b",
-          },
-        },
-        "color-charts-palette-categorical-15": {
-          "$description": "Color #15 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffc6a4",
-            "light": "#7e3103",
-          },
-        },
-        "color-charts-palette-categorical-16": {
-          "$description": "Color #16 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ecf0ff",
-            "light": "#1b2b88",
-          },
-        },
-        "color-charts-palette-categorical-17": {
-          "$description": "Color #17 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d56889",
-            "light": "#ce567c",
-          },
-        },
-        "color-charts-palette-categorical-18": {
-          "$description": "Color #18 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d7f7f0",
-            "light": "#003e38",
-          },
-        },
-        "color-charts-palette-categorical-19": {
-          "$description": "Color #19 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#a173ea",
-            "light": "#9469d6",
-          },
-        },
-        "color-charts-palette-categorical-2": {
-          "$description": "Color #2 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#e07f9d",
-            "light": "#c33d69",
-          },
-        },
-        "color-charts-palette-categorical-20": {
-          "$description": "Color #20 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffede2",
-            "light": "#602400",
-          },
-        },
-        "color-charts-palette-categorical-21": {
-          "$description": "Color #21 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#7698fe",
-            "light": "#4066df",
-          },
-        },
-        "color-charts-palette-categorical-22": {
-          "$description": "Color #22 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f5a2bb",
-            "light": "#a32952",
-          },
-        },
-        "color-charts-palette-categorical-23": {
-          "$description": "Color #23 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#00b09b",
-            "light": "#0d7d70",
-          },
-        },
-        "color-charts-palette-categorical-24": {
-          "$description": "Color #24 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#cbabfc",
-            "light": "#6b40b2",
-          },
-        },
-        "color-charts-palette-categorical-25": {
-          "$description": "Color #25 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f27c36",
-            "light": "#bc4d01",
-          },
-        },
-        "color-charts-palette-categorical-26": {
-          "$description": "Color #26 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#b1c5ff",
-            "light": "#2c46b1",
-          },
-        },
-        "color-charts-palette-categorical-27": {
-          "$description": "Color #27 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffd1de",
-            "light": "#81143b",
-          },
-        },
-        "color-charts-palette-categorical-28": {
-          "$description": "Color #28 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#77d7c3",
-            "light": "#045b52",
-          },
-        },
-        "color-charts-palette-categorical-29": {
-          "$description": "Color #29 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#e8d5ff",
-            "light": "#512994",
-          },
-        },
-        "color-charts-palette-categorical-3": {
-          "$description": "Color #3 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#018977",
-            "light": "#2ea597",
-          },
-        },
-        "color-charts-palette-categorical-30": {
-          "$description": "Color #30 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffb68b",
-            "light": "#8a3603",
-          },
-        },
-        "color-charts-palette-categorical-31": {
-          "$description": "Color #31 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#dfe6ff",
-            "light": "#1f3191",
-          },
-        },
-        "color-charts-palette-categorical-32": {
-          "$description": "Color #32 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c64a70",
-            "light": "#da7596",
-          },
-        },
-        "color-charts-palette-categorical-33": {
-          "$description": "Color #33 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c2f0e6",
-            "light": "#01443e",
-          },
-        },
-        "color-charts-palette-categorical-34": {
-          "$description": "Color #34 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#8d59de",
-            "light": "#a783e1",
-          },
-        },
-        "color-charts-palette-categorical-35": {
-          "$description": "Color #35 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffe1cf",
-            "light": "#692801",
-          },
-        },
-        "color-charts-palette-categorical-36": {
-          "$description": "Color #36 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#6384f5",
-            "light": "#5978e3",
-          },
-        },
-        "color-charts-palette-categorical-37": {
-          "$description": "Color #37 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#eb92ad",
-            "light": "#b1325c",
-          },
-        },
-        "color-charts-palette-categorical-38": {
-          "$description": "Color #38 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#009d89",
-            "light": "#1c8e81",
-          },
-        },
-        "color-charts-palette-categorical-39": {
-          "$description": "Color #39 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#bf9bf9",
-            "light": "#7749bf",
-          },
-        },
-        "color-charts-palette-categorical-4": {
-          "$description": "Color #4 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#b088f5",
-            "light": "#8456ce",
-          },
-        },
-        "color-charts-palette-categorical-40": {
-          "$description": "Color #40 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#de6923",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-palette-categorical-41": {
-          "$description": "Color #41 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#a2b8ff",
-            "light": "#314fbf",
-          },
-        },
-        "color-charts-palette-categorical-42": {
-          "$description": "Color #42 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffc1d4",
-            "light": "#8b1b42",
-          },
-        },
-        "color-charts-palette-categorical-43": {
-          "$description": "Color #43 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#5fccb7",
-            "light": "#06645a",
-          },
-        },
-        "color-charts-palette-categorical-44": {
-          "$description": "Color #44 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#dfc8ff",
-            "light": "#59309d",
-          },
-        },
-        "color-charts-palette-categorical-45": {
-          "$description": "Color #45 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#fca572",
-            "light": "#983c02",
-          },
-        },
-        "color-charts-palette-categorical-46": {
-          "$description": "Color #46 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d2dcff",
-            "light": "#23379b",
-          },
-        },
-        "color-charts-palette-categorical-47": {
-          "$description": "Color #47 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffecf1",
-            "light": "#6f062f",
-          },
-        },
-        "color-charts-palette-categorical-48": {
-          "$description": "Color #48 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ace9db",
-            "light": "#014b44",
-          },
-        },
-        "color-charts-palette-categorical-49": {
-          "$description": "Color #49 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f5edff",
-            "light": "#431d84",
-          },
-        },
-        "color-charts-palette-categorical-5": {
-          "$description": "Color #5 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c55305",
-            "light": "#e07941",
-          },
-        },
-        "color-charts-palette-categorical-50": {
-          "$description": "Color #50 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffd4bb",
-            "light": "#732c02",
-          },
-        },
-        "color-charts-palette-categorical-6": {
-          "$description": "Color #6 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#8ea9ff",
-            "light": "#3759ce",
-          },
-        },
-        "color-charts-palette-categorical-7": {
-          "$description": "Color #7 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffb0c8",
-            "light": "#962249",
-          },
-        },
-        "color-charts-palette-categorical-8": {
-          "$description": "Color #8 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#40bfa9",
-            "light": "#096f64",
-          },
-        },
-        "color-charts-palette-categorical-9": {
-          "$description": "Color #9 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d6baff",
-            "light": "#6237a7",
-          },
-        },
-        "color-charts-pink-1000": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd1de",
-            "light": "#81143b",
-          },
-        },
-        "color-charts-pink-1100": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffdfe8",
-            "light": "#780d35",
-          },
-        },
-        "color-charts-pink-1200": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffecf1",
-            "light": "#6f062f",
-          },
-        },
-        "color-charts-pink-300": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#c64a70",
-            "light": "#da7596",
-          },
-        },
-        "color-charts-pink-400": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#d56889",
-            "light": "#ce567c",
-          },
-        },
-        "color-charts-pink-500": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#e07f9d",
-            "light": "#c33d69",
-          },
-        },
-        "color-charts-pink-600": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#eb92ad",
-            "light": "#b1325c",
-          },
-        },
-        "color-charts-pink-700": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#f5a2bb",
-            "light": "#a32952",
-          },
-        },
-        "color-charts-pink-800": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb0c8",
-            "light": "#962249",
-          },
-        },
-        "color-charts-pink-900": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc1d4",
-            "light": "#8b1b42",
-          },
-        },
-        "color-charts-purple-1000": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#e8d5ff",
-            "light": "#512994",
-          },
-        },
-        "color-charts-purple-1100": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#efe2ff",
-            "light": "#4a238b",
-          },
-        },
-        "color-charts-purple-1200": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#f5edff",
-            "light": "#431d84",
-          },
-        },
-        "color-charts-purple-300": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#8d59de",
-            "light": "#a783e1",
-          },
-        },
-        "color-charts-purple-400": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#a173ea",
-            "light": "#9469d6",
-          },
-        },
-        "color-charts-purple-500": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#b088f5",
-            "light": "#8456ce",
-          },
-        },
-        "color-charts-purple-600": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#bf9bf9",
-            "light": "#7749bf",
-          },
-        },
-        "color-charts-purple-700": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#cbabfc",
-            "light": "#6b40b2",
-          },
-        },
-        "color-charts-purple-800": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#d6baff",
-            "light": "#6237a7",
-          },
-        },
-        "color-charts-purple-900": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#dfc8ff",
-            "light": "#59309d",
-          },
-        },
-        "color-charts-red-1000": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd2cf",
-            "light": "#7d2105",
-          },
-        },
-        "color-charts-red-1100": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffe0dd",
-            "light": "#721e03",
-          },
-        },
-        "color-charts-red-1200": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffecea",
-            "light": "#671c00",
-          },
-        },
-        "color-charts-red-300": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#ea7158",
-          },
-        },
-        "color-charts-red-400": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#ed5958",
-            "light": "#dc5032",
-          },
-        },
-        "color-charts-red-500": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#d13313",
-          },
-        },
-        "color-charts-red-600": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#ff8a8a",
-            "light": "#ba2e0f",
-          },
-        },
-        "color-charts-red-700": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#ffa09e",
-            "light": "#a82a0c",
-          },
-        },
-        "color-charts-red-800": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb3b0",
-            "light": "#972709",
-          },
-        },
-        "color-charts-red-900": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc4c0",
-            "light": "#892407",
-          },
-        },
-        "color-charts-status-critical": {
-          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#7d2105",
-          },
-        },
-        "color-charts-status-high": {
-          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#ba2e0f",
-          },
-        },
-        "color-charts-status-info": {
-          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
-          "$value": {
-            "dark": "#08aad2",
-            "light": "#3184c2",
-          },
-        },
-        "color-charts-status-low": {
-          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#dfb52c",
-            "light": "#b2911c",
-          },
-        },
-        "color-charts-status-medium": {
-          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-status-neutral": {
-          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-charts-status-positive": {
-          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
-          "$value": {
-            "dark": "#69ae34",
-            "light": "#67a353",
-          },
-        },
-        "color-charts-teal-1000": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ace9db",
-            "light": "#014b44",
-          },
-        },
-        "color-charts-teal-1100": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#c2f0e6",
-            "light": "#01443e",
-          },
-        },
-        "color-charts-teal-1200": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#d7f7f0",
-            "light": "#003e38",
-          },
-        },
-        "color-charts-teal-300": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#018977",
-            "light": "#2ea597",
-          },
-        },
-        "color-charts-teal-400": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#009d89",
-            "light": "#1c8e81",
-          },
-        },
-        "color-charts-teal-500": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#00b09b",
-            "light": "#0d7d70",
-          },
-        },
-        "color-charts-teal-600": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#40bfa9",
-            "light": "#096f64",
-          },
-        },
-        "color-charts-teal-700": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#5fccb7",
-            "light": "#06645a",
-          },
-        },
-        "color-charts-teal-800": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#77d7c3",
-            "light": "#045b52",
-          },
-        },
-        "color-charts-teal-900": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#94e0d0",
-            "light": "#03524a",
-          },
-        },
-        "color-charts-threshold-info": {
-          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
-          },
-        },
-        "color-charts-threshold-negative": {
-          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#db0000",
-          },
-        },
-        "color-charts-threshold-neutral": {
-          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#656871",
-          },
-        },
-        "color-charts-threshold-positive": {
-          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#00802f",
-          },
-        },
-        "color-charts-yellow-1000": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#f7db8a",
-            "light": "#553f03",
-          },
-        },
-        "color-charts-yellow-1100": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#fce5a8",
-            "light": "#4d3901",
-          },
-        },
-        "color-charts-yellow-1200": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffefc9",
-            "light": "#483300",
-          },
-        },
-        "color-charts-yellow-300": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#977001",
-            "light": "#b2911c",
-          },
-        },
-        "color-charts-yellow-400": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#b08400",
-            "light": "#9c7b0b",
-          },
-        },
-        "color-charts-yellow-500": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#c59600",
-            "light": "#8a6b05",
-          },
-        },
-        "color-charts-yellow-600": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#d3a61c",
-            "light": "#7b5f04",
-          },
-        },
-        "color-charts-yellow-700": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#dfb52c",
-            "light": "#6f5504",
-          },
-        },
-        "color-charts-yellow-800": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#eac33a",
-            "light": "#654d03",
-          },
-        },
-        "color-charts-yellow-900": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#f1cf65",
-            "light": "#5d4503",
-          },
-        },
-        "color-drag-placeholder-active": {
-          "$description": "The color of drag placeholder in active state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-drag-placeholder-hover": {
-          "$description": "The color of drag placeholder in hovered state.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-foreground-control-default": {
-          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-foreground-control-disabled": {
-          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-foreground-control-read-only": {
-          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-accent": {
-          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-avatar": {
-          "$description": "The text and icon color of avatars.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-body-default": {
-          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-body-secondary": {
-          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-breadcrumb-current": {
-          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-breadcrumb-icon": {
-          "$description": "The color used for the icon delimiter between breadcrumb items.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-button-normal-active": {
-          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-button-normal-default": {
-          "$description": "The default text color of normal buttons.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-button-normal-disabled": {
-          "$description": "The text color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-button-normal-hover": {
-          "$description": "The hover text color of normal buttons.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-button-primary-active": {
-          "$description": "The active text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-button-primary-default": {
-          "$description": "The default text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-button-primary-disabled": {
-          "$description": "The text color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-button-primary-hover": {
-          "$description": "The hover text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-chat-bubble-incoming": {
-          "$description": "Text color of \`incoming\` chat bubble.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-chat-bubble-outgoing": {
-          "$description": "Text color of \`outgoing\` chat bubble.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-counter": {
-          "$description": "The default color for counters. For example: counters in table headers",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-dropdown-item-default": {
-          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-dropdown-item-disabled": {
-          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-dropdown-item-filter-match": {
-          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-dropdown-item-highlighted": {
-          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-empty": {
-          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-form-default": {
-          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-form-secondary": {
-          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-group-label": {
-          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-heading-default": {
-          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-heading-secondary": {
-          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-home-header-default": {
-          "$description": "The color of the home header's text, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-home-header-secondary": {
-          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-input-disabled": {
-          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-input-placeholder": {
-          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-interactive-active": {
-          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-interactive-default": {
-          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-interactive-disabled": {
-          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-interactive-hover": {
-          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-interactive-inverted-default": {
-          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-interactive-inverted-hover": {
-          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-label": {
-          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-label-gen-ai": {
-          "$description": "The default color for labels indicating that content is produced by generative AI.",
-          "$value": {
-            "dark": "#bf80ff",
-            "light": "#bf80ff",
-          },
-        },
-        "color-text-layout-toggle": {
-          "$description": "The default color of the app layout toggle.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-layout-toggle-active": {
-          "$description": "The color of the app layout toggle button when it's active.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-text-layout-toggle-hover": {
-          "$description": "The color of the app layout toggle button on hover.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-layout-toggle-selected": {
-          "$description": "The color of the app layout toggle button when it's selected.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-link-default": {
-          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-link-hover": {
-          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-notification-default": {
-          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-critical": {
-          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#000000",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-high": {
-          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-low": {
-          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-notification-severity-medium": {
-          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-notification-severity-neutral": {
-          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-segment-active": {
-          "$description": "The text color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-segment-default": {
-          "$description": "The text color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-segment-hover": {
-          "$description": "The text color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-status-error": {
-          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#ff7a7a",
-          },
-        },
-        "color-text-status-inactive": {
-          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-status-info": {
-          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-status-success": {
-          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#2bb534",
-          },
-        },
-        "color-text-status-warning": {
-          "$description": "The color of warning icons.",
-          "$value": {
-            "dark": "#fbd332",
-            "light": "#fbd332",
-          },
-        },
-        "color-text-toggle-button-icon-pressed": {
-          "$description": "The pressed text color of icon toggle buttons.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-toggle-button-normal-pressed": {
-          "$description": "The pressed text color of normal toggle buttons.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-top-navigation-title": {
-          "$description": "The color of the title in the top navigation.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "font-family-base": {
-          "$description": "The default font family that will be applied globally to the product interface.",
-          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
-        },
-        "font-family-monospace": {
-          "$description": "The monospace font family that will be applied globally to the product interface.",
-          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
-        },
-        "font-size-body-m": {
-          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
-          "$value": "14px",
-        },
-        "font-size-body-s": {
-          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
-          "$value": "12px",
-        },
-        "font-size-display-l": {
-          "$description": "The default font size for large display text.",
-          "$value": "42px",
-        },
-        "font-size-heading-l": {
-          "$description": "The default font size for h2s.",
-          "$value": "20px",
-        },
-        "font-size-heading-m": {
-          "$description": "The default font size for h3s.",
-          "$value": "18px",
-        },
-        "font-size-heading-s": {
-          "$description": "The default font size for h4s.",
-          "$value": "16px",
-        },
-        "font-size-heading-xl": {
-          "$description": "The default font size for h1s.",
-          "$value": "24px",
-        },
-        "font-size-heading-xs": {
-          "$description": "The default font size for h5s.",
-          "$value": "14px",
-        },
-        "font-weight-button": {
-          "$description": "The default font weight for button text.",
-          "$value": "700",
-        },
-        "font-weight-heading-l": {
-          "$description": "The default font weight for h2s.",
-          "$value": "700",
-        },
-        "font-weight-heading-m": {
-          "$description": "The default font weight for h3s.",
-          "$value": "700",
-        },
-        "font-weight-heading-s": {
-          "$description": "The default font weight for h4s.",
-          "$value": "700",
-        },
-        "font-weight-heading-xl": {
-          "$description": "The default font weight for h1s.",
-          "$value": "700",
-        },
-        "font-weight-heading-xs": {
-          "$description": "The default font weight for h5s.",
-          "$value": "700",
-        },
-        "line-height-body-m": {
-          "$description": "The default line height for regular body text.",
-          "$value": "20px",
-        },
-        "line-height-body-s": {
-          "$description": "The default line height for small body text.",
-          "$value": "16px",
-        },
-        "line-height-display-l": {
-          "$description": "The default line height for large display text.",
-          "$value": "48px",
-        },
-        "line-height-heading-l": {
-          "$description": "The default line height for h2s.",
-          "$value": "24px",
-        },
-        "line-height-heading-m": {
-          "$description": "The default line height for h3s.",
-          "$value": "22px",
-        },
-        "line-height-heading-s": {
-          "$description": "The default line height for h4s.",
-          "$value": "20px",
-        },
-        "line-height-heading-xl": {
-          "$description": "The default line height for h1s.",
-          "$value": "30px",
-        },
-        "line-height-heading-xs": {
-          "$description": "The default line height for h5s.",
-          "$value": "18px",
-        },
-        "motion-duration-avatar-gen-ai-gradient": {
-          "$description": "The duration for gradient motion of gen-ai avatars.",
-          "$value": {
-            "default": "3600ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-avatar-loading-dots": {
-          "$description": "The duration for loading motion of avatars.",
-          "$value": {
-            "default": "1200ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-complex": {
-          "$description": "The duration for drawing more attention or accommodating for more complexity.",
-          "$value": {
-            "default": "250ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-expressive": {
-          "$description": "The duration for accommodating the motion with more expressiveness.",
-          "$value": {
-            "default": "165ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-responsive": {
-          "$description": "The duration for making the motion feel quick and responsive.",
-          "$value": {
-            "default": "115ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-easing-avatar-gen-ai-gradient": {
-          "$description": "The easing curve for gradient motion of gen-ai avatars.",
-          "$value": {
-            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
-            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
-          },
-        },
-        "motion-easing-expressive": {
-          "$description": "The easing curve for drawing a user's attention in an expressive way.",
-          "$value": {
-            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
-            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
-          },
-        },
-        "motion-easing-responsive": {
-          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
-          "$value": {
-            "default": "cubic-bezier(0, 0, 0, 1)",
-            "disabled": "cubic-bezier(0, 0, 0, 1)",
-          },
-        },
-        "motion-easing-sticky": {
-          "$description": "The easing curve for making an element sticky to a certain state.",
-          "$value": {
-            "default": "cubic-bezier(1, 0, 0.83, 1)",
-            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
-          },
-        },
-        "motion-keyframes-fade-in": {
-          "$description": "The CSS keyframes for showing an element.",
-          "$value": {
-            "default": "awsui-fade-in-35003c",
-            "disabled": "awsui-fade-in-35003c",
-          },
-        },
-        "motion-keyframes-fade-out": {
-          "$description": "The CSS keyframes for hiding an element.",
-          "$value": {
-            "default": "awsui-fade-out-35003c",
-            "disabled": "awsui-fade-out-35003c",
-          },
-        },
-        "motion-keyframes-scale-popup": {
-          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
-          "$value": {
-            "default": "awsui-scale-popup-35003c",
-            "disabled": "awsui-scale-popup-35003c",
-          },
-        },
-        "motion-keyframes-status-icon-error": {
-          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
-          "$value": {
-            "default": "awsui-status-icon-error-35003c",
-            "disabled": "awsui-status-icon-error-35003c",
-          },
-        },
-        "shadow-container-active": {
-          "$description": "Shadow for containers and cards in active state.",
-          "$value": {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
-            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
-          },
-        },
-        "space-container-horizontal": {
-          "$description": "The horizontal padding inside a container.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "20px",
-          },
-        },
-        "space-field-horizontal": {
-          "$description": "The horizontal padding inside field components.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "12px",
-          },
-        },
-        "space-scaled-l": {
-          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "16px",
-          },
-        },
-        "space-scaled-m": {
-          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
-          "$value": {
-            "comfortable": "16px",
-            "compact": "12px",
-          },
-        },
-        "space-scaled-s": {
-          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "8px",
-          },
-        },
-        "space-scaled-xl": {
-          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
-          "$value": {
-            "comfortable": "24px",
-            "compact": "20px",
-          },
-        },
-        "space-scaled-xs": {
-          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
-          "$value": {
-            "comfortable": "8px",
-            "compact": "4px",
-          },
-        },
-        "space-scaled-xxl": {
-          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
-          "$value": {
-            "comfortable": "32px",
-            "compact": "24px",
-          },
-        },
-        "space-scaled-xxs": {
-          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
-          "$value": {
-            "comfortable": "4px",
-            "compact": "2px",
-          },
-        },
-        "space-scaled-xxxl": {
-          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
-          "$value": {
-            "comfortable": "40px",
-            "compact": "32px",
-          },
-        },
-        "space-scaled-xxxs": {
-          "$description": "The XXXS spacing unit which scales between modes.",
-          "$value": {
-            "comfortable": "2px",
-            "compact": "0px",
-          },
-        },
-        "space-static-l": {
-          "$description": "The static L spacing unit.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "20px",
-          },
-        },
-        "space-static-m": {
-          "$description": "The static M spacing unit.",
-          "$value": {
-            "comfortable": "16px",
-            "compact": "16px",
-          },
-        },
-        "space-static-s": {
-          "$description": "The static S spacing unit.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "12px",
-          },
-        },
-        "space-static-xl": {
-          "$description": "The static XL spacing unit.",
-          "$value": {
-            "comfortable": "24px",
-            "compact": "24px",
-          },
-        },
-        "space-static-xs": {
-          "$description": "The static XS spacing unit.",
-          "$value": {
-            "comfortable": "8px",
-            "compact": "8px",
-          },
-        },
-        "space-static-xxl": {
-          "$description": "The static XXL spacing unit.",
-          "$value": {
-            "comfortable": "32px",
-            "compact": "32px",
-          },
-        },
-        "space-static-xxs": {
-          "$description": "The static XXS spacing unit.",
-          "$value": {
-            "comfortable": "4px",
-            "compact": "4px",
-          },
-        },
-        "space-static-xxxl": {
-          "$description": "The static XXXL spacing unit.",
-          "$value": {
-            "comfortable": "40px",
-            "compact": "40px",
-          },
-        },
-        "space-static-xxxs": {
-          "$description": "The static XXXS spacing unit.",
-          "$value": {
-            "comfortable": "2px",
-            "compact": "2px",
-          },
-        },
-      },
-    },
-    "app-layout-toolbar": {
-      "tokens": {
-        "border-radius-alert": {
-          "$description": "The border radius of alerts.",
-          "$value": "12px",
-        },
-        "border-radius-badge": {
-          "$description": "The border radius of badges.",
-          "$value": "4px",
-        },
-        "border-radius-button": {
-          "$description": "The border radius of buttons and segmented control's segments.",
-          "$value": "20px",
-        },
-        "border-radius-calendar-day-focus-ring": {
-          "$description": "The border radius of the focused day in date picker and date range picker.",
-          "$value": "3px",
-        },
-        "border-radius-chat-bubble": {
-          "$description": "The border radius of chat bubbles.",
-          "$value": "8px",
-        },
-        "border-radius-container": {
-          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
-          "$value": "16px",
-        },
-        "border-radius-control-circular-focus-ring": {
-          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
-          "$value": "4px",
-        },
-        "border-radius-control-default-focus-ring": {
-          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
-          "$value": "4px",
-        },
-        "border-radius-dropdown": {
-          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
-          "$value": "8px",
-        },
-        "border-radius-flashbar": {
-          "$description": "The border radius of flash messages in flashbars.",
-          "$value": "12px",
-        },
-        "border-radius-input": {
-          "$description": "The border radius of form controls. For example: input, select.",
-          "$value": "8px",
-        },
-        "border-radius-item": {
-          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
-          "$value": "8px",
-        },
-        "border-radius-popover": {
-          "$description": "The border radius of popovers.",
-          "$value": "8px",
-        },
-        "border-radius-tabs-focus-ring": {
-          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
-          "$value": "20px",
-        },
-        "border-radius-tiles": {
-          "$description": "The border radius of tiles.",
-          "$value": "8px",
-        },
-        "border-radius-token": {
-          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
-          "$value": "8px",
-        },
-        "border-radius-tutorial-panel-item": {
-          "$description": "The border radius of tutorials inside a tutorial panel.",
-          "$value": "8px",
-        },
-        "border-width-alert": {
-          "$description": "The border width of alerts.",
-          "$value": "2px",
-        },
-        "border-width-field": {
-          "$description": "The border width of form fields.",
-          "$value": "1px",
-        },
-        "border-width-popover": {
-          "$description": "The border width of popovers.",
-          "$value": "2px",
-        },
-        "color-background-avatar-default": {
-          "$description": "The default background color of avatars.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-avatar-gen-ai": {
-          "$description": "The gen-ai background color of avatars.",
-          "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-          },
-        },
-        "color-background-button-normal-active": {
-          "$description": "The background color of normal buttons in active state.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#d1f1ff",
-          },
-        },
-        "color-background-button-normal-default": {
-          "$description": "The default background color of normal buttons.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-button-normal-disabled": {
-          "$description": "The background color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-button-normal-hover": {
-          "$description": "The background color of normal buttons in hover state.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#f0fbff",
-          },
-        },
-        "color-background-button-primary-active": {
-          "$description": "The background color of primary buttons in active state.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#002b66",
-          },
-        },
-        "color-background-button-primary-default": {
-          "$description": "The default background color of primary buttons.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
-          },
-        },
-        "color-background-button-primary-disabled": {
-          "$description": "The background color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#ebebf0",
-          },
-        },
-        "color-background-button-primary-hover": {
-          "$description": "The background color of primary buttons in hover state.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
-          },
-        },
-        "color-background-cell-shaded": {
-          "$description": "The background color of shaded table cells.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#f6f6f9",
-          },
-        },
-        "color-background-chat-bubble-incoming": {
-          "$description": "The background color of \`incoming\` chat bubble.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#f6f6f9",
-          },
-        },
-        "color-background-chat-bubble-outgoing": {
-          "$description": "The background color of \`outgoing\` chat bubble.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-background-container-content": {
-          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-container-header": {
-          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-control-checked": {
-          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
-          },
-        },
-        "color-background-control-default": {
-          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-control-disabled": {
-          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#dedee3",
+            "light": "#333843",
           },
         },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ffffff",
+            "light": "#1b232d",
           },
         },
         "color-background-dropdown-item-filter-match": {
           "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#333843",
-            "light": "#f0fbff",
+            "light": "#333843",
           },
         },
         "color-background-dropdown-item-hover": {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": {
             "dark": "#131920",
-            "light": "#f3f3f7",
+            "light": "#131920",
           },
         },
         "color-background-home-header": {
@@ -22973,28 +20448,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-input-disabled": {
           "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ebebf0",
+            "light": "#1b232d",
           },
         },
         "color-background-item-selected": {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": {
             "dark": "#001129",
-            "light": "#f0fbff",
+            "light": "#001129",
           },
         },
         "color-background-layout-main": {
           "$description": "The background color of the main content area on a page. For example: content area in app layout.",
           "$value": {
-            "dark": "#131920",
-            "light": "#fcfcfd",
+            "dark": "#161d26",
+            "light": "#161d26",
           },
         },
         "color-background-layout-toggle-active": {
@@ -23022,28 +20497,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the app layout toggle button when it's selected and active.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-layout-toggle-selected-default": {
           "$description": "The default background color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-layout-toggle-selected-hover": {
           "$description": "The background color of the app layout toggle button on hover when it's selected.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#004a9e",
+            "light": "#75cfff",
           },
         },
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -23064,7 +20539,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for grey notifications. For example: grey badges.",
           "$value": {
             "dark": "#656871",
-            "light": "#424650",
+            "light": "#656871",
           },
         },
         "color-background-notification-red": {
@@ -23120,126 +20595,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for the popover container.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ffffff",
+            "light": "#1b232d",
           },
         },
         "color-background-segment-active": {
           "$description": "The background color of the active segment in a segmented control.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-segment-default": {
           "$description": "The background color of inactive segments in a segmented control.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
+            "dark": "transparent",
+            "light": "transparent",
           },
         },
         "color-background-segment-disabled": {
           "$description": "The background color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-segment-hover": {
           "$description": "The background color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#1b232d",
-            "light": "#f0fbff",
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
           },
         },
         "color-background-status-error": {
           "$description": "The background color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#1f0000",
-            "light": "#fff5f5",
+            "light": "#1f0000",
           },
         },
         "color-background-status-info": {
           "$description": "The background color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#001129",
-            "light": "#f0fbff",
+            "light": "#001129",
           },
         },
         "color-background-status-success": {
           "$description": "The background color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#001401",
-            "light": "#effff1",
+            "light": "#001401",
           },
         },
         "color-background-status-warning": {
           "$description": "The background color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#191100",
-            "light": "#fffef0",
+            "light": "#191100",
           },
         },
         "color-background-toggle-button-normal-pressed": {
           "$description": "The background color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#333843",
-            "light": "#d1f1ff",
+            "light": "#333843",
           },
         },
         "color-background-toggle-checked-disabled": {
           "$description": "The background color of checked toggles in disabled state.",
           "$value": {
             "dark": "#002b66",
-            "light": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-board-placeholder-active": {
           "$description": "The color of board placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#ebebf0",
+            "light": "#656871",
           },
         },
         "color-board-placeholder-hover": {
           "$description": "The color of board placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#d1f1ff",
+            "light": "#006ce0",
           },
         },
         "color-border-button-normal-active": {
           "$description": "The border color of normal buttons in active state.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-border-button-normal-default": {
           "$description": "The border color of normal buttons.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-border-button-normal-disabled": {
           "$description": "The border color of normal buttons in disabled state.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-border-button-normal-hover": {
           "$description": "The border color of normal buttons in hover state.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-border-button-primary-disabled": {
           "$description": "The border color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#ebebf0",
+            "light": "#232b37",
           },
         },
         "color-border-container-top": {
@@ -23259,120 +20734,120 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
-            "dark": "#424650",
-            "light": "#c6c6cd",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-border-divider-secondary": {
           "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
           "$value": {
             "dark": "#232b37",
-            "light": "#ebebf0",
+            "light": "#232b37",
           },
         },
         "color-border-dropdown-item-focused": {
           "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-dropdown-item-hover": {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-border-input-default": {
           "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
           },
         },
         "color-border-item-selected": {
           "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-border-segment-active": {
           "$description": "The border color of the active segment in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-default": {
           "$description": "The border color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-disabled": {
           "$description": "The border color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-hover": {
           "$description": "The border color of inactive segments in a segmented control on hover.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-status-error": {
           "$description": "The border color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#ff7a7a",
           },
         },
         "color-border-status-info": {
           "$description": "The border color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-border-status-success": {
           "$description": "The border color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#00802f",
+            "light": "#2bb534",
           },
         },
         "color-border-status-warning": {
           "$description": "The border color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#855900",
+            "light": "#fbd332",
           },
         },
         "color-border-toggle-button-normal-pressed": {
           "$description": "The border color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-charts-blue-1-1000": {
@@ -24457,42 +21932,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of drag placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#ebebf0",
+            "light": "#656871",
           },
         },
         "color-drag-placeholder-hover": {
           "$description": "The color of drag placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#d1f1ff",
+            "light": "#006ce0",
           },
         },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-foreground-control-disabled": {
           "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-foreground-control-read-only": {
           "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-accent": {
           "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-avatar": {
@@ -24506,42 +21981,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-body-secondary": {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-text-breadcrumb-current": {
           "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
           "$value": {
             "dark": "#8c8c94",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-text-breadcrumb-icon": {
           "$description": "The color used for the icon delimiter between breadcrumb items.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-button-normal-default": {
           "$description": "The default text color of normal buttons.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-text-button-normal-disabled": {
@@ -24554,22 +22029,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-hover": {
           "$description": "The hover text color of normal buttons.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-active": {
           "$description": "The active text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-button-primary-default": {
           "$description": "The default text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-button-primary-disabled": {
@@ -24583,98 +22058,98 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The hover text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-chat-bubble-incoming": {
           "$description": "Text color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-chat-bubble-outgoing": {
           "$description": "Text color of \`outgoing\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-counter": {
           "$description": "The default color for counters. For example: counters in table headers",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-dropdown-item-default": {
           "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-dropdown-item-disabled": {
           "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-dropdown-item-filter-match": {
           "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#006ce0",
+            "light": "#75cfff",
           },
         },
         "color-text-dropdown-item-highlighted": {
           "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#0f141a",
+            "light": "#ebebf0",
           },
         },
         "color-text-empty": {
           "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#656871",
+            "light": "#dedee3",
           },
         },
         "color-text-form-default": {
           "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-form-secondary": {
           "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-group-label": {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-text-heading-default": {
           "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#0f141a",
+            "light": "#ebebf0",
           },
         },
         "color-text-heading-secondary": {
           "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#424650",
+            "light": "#a4a4ad",
           },
         },
         "color-text-home-header-default": {
@@ -24695,42 +22170,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-input-placeholder": {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-interactive-active": {
           "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-interactive-default": {
           "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-text-interactive-disabled": {
           "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-interactive-hover": {
           "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-interactive-inverted-default": {
@@ -24751,14 +22226,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-label-gen-ai": {
           "$description": "The default color for labels indicating that content is produced by generative AI.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#bf80ff",
           },
         },
         "color-text-layout-toggle": {
@@ -24772,35 +22247,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the app layout toggle button when it's active.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-text-layout-toggle-hover": {
           "$description": "The color of the app layout toggle button on hover.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-layout-toggle-selected": {
           "$description": "The color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-link-default": {
           "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-link-hover": {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#002b66",
+            "light": "#75cfff",
           },
         },
         "color-text-notification-default": {
@@ -24849,77 +22324,77 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The text color of the active segment in a segmented control.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-segment-default": {
           "$description": "The text color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-text-segment-hover": {
           "$description": "The text color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-status-error": {
           "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#ff7a7a",
           },
         },
         "color-text-status-inactive": {
           "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-status-info": {
           "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-status-success": {
           "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#00802f",
+            "light": "#2bb534",
           },
         },
         "color-text-status-warning": {
           "$description": "The color of warning icons.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#855900",
+            "light": "#fbd332",
           },
         },
         "color-text-toggle-button-icon-pressed": {
           "$description": "The pressed text color of icon toggle buttons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-toggle-button-normal-pressed": {
           "$description": "The pressed text color of normal toggle buttons.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#002b66",
+            "light": "#75cfff",
           },
         },
         "color-text-top-navigation-title": {
           "$description": "The color of the title in the top navigation.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "font-family-base": {
@@ -25334,7 +22809,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -25819,8 +23294,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -27859,7 +25334,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -28344,8 +25819,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -30384,7 +27859,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -30869,8 +28344,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -32909,7 +30384,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -33394,8 +30869,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
@@ -35434,7 +32909,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -35919,8 +33394,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
@@ -37959,7 +35434,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "1px",
+      "$value": "2px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
@@ -38444,8 +35919,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-border-input-focused": {
       "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
       "$value": {
-        "dark": "#75cfff",
-        "light": "#006ce0",
+        "dark": "#b8e7ff",
+        "light": "#002b66",
       },
     },
     "color-border-item-focused": {
diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
index 7da80a7f80..b18eb4d5cc 100644
--- a/src/select/parts/styles.scss
+++ b/src/select/parts/styles.scss
@@ -132,7 +132,7 @@ $inlineLabel-border-radius: 2px;
 }
 
 .inline-label {
-  background: awsui.$color-background-layout-main;
+  background: linear-gradient(to bottom, awsui.$color-background-layout-main, awsui.$color-background-input-default);
   border-start-start-radius: $inlineLabel-border-radius;
   border-start-end-radius: $inlineLabel-border-radius;
   border-end-start-radius: $inlineLabel-border-radius;
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 3831571bb6..b3ae4d62a4 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -140,7 +140,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderEditableCellHover: '{colorBorderDropdownItemHover}',
   colorBorderInputDefault: { light: '{colorGrey500}', dark: '{colorGrey550}' },
   colorBorderInputDisabled: '{colorBackgroundInputDisabled}',
-  colorBorderInputFocused: { light: '{colorBlue600}', dark: '{colorBlue400}' },
+  colorBorderInputFocused: { light: '{colorBlue600}', dark: '{colorBlue500}' },
   colorBorderItemFocused: { light: '{colorBlue600}', dark: '{colorBlue500}' },
   colorBorderDropdownItemFocused: { light: '{colorGrey600}', dark: '{colorGrey300}' },
   colorBorderItemPlaceholder: '{colorBorderItemSelected}',

From e9e2bdb384d85ddbfea409d599ed8cf96d18116b Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 2 Apr 2025 17:38:26 +0200
Subject: [PATCH 15/35] update snapshots

---
 .../__snapshots__/themes.test.ts.snap         |   76 +-
 .../__snapshots__/design-tokens.test.ts.snap  | 2953 +++++++++++++++--
 2 files changed, 2785 insertions(+), 244 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 6a4497519b..02307a666e 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -41,10 +41,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -94,7 +96,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -706,10 +708,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#ff5d64",
   "color-background-button-link-active": "#16191f",
   "color-background-button-link-hover": "#21252c",
@@ -759,7 +763,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-layout-toggle-selected-active": "#00a1c9",
   "color-background-layout-toggle-selected-default": "#44b9d6",
   "color-background-layout-toggle-selected-hover": "#44b9d6",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(22, 25, 31, 0.8)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -1371,10 +1375,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -1424,7 +1430,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -2036,10 +2042,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
+  "border-width-button": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -2089,7 +2097,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -2666,7 +2674,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -2701,10 +2709,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#db0000",
   "color-background-button-link-active": "#d1f1ff",
   "color-background-button-link-hover": "#f0fbff",
@@ -2754,7 +2764,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-layout-toggle-selected-active": "#006ce0",
   "color-background-layout-toggle-selected-default": "#006ce0",
   "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -2828,11 +2838,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#002b66",
+  "color-border-input-focused": "#006ce0",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#b4b4bb",
+  "color-border-layout": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -3331,7 +3341,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -3366,10 +3376,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#db0000",
   "color-background-button-link-active": "#d1f1ff",
   "color-background-button-link-hover": "#f0fbff",
@@ -3419,7 +3431,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#006ce0",
   "color-background-layout-toggle-selected-default": "#006ce0",
   "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -3493,11 +3505,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#002b66",
+  "color-border-input-focused": "#006ce0",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#b4b4bb",
+  "color-border-layout": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -3996,7 +4008,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4031,10 +4043,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#ff7a7a",
   "color-background-button-link-active": "#333843",
   "color-background-button-link-hover": "#1b232d",
@@ -4084,7 +4098,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#42b4ff",
   "color-background-layout-toggle-selected-default": "#42b4ff",
   "color-background-layout-toggle-selected-hover": "#75cfff",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -4158,7 +4172,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#b8e7ff",
+  "color-border-input-focused": "#42b4ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
@@ -4661,7 +4675,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4696,10 +4710,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
-  "border-width-field": "2px",
+  "border-width-button": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
+  "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
   "color-background-badge-icon": "#ff7a7a",
   "color-background-button-link-active": "#333843",
   "color-background-button-link-hover": "#1b232d",
@@ -4749,7 +4765,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#42b4ff",
   "color-background-layout-toggle-selected-default": "#42b4ff",
   "color-background-layout-toggle-selected-hover": "#75cfff",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -4823,7 +4839,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#b8e7ff",
+  "color-border-input-focused": "#42b4ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 4cf000c1fa..290d84182a 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -95,8 +95,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -312,8 +312,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -2620,8 +2620,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -2837,8 +2837,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -5145,8 +5145,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -5362,8 +5362,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -7670,8 +7670,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -7887,8 +7887,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -10195,8 +10195,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -10412,8 +10412,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -12720,8 +12720,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -12937,8 +12937,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -15245,8 +15245,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-avatar-gen-ai": {
       "$description": "The gen-ai background color of avatars.",
       "$value": {
-        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
       },
     },
     "color-background-button-normal-active": {
@@ -15462,8 +15462,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-loading-bar-gen-ai": {
       "$description": "The background color of gen-ai loading bars.",
       "$value": {
-        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
       },
     },
     "color-background-notification-blue": {
@@ -17759,7 +17759,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -17775,8 +17775,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -17992,8 +17992,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -18244,8 +18244,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -20284,7 +20284,2532 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
+        },
+        "border-width-popover": {
+          "$description": "The border width of popovers.",
+          "$value": "2px",
+        },
+        "color-background-avatar-default": {
+          "$description": "The default background color of avatars.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-avatar-gen-ai": {
+          "$description": "The gen-ai background color of avatars.",
+          "$value": {
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+          },
+        },
+        "color-background-button-normal-active": {
+          "$description": "The background color of normal buttons in active state.",
+          "$value": {
+            "dark": "rgba(255, 255, 255, 0.15)",
+            "light": "rgba(255, 255, 255, 0.15)",
+          },
+        },
+        "color-background-button-normal-default": {
+          "$description": "The default background color of normal buttons.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-button-normal-disabled": {
+          "$description": "The background color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-button-normal-hover": {
+          "$description": "The background color of normal buttons in hover state.",
+          "$value": {
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "color-background-button-primary-active": {
+          "$description": "The background color of primary buttons in active state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-button-primary-default": {
+          "$description": "The default background color of primary buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-background-button-primary-disabled": {
+          "$description": "The background color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-background-button-primary-hover": {
+          "$description": "The background color of primary buttons in hover state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-cell-shaded": {
+          "$description": "The background color of shaded table cells.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-chat-bubble-incoming": {
+          "$description": "The background color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-chat-bubble-outgoing": {
+          "$description": "The background color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-container-content": {
+          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-container-header": {
+          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-checked": {
+          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-control-default": {
+          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-disabled": {
+          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-default": {
+          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-dropdown-item-filter-match": {
+          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-hover": {
+          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
+          "$value": {
+            "dark": "#131920",
+            "light": "#131920",
+          },
+        },
+        "color-background-home-header": {
+          "$description": "The background color of the home header, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-input-default": {
+          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-input-disabled": {
+          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-item-selected": {
+          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-layout-main": {
+          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-layout-toggle-active": {
+          "$description": "The background color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-default": {
+          "$description": "The default background color of the app layout toggle button.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-hover": {
+          "$description": "The background color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-layout-toggle-selected-active": {
+          "$description": "The background color of the app layout toggle button when it's selected and active.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-default": {
+          "$description": "The default background color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-hover": {
+          "$description": "The background color of the app layout toggle button on hover when it's selected.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-background-loading-bar-gen-ai": {
+          "$description": "The background color of gen-ai loading bars.",
+          "$value": {
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+          },
+        },
+        "color-background-notification-blue": {
+          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-notification-green": {
+          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
+          "$value": {
+            "dark": "#00802f",
+            "light": "#00802f",
+          },
+        },
+        "color-background-notification-grey": {
+          "$description": "Background color for grey notifications. For example: grey badges.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-red": {
+          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
+          "$value": {
+            "dark": "#db0000",
+            "light": "#db0000",
+          },
+        },
+        "color-background-notification-severity-critical": {
+          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#870303",
+          },
+        },
+        "color-background-notification-severity-high": {
+          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ce3311",
+          },
+        },
+        "color-background-notification-severity-low": {
+          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#f2cd54",
+            "light": "#f2cd54",
+          },
+        },
+        "color-background-notification-severity-medium": {
+          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#f89256",
+          },
+        },
+        "color-background-notification-severity-neutral": {
+          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-yellow": {
+          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
+        "color-background-popover": {
+          "$description": "Background color for the popover container.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-segment-active": {
+          "$description": "The background color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-segment-default": {
+          "$description": "The background color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-segment-disabled": {
+          "$description": "The background color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-segment-hover": {
+          "$description": "The background color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "color-background-status-error": {
+          "$description": "The background color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#1f0000",
+            "light": "#1f0000",
+          },
+        },
+        "color-background-status-info": {
+          "$description": "The background color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-status-success": {
+          "$description": "The background color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#001401",
+            "light": "#001401",
+          },
+        },
+        "color-background-status-warning": {
+          "$description": "The background color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#191100",
+            "light": "#191100",
+          },
+        },
+        "color-background-toggle-button-normal-pressed": {
+          "$description": "The background color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-toggle-checked-disabled": {
+          "$description": "The background color of checked toggles in disabled state.",
+          "$value": {
+            "dark": "#002b66",
+            "light": "#002b66",
+          },
+        },
+        "color-board-placeholder-active": {
+          "$description": "The color of board placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-board-placeholder-hover": {
+          "$description": "The color of board placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-border-button-normal-active": {
+          "$description": "The border color of normal buttons in active state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-normal-default": {
+          "$description": "The border color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-button-normal-disabled": {
+          "$description": "The border color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-button-normal-hover": {
+          "$description": "The border color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-primary-disabled": {
+          "$description": "The border color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-container-top": {
+          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-border-control-default": {
+          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-border-divider-default": {
+          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-divider-secondary": {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-dropdown-item-focused": {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-dropdown-item-hover": {
+          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-default": {
+          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-focused": {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-item-focused": {
+          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-border-item-selected": {
+          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-segment-active": {
+          "$description": "The border color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-default": {
+          "$description": "The border color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-disabled": {
+          "$description": "The border color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-hover": {
+          "$description": "The border color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-status-error": {
+          "$description": "The border color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-border-status-info": {
+          "$description": "The border color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-status-success": {
+          "$description": "The border color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-border-status-warning": {
+          "$description": "The border color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-border-toggle-button-normal-pressed": {
+          "$description": "The border color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-charts-blue-1-1000": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#b3e4f8",
+            "light": "#01437d",
+          },
+        },
+        "color-charts-blue-1-1100": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#caedfc",
+            "light": "#003c75",
+          },
+        },
+        "color-charts-blue-1-1200": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ddf4ff",
+            "light": "#00366d",
+          },
+        },
+        "color-charts-blue-1-300": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#00819c",
+            "light": "#529ccb",
+          },
+        },
+        "color-charts-blue-1-400": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#0497ba",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-blue-1-500": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#0273bb",
+          },
+        },
+        "color-charts-blue-1-600": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#44b9dd",
+            "light": "#0166ab",
+          },
+        },
+        "color-charts-blue-1-700": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#63c6e7",
+            "light": "#015b9d",
+          },
+        },
+        "color-charts-blue-1-800": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#79d2f0",
+            "light": "#015292",
+          },
+        },
+        "color-charts-blue-1-900": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#98dcf5",
+            "light": "#014a87",
+          },
+        },
+        "color-charts-blue-2-1000": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-blue-2-1100": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-blue-2-1200": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-blue-2-300": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-blue-2-400": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-blue-2-500": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-blue-2-600": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-blue-2-700": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-blue-2-800": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-blue-2-900": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-green-1000": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#c5e7a8",
+            "light": "#104d01",
+          },
+        },
+        "color-charts-green-1100": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#d5efbe",
+            "light": "#0f4601",
+          },
+        },
+        "color-charts-green-1200": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#e4f7d5",
+            "light": "#0d4000",
+          },
+        },
+        "color-charts-green-300": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#48851a",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-green-400": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#5a9b29",
+            "light": "#41902c",
+          },
+        },
+        "color-charts-green-500": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#1f8104",
+          },
+        },
+        "color-charts-green-600": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#7dbd4c",
+            "light": "#1a7302",
+          },
+        },
+        "color-charts-green-700": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#8fca61",
+            "light": "#176702",
+          },
+        },
+        "color-charts-green-800": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#9fd673",
+            "light": "#145d02",
+          },
+        },
+        "color-charts-green-900": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#b2df8d",
+            "light": "#125502",
+          },
+        },
+        "color-charts-line-axis": {
+          "$description": "Color of the axis lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-grid": {
+          "$description": "Color of the grid lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-tick": {
+          "$description": "Color of the tick marks in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-orange-1000": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-orange-1100": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-orange-1200": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-orange-300": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-orange-400": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-orange-500": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-orange-600": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-orange-700": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-orange-800": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-orange-900": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-1": {
+          "$description": "Color #1 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-palette-categorical-10": {
+          "$description": "Color #10 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-palette-categorical-11": {
+          "$description": "Color #11 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-palette-categorical-12": {
+          "$description": "Color #12 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-palette-categorical-13": {
+          "$description": "Color #13 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-palette-categorical-14": {
+          "$description": "Color #14 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-palette-categorical-15": {
+          "$description": "Color #15 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-16": {
+          "$description": "Color #16 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-palette-categorical-17": {
+          "$description": "Color #17 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-palette-categorical-18": {
+          "$description": "Color #18 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-palette-categorical-19": {
+          "$description": "Color #19 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-palette-categorical-2": {
+          "$description": "Color #2 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-palette-categorical-20": {
+          "$description": "Color #20 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-palette-categorical-21": {
+          "$description": "Color #21 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-palette-categorical-22": {
+          "$description": "Color #22 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-palette-categorical-23": {
+          "$description": "Color #23 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-palette-categorical-24": {
+          "$description": "Color #24 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-palette-categorical-25": {
+          "$description": "Color #25 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-palette-categorical-26": {
+          "$description": "Color #26 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-palette-categorical-27": {
+          "$description": "Color #27 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-palette-categorical-28": {
+          "$description": "Color #28 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-palette-categorical-29": {
+          "$description": "Color #29 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-palette-categorical-3": {
+          "$description": "Color #3 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-palette-categorical-30": {
+          "$description": "Color #30 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-palette-categorical-31": {
+          "$description": "Color #31 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-palette-categorical-32": {
+          "$description": "Color #32 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-palette-categorical-33": {
+          "$description": "Color #33 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-palette-categorical-34": {
+          "$description": "Color #34 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-palette-categorical-35": {
+          "$description": "Color #35 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-palette-categorical-36": {
+          "$description": "Color #36 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-palette-categorical-37": {
+          "$description": "Color #37 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-palette-categorical-38": {
+          "$description": "Color #38 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-palette-categorical-39": {
+          "$description": "Color #39 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-palette-categorical-4": {
+          "$description": "Color #4 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-palette-categorical-40": {
+          "$description": "Color #40 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-palette-categorical-41": {
+          "$description": "Color #41 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-palette-categorical-42": {
+          "$description": "Color #42 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-palette-categorical-43": {
+          "$description": "Color #43 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-palette-categorical-44": {
+          "$description": "Color #44 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-palette-categorical-45": {
+          "$description": "Color #45 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-palette-categorical-46": {
+          "$description": "Color #46 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-palette-categorical-47": {
+          "$description": "Color #47 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-palette-categorical-48": {
+          "$description": "Color #48 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-palette-categorical-49": {
+          "$description": "Color #49 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-palette-categorical-5": {
+          "$description": "Color #5 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-palette-categorical-50": {
+          "$description": "Color #50 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-palette-categorical-6": {
+          "$description": "Color #6 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-palette-categorical-7": {
+          "$description": "Color #7 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-palette-categorical-8": {
+          "$description": "Color #8 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-palette-categorical-9": {
+          "$description": "Color #9 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-pink-1000": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-pink-1100": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-pink-1200": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-pink-300": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-pink-400": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-pink-500": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-pink-600": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-pink-700": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-pink-800": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-pink-900": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-purple-1000": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-purple-1100": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-purple-1200": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-purple-300": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-purple-400": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-purple-500": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-purple-600": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-purple-700": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-purple-800": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-purple-900": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-red-1000": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd2cf",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-red-1100": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe0dd",
+            "light": "#721e03",
+          },
+        },
+        "color-charts-red-1200": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecea",
+            "light": "#671c00",
+          },
+        },
+        "color-charts-red-300": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#ea7158",
+          },
+        },
+        "color-charts-red-400": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#ed5958",
+            "light": "#dc5032",
+          },
+        },
+        "color-charts-red-500": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#d13313",
+          },
+        },
+        "color-charts-red-600": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#ff8a8a",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-red-700": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#ffa09e",
+            "light": "#a82a0c",
+          },
+        },
+        "color-charts-red-800": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb3b0",
+            "light": "#972709",
+          },
+        },
+        "color-charts-red-900": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc4c0",
+            "light": "#892407",
+          },
+        },
+        "color-charts-status-critical": {
+          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-status-high": {
+          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-status-info": {
+          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-status-low": {
+          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-status-medium": {
+          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-status-neutral": {
+          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-charts-status-positive": {
+          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-teal-1000": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-teal-1100": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-teal-1200": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-teal-300": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-teal-400": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-teal-500": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-teal-600": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-teal-700": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-teal-800": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-teal-900": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-threshold-info": {
+          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#006ce0",
+          },
+        },
+        "color-charts-threshold-negative": {
+          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-charts-threshold-neutral": {
+          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#656871",
+          },
+        },
+        "color-charts-threshold-positive": {
+          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#00802f",
+          },
+        },
+        "color-charts-yellow-1000": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#f7db8a",
+            "light": "#553f03",
+          },
+        },
+        "color-charts-yellow-1100": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#fce5a8",
+            "light": "#4d3901",
+          },
+        },
+        "color-charts-yellow-1200": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffefc9",
+            "light": "#483300",
+          },
+        },
+        "color-charts-yellow-300": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#977001",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-yellow-400": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#b08400",
+            "light": "#9c7b0b",
+          },
+        },
+        "color-charts-yellow-500": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#c59600",
+            "light": "#8a6b05",
+          },
+        },
+        "color-charts-yellow-600": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#d3a61c",
+            "light": "#7b5f04",
+          },
+        },
+        "color-charts-yellow-700": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#6f5504",
+          },
+        },
+        "color-charts-yellow-800": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#eac33a",
+            "light": "#654d03",
+          },
+        },
+        "color-charts-yellow-900": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#f1cf65",
+            "light": "#5d4503",
+          },
+        },
+        "color-drag-placeholder-active": {
+          "$description": "The color of drag placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-drag-placeholder-hover": {
+          "$description": "The color of drag placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-foreground-control-default": {
+          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-foreground-control-disabled": {
+          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-foreground-control-read-only": {
+          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-accent": {
+          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-avatar": {
+          "$description": "The text and icon color of avatars.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-body-default": {
+          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-body-secondary": {
+          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-breadcrumb-current": {
+          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-breadcrumb-icon": {
+          "$description": "The color used for the icon delimiter between breadcrumb items.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-button-normal-active": {
+          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-normal-default": {
+          "$description": "The default text color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-button-normal-disabled": {
+          "$description": "The text color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-normal-hover": {
+          "$description": "The hover text color of normal buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-primary-active": {
+          "$description": "The active text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-default": {
+          "$description": "The default text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-disabled": {
+          "$description": "The text color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-primary-hover": {
+          "$description": "The hover text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-chat-bubble-incoming": {
+          "$description": "Text color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-chat-bubble-outgoing": {
+          "$description": "Text color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-counter": {
+          "$description": "The default color for counters. For example: counters in table headers",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-dropdown-item-default": {
+          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-dropdown-item-disabled": {
+          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-dropdown-item-filter-match": {
+          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-dropdown-item-highlighted": {
+          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-empty": {
+          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-default": {
+          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-secondary": {
+          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-group-label": {
+          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-heading-default": {
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-heading-secondary": {
+          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-home-header-default": {
+          "$description": "The color of the home header's text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-home-header-secondary": {
+          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-input-disabled": {
+          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-input-placeholder": {
+          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-interactive-active": {
+          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-default": {
+          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-disabled": {
+          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-interactive-hover": {
+          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-inverted-default": {
+          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-inverted-hover": {
+          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-label": {
+          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-label-gen-ai": {
+          "$description": "The default color for labels indicating that content is produced by generative AI.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-layout-toggle": {
+          "$description": "The default color of the app layout toggle.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-layout-toggle-active": {
+          "$description": "The color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-text-layout-toggle-hover": {
+          "$description": "The color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-layout-toggle-selected": {
+          "$description": "The color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-link-default": {
+          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-link-hover": {
+          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-notification-default": {
+          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-critical": {
+          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#000000",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-high": {
+          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-low": {
+          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-medium": {
+          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-neutral": {
+          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-segment-active": {
+          "$description": "The text color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-segment-default": {
+          "$description": "The text color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-segment-hover": {
+          "$description": "The text color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-status-error": {
+          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-text-status-inactive": {
+          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-status-info": {
+          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-status-success": {
+          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-text-status-warning": {
+          "$description": "The color of warning icons.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-text-toggle-button-icon-pressed": {
+          "$description": "The pressed text color of icon toggle buttons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-toggle-button-normal-pressed": {
+          "$description": "The pressed text color of normal toggle buttons.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-top-navigation-title": {
+          "$description": "The color of the title in the top navigation.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "font-family-base": {
+          "$description": "The default font family that will be applied globally to the product interface.",
+          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+        },
+        "font-family-monospace": {
+          "$description": "The monospace font family that will be applied globally to the product interface.",
+          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
+        },
+        "font-size-body-m": {
+          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
+          "$value": "14px",
+        },
+        "font-size-body-s": {
+          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
+          "$value": "12px",
+        },
+        "font-size-display-l": {
+          "$description": "The default font size for large display text.",
+          "$value": "42px",
+        },
+        "font-size-heading-l": {
+          "$description": "The default font size for h2s.",
+          "$value": "20px",
+        },
+        "font-size-heading-m": {
+          "$description": "The default font size for h3s.",
+          "$value": "18px",
+        },
+        "font-size-heading-s": {
+          "$description": "The default font size for h4s.",
+          "$value": "16px",
+        },
+        "font-size-heading-xl": {
+          "$description": "The default font size for h1s.",
+          "$value": "24px",
+        },
+        "font-size-heading-xs": {
+          "$description": "The default font size for h5s.",
+          "$value": "14px",
+        },
+        "font-weight-button": {
+          "$description": "The default font weight for button text.",
+          "$value": "700",
+        },
+        "font-weight-heading-l": {
+          "$description": "The default font weight for h2s.",
+          "$value": "700",
+        },
+        "font-weight-heading-m": {
+          "$description": "The default font weight for h3s.",
+          "$value": "700",
+        },
+        "font-weight-heading-s": {
+          "$description": "The default font weight for h4s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xl": {
+          "$description": "The default font weight for h1s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xs": {
+          "$description": "The default font weight for h5s.",
+          "$value": "700",
+        },
+        "line-height-body-m": {
+          "$description": "The default line height for regular body text.",
+          "$value": "20px",
+        },
+        "line-height-body-s": {
+          "$description": "The default line height for small body text.",
+          "$value": "16px",
+        },
+        "line-height-display-l": {
+          "$description": "The default line height for large display text.",
+          "$value": "48px",
+        },
+        "line-height-heading-l": {
+          "$description": "The default line height for h2s.",
+          "$value": "24px",
+        },
+        "line-height-heading-m": {
+          "$description": "The default line height for h3s.",
+          "$value": "22px",
+        },
+        "line-height-heading-s": {
+          "$description": "The default line height for h4s.",
+          "$value": "20px",
+        },
+        "line-height-heading-xl": {
+          "$description": "The default line height for h1s.",
+          "$value": "30px",
+        },
+        "line-height-heading-xs": {
+          "$description": "The default line height for h5s.",
+          "$value": "18px",
+        },
+        "motion-duration-avatar-gen-ai-gradient": {
+          "$description": "The duration for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "3600ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-avatar-loading-dots": {
+          "$description": "The duration for loading motion of avatars.",
+          "$value": {
+            "default": "1200ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-complex": {
+          "$description": "The duration for drawing more attention or accommodating for more complexity.",
+          "$value": {
+            "default": "250ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-expressive": {
+          "$description": "The duration for accommodating the motion with more expressiveness.",
+          "$value": {
+            "default": "165ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-responsive": {
+          "$description": "The duration for making the motion feel quick and responsive.",
+          "$value": {
+            "default": "115ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-easing-avatar-gen-ai-gradient": {
+          "$description": "The easing curve for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
+            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
+          },
+        },
+        "motion-easing-expressive": {
+          "$description": "The easing curve for drawing a user's attention in an expressive way.",
+          "$value": {
+            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
+            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
+          },
+        },
+        "motion-easing-responsive": {
+          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
+          "$value": {
+            "default": "cubic-bezier(0, 0, 0, 1)",
+            "disabled": "cubic-bezier(0, 0, 0, 1)",
+          },
+        },
+        "motion-easing-sticky": {
+          "$description": "The easing curve for making an element sticky to a certain state.",
+          "$value": {
+            "default": "cubic-bezier(1, 0, 0.83, 1)",
+            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
+          },
+        },
+        "motion-keyframes-fade-in": {
+          "$description": "The CSS keyframes for showing an element.",
+          "$value": {
+            "default": "awsui-fade-in-35003c",
+            "disabled": "awsui-fade-in-35003c",
+          },
+        },
+        "motion-keyframes-fade-out": {
+          "$description": "The CSS keyframes for hiding an element.",
+          "$value": {
+            "default": "awsui-fade-out-35003c",
+            "disabled": "awsui-fade-out-35003c",
+          },
+        },
+        "motion-keyframes-scale-popup": {
+          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
+          "$value": {
+            "default": "awsui-scale-popup-35003c",
+            "disabled": "awsui-scale-popup-35003c",
+          },
+        },
+        "motion-keyframes-status-icon-error": {
+          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
+          "$value": {
+            "default": "awsui-status-icon-error-35003c",
+            "disabled": "awsui-status-icon-error-35003c",
+          },
+        },
+        "shadow-container-active": {
+          "$description": "Shadow for containers and cards in active state.",
+          "$value": {
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
+          },
+        },
+        "space-container-horizontal": {
+          "$description": "The horizontal padding inside a container.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-field-horizontal": {
+          "$description": "The horizontal padding inside field components.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-l": {
+          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "16px",
+          },
+        },
+        "space-scaled-m": {
+          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-s": {
+          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "8px",
+          },
+        },
+        "space-scaled-xl": {
+          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "20px",
+          },
+        },
+        "space-scaled-xs": {
+          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "4px",
+          },
+        },
+        "space-scaled-xxl": {
+          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "24px",
+          },
+        },
+        "space-scaled-xxs": {
+          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "2px",
+          },
+        },
+        "space-scaled-xxxl": {
+          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "32px",
+          },
+        },
+        "space-scaled-xxxs": {
+          "$description": "The XXXS spacing unit which scales between modes.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "0px",
+          },
+        },
+        "space-static-l": {
+          "$description": "The static L spacing unit.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-static-m": {
+          "$description": "The static M spacing unit.",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "16px",
+          },
+        },
+        "space-static-s": {
+          "$description": "The static S spacing unit.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-static-xl": {
+          "$description": "The static XL spacing unit.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "24px",
+          },
+        },
+        "space-static-xs": {
+          "$description": "The static XS spacing unit.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "8px",
+          },
+        },
+        "space-static-xxl": {
+          "$description": "The static XXL spacing unit.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "32px",
+          },
+        },
+        "space-static-xxs": {
+          "$description": "The static XXS spacing unit.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "4px",
+          },
+        },
+        "space-static-xxxl": {
+          "$description": "The static XXXL spacing unit.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "40px",
+          },
+        },
+        "space-static-xxxs": {
+          "$description": "The static XXXS spacing unit.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "2px",
+          },
+        },
+      },
+    },
+    "app-layout-toolbar": {
+      "tokens": {
+        "border-radius-alert": {
+          "$description": "The border radius of alerts.",
+          "$value": "12px",
+        },
+        "border-radius-badge": {
+          "$description": "The border radius of badges.",
+          "$value": "4px",
+        },
+        "border-radius-button": {
+          "$description": "The border radius of buttons and segmented control's segments.",
+          "$value": "20px",
+        },
+        "border-radius-calendar-day-focus-ring": {
+          "$description": "The border radius of the focused day in date picker and date range picker.",
+          "$value": "3px",
+        },
+        "border-radius-chat-bubble": {
+          "$description": "The border radius of chat bubbles.",
+          "$value": "8px",
+        },
+        "border-radius-container": {
+          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
+          "$value": "16px",
+        },
+        "border-radius-control-circular-focus-ring": {
+          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
+          "$value": "4px",
+        },
+        "border-radius-control-default-focus-ring": {
+          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
+          "$value": "4px",
+        },
+        "border-radius-dropdown": {
+          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
+          "$value": "8px",
+        },
+        "border-radius-flashbar": {
+          "$description": "The border radius of flash messages in flashbars.",
+          "$value": "12px",
+        },
+        "border-radius-input": {
+          "$description": "The border radius of form controls. For example: input, select.",
+          "$value": "8px",
+        },
+        "border-radius-item": {
+          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
+          "$value": "8px",
+        },
+        "border-radius-popover": {
+          "$description": "The border radius of popovers.",
+          "$value": "8px",
+        },
+        "border-radius-tabs-focus-ring": {
+          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
+          "$value": "20px",
+        },
+        "border-radius-tiles": {
+          "$description": "The border radius of tiles.",
+          "$value": "8px",
+        },
+        "border-radius-token": {
+          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
+          "$value": "8px",
+        },
+        "border-radius-tutorial-panel-item": {
+          "$description": "The border radius of tutorials inside a tutorial panel.",
+          "$value": "8px",
+        },
+        "border-width-alert": {
+          "$description": "The border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-field": {
+          "$description": "The border width of form fields.",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20300,78 +22825,78 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
           "$description": "The background color of normal buttons in active state.",
           "$value": {
-            "dark": "rgba(255, 255, 255, 0.15)",
-            "light": "rgba(255, 255, 255, 0.15)",
+            "dark": "#333843",
+            "light": "#d1f1ff",
           },
         },
         "color-background-button-normal-default": {
           "$description": "The default background color of normal buttons.",
           "$value": {
-            "dark": "transparent",
-            "light": "transparent",
+            "dark": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-button-normal-disabled": {
           "$description": "The background color of normal buttons in disabled state.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-button-normal-hover": {
           "$description": "The background color of normal buttons in hover state.",
           "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
+            "dark": "#1b232d",
+            "light": "#f0fbff",
           },
         },
         "color-background-button-primary-active": {
           "$description": "The background color of primary buttons in active state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#002b66",
           },
         },
         "color-background-button-primary-default": {
           "$description": "The default background color of primary buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-button-primary-disabled": {
           "$description": "The background color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-background-button-primary-hover": {
           "$description": "The background color of primary buttons in hover state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-background-cell-shaded": {
           "$description": "The background color of shaded table cells.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-incoming": {
           "$description": "The background color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-outgoing": {
@@ -20385,56 +22910,56 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-container-header": {
           "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-control-checked": {
           "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-control-default": {
           "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-control-disabled": {
           "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#dedee3",
           },
         },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-dropdown-item-filter-match": {
           "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#f0fbff",
           },
         },
         "color-background-dropdown-item-hover": {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": {
             "dark": "#131920",
-            "light": "#131920",
+            "light": "#f3f3f7",
           },
         },
         "color-background-home-header": {
@@ -20448,28 +22973,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-input-disabled": {
           "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ebebf0",
           },
         },
         "color-background-item-selected": {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-layout-main": {
           "$description": "The background color of the main content area on a page. For example: content area in app layout.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
+            "dark": "#131920",
+            "light": "#fcfcfd",
           },
         },
         "color-background-layout-toggle-active": {
@@ -20497,28 +23022,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the app layout toggle button when it's selected and active.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-default": {
           "$description": "The default background color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-hover": {
           "$description": "The background color of the app layout toggle button on hover when it's selected.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#004a9e",
           },
         },
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -20539,7 +23064,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for grey notifications. For example: grey badges.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#424650",
           },
         },
         "color-background-notification-red": {
@@ -20595,126 +23120,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for the popover container.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-active": {
           "$description": "The background color of the active segment in a segmented control.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-segment-default": {
           "$description": "The background color of inactive segments in a segmented control.",
           "$value": {
-            "dark": "transparent",
-            "light": "transparent",
+            "dark": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-disabled": {
           "$description": "The background color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-hover": {
           "$description": "The background color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
+            "dark": "#1b232d",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-error": {
           "$description": "The background color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#1f0000",
-            "light": "#1f0000",
+            "light": "#fff5f5",
           },
         },
         "color-background-status-info": {
           "$description": "The background color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-success": {
           "$description": "The background color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#001401",
-            "light": "#001401",
+            "light": "#effff1",
           },
         },
         "color-background-status-warning": {
           "$description": "The background color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#191100",
-            "light": "#191100",
+            "light": "#fffef0",
           },
         },
         "color-background-toggle-button-normal-pressed": {
           "$description": "The background color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#d1f1ff",
           },
         },
         "color-background-toggle-checked-disabled": {
           "$description": "The background color of checked toggles in disabled state.",
           "$value": {
             "dark": "#002b66",
-            "light": "#002b66",
+            "light": "#b8e7ff",
           },
         },
         "color-board-placeholder-active": {
           "$description": "The color of board placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-board-placeholder-hover": {
           "$description": "The color of board placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-border-button-normal-active": {
           "$description": "The border color of normal buttons in active state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-normal-default": {
           "$description": "The border color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-button-normal-disabled": {
           "$description": "The border color of normal buttons in disabled state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-border-button-normal-hover": {
           "$description": "The border color of normal buttons in hover state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-primary-disabled": {
           "$description": "The border color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-container-top": {
@@ -20734,120 +23259,120 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-border-divider-secondary": {
           "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-dropdown-item-focused": {
           "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-dropdown-item-hover": {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-default": {
           "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-selected": {
           "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-segment-active": {
           "$description": "The border color of the active segment in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-default": {
           "$description": "The border color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-disabled": {
           "$description": "The border color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-hover": {
           "$description": "The border color of inactive segments in a segmented control on hover.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-status-error": {
           "$description": "The border color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-border-status-info": {
           "$description": "The border color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-status-success": {
           "$description": "The border color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-border-status-warning": {
           "$description": "The border color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-border-toggle-button-normal-pressed": {
           "$description": "The border color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-charts-blue-1-1000": {
@@ -21932,42 +24457,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of drag placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-drag-placeholder-hover": {
           "$description": "The color of drag placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-disabled": {
           "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-read-only": {
           "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-accent": {
           "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-avatar": {
@@ -21981,42 +24506,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-body-secondary": {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-breadcrumb-current": {
           "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
           "$value": {
             "dark": "#8c8c94",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-text-breadcrumb-icon": {
           "$description": "The color used for the icon delimiter between breadcrumb items.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-normal-default": {
           "$description": "The default text color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-button-normal-disabled": {
@@ -22029,22 +24554,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-hover": {
           "$description": "The hover text color of normal buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-primary-active": {
           "$description": "The active text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-default": {
           "$description": "The default text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-disabled": {
@@ -22058,98 +24583,98 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The hover text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-chat-bubble-incoming": {
           "$description": "Text color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-chat-bubble-outgoing": {
           "$description": "Text color of \`outgoing\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-counter": {
           "$description": "The default color for counters. For example: counters in table headers",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-dropdown-item-default": {
           "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-dropdown-item-disabled": {
           "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-dropdown-item-filter-match": {
           "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-text-dropdown-item-highlighted": {
           "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-empty": {
           "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#656871",
           },
         },
         "color-text-form-default": {
           "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-form-secondary": {
           "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-group-label": {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-heading-default": {
           "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-heading-secondary": {
           "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#424650",
           },
         },
         "color-text-home-header-default": {
@@ -22170,42 +24695,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-input-placeholder": {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-interactive-active": {
           "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-default": {
           "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-interactive-disabled": {
           "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-interactive-hover": {
           "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-inverted-default": {
@@ -22226,14 +24751,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-label-gen-ai": {
           "$description": "The default color for labels indicating that content is produced by generative AI.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#bf80ff",
+            "light": "#7300e5",
           },
         },
         "color-text-layout-toggle": {
@@ -22247,35 +24772,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the app layout toggle button when it's active.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-text-layout-toggle-hover": {
           "$description": "The color of the app layout toggle button on hover.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-layout-toggle-selected": {
           "$description": "The color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-link-default": {
           "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-link-hover": {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-notification-default": {
@@ -22324,77 +24849,77 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The text color of the active segment in a segmented control.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-segment-default": {
           "$description": "The text color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-segment-hover": {
           "$description": "The text color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-status-error": {
           "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-text-status-inactive": {
           "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-status-info": {
           "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-status-success": {
           "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-text-status-warning": {
           "$description": "The color of warning icons.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-text-toggle-button-icon-pressed": {
           "$description": "The pressed text color of icon toggle buttons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-toggle-button-normal-pressed": {
           "$description": "The pressed text color of normal toggle buttons.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-top-navigation-title": {
           "$description": "The color of the title in the top navigation.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "font-family-base": {
@@ -22809,7 +25334,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -22825,8 +25350,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -23042,8 +25567,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -23294,8 +25819,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -25334,7 +27859,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -25350,8 +27875,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -25567,8 +28092,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -25819,8 +28344,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -27859,7 +30384,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -27875,8 +30400,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -28092,8 +30617,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -28344,8 +30869,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -30384,7 +32909,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -30400,8 +32925,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -30617,8 +33142,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -30869,8 +33394,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-border-item-focused": {
@@ -32909,7 +35434,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -32925,8 +35450,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
           },
         },
         "color-background-button-normal-active": {
@@ -33142,8 +35667,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -33394,8 +35919,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-border-item-focused": {
@@ -35434,7 +37959,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "2px",
+      "$value": "1px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
@@ -35450,8 +37975,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-avatar-gen-ai": {
       "$description": "The gen-ai background color of avatars.",
       "$value": {
-        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
       },
     },
     "color-background-button-normal-active": {
@@ -35667,8 +38192,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-loading-bar-gen-ai": {
       "$description": "The background color of gen-ai loading bars.",
       "$value": {
-        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
       },
     },
     "color-background-notification-blue": {
@@ -35919,8 +38444,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-border-input-focused": {
       "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
       "$value": {
-        "dark": "#b8e7ff",
-        "light": "#002b66",
+        "dark": "#42b4ff",
+        "light": "#006ce0",
       },
     },
     "color-border-item-focused": {

From 24552e6b166d3b84e94a1223b1d313d74706e1c6 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 2 Apr 2025 17:43:39 +0200
Subject: [PATCH 16/35] Temporarly increase package size limit for exploration

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

diff --git a/package.json b/package.json
index cf5847f4d0..03d5054243 100644
--- a/package.json
+++ b/package.json
@@ -165,7 +165,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "750 kB"
+      "limit": "800 kB"
     }
   ],
   "browserslist": [

From 116e903fe6eb73e7ec17c13944a47d026c72edf9 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 3 Apr 2025 14:47:38 +0200
Subject: [PATCH 17/35] chore: Stroke adjustment

---
 src/button-dropdown/item-element/styles.scss   | 2 +-
 src/button-dropdown/styles.scss                | 8 ++++----
 src/button/styles.scss                         | 4 ++--
 src/input/styles.scss                          | 4 ++--
 src/internal/components/token-list/styles.scss | 4 ++--
 src/internal/styles/forms/constants.scss       | 2 +-
 src/internal/styles/forms/mixins.scss          | 8 ++++----
 style-dictionary/utils/token-names.ts          | 3 ++-
 style-dictionary/visual-refresh/borders.ts     | 1 +
 9 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/button-dropdown/item-element/styles.scss b/src/button-dropdown/item-element/styles.scss
index 4227d96f39..7f0c89f297 100644
--- a/src/button-dropdown/item-element/styles.scss
+++ b/src/button-dropdown/item-element/styles.scss
@@ -15,7 +15,7 @@
   padding-block: 0;
   padding-inline: 0;
   color: awsui.$color-text-dropdown-item-default;
-  margin-block-start: calc(-1 * #{styles.$control-border-width});
+  margin-block-start: calc(-1 * #{awsui.$border-width-dropdown});
   cursor: pointer;
 
   &.disabled {
diff --git a/src/button-dropdown/styles.scss b/src/button-dropdown/styles.scss
index 828a703c3a..789901cf71 100644
--- a/src/button-dropdown/styles.scss
+++ b/src/button-dropdown/styles.scss
@@ -39,9 +39,9 @@ $dropdown-trigger-icon-offset: 2px;
   list-style: none;
   padding-block: awsui.$space-s;
   padding-inline: awsui.$space-l;
-  border-block-start: styles.$control-border-width solid transparent;
-  border-block-end: styles.$control-border-width solid awsui.$color-border-dropdown-group;
-  border-inline: styles.$control-border-width solid transparent;
+  border-block-start: awsui.$border-width-dropdown solid transparent;
+  border-block-end: awsui.$border-width-dropdown solid awsui.$color-border-dropdown-group;
+  border-inline: awsui.$border-width-dropdown solid transparent;
 }
 
 .title,
@@ -107,7 +107,7 @@ $dropdown-trigger-icon-offset: 2px;
     }
 
     &:not(:first-child) > .trigger-button {
-      margin-inline-start: calc(#{styles.$control-border-width} * -1);
+      margin-inline-start: calc(#{awsui.$border-width-button} * -1);
     }
   }
 }
diff --git a/src/button/styles.scss b/src/button/styles.scss
index ed051610b0..be92aadc0b 100644
--- a/src/button/styles.scss
+++ b/src/button/styles.scss
@@ -56,8 +56,8 @@
   border-start-end-radius: awsui.$border-radius-button;
   border-end-start-radius: awsui.$border-radius-button;
   border-end-end-radius: awsui.$border-radius-button;
-  border-block: styles.$control-border-width solid;
-  border-inline: styles.$control-border-width solid;
+  border-block: awsui.$border-width-button solid;
+  border-inline: awsui.$border-width-button solid;
   padding-block: styles.$control-padding-vertical;
   padding-inline: awsui.$space-button-horizontal;
   display: inline-block; // for <a> as a button
diff --git a/src/input/styles.scss b/src/input/styles.scss
index ca0ccccd4d..0eaa7d82e3 100644
--- a/src/input/styles.scss
+++ b/src/input/styles.scss
@@ -84,7 +84,7 @@
     @include styles.form-invalid-control();
     &.input-has-icon-left {
       padding-inline-start: calc(
-        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{styles.$control-border-width})
+        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
       );
     }
   }
@@ -93,7 +93,7 @@
     @include styles.form-warning-control();
     &.input-has-icon-left {
       padding-inline-start: calc(
-        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{styles.$control-border-width})
+        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
       );
     }
   }
diff --git a/src/internal/components/token-list/styles.scss b/src/internal/components/token-list/styles.scss
index a622c93447..71650b2877 100644
--- a/src/internal/components/token-list/styles.scss
+++ b/src/internal/components/token-list/styles.scss
@@ -75,8 +75,8 @@
   display: flex;
   align-items: center;
   background-color: transparent;
-  border-block: styles.$control-border-width solid transparent;
-  border-inline: styles.$control-border-width solid transparent;
+  border-block: awsui.$border-width-button solid transparent;
+  border-inline: awsui.$border-width-button solid transparent;
 
   padding-block: 0;
   padding-inline: 0;
diff --git a/src/internal/styles/forms/constants.scss b/src/internal/styles/forms/constants.scss
index b4fb849bdb..2ef2bf934b 100644
--- a/src/internal/styles/forms/constants.scss
+++ b/src/internal/styles/forms/constants.scss
@@ -26,7 +26,7 @@ $control-padding: $control-padding-vertical $control-padding-horizontal;
 
 $invalid-control-left-border: awsui.$border-invalid-width;
 $invalid-control-left-padding: calc(
-  #{$control-padding-horizontal} - (#{$invalid-control-left-border} - #{$control-border-width})
+  #{$control-padding-horizontal} - (#{$invalid-control-left-border} - #{awsui.$border-width-field})
 );
 
 $control-icon-vertical-offset: calc(50% - #{awsui.$line-height-body-m} / 2);
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index 99df14c084..b592d48596 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -126,16 +126,16 @@
 
 @mixin form-disabled-element {
   background-color: awsui.$color-background-input-disabled;
-  border-block: constants.$control-border-width solid awsui.$color-border-input-disabled;
-  border-inline: constants.$control-border-width solid awsui.$color-border-input-disabled;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-disabled;
   color: awsui.$color-text-input-disabled;
   cursor: auto;
 }
 
 @mixin form-readonly-element {
   background-color: awsui.$color-background-input-default;
-  border-block: constants.$control-border-width solid awsui.$color-border-input-disabled;
-  border-inline: constants.$control-border-width solid awsui.$color-border-input-disabled;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-disabled;
 }
 
 @mixin form-placeholder {
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 56166e9c58..b6f9c0c16d 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -588,7 +588,8 @@ export type BordersTokenName =
   | 'borderWidthField'
   | 'borderWidthButton'
   | 'borderWidthToken'
-  | 'borderWidthPopover';
+  | 'borderWidthPopover'
+  | 'borderWidthDropdown';
 export type MotionTokenName =
   | 'motionDurationExtraFast'
   | 'motionDurationExtraSlow'
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index 26f9fff099..a3de17abe3 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -46,4 +46,5 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderWidthButton: '2px',
   borderWidthToken: '2px',
   borderWidthPopover: '2px',
+  borderWidthDropdown: '2px',
 };

From 543b59a2f86880e4790018b4766e8df56ede6506 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 3 Apr 2025 15:03:06 +0200
Subject: [PATCH 18/35] update snapshot

---
 .../__snapshots__/themes.test.ts.snap         |  40 +++---
 .../__snapshots__/design-tokens.test.ts.snap  | 128 +++++++++---------
 2 files changed, 88 insertions(+), 80 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 02307a666e..575a3b0f1c 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -42,11 +42,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -96,7 +97,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -709,11 +710,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff5d64",
   "color-background-button-link-active": "#16191f",
   "color-background-button-link-hover": "#21252c",
@@ -763,7 +765,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-layout-toggle-selected-active": "#00a1c9",
   "color-background-layout-toggle-selected-default": "#44b9d6",
   "color-background-layout-toggle-selected-hover": "#44b9d6",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(22, 25, 31, 0.8)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -1376,11 +1378,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -1430,7 +1433,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -2043,11 +2046,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -2097,7 +2101,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -2710,11 +2714,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#db0000",
   "color-background-button-link-active": "#d1f1ff",
   "color-background-button-link-hover": "#f0fbff",
@@ -2764,7 +2769,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-layout-toggle-selected-active": "#006ce0",
   "color-background-layout-toggle-selected-default": "#006ce0",
   "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -3377,11 +3382,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#db0000",
   "color-background-button-link-active": "#d1f1ff",
   "color-background-button-link-hover": "#f0fbff",
@@ -3431,7 +3437,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#006ce0",
   "color-background-layout-toggle-selected-default": "#006ce0",
   "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -4044,11 +4050,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff7a7a",
   "color-background-button-link-active": "#333843",
   "color-background-button-link-hover": "#1b232d",
@@ -4098,7 +4105,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#42b4ff",
   "color-background-layout-toggle-selected-default": "#42b4ff",
   "color-background-layout-toggle-selected-hover": "#75cfff",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -4711,11 +4718,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff7a7a",
   "color-background-button-link-active": "#333843",
   "color-background-button-link-hover": "#1b232d",
@@ -4765,7 +4773,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#42b4ff",
   "color-background-layout-toggle-selected-default": "#42b4ff",
   "color-background-layout-toggle-selected-hover": "#75cfff",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 290d84182a..e67cda74f7 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -95,8 +95,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -312,8 +312,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -2620,8 +2620,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -2837,8 +2837,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -5145,8 +5145,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -5362,8 +5362,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -7670,8 +7670,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -7887,8 +7887,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -10195,8 +10195,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -10412,8 +10412,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -12720,8 +12720,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -12937,8 +12937,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -15245,8 +15245,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-avatar-gen-ai": {
       "$description": "The gen-ai background color of avatars.",
       "$value": {
-        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
       },
     },
     "color-background-button-normal-active": {
@@ -15462,8 +15462,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-loading-bar-gen-ai": {
       "$description": "The background color of gen-ai loading bars.",
       "$value": {
-        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
       },
     },
     "color-background-notification-blue": {
@@ -17775,8 +17775,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -17992,8 +17992,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -20300,8 +20300,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -20517,8 +20517,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -22825,8 +22825,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -23042,8 +23042,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -25350,8 +25350,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -25567,8 +25567,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -27875,8 +27875,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -28092,8 +28092,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -30400,8 +30400,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -30617,8 +30617,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -32925,8 +32925,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -33142,8 +33142,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -35450,8 +35450,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -35667,8 +35667,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -37975,8 +37975,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-avatar-gen-ai": {
       "$description": "The gen-ai background color of avatars.",
       "$value": {
-        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
       },
     },
     "color-background-button-normal-active": {
@@ -38192,8 +38192,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-loading-bar-gen-ai": {
       "$description": "The background color of gen-ai loading bars.",
       "$value": {
-        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
       },
     },
     "color-background-notification-blue": {

From a2de9466b4a2c582aa10e200dd5698281010c180 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 3 Apr 2025 15:26:41 +0200
Subject: [PATCH 19/35] update snapshots

---
 .../__snapshots__/themes.test.ts.snap         |  40 +++---
 .../__snapshots__/design-tokens.test.ts.snap  | 128 +++++++++---------
 2 files changed, 88 insertions(+), 80 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 02307a666e..575a3b0f1c 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -42,11 +42,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -96,7 +97,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -709,11 +710,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff5d64",
   "color-background-button-link-active": "#16191f",
   "color-background-button-link-hover": "#21252c",
@@ -763,7 +765,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-layout-toggle-selected-active": "#00a1c9",
   "color-background-layout-toggle-selected-default": "#44b9d6",
   "color-background-layout-toggle-selected-hover": "#44b9d6",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(22, 25, 31, 0.8)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -1376,11 +1378,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -1430,7 +1433,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -2043,11 +2046,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "1px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#545b64",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#d13212",
   "color-background-button-link-active": "#eaeded",
   "color-background-button-link-hover": "#fafafa",
@@ -2097,7 +2101,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-layout-toggle-selected-active": "#0073bb",
   "color-background-layout-toggle-selected-default": "#0073bb",
   "color-background-layout-toggle-selected-hover": "#0a4a74",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
@@ -2710,11 +2714,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#db0000",
   "color-background-button-link-active": "#d1f1ff",
   "color-background-button-link-hover": "#f0fbff",
@@ -2764,7 +2769,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-layout-toggle-selected-active": "#006ce0",
   "color-background-layout-toggle-selected-default": "#006ce0",
   "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -3377,11 +3382,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#db0000",
   "color-background-button-link-active": "#d1f1ff",
   "color-background-button-link-hover": "#f0fbff",
@@ -3431,7 +3437,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#006ce0",
   "color-background-layout-toggle-selected-default": "#006ce0",
   "color-background-layout-toggle-selected-hover": "#004a9e",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -4044,11 +4050,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff7a7a",
   "color-background-button-link-active": "#333843",
   "color-background-button-link-hover": "#1b232d",
@@ -4098,7 +4105,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#42b4ff",
   "color-background-layout-toggle-selected-default": "#42b4ff",
   "color-background-layout-toggle-selected-hover": "#75cfff",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
@@ -4711,11 +4718,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
-  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+  "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
   "color-background-badge-icon": "#ff7a7a",
   "color-background-button-link-active": "#333843",
   "color-background-button-link-hover": "#1b232d",
@@ -4765,7 +4773,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toggle-selected-active": "#42b4ff",
   "color-background-layout-toggle-selected-default": "#42b4ff",
   "color-background-layout-toggle-selected-hover": "#75cfff",
-  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+  "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 290d84182a..e67cda74f7 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -95,8 +95,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -312,8 +312,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -2620,8 +2620,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -2837,8 +2837,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -5145,8 +5145,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -5362,8 +5362,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -7670,8 +7670,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -7887,8 +7887,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -10195,8 +10195,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -10412,8 +10412,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -12720,8 +12720,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -12937,8 +12937,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -15245,8 +15245,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-avatar-gen-ai": {
       "$description": "The gen-ai background color of avatars.",
       "$value": {
-        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
       },
     },
     "color-background-button-normal-active": {
@@ -15462,8 +15462,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-loading-bar-gen-ai": {
       "$description": "The background color of gen-ai loading bars.",
       "$value": {
-        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
       },
     },
     "color-background-notification-blue": {
@@ -17775,8 +17775,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -17992,8 +17992,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -20300,8 +20300,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -20517,8 +20517,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -22825,8 +22825,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -23042,8 +23042,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -25350,8 +25350,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -25567,8 +25567,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -27875,8 +27875,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -28092,8 +28092,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -30400,8 +30400,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -30617,8 +30617,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -32925,8 +32925,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -33142,8 +33142,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -35450,8 +35450,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-avatar-gen-ai": {
           "$description": "The gen-ai background color of avatars.",
           "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
           },
         },
         "color-background-button-normal-active": {
@@ -35667,8 +35667,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-loading-bar-gen-ai": {
           "$description": "The background color of gen-ai loading bars.",
           "$value": {
-            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
           },
         },
         "color-background-notification-blue": {
@@ -37975,8 +37975,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-avatar-gen-ai": {
       "$description": "The gen-ai background color of avatars.",
       "$value": {
-        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
-        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
       },
     },
     "color-background-button-normal-active": {
@@ -38192,8 +38192,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-loading-bar-gen-ai": {
       "$description": "The background color of gen-ai loading bars.",
       "$value": {
-        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
-        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
       },
     },
     "color-background-notification-blue": {

From 495dead126cfa96fe9d643addc5a364081f9243a Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 7 Apr 2025 09:55:40 +0200
Subject: [PATCH 20/35] update snapshot

---
 .../__snapshots__/design-tokens.test.ts.snap  | 2797 +----------------
 1 file changed, 136 insertions(+), 2661 deletions(-)

diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index e67cda74f7..4cf000c1fa 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -17759,7 +17759,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -18244,8 +18244,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -20284,7 +20284,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20406,2560 +20406,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-control-disabled": {
-          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-dropdown-item-default": {
-          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-dropdown-item-filter-match": {
-          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-dropdown-item-hover": {
-          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
-          "$value": {
-            "dark": "#131920",
-            "light": "#131920",
-          },
-        },
-        "color-background-home-header": {
-          "$description": "The background color of the home header, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-background-input-default": {
-          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-input-disabled": {
-          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-item-selected": {
-          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
-          "$value": {
-            "dark": "#001129",
-            "light": "#001129",
-          },
-        },
-        "color-background-layout-main": {
-          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-layout-toggle-active": {
-          "$description": "The background color of the app layout toggle button when it's active.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-layout-toggle-default": {
-          "$description": "The default background color of the app layout toggle button.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-layout-toggle-hover": {
-          "$description": "The background color of the app layout toggle button on hover.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-layout-toggle-selected-active": {
-          "$description": "The background color of the app layout toggle button when it's selected and active.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-layout-toggle-selected-default": {
-          "$description": "The default background color of the app layout toggle button when it's selected.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-layout-toggle-selected-hover": {
-          "$description": "The background color of the app layout toggle button on hover when it's selected.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-background-loading-bar-gen-ai": {
-          "$description": "The background color of gen-ai loading bars.",
-          "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-          },
-        },
-        "color-background-notification-blue": {
-          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-background-notification-green": {
-          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
-          "$value": {
-            "dark": "#00802f",
-            "light": "#00802f",
-          },
-        },
-        "color-background-notification-grey": {
-          "$description": "Background color for grey notifications. For example: grey badges.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-notification-red": {
-          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
-          "$value": {
-            "dark": "#db0000",
-            "light": "#db0000",
-          },
-        },
-        "color-background-notification-severity-critical": {
-          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#870303",
-          },
-        },
-        "color-background-notification-severity-high": {
-          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#ce3311",
-          },
-        },
-        "color-background-notification-severity-low": {
-          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#f2cd54",
-            "light": "#f2cd54",
-          },
-        },
-        "color-background-notification-severity-medium": {
-          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#f89256",
-          },
-        },
-        "color-background-notification-severity-neutral": {
-          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-notification-yellow": {
-          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
-          "$value": {
-            "dark": "#ffe347",
-            "light": "#ffe347",
-          },
-        },
-        "color-background-popover": {
-          "$description": "Background color for the popover container.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-segment-active": {
-          "$description": "The background color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-segment-default": {
-          "$description": "The background color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-background-segment-disabled": {
-          "$description": "The background color of disabled segments in a segmented control.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-segment-hover": {
-          "$description": "The background color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
-          },
-        },
-        "color-background-status-error": {
-          "$description": "The background color of an item in error state. For example: error alerts.",
-          "$value": {
-            "dark": "#1f0000",
-            "light": "#1f0000",
-          },
-        },
-        "color-background-status-info": {
-          "$description": "The background color of an informational item. For example: information alerts.",
-          "$value": {
-            "dark": "#001129",
-            "light": "#001129",
-          },
-        },
-        "color-background-status-success": {
-          "$description": "The background color of an item in success state. For example: success alerts.",
-          "$value": {
-            "dark": "#001401",
-            "light": "#001401",
-          },
-        },
-        "color-background-status-warning": {
-          "$description": "The background color of an item in warning state. For example: warning alerts.",
-          "$value": {
-            "dark": "#191100",
-            "light": "#191100",
-          },
-        },
-        "color-background-toggle-button-normal-pressed": {
-          "$description": "The background color of normal toggle buttons in pressed state.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-toggle-checked-disabled": {
-          "$description": "The background color of checked toggles in disabled state.",
-          "$value": {
-            "dark": "#002b66",
-            "light": "#002b66",
-          },
-        },
-        "color-board-placeholder-active": {
-          "$description": "The color of board placeholder in active state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-board-placeholder-hover": {
-          "$description": "The color of board placeholder in hovered state.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-border-button-normal-active": {
-          "$description": "The border color of normal buttons in active state.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-border-button-normal-default": {
-          "$description": "The border color of normal buttons.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-button-normal-disabled": {
-          "$description": "The border color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-button-normal-hover": {
-          "$description": "The border color of normal buttons in hover state.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-border-button-primary-disabled": {
-          "$description": "The border color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
-          },
-        },
-        "color-border-container-top": {
-          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-border-control-default": {
-          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-border-divider-default": {
-          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-divider-secondary": {
-          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
-          },
-        },
-        "color-border-dropdown-item-focused": {
-          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-dropdown-item-hover": {
-          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-input-default": {
-          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-input-focused": {
-          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-item-focused": {
-          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-border-item-selected": {
-          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-segment-active": {
-          "$description": "The border color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-default": {
-          "$description": "The border color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-disabled": {
-          "$description": "The border color of disabled segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-hover": {
-          "$description": "The border color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-status-error": {
-          "$description": "The border color of an item in error state. For example: error alerts.",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#ff7a7a",
-          },
-        },
-        "color-border-status-info": {
-          "$description": "The border color of an informational item. For example: information alerts.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-status-success": {
-          "$description": "The border color of an item in success state. For example: success alerts.",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#2bb534",
-          },
-        },
-        "color-border-status-warning": {
-          "$description": "The border color of an item in warning state. For example: warning alerts.",
-          "$value": {
-            "dark": "#fbd332",
-            "light": "#fbd332",
-          },
-        },
-        "color-border-toggle-button-normal-pressed": {
-          "$description": "The border color of normal toggle buttons in pressed state.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-charts-blue-1-1000": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#b3e4f8",
-            "light": "#01437d",
-          },
-        },
-        "color-charts-blue-1-1100": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#caedfc",
-            "light": "#003c75",
-          },
-        },
-        "color-charts-blue-1-1200": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ddf4ff",
-            "light": "#00366d",
-          },
-        },
-        "color-charts-blue-1-300": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#00819c",
-            "light": "#529ccb",
-          },
-        },
-        "color-charts-blue-1-400": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#0497ba",
-            "light": "#3184c2",
-          },
-        },
-        "color-charts-blue-1-500": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#08aad2",
-            "light": "#0273bb",
-          },
-        },
-        "color-charts-blue-1-600": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#44b9dd",
-            "light": "#0166ab",
-          },
-        },
-        "color-charts-blue-1-700": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#63c6e7",
-            "light": "#015b9d",
-          },
-        },
-        "color-charts-blue-1-800": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#79d2f0",
-            "light": "#015292",
-          },
-        },
-        "color-charts-blue-1-900": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#98dcf5",
-            "light": "#014a87",
-          },
-        },
-        "color-charts-blue-2-1000": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#d2dcff",
-            "light": "#23379b",
-          },
-        },
-        "color-charts-blue-2-1100": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#dfe6ff",
-            "light": "#1f3191",
-          },
-        },
-        "color-charts-blue-2-1200": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ecf0ff",
-            "light": "#1b2b88",
-          },
-        },
-        "color-charts-blue-2-300": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#486de8",
-            "light": "#688ae8",
-          },
-        },
-        "color-charts-blue-2-400": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#6384f5",
-            "light": "#5978e3",
-          },
-        },
-        "color-charts-blue-2-500": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#7698fe",
-            "light": "#4066df",
-          },
-        },
-        "color-charts-blue-2-600": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#8ea9ff",
-            "light": "#3759ce",
-          },
-        },
-        "color-charts-blue-2-700": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#a2b8ff",
-            "light": "#314fbf",
-          },
-        },
-        "color-charts-blue-2-800": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#b1c5ff",
-            "light": "#2c46b1",
-          },
-        },
-        "color-charts-blue-2-900": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#c3d1ff",
-            "light": "#273ea5",
-          },
-        },
-        "color-charts-green-1000": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#c5e7a8",
-            "light": "#104d01",
-          },
-        },
-        "color-charts-green-1100": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#d5efbe",
-            "light": "#0f4601",
-          },
-        },
-        "color-charts-green-1200": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#e4f7d5",
-            "light": "#0d4000",
-          },
-        },
-        "color-charts-green-300": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#48851a",
-            "light": "#67a353",
-          },
-        },
-        "color-charts-green-400": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#5a9b29",
-            "light": "#41902c",
-          },
-        },
-        "color-charts-green-500": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#69ae34",
-            "light": "#1f8104",
-          },
-        },
-        "color-charts-green-600": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#7dbd4c",
-            "light": "#1a7302",
-          },
-        },
-        "color-charts-green-700": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#8fca61",
-            "light": "#176702",
-          },
-        },
-        "color-charts-green-800": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#9fd673",
-            "light": "#145d02",
-          },
-        },
-        "color-charts-green-900": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#b2df8d",
-            "light": "#125502",
-          },
-        },
-        "color-charts-line-axis": {
-          "$description": "Color of the axis lines in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-line-grid": {
-          "$description": "Color of the grid lines in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-line-tick": {
-          "$description": "Color of the tick marks in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-orange-1000": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd4bb",
-            "light": "#732c02",
-          },
-        },
-        "color-charts-orange-1100": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffe1cf",
-            "light": "#692801",
-          },
-        },
-        "color-charts-orange-1200": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffede2",
-            "light": "#602400",
-          },
-        },
-        "color-charts-orange-300": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#c55305",
-            "light": "#e07941",
-          },
-        },
-        "color-charts-orange-400": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#de6923",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-orange-500": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#f27c36",
-            "light": "#bc4d01",
-          },
-        },
-        "color-charts-orange-600": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#a84401",
-          },
-        },
-        "color-charts-orange-700": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#fca572",
-            "light": "#983c02",
-          },
-        },
-        "color-charts-orange-800": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb68b",
-            "light": "#8a3603",
-          },
-        },
-        "color-charts-orange-900": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc6a4",
-            "light": "#7e3103",
-          },
-        },
-        "color-charts-palette-categorical-1": {
-          "$description": "Color #1 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#486de8",
-            "light": "#688ae8",
-          },
-        },
-        "color-charts-palette-categorical-10": {
-          "$description": "Color #10 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#a84401",
-          },
-        },
-        "color-charts-palette-categorical-11": {
-          "$description": "Color #11 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c3d1ff",
-            "light": "#273ea5",
-          },
-        },
-        "color-charts-palette-categorical-12": {
-          "$description": "Color #12 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffdfe8",
-            "light": "#780d35",
-          },
-        },
-        "color-charts-palette-categorical-13": {
-          "$description": "Color #13 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#94e0d0",
-            "light": "#03524a",
-          },
-        },
-        "color-charts-palette-categorical-14": {
-          "$description": "Color #14 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#efe2ff",
-            "light": "#4a238b",
-          },
-        },
-        "color-charts-palette-categorical-15": {
-          "$description": "Color #15 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffc6a4",
-            "light": "#7e3103",
-          },
-        },
-        "color-charts-palette-categorical-16": {
-          "$description": "Color #16 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ecf0ff",
-            "light": "#1b2b88",
-          },
-        },
-        "color-charts-palette-categorical-17": {
-          "$description": "Color #17 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d56889",
-            "light": "#ce567c",
-          },
-        },
-        "color-charts-palette-categorical-18": {
-          "$description": "Color #18 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d7f7f0",
-            "light": "#003e38",
-          },
-        },
-        "color-charts-palette-categorical-19": {
-          "$description": "Color #19 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#a173ea",
-            "light": "#9469d6",
-          },
-        },
-        "color-charts-palette-categorical-2": {
-          "$description": "Color #2 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#e07f9d",
-            "light": "#c33d69",
-          },
-        },
-        "color-charts-palette-categorical-20": {
-          "$description": "Color #20 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffede2",
-            "light": "#602400",
-          },
-        },
-        "color-charts-palette-categorical-21": {
-          "$description": "Color #21 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#7698fe",
-            "light": "#4066df",
-          },
-        },
-        "color-charts-palette-categorical-22": {
-          "$description": "Color #22 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f5a2bb",
-            "light": "#a32952",
-          },
-        },
-        "color-charts-palette-categorical-23": {
-          "$description": "Color #23 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#00b09b",
-            "light": "#0d7d70",
-          },
-        },
-        "color-charts-palette-categorical-24": {
-          "$description": "Color #24 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#cbabfc",
-            "light": "#6b40b2",
-          },
-        },
-        "color-charts-palette-categorical-25": {
-          "$description": "Color #25 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f27c36",
-            "light": "#bc4d01",
-          },
-        },
-        "color-charts-palette-categorical-26": {
-          "$description": "Color #26 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#b1c5ff",
-            "light": "#2c46b1",
-          },
-        },
-        "color-charts-palette-categorical-27": {
-          "$description": "Color #27 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffd1de",
-            "light": "#81143b",
-          },
-        },
-        "color-charts-palette-categorical-28": {
-          "$description": "Color #28 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#77d7c3",
-            "light": "#045b52",
-          },
-        },
-        "color-charts-palette-categorical-29": {
-          "$description": "Color #29 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#e8d5ff",
-            "light": "#512994",
-          },
-        },
-        "color-charts-palette-categorical-3": {
-          "$description": "Color #3 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#018977",
-            "light": "#2ea597",
-          },
-        },
-        "color-charts-palette-categorical-30": {
-          "$description": "Color #30 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffb68b",
-            "light": "#8a3603",
-          },
-        },
-        "color-charts-palette-categorical-31": {
-          "$description": "Color #31 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#dfe6ff",
-            "light": "#1f3191",
-          },
-        },
-        "color-charts-palette-categorical-32": {
-          "$description": "Color #32 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c64a70",
-            "light": "#da7596",
-          },
-        },
-        "color-charts-palette-categorical-33": {
-          "$description": "Color #33 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c2f0e6",
-            "light": "#01443e",
-          },
-        },
-        "color-charts-palette-categorical-34": {
-          "$description": "Color #34 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#8d59de",
-            "light": "#a783e1",
-          },
-        },
-        "color-charts-palette-categorical-35": {
-          "$description": "Color #35 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffe1cf",
-            "light": "#692801",
-          },
-        },
-        "color-charts-palette-categorical-36": {
-          "$description": "Color #36 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#6384f5",
-            "light": "#5978e3",
-          },
-        },
-        "color-charts-palette-categorical-37": {
-          "$description": "Color #37 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#eb92ad",
-            "light": "#b1325c",
-          },
-        },
-        "color-charts-palette-categorical-38": {
-          "$description": "Color #38 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#009d89",
-            "light": "#1c8e81",
-          },
-        },
-        "color-charts-palette-categorical-39": {
-          "$description": "Color #39 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#bf9bf9",
-            "light": "#7749bf",
-          },
-        },
-        "color-charts-palette-categorical-4": {
-          "$description": "Color #4 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#b088f5",
-            "light": "#8456ce",
-          },
-        },
-        "color-charts-palette-categorical-40": {
-          "$description": "Color #40 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#de6923",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-palette-categorical-41": {
-          "$description": "Color #41 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#a2b8ff",
-            "light": "#314fbf",
-          },
-        },
-        "color-charts-palette-categorical-42": {
-          "$description": "Color #42 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffc1d4",
-            "light": "#8b1b42",
-          },
-        },
-        "color-charts-palette-categorical-43": {
-          "$description": "Color #43 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#5fccb7",
-            "light": "#06645a",
-          },
-        },
-        "color-charts-palette-categorical-44": {
-          "$description": "Color #44 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#dfc8ff",
-            "light": "#59309d",
-          },
-        },
-        "color-charts-palette-categorical-45": {
-          "$description": "Color #45 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#fca572",
-            "light": "#983c02",
-          },
-        },
-        "color-charts-palette-categorical-46": {
-          "$description": "Color #46 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d2dcff",
-            "light": "#23379b",
-          },
-        },
-        "color-charts-palette-categorical-47": {
-          "$description": "Color #47 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffecf1",
-            "light": "#6f062f",
-          },
-        },
-        "color-charts-palette-categorical-48": {
-          "$description": "Color #48 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ace9db",
-            "light": "#014b44",
-          },
-        },
-        "color-charts-palette-categorical-49": {
-          "$description": "Color #49 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f5edff",
-            "light": "#431d84",
-          },
-        },
-        "color-charts-palette-categorical-5": {
-          "$description": "Color #5 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c55305",
-            "light": "#e07941",
-          },
-        },
-        "color-charts-palette-categorical-50": {
-          "$description": "Color #50 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffd4bb",
-            "light": "#732c02",
-          },
-        },
-        "color-charts-palette-categorical-6": {
-          "$description": "Color #6 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#8ea9ff",
-            "light": "#3759ce",
-          },
-        },
-        "color-charts-palette-categorical-7": {
-          "$description": "Color #7 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffb0c8",
-            "light": "#962249",
-          },
-        },
-        "color-charts-palette-categorical-8": {
-          "$description": "Color #8 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#40bfa9",
-            "light": "#096f64",
-          },
-        },
-        "color-charts-palette-categorical-9": {
-          "$description": "Color #9 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d6baff",
-            "light": "#6237a7",
-          },
-        },
-        "color-charts-pink-1000": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd1de",
-            "light": "#81143b",
-          },
-        },
-        "color-charts-pink-1100": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffdfe8",
-            "light": "#780d35",
-          },
-        },
-        "color-charts-pink-1200": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffecf1",
-            "light": "#6f062f",
-          },
-        },
-        "color-charts-pink-300": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#c64a70",
-            "light": "#da7596",
-          },
-        },
-        "color-charts-pink-400": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#d56889",
-            "light": "#ce567c",
-          },
-        },
-        "color-charts-pink-500": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#e07f9d",
-            "light": "#c33d69",
-          },
-        },
-        "color-charts-pink-600": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#eb92ad",
-            "light": "#b1325c",
-          },
-        },
-        "color-charts-pink-700": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#f5a2bb",
-            "light": "#a32952",
-          },
-        },
-        "color-charts-pink-800": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb0c8",
-            "light": "#962249",
-          },
-        },
-        "color-charts-pink-900": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc1d4",
-            "light": "#8b1b42",
-          },
-        },
-        "color-charts-purple-1000": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#e8d5ff",
-            "light": "#512994",
-          },
-        },
-        "color-charts-purple-1100": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#efe2ff",
-            "light": "#4a238b",
-          },
-        },
-        "color-charts-purple-1200": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#f5edff",
-            "light": "#431d84",
-          },
-        },
-        "color-charts-purple-300": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#8d59de",
-            "light": "#a783e1",
-          },
-        },
-        "color-charts-purple-400": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#a173ea",
-            "light": "#9469d6",
-          },
-        },
-        "color-charts-purple-500": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#b088f5",
-            "light": "#8456ce",
-          },
-        },
-        "color-charts-purple-600": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#bf9bf9",
-            "light": "#7749bf",
-          },
-        },
-        "color-charts-purple-700": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#cbabfc",
-            "light": "#6b40b2",
-          },
-        },
-        "color-charts-purple-800": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#d6baff",
-            "light": "#6237a7",
-          },
-        },
-        "color-charts-purple-900": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#dfc8ff",
-            "light": "#59309d",
-          },
-        },
-        "color-charts-red-1000": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd2cf",
-            "light": "#7d2105",
-          },
-        },
-        "color-charts-red-1100": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffe0dd",
-            "light": "#721e03",
-          },
-        },
-        "color-charts-red-1200": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffecea",
-            "light": "#671c00",
-          },
-        },
-        "color-charts-red-300": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#ea7158",
-          },
-        },
-        "color-charts-red-400": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#ed5958",
-            "light": "#dc5032",
-          },
-        },
-        "color-charts-red-500": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#d13313",
-          },
-        },
-        "color-charts-red-600": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#ff8a8a",
-            "light": "#ba2e0f",
-          },
-        },
-        "color-charts-red-700": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#ffa09e",
-            "light": "#a82a0c",
-          },
-        },
-        "color-charts-red-800": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb3b0",
-            "light": "#972709",
-          },
-        },
-        "color-charts-red-900": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc4c0",
-            "light": "#892407",
-          },
-        },
-        "color-charts-status-critical": {
-          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#7d2105",
-          },
-        },
-        "color-charts-status-high": {
-          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#ba2e0f",
-          },
-        },
-        "color-charts-status-info": {
-          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
-          "$value": {
-            "dark": "#08aad2",
-            "light": "#3184c2",
-          },
-        },
-        "color-charts-status-low": {
-          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#dfb52c",
-            "light": "#b2911c",
-          },
-        },
-        "color-charts-status-medium": {
-          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-status-neutral": {
-          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-charts-status-positive": {
-          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
-          "$value": {
-            "dark": "#69ae34",
-            "light": "#67a353",
-          },
-        },
-        "color-charts-teal-1000": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ace9db",
-            "light": "#014b44",
-          },
-        },
-        "color-charts-teal-1100": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#c2f0e6",
-            "light": "#01443e",
-          },
-        },
-        "color-charts-teal-1200": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#d7f7f0",
-            "light": "#003e38",
-          },
-        },
-        "color-charts-teal-300": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#018977",
-            "light": "#2ea597",
-          },
-        },
-        "color-charts-teal-400": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#009d89",
-            "light": "#1c8e81",
-          },
-        },
-        "color-charts-teal-500": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#00b09b",
-            "light": "#0d7d70",
-          },
-        },
-        "color-charts-teal-600": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#40bfa9",
-            "light": "#096f64",
-          },
-        },
-        "color-charts-teal-700": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#5fccb7",
-            "light": "#06645a",
-          },
-        },
-        "color-charts-teal-800": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#77d7c3",
-            "light": "#045b52",
-          },
-        },
-        "color-charts-teal-900": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#94e0d0",
-            "light": "#03524a",
-          },
-        },
-        "color-charts-threshold-info": {
-          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
-          },
-        },
-        "color-charts-threshold-negative": {
-          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#db0000",
-          },
-        },
-        "color-charts-threshold-neutral": {
-          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#656871",
-          },
-        },
-        "color-charts-threshold-positive": {
-          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#00802f",
-          },
-        },
-        "color-charts-yellow-1000": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#f7db8a",
-            "light": "#553f03",
-          },
-        },
-        "color-charts-yellow-1100": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#fce5a8",
-            "light": "#4d3901",
-          },
-        },
-        "color-charts-yellow-1200": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffefc9",
-            "light": "#483300",
-          },
-        },
-        "color-charts-yellow-300": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#977001",
-            "light": "#b2911c",
-          },
-        },
-        "color-charts-yellow-400": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#b08400",
-            "light": "#9c7b0b",
-          },
-        },
-        "color-charts-yellow-500": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#c59600",
-            "light": "#8a6b05",
-          },
-        },
-        "color-charts-yellow-600": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#d3a61c",
-            "light": "#7b5f04",
-          },
-        },
-        "color-charts-yellow-700": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#dfb52c",
-            "light": "#6f5504",
-          },
-        },
-        "color-charts-yellow-800": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#eac33a",
-            "light": "#654d03",
-          },
-        },
-        "color-charts-yellow-900": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#f1cf65",
-            "light": "#5d4503",
-          },
-        },
-        "color-drag-placeholder-active": {
-          "$description": "The color of drag placeholder in active state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-drag-placeholder-hover": {
-          "$description": "The color of drag placeholder in hovered state.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-foreground-control-default": {
-          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-foreground-control-disabled": {
-          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-foreground-control-read-only": {
-          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-accent": {
-          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-avatar": {
-          "$description": "The text and icon color of avatars.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-body-default": {
-          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-body-secondary": {
-          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-breadcrumb-current": {
-          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-breadcrumb-icon": {
-          "$description": "The color used for the icon delimiter between breadcrumb items.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-button-normal-active": {
-          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-button-normal-default": {
-          "$description": "The default text color of normal buttons.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-button-normal-disabled": {
-          "$description": "The text color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-button-normal-hover": {
-          "$description": "The hover text color of normal buttons.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-button-primary-active": {
-          "$description": "The active text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-button-primary-default": {
-          "$description": "The default text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-button-primary-disabled": {
-          "$description": "The text color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-button-primary-hover": {
-          "$description": "The hover text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-chat-bubble-incoming": {
-          "$description": "Text color of \`incoming\` chat bubble.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-chat-bubble-outgoing": {
-          "$description": "Text color of \`outgoing\` chat bubble.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-counter": {
-          "$description": "The default color for counters. For example: counters in table headers",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-dropdown-item-default": {
-          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-dropdown-item-disabled": {
-          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-dropdown-item-filter-match": {
-          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-dropdown-item-highlighted": {
-          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-empty": {
-          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-form-default": {
-          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-form-secondary": {
-          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-group-label": {
-          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-heading-default": {
-          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-heading-secondary": {
-          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-home-header-default": {
-          "$description": "The color of the home header's text, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-home-header-secondary": {
-          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-input-disabled": {
-          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-input-placeholder": {
-          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-interactive-active": {
-          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-interactive-default": {
-          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-interactive-disabled": {
-          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-interactive-hover": {
-          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-interactive-inverted-default": {
-          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-interactive-inverted-hover": {
-          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-label": {
-          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-label-gen-ai": {
-          "$description": "The default color for labels indicating that content is produced by generative AI.",
-          "$value": {
-            "dark": "#bf80ff",
-            "light": "#bf80ff",
-          },
-        },
-        "color-text-layout-toggle": {
-          "$description": "The default color of the app layout toggle.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-layout-toggle-active": {
-          "$description": "The color of the app layout toggle button when it's active.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-text-layout-toggle-hover": {
-          "$description": "The color of the app layout toggle button on hover.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-layout-toggle-selected": {
-          "$description": "The color of the app layout toggle button when it's selected.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-link-default": {
-          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-link-hover": {
-          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-notification-default": {
-          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-critical": {
-          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#000000",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-high": {
-          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-low": {
-          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-notification-severity-medium": {
-          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-notification-severity-neutral": {
-          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-segment-active": {
-          "$description": "The text color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-segment-default": {
-          "$description": "The text color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-segment-hover": {
-          "$description": "The text color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-status-error": {
-          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#ff7a7a",
-          },
-        },
-        "color-text-status-inactive": {
-          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-status-info": {
-          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-status-success": {
-          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#2bb534",
-          },
-        },
-        "color-text-status-warning": {
-          "$description": "The color of warning icons.",
-          "$value": {
-            "dark": "#fbd332",
-            "light": "#fbd332",
-          },
-        },
-        "color-text-toggle-button-icon-pressed": {
-          "$description": "The pressed text color of icon toggle buttons.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-toggle-button-normal-pressed": {
-          "$description": "The pressed text color of normal toggle buttons.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-top-navigation-title": {
-          "$description": "The color of the title in the top navigation.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "font-family-base": {
-          "$description": "The default font family that will be applied globally to the product interface.",
-          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
-        },
-        "font-family-monospace": {
-          "$description": "The monospace font family that will be applied globally to the product interface.",
-          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
-        },
-        "font-size-body-m": {
-          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
-          "$value": "14px",
-        },
-        "font-size-body-s": {
-          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
-          "$value": "12px",
-        },
-        "font-size-display-l": {
-          "$description": "The default font size for large display text.",
-          "$value": "42px",
-        },
-        "font-size-heading-l": {
-          "$description": "The default font size for h2s.",
-          "$value": "20px",
-        },
-        "font-size-heading-m": {
-          "$description": "The default font size for h3s.",
-          "$value": "18px",
-        },
-        "font-size-heading-s": {
-          "$description": "The default font size for h4s.",
-          "$value": "16px",
-        },
-        "font-size-heading-xl": {
-          "$description": "The default font size for h1s.",
-          "$value": "24px",
-        },
-        "font-size-heading-xs": {
-          "$description": "The default font size for h5s.",
-          "$value": "14px",
-        },
-        "font-weight-button": {
-          "$description": "The default font weight for button text.",
-          "$value": "700",
-        },
-        "font-weight-heading-l": {
-          "$description": "The default font weight for h2s.",
-          "$value": "700",
-        },
-        "font-weight-heading-m": {
-          "$description": "The default font weight for h3s.",
-          "$value": "700",
-        },
-        "font-weight-heading-s": {
-          "$description": "The default font weight for h4s.",
-          "$value": "700",
-        },
-        "font-weight-heading-xl": {
-          "$description": "The default font weight for h1s.",
-          "$value": "700",
-        },
-        "font-weight-heading-xs": {
-          "$description": "The default font weight for h5s.",
-          "$value": "700",
-        },
-        "line-height-body-m": {
-          "$description": "The default line height for regular body text.",
-          "$value": "20px",
-        },
-        "line-height-body-s": {
-          "$description": "The default line height for small body text.",
-          "$value": "16px",
-        },
-        "line-height-display-l": {
-          "$description": "The default line height for large display text.",
-          "$value": "48px",
-        },
-        "line-height-heading-l": {
-          "$description": "The default line height for h2s.",
-          "$value": "24px",
-        },
-        "line-height-heading-m": {
-          "$description": "The default line height for h3s.",
-          "$value": "22px",
-        },
-        "line-height-heading-s": {
-          "$description": "The default line height for h4s.",
-          "$value": "20px",
-        },
-        "line-height-heading-xl": {
-          "$description": "The default line height for h1s.",
-          "$value": "30px",
-        },
-        "line-height-heading-xs": {
-          "$description": "The default line height for h5s.",
-          "$value": "18px",
-        },
-        "motion-duration-avatar-gen-ai-gradient": {
-          "$description": "The duration for gradient motion of gen-ai avatars.",
-          "$value": {
-            "default": "3600ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-avatar-loading-dots": {
-          "$description": "The duration for loading motion of avatars.",
-          "$value": {
-            "default": "1200ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-complex": {
-          "$description": "The duration for drawing more attention or accommodating for more complexity.",
-          "$value": {
-            "default": "250ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-expressive": {
-          "$description": "The duration for accommodating the motion with more expressiveness.",
-          "$value": {
-            "default": "165ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-responsive": {
-          "$description": "The duration for making the motion feel quick and responsive.",
-          "$value": {
-            "default": "115ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-easing-avatar-gen-ai-gradient": {
-          "$description": "The easing curve for gradient motion of gen-ai avatars.",
-          "$value": {
-            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
-            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
-          },
-        },
-        "motion-easing-expressive": {
-          "$description": "The easing curve for drawing a user's attention in an expressive way.",
-          "$value": {
-            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
-            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
-          },
-        },
-        "motion-easing-responsive": {
-          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
-          "$value": {
-            "default": "cubic-bezier(0, 0, 0, 1)",
-            "disabled": "cubic-bezier(0, 0, 0, 1)",
-          },
-        },
-        "motion-easing-sticky": {
-          "$description": "The easing curve for making an element sticky to a certain state.",
-          "$value": {
-            "default": "cubic-bezier(1, 0, 0.83, 1)",
-            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
-          },
-        },
-        "motion-keyframes-fade-in": {
-          "$description": "The CSS keyframes for showing an element.",
-          "$value": {
-            "default": "awsui-fade-in-35003c",
-            "disabled": "awsui-fade-in-35003c",
-          },
-        },
-        "motion-keyframes-fade-out": {
-          "$description": "The CSS keyframes for hiding an element.",
-          "$value": {
-            "default": "awsui-fade-out-35003c",
-            "disabled": "awsui-fade-out-35003c",
-          },
-        },
-        "motion-keyframes-scale-popup": {
-          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
-          "$value": {
-            "default": "awsui-scale-popup-35003c",
-            "disabled": "awsui-scale-popup-35003c",
-          },
-        },
-        "motion-keyframes-status-icon-error": {
-          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
-          "$value": {
-            "default": "awsui-status-icon-error-35003c",
-            "disabled": "awsui-status-icon-error-35003c",
-          },
-        },
-        "shadow-container-active": {
-          "$description": "Shadow for containers and cards in active state.",
-          "$value": {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
-            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
-          },
-        },
-        "space-container-horizontal": {
-          "$description": "The horizontal padding inside a container.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "20px",
-          },
-        },
-        "space-field-horizontal": {
-          "$description": "The horizontal padding inside field components.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "12px",
-          },
-        },
-        "space-scaled-l": {
-          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "16px",
-          },
-        },
-        "space-scaled-m": {
-          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
-          "$value": {
-            "comfortable": "16px",
-            "compact": "12px",
-          },
-        },
-        "space-scaled-s": {
-          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "8px",
-          },
-        },
-        "space-scaled-xl": {
-          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
-          "$value": {
-            "comfortable": "24px",
-            "compact": "20px",
-          },
-        },
-        "space-scaled-xs": {
-          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
-          "$value": {
-            "comfortable": "8px",
-            "compact": "4px",
-          },
-        },
-        "space-scaled-xxl": {
-          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
-          "$value": {
-            "comfortable": "32px",
-            "compact": "24px",
-          },
-        },
-        "space-scaled-xxs": {
-          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
-          "$value": {
-            "comfortable": "4px",
-            "compact": "2px",
-          },
-        },
-        "space-scaled-xxxl": {
-          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
-          "$value": {
-            "comfortable": "40px",
-            "compact": "32px",
-          },
-        },
-        "space-scaled-xxxs": {
-          "$description": "The XXXS spacing unit which scales between modes.",
-          "$value": {
-            "comfortable": "2px",
-            "compact": "0px",
-          },
-        },
-        "space-static-l": {
-          "$description": "The static L spacing unit.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "20px",
-          },
-        },
-        "space-static-m": {
-          "$description": "The static M spacing unit.",
-          "$value": {
-            "comfortable": "16px",
-            "compact": "16px",
-          },
-        },
-        "space-static-s": {
-          "$description": "The static S spacing unit.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "12px",
-          },
-        },
-        "space-static-xl": {
-          "$description": "The static XL spacing unit.",
-          "$value": {
-            "comfortable": "24px",
-            "compact": "24px",
-          },
-        },
-        "space-static-xs": {
-          "$description": "The static XS spacing unit.",
-          "$value": {
-            "comfortable": "8px",
-            "compact": "8px",
-          },
-        },
-        "space-static-xxl": {
-          "$description": "The static XXL spacing unit.",
-          "$value": {
-            "comfortable": "32px",
-            "compact": "32px",
-          },
-        },
-        "space-static-xxs": {
-          "$description": "The static XXS spacing unit.",
-          "$value": {
-            "comfortable": "4px",
-            "compact": "4px",
-          },
-        },
-        "space-static-xxxl": {
-          "$description": "The static XXXL spacing unit.",
-          "$value": {
-            "comfortable": "40px",
-            "compact": "40px",
-          },
-        },
-        "space-static-xxxs": {
-          "$description": "The static XXXS spacing unit.",
-          "$value": {
-            "comfortable": "2px",
-            "compact": "2px",
-          },
-        },
-      },
-    },
-    "app-layout-toolbar": {
-      "tokens": {
-        "border-radius-alert": {
-          "$description": "The border radius of alerts.",
-          "$value": "12px",
-        },
-        "border-radius-badge": {
-          "$description": "The border radius of badges.",
-          "$value": "4px",
-        },
-        "border-radius-button": {
-          "$description": "The border radius of buttons and segmented control's segments.",
-          "$value": "20px",
-        },
-        "border-radius-calendar-day-focus-ring": {
-          "$description": "The border radius of the focused day in date picker and date range picker.",
-          "$value": "3px",
-        },
-        "border-radius-chat-bubble": {
-          "$description": "The border radius of chat bubbles.",
-          "$value": "8px",
-        },
-        "border-radius-container": {
-          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
-          "$value": "16px",
-        },
-        "border-radius-control-circular-focus-ring": {
-          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
-          "$value": "4px",
-        },
-        "border-radius-control-default-focus-ring": {
-          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
-          "$value": "4px",
-        },
-        "border-radius-dropdown": {
-          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
-          "$value": "8px",
-        },
-        "border-radius-flashbar": {
-          "$description": "The border radius of flash messages in flashbars.",
-          "$value": "12px",
-        },
-        "border-radius-input": {
-          "$description": "The border radius of form controls. For example: input, select.",
-          "$value": "8px",
-        },
-        "border-radius-item": {
-          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
-          "$value": "8px",
-        },
-        "border-radius-popover": {
-          "$description": "The border radius of popovers.",
-          "$value": "8px",
-        },
-        "border-radius-tabs-focus-ring": {
-          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
-          "$value": "20px",
-        },
-        "border-radius-tiles": {
-          "$description": "The border radius of tiles.",
-          "$value": "8px",
-        },
-        "border-radius-token": {
-          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
-          "$value": "8px",
-        },
-        "border-radius-tutorial-panel-item": {
-          "$description": "The border radius of tutorials inside a tutorial panel.",
-          "$value": "8px",
-        },
-        "border-width-alert": {
-          "$description": "The border width of alerts.",
-          "$value": "2px",
-        },
-        "border-width-field": {
-          "$description": "The border width of form fields.",
-          "$value": "1px",
-        },
-        "border-width-popover": {
-          "$description": "The border width of popovers.",
-          "$value": "2px",
-        },
-        "color-background-avatar-default": {
-          "$description": "The default background color of avatars.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-avatar-gen-ai": {
-          "$description": "The gen-ai background color of avatars.",
-          "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-          },
-        },
-        "color-background-button-normal-active": {
-          "$description": "The background color of normal buttons in active state.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#d1f1ff",
-          },
-        },
-        "color-background-button-normal-default": {
-          "$description": "The default background color of normal buttons.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-button-normal-disabled": {
-          "$description": "The background color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-button-normal-hover": {
-          "$description": "The background color of normal buttons in hover state.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#f0fbff",
-          },
-        },
-        "color-background-button-primary-active": {
-          "$description": "The background color of primary buttons in active state.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#002b66",
-          },
-        },
-        "color-background-button-primary-default": {
-          "$description": "The default background color of primary buttons.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
-          },
-        },
-        "color-background-button-primary-disabled": {
-          "$description": "The background color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#ebebf0",
-          },
-        },
-        "color-background-button-primary-hover": {
-          "$description": "The background color of primary buttons in hover state.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
-          },
-        },
-        "color-background-cell-shaded": {
-          "$description": "The background color of shaded table cells.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#f6f6f9",
-          },
-        },
-        "color-background-chat-bubble-incoming": {
-          "$description": "The background color of \`incoming\` chat bubble.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#f6f6f9",
-          },
-        },
-        "color-background-chat-bubble-outgoing": {
-          "$description": "The background color of \`outgoing\` chat bubble.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-background-container-content": {
-          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-container-header": {
-          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-control-checked": {
-          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
-          },
-        },
-        "color-background-control-default": {
-          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-control-disabled": {
           "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
           "$value": {
             "dark": "#333843",
-            "light": "#dedee3",
+            "light": "#333843",
           },
         },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ffffff",
+            "light": "#1b232d",
           },
         },
         "color-background-dropdown-item-filter-match": {
           "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#333843",
-            "light": "#f0fbff",
+            "light": "#333843",
           },
         },
         "color-background-dropdown-item-hover": {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": {
             "dark": "#131920",
-            "light": "#f3f3f7",
+            "light": "#131920",
           },
         },
         "color-background-home-header": {
@@ -22973,28 +20448,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-input-disabled": {
           "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ebebf0",
+            "light": "#1b232d",
           },
         },
         "color-background-item-selected": {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": {
             "dark": "#001129",
-            "light": "#f0fbff",
+            "light": "#001129",
           },
         },
         "color-background-layout-main": {
           "$description": "The background color of the main content area on a page. For example: content area in app layout.",
           "$value": {
-            "dark": "#131920",
-            "light": "#fcfcfd",
+            "dark": "#161d26",
+            "light": "#161d26",
           },
         },
         "color-background-layout-toggle-active": {
@@ -23022,21 +20497,21 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the app layout toggle button when it's selected and active.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-layout-toggle-selected-default": {
           "$description": "The default background color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-layout-toggle-selected-hover": {
           "$description": "The background color of the app layout toggle button on hover when it's selected.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#004a9e",
+            "light": "#75cfff",
           },
         },
         "color-background-loading-bar-gen-ai": {
@@ -23064,7 +20539,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for grey notifications. For example: grey badges.",
           "$value": {
             "dark": "#656871",
-            "light": "#424650",
+            "light": "#656871",
           },
         },
         "color-background-notification-red": {
@@ -23120,126 +20595,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for the popover container.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ffffff",
+            "light": "#1b232d",
           },
         },
         "color-background-segment-active": {
           "$description": "The background color of the active segment in a segmented control.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-segment-default": {
           "$description": "The background color of inactive segments in a segmented control.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
+            "dark": "transparent",
+            "light": "transparent",
           },
         },
         "color-background-segment-disabled": {
           "$description": "The background color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-segment-hover": {
           "$description": "The background color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#1b232d",
-            "light": "#f0fbff",
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
           },
         },
         "color-background-status-error": {
           "$description": "The background color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#1f0000",
-            "light": "#fff5f5",
+            "light": "#1f0000",
           },
         },
         "color-background-status-info": {
           "$description": "The background color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#001129",
-            "light": "#f0fbff",
+            "light": "#001129",
           },
         },
         "color-background-status-success": {
           "$description": "The background color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#001401",
-            "light": "#effff1",
+            "light": "#001401",
           },
         },
         "color-background-status-warning": {
           "$description": "The background color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#191100",
-            "light": "#fffef0",
+            "light": "#191100",
           },
         },
         "color-background-toggle-button-normal-pressed": {
           "$description": "The background color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#333843",
-            "light": "#d1f1ff",
+            "light": "#333843",
           },
         },
         "color-background-toggle-checked-disabled": {
           "$description": "The background color of checked toggles in disabled state.",
           "$value": {
             "dark": "#002b66",
-            "light": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-board-placeholder-active": {
           "$description": "The color of board placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#ebebf0",
+            "light": "#656871",
           },
         },
         "color-board-placeholder-hover": {
           "$description": "The color of board placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#d1f1ff",
+            "light": "#006ce0",
           },
         },
         "color-border-button-normal-active": {
           "$description": "The border color of normal buttons in active state.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-border-button-normal-default": {
           "$description": "The border color of normal buttons.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-border-button-normal-disabled": {
           "$description": "The border color of normal buttons in disabled state.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-border-button-normal-hover": {
           "$description": "The border color of normal buttons in hover state.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-border-button-primary-disabled": {
           "$description": "The border color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#ebebf0",
+            "light": "#232b37",
           },
         },
         "color-border-container-top": {
@@ -23259,120 +20734,120 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
-            "dark": "#424650",
-            "light": "#c6c6cd",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-border-divider-secondary": {
           "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
           "$value": {
             "dark": "#232b37",
-            "light": "#ebebf0",
+            "light": "#232b37",
           },
         },
         "color-border-dropdown-item-focused": {
           "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-dropdown-item-hover": {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-border-input-default": {
           "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
           },
         },
         "color-border-item-selected": {
           "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-border-segment-active": {
           "$description": "The border color of the active segment in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-default": {
           "$description": "The border color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-disabled": {
           "$description": "The border color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-hover": {
           "$description": "The border color of inactive segments in a segmented control on hover.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-status-error": {
           "$description": "The border color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#ff7a7a",
           },
         },
         "color-border-status-info": {
           "$description": "The border color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-border-status-success": {
           "$description": "The border color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#00802f",
+            "light": "#2bb534",
           },
         },
         "color-border-status-warning": {
           "$description": "The border color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#855900",
+            "light": "#fbd332",
           },
         },
         "color-border-toggle-button-normal-pressed": {
           "$description": "The border color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-charts-blue-1-1000": {
@@ -24457,42 +21932,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of drag placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#ebebf0",
+            "light": "#656871",
           },
         },
         "color-drag-placeholder-hover": {
           "$description": "The color of drag placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#d1f1ff",
+            "light": "#006ce0",
           },
         },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-foreground-control-disabled": {
           "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-foreground-control-read-only": {
           "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-accent": {
           "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-avatar": {
@@ -24506,42 +21981,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-body-secondary": {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-text-breadcrumb-current": {
           "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
           "$value": {
             "dark": "#8c8c94",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-text-breadcrumb-icon": {
           "$description": "The color used for the icon delimiter between breadcrumb items.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-button-normal-default": {
           "$description": "The default text color of normal buttons.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-text-button-normal-disabled": {
@@ -24554,22 +22029,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-hover": {
           "$description": "The hover text color of normal buttons.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-active": {
           "$description": "The active text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-button-primary-default": {
           "$description": "The default text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-button-primary-disabled": {
@@ -24583,98 +22058,98 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The hover text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-chat-bubble-incoming": {
           "$description": "Text color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-chat-bubble-outgoing": {
           "$description": "Text color of \`outgoing\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-counter": {
           "$description": "The default color for counters. For example: counters in table headers",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-dropdown-item-default": {
           "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-dropdown-item-disabled": {
           "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-dropdown-item-filter-match": {
           "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#006ce0",
+            "light": "#75cfff",
           },
         },
         "color-text-dropdown-item-highlighted": {
           "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#0f141a",
+            "light": "#ebebf0",
           },
         },
         "color-text-empty": {
           "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#656871",
+            "light": "#dedee3",
           },
         },
         "color-text-form-default": {
           "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-form-secondary": {
           "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-group-label": {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-text-heading-default": {
           "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#0f141a",
+            "light": "#ebebf0",
           },
         },
         "color-text-heading-secondary": {
           "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#424650",
+            "light": "#a4a4ad",
           },
         },
         "color-text-home-header-default": {
@@ -24695,42 +22170,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-input-placeholder": {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-interactive-active": {
           "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-interactive-default": {
           "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-text-interactive-disabled": {
           "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-interactive-hover": {
           "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-interactive-inverted-default": {
@@ -24751,14 +22226,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-label-gen-ai": {
           "$description": "The default color for labels indicating that content is produced by generative AI.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#bf80ff",
           },
         },
         "color-text-layout-toggle": {
@@ -24772,35 +22247,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the app layout toggle button when it's active.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-text-layout-toggle-hover": {
           "$description": "The color of the app layout toggle button on hover.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-layout-toggle-selected": {
           "$description": "The color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-link-default": {
           "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-link-hover": {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#002b66",
+            "light": "#75cfff",
           },
         },
         "color-text-notification-default": {
@@ -24849,77 +22324,77 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The text color of the active segment in a segmented control.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-segment-default": {
           "$description": "The text color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-text-segment-hover": {
           "$description": "The text color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-status-error": {
           "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#ff7a7a",
           },
         },
         "color-text-status-inactive": {
           "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-status-info": {
           "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-status-success": {
           "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#00802f",
+            "light": "#2bb534",
           },
         },
         "color-text-status-warning": {
           "$description": "The color of warning icons.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#855900",
+            "light": "#fbd332",
           },
         },
         "color-text-toggle-button-icon-pressed": {
           "$description": "The pressed text color of icon toggle buttons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-toggle-button-normal-pressed": {
           "$description": "The pressed text color of normal toggle buttons.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#002b66",
+            "light": "#75cfff",
           },
         },
         "color-text-top-navigation-title": {
           "$description": "The color of the title in the top navigation.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "font-family-base": {
@@ -25334,7 +22809,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -25819,8 +23294,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -27859,7 +25334,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -28344,8 +25819,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -30384,7 +27859,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -30869,8 +28344,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -32909,7 +30384,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -33394,8 +30869,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
@@ -35434,7 +32909,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -35919,8 +33394,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
@@ -37959,7 +35434,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "1px",
+      "$value": "2px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
@@ -38444,8 +35919,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-border-input-focused": {
       "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
       "$value": {
-        "dark": "#42b4ff",
-        "light": "#006ce0",
+        "dark": "#b8e7ff",
+        "light": "#002b66",
       },
     },
     "color-border-item-focused": {

From beb3451b874d1dcb8704a52f447abc0fbafc58c7 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 7 Apr 2025 10:40:29 +0200
Subject: [PATCH 21/35] update design-tokens.test.ts.snap

---
 .../__snapshots__/design-tokens.test.ts.snap  | 2797 ++++++++++++++++-
 1 file changed, 2661 insertions(+), 136 deletions(-)

diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 4cf000c1fa..e67cda74f7 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -17759,7 +17759,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -18244,8 +18244,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -20284,7 +20284,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20406,35 +20406,2560 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-disabled": {
+          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-default": {
+          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-dropdown-item-filter-match": {
+          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-hover": {
+          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
+          "$value": {
+            "dark": "#131920",
+            "light": "#131920",
+          },
+        },
+        "color-background-home-header": {
+          "$description": "The background color of the home header, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-input-default": {
+          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-input-disabled": {
+          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-item-selected": {
+          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-layout-main": {
+          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-layout-toggle-active": {
+          "$description": "The background color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-default": {
+          "$description": "The default background color of the app layout toggle button.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-hover": {
+          "$description": "The background color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-layout-toggle-selected-active": {
+          "$description": "The background color of the app layout toggle button when it's selected and active.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-default": {
+          "$description": "The default background color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-hover": {
+          "$description": "The background color of the app layout toggle button on hover when it's selected.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-background-loading-bar-gen-ai": {
+          "$description": "The background color of gen-ai loading bars.",
+          "$value": {
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+          },
+        },
+        "color-background-notification-blue": {
+          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-notification-green": {
+          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
+          "$value": {
+            "dark": "#00802f",
+            "light": "#00802f",
+          },
+        },
+        "color-background-notification-grey": {
+          "$description": "Background color for grey notifications. For example: grey badges.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-red": {
+          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
+          "$value": {
+            "dark": "#db0000",
+            "light": "#db0000",
+          },
+        },
+        "color-background-notification-severity-critical": {
+          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#870303",
+          },
+        },
+        "color-background-notification-severity-high": {
+          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ce3311",
+          },
+        },
+        "color-background-notification-severity-low": {
+          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#f2cd54",
+            "light": "#f2cd54",
+          },
+        },
+        "color-background-notification-severity-medium": {
+          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#f89256",
+          },
+        },
+        "color-background-notification-severity-neutral": {
+          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-yellow": {
+          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
+        "color-background-popover": {
+          "$description": "Background color for the popover container.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-segment-active": {
+          "$description": "The background color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-segment-default": {
+          "$description": "The background color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-segment-disabled": {
+          "$description": "The background color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-segment-hover": {
+          "$description": "The background color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "color-background-status-error": {
+          "$description": "The background color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#1f0000",
+            "light": "#1f0000",
+          },
+        },
+        "color-background-status-info": {
+          "$description": "The background color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-status-success": {
+          "$description": "The background color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#001401",
+            "light": "#001401",
+          },
+        },
+        "color-background-status-warning": {
+          "$description": "The background color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#191100",
+            "light": "#191100",
+          },
+        },
+        "color-background-toggle-button-normal-pressed": {
+          "$description": "The background color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-toggle-checked-disabled": {
+          "$description": "The background color of checked toggles in disabled state.",
+          "$value": {
+            "dark": "#002b66",
+            "light": "#002b66",
+          },
+        },
+        "color-board-placeholder-active": {
+          "$description": "The color of board placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-board-placeholder-hover": {
+          "$description": "The color of board placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-border-button-normal-active": {
+          "$description": "The border color of normal buttons in active state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-normal-default": {
+          "$description": "The border color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-button-normal-disabled": {
+          "$description": "The border color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-button-normal-hover": {
+          "$description": "The border color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-primary-disabled": {
+          "$description": "The border color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-container-top": {
+          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-border-control-default": {
+          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-border-divider-default": {
+          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-divider-secondary": {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-dropdown-item-focused": {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-dropdown-item-hover": {
+          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-default": {
+          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-focused": {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-item-focused": {
+          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-border-item-selected": {
+          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-segment-active": {
+          "$description": "The border color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-default": {
+          "$description": "The border color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-disabled": {
+          "$description": "The border color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-hover": {
+          "$description": "The border color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-status-error": {
+          "$description": "The border color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-border-status-info": {
+          "$description": "The border color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-status-success": {
+          "$description": "The border color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-border-status-warning": {
+          "$description": "The border color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-border-toggle-button-normal-pressed": {
+          "$description": "The border color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-charts-blue-1-1000": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#b3e4f8",
+            "light": "#01437d",
+          },
+        },
+        "color-charts-blue-1-1100": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#caedfc",
+            "light": "#003c75",
+          },
+        },
+        "color-charts-blue-1-1200": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ddf4ff",
+            "light": "#00366d",
+          },
+        },
+        "color-charts-blue-1-300": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#00819c",
+            "light": "#529ccb",
+          },
+        },
+        "color-charts-blue-1-400": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#0497ba",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-blue-1-500": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#0273bb",
+          },
+        },
+        "color-charts-blue-1-600": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#44b9dd",
+            "light": "#0166ab",
+          },
+        },
+        "color-charts-blue-1-700": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#63c6e7",
+            "light": "#015b9d",
+          },
+        },
+        "color-charts-blue-1-800": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#79d2f0",
+            "light": "#015292",
+          },
+        },
+        "color-charts-blue-1-900": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#98dcf5",
+            "light": "#014a87",
+          },
+        },
+        "color-charts-blue-2-1000": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-blue-2-1100": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-blue-2-1200": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-blue-2-300": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-blue-2-400": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-blue-2-500": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-blue-2-600": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-blue-2-700": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-blue-2-800": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-blue-2-900": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-green-1000": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#c5e7a8",
+            "light": "#104d01",
+          },
+        },
+        "color-charts-green-1100": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#d5efbe",
+            "light": "#0f4601",
+          },
+        },
+        "color-charts-green-1200": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#e4f7d5",
+            "light": "#0d4000",
+          },
+        },
+        "color-charts-green-300": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#48851a",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-green-400": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#5a9b29",
+            "light": "#41902c",
+          },
+        },
+        "color-charts-green-500": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#1f8104",
+          },
+        },
+        "color-charts-green-600": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#7dbd4c",
+            "light": "#1a7302",
+          },
+        },
+        "color-charts-green-700": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#8fca61",
+            "light": "#176702",
+          },
+        },
+        "color-charts-green-800": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#9fd673",
+            "light": "#145d02",
+          },
+        },
+        "color-charts-green-900": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#b2df8d",
+            "light": "#125502",
+          },
+        },
+        "color-charts-line-axis": {
+          "$description": "Color of the axis lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-grid": {
+          "$description": "Color of the grid lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-tick": {
+          "$description": "Color of the tick marks in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-orange-1000": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-orange-1100": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-orange-1200": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-orange-300": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-orange-400": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-orange-500": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-orange-600": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-orange-700": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-orange-800": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-orange-900": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-1": {
+          "$description": "Color #1 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-palette-categorical-10": {
+          "$description": "Color #10 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-palette-categorical-11": {
+          "$description": "Color #11 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-palette-categorical-12": {
+          "$description": "Color #12 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-palette-categorical-13": {
+          "$description": "Color #13 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-palette-categorical-14": {
+          "$description": "Color #14 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-palette-categorical-15": {
+          "$description": "Color #15 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-16": {
+          "$description": "Color #16 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-palette-categorical-17": {
+          "$description": "Color #17 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-palette-categorical-18": {
+          "$description": "Color #18 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-palette-categorical-19": {
+          "$description": "Color #19 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-palette-categorical-2": {
+          "$description": "Color #2 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-palette-categorical-20": {
+          "$description": "Color #20 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-palette-categorical-21": {
+          "$description": "Color #21 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-palette-categorical-22": {
+          "$description": "Color #22 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-palette-categorical-23": {
+          "$description": "Color #23 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-palette-categorical-24": {
+          "$description": "Color #24 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-palette-categorical-25": {
+          "$description": "Color #25 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-palette-categorical-26": {
+          "$description": "Color #26 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-palette-categorical-27": {
+          "$description": "Color #27 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-palette-categorical-28": {
+          "$description": "Color #28 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-palette-categorical-29": {
+          "$description": "Color #29 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-palette-categorical-3": {
+          "$description": "Color #3 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-palette-categorical-30": {
+          "$description": "Color #30 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-palette-categorical-31": {
+          "$description": "Color #31 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-palette-categorical-32": {
+          "$description": "Color #32 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-palette-categorical-33": {
+          "$description": "Color #33 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-palette-categorical-34": {
+          "$description": "Color #34 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-palette-categorical-35": {
+          "$description": "Color #35 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-palette-categorical-36": {
+          "$description": "Color #36 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-palette-categorical-37": {
+          "$description": "Color #37 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-palette-categorical-38": {
+          "$description": "Color #38 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-palette-categorical-39": {
+          "$description": "Color #39 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-palette-categorical-4": {
+          "$description": "Color #4 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-palette-categorical-40": {
+          "$description": "Color #40 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-palette-categorical-41": {
+          "$description": "Color #41 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-palette-categorical-42": {
+          "$description": "Color #42 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-palette-categorical-43": {
+          "$description": "Color #43 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-palette-categorical-44": {
+          "$description": "Color #44 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-palette-categorical-45": {
+          "$description": "Color #45 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-palette-categorical-46": {
+          "$description": "Color #46 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-palette-categorical-47": {
+          "$description": "Color #47 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-palette-categorical-48": {
+          "$description": "Color #48 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-palette-categorical-49": {
+          "$description": "Color #49 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-palette-categorical-5": {
+          "$description": "Color #5 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-palette-categorical-50": {
+          "$description": "Color #50 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-palette-categorical-6": {
+          "$description": "Color #6 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-palette-categorical-7": {
+          "$description": "Color #7 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-palette-categorical-8": {
+          "$description": "Color #8 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-palette-categorical-9": {
+          "$description": "Color #9 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-pink-1000": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-pink-1100": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-pink-1200": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-pink-300": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-pink-400": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-pink-500": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-pink-600": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-pink-700": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-pink-800": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-pink-900": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-purple-1000": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-purple-1100": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-purple-1200": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-purple-300": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-purple-400": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-purple-500": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-purple-600": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-purple-700": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-purple-800": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-purple-900": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-red-1000": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd2cf",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-red-1100": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe0dd",
+            "light": "#721e03",
+          },
+        },
+        "color-charts-red-1200": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecea",
+            "light": "#671c00",
+          },
+        },
+        "color-charts-red-300": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#ea7158",
+          },
+        },
+        "color-charts-red-400": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#ed5958",
+            "light": "#dc5032",
+          },
+        },
+        "color-charts-red-500": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#d13313",
+          },
+        },
+        "color-charts-red-600": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#ff8a8a",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-red-700": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#ffa09e",
+            "light": "#a82a0c",
+          },
+        },
+        "color-charts-red-800": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb3b0",
+            "light": "#972709",
+          },
+        },
+        "color-charts-red-900": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc4c0",
+            "light": "#892407",
+          },
+        },
+        "color-charts-status-critical": {
+          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-status-high": {
+          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-status-info": {
+          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-status-low": {
+          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-status-medium": {
+          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-status-neutral": {
+          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-charts-status-positive": {
+          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-teal-1000": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-teal-1100": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-teal-1200": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-teal-300": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-teal-400": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-teal-500": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-teal-600": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-teal-700": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-teal-800": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-teal-900": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-threshold-info": {
+          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#006ce0",
+          },
+        },
+        "color-charts-threshold-negative": {
+          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-charts-threshold-neutral": {
+          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#656871",
+          },
+        },
+        "color-charts-threshold-positive": {
+          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#00802f",
+          },
+        },
+        "color-charts-yellow-1000": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#f7db8a",
+            "light": "#553f03",
+          },
+        },
+        "color-charts-yellow-1100": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#fce5a8",
+            "light": "#4d3901",
+          },
+        },
+        "color-charts-yellow-1200": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffefc9",
+            "light": "#483300",
+          },
+        },
+        "color-charts-yellow-300": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#977001",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-yellow-400": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#b08400",
+            "light": "#9c7b0b",
+          },
+        },
+        "color-charts-yellow-500": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#c59600",
+            "light": "#8a6b05",
+          },
+        },
+        "color-charts-yellow-600": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#d3a61c",
+            "light": "#7b5f04",
+          },
+        },
+        "color-charts-yellow-700": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#6f5504",
+          },
+        },
+        "color-charts-yellow-800": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#eac33a",
+            "light": "#654d03",
+          },
+        },
+        "color-charts-yellow-900": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#f1cf65",
+            "light": "#5d4503",
+          },
+        },
+        "color-drag-placeholder-active": {
+          "$description": "The color of drag placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-drag-placeholder-hover": {
+          "$description": "The color of drag placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-foreground-control-default": {
+          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-foreground-control-disabled": {
+          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-foreground-control-read-only": {
+          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-accent": {
+          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-avatar": {
+          "$description": "The text and icon color of avatars.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-body-default": {
+          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-body-secondary": {
+          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-breadcrumb-current": {
+          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-breadcrumb-icon": {
+          "$description": "The color used for the icon delimiter between breadcrumb items.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-button-normal-active": {
+          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-normal-default": {
+          "$description": "The default text color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-button-normal-disabled": {
+          "$description": "The text color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-normal-hover": {
+          "$description": "The hover text color of normal buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-primary-active": {
+          "$description": "The active text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-default": {
+          "$description": "The default text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-disabled": {
+          "$description": "The text color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-primary-hover": {
+          "$description": "The hover text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-chat-bubble-incoming": {
+          "$description": "Text color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-chat-bubble-outgoing": {
+          "$description": "Text color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-counter": {
+          "$description": "The default color for counters. For example: counters in table headers",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-dropdown-item-default": {
+          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-dropdown-item-disabled": {
+          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-dropdown-item-filter-match": {
+          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-dropdown-item-highlighted": {
+          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-empty": {
+          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-default": {
+          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-secondary": {
+          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-group-label": {
+          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-heading-default": {
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-heading-secondary": {
+          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-home-header-default": {
+          "$description": "The color of the home header's text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-home-header-secondary": {
+          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-input-disabled": {
+          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-input-placeholder": {
+          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-interactive-active": {
+          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-default": {
+          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-disabled": {
+          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-interactive-hover": {
+          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-inverted-default": {
+          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-inverted-hover": {
+          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-label": {
+          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-label-gen-ai": {
+          "$description": "The default color for labels indicating that content is produced by generative AI.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-layout-toggle": {
+          "$description": "The default color of the app layout toggle.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-layout-toggle-active": {
+          "$description": "The color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-text-layout-toggle-hover": {
+          "$description": "The color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-layout-toggle-selected": {
+          "$description": "The color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-link-default": {
+          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-link-hover": {
+          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-notification-default": {
+          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-critical": {
+          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#000000",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-high": {
+          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-low": {
+          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-medium": {
+          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-neutral": {
+          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-segment-active": {
+          "$description": "The text color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-segment-default": {
+          "$description": "The text color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-segment-hover": {
+          "$description": "The text color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-status-error": {
+          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-text-status-inactive": {
+          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-status-info": {
+          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-status-success": {
+          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-text-status-warning": {
+          "$description": "The color of warning icons.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-text-toggle-button-icon-pressed": {
+          "$description": "The pressed text color of icon toggle buttons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-toggle-button-normal-pressed": {
+          "$description": "The pressed text color of normal toggle buttons.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-top-navigation-title": {
+          "$description": "The color of the title in the top navigation.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "font-family-base": {
+          "$description": "The default font family that will be applied globally to the product interface.",
+          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+        },
+        "font-family-monospace": {
+          "$description": "The monospace font family that will be applied globally to the product interface.",
+          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
+        },
+        "font-size-body-m": {
+          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
+          "$value": "14px",
+        },
+        "font-size-body-s": {
+          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
+          "$value": "12px",
+        },
+        "font-size-display-l": {
+          "$description": "The default font size for large display text.",
+          "$value": "42px",
+        },
+        "font-size-heading-l": {
+          "$description": "The default font size for h2s.",
+          "$value": "20px",
+        },
+        "font-size-heading-m": {
+          "$description": "The default font size for h3s.",
+          "$value": "18px",
+        },
+        "font-size-heading-s": {
+          "$description": "The default font size for h4s.",
+          "$value": "16px",
+        },
+        "font-size-heading-xl": {
+          "$description": "The default font size for h1s.",
+          "$value": "24px",
+        },
+        "font-size-heading-xs": {
+          "$description": "The default font size for h5s.",
+          "$value": "14px",
+        },
+        "font-weight-button": {
+          "$description": "The default font weight for button text.",
+          "$value": "700",
+        },
+        "font-weight-heading-l": {
+          "$description": "The default font weight for h2s.",
+          "$value": "700",
+        },
+        "font-weight-heading-m": {
+          "$description": "The default font weight for h3s.",
+          "$value": "700",
+        },
+        "font-weight-heading-s": {
+          "$description": "The default font weight for h4s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xl": {
+          "$description": "The default font weight for h1s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xs": {
+          "$description": "The default font weight for h5s.",
+          "$value": "700",
+        },
+        "line-height-body-m": {
+          "$description": "The default line height for regular body text.",
+          "$value": "20px",
+        },
+        "line-height-body-s": {
+          "$description": "The default line height for small body text.",
+          "$value": "16px",
+        },
+        "line-height-display-l": {
+          "$description": "The default line height for large display text.",
+          "$value": "48px",
+        },
+        "line-height-heading-l": {
+          "$description": "The default line height for h2s.",
+          "$value": "24px",
+        },
+        "line-height-heading-m": {
+          "$description": "The default line height for h3s.",
+          "$value": "22px",
+        },
+        "line-height-heading-s": {
+          "$description": "The default line height for h4s.",
+          "$value": "20px",
+        },
+        "line-height-heading-xl": {
+          "$description": "The default line height for h1s.",
+          "$value": "30px",
+        },
+        "line-height-heading-xs": {
+          "$description": "The default line height for h5s.",
+          "$value": "18px",
+        },
+        "motion-duration-avatar-gen-ai-gradient": {
+          "$description": "The duration for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "3600ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-avatar-loading-dots": {
+          "$description": "The duration for loading motion of avatars.",
+          "$value": {
+            "default": "1200ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-complex": {
+          "$description": "The duration for drawing more attention or accommodating for more complexity.",
+          "$value": {
+            "default": "250ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-expressive": {
+          "$description": "The duration for accommodating the motion with more expressiveness.",
+          "$value": {
+            "default": "165ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-responsive": {
+          "$description": "The duration for making the motion feel quick and responsive.",
+          "$value": {
+            "default": "115ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-easing-avatar-gen-ai-gradient": {
+          "$description": "The easing curve for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
+            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
+          },
+        },
+        "motion-easing-expressive": {
+          "$description": "The easing curve for drawing a user's attention in an expressive way.",
+          "$value": {
+            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
+            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
+          },
+        },
+        "motion-easing-responsive": {
+          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
+          "$value": {
+            "default": "cubic-bezier(0, 0, 0, 1)",
+            "disabled": "cubic-bezier(0, 0, 0, 1)",
+          },
+        },
+        "motion-easing-sticky": {
+          "$description": "The easing curve for making an element sticky to a certain state.",
+          "$value": {
+            "default": "cubic-bezier(1, 0, 0.83, 1)",
+            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
+          },
+        },
+        "motion-keyframes-fade-in": {
+          "$description": "The CSS keyframes for showing an element.",
+          "$value": {
+            "default": "awsui-fade-in-35003c",
+            "disabled": "awsui-fade-in-35003c",
+          },
+        },
+        "motion-keyframes-fade-out": {
+          "$description": "The CSS keyframes for hiding an element.",
+          "$value": {
+            "default": "awsui-fade-out-35003c",
+            "disabled": "awsui-fade-out-35003c",
+          },
+        },
+        "motion-keyframes-scale-popup": {
+          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
+          "$value": {
+            "default": "awsui-scale-popup-35003c",
+            "disabled": "awsui-scale-popup-35003c",
+          },
+        },
+        "motion-keyframes-status-icon-error": {
+          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
+          "$value": {
+            "default": "awsui-status-icon-error-35003c",
+            "disabled": "awsui-status-icon-error-35003c",
+          },
+        },
+        "shadow-container-active": {
+          "$description": "Shadow for containers and cards in active state.",
+          "$value": {
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
+          },
+        },
+        "space-container-horizontal": {
+          "$description": "The horizontal padding inside a container.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-field-horizontal": {
+          "$description": "The horizontal padding inside field components.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-l": {
+          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "16px",
+          },
+        },
+        "space-scaled-m": {
+          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-s": {
+          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "8px",
+          },
+        },
+        "space-scaled-xl": {
+          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "20px",
+          },
+        },
+        "space-scaled-xs": {
+          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "4px",
+          },
+        },
+        "space-scaled-xxl": {
+          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "24px",
+          },
+        },
+        "space-scaled-xxs": {
+          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "2px",
+          },
+        },
+        "space-scaled-xxxl": {
+          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "32px",
+          },
+        },
+        "space-scaled-xxxs": {
+          "$description": "The XXXS spacing unit which scales between modes.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "0px",
+          },
+        },
+        "space-static-l": {
+          "$description": "The static L spacing unit.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-static-m": {
+          "$description": "The static M spacing unit.",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "16px",
+          },
+        },
+        "space-static-s": {
+          "$description": "The static S spacing unit.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-static-xl": {
+          "$description": "The static XL spacing unit.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "24px",
+          },
+        },
+        "space-static-xs": {
+          "$description": "The static XS spacing unit.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "8px",
+          },
+        },
+        "space-static-xxl": {
+          "$description": "The static XXL spacing unit.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "32px",
+          },
+        },
+        "space-static-xxs": {
+          "$description": "The static XXS spacing unit.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "4px",
+          },
+        },
+        "space-static-xxxl": {
+          "$description": "The static XXXL spacing unit.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "40px",
+          },
+        },
+        "space-static-xxxs": {
+          "$description": "The static XXXS spacing unit.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "2px",
+          },
+        },
+      },
+    },
+    "app-layout-toolbar": {
+      "tokens": {
+        "border-radius-alert": {
+          "$description": "The border radius of alerts.",
+          "$value": "12px",
+        },
+        "border-radius-badge": {
+          "$description": "The border radius of badges.",
+          "$value": "4px",
+        },
+        "border-radius-button": {
+          "$description": "The border radius of buttons and segmented control's segments.",
+          "$value": "20px",
+        },
+        "border-radius-calendar-day-focus-ring": {
+          "$description": "The border radius of the focused day in date picker and date range picker.",
+          "$value": "3px",
+        },
+        "border-radius-chat-bubble": {
+          "$description": "The border radius of chat bubbles.",
+          "$value": "8px",
+        },
+        "border-radius-container": {
+          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
+          "$value": "16px",
+        },
+        "border-radius-control-circular-focus-ring": {
+          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
+          "$value": "4px",
+        },
+        "border-radius-control-default-focus-ring": {
+          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
+          "$value": "4px",
+        },
+        "border-radius-dropdown": {
+          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
+          "$value": "8px",
+        },
+        "border-radius-flashbar": {
+          "$description": "The border radius of flash messages in flashbars.",
+          "$value": "12px",
+        },
+        "border-radius-input": {
+          "$description": "The border radius of form controls. For example: input, select.",
+          "$value": "8px",
+        },
+        "border-radius-item": {
+          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
+          "$value": "8px",
+        },
+        "border-radius-popover": {
+          "$description": "The border radius of popovers.",
+          "$value": "8px",
+        },
+        "border-radius-tabs-focus-ring": {
+          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
+          "$value": "20px",
+        },
+        "border-radius-tiles": {
+          "$description": "The border radius of tiles.",
+          "$value": "8px",
+        },
+        "border-radius-token": {
+          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
+          "$value": "8px",
+        },
+        "border-radius-tutorial-panel-item": {
+          "$description": "The border radius of tutorials inside a tutorial panel.",
+          "$value": "8px",
+        },
+        "border-width-alert": {
+          "$description": "The border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-field": {
+          "$description": "The border width of form fields.",
+          "$value": "1px",
+        },
+        "border-width-popover": {
+          "$description": "The border width of popovers.",
+          "$value": "2px",
+        },
+        "color-background-avatar-default": {
+          "$description": "The default background color of avatars.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-avatar-gen-ai": {
+          "$description": "The gen-ai background color of avatars.",
+          "$value": {
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+          },
+        },
+        "color-background-button-normal-active": {
+          "$description": "The background color of normal buttons in active state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#d1f1ff",
+          },
+        },
+        "color-background-button-normal-default": {
+          "$description": "The default background color of normal buttons.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-button-normal-disabled": {
+          "$description": "The background color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-button-normal-hover": {
+          "$description": "The background color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#f0fbff",
+          },
+        },
+        "color-background-button-primary-active": {
+          "$description": "The background color of primary buttons in active state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#002b66",
+          },
+        },
+        "color-background-button-primary-default": {
+          "$description": "The default background color of primary buttons.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-button-primary-disabled": {
+          "$description": "The background color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#ebebf0",
+          },
+        },
+        "color-background-button-primary-hover": {
+          "$description": "The background color of primary buttons in hover state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#002b66",
+          },
+        },
+        "color-background-cell-shaded": {
+          "$description": "The background color of shaded table cells.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#f6f6f9",
+          },
+        },
+        "color-background-chat-bubble-incoming": {
+          "$description": "The background color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#f6f6f9",
+          },
+        },
+        "color-background-chat-bubble-outgoing": {
+          "$description": "The background color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-container-content": {
+          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-container-header": {
+          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-control-checked": {
+          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-control-default": {
+          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-control-disabled": {
           "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#dedee3",
           },
         },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-dropdown-item-filter-match": {
           "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#f0fbff",
           },
         },
         "color-background-dropdown-item-hover": {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": {
             "dark": "#131920",
-            "light": "#131920",
+            "light": "#f3f3f7",
           },
         },
         "color-background-home-header": {
@@ -20448,28 +22973,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-input-disabled": {
           "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ebebf0",
           },
         },
         "color-background-item-selected": {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-layout-main": {
           "$description": "The background color of the main content area on a page. For example: content area in app layout.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
+            "dark": "#131920",
+            "light": "#fcfcfd",
           },
         },
         "color-background-layout-toggle-active": {
@@ -20497,21 +23022,21 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the app layout toggle button when it's selected and active.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-default": {
           "$description": "The default background color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-hover": {
           "$description": "The background color of the app layout toggle button on hover when it's selected.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#004a9e",
           },
         },
         "color-background-loading-bar-gen-ai": {
@@ -20539,7 +23064,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for grey notifications. For example: grey badges.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#424650",
           },
         },
         "color-background-notification-red": {
@@ -20595,126 +23120,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for the popover container.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-active": {
           "$description": "The background color of the active segment in a segmented control.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-segment-default": {
           "$description": "The background color of inactive segments in a segmented control.",
           "$value": {
-            "dark": "transparent",
-            "light": "transparent",
+            "dark": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-disabled": {
           "$description": "The background color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-hover": {
           "$description": "The background color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
+            "dark": "#1b232d",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-error": {
           "$description": "The background color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#1f0000",
-            "light": "#1f0000",
+            "light": "#fff5f5",
           },
         },
         "color-background-status-info": {
           "$description": "The background color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-success": {
           "$description": "The background color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#001401",
-            "light": "#001401",
+            "light": "#effff1",
           },
         },
         "color-background-status-warning": {
           "$description": "The background color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#191100",
-            "light": "#191100",
+            "light": "#fffef0",
           },
         },
         "color-background-toggle-button-normal-pressed": {
           "$description": "The background color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#d1f1ff",
           },
         },
         "color-background-toggle-checked-disabled": {
           "$description": "The background color of checked toggles in disabled state.",
           "$value": {
             "dark": "#002b66",
-            "light": "#002b66",
+            "light": "#b8e7ff",
           },
         },
         "color-board-placeholder-active": {
           "$description": "The color of board placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-board-placeholder-hover": {
           "$description": "The color of board placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-border-button-normal-active": {
           "$description": "The border color of normal buttons in active state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-normal-default": {
           "$description": "The border color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-button-normal-disabled": {
           "$description": "The border color of normal buttons in disabled state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-border-button-normal-hover": {
           "$description": "The border color of normal buttons in hover state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-primary-disabled": {
           "$description": "The border color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-container-top": {
@@ -20734,120 +23259,120 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-border-divider-secondary": {
           "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-dropdown-item-focused": {
           "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-dropdown-item-hover": {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-default": {
           "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-selected": {
           "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-segment-active": {
           "$description": "The border color of the active segment in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-default": {
           "$description": "The border color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-disabled": {
           "$description": "The border color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-hover": {
           "$description": "The border color of inactive segments in a segmented control on hover.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-status-error": {
           "$description": "The border color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-border-status-info": {
           "$description": "The border color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-status-success": {
           "$description": "The border color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-border-status-warning": {
           "$description": "The border color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-border-toggle-button-normal-pressed": {
           "$description": "The border color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-charts-blue-1-1000": {
@@ -21932,42 +24457,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of drag placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-drag-placeholder-hover": {
           "$description": "The color of drag placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-disabled": {
           "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-read-only": {
           "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-accent": {
           "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-avatar": {
@@ -21981,42 +24506,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-body-secondary": {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-breadcrumb-current": {
           "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
           "$value": {
             "dark": "#8c8c94",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-text-breadcrumb-icon": {
           "$description": "The color used for the icon delimiter between breadcrumb items.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-normal-default": {
           "$description": "The default text color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-button-normal-disabled": {
@@ -22029,22 +24554,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-hover": {
           "$description": "The hover text color of normal buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-primary-active": {
           "$description": "The active text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-default": {
           "$description": "The default text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-disabled": {
@@ -22058,98 +24583,98 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The hover text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-chat-bubble-incoming": {
           "$description": "Text color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-chat-bubble-outgoing": {
           "$description": "Text color of \`outgoing\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-counter": {
           "$description": "The default color for counters. For example: counters in table headers",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-dropdown-item-default": {
           "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-dropdown-item-disabled": {
           "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-dropdown-item-filter-match": {
           "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-text-dropdown-item-highlighted": {
           "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-empty": {
           "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#656871",
           },
         },
         "color-text-form-default": {
           "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-form-secondary": {
           "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-group-label": {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-heading-default": {
           "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-heading-secondary": {
           "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#424650",
           },
         },
         "color-text-home-header-default": {
@@ -22170,42 +24695,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-input-placeholder": {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-interactive-active": {
           "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-default": {
           "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-interactive-disabled": {
           "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-interactive-hover": {
           "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-inverted-default": {
@@ -22226,14 +24751,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-label-gen-ai": {
           "$description": "The default color for labels indicating that content is produced by generative AI.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#bf80ff",
+            "light": "#7300e5",
           },
         },
         "color-text-layout-toggle": {
@@ -22247,35 +24772,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the app layout toggle button when it's active.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-text-layout-toggle-hover": {
           "$description": "The color of the app layout toggle button on hover.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-layout-toggle-selected": {
           "$description": "The color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-link-default": {
           "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-link-hover": {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-notification-default": {
@@ -22324,77 +24849,77 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The text color of the active segment in a segmented control.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-segment-default": {
           "$description": "The text color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-segment-hover": {
           "$description": "The text color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-status-error": {
           "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-text-status-inactive": {
           "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-status-info": {
           "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-status-success": {
           "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-text-status-warning": {
           "$description": "The color of warning icons.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-text-toggle-button-icon-pressed": {
           "$description": "The pressed text color of icon toggle buttons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-toggle-button-normal-pressed": {
           "$description": "The pressed text color of normal toggle buttons.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-top-navigation-title": {
           "$description": "The color of the title in the top navigation.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "font-family-base": {
@@ -22809,7 +25334,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -23294,8 +25819,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -25334,7 +27859,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -25819,8 +28344,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -27859,7 +30384,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -28344,8 +30869,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -30384,7 +32909,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -30869,8 +33394,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-border-item-focused": {
@@ -32909,7 +35434,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -33394,8 +35919,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-border-item-focused": {
@@ -35434,7 +37959,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "2px",
+      "$value": "1px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
@@ -35919,8 +38444,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-border-input-focused": {
       "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
       "$value": {
-        "dark": "#b8e7ff",
-        "light": "#002b66",
+        "dark": "#42b4ff",
+        "light": "#006ce0",
       },
     },
     "color-border-item-focused": {

From b8e5314b022f2790dc45dd81491664e8d2297835 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 10 Apr 2025 12:16:56 +0200
Subject: [PATCH 22/35] update snapshot

---
 .../__snapshots__/design-tokens.test.ts.snap  | 51 +++++++++++++++----
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 32fbaf5029..1e271e46c2 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -17998,7 +17998,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20556,7 +20556,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -23104,14 +23104,26 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of alerts.",
           "$value": "2px",
         },
+        "border-width-button": {
+          "$description": "The border width of buttons.",
+          "$value": "2px",
+        },
+        "border-width-dropdown": {
+          "$description": "The border width of dropdowns.",
+          "$value": "2px",
+        },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "2px",
         },
+        "border-width-token": {
+          "$description": "The border width of tokens.",
+          "$value": "2px",
+        },
         "color-background-avatar-default": {
           "$description": "The default background color of avatars.",
           "$value": {
@@ -23238,6 +23250,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#dedee3",
           },
         },
+        "color-background-dialog": {
+          "$description": "The background color of the feedback/input dialogue box.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#f0fbff",
+          },
+        },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
@@ -23553,6 +23572,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#8c8c94",
           },
         },
+        "color-border-dialog": {
+          "$description": "The border color of the feedback/input dialogue box.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#006ce0",
+          },
+        },
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
@@ -24827,6 +24853,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#8c8c94",
           },
         },
+        "color-text-button-icon-disabled": {
+          "$description": "The color of icon buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
@@ -25639,7 +25672,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -28197,7 +28230,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -30755,7 +30788,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -33313,7 +33346,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -35871,7 +35904,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -38429,7 +38462,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "1px",
+      "$value": "2px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",

From 6e13301825026df2ef761054412a1ddd3ecabdc4 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 10 Apr 2025 12:38:06 +0200
Subject: [PATCH 23/35] replace a border width constant with new border tokens

---
 src/internal/styles/forms/constants.scss                | 1 -
 src/internal/styles/forms/mixins.scss                   | 4 ++--
 src/pagination/styles.scss                              | 4 ++--
 src/property-filter/filtering-token/styles.scss         | 4 ++--
 src/property-filter/styles.scss                         | 2 +-
 src/select/parts/styles.scss                            | 2 +-
 src/tiles/styles.scss                                   | 4 ++--
 src/tutorial-panel/components/tutorial-list/styles.scss | 4 ++--
 8 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/internal/styles/forms/constants.scss b/src/internal/styles/forms/constants.scss
index 2ef2bf934b..e5b189ddf1 100644
--- a/src/internal/styles/forms/constants.scss
+++ b/src/internal/styles/forms/constants.scss
@@ -6,7 +6,6 @@
 @use '../utils/theming' as theming;
 @use '../tokens' as awsui;
 
-$control-border-width: awsui.$border-width-button;
 $control-border-radius: awsui.$border-radius-input;
 
 // Use for options in dropdowns
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index b592d48596..7a83d7aff9 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -98,8 +98,8 @@
   // Using a special transparent outline only visible in Windows High Contrast Mode.
   // See focus-highlight above.
   outline: 2px dotted transparent;
-  border-block: constants.$control-border-width solid awsui.$color-border-item-focused;
-  border-inline: constants.$control-border-width solid awsui.$color-border-item-focused;
+  border-block: awsui.$border-width-button solid awsui.$color-border-item-focused;
+  border-inline: awsui.$border-width-button solid awsui.$color-border-item-focused;
   border-start-start-radius: $border-radius;
   border-start-end-radius: $border-radius;
   border-end-start-radius: $border-radius;
diff --git a/src/pagination/styles.scss b/src/pagination/styles.scss
index f2336b80fb..31095a9be2 100644
--- a/src/pagination/styles.scss
+++ b/src/pagination/styles.scss
@@ -23,8 +23,8 @@
 .button,
 .dots {
   min-inline-size: awsui.$space-l;
-  border-block: styles.$control-border-width solid transparent;
-  border-inline: styles.$control-border-width solid transparent;
+  border-block: awsui.$border-width-button solid transparent;
+  border-inline: awsui.$border-width-button solid transparent;
 }
 
 .button {
diff --git a/src/property-filter/filtering-token/styles.scss b/src/property-filter/filtering-token/styles.scss
index 3dbc502bc8..1958a1882f 100644
--- a/src/property-filter/filtering-token/styles.scss
+++ b/src/property-filter/filtering-token/styles.scss
@@ -29,7 +29,7 @@ $border-radius-inner-token: calc(#{awsui.$border-radius-token} / 2);
     min-block-size: calc(2px + #{awsui.$size-vertical-input});
 
     &.compact-mode {
-      min-block-size: calc(2px + 2 * #{styles.$control-border-width} + #{awsui.$size-vertical-input});
+      min-block-size: calc(2px + 2 * #{awsui.$border-width-token} + #{awsui.$size-vertical-input});
     }
   }
 }
@@ -116,7 +116,7 @@ $border-radius-inner-token: calc(#{awsui.$border-radius-token} / 2);
   padding-inline: awsui.$space-xxs;
   color: awsui.$color-text-interactive-default;
   background-color: transparent;
-  border-inline-start: styles.$control-border-width solid constants.$token-border-color;
+  border-inline-start: awsui.$border-width-button solid constants.$token-border-color;
 
   @include focus-visible.when-visible {
     @include styles.focus-highlight(awsui.$space-filtering-token-dismiss-button-focus-outline-gutter);
diff --git a/src/property-filter/styles.scss b/src/property-filter/styles.scss
index 7208566cd8..560d008a14 100644
--- a/src/property-filter/styles.scss
+++ b/src/property-filter/styles.scss
@@ -213,7 +213,7 @@ $operator-field-width: 120px;
 
 .results {
   // Align with the filter input's vertical padding and border sizes.
-  padding-block: calc(#{styles.$control-padding-vertical} + #{styles.$control-border-width});
+  padding-block: calc(#{styles.$control-padding-vertical} + #{awsui.$border-width-field});
   padding-inline: 0;
 }
 
diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
index b18eb4d5cc..c41bc47b63 100644
--- a/src/select/parts/styles.scss
+++ b/src/select/parts/styles.scss
@@ -145,7 +145,7 @@ $inlineLabel-border-radius: 2px;
   line-height: 14px;
   letter-spacing: awsui.$letter-spacing-body-s;
   position: relative;
-  inset-inline-start: calc(styles.$control-border-width + awsui.$space-field-horizontal - awsui.$space-scaled-xxs);
+  inset-inline-start: calc(awsui.$border-width-field + awsui.$space-field-horizontal - awsui.$space-scaled-xxs);
   margin-block-start: awsui.$space-scaled-xs;
   padding-block-end: 2px;
   padding-inline: awsui.$space-scaled-xxs;
diff --git a/src/tiles/styles.scss b/src/tiles/styles.scss
index 52908b26e2..e02f0bc1fe 100644
--- a/src/tiles/styles.scss
+++ b/src/tiles/styles.scss
@@ -65,8 +65,8 @@ $gutter: awsui.$space-tile-gutter;
   }
 
   &.disabled {
-    border-block: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
-    border-inline: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
+    border-block: awsui.$border-width-field solid awsui.$color-border-tiles-disabled;
+    border-inline: awsui.$border-width-field solid awsui.$color-border-tiles-disabled;
     background: awsui.$color-background-tiles-disabled;
   }
 
diff --git a/src/tutorial-panel/components/tutorial-list/styles.scss b/src/tutorial-panel/components/tutorial-list/styles.scss
index 32cf9f2fb6..41c83e4a25 100644
--- a/src/tutorial-panel/components/tutorial-list/styles.scss
+++ b/src/tutorial-panel/components/tutorial-list/styles.scss
@@ -61,8 +61,8 @@
 }
 
 .button-wrapper {
-  margin-block: calc(-1 * #{awsui.$space-xxs} - #{styles.$control-border-width});
-  margin-inline: calc(-1 * #{awsui.$space-xxs} - #{styles.$control-border-width});
+  margin-block: calc(-1 * #{awsui.$space-xxs} - #{awsui.$border-width-button});
+  margin-inline: calc(-1 * #{awsui.$space-xxs} - #{awsui.$border-width-button});
 }
 
 .start {

From ee17b6ea1dec77ff04da93ee4973e64a1e895aba Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 11 Apr 2025 09:32:51 +0200
Subject: [PATCH 24/35] update borderWidthField value to 1px

---
 .../__snapshots__/themes.test.ts.snap          |  8 ++++----
 .../__snapshots__/design-tokens.test.ts.snap   | 18 +++++++++---------
 src/internal/styles/forms/mixins.scss          |  2 +-
 src/radio-group/radio-button.tsx               |  6 ++----
 style-dictionary/visual-refresh/borders.ts     |  2 +-
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 261365ff80..e7cefdac0c 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -2731,7 +2731,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -3403,7 +3403,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -4075,7 +4075,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -4747,7 +4747,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 1e271e46c2..1083e2369e 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -17998,7 +17998,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20556,7 +20556,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -23114,7 +23114,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -25672,7 +25672,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -28230,7 +28230,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -30788,7 +30788,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -33346,7 +33346,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -35904,7 +35904,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -38462,7 +38462,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "2px",
+      "$value": "1px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index 7a83d7aff9..744fca091f 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -121,7 +121,7 @@
   border-end-start-radius: $border-radius;
   border-end-end-radius: $border-radius;
 
-  box-shadow: inset foundation.$box-shadow-focused-light;
+  box-shadow: foundation.$box-shadow-focused-light;
 }
 
 @mixin form-disabled-element {
diff --git a/src/radio-group/radio-button.tsx b/src/radio-group/radio-button.tsx
index a2e521950f..c6c6c0d50b 100644
--- a/src/radio-group/radio-button.tsx
+++ b/src/radio-group/radio-button.tsx
@@ -9,7 +9,6 @@ import AbstractSwitch from '../internal/components/abstract-switch';
 import { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';
 import { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
-import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { RadioGroupProps } from './interfaces';
 
 import styles from './styles.css.js';
@@ -38,7 +37,6 @@ export default React.forwardRef(function RadioButton(
   }: RadioButtonProps,
   ref: React.Ref<HTMLInputElement>
 ) {
-  const isVisualRefresh = useVisualRefresh();
   const radioButtonRef = useRef<HTMLInputElement>(null);
   const mergedRefs = useMergeRefs(radioButtonRef, ref);
 
@@ -83,10 +81,10 @@ export default React.forwardRef(function RadioButton(
               [styles['styled-circle-disabled']]: disabled,
               [styles['styled-circle-readonly']]: readOnly,
             })}
-            strokeWidth={8}
+            strokeWidth={6.5}
             cx={50}
             cy={50}
-            r={isVisualRefresh ? 44 : 46}
+            r={46}
           />
           <circle
             className={clsx(styles['styled-circle-fill'], {
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index 1942d523db..de12e168d6 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -44,7 +44,7 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderWidthAlert: '2px',
   borderWidthButton: '2px',
   borderWidthDropdown: '2px',
-  borderWidthField: '2px',
+  borderWidthField: '1px',
   borderWidthPopover: '2px',
   borderWidthToken: '2px',
 };

From 250e35f6c3bb9c82f17d7cee52e23b602d43500e Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 11 Apr 2025 11:51:38 +0200
Subject: [PATCH 25/35] update integration tests with main

---
 .../__snapshots__/themes.test.ts.snap         |   28 +-
 .../__snapshots__/design-tokens.test.ts.snap  | 2830 +----------------
 2 files changed, 150 insertions(+), 2708 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index e7cefdac0c..51421e241f 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -2694,7 +2694,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -2731,7 +2731,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -2861,11 +2861,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#006ce0",
+  "color-border-input-focused": "#002b66",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#c6c6cd",
+  "color-border-layout": "#b4b4bb",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -3366,7 +3366,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -3403,7 +3403,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -3533,11 +3533,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#006ce0",
+  "color-border-input-focused": "#002b66",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#c6c6cd",
+  "color-border-layout": "#b4b4bb",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -4038,7 +4038,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4075,7 +4075,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -4205,7 +4205,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#42b4ff",
+  "color-border-input-focused": "#b8e7ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
@@ -4710,7 +4710,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "1px",
+  "border-control-focus-ring-shadow-spread": "0px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4747,7 +4747,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "1px",
+  "border-width-field": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -4877,7 +4877,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#42b4ff",
+  "color-border-input-focused": "#b8e7ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 1083e2369e..daf5e92ceb 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -17998,7 +17998,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -18501,8 +18501,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -20556,7 +20556,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20696,2586 +20696,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the feedback/input dialogue box.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
-          },
-        },
-        "color-background-dropdown-item-default": {
-          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-dropdown-item-filter-match": {
-          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-dropdown-item-hover": {
-          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
-          "$value": {
-            "dark": "#131920",
-            "light": "#131920",
-          },
-        },
-        "color-background-home-header": {
-          "$description": "The background color of the home header, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-background-input-default": {
-          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-input-disabled": {
-          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-item-selected": {
-          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
-          "$value": {
-            "dark": "#001129",
-            "light": "#001129",
-          },
-        },
-        "color-background-layout-main": {
-          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-layout-toggle-active": {
-          "$description": "The background color of the app layout toggle button when it's active.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-layout-toggle-default": {
-          "$description": "The default background color of the app layout toggle button.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-layout-toggle-hover": {
-          "$description": "The background color of the app layout toggle button on hover.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-layout-toggle-selected-active": {
-          "$description": "The background color of the app layout toggle button when it's selected and active.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-layout-toggle-selected-default": {
-          "$description": "The default background color of the app layout toggle button when it's selected.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-layout-toggle-selected-hover": {
-          "$description": "The background color of the app layout toggle button on hover when it's selected.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-background-loading-bar-gen-ai": {
-          "$description": "The background color of gen-ai loading bars.",
-          "$value": {
-            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
-          },
-        },
-        "color-background-notification-blue": {
-          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-background-notification-green": {
-          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
-          "$value": {
-            "dark": "#00802f",
-            "light": "#00802f",
-          },
-        },
-        "color-background-notification-grey": {
-          "$description": "Background color for grey notifications. For example: grey badges.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-notification-red": {
-          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
-          "$value": {
-            "dark": "#db0000",
-            "light": "#db0000",
-          },
-        },
-        "color-background-notification-severity-critical": {
-          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#870303",
-          },
-        },
-        "color-background-notification-severity-high": {
-          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#ce3311",
-          },
-        },
-        "color-background-notification-severity-low": {
-          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#f2cd54",
-            "light": "#f2cd54",
-          },
-        },
-        "color-background-notification-severity-medium": {
-          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#f89256",
-          },
-        },
-        "color-background-notification-severity-neutral": {
-          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-background-notification-yellow": {
-          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
-          "$value": {
-            "dark": "#ffe347",
-            "light": "#ffe347",
-          },
-        },
-        "color-background-popover": {
-          "$description": "Background color for the popover container.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#1b232d",
-          },
-        },
-        "color-background-segment-active": {
-          "$description": "The background color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-background-segment-default": {
-          "$description": "The background color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-background-segment-disabled": {
-          "$description": "The background color of disabled segments in a segmented control.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-background-segment-hover": {
-          "$description": "The background color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
-          },
-        },
-        "color-background-status-error": {
-          "$description": "The background color of an item in error state. For example: error alerts.",
-          "$value": {
-            "dark": "#1f0000",
-            "light": "#1f0000",
-          },
-        },
-        "color-background-status-info": {
-          "$description": "The background color of an informational item. For example: information alerts.",
-          "$value": {
-            "dark": "#001129",
-            "light": "#001129",
-          },
-        },
-        "color-background-status-success": {
-          "$description": "The background color of an item in success state. For example: success alerts.",
-          "$value": {
-            "dark": "#001401",
-            "light": "#001401",
-          },
-        },
-        "color-background-status-warning": {
-          "$description": "The background color of an item in warning state. For example: warning alerts.",
-          "$value": {
-            "dark": "#191100",
-            "light": "#191100",
-          },
-        },
-        "color-background-toggle-button-normal-pressed": {
-          "$description": "The background color of normal toggle buttons in pressed state.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#333843",
-          },
-        },
-        "color-background-toggle-checked-disabled": {
-          "$description": "The background color of checked toggles in disabled state.",
-          "$value": {
-            "dark": "#002b66",
-            "light": "#002b66",
-          },
-        },
-        "color-board-placeholder-active": {
-          "$description": "The color of board placeholder in active state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-board-placeholder-hover": {
-          "$description": "The color of board placeholder in hovered state.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-border-button-normal-active": {
-          "$description": "The border color of normal buttons in active state.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-border-button-normal-default": {
-          "$description": "The border color of normal buttons.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-button-normal-disabled": {
-          "$description": "The border color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-button-normal-hover": {
-          "$description": "The border color of normal buttons in hover state.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-border-button-primary-disabled": {
-          "$description": "The border color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
-          },
-        },
-        "color-border-container-top": {
-          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-border-control-default": {
-          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-border-dialog": {
-          "$description": "The border color of the feedback/input dialogue box.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-divider-default": {
-          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-divider-secondary": {
-          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
-          },
-        },
-        "color-border-dropdown-item-focused": {
-          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-dropdown-item-hover": {
-          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-input-default": {
-          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-border-input-focused": {
-          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-item-focused": {
-          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-border-item-selected": {
-          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-segment-active": {
-          "$description": "The border color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-default": {
-          "$description": "The border color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-disabled": {
-          "$description": "The border color of disabled segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-segment-hover": {
-          "$description": "The border color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-border-status-error": {
-          "$description": "The border color of an item in error state. For example: error alerts.",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#ff7a7a",
-          },
-        },
-        "color-border-status-info": {
-          "$description": "The border color of an informational item. For example: information alerts.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-border-status-success": {
-          "$description": "The border color of an item in success state. For example: success alerts.",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#2bb534",
-          },
-        },
-        "color-border-status-warning": {
-          "$description": "The border color of an item in warning state. For example: warning alerts.",
-          "$value": {
-            "dark": "#fbd332",
-            "light": "#fbd332",
-          },
-        },
-        "color-border-toggle-button-normal-pressed": {
-          "$description": "The border color of normal toggle buttons in pressed state.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-charts-blue-1-1000": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#b3e4f8",
-            "light": "#01437d",
-          },
-        },
-        "color-charts-blue-1-1100": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#caedfc",
-            "light": "#003c75",
-          },
-        },
-        "color-charts-blue-1-1200": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ddf4ff",
-            "light": "#00366d",
-          },
-        },
-        "color-charts-blue-1-300": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#00819c",
-            "light": "#529ccb",
-          },
-        },
-        "color-charts-blue-1-400": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#0497ba",
-            "light": "#3184c2",
-          },
-        },
-        "color-charts-blue-1-500": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#08aad2",
-            "light": "#0273bb",
-          },
-        },
-        "color-charts-blue-1-600": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#44b9dd",
-            "light": "#0166ab",
-          },
-        },
-        "color-charts-blue-1-700": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#63c6e7",
-            "light": "#015b9d",
-          },
-        },
-        "color-charts-blue-1-800": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#79d2f0",
-            "light": "#015292",
-          },
-        },
-        "color-charts-blue-1-900": {
-          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#98dcf5",
-            "light": "#014a87",
-          },
-        },
-        "color-charts-blue-2-1000": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#d2dcff",
-            "light": "#23379b",
-          },
-        },
-        "color-charts-blue-2-1100": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#dfe6ff",
-            "light": "#1f3191",
-          },
-        },
-        "color-charts-blue-2-1200": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ecf0ff",
-            "light": "#1b2b88",
-          },
-        },
-        "color-charts-blue-2-300": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#486de8",
-            "light": "#688ae8",
-          },
-        },
-        "color-charts-blue-2-400": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#6384f5",
-            "light": "#5978e3",
-          },
-        },
-        "color-charts-blue-2-500": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#7698fe",
-            "light": "#4066df",
-          },
-        },
-        "color-charts-blue-2-600": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#8ea9ff",
-            "light": "#3759ce",
-          },
-        },
-        "color-charts-blue-2-700": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#a2b8ff",
-            "light": "#314fbf",
-          },
-        },
-        "color-charts-blue-2-800": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#b1c5ff",
-            "light": "#2c46b1",
-          },
-        },
-        "color-charts-blue-2-900": {
-          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#c3d1ff",
-            "light": "#273ea5",
-          },
-        },
-        "color-charts-green-1000": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#c5e7a8",
-            "light": "#104d01",
-          },
-        },
-        "color-charts-green-1100": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#d5efbe",
-            "light": "#0f4601",
-          },
-        },
-        "color-charts-green-1200": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#e4f7d5",
-            "light": "#0d4000",
-          },
-        },
-        "color-charts-green-300": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#48851a",
-            "light": "#67a353",
-          },
-        },
-        "color-charts-green-400": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#5a9b29",
-            "light": "#41902c",
-          },
-        },
-        "color-charts-green-500": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#69ae34",
-            "light": "#1f8104",
-          },
-        },
-        "color-charts-green-600": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#7dbd4c",
-            "light": "#1a7302",
-          },
-        },
-        "color-charts-green-700": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#8fca61",
-            "light": "#176702",
-          },
-        },
-        "color-charts-green-800": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#9fd673",
-            "light": "#145d02",
-          },
-        },
-        "color-charts-green-900": {
-          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#b2df8d",
-            "light": "#125502",
-          },
-        },
-        "color-charts-line-axis": {
-          "$description": "Color of the axis lines in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-line-grid": {
-          "$description": "Color of the grid lines in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-line-tick": {
-          "$description": "Color of the tick marks in a chart.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#dedee3",
-          },
-        },
-        "color-charts-orange-1000": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd4bb",
-            "light": "#732c02",
-          },
-        },
-        "color-charts-orange-1100": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffe1cf",
-            "light": "#692801",
-          },
-        },
-        "color-charts-orange-1200": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffede2",
-            "light": "#602400",
-          },
-        },
-        "color-charts-orange-300": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#c55305",
-            "light": "#e07941",
-          },
-        },
-        "color-charts-orange-400": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#de6923",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-orange-500": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#f27c36",
-            "light": "#bc4d01",
-          },
-        },
-        "color-charts-orange-600": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#a84401",
-          },
-        },
-        "color-charts-orange-700": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#fca572",
-            "light": "#983c02",
-          },
-        },
-        "color-charts-orange-800": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb68b",
-            "light": "#8a3603",
-          },
-        },
-        "color-charts-orange-900": {
-          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc6a4",
-            "light": "#7e3103",
-          },
-        },
-        "color-charts-palette-categorical-1": {
-          "$description": "Color #1 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#486de8",
-            "light": "#688ae8",
-          },
-        },
-        "color-charts-palette-categorical-10": {
-          "$description": "Color #10 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#a84401",
-          },
-        },
-        "color-charts-palette-categorical-11": {
-          "$description": "Color #11 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c3d1ff",
-            "light": "#273ea5",
-          },
-        },
-        "color-charts-palette-categorical-12": {
-          "$description": "Color #12 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffdfe8",
-            "light": "#780d35",
-          },
-        },
-        "color-charts-palette-categorical-13": {
-          "$description": "Color #13 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#94e0d0",
-            "light": "#03524a",
-          },
-        },
-        "color-charts-palette-categorical-14": {
-          "$description": "Color #14 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#efe2ff",
-            "light": "#4a238b",
-          },
-        },
-        "color-charts-palette-categorical-15": {
-          "$description": "Color #15 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffc6a4",
-            "light": "#7e3103",
-          },
-        },
-        "color-charts-palette-categorical-16": {
-          "$description": "Color #16 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ecf0ff",
-            "light": "#1b2b88",
-          },
-        },
-        "color-charts-palette-categorical-17": {
-          "$description": "Color #17 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d56889",
-            "light": "#ce567c",
-          },
-        },
-        "color-charts-palette-categorical-18": {
-          "$description": "Color #18 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d7f7f0",
-            "light": "#003e38",
-          },
-        },
-        "color-charts-palette-categorical-19": {
-          "$description": "Color #19 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#a173ea",
-            "light": "#9469d6",
-          },
-        },
-        "color-charts-palette-categorical-2": {
-          "$description": "Color #2 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#e07f9d",
-            "light": "#c33d69",
-          },
-        },
-        "color-charts-palette-categorical-20": {
-          "$description": "Color #20 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffede2",
-            "light": "#602400",
-          },
-        },
-        "color-charts-palette-categorical-21": {
-          "$description": "Color #21 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#7698fe",
-            "light": "#4066df",
-          },
-        },
-        "color-charts-palette-categorical-22": {
-          "$description": "Color #22 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f5a2bb",
-            "light": "#a32952",
-          },
-        },
-        "color-charts-palette-categorical-23": {
-          "$description": "Color #23 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#00b09b",
-            "light": "#0d7d70",
-          },
-        },
-        "color-charts-palette-categorical-24": {
-          "$description": "Color #24 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#cbabfc",
-            "light": "#6b40b2",
-          },
-        },
-        "color-charts-palette-categorical-25": {
-          "$description": "Color #25 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f27c36",
-            "light": "#bc4d01",
-          },
-        },
-        "color-charts-palette-categorical-26": {
-          "$description": "Color #26 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#b1c5ff",
-            "light": "#2c46b1",
-          },
-        },
-        "color-charts-palette-categorical-27": {
-          "$description": "Color #27 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffd1de",
-            "light": "#81143b",
-          },
-        },
-        "color-charts-palette-categorical-28": {
-          "$description": "Color #28 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#77d7c3",
-            "light": "#045b52",
-          },
-        },
-        "color-charts-palette-categorical-29": {
-          "$description": "Color #29 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#e8d5ff",
-            "light": "#512994",
-          },
-        },
-        "color-charts-palette-categorical-3": {
-          "$description": "Color #3 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#018977",
-            "light": "#2ea597",
-          },
-        },
-        "color-charts-palette-categorical-30": {
-          "$description": "Color #30 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffb68b",
-            "light": "#8a3603",
-          },
-        },
-        "color-charts-palette-categorical-31": {
-          "$description": "Color #31 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#dfe6ff",
-            "light": "#1f3191",
-          },
-        },
-        "color-charts-palette-categorical-32": {
-          "$description": "Color #32 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c64a70",
-            "light": "#da7596",
-          },
-        },
-        "color-charts-palette-categorical-33": {
-          "$description": "Color #33 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c2f0e6",
-            "light": "#01443e",
-          },
-        },
-        "color-charts-palette-categorical-34": {
-          "$description": "Color #34 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#8d59de",
-            "light": "#a783e1",
-          },
-        },
-        "color-charts-palette-categorical-35": {
-          "$description": "Color #35 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffe1cf",
-            "light": "#692801",
-          },
-        },
-        "color-charts-palette-categorical-36": {
-          "$description": "Color #36 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#6384f5",
-            "light": "#5978e3",
-          },
-        },
-        "color-charts-palette-categorical-37": {
-          "$description": "Color #37 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#eb92ad",
-            "light": "#b1325c",
-          },
-        },
-        "color-charts-palette-categorical-38": {
-          "$description": "Color #38 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#009d89",
-            "light": "#1c8e81",
-          },
-        },
-        "color-charts-palette-categorical-39": {
-          "$description": "Color #39 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#bf9bf9",
-            "light": "#7749bf",
-          },
-        },
-        "color-charts-palette-categorical-4": {
-          "$description": "Color #4 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#b088f5",
-            "light": "#8456ce",
-          },
-        },
-        "color-charts-palette-categorical-40": {
-          "$description": "Color #40 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#de6923",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-palette-categorical-41": {
-          "$description": "Color #41 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#a2b8ff",
-            "light": "#314fbf",
-          },
-        },
-        "color-charts-palette-categorical-42": {
-          "$description": "Color #42 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffc1d4",
-            "light": "#8b1b42",
-          },
-        },
-        "color-charts-palette-categorical-43": {
-          "$description": "Color #43 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#5fccb7",
-            "light": "#06645a",
-          },
-        },
-        "color-charts-palette-categorical-44": {
-          "$description": "Color #44 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#dfc8ff",
-            "light": "#59309d",
-          },
-        },
-        "color-charts-palette-categorical-45": {
-          "$description": "Color #45 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#fca572",
-            "light": "#983c02",
-          },
-        },
-        "color-charts-palette-categorical-46": {
-          "$description": "Color #46 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d2dcff",
-            "light": "#23379b",
-          },
-        },
-        "color-charts-palette-categorical-47": {
-          "$description": "Color #47 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffecf1",
-            "light": "#6f062f",
-          },
-        },
-        "color-charts-palette-categorical-48": {
-          "$description": "Color #48 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ace9db",
-            "light": "#014b44",
-          },
-        },
-        "color-charts-palette-categorical-49": {
-          "$description": "Color #49 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#f5edff",
-            "light": "#431d84",
-          },
-        },
-        "color-charts-palette-categorical-5": {
-          "$description": "Color #5 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#c55305",
-            "light": "#e07941",
-          },
-        },
-        "color-charts-palette-categorical-50": {
-          "$description": "Color #50 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffd4bb",
-            "light": "#732c02",
-          },
-        },
-        "color-charts-palette-categorical-6": {
-          "$description": "Color #6 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#8ea9ff",
-            "light": "#3759ce",
-          },
-        },
-        "color-charts-palette-categorical-7": {
-          "$description": "Color #7 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#ffb0c8",
-            "light": "#962249",
-          },
-        },
-        "color-charts-palette-categorical-8": {
-          "$description": "Color #8 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#40bfa9",
-            "light": "#096f64",
-          },
-        },
-        "color-charts-palette-categorical-9": {
-          "$description": "Color #9 on the categorical data visualization palette.",
-          "$value": {
-            "dark": "#d6baff",
-            "light": "#6237a7",
-          },
-        },
-        "color-charts-pink-1000": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd1de",
-            "light": "#81143b",
-          },
-        },
-        "color-charts-pink-1100": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffdfe8",
-            "light": "#780d35",
-          },
-        },
-        "color-charts-pink-1200": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffecf1",
-            "light": "#6f062f",
-          },
-        },
-        "color-charts-pink-300": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#c64a70",
-            "light": "#da7596",
-          },
-        },
-        "color-charts-pink-400": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#d56889",
-            "light": "#ce567c",
-          },
-        },
-        "color-charts-pink-500": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#e07f9d",
-            "light": "#c33d69",
-          },
-        },
-        "color-charts-pink-600": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#eb92ad",
-            "light": "#b1325c",
-          },
-        },
-        "color-charts-pink-700": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#f5a2bb",
-            "light": "#a32952",
-          },
-        },
-        "color-charts-pink-800": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb0c8",
-            "light": "#962249",
-          },
-        },
-        "color-charts-pink-900": {
-          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc1d4",
-            "light": "#8b1b42",
-          },
-        },
-        "color-charts-purple-1000": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#e8d5ff",
-            "light": "#512994",
-          },
-        },
-        "color-charts-purple-1100": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#efe2ff",
-            "light": "#4a238b",
-          },
-        },
-        "color-charts-purple-1200": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#f5edff",
-            "light": "#431d84",
-          },
-        },
-        "color-charts-purple-300": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#8d59de",
-            "light": "#a783e1",
-          },
-        },
-        "color-charts-purple-400": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#a173ea",
-            "light": "#9469d6",
-          },
-        },
-        "color-charts-purple-500": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#b088f5",
-            "light": "#8456ce",
-          },
-        },
-        "color-charts-purple-600": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#bf9bf9",
-            "light": "#7749bf",
-          },
-        },
-        "color-charts-purple-700": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#cbabfc",
-            "light": "#6b40b2",
-          },
-        },
-        "color-charts-purple-800": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#d6baff",
-            "light": "#6237a7",
-          },
-        },
-        "color-charts-purple-900": {
-          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#dfc8ff",
-            "light": "#59309d",
-          },
-        },
-        "color-charts-red-1000": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ffd2cf",
-            "light": "#7d2105",
-          },
-        },
-        "color-charts-red-1100": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#ffe0dd",
-            "light": "#721e03",
-          },
-        },
-        "color-charts-red-1200": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffecea",
-            "light": "#671c00",
-          },
-        },
-        "color-charts-red-300": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#ea7158",
-          },
-        },
-        "color-charts-red-400": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#ed5958",
-            "light": "#dc5032",
-          },
-        },
-        "color-charts-red-500": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#d13313",
-          },
-        },
-        "color-charts-red-600": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#ff8a8a",
-            "light": "#ba2e0f",
-          },
-        },
-        "color-charts-red-700": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#ffa09e",
-            "light": "#a82a0c",
-          },
-        },
-        "color-charts-red-800": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#ffb3b0",
-            "light": "#972709",
-          },
-        },
-        "color-charts-red-900": {
-          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#ffc4c0",
-            "light": "#892407",
-          },
-        },
-        "color-charts-status-critical": {
-          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#d63f38",
-            "light": "#7d2105",
-          },
-        },
-        "color-charts-status-high": {
-          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#fe6e73",
-            "light": "#ba2e0f",
-          },
-        },
-        "color-charts-status-info": {
-          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
-          "$value": {
-            "dark": "#08aad2",
-            "light": "#3184c2",
-          },
-        },
-        "color-charts-status-low": {
-          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#dfb52c",
-            "light": "#b2911c",
-          },
-        },
-        "color-charts-status-medium": {
-          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#f89256",
-            "light": "#cc5f21",
-          },
-        },
-        "color-charts-status-neutral": {
-          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-charts-status-positive": {
-          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
-          "$value": {
-            "dark": "#69ae34",
-            "light": "#67a353",
-          },
-        },
-        "color-charts-teal-1000": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#ace9db",
-            "light": "#014b44",
-          },
-        },
-        "color-charts-teal-1100": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#c2f0e6",
-            "light": "#01443e",
-          },
-        },
-        "color-charts-teal-1200": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#d7f7f0",
-            "light": "#003e38",
-          },
-        },
-        "color-charts-teal-300": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#018977",
-            "light": "#2ea597",
-          },
-        },
-        "color-charts-teal-400": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#009d89",
-            "light": "#1c8e81",
-          },
-        },
-        "color-charts-teal-500": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#00b09b",
-            "light": "#0d7d70",
-          },
-        },
-        "color-charts-teal-600": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#40bfa9",
-            "light": "#096f64",
-          },
-        },
-        "color-charts-teal-700": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#5fccb7",
-            "light": "#06645a",
-          },
-        },
-        "color-charts-teal-800": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#77d7c3",
-            "light": "#045b52",
-          },
-        },
-        "color-charts-teal-900": {
-          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#94e0d0",
-            "light": "#03524a",
-          },
-        },
-        "color-charts-threshold-info": {
-          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
-          },
-        },
-        "color-charts-threshold-negative": {
-          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#db0000",
-          },
-        },
-        "color-charts-threshold-neutral": {
-          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#656871",
-          },
-        },
-        "color-charts-threshold-positive": {
-          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#00802f",
-          },
-        },
-        "color-charts-yellow-1000": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
-          "$value": {
-            "dark": "#f7db8a",
-            "light": "#553f03",
-          },
-        },
-        "color-charts-yellow-1100": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
-          "$value": {
-            "dark": "#fce5a8",
-            "light": "#4d3901",
-          },
-        },
-        "color-charts-yellow-1200": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
-          "$value": {
-            "dark": "#ffefc9",
-            "light": "#483300",
-          },
-        },
-        "color-charts-yellow-300": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
-          "$value": {
-            "dark": "#977001",
-            "light": "#b2911c",
-          },
-        },
-        "color-charts-yellow-400": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
-          "$value": {
-            "dark": "#b08400",
-            "light": "#9c7b0b",
-          },
-        },
-        "color-charts-yellow-500": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
-          "$value": {
-            "dark": "#c59600",
-            "light": "#8a6b05",
-          },
-        },
-        "color-charts-yellow-600": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
-          "$value": {
-            "dark": "#d3a61c",
-            "light": "#7b5f04",
-          },
-        },
-        "color-charts-yellow-700": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
-          "$value": {
-            "dark": "#dfb52c",
-            "light": "#6f5504",
-          },
-        },
-        "color-charts-yellow-800": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
-          "$value": {
-            "dark": "#eac33a",
-            "light": "#654d03",
-          },
-        },
-        "color-charts-yellow-900": {
-          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
-          "$value": {
-            "dark": "#f1cf65",
-            "light": "#5d4503",
-          },
-        },
-        "color-drag-placeholder-active": {
-          "$description": "The color of drag placeholder in active state.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-drag-placeholder-hover": {
-          "$description": "The color of drag placeholder in hovered state.",
-          "$value": {
-            "dark": "#006ce0",
-            "light": "#006ce0",
-          },
-        },
-        "color-foreground-control-default": {
-          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-foreground-control-disabled": {
-          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-foreground-control-read-only": {
-          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-accent": {
-          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-avatar": {
-          "$description": "The text and icon color of avatars.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-body-default": {
-          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-body-secondary": {
-          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-breadcrumb-current": {
-          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-breadcrumb-icon": {
-          "$description": "The color used for the icon delimiter between breadcrumb items.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-button-icon-disabled": {
-          "$description": "The color of icon buttons in disabled state.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-button-normal-active": {
-          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-button-normal-default": {
-          "$description": "The default text color of normal buttons.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-button-normal-disabled": {
-          "$description": "The text color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-button-normal-hover": {
-          "$description": "The hover text color of normal buttons.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-button-primary-active": {
-          "$description": "The active text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-button-primary-default": {
-          "$description": "The default text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-button-primary-disabled": {
-          "$description": "The text color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#8c8c94",
-            "light": "#8c8c94",
-          },
-        },
-        "color-text-button-primary-hover": {
-          "$description": "The hover text color of primary buttons.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-chat-bubble-incoming": {
-          "$description": "Text color of \`incoming\` chat bubble.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-chat-bubble-outgoing": {
-          "$description": "Text color of \`outgoing\` chat bubble.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-counter": {
-          "$description": "The default color for counters. For example: counters in table headers",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-dropdown-item-default": {
-          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-dropdown-item-disabled": {
-          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-dropdown-item-filter-match": {
-          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-dropdown-item-highlighted": {
-          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-empty": {
-          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-form-default": {
-          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-form-secondary": {
-          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-group-label": {
-          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-heading-default": {
-          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-heading-secondary": {
-          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-home-header-default": {
-          "$description": "The color of the home header's text, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#ebebf0",
-            "light": "#ebebf0",
-          },
-        },
-        "color-text-home-header-secondary": {
-          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
-          "$value": {
-            "dark": "#c6c6cd",
-            "light": "#c6c6cd",
-          },
-        },
-        "color-text-input-disabled": {
-          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-input-placeholder": {
-          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-interactive-active": {
-          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-interactive-default": {
-          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-interactive-disabled": {
-          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
-          "$value": {
-            "dark": "#656871",
-            "light": "#656871",
-          },
-        },
-        "color-text-interactive-hover": {
-          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-interactive-inverted-default": {
-          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-interactive-inverted-hover": {
-          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-label": {
-          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-label-gen-ai": {
-          "$description": "The default color for labels indicating that content is produced by generative AI.",
-          "$value": {
-            "dark": "#bf80ff",
-            "light": "#bf80ff",
-          },
-        },
-        "color-text-layout-toggle": {
-          "$description": "The default color of the app layout toggle.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-layout-toggle-active": {
-          "$description": "The color of the app layout toggle button when it's active.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
-          },
-        },
-        "color-text-layout-toggle-hover": {
-          "$description": "The color of the app layout toggle button on hover.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-layout-toggle-selected": {
-          "$description": "The color of the app layout toggle button when it's selected.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-link-default": {
-          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-link-hover": {
-          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-notification-default": {
-          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-critical": {
-          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
-          "$value": {
-            "dark": "#000000",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-high": {
-          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-notification-severity-low": {
-          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-notification-severity-medium": {
-          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-notification-severity-neutral": {
-          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-segment-active": {
-          "$description": "The text color of the active segment in a segmented control.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#0f141a",
-          },
-        },
-        "color-text-segment-default": {
-          "$description": "The text color of inactive segments in a segmented control.",
-          "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
-          },
-        },
-        "color-text-segment-hover": {
-          "$description": "The text color of inactive segments in a segmented control on hover.",
-          "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
-          },
-        },
-        "color-text-status-error": {
-          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
-          "$value": {
-            "dark": "#ff7a7a",
-            "light": "#ff7a7a",
-          },
-        },
-        "color-text-status-inactive": {
-          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
-          "$value": {
-            "dark": "#a4a4ad",
-            "light": "#a4a4ad",
-          },
-        },
-        "color-text-status-info": {
-          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
-          },
-        },
-        "color-text-status-success": {
-          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
-          "$value": {
-            "dark": "#2bb534",
-            "light": "#2bb534",
-          },
-        },
-        "color-text-status-warning": {
-          "$description": "The color of warning icons.",
-          "$value": {
-            "dark": "#fbd332",
-            "light": "#fbd332",
-          },
-        },
-        "color-text-toggle-button-icon-pressed": {
-          "$description": "The pressed text color of icon toggle buttons.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "color-text-toggle-button-normal-pressed": {
-          "$description": "The pressed text color of normal toggle buttons.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
-          },
-        },
-        "color-text-top-navigation-title": {
-          "$description": "The color of the title in the top navigation.",
-          "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
-          },
-        },
-        "font-family-base": {
-          "$description": "The default font family that will be applied globally to the product interface.",
-          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
-        },
-        "font-family-monospace": {
-          "$description": "The monospace font family that will be applied globally to the product interface.",
-          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
-        },
-        "font-size-body-m": {
-          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
-          "$value": "14px",
-        },
-        "font-size-body-s": {
-          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
-          "$value": "12px",
-        },
-        "font-size-display-l": {
-          "$description": "The default font size for large display text.",
-          "$value": "42px",
-        },
-        "font-size-heading-l": {
-          "$description": "The default font size for h2s.",
-          "$value": "20px",
-        },
-        "font-size-heading-m": {
-          "$description": "The default font size for h3s.",
-          "$value": "18px",
-        },
-        "font-size-heading-s": {
-          "$description": "The default font size for h4s.",
-          "$value": "16px",
-        },
-        "font-size-heading-xl": {
-          "$description": "The default font size for h1s.",
-          "$value": "24px",
-        },
-        "font-size-heading-xs": {
-          "$description": "The default font size for h5s.",
-          "$value": "14px",
-        },
-        "font-weight-button": {
-          "$description": "The default font weight for button text.",
-          "$value": "700",
-        },
-        "font-weight-heading-l": {
-          "$description": "The default font weight for h2s.",
-          "$value": "700",
-        },
-        "font-weight-heading-m": {
-          "$description": "The default font weight for h3s.",
-          "$value": "700",
-        },
-        "font-weight-heading-s": {
-          "$description": "The default font weight for h4s.",
-          "$value": "700",
-        },
-        "font-weight-heading-xl": {
-          "$description": "The default font weight for h1s.",
-          "$value": "700",
-        },
-        "font-weight-heading-xs": {
-          "$description": "The default font weight for h5s.",
-          "$value": "700",
-        },
-        "line-height-body-m": {
-          "$description": "The default line height for regular body text.",
-          "$value": "20px",
-        },
-        "line-height-body-s": {
-          "$description": "The default line height for small body text.",
-          "$value": "16px",
-        },
-        "line-height-display-l": {
-          "$description": "The default line height for large display text.",
-          "$value": "48px",
-        },
-        "line-height-heading-l": {
-          "$description": "The default line height for h2s.",
-          "$value": "24px",
-        },
-        "line-height-heading-m": {
-          "$description": "The default line height for h3s.",
-          "$value": "22px",
-        },
-        "line-height-heading-s": {
-          "$description": "The default line height for h4s.",
-          "$value": "20px",
-        },
-        "line-height-heading-xl": {
-          "$description": "The default line height for h1s.",
-          "$value": "30px",
-        },
-        "line-height-heading-xs": {
-          "$description": "The default line height for h5s.",
-          "$value": "18px",
-        },
-        "motion-duration-avatar-gen-ai-gradient": {
-          "$description": "The duration for gradient motion of gen-ai avatars.",
-          "$value": {
-            "default": "3600ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-avatar-loading-dots": {
-          "$description": "The duration for loading motion of avatars.",
-          "$value": {
-            "default": "1200ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-complex": {
-          "$description": "The duration for drawing more attention or accommodating for more complexity.",
-          "$value": {
-            "default": "250ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-expressive": {
-          "$description": "The duration for accommodating the motion with more expressiveness.",
-          "$value": {
-            "default": "165ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-duration-responsive": {
-          "$description": "The duration for making the motion feel quick and responsive.",
-          "$value": {
-            "default": "115ms",
-            "disabled": "0ms",
-          },
-        },
-        "motion-easing-avatar-gen-ai-gradient": {
-          "$description": "The easing curve for gradient motion of gen-ai avatars.",
-          "$value": {
-            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
-            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
-          },
-        },
-        "motion-easing-expressive": {
-          "$description": "The easing curve for drawing a user's attention in an expressive way.",
-          "$value": {
-            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
-            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
-          },
-        },
-        "motion-easing-responsive": {
-          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
-          "$value": {
-            "default": "cubic-bezier(0, 0, 0, 1)",
-            "disabled": "cubic-bezier(0, 0, 0, 1)",
-          },
-        },
-        "motion-easing-sticky": {
-          "$description": "The easing curve for making an element sticky to a certain state.",
-          "$value": {
-            "default": "cubic-bezier(1, 0, 0.83, 1)",
-            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
-          },
-        },
-        "motion-keyframes-fade-in": {
-          "$description": "The CSS keyframes for showing an element.",
-          "$value": {
-            "default": "awsui-fade-in-35003c",
-            "disabled": "awsui-fade-in-35003c",
-          },
-        },
-        "motion-keyframes-fade-out": {
-          "$description": "The CSS keyframes for hiding an element.",
-          "$value": {
-            "default": "awsui-fade-out-35003c",
-            "disabled": "awsui-fade-out-35003c",
-          },
-        },
-        "motion-keyframes-scale-popup": {
-          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
-          "$value": {
-            "default": "awsui-scale-popup-35003c",
-            "disabled": "awsui-scale-popup-35003c",
-          },
-        },
-        "motion-keyframes-status-icon-error": {
-          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
-          "$value": {
-            "default": "awsui-status-icon-error-35003c",
-            "disabled": "awsui-status-icon-error-35003c",
-          },
-        },
-        "shadow-container-active": {
-          "$description": "Shadow for containers and cards in active state.",
-          "$value": {
-            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
-            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
-          },
-        },
-        "space-container-horizontal": {
-          "$description": "The horizontal padding inside a container.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "20px",
-          },
-        },
-        "space-field-horizontal": {
-          "$description": "The horizontal padding inside field components.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "12px",
-          },
-        },
-        "space-scaled-l": {
-          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "16px",
-          },
-        },
-        "space-scaled-m": {
-          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
-          "$value": {
-            "comfortable": "16px",
-            "compact": "12px",
-          },
-        },
-        "space-scaled-s": {
-          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "8px",
-          },
-        },
-        "space-scaled-xl": {
-          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
-          "$value": {
-            "comfortable": "24px",
-            "compact": "20px",
-          },
-        },
-        "space-scaled-xs": {
-          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
-          "$value": {
-            "comfortable": "8px",
-            "compact": "4px",
-          },
-        },
-        "space-scaled-xxl": {
-          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
-          "$value": {
-            "comfortable": "32px",
-            "compact": "24px",
-          },
-        },
-        "space-scaled-xxs": {
-          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
-          "$value": {
-            "comfortable": "4px",
-            "compact": "2px",
-          },
-        },
-        "space-scaled-xxxl": {
-          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
-          "$value": {
-            "comfortable": "40px",
-            "compact": "32px",
-          },
-        },
-        "space-scaled-xxxs": {
-          "$description": "The XXXS spacing unit which scales between modes.",
-          "$value": {
-            "comfortable": "2px",
-            "compact": "0px",
-          },
-        },
-        "space-static-l": {
-          "$description": "The static L spacing unit.",
-          "$value": {
-            "comfortable": "20px",
-            "compact": "20px",
-          },
-        },
-        "space-static-m": {
-          "$description": "The static M spacing unit.",
-          "$value": {
-            "comfortable": "16px",
-            "compact": "16px",
-          },
-        },
-        "space-static-s": {
-          "$description": "The static S spacing unit.",
-          "$value": {
-            "comfortable": "12px",
-            "compact": "12px",
-          },
-        },
-        "space-static-xl": {
-          "$description": "The static XL spacing unit.",
-          "$value": {
-            "comfortable": "24px",
-            "compact": "24px",
-          },
-        },
-        "space-static-xs": {
-          "$description": "The static XS spacing unit.",
-          "$value": {
-            "comfortable": "8px",
-            "compact": "8px",
-          },
-        },
-        "space-static-xxl": {
-          "$description": "The static XXL spacing unit.",
-          "$value": {
-            "comfortable": "32px",
-            "compact": "32px",
-          },
-        },
-        "space-static-xxs": {
-          "$description": "The static XXS spacing unit.",
-          "$value": {
-            "comfortable": "4px",
-            "compact": "4px",
-          },
-        },
-        "space-static-xxxl": {
-          "$description": "The static XXXL spacing unit.",
-          "$value": {
-            "comfortable": "40px",
-            "compact": "40px",
-          },
-        },
-        "space-static-xxxs": {
-          "$description": "The static XXXS spacing unit.",
-          "$value": {
-            "comfortable": "2px",
-            "compact": "2px",
-          },
-        },
-      },
-    },
-    "app-layout-toolbar": {
-      "tokens": {
-        "border-radius-alert": {
-          "$description": "The border radius of alerts.",
-          "$value": "12px",
-        },
-        "border-radius-badge": {
-          "$description": "The border radius of badges.",
-          "$value": "4px",
-        },
-        "border-radius-button": {
-          "$description": "The border radius of buttons and segmented control's segments.",
-          "$value": "20px",
-        },
-        "border-radius-calendar-day-focus-ring": {
-          "$description": "The border radius of the focused day in date picker and date range picker.",
-          "$value": "3px",
-        },
-        "border-radius-chat-bubble": {
-          "$description": "The border radius of chat bubbles.",
-          "$value": "8px",
-        },
-        "border-radius-container": {
-          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
-          "$value": "16px",
-        },
-        "border-radius-control-circular-focus-ring": {
-          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
-          "$value": "4px",
-        },
-        "border-radius-control-default-focus-ring": {
-          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
-          "$value": "4px",
-        },
-        "border-radius-dropdown": {
-          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
-          "$value": "8px",
-        },
-        "border-radius-flashbar": {
-          "$description": "The border radius of flash messages in flashbars.",
-          "$value": "12px",
-        },
-        "border-radius-input": {
-          "$description": "The border radius of form controls. For example: input, select.",
-          "$value": "8px",
-        },
-        "border-radius-item": {
-          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
-          "$value": "8px",
-        },
-        "border-radius-popover": {
-          "$description": "The border radius of popovers.",
-          "$value": "8px",
-        },
-        "border-radius-tabs-focus-ring": {
-          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
-          "$value": "20px",
-        },
-        "border-radius-tiles": {
-          "$description": "The border radius of tiles.",
-          "$value": "8px",
-        },
-        "border-radius-token": {
-          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
-          "$value": "8px",
-        },
-        "border-radius-tutorial-panel-item": {
-          "$description": "The border radius of tutorials inside a tutorial panel.",
-          "$value": "8px",
-        },
-        "border-width-alert": {
-          "$description": "The border width of alerts.",
-          "$value": "2px",
-        },
-        "border-width-button": {
-          "$description": "The border width of buttons.",
-          "$value": "2px",
-        },
-        "border-width-dropdown": {
-          "$description": "The border width of dropdowns.",
-          "$value": "2px",
-        },
-        "border-width-field": {
-          "$description": "The border width of form fields.",
-          "$value": "1px",
-        },
-        "border-width-popover": {
-          "$description": "The border width of popovers.",
-          "$value": "2px",
-        },
-        "border-width-token": {
-          "$description": "The border width of tokens.",
-          "$value": "2px",
-        },
-        "color-background-avatar-default": {
-          "$description": "The default background color of avatars.",
-          "$value": {
-            "dark": "#424650",
-            "light": "#424650",
-          },
-        },
-        "color-background-avatar-gen-ai": {
-          "$description": "The gen-ai background color of avatars.",
-          "$value": {
-            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
-          },
-        },
-        "color-background-button-normal-active": {
-          "$description": "The background color of normal buttons in active state.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#d1f1ff",
-          },
-        },
-        "color-background-button-normal-default": {
-          "$description": "The default background color of normal buttons.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-button-normal-disabled": {
-          "$description": "The background color of normal buttons in disabled state.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-button-normal-hover": {
-          "$description": "The background color of normal buttons in hover state.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#f0fbff",
-          },
-        },
-        "color-background-button-primary-active": {
-          "$description": "The background color of primary buttons in active state.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#002b66",
-          },
-        },
-        "color-background-button-primary-default": {
-          "$description": "The default background color of primary buttons.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
-          },
-        },
-        "color-background-button-primary-disabled": {
-          "$description": "The background color of primary buttons in disabled state.",
-          "$value": {
-            "dark": "#232b37",
-            "light": "#ebebf0",
-          },
-        },
-        "color-background-button-primary-hover": {
-          "$description": "The background color of primary buttons in hover state.",
-          "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
-          },
-        },
-        "color-background-cell-shaded": {
-          "$description": "The background color of shaded table cells.",
-          "$value": {
-            "dark": "#1b232d",
-            "light": "#f6f6f9",
-          },
-        },
-        "color-background-chat-bubble-incoming": {
-          "$description": "The background color of \`incoming\` chat bubble.",
-          "$value": {
-            "dark": "#0f141a",
-            "light": "#f6f6f9",
-          },
-        },
-        "color-background-chat-bubble-outgoing": {
-          "$description": "The background color of \`outgoing\` chat bubble.",
-          "$value": {
-            "dark": "transparent",
-            "light": "transparent",
-          },
-        },
-        "color-background-container-content": {
-          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-container-header": {
-          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-control-checked": {
-          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
-          "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
-          },
-        },
-        "color-background-control-default": {
-          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
-          "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
-          },
-        },
-        "color-background-control-disabled": {
-          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
-          "$value": {
-            "dark": "#333843",
-            "light": "#dedee3",
-          },
-        },
-        "color-background-dialog": {
-          "$description": "The background color of the feedback/input dialogue box.",
-          "$value": {
-            "dark": "#001129",
-            "light": "#f0fbff",
+            "light": "#001129",
           },
         },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ffffff",
+            "light": "#1b232d",
           },
         },
         "color-background-dropdown-item-filter-match": {
           "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#333843",
-            "light": "#f0fbff",
+            "light": "#333843",
           },
         },
         "color-background-dropdown-item-hover": {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": {
             "dark": "#131920",
-            "light": "#f3f3f7",
+            "light": "#131920",
           },
         },
         "color-background-home-header": {
@@ -23289,28 +20731,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-input-disabled": {
           "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ebebf0",
+            "light": "#1b232d",
           },
         },
         "color-background-item-selected": {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": {
             "dark": "#001129",
-            "light": "#f0fbff",
+            "light": "#001129",
           },
         },
         "color-background-layout-main": {
           "$description": "The background color of the main content area on a page. For example: content area in app layout.",
           "$value": {
-            "dark": "#131920",
-            "light": "#fcfcfd",
+            "dark": "#161d26",
+            "light": "#161d26",
           },
         },
         "color-background-layout-toggle-active": {
@@ -23338,21 +20780,21 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the app layout toggle button when it's selected and active.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-layout-toggle-selected-default": {
           "$description": "The default background color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-layout-toggle-selected-hover": {
           "$description": "The background color of the app layout toggle button on hover when it's selected.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#004a9e",
+            "light": "#75cfff",
           },
         },
         "color-background-loading-bar-gen-ai": {
@@ -23380,7 +20822,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for grey notifications. For example: grey badges.",
           "$value": {
             "dark": "#656871",
-            "light": "#424650",
+            "light": "#656871",
           },
         },
         "color-background-notification-red": {
@@ -23436,126 +20878,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for the popover container.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#ffffff",
+            "light": "#1b232d",
           },
         },
         "color-background-segment-active": {
           "$description": "The background color of the active segment in a segmented control.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-background-segment-default": {
           "$description": "The background color of inactive segments in a segmented control.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#ffffff",
+            "dark": "transparent",
+            "light": "transparent",
           },
         },
         "color-background-segment-disabled": {
           "$description": "The background color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-background-segment-hover": {
           "$description": "The background color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#1b232d",
-            "light": "#f0fbff",
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
           },
         },
         "color-background-status-error": {
           "$description": "The background color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#1f0000",
-            "light": "#fff5f5",
+            "light": "#1f0000",
           },
         },
         "color-background-status-info": {
           "$description": "The background color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#001129",
-            "light": "#f0fbff",
+            "light": "#001129",
           },
         },
         "color-background-status-success": {
           "$description": "The background color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#001401",
-            "light": "#effff1",
+            "light": "#001401",
           },
         },
         "color-background-status-warning": {
           "$description": "The background color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#191100",
-            "light": "#fffef0",
+            "light": "#191100",
           },
         },
         "color-background-toggle-button-normal-pressed": {
           "$description": "The background color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#333843",
-            "light": "#d1f1ff",
+            "light": "#333843",
           },
         },
         "color-background-toggle-checked-disabled": {
           "$description": "The background color of checked toggles in disabled state.",
           "$value": {
             "dark": "#002b66",
-            "light": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-board-placeholder-active": {
           "$description": "The color of board placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#ebebf0",
+            "light": "#656871",
           },
         },
         "color-board-placeholder-hover": {
           "$description": "The color of board placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#d1f1ff",
+            "light": "#006ce0",
           },
         },
         "color-border-button-normal-active": {
           "$description": "The border color of normal buttons in active state.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-border-button-normal-default": {
           "$description": "The border color of normal buttons.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-border-button-normal-disabled": {
           "$description": "The border color of normal buttons in disabled state.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-border-button-normal-hover": {
           "$description": "The border color of normal buttons in hover state.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-border-button-primary-disabled": {
           "$description": "The border color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#ebebf0",
+            "light": "#232b37",
           },
         },
         "color-border-container-top": {
@@ -23576,126 +21018,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border color of the feedback/input dialogue box.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
-            "dark": "#424650",
-            "light": "#c6c6cd",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-border-divider-secondary": {
           "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
           "$value": {
             "dark": "#232b37",
-            "light": "#ebebf0",
+            "light": "#232b37",
           },
         },
         "color-border-dropdown-item-focused": {
           "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-dropdown-item-hover": {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-border-input-default": {
           "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
           },
         },
         "color-border-item-selected": {
           "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-border-segment-active": {
           "$description": "The border color of the active segment in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-default": {
           "$description": "The border color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-disabled": {
           "$description": "The border color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-segment-hover": {
           "$description": "The border color of inactive segments in a segmented control on hover.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-border-status-error": {
           "$description": "The border color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#ff7a7a",
           },
         },
         "color-border-status-info": {
           "$description": "The border color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-border-status-success": {
           "$description": "The border color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#00802f",
+            "light": "#2bb534",
           },
         },
         "color-border-status-warning": {
           "$description": "The border color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#855900",
+            "light": "#fbd332",
           },
         },
         "color-border-toggle-button-normal-pressed": {
           "$description": "The border color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-charts-blue-1-1000": {
@@ -24780,42 +22222,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of drag placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#ebebf0",
+            "light": "#656871",
           },
         },
         "color-drag-placeholder-hover": {
           "$description": "The color of drag placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#d1f1ff",
+            "light": "#006ce0",
           },
         },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-foreground-control-disabled": {
           "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-foreground-control-read-only": {
           "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-accent": {
           "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-avatar": {
@@ -24829,28 +22271,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-body-secondary": {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-text-breadcrumb-current": {
           "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
           "$value": {
             "dark": "#8c8c94",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-text-breadcrumb-icon": {
           "$description": "The color used for the icon delimiter between breadcrumb items.",
           "$value": {
             "dark": "#656871",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-text-button-icon-disabled": {
@@ -24863,15 +22305,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-button-normal-default": {
           "$description": "The default text color of normal buttons.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-text-button-normal-disabled": {
@@ -24884,22 +22326,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-hover": {
           "$description": "The hover text color of normal buttons.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-active": {
           "$description": "The active text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-button-primary-default": {
           "$description": "The default text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-button-primary-disabled": {
@@ -24913,98 +22355,98 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The hover text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-chat-bubble-incoming": {
           "$description": "Text color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-chat-bubble-outgoing": {
           "$description": "Text color of \`outgoing\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#0f141a",
+            "light": "#c6c6cd",
           },
         },
         "color-text-counter": {
           "$description": "The default color for counters. For example: counters in table headers",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-dropdown-item-default": {
           "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-dropdown-item-disabled": {
           "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-dropdown-item-filter-match": {
           "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#006ce0",
+            "light": "#75cfff",
           },
         },
         "color-text-dropdown-item-highlighted": {
           "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#0f141a",
+            "light": "#ebebf0",
           },
         },
         "color-text-empty": {
           "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#656871",
+            "light": "#dedee3",
           },
         },
         "color-text-form-default": {
           "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-form-secondary": {
           "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-group-label": {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-text-heading-default": {
           "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#0f141a",
+            "light": "#ebebf0",
           },
         },
         "color-text-heading-secondary": {
           "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#424650",
+            "light": "#a4a4ad",
           },
         },
         "color-text-home-header-default": {
@@ -25025,42 +22467,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-input-placeholder": {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-interactive-active": {
           "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-interactive-default": {
           "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-text-interactive-disabled": {
           "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
           "$value": {
             "dark": "#656871",
-            "light": "#b4b4bb",
+            "light": "#656871",
           },
         },
         "color-text-interactive-hover": {
           "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-interactive-inverted-default": {
@@ -25081,14 +22523,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#0f141a",
+            "light": "#dedee3",
           },
         },
         "color-text-label-gen-ai": {
           "$description": "The default color for labels indicating that content is produced by generative AI.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#bf80ff",
           },
         },
         "color-text-layout-toggle": {
@@ -25102,35 +22544,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the app layout toggle button when it's active.",
           "$value": {
             "dark": "#161d26",
-            "light": "#ffffff",
+            "light": "#161d26",
           },
         },
         "color-text-layout-toggle-hover": {
           "$description": "The color of the app layout toggle button on hover.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-layout-toggle-selected": {
           "$description": "The color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-link-default": {
           "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-link-hover": {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#002b66",
+            "light": "#75cfff",
           },
         },
         "color-text-notification-default": {
@@ -25179,77 +22621,77 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The text color of the active segment in a segmented control.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#ffffff",
+            "light": "#0f141a",
           },
         },
         "color-text-segment-default": {
           "$description": "The text color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#424650",
+            "light": "#dedee3",
           },
         },
         "color-text-segment-hover": {
           "$description": "The text color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#002b66",
+            "dark": "#ffffff",
+            "light": "#ffffff",
           },
         },
         "color-text-status-error": {
           "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#ff7a7a",
           },
         },
         "color-text-status-inactive": {
           "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#656871",
+            "light": "#a4a4ad",
           },
         },
         "color-text-status-info": {
           "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#006ce0",
+            "light": "#42b4ff",
           },
         },
         "color-text-status-success": {
           "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#00802f",
+            "light": "#2bb534",
           },
         },
         "color-text-status-warning": {
           "$description": "The color of warning icons.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#855900",
+            "light": "#fbd332",
           },
         },
         "color-text-toggle-button-icon-pressed": {
           "$description": "The pressed text color of icon toggle buttons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "color-text-toggle-button-normal-pressed": {
           "$description": "The pressed text color of normal toggle buttons.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#002b66",
+            "light": "#75cfff",
           },
         },
         "color-text-top-navigation-title": {
           "$description": "The color of the title in the top navigation.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#0f141a",
+            "light": "#f9f9fa",
           },
         },
         "font-family-base": {
@@ -25672,7 +23114,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -26175,8 +23617,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -28230,7 +25672,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -28733,8 +26175,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -30788,7 +28230,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -31291,8 +28733,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#006ce0",
+            "dark": "#b8e7ff",
+            "light": "#002b66",
           },
         },
         "color-border-item-focused": {
@@ -33346,7 +30788,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -33849,8 +31291,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
@@ -35904,7 +33346,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "1px",
+          "$value": "2px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -36407,8 +33849,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "dark": "#b8e7ff",
+            "light": "#b8e7ff",
           },
         },
         "color-border-item-focused": {
@@ -38462,7 +35904,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "1px",
+      "$value": "2px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
@@ -38965,8 +36407,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-border-input-focused": {
       "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
       "$value": {
-        "dark": "#42b4ff",
-        "light": "#006ce0",
+        "dark": "#b8e7ff",
+        "light": "#002b66",
       },
     },
     "color-border-item-focused": {

From 8a8f57c247741219be3aff7a1f072220a1a70ca9 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 11 Apr 2025 11:58:21 +0200
Subject: [PATCH 26/35] update snapshot tests

---
 .../__snapshots__/themes.test.ts.snap         |   28 +-
 .../__snapshots__/design-tokens.test.ts.snap  | 2830 ++++++++++++++++-
 2 files changed, 2708 insertions(+), 150 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 51421e241f..e7cefdac0c 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -2694,7 +2694,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -2731,7 +2731,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -2861,11 +2861,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#002b66",
+  "color-border-input-focused": "#006ce0",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#b4b4bb",
+  "color-border-layout": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -3366,7 +3366,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -3403,7 +3403,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -3533,11 +3533,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#8c8c94",
   "color-border-input-default": "#8c8c94",
   "color-border-input-disabled": "#ebebf0",
-  "color-border-input-focused": "#002b66",
+  "color-border-input-focused": "#006ce0",
   "color-border-item-focused": "#006ce0",
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
-  "color-border-layout": "#b4b4bb",
+  "color-border-layout": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -4038,7 +4038,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4075,7 +4075,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -4205,7 +4205,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#b8e7ff",
+  "color-border-input-focused": "#42b4ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
@@ -4710,7 +4710,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-code-editor-status-divider-width": "1px",
   "border-container-sticky-width": "0px",
   "border-container-top-width": "0px",
-  "border-control-focus-ring-shadow-spread": "0px",
+  "border-control-focus-ring-shadow-spread": "1px",
   "border-control-invalid-focus-ring-shadow-spread": "2px",
   "border-divider-list-width": "1px",
   "border-divider-section-width": "1px",
@@ -4747,7 +4747,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-alert": "2px",
   "border-width-button": "2px",
   "border-width-dropdown": "2px",
-  "border-width-field": "2px",
+  "border-width-field": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-background-avatar-default": "#424650",
@@ -4877,7 +4877,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-editable-cell-hover": "#656871",
   "color-border-input-default": "#656871",
   "color-border-input-disabled": "#1b232d",
-  "color-border-input-focused": "#b8e7ff",
+  "color-border-input-focused": "#42b4ff",
   "color-border-item-focused": "#42b4ff",
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index daf5e92ceb..1083e2369e 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -17998,7 +17998,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -18501,8 +18501,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -20556,7 +20556,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -20696,28 +20696,2586 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the feedback/input dialogue box.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-dropdown-item-default": {
+          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-dropdown-item-filter-match": {
+          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-hover": {
+          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
+          "$value": {
+            "dark": "#131920",
+            "light": "#131920",
+          },
+        },
+        "color-background-home-header": {
+          "$description": "The background color of the home header, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-input-default": {
+          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-input-disabled": {
+          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-item-selected": {
+          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-layout-main": {
+          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-layout-toggle-active": {
+          "$description": "The background color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-default": {
+          "$description": "The default background color of the app layout toggle button.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-hover": {
+          "$description": "The background color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-layout-toggle-selected-active": {
+          "$description": "The background color of the app layout toggle button when it's selected and active.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-default": {
+          "$description": "The default background color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-hover": {
+          "$description": "The background color of the app layout toggle button on hover when it's selected.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-background-loading-bar-gen-ai": {
+          "$description": "The background color of gen-ai loading bars.",
+          "$value": {
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+          },
+        },
+        "color-background-notification-blue": {
+          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-notification-green": {
+          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
+          "$value": {
+            "dark": "#00802f",
+            "light": "#00802f",
+          },
+        },
+        "color-background-notification-grey": {
+          "$description": "Background color for grey notifications. For example: grey badges.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-red": {
+          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
+          "$value": {
+            "dark": "#db0000",
+            "light": "#db0000",
+          },
+        },
+        "color-background-notification-severity-critical": {
+          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#870303",
+          },
+        },
+        "color-background-notification-severity-high": {
+          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ce3311",
+          },
+        },
+        "color-background-notification-severity-low": {
+          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#f2cd54",
+            "light": "#f2cd54",
+          },
+        },
+        "color-background-notification-severity-medium": {
+          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#f89256",
+          },
+        },
+        "color-background-notification-severity-neutral": {
+          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-yellow": {
+          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
+        "color-background-popover": {
+          "$description": "Background color for the popover container.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-segment-active": {
+          "$description": "The background color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-segment-default": {
+          "$description": "The background color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-segment-disabled": {
+          "$description": "The background color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-segment-hover": {
+          "$description": "The background color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "rgba(255, 255, 255, 0.1)",
+            "light": "rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "color-background-status-error": {
+          "$description": "The background color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#1f0000",
+            "light": "#1f0000",
+          },
+        },
+        "color-background-status-info": {
+          "$description": "The background color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-status-success": {
+          "$description": "The background color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#001401",
+            "light": "#001401",
+          },
+        },
+        "color-background-status-warning": {
+          "$description": "The background color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#191100",
+            "light": "#191100",
+          },
+        },
+        "color-background-toggle-button-normal-pressed": {
+          "$description": "The background color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-toggle-checked-disabled": {
+          "$description": "The background color of checked toggles in disabled state.",
+          "$value": {
+            "dark": "#002b66",
+            "light": "#002b66",
+          },
+        },
+        "color-board-placeholder-active": {
+          "$description": "The color of board placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-board-placeholder-hover": {
+          "$description": "The color of board placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-border-button-normal-active": {
+          "$description": "The border color of normal buttons in active state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-normal-default": {
+          "$description": "The border color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-button-normal-disabled": {
+          "$description": "The border color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-button-normal-hover": {
+          "$description": "The border color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-border-button-primary-disabled": {
+          "$description": "The border color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-container-top": {
+          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-border-control-default": {
+          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-border-dialog": {
+          "$description": "The border color of the feedback/input dialogue box.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-divider-default": {
+          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-divider-secondary": {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-dropdown-item-focused": {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-dropdown-item-hover": {
+          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-default": {
+          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-focused": {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-item-focused": {
+          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-border-item-selected": {
+          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-segment-active": {
+          "$description": "The border color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-default": {
+          "$description": "The border color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-disabled": {
+          "$description": "The border color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-hover": {
+          "$description": "The border color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-status-error": {
+          "$description": "The border color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-border-status-info": {
+          "$description": "The border color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-status-success": {
+          "$description": "The border color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-border-status-warning": {
+          "$description": "The border color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-border-toggle-button-normal-pressed": {
+          "$description": "The border color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-charts-blue-1-1000": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#b3e4f8",
+            "light": "#01437d",
+          },
+        },
+        "color-charts-blue-1-1100": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#caedfc",
+            "light": "#003c75",
+          },
+        },
+        "color-charts-blue-1-1200": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ddf4ff",
+            "light": "#00366d",
+          },
+        },
+        "color-charts-blue-1-300": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#00819c",
+            "light": "#529ccb",
+          },
+        },
+        "color-charts-blue-1-400": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#0497ba",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-blue-1-500": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#0273bb",
+          },
+        },
+        "color-charts-blue-1-600": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#44b9dd",
+            "light": "#0166ab",
+          },
+        },
+        "color-charts-blue-1-700": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#63c6e7",
+            "light": "#015b9d",
+          },
+        },
+        "color-charts-blue-1-800": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#79d2f0",
+            "light": "#015292",
+          },
+        },
+        "color-charts-blue-1-900": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#98dcf5",
+            "light": "#014a87",
+          },
+        },
+        "color-charts-blue-2-1000": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-blue-2-1100": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-blue-2-1200": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-blue-2-300": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-blue-2-400": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-blue-2-500": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-blue-2-600": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-blue-2-700": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-blue-2-800": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-blue-2-900": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-green-1000": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#c5e7a8",
+            "light": "#104d01",
+          },
+        },
+        "color-charts-green-1100": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#d5efbe",
+            "light": "#0f4601",
+          },
+        },
+        "color-charts-green-1200": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#e4f7d5",
+            "light": "#0d4000",
+          },
+        },
+        "color-charts-green-300": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#48851a",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-green-400": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#5a9b29",
+            "light": "#41902c",
+          },
+        },
+        "color-charts-green-500": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#1f8104",
+          },
+        },
+        "color-charts-green-600": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#7dbd4c",
+            "light": "#1a7302",
+          },
+        },
+        "color-charts-green-700": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#8fca61",
+            "light": "#176702",
+          },
+        },
+        "color-charts-green-800": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#9fd673",
+            "light": "#145d02",
+          },
+        },
+        "color-charts-green-900": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#b2df8d",
+            "light": "#125502",
+          },
+        },
+        "color-charts-line-axis": {
+          "$description": "Color of the axis lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-grid": {
+          "$description": "Color of the grid lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-tick": {
+          "$description": "Color of the tick marks in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-orange-1000": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-orange-1100": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-orange-1200": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-orange-300": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-orange-400": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-orange-500": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-orange-600": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-orange-700": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-orange-800": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-orange-900": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-1": {
+          "$description": "Color #1 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-palette-categorical-10": {
+          "$description": "Color #10 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-palette-categorical-11": {
+          "$description": "Color #11 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-palette-categorical-12": {
+          "$description": "Color #12 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-palette-categorical-13": {
+          "$description": "Color #13 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-palette-categorical-14": {
+          "$description": "Color #14 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-palette-categorical-15": {
+          "$description": "Color #15 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-16": {
+          "$description": "Color #16 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-palette-categorical-17": {
+          "$description": "Color #17 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-palette-categorical-18": {
+          "$description": "Color #18 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-palette-categorical-19": {
+          "$description": "Color #19 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-palette-categorical-2": {
+          "$description": "Color #2 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-palette-categorical-20": {
+          "$description": "Color #20 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-palette-categorical-21": {
+          "$description": "Color #21 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-palette-categorical-22": {
+          "$description": "Color #22 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-palette-categorical-23": {
+          "$description": "Color #23 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-palette-categorical-24": {
+          "$description": "Color #24 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-palette-categorical-25": {
+          "$description": "Color #25 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-palette-categorical-26": {
+          "$description": "Color #26 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-palette-categorical-27": {
+          "$description": "Color #27 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-palette-categorical-28": {
+          "$description": "Color #28 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-palette-categorical-29": {
+          "$description": "Color #29 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-palette-categorical-3": {
+          "$description": "Color #3 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-palette-categorical-30": {
+          "$description": "Color #30 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-palette-categorical-31": {
+          "$description": "Color #31 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-palette-categorical-32": {
+          "$description": "Color #32 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-palette-categorical-33": {
+          "$description": "Color #33 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-palette-categorical-34": {
+          "$description": "Color #34 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-palette-categorical-35": {
+          "$description": "Color #35 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-palette-categorical-36": {
+          "$description": "Color #36 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-palette-categorical-37": {
+          "$description": "Color #37 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-palette-categorical-38": {
+          "$description": "Color #38 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-palette-categorical-39": {
+          "$description": "Color #39 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-palette-categorical-4": {
+          "$description": "Color #4 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-palette-categorical-40": {
+          "$description": "Color #40 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-palette-categorical-41": {
+          "$description": "Color #41 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-palette-categorical-42": {
+          "$description": "Color #42 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-palette-categorical-43": {
+          "$description": "Color #43 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-palette-categorical-44": {
+          "$description": "Color #44 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-palette-categorical-45": {
+          "$description": "Color #45 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-palette-categorical-46": {
+          "$description": "Color #46 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-palette-categorical-47": {
+          "$description": "Color #47 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-palette-categorical-48": {
+          "$description": "Color #48 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-palette-categorical-49": {
+          "$description": "Color #49 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-palette-categorical-5": {
+          "$description": "Color #5 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-palette-categorical-50": {
+          "$description": "Color #50 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-palette-categorical-6": {
+          "$description": "Color #6 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-palette-categorical-7": {
+          "$description": "Color #7 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-palette-categorical-8": {
+          "$description": "Color #8 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-palette-categorical-9": {
+          "$description": "Color #9 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-pink-1000": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-pink-1100": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-pink-1200": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-pink-300": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-pink-400": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-pink-500": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-pink-600": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-pink-700": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-pink-800": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-pink-900": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-purple-1000": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-purple-1100": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-purple-1200": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-purple-300": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-purple-400": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-purple-500": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-purple-600": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-purple-700": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-purple-800": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-purple-900": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-red-1000": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd2cf",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-red-1100": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe0dd",
+            "light": "#721e03",
+          },
+        },
+        "color-charts-red-1200": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecea",
+            "light": "#671c00",
+          },
+        },
+        "color-charts-red-300": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#ea7158",
+          },
+        },
+        "color-charts-red-400": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#ed5958",
+            "light": "#dc5032",
+          },
+        },
+        "color-charts-red-500": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#d13313",
+          },
+        },
+        "color-charts-red-600": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#ff8a8a",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-red-700": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#ffa09e",
+            "light": "#a82a0c",
+          },
+        },
+        "color-charts-red-800": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb3b0",
+            "light": "#972709",
+          },
+        },
+        "color-charts-red-900": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc4c0",
+            "light": "#892407",
+          },
+        },
+        "color-charts-status-critical": {
+          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-status-high": {
+          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-status-info": {
+          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-status-low": {
+          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-status-medium": {
+          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-status-neutral": {
+          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-charts-status-positive": {
+          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-teal-1000": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-teal-1100": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-teal-1200": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-teal-300": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-teal-400": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-teal-500": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-teal-600": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-teal-700": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-teal-800": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-teal-900": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-threshold-info": {
+          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#006ce0",
+          },
+        },
+        "color-charts-threshold-negative": {
+          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-charts-threshold-neutral": {
+          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#656871",
+          },
+        },
+        "color-charts-threshold-positive": {
+          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#00802f",
+          },
+        },
+        "color-charts-yellow-1000": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#f7db8a",
+            "light": "#553f03",
+          },
+        },
+        "color-charts-yellow-1100": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#fce5a8",
+            "light": "#4d3901",
+          },
+        },
+        "color-charts-yellow-1200": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffefc9",
+            "light": "#483300",
+          },
+        },
+        "color-charts-yellow-300": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#977001",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-yellow-400": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#b08400",
+            "light": "#9c7b0b",
+          },
+        },
+        "color-charts-yellow-500": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#c59600",
+            "light": "#8a6b05",
+          },
+        },
+        "color-charts-yellow-600": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#d3a61c",
+            "light": "#7b5f04",
+          },
+        },
+        "color-charts-yellow-700": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#6f5504",
+          },
+        },
+        "color-charts-yellow-800": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#eac33a",
+            "light": "#654d03",
+          },
+        },
+        "color-charts-yellow-900": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#f1cf65",
+            "light": "#5d4503",
+          },
+        },
+        "color-drag-placeholder-active": {
+          "$description": "The color of drag placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-drag-placeholder-hover": {
+          "$description": "The color of drag placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-foreground-control-default": {
+          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-foreground-control-disabled": {
+          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-foreground-control-read-only": {
+          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-accent": {
+          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-avatar": {
+          "$description": "The text and icon color of avatars.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-body-default": {
+          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-body-secondary": {
+          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-breadcrumb-current": {
+          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-breadcrumb-icon": {
+          "$description": "The color used for the icon delimiter between breadcrumb items.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-button-icon-disabled": {
+          "$description": "The color of icon buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-normal-active": {
+          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-normal-default": {
+          "$description": "The default text color of normal buttons.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-button-normal-disabled": {
+          "$description": "The text color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-normal-hover": {
+          "$description": "The hover text color of normal buttons.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-button-primary-active": {
+          "$description": "The active text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-default": {
+          "$description": "The default text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-disabled": {
+          "$description": "The text color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-primary-hover": {
+          "$description": "The hover text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-chat-bubble-incoming": {
+          "$description": "Text color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-chat-bubble-outgoing": {
+          "$description": "Text color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-counter": {
+          "$description": "The default color for counters. For example: counters in table headers",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-dropdown-item-default": {
+          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-dropdown-item-disabled": {
+          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-dropdown-item-filter-match": {
+          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-dropdown-item-highlighted": {
+          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-empty": {
+          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-default": {
+          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-secondary": {
+          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-group-label": {
+          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-heading-default": {
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-heading-secondary": {
+          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-home-header-default": {
+          "$description": "The color of the home header's text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-home-header-secondary": {
+          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-input-disabled": {
+          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-input-placeholder": {
+          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-interactive-active": {
+          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-default": {
+          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-disabled": {
+          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-interactive-hover": {
+          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-inverted-default": {
+          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-inverted-hover": {
+          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-label": {
+          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-label-gen-ai": {
+          "$description": "The default color for labels indicating that content is produced by generative AI.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-layout-toggle": {
+          "$description": "The default color of the app layout toggle.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-layout-toggle-active": {
+          "$description": "The color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-text-layout-toggle-hover": {
+          "$description": "The color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-layout-toggle-selected": {
+          "$description": "The color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-link-default": {
+          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-link-hover": {
+          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-notification-default": {
+          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-critical": {
+          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#000000",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-high": {
+          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-low": {
+          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-medium": {
+          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-neutral": {
+          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-segment-active": {
+          "$description": "The text color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-segment-default": {
+          "$description": "The text color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-segment-hover": {
+          "$description": "The text color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-status-error": {
+          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-text-status-inactive": {
+          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-status-info": {
+          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-status-success": {
+          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-text-status-warning": {
+          "$description": "The color of warning icons.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-text-toggle-button-icon-pressed": {
+          "$description": "The pressed text color of icon toggle buttons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-toggle-button-normal-pressed": {
+          "$description": "The pressed text color of normal toggle buttons.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-top-navigation-title": {
+          "$description": "The color of the title in the top navigation.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "font-family-base": {
+          "$description": "The default font family that will be applied globally to the product interface.",
+          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+        },
+        "font-family-monospace": {
+          "$description": "The monospace font family that will be applied globally to the product interface.",
+          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
+        },
+        "font-size-body-m": {
+          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
+          "$value": "14px",
+        },
+        "font-size-body-s": {
+          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
+          "$value": "12px",
+        },
+        "font-size-display-l": {
+          "$description": "The default font size for large display text.",
+          "$value": "42px",
+        },
+        "font-size-heading-l": {
+          "$description": "The default font size for h2s.",
+          "$value": "20px",
+        },
+        "font-size-heading-m": {
+          "$description": "The default font size for h3s.",
+          "$value": "18px",
+        },
+        "font-size-heading-s": {
+          "$description": "The default font size for h4s.",
+          "$value": "16px",
+        },
+        "font-size-heading-xl": {
+          "$description": "The default font size for h1s.",
+          "$value": "24px",
+        },
+        "font-size-heading-xs": {
+          "$description": "The default font size for h5s.",
+          "$value": "14px",
+        },
+        "font-weight-button": {
+          "$description": "The default font weight for button text.",
+          "$value": "700",
+        },
+        "font-weight-heading-l": {
+          "$description": "The default font weight for h2s.",
+          "$value": "700",
+        },
+        "font-weight-heading-m": {
+          "$description": "The default font weight for h3s.",
+          "$value": "700",
+        },
+        "font-weight-heading-s": {
+          "$description": "The default font weight for h4s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xl": {
+          "$description": "The default font weight for h1s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xs": {
+          "$description": "The default font weight for h5s.",
+          "$value": "700",
+        },
+        "line-height-body-m": {
+          "$description": "The default line height for regular body text.",
+          "$value": "20px",
+        },
+        "line-height-body-s": {
+          "$description": "The default line height for small body text.",
+          "$value": "16px",
+        },
+        "line-height-display-l": {
+          "$description": "The default line height for large display text.",
+          "$value": "48px",
+        },
+        "line-height-heading-l": {
+          "$description": "The default line height for h2s.",
+          "$value": "24px",
+        },
+        "line-height-heading-m": {
+          "$description": "The default line height for h3s.",
+          "$value": "22px",
+        },
+        "line-height-heading-s": {
+          "$description": "The default line height for h4s.",
+          "$value": "20px",
+        },
+        "line-height-heading-xl": {
+          "$description": "The default line height for h1s.",
+          "$value": "30px",
+        },
+        "line-height-heading-xs": {
+          "$description": "The default line height for h5s.",
+          "$value": "18px",
+        },
+        "motion-duration-avatar-gen-ai-gradient": {
+          "$description": "The duration for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "3600ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-avatar-loading-dots": {
+          "$description": "The duration for loading motion of avatars.",
+          "$value": {
+            "default": "1200ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-complex": {
+          "$description": "The duration for drawing more attention or accommodating for more complexity.",
+          "$value": {
+            "default": "250ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-expressive": {
+          "$description": "The duration for accommodating the motion with more expressiveness.",
+          "$value": {
+            "default": "165ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-responsive": {
+          "$description": "The duration for making the motion feel quick and responsive.",
+          "$value": {
+            "default": "115ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-easing-avatar-gen-ai-gradient": {
+          "$description": "The easing curve for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
+            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
+          },
+        },
+        "motion-easing-expressive": {
+          "$description": "The easing curve for drawing a user's attention in an expressive way.",
+          "$value": {
+            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
+            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
+          },
+        },
+        "motion-easing-responsive": {
+          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
+          "$value": {
+            "default": "cubic-bezier(0, 0, 0, 1)",
+            "disabled": "cubic-bezier(0, 0, 0, 1)",
+          },
+        },
+        "motion-easing-sticky": {
+          "$description": "The easing curve for making an element sticky to a certain state.",
+          "$value": {
+            "default": "cubic-bezier(1, 0, 0.83, 1)",
+            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
+          },
+        },
+        "motion-keyframes-fade-in": {
+          "$description": "The CSS keyframes for showing an element.",
+          "$value": {
+            "default": "awsui-fade-in-35003c",
+            "disabled": "awsui-fade-in-35003c",
+          },
+        },
+        "motion-keyframes-fade-out": {
+          "$description": "The CSS keyframes for hiding an element.",
+          "$value": {
+            "default": "awsui-fade-out-35003c",
+            "disabled": "awsui-fade-out-35003c",
+          },
+        },
+        "motion-keyframes-scale-popup": {
+          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
+          "$value": {
+            "default": "awsui-scale-popup-35003c",
+            "disabled": "awsui-scale-popup-35003c",
+          },
+        },
+        "motion-keyframes-status-icon-error": {
+          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
+          "$value": {
+            "default": "awsui-status-icon-error-35003c",
+            "disabled": "awsui-status-icon-error-35003c",
+          },
+        },
+        "shadow-container-active": {
+          "$description": "Shadow for containers and cards in active state.",
+          "$value": {
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
+          },
+        },
+        "space-container-horizontal": {
+          "$description": "The horizontal padding inside a container.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-field-horizontal": {
+          "$description": "The horizontal padding inside field components.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-l": {
+          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "16px",
+          },
+        },
+        "space-scaled-m": {
+          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-s": {
+          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "8px",
+          },
+        },
+        "space-scaled-xl": {
+          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "20px",
+          },
+        },
+        "space-scaled-xs": {
+          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "4px",
+          },
+        },
+        "space-scaled-xxl": {
+          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "24px",
+          },
+        },
+        "space-scaled-xxs": {
+          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "2px",
+          },
+        },
+        "space-scaled-xxxl": {
+          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "32px",
+          },
+        },
+        "space-scaled-xxxs": {
+          "$description": "The XXXS spacing unit which scales between modes.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "0px",
+          },
+        },
+        "space-static-l": {
+          "$description": "The static L spacing unit.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-static-m": {
+          "$description": "The static M spacing unit.",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "16px",
+          },
+        },
+        "space-static-s": {
+          "$description": "The static S spacing unit.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-static-xl": {
+          "$description": "The static XL spacing unit.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "24px",
+          },
+        },
+        "space-static-xs": {
+          "$description": "The static XS spacing unit.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "8px",
+          },
+        },
+        "space-static-xxl": {
+          "$description": "The static XXL spacing unit.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "32px",
+          },
+        },
+        "space-static-xxs": {
+          "$description": "The static XXS spacing unit.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "4px",
+          },
+        },
+        "space-static-xxxl": {
+          "$description": "The static XXXL spacing unit.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "40px",
+          },
+        },
+        "space-static-xxxs": {
+          "$description": "The static XXXS spacing unit.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "2px",
+          },
+        },
+      },
+    },
+    "app-layout-toolbar": {
+      "tokens": {
+        "border-radius-alert": {
+          "$description": "The border radius of alerts.",
+          "$value": "12px",
+        },
+        "border-radius-badge": {
+          "$description": "The border radius of badges.",
+          "$value": "4px",
+        },
+        "border-radius-button": {
+          "$description": "The border radius of buttons and segmented control's segments.",
+          "$value": "20px",
+        },
+        "border-radius-calendar-day-focus-ring": {
+          "$description": "The border radius of the focused day in date picker and date range picker.",
+          "$value": "3px",
+        },
+        "border-radius-chat-bubble": {
+          "$description": "The border radius of chat bubbles.",
+          "$value": "8px",
+        },
+        "border-radius-container": {
+          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
+          "$value": "16px",
+        },
+        "border-radius-control-circular-focus-ring": {
+          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
+          "$value": "4px",
+        },
+        "border-radius-control-default-focus-ring": {
+          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
+          "$value": "4px",
+        },
+        "border-radius-dropdown": {
+          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
+          "$value": "8px",
+        },
+        "border-radius-flashbar": {
+          "$description": "The border radius of flash messages in flashbars.",
+          "$value": "12px",
+        },
+        "border-radius-input": {
+          "$description": "The border radius of form controls. For example: input, select.",
+          "$value": "8px",
+        },
+        "border-radius-item": {
+          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
+          "$value": "8px",
+        },
+        "border-radius-popover": {
+          "$description": "The border radius of popovers.",
+          "$value": "8px",
+        },
+        "border-radius-tabs-focus-ring": {
+          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
+          "$value": "20px",
+        },
+        "border-radius-tiles": {
+          "$description": "The border radius of tiles.",
+          "$value": "8px",
+        },
+        "border-radius-token": {
+          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
+          "$value": "8px",
+        },
+        "border-radius-tutorial-panel-item": {
+          "$description": "The border radius of tutorials inside a tutorial panel.",
+          "$value": "8px",
+        },
+        "border-width-alert": {
+          "$description": "The border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-button": {
+          "$description": "The border width of buttons.",
+          "$value": "2px",
+        },
+        "border-width-dropdown": {
+          "$description": "The border width of dropdowns.",
+          "$value": "2px",
+        },
+        "border-width-field": {
+          "$description": "The border width of form fields.",
+          "$value": "1px",
+        },
+        "border-width-popover": {
+          "$description": "The border width of popovers.",
+          "$value": "2px",
+        },
+        "border-width-token": {
+          "$description": "The border width of tokens.",
+          "$value": "2px",
+        },
+        "color-background-avatar-default": {
+          "$description": "The default background color of avatars.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-avatar-gen-ai": {
+          "$description": "The gen-ai background color of avatars.",
+          "$value": {
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+          },
+        },
+        "color-background-button-normal-active": {
+          "$description": "The background color of normal buttons in active state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#d1f1ff",
+          },
+        },
+        "color-background-button-normal-default": {
+          "$description": "The default background color of normal buttons.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-button-normal-disabled": {
+          "$description": "The background color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-button-normal-hover": {
+          "$description": "The background color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#f0fbff",
+          },
+        },
+        "color-background-button-primary-active": {
+          "$description": "The background color of primary buttons in active state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#002b66",
+          },
+        },
+        "color-background-button-primary-default": {
+          "$description": "The default background color of primary buttons.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-button-primary-disabled": {
+          "$description": "The background color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#ebebf0",
+          },
+        },
+        "color-background-button-primary-hover": {
+          "$description": "The background color of primary buttons in hover state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#002b66",
+          },
+        },
+        "color-background-cell-shaded": {
+          "$description": "The background color of shaded table cells.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#f6f6f9",
+          },
+        },
+        "color-background-chat-bubble-incoming": {
+          "$description": "The background color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#f6f6f9",
+          },
+        },
+        "color-background-chat-bubble-outgoing": {
+          "$description": "The background color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-container-content": {
+          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-container-header": {
+          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-control-checked": {
+          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-control-default": {
+          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-background-control-disabled": {
+          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#dedee3",
+          },
+        },
+        "color-background-dialog": {
+          "$description": "The background color of the feedback/input dialogue box.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-dropdown-item-default": {
           "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-dropdown-item-filter-match": {
           "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#f0fbff",
           },
         },
         "color-background-dropdown-item-hover": {
           "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
           "$value": {
             "dark": "#131920",
-            "light": "#131920",
+            "light": "#f3f3f7",
           },
         },
         "color-background-home-header": {
@@ -20731,28 +23289,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-input-disabled": {
           "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ebebf0",
           },
         },
         "color-background-item-selected": {
           "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-layout-main": {
           "$description": "The background color of the main content area on a page. For example: content area in app layout.",
           "$value": {
-            "dark": "#161d26",
-            "light": "#161d26",
+            "dark": "#131920",
+            "light": "#fcfcfd",
           },
         },
         "color-background-layout-toggle-active": {
@@ -20780,21 +23338,21 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the app layout toggle button when it's selected and active.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-default": {
           "$description": "The default background color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-layout-toggle-selected-hover": {
           "$description": "The background color of the app layout toggle button on hover when it's selected.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#004a9e",
           },
         },
         "color-background-loading-bar-gen-ai": {
@@ -20822,7 +23380,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for grey notifications. For example: grey badges.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#424650",
           },
         },
         "color-background-notification-red": {
@@ -20878,126 +23436,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "Background color for the popover container.",
           "$value": {
             "dark": "#1b232d",
-            "light": "#1b232d",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-active": {
           "$description": "The background color of the active segment in a segmented control.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-background-segment-default": {
           "$description": "The background color of inactive segments in a segmented control.",
           "$value": {
-            "dark": "transparent",
-            "light": "transparent",
+            "dark": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-disabled": {
           "$description": "The background color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-background-segment-hover": {
           "$description": "The background color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "rgba(255, 255, 255, 0.1)",
-            "light": "rgba(255, 255, 255, 0.1)",
+            "dark": "#1b232d",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-error": {
           "$description": "The background color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#1f0000",
-            "light": "#1f0000",
+            "light": "#fff5f5",
           },
         },
         "color-background-status-info": {
           "$description": "The background color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#001129",
-            "light": "#001129",
+            "light": "#f0fbff",
           },
         },
         "color-background-status-success": {
           "$description": "The background color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#001401",
-            "light": "#001401",
+            "light": "#effff1",
           },
         },
         "color-background-status-warning": {
           "$description": "The background color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#191100",
-            "light": "#191100",
+            "light": "#fffef0",
           },
         },
         "color-background-toggle-button-normal-pressed": {
           "$description": "The background color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#333843",
-            "light": "#333843",
+            "light": "#d1f1ff",
           },
         },
         "color-background-toggle-checked-disabled": {
           "$description": "The background color of checked toggles in disabled state.",
           "$value": {
             "dark": "#002b66",
-            "light": "#002b66",
+            "light": "#b8e7ff",
           },
         },
         "color-board-placeholder-active": {
           "$description": "The color of board placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-board-placeholder-hover": {
           "$description": "The color of board placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-border-button-normal-active": {
           "$description": "The border color of normal buttons in active state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-normal-default": {
           "$description": "The border color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-button-normal-disabled": {
           "$description": "The border color of normal buttons in disabled state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-border-button-normal-hover": {
           "$description": "The border color of normal buttons in hover state.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-border-button-primary-disabled": {
           "$description": "The border color of primary buttons in disabled state.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-container-top": {
@@ -21018,126 +23576,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border color of the feedback/input dialogue box.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-divider-default": {
           "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#424650",
+            "light": "#c6c6cd",
           },
         },
         "color-border-divider-secondary": {
           "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
           "$value": {
             "dark": "#232b37",
-            "light": "#232b37",
+            "light": "#ebebf0",
           },
         },
         "color-border-dropdown-item-focused": {
           "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-dropdown-item-hover": {
           "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-default": {
           "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-selected": {
           "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-segment-active": {
           "$description": "The border color of the active segment in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-default": {
           "$description": "The border color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-disabled": {
           "$description": "The border color of disabled segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-segment-hover": {
           "$description": "The border color of inactive segments in a segmented control on hover.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-border-status-error": {
           "$description": "The border color of an item in error state. For example: error alerts.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-border-status-info": {
           "$description": "The border color of an informational item. For example: information alerts.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-status-success": {
           "$description": "The border color of an item in success state. For example: success alerts.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-border-status-warning": {
           "$description": "The border color of an item in warning state. For example: warning alerts.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-border-toggle-button-normal-pressed": {
           "$description": "The border color of normal toggle buttons in pressed state.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-charts-blue-1-1000": {
@@ -22222,42 +24780,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of drag placeholder in active state.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#ebebf0",
           },
         },
         "color-drag-placeholder-hover": {
           "$description": "The color of drag placeholder in hovered state.",
           "$value": {
             "dark": "#006ce0",
-            "light": "#006ce0",
+            "light": "#d1f1ff",
           },
         },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-disabled": {
           "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-foreground-control-read-only": {
           "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-accent": {
           "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-avatar": {
@@ -22271,28 +24829,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-body-secondary": {
           "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-breadcrumb-current": {
           "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
           "$value": {
             "dark": "#8c8c94",
-            "light": "#8c8c94",
+            "light": "#656871",
           },
         },
         "color-text-breadcrumb-icon": {
           "$description": "The color used for the icon delimiter between breadcrumb items.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#8c8c94",
           },
         },
         "color-text-button-icon-disabled": {
@@ -22305,15 +24863,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-active": {
           "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-normal-default": {
           "$description": "The default text color of normal buttons.",
           "$value": {
-            "dark": "#dedee3",
-            "light": "#dedee3",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-button-normal-disabled": {
@@ -22326,22 +24884,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-button-normal-hover": {
           "$description": "The hover text color of normal buttons.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-button-primary-active": {
           "$description": "The active text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-default": {
           "$description": "The default text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-button-primary-disabled": {
@@ -22355,98 +24913,98 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The hover text color of primary buttons.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-chat-bubble-incoming": {
           "$description": "Text color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-chat-bubble-outgoing": {
           "$description": "Text color of \`outgoing\` chat bubble.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#0f141a",
           },
         },
         "color-text-counter": {
           "$description": "The default color for counters. For example: counters in table headers",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-dropdown-item-default": {
           "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-dropdown-item-disabled": {
           "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-dropdown-item-filter-match": {
           "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#006ce0",
           },
         },
         "color-text-dropdown-item-highlighted": {
           "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-empty": {
           "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#656871",
           },
         },
         "color-text-form-default": {
           "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-form-secondary": {
           "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-group-label": {
           "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
           "$value": {
             "dark": "#c6c6cd",
-            "light": "#c6c6cd",
+            "light": "#424650",
           },
         },
         "color-text-heading-default": {
           "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
           "$value": {
             "dark": "#ebebf0",
-            "light": "#ebebf0",
+            "light": "#0f141a",
           },
         },
         "color-text-heading-secondary": {
           "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#424650",
           },
         },
         "color-text-home-header-default": {
@@ -22467,42 +25025,42 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-input-placeholder": {
           "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-interactive-active": {
           "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-default": {
           "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-interactive-disabled": {
           "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
           "$value": {
             "dark": "#656871",
-            "light": "#656871",
+            "light": "#b4b4bb",
           },
         },
         "color-text-interactive-hover": {
           "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-interactive-inverted-default": {
@@ -22523,14 +25081,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#0f141a",
           },
         },
         "color-text-label-gen-ai": {
           "$description": "The default color for labels indicating that content is produced by generative AI.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#bf80ff",
+            "light": "#7300e5",
           },
         },
         "color-text-layout-toggle": {
@@ -22544,35 +25102,35 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The color of the app layout toggle button when it's active.",
           "$value": {
             "dark": "#161d26",
-            "light": "#161d26",
+            "light": "#ffffff",
           },
         },
         "color-text-layout-toggle-hover": {
           "$description": "The color of the app layout toggle button on hover.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-layout-toggle-selected": {
           "$description": "The color of the app layout toggle button when it's selected.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-link-default": {
           "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-link-hover": {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-notification-default": {
@@ -22621,77 +25179,77 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The text color of the active segment in a segmented control.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#0f141a",
+            "light": "#ffffff",
           },
         },
         "color-text-segment-default": {
           "$description": "The text color of inactive segments in a segmented control.",
           "$value": {
             "dark": "#dedee3",
-            "light": "#dedee3",
+            "light": "#424650",
           },
         },
         "color-text-segment-hover": {
           "$description": "The text color of inactive segments in a segmented control on hover.",
           "$value": {
-            "dark": "#ffffff",
-            "light": "#ffffff",
+            "dark": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-status-error": {
           "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#ff7a7a",
+            "light": "#db0000",
           },
         },
         "color-text-status-inactive": {
           "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
           "$value": {
             "dark": "#a4a4ad",
-            "light": "#a4a4ad",
+            "light": "#656871",
           },
         },
         "color-text-status-info": {
           "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-status-success": {
           "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
           "$value": {
             "dark": "#2bb534",
-            "light": "#2bb534",
+            "light": "#00802f",
           },
         },
         "color-text-status-warning": {
           "$description": "The color of warning icons.",
           "$value": {
             "dark": "#fbd332",
-            "light": "#fbd332",
+            "light": "#855900",
           },
         },
         "color-text-toggle-button-icon-pressed": {
           "$description": "The pressed text color of icon toggle buttons.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "color-text-toggle-button-normal-pressed": {
           "$description": "The pressed text color of normal toggle buttons.",
           "$value": {
             "dark": "#75cfff",
-            "light": "#75cfff",
+            "light": "#002b66",
           },
         },
         "color-text-top-navigation-title": {
           "$description": "The color of the title in the top navigation.",
           "$value": {
             "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "light": "#0f141a",
           },
         },
         "font-family-base": {
@@ -23114,7 +25672,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -23617,8 +26175,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -25672,7 +28230,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -26175,8 +28733,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -28230,7 +30788,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -28733,8 +31291,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#002b66",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-border-item-focused": {
@@ -30788,7 +33346,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -31291,8 +33849,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-border-item-focused": {
@@ -33346,7 +35904,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-field": {
           "$description": "The border width of form fields.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -33849,8 +36407,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-border-input-focused": {
           "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
           "$value": {
-            "dark": "#b8e7ff",
-            "light": "#b8e7ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-border-item-focused": {
@@ -35904,7 +38462,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-field": {
       "$description": "The border width of form fields.",
-      "$value": "2px",
+      "$value": "1px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
@@ -36407,8 +38965,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-border-input-focused": {
       "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
       "$value": {
-        "dark": "#b8e7ff",
-        "light": "#002b66",
+        "dark": "#42b4ff",
+        "light": "#006ce0",
       },
     },
     "color-border-item-focused": {

From 944a8bf7a44ba4086c04a83ed60cbf39f4a0556c Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 14 Apr 2025 14:55:29 +0200
Subject: [PATCH 27/35] make segmented control stroke width 1px too

---
 src/segmented-control/styles.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
index 86ef7b608d..ea4b3a07ed 100644
--- a/src/segmented-control/styles.scss
+++ b/src/segmented-control/styles.scss
@@ -25,15 +25,16 @@
 .segment-part {
   display: -ms-inline-grid;
   display: inline-grid;
-  border-inline: solid awsui.$border-width-button awsui.$color-border-input-default;
-  border-block: solid awsui.$border-width-button awsui.$color-border-input-default;
+  border-inline: solid awsui.$border-width-field awsui.$color-border-input-default;
+  border-block: solid awsui.$border-width-field awsui.$color-border-input-default;
   border-start-start-radius: awsui.$border-radius-button;
   border-start-end-radius: awsui.$border-radius-button;
   border-end-start-radius: awsui.$border-radius-button;
   border-end-end-radius: awsui.$border-radius-button;
   align-items: center;
   min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs);
-  padding-inline: awsui.$space-static-xxxs;
+  padding-block: calc(seg.$segment-gap / 2 - awsui.$border-width-field);
+  padding-inline: calc(seg.$segment-gap - 1px);
   gap: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width});
 
   &:not(.refresh) {

From cca119ba8b72e242208a0e66ca359420134df2b1 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 14 Apr 2025 15:10:31 +0200
Subject: [PATCH 28/35] update to have pixel perfect radio stroke width

---
 src/radio-group/radio-button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/radio-group/radio-button.tsx b/src/radio-group/radio-button.tsx
index c6c6c0d50b..79fe46b198 100644
--- a/src/radio-group/radio-button.tsx
+++ b/src/radio-group/radio-button.tsx
@@ -81,7 +81,7 @@ export default React.forwardRef(function RadioButton(
               [styles['styled-circle-disabled']]: disabled,
               [styles['styled-circle-readonly']]: readOnly,
             })}
-            strokeWidth={6.5}
+            strokeWidth={6.25}
             cx={50}
             cy={50}
             r={46}

From da710ca74c357247328560e867d9df854f464868 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 14 Apr 2025 15:26:19 +0200
Subject: [PATCH 29/35] clean up demo pages and added a default one

---
 pages/app-layout-toolbar/default.page.tsx     | 233 +++---------------
 .../full-page-cards.page.tsx                  |   3 +-
 .../full-page-table.page.tsx                  |   3 +-
 .../with-content-layout.page.tsx              | 213 ++++++++++++++++
 pages/app-layout-toolbar/with-wizard.page.tsx |  15 +-
 5 files changed, 247 insertions(+), 220 deletions(-)
 create mode 100644 pages/app-layout-toolbar/with-content-layout.page.tsx

diff --git a/pages/app-layout-toolbar/default.page.tsx b/pages/app-layout-toolbar/default.page.tsx
index a21fc41a69..37ae8bfbc3 100644
--- a/pages/app-layout-toolbar/default.page.tsx
+++ b/pages/app-layout-toolbar/default.page.tsx
@@ -1,213 +1,38 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext, useRef, useState } from 'react';
+import React from 'react';
 
-import {
-  AppLayoutToolbar,
-  Button,
-  ContentLayout,
-  Header,
-  HelpPanel,
-  Link,
-  SpaceBetween,
-  SplitPanel,
-  Toggle,
-} from '~components';
-import { AppLayoutToolbarProps } from '~components/app-layout-toolbar';
+import AppLayoutToolbar from '~components/app-layout-toolbar';
+import Header from '~components/header';
 
-import AppContext, { AppContextType } from '../app/app-context';
-import { Breadcrumbs, Containers, CustomDrawerContent, Navigation } from '../app-layout/utils/content-blocks';
-import { drawerLabels } from '../app-layout/utils/drawers';
-import appLayoutLabels from '../app-layout/utils/labels';
-
-type DemoContext = React.Context<
-  AppContextType<{
-    navigationTriggerHide: boolean | undefined;
-    drawerTriggerHide: boolean | undefined;
-    splitPanelTriggerHide: boolean | undefined;
-    breadcrumbsHide: boolean | undefined;
-    splitPanelPosition: AppLayoutToolbarProps.SplitPanelPreferences['position'];
-  }>
->;
-
-export default function WithDrawers() {
-  const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
-  const [helpPathSlug, setHelpPathSlug] = useState<string>('default');
-  const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
-  const navigationTriggerHide = urlParams.navigationTriggerHide ?? false;
-  const drawerTriggerHide = urlParams.drawerTriggerHide ?? false;
-  const splitPanelTriggerHide = urlParams.splitPanelTriggerHide ?? false;
-  const breadcrumbsHide = urlParams.breadcrumbsHide ?? false;
-  const [isToolsOpen, setIsToolsOpen] = useState(false);
-  const [isNavigationOpen, setIsNavigationOpen] = useState(true);
-  const [splitPanelOpen, setSplitPanelOpen] = useState(false);
-  const pageLayoutRef = useRef<AppLayoutToolbarProps.Ref>(null);
-
-  const drawersProps: Pick<AppLayoutToolbarProps, 'activeDrawerId' | 'onDrawerChange' | 'drawers'> | null = {
-    activeDrawerId: activeDrawerId,
-    drawers: [
-      {
-        ariaLabels: {
-          closeButton: 'ProHelp close button',
-          drawerName: 'ProHelp drawer content',
-          triggerButton: 'ProHelp trigger button',
-          resizeHandle: 'ProHelp resize handle',
-        },
-        content: <CustomDrawerContent />,
-        id: 'pro-help',
-        trigger: drawerTriggerHide
-          ? undefined
-          : {
-              iconName: 'contact',
-            },
-      },
-    ],
-    onDrawerChange: event => {
-      setActiveDrawerId(event.detail.activeDrawerId);
-    },
-  };
+import { Breadcrumbs, Containers, Navigation, Tools } from '../app-layout/utils/content-blocks';
+import labels from '../app-layout/utils/labels';
+import * as toolsContent from '../app-layout/utils/tools-content';
+import ScreenshotArea from '../utils/screenshot-area';
 
+export default function () {
   return (
-    <AppLayoutToolbar
-      ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
-      breadcrumbs={breadcrumbsHide ? undefined : <Breadcrumbs />}
-      ref={pageLayoutRef}
-      content={
-        <ContentLayout
-          disableOverlap={true}
-          header={
-            <SpaceBetween size="m">
-              <Header
-                variant="h1"
-                description="Sometimes you need custom triggers for drawers and navigation to get the job done."
-                info={
-                  <Link
-                    data-testid="info-link-header"
-                    variant="info"
-                    onFollow={() => {
-                      setHelpPathSlug('header');
-                      setIsToolsOpen(true);
-                      pageLayoutRef.current?.focusToolsClose();
-                    }}
-                  >
-                    Info
-                  </Link>
-                }
-              >
-                Page layout
+    <ScreenshotArea gutters={false}>
+      <AppLayoutToolbar
+        ariaLabels={labels}
+        analyticsMetadata={{
+          flowType: 'home',
+          instanceIdentifier: 'demo-page',
+        }}
+        breadcrumbs={<Breadcrumbs />}
+        navigation={<Navigation />}
+        tools={<Tools>{toolsContent.long}</Tools>}
+        content={
+          <>
+            <div style={{ marginBlockEnd: '1rem' }}>
+              <Header variant="h1" description="Basic demo">
+                Demo page
               </Header>
-
-              <SpaceBetween size="xs">
-                <Toggle
-                  checked={navigationTriggerHide}
-                  onChange={({ detail }) => setUrlParams({ navigationTriggerHide: detail.checked })}
-                >
-                  Hide navigation trigger
-                </Toggle>
-                <Toggle
-                  checked={drawerTriggerHide}
-                  onChange={({ detail }) => setUrlParams({ drawerTriggerHide: detail.checked })}
-                >
-                  Hide drawer trigger
-                </Toggle>
-                <Toggle
-                  checked={splitPanelTriggerHide}
-                  onChange={({ detail }) => setUrlParams({ splitPanelTriggerHide: detail.checked })}
-                >
-                  Hide split panel trigger
-                </Toggle>
-                <Toggle
-                  checked={breadcrumbsHide}
-                  onChange={({ detail }) => setUrlParams({ breadcrumbsHide: detail.checked })}
-                >
-                  Hide breadcrumbs
-                </Toggle>
-
-                <Button
-                  onClick={() => {
-                    setIsNavigationOpen(current => !current);
-                    pageLayoutRef.current?.focusNavigation();
-                  }}
-                >
-                  Toggle navigation
-                </Button>
-
-                <Button
-                  onClick={() => {
-                    setActiveDrawerId('pro-help');
-                    pageLayoutRef.current?.focusActiveDrawer();
-                  }}
-                >
-                  Open a drawer without trigger
-                </Button>
-                <Button onClick={() => setActiveDrawerId(null)}>Close a drawer without trigger</Button>
-                <Button onClick={() => setSplitPanelOpen(true)}>Open split panel</Button>
-              </SpaceBetween>
-            </SpaceBetween>
-          }
-        >
-          <Header
-            info={
-              <Link
-                data-testid="info-link-content"
-                variant="info"
-                onFollow={() => {
-                  setHelpPathSlug('content');
-                  setIsToolsOpen(true);
-                }}
-              >
-                Info
-              </Link>
-            }
-          >
-            Content
-          </Header>
-          <Containers />
-        </ContentLayout>
-      }
-      splitPanel={
-        <SplitPanel
-          closeBehavior={splitPanelTriggerHide ? 'hide' : undefined}
-          header="Split panel header"
-          i18nStrings={{
-            preferencesTitle: 'Preferences',
-            preferencesPositionLabel: 'Split panel position',
-            preferencesPositionDescription: 'Choose the default split panel position for the service.',
-            preferencesPositionSide: 'Side',
-            preferencesPositionBottom: 'Bottom',
-            preferencesConfirm: 'Confirm',
-            preferencesCancel: 'Cancel',
-            closeButtonAriaLabel: 'Close panel',
-            openButtonAriaLabel: 'Open panel',
-            resizeHandleAriaLabel: 'Slider',
-          }}
-        >
-          This is the Split Panel!
-        </SplitPanel>
-      }
-      splitPanelOpen={splitPanelOpen}
-      splitPanelPreferences={{
-        position: urlParams.splitPanelPosition,
-      }}
-      onSplitPanelToggle={event => setSplitPanelOpen(event.detail.open)}
-      onSplitPanelPreferencesChange={event => {
-        const { position } = event.detail;
-        setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined });
-      }}
-      onToolsChange={event => {
-        setIsToolsOpen(event.detail.open);
-      }}
-      tools={<Info helpPathSlug={helpPathSlug} />}
-      toolsOpen={isToolsOpen}
-      navigationOpen={isNavigationOpen}
-      navigation={<Navigation />}
-      onNavigationChange={event => setIsNavigationOpen(event.detail.open)}
-      navigationTriggerHide={navigationTriggerHide}
-      {...drawersProps}
-    />
+            </div>
+            <Containers />
+          </>
+        }
+      />
+    </ScreenshotArea>
   );
 }
-
-function Info({ helpPathSlug }: { helpPathSlug: string }) {
-  return <HelpPanel header={<h2>Info</h2>}>Here is some info for you: {helpPathSlug}</HelpPanel>;
-}
diff --git a/pages/app-layout-toolbar/full-page-cards.page.tsx b/pages/app-layout-toolbar/full-page-cards.page.tsx
index 3103eeaa13..d636c4d5df 100644
--- a/pages/app-layout-toolbar/full-page-cards.page.tsx
+++ b/pages/app-layout-toolbar/full-page-cards.page.tsx
@@ -10,7 +10,7 @@ import Header from '~components/header';
 import Link from '~components/link';
 
 import * as toolsContent from '../app-layout//utils/tools-content';
-import { Breadcrumbs, Footer, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks';
+import { Breadcrumbs, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks';
 import labels from '../app-layout/utils/labels';
 import ScreenshotArea from '../utils/screenshot-area';
 
@@ -104,7 +104,6 @@ export default function () {
           />
         }
       />
-      <Footer legacyConsoleNav={false} />
     </ScreenshotArea>
   );
 }
diff --git a/pages/app-layout-toolbar/full-page-table.page.tsx b/pages/app-layout-toolbar/full-page-table.page.tsx
index ff9ecaee20..c6dad58142 100644
--- a/pages/app-layout-toolbar/full-page-table.page.tsx
+++ b/pages/app-layout-toolbar/full-page-table.page.tsx
@@ -5,7 +5,7 @@ import React, { useContext, useState } from 'react';
 import { AppLayoutToolbar, Button, Header, Link, Select, Table } from '~components';
 
 import AppContext, { AppContextType } from '../app/app-context';
-import { Breadcrumbs, Footer, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks';
+import { Breadcrumbs, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks';
 import labels from '../app-layout/utils/labels';
 import * as toolsContent from '../app-layout/utils/tools-content';
 import { generateItems, Instance } from '../table/generate-data';
@@ -81,7 +81,6 @@ export default function () {
           />
         }
       />
-      <Footer legacyConsoleNav={false} />
     </ScreenshotArea>
   );
 }
diff --git a/pages/app-layout-toolbar/with-content-layout.page.tsx b/pages/app-layout-toolbar/with-content-layout.page.tsx
new file mode 100644
index 0000000000..a21fc41a69
--- /dev/null
+++ b/pages/app-layout-toolbar/with-content-layout.page.tsx
@@ -0,0 +1,213 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useRef, useState } from 'react';
+
+import {
+  AppLayoutToolbar,
+  Button,
+  ContentLayout,
+  Header,
+  HelpPanel,
+  Link,
+  SpaceBetween,
+  SplitPanel,
+  Toggle,
+} from '~components';
+import { AppLayoutToolbarProps } from '~components/app-layout-toolbar';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { Breadcrumbs, Containers, CustomDrawerContent, Navigation } from '../app-layout/utils/content-blocks';
+import { drawerLabels } from '../app-layout/utils/drawers';
+import appLayoutLabels from '../app-layout/utils/labels';
+
+type DemoContext = React.Context<
+  AppContextType<{
+    navigationTriggerHide: boolean | undefined;
+    drawerTriggerHide: boolean | undefined;
+    splitPanelTriggerHide: boolean | undefined;
+    breadcrumbsHide: boolean | undefined;
+    splitPanelPosition: AppLayoutToolbarProps.SplitPanelPreferences['position'];
+  }>
+>;
+
+export default function WithDrawers() {
+  const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
+  const [helpPathSlug, setHelpPathSlug] = useState<string>('default');
+  const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
+  const navigationTriggerHide = urlParams.navigationTriggerHide ?? false;
+  const drawerTriggerHide = urlParams.drawerTriggerHide ?? false;
+  const splitPanelTriggerHide = urlParams.splitPanelTriggerHide ?? false;
+  const breadcrumbsHide = urlParams.breadcrumbsHide ?? false;
+  const [isToolsOpen, setIsToolsOpen] = useState(false);
+  const [isNavigationOpen, setIsNavigationOpen] = useState(true);
+  const [splitPanelOpen, setSplitPanelOpen] = useState(false);
+  const pageLayoutRef = useRef<AppLayoutToolbarProps.Ref>(null);
+
+  const drawersProps: Pick<AppLayoutToolbarProps, 'activeDrawerId' | 'onDrawerChange' | 'drawers'> | null = {
+    activeDrawerId: activeDrawerId,
+    drawers: [
+      {
+        ariaLabels: {
+          closeButton: 'ProHelp close button',
+          drawerName: 'ProHelp drawer content',
+          triggerButton: 'ProHelp trigger button',
+          resizeHandle: 'ProHelp resize handle',
+        },
+        content: <CustomDrawerContent />,
+        id: 'pro-help',
+        trigger: drawerTriggerHide
+          ? undefined
+          : {
+              iconName: 'contact',
+            },
+      },
+    ],
+    onDrawerChange: event => {
+      setActiveDrawerId(event.detail.activeDrawerId);
+    },
+  };
+
+  return (
+    <AppLayoutToolbar
+      ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
+      breadcrumbs={breadcrumbsHide ? undefined : <Breadcrumbs />}
+      ref={pageLayoutRef}
+      content={
+        <ContentLayout
+          disableOverlap={true}
+          header={
+            <SpaceBetween size="m">
+              <Header
+                variant="h1"
+                description="Sometimes you need custom triggers for drawers and navigation to get the job done."
+                info={
+                  <Link
+                    data-testid="info-link-header"
+                    variant="info"
+                    onFollow={() => {
+                      setHelpPathSlug('header');
+                      setIsToolsOpen(true);
+                      pageLayoutRef.current?.focusToolsClose();
+                    }}
+                  >
+                    Info
+                  </Link>
+                }
+              >
+                Page layout
+              </Header>
+
+              <SpaceBetween size="xs">
+                <Toggle
+                  checked={navigationTriggerHide}
+                  onChange={({ detail }) => setUrlParams({ navigationTriggerHide: detail.checked })}
+                >
+                  Hide navigation trigger
+                </Toggle>
+                <Toggle
+                  checked={drawerTriggerHide}
+                  onChange={({ detail }) => setUrlParams({ drawerTriggerHide: detail.checked })}
+                >
+                  Hide drawer trigger
+                </Toggle>
+                <Toggle
+                  checked={splitPanelTriggerHide}
+                  onChange={({ detail }) => setUrlParams({ splitPanelTriggerHide: detail.checked })}
+                >
+                  Hide split panel trigger
+                </Toggle>
+                <Toggle
+                  checked={breadcrumbsHide}
+                  onChange={({ detail }) => setUrlParams({ breadcrumbsHide: detail.checked })}
+                >
+                  Hide breadcrumbs
+                </Toggle>
+
+                <Button
+                  onClick={() => {
+                    setIsNavigationOpen(current => !current);
+                    pageLayoutRef.current?.focusNavigation();
+                  }}
+                >
+                  Toggle navigation
+                </Button>
+
+                <Button
+                  onClick={() => {
+                    setActiveDrawerId('pro-help');
+                    pageLayoutRef.current?.focusActiveDrawer();
+                  }}
+                >
+                  Open a drawer without trigger
+                </Button>
+                <Button onClick={() => setActiveDrawerId(null)}>Close a drawer without trigger</Button>
+                <Button onClick={() => setSplitPanelOpen(true)}>Open split panel</Button>
+              </SpaceBetween>
+            </SpaceBetween>
+          }
+        >
+          <Header
+            info={
+              <Link
+                data-testid="info-link-content"
+                variant="info"
+                onFollow={() => {
+                  setHelpPathSlug('content');
+                  setIsToolsOpen(true);
+                }}
+              >
+                Info
+              </Link>
+            }
+          >
+            Content
+          </Header>
+          <Containers />
+        </ContentLayout>
+      }
+      splitPanel={
+        <SplitPanel
+          closeBehavior={splitPanelTriggerHide ? 'hide' : undefined}
+          header="Split panel header"
+          i18nStrings={{
+            preferencesTitle: 'Preferences',
+            preferencesPositionLabel: 'Split panel position',
+            preferencesPositionDescription: 'Choose the default split panel position for the service.',
+            preferencesPositionSide: 'Side',
+            preferencesPositionBottom: 'Bottom',
+            preferencesConfirm: 'Confirm',
+            preferencesCancel: 'Cancel',
+            closeButtonAriaLabel: 'Close panel',
+            openButtonAriaLabel: 'Open panel',
+            resizeHandleAriaLabel: 'Slider',
+          }}
+        >
+          This is the Split Panel!
+        </SplitPanel>
+      }
+      splitPanelOpen={splitPanelOpen}
+      splitPanelPreferences={{
+        position: urlParams.splitPanelPosition,
+      }}
+      onSplitPanelToggle={event => setSplitPanelOpen(event.detail.open)}
+      onSplitPanelPreferencesChange={event => {
+        const { position } = event.detail;
+        setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined });
+      }}
+      onToolsChange={event => {
+        setIsToolsOpen(event.detail.open);
+      }}
+      tools={<Info helpPathSlug={helpPathSlug} />}
+      toolsOpen={isToolsOpen}
+      navigationOpen={isNavigationOpen}
+      navigation={<Navigation />}
+      onNavigationChange={event => setIsNavigationOpen(event.detail.open)}
+      navigationTriggerHide={navigationTriggerHide}
+      {...drawersProps}
+    />
+  );
+}
+
+function Info({ helpPathSlug }: { helpPathSlug: string }) {
+  return <HelpPanel header={<h2>Info</h2>}>Here is some info for you: {helpPathSlug}</HelpPanel>;
+}
diff --git a/pages/app-layout-toolbar/with-wizard.page.tsx b/pages/app-layout-toolbar/with-wizard.page.tsx
index 6fe801d9c3..88b7b82f69 100644
--- a/pages/app-layout-toolbar/with-wizard.page.tsx
+++ b/pages/app-layout-toolbar/with-wizard.page.tsx
@@ -20,6 +20,7 @@ import labels from '../app-layout/utils/labels';
 import { generateItems, Instance } from '../table/generate-data';
 import { columnsConfig } from '../table/shared-configs';
 import ScreenshotArea from '../utils/screenshot-area';
+import { i18nStrings } from '../wizard/common';
 
 type DemoContext = React.Context<
   AppContextType<{ hasBreadcrumbs: boolean; hasNotifications: boolean; disableOverlap: boolean }>
@@ -34,22 +35,13 @@ export default function () {
   return (
     <ScreenshotArea gutters={false}>
       <AppLayoutToolbar
+        contentType="wizard"
         ariaLabels={labels}
         navigationHide={false}
         breadcrumbs={urlParams.hasBreadcrumbs && <Breadcrumbs />}
         content={
           <Wizard
-            i18nStrings={{
-              stepNumberLabel: stepNumber => `Step ${stepNumber}`,
-              collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`,
-              skipToButtonLabel: step => `Skip to ${step.title}`,
-              navigationAriaLabel: 'Steps',
-              cancelButton: 'Cancel',
-              previousButton: 'Previous',
-              nextButton: 'Next',
-              submitButton: 'Launch instance',
-              optional: 'optional',
-            }}
+            i18nStrings={i18nStrings}
             onNavigate={({ detail }) => setActiveStepIndex(detail.requestedStepIndex)}
             activeStepIndex={activeStepIndex}
             allowSkipTo={true}
@@ -100,7 +92,6 @@ export default function () {
             ]}
           />
         }
-        contentType="wizard"
       />
     </ScreenshotArea>
   );

From 15d30b8b74a5d9fa7bb968d6eb3d990eb34c0b8e Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 14 Apr 2025 18:20:00 +0200
Subject: [PATCH 30/35] update the token stroke width for property filter

---
 src/internal/components/button-trigger/styles.scss | 2 ++
 src/property-filter/filtering-token/styles.scss    | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/internal/components/button-trigger/styles.scss b/src/internal/components/button-trigger/styles.scss
index ac489bc2fa..903ff1507d 100644
--- a/src/internal/components/button-trigger/styles.scss
+++ b/src/internal/components/button-trigger/styles.scss
@@ -37,6 +37,8 @@ $padding-block-inner-filtering-token: 0px;
   &.in-filtering-token-nested {
     padding-block: $padding-block-inner-filtering-token;
     padding-inline: $padding-inline-inner-filtering-token;
+    border-block-width: awsui.$border-width-token;
+    border-inline-width: awsui.$border-width-token;
 
     border-color: tokenGroup.$token-border-color;
     border-start-end-radius: 0;
diff --git a/src/property-filter/filtering-token/styles.scss b/src/property-filter/filtering-token/styles.scss
index 1958a1882f..17f1462ba6 100644
--- a/src/property-filter/filtering-token/styles.scss
+++ b/src/property-filter/filtering-token/styles.scss
@@ -40,8 +40,8 @@ $border-radius-inner-token: calc(#{awsui.$border-radius-token} / 2);
 
 .token,
 .inner-token {
-  border-block: awsui.$border-width-field solid constants.$token-border-color;
-  border-inline: awsui.$border-width-field solid constants.$token-border-color;
+  border-block: awsui.$border-width-token solid constants.$token-border-color;
+  border-inline: awsui.$border-width-token solid constants.$token-border-color;
   display: flex;
   align-items: stretch;
   background: constants.$token-background;

From c89743dd33be488e48d556c5d5353c56c59c1d0b Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 17 Apr 2025 10:59:07 +0200
Subject: [PATCH 31/35] update a value that was hard-coded

---
 src/segmented-control/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
index ea4b3a07ed..43d780f864 100644
--- a/src/segmented-control/styles.scss
+++ b/src/segmented-control/styles.scss
@@ -34,7 +34,7 @@
   align-items: center;
   min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs);
   padding-block: calc(seg.$segment-gap / 2 - awsui.$border-width-field);
-  padding-inline: calc(seg.$segment-gap - 1px);
+  padding-inline: calc(seg.$segment-gap - awsui.$border-width-field);
   gap: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width});
 
   &:not(.refresh) {

From 197287f4136e7b2309bf51865d1d108f3ef8580c Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 17 Apr 2025 15:22:07 +0200
Subject: [PATCH 32/35] remove parentTokens from toolbar visual context
 definition and adjust min height of prompt-input

---
 src/prompt-input/internal.tsx                                | 2 +-
 .../visual-refresh/contexts/app-layout-toolbar.ts            | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/prompt-input/internal.tsx b/src/prompt-input/internal.tsx
index a8d2f98c32..58ee54673e 100644
--- a/src/prompt-input/internal.tsx
+++ b/src/prompt-input/internal.tsx
@@ -113,7 +113,7 @@ const InternalPromptInput = React.forwardRef(
         // this is required so the scrollHeight becomes dynamic, otherwise it will be locked at the highest value for the size it reached e.g. 500px
         textareaRef.current.style.height = 'auto';
 
-        const minTextareaHeight = `calc(${LINE_HEIGHT} +  ${tokens.spaceScaledXxs} * 2)`; // the min height of Textarea with 1 row
+        const minTextareaHeight = `calc(${LINE_HEIGHT} +  ${tokens.spaceScaledXxs} * 2 + 2px)`; // the min height of Textarea with 1 row
 
         if (maxRows === -1) {
           const scrollHeight = `calc(${textareaRef.current.scrollHeight}px)`;
diff --git a/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts b/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts
index 1d2a6c2fc4..a71b27d335 100644
--- a/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts
+++ b/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts
@@ -4,14 +4,11 @@ import merge from 'lodash/merge.js';
 
 import { expandColorDictionary } from '../../utils/index.js';
 import { StyleDictionary } from '../../utils/interfaces.js';
-import { tokens as parentTokens } from '../colors.js';
 
 const tokens = {
   colorBackgroundLayoutMain: { light: '{colorGrey50}', dark: '{colorGrey850}' },
 };
 
-const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
-  merge({}, parentTokens, { ...tokens })
-);
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, { ...tokens }));
 
 export { expandedTokens as tokens };

From 34944f3c0a2708471516845713cf6f3b6552f4d3 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 17 Apr 2025 17:40:34 +0200
Subject: [PATCH 33/35] update the expected value based on the prompt-input
 border width change

---
 src/prompt-input/__integ__/prompt-input.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/prompt-input/__integ__/prompt-input.test.ts b/src/prompt-input/__integ__/prompt-input.test.ts
index 1e751936e1..3791fc25d4 100644
--- a/src/prompt-input/__integ__/prompt-input.test.ts
+++ b/src/prompt-input/__integ__/prompt-input.test.ts
@@ -40,7 +40,7 @@ describe('Prompt input', () => {
     setupTest({}, async page => {
       await expect(page.getPromptInputHeight()).resolves.toEqual(32);
       await page.click('#placeholder-text-button');
-      await expect(page.getPromptInputHeight()).resolves.toEqual(96);
+      await expect(page.getPromptInputHeight()).resolves.toEqual(94);
 
       const clientHeight = await page.getElementProperty(
         getPromptInputWrapper().findNativeTextarea().toSelector(),

From c2e9d6c3d65f3257735d9c2f7b9dc6f9c90b6124 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 17 Apr 2025 18:33:40 +0200
Subject: [PATCH 34/35] fix issues found in bug-bash - code editor border width
 and striped row border

---
 package.json                                    | 2 +-
 src/__integ__/__snapshots__/themes.test.ts.snap | 8 ++++++++
 src/code-editor/styles.scss                     | 4 ++--
 src/table/body-cell/styles.scss                 | 3 +++
 style-dictionary/utils/token-names.ts           | 1 +
 style-dictionary/visual-refresh/colors.ts       | 1 +
 6 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index f9a75bf7db..b9209124e5 100644
--- a/package.json
+++ b/package.json
@@ -164,7 +164,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "753 kB",
+      "limit": "754 kB",
       "ignore": "react-dom"
     }
   ],
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index e7cefdac0c..0aacd3775f 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -146,6 +146,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-border-button-primary-disabled": "#d5dbdb",
   "color-border-calendar-grid": "#eaeded",
   "color-border-calendar-grid-selected-focus-ring": "#0073bb",
+  "color-border-cell-shaded": "#d5dbdb",
   "color-border-code-editor-ace-active-line-dark-theme": "#687078",
   "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb",
   "color-border-code-editor-default": "#d5dbdb",
@@ -818,6 +819,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-border-button-primary-disabled": "#414750",
   "color-border-calendar-grid": "#414750",
   "color-border-calendar-grid-selected-focus-ring": "#00a1c9",
+  "color-border-cell-shaded": "#414750",
   "color-border-code-editor-ace-active-line-dark-theme": "#687078",
   "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb",
   "color-border-code-editor-default": "#687078",
@@ -1490,6 +1492,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-border-button-primary-disabled": "#d5dbdb",
   "color-border-calendar-grid": "#eaeded",
   "color-border-calendar-grid-selected-focus-ring": "#0073bb",
+  "color-border-cell-shaded": "#d5dbdb",
   "color-border-code-editor-ace-active-line-dark-theme": "#687078",
   "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb",
   "color-border-code-editor-default": "#d5dbdb",
@@ -2162,6 +2165,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-border-button-primary-disabled": "#d5dbdb",
   "color-border-calendar-grid": "#eaeded",
   "color-border-calendar-grid-selected-focus-ring": "#0073bb",
+  "color-border-cell-shaded": "#d5dbdb",
   "color-border-code-editor-ace-active-line-dark-theme": "#687078",
   "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb",
   "color-border-code-editor-default": "#d5dbdb",
@@ -2834,6 +2838,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-button-primary-disabled": "#ebebf0",
   "color-border-calendar-grid": "transparent",
   "color-border-calendar-grid-selected-focus-ring": "#f9f9fa",
+  "color-border-cell-shaded": "#dedee3",
   "color-border-code-editor-ace-active-line-dark-theme": "#656871",
   "color-border-code-editor-ace-active-line-light-theme": "#dedee3",
   "color-border-code-editor-default": "#dedee3",
@@ -3506,6 +3511,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-button-primary-disabled": "#ebebf0",
   "color-border-calendar-grid": "transparent",
   "color-border-calendar-grid-selected-focus-ring": "#f9f9fa",
+  "color-border-cell-shaded": "#dedee3",
   "color-border-code-editor-ace-active-line-dark-theme": "#656871",
   "color-border-code-editor-ace-active-line-light-theme": "#dedee3",
   "color-border-code-editor-default": "#dedee3",
@@ -4178,6 +4184,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-button-primary-disabled": "#232b37",
   "color-border-calendar-grid": "transparent",
   "color-border-calendar-grid-selected-focus-ring": "#161d26",
+  "color-border-cell-shaded": "#333843",
   "color-border-code-editor-ace-active-line-dark-theme": "#656871",
   "color-border-code-editor-ace-active-line-light-theme": "#dedee3",
   "color-border-code-editor-default": "#656871",
@@ -4850,6 +4857,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-button-primary-disabled": "#232b37",
   "color-border-calendar-grid": "transparent",
   "color-border-calendar-grid-selected-focus-ring": "#161d26",
+  "color-border-cell-shaded": "#333843",
   "color-border-code-editor-ace-active-line-dark-theme": "#656871",
   "color-border-code-editor-ace-active-line-light-theme": "#dedee3",
   "color-border-code-editor-default": "#656871",
diff --git a/src/code-editor/styles.scss b/src/code-editor/styles.scss
index 096b4783d4..c2b10fa85f 100644
--- a/src/code-editor/styles.scss
+++ b/src/code-editor/styles.scss
@@ -46,7 +46,7 @@
   container-type: inline-size;
   display: flex;
   vertical-align: middle;
-  border-block-start: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-block-start: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
   background-color: awsui.$color-background-code-editor-status-bar;
   @include styles.text-wrapping;
 
@@ -60,7 +60,7 @@
     display: flex;
     flex-wrap: wrap;
     padding-inline-start: awsui.$space-l;
-    border-inline-end: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+    border-inline-end: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
   }
 
   &__right {
diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index 433a6ec04b..843f3bc729 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -213,6 +213,9 @@ $cell-negative-space-vertical: 2px;
   &-shaded {
     background: awsui.$color-background-cell-shaded;
   }
+  &.has-striped-rows:not(.body-cell-selected) {
+    border-block-end-color: awsui.$color-border-cell-shaded;
+  }
   &-selected {
     background-color: awsui.$color-background-item-selected;
     border-block-start: $selected-border;
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 8f3d66b2b0..f8d046e52b 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -338,6 +338,7 @@ export type ColorsTokenName =
   | 'colorTextButtonPrimaryDisabled'
   | 'colorBorderCalendarGrid'
   | 'colorBorderCalendarGridSelectedFocusRing'
+  | 'colorBorderCellShaded'
   | 'colorBorderCodeEditorAceActiveLineLightTheme'
   | 'colorBorderCodeEditorAceActiveLineDarkTheme'
   | 'colorBorderCodeEditorDefault'
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index f0c5af9d98..12cd7ff9a2 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -118,6 +118,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextButtonPrimaryDisabled: { light: '{colorGrey500}', dark: '{colorGrey500}' },
   colorBorderCalendarGrid: 'transparent',
   colorBorderCalendarGridSelectedFocusRing: { light: '{colorGrey100}', dark: '{colorGrey800}' },
+  colorBorderCellShaded: { light: '{colorGrey300}', dark: '{colorGrey650}' },
   colorBorderCodeEditorAceActiveLineLightTheme: '{colorGrey300}',
   colorBorderCodeEditorAceActiveLineDarkTheme: '{colorGrey550}',
   colorBorderCodeEditorDefault: { light: '{colorGrey300}', dark: '{colorGrey550}' },

From c409a91f0a6889dd985f2965a33a8fdae49d3ed1 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Tue, 22 Apr 2025 11:20:48 +0200
Subject: [PATCH 35/35] add an additional :not pseudo to striped divider for
 last-row

---
 src/table/body-cell/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index 843f3bc729..5c170722ff 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -213,7 +213,7 @@ $cell-negative-space-vertical: 2px;
   &-shaded {
     background: awsui.$color-background-cell-shaded;
   }
-  &.has-striped-rows:not(.body-cell-selected) {
+  &.has-striped-rows:not(.body-cell-selected):not(.body-cell-last-row) {
     border-block-end-color: awsui.$color-border-cell-shaded;
   }
   &-selected {