From c57141063b40c481065d38249cb01f6e0a5b568d Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Fri, 29 May 2026 06:58:45 +0200
Subject: [PATCH] wip

---
 build-tools/tasks/generate-environment.js     |  6 +-
 build-tools/tasks/styles.js                   |  3 +-
 build-tools/tasks/themeable-source.js         |  2 +-
 build-tools/utils/themes.js                   | 56 +++++++++++--
 .../with-table-and-sticky-offset.page.tsx     |  2 +-
 pages/app/app-context.tsx                     |  6 --
 pages/app/components/theme-switcher.tsx       | 37 ---------
 pages/app/index.tsx                           | 11 +--
 pages/theming/integration.page.tsx            |  2 +-
 pages/webpack.config.cjs                      |  5 +-
 style-dictionary/core-open-source/borders.ts  | 33 ++++++++
 style-dictionary/core-open-source/colors.ts   | 82 +++++++++++++++++++
 .../core-open-source/contexts/alert.ts        | 19 +++++
 .../core-open-source/contexts/flashbar.ts     | 14 ++++
 .../core-open-source/contexts/header.ts       | 27 ++++++
 .../contexts/top-navigation.ts                | 37 +++++++++
 style-dictionary/core-open-source/index.ts    | 51 ++++++++++++
 style-dictionary/core-open-source/sizes.ts    | 13 +++
 style-dictionary/core-open-source/spacing.ts  | 17 ++++
 .../core-open-source/typography.ts            | 31 +++++++
 style-dictionary/core/color-palette.ts        |  2 -
 style-dictionary/core/index.ts                | 13 ++-
 style-dictionary/utils/token-names.ts         |  2 +
 style-dictionary/visual-refresh/colors.ts     |  2 +
 24 files changed, 395 insertions(+), 78 deletions(-)
 create mode 100644 style-dictionary/core-open-source/borders.ts
 create mode 100644 style-dictionary/core-open-source/colors.ts
 create mode 100644 style-dictionary/core-open-source/contexts/alert.ts
 create mode 100644 style-dictionary/core-open-source/contexts/flashbar.ts
 create mode 100644 style-dictionary/core-open-source/contexts/header.ts
 create mode 100644 style-dictionary/core-open-source/contexts/top-navigation.ts
 create mode 100644 style-dictionary/core-open-source/index.ts
 create mode 100644 style-dictionary/core-open-source/sizes.ts
 create mode 100644 style-dictionary/core-open-source/spacing.ts
 create mode 100644 style-dictionary/core-open-source/typography.ts

diff --git a/build-tools/tasks/generate-environment.js b/build-tools/tasks/generate-environment.js
index f43ecd1b4a..481fd6def8 100644
--- a/build-tools/tasks/generate-environment.js
+++ b/build-tools/tasks/generate-environment.js
@@ -5,9 +5,6 @@ const { writeFile } = require('../utils/files');
 const themes = require('../utils/themes');
 const workspace = require('../utils/workspace');
 
-const ALWAYS_VISUAL_REFRESH = process.env.ALWAYS_VISUAL_REFRESH === 'true';
-const INCLUDE_ONE_THEME = process.env.INCLUDE_ONE_THEME === 'true';
-
 function writeEnvironmentFile(theme) {
   const filepath = 'internal/environment';
   const values = {
@@ -16,8 +13,7 @@ function writeEnvironmentFile(theme) {
     GIT_SHA: workspace.gitCommitVersion,
     THEME: theme.name,
     SYSTEM: 'core',
-    ALWAYS_VISUAL_REFRESH: !!theme.alwaysVisualRefresh || ALWAYS_VISUAL_REFRESH,
-    INCLUDE_ONE_THEME: INCLUDE_ONE_THEME,
+    ALWAYS_VISUAL_REFRESH: !!theme.alwaysVisualRefresh,
   };
   const basePath = path.join(theme.outputPath, filepath);
 
diff --git a/build-tools/tasks/styles.js b/build-tools/tasks/styles.js
index 50aa943278..4249e4a891 100644
--- a/build-tools/tasks/styles.js
+++ b/build-tools/tasks/styles.js
@@ -46,8 +46,9 @@ function stylesTask(theme) {
       theme.secondaryThemePaths?.map(async path => (await import(join(styleDictionaryRoot, path))).default) ?? []
     );
 
+    const metadataPath = theme.metadataPath || join(theme.primaryThemePath, '../metadata.js');
     // eslint-disable-next-line no-unsanitized/method
-    const { default: metadata } = await import(join(styleDictionaryRoot, theme.primaryThemePath, '../metadata.js'));
+    const { default: metadata } = await import(join(styleDictionaryRoot, metadataPath));
     const exposed = [];
     const themeable = [];
     const variablesMap = {};
diff --git a/build-tools/tasks/themeable-source.js b/build-tools/tasks/themeable-source.js
index 67d85fa7b4..7c11ff2f58 100644
--- a/build-tools/tasks/themeable-source.js
+++ b/build-tools/tasks/themeable-source.js
@@ -17,7 +17,7 @@ const componentsTemplateDir = 'internal/template';
 const designTokensTemplateDir = 'internal/template-tokens';
 const stylesDir = 'internal/scss';
 
-const theme = themes.find(theme => theme.name === 'default');
+const theme = themes[0];
 const themeable = {
   name: 'components-themeable',
   sourceDir: theme.outputPath,
diff --git a/build-tools/utils/themes.js b/build-tools/utils/themes.js
index 6564bf32d4..304c1d56f6 100644
--- a/build-tools/utils/themes.js
+++ b/build-tools/utils/themes.js
@@ -3,10 +3,9 @@
 const path = require('path');
 const workspace = require('./workspace');
 
-const INCLUDE_ONE_THEME = process.env.INCLUDE_ONE_THEME === 'true';
+const THEME = process.env.THEME || 'default';
 
-const themes = [
-  // This is the default Cloudscape theme, which is best used with Visual Refresh enabled (by default)
+const allThemes = [
   {
     name: 'default',
     packageJson: { name: '@cloudscape-design/components' },
@@ -14,12 +13,55 @@ const themes = [
     designTokensDir: 'design-tokens',
     designTokensPackageJson: { name: '@cloudscape-design/design-tokens' },
     outputPath: path.join(workspace.targetPath, 'components'),
+    primaryThemePath: './core-open-source/index.js',
+    secondaryThemePaths: [],
+    metadataPath: './visual-refresh/metadata.js',
+    alwaysVisualRefresh: true,
+  },
+  {
+    name: 'visual-refresh',
+    packageJson: { name: '@cloudscape-design/components' },
+    designTokensOutput: 'index',
+    designTokensDir: 'design-tokens',
+    designTokensPackageJson: { name: '@cloudscape-design/design-tokens' },
+    outputPath: path.join(workspace.targetPath, 'components'),
+    primaryThemePath: './visual-refresh/index.js',
+    secondaryThemePaths: [],
+    metadataPath: './visual-refresh/metadata.js',
+    alwaysVisualRefresh: true,
+  },
+  {
+    name: 'classic',
+    packageJson: { name: '@cloudscape-design/components' },
+    designTokensOutput: 'index',
+    designTokensDir: 'design-tokens',
+    designTokensPackageJson: { name: '@cloudscape-design/design-tokens' },
+    outputPath: path.join(workspace.targetPath, 'components'),
     primaryThemePath: './classic/index.js',
-    secondaryThemePaths: [
-      './visual-refresh-secondary/index.js',
-      ...(INCLUDE_ONE_THEME ? ['./one-theme/index.js'] : []),
-    ],
+    secondaryThemePaths: [],
+    metadataPath: './classic/metadata.js',
+    alwaysVisualRefresh: false,
+  },
+  {
+    name: 'one-theme',
+    packageJson: { name: '@cloudscape-design/components' },
+    designTokensOutput: 'index',
+    designTokensDir: 'design-tokens',
+    designTokensPackageJson: { name: '@cloudscape-design/design-tokens' },
+    outputPath: path.join(workspace.targetPath, 'components'),
+    primaryThemePath: './one-theme/index.js',
+    secondaryThemePaths: [],
+    metadataPath: './visual-refresh/metadata.js',
+    alwaysVisualRefresh: true,
   },
 ];
 
+// Build only the selected theme (default: 'default' which is core-open-source)
+const themes = allThemes.filter(t => t.name === THEME);
+
+if (themes.length === 0) {
+  const available = allThemes.map(t => t.name).join(', ');
+  throw new Error(`Unknown theme "${THEME}". Available themes: ${available}`);
+}
+
 module.exports = themes;
diff --git a/pages/app-layout/with-table-and-sticky-offset.page.tsx b/pages/app-layout/with-table-and-sticky-offset.page.tsx
index e2964798ef..85d18c0a1f 100644
--- a/pages/app-layout/with-table-and-sticky-offset.page.tsx
+++ b/pages/app-layout/with-table-and-sticky-offset.page.tsx
@@ -29,7 +29,7 @@ export default function () {
           <Table<Instance>
             header={<Header variant="awsui-h1-sticky">Sticky Scrollbar Example</Header>}
             // manually set vertical offset to test this feature
-            stickyHeaderVerticalOffset={urlParams.visualRefresh ? 57 : 45}
+            stickyHeaderVerticalOffset={57}
             stickyHeader={true}
             variant="full-page"
             columnDefinitions={columnsConfig}
diff --git a/pages/app/app-context.tsx b/pages/app/app-context.tsx
index 4807fdf5fe..3d1d374767 100644
--- a/pages/app/app-context.tsx
+++ b/pages/app/app-context.tsx
@@ -6,13 +6,9 @@ import mapValues from 'lodash/mapValues';
 
 import { Density, Mode } from '@cloudscape-design/global-styles';
 
-import { THEME } from '~components/internal/environment';
-
 interface AppUrlParams {
   density: Density;
   direction: 'ltr' | 'rtl';
-  visualRefresh: boolean;
-  oneTheme: boolean;
   motionDisabled: boolean;
   appLayoutWidget: boolean;
   mode?: Mode;
@@ -32,8 +28,6 @@ const appContextDefaults: AppContextType = {
   urlParams: {
     density: Density.Comfortable,
     direction: 'ltr',
-    visualRefresh: THEME === 'default',
-    oneTheme: false,
     motionDisabled: false,
     appLayoutWidget: false,
   },
diff --git a/pages/app/components/theme-switcher.tsx b/pages/app/components/theme-switcher.tsx
index 26ade0902b..7a3962f612 100644
--- a/pages/app/components/theme-switcher.tsx
+++ b/pages/app/components/theme-switcher.tsx
@@ -4,7 +4,6 @@ import React, { useContext } from 'react';
 
 import { Density, Mode } from '@cloudscape-design/global-styles';
 
-import { ALWAYS_VISUAL_REFRESH, INCLUDE_ONE_THEME } from '~components/internal/environment';
 import SpaceBetween from '~components/space-between';
 
 import AppContext from '../app-context';
@@ -12,44 +11,8 @@ import AppContext from '../app-context';
 export default function ThemeSwitcher() {
   const { mode, urlParams, setUrlParams, setMode } = useContext(AppContext);
 
-  function activateTheme(theme: 'visualRefresh' | 'oneTheme' | 'classic') {
-    setUrlParams({
-      visualRefresh: theme === 'visualRefresh',
-      oneTheme: theme === 'oneTheme',
-    });
-    window.location.reload();
-  }
-
-  const vrSwitchProps: React.InputHTMLAttributes<HTMLInputElement> = {
-    id: 'visual-refresh-toggle',
-    type: 'checkbox',
-  };
-
-  if (ALWAYS_VISUAL_REFRESH) {
-    vrSwitchProps.checked = true;
-    vrSwitchProps.readOnly = true;
-  } else {
-    vrSwitchProps.checked = urlParams.visualRefresh && !urlParams.oneTheme;
-    vrSwitchProps.onChange = event => activateTheme(event.target.checked ? 'visualRefresh' : 'classic');
-  }
-
   return (
     <SpaceBetween direction="horizontal" size="xs">
-      <label>
-        <input {...vrSwitchProps} />
-        Visual refresh
-      </label>
-      {INCLUDE_ONE_THEME && (
-        <label>
-          <input
-            id="one-theme-toggle"
-            type="checkbox"
-            checked={urlParams.oneTheme}
-            onChange={event => activateTheme(event.target.checked ? 'oneTheme' : 'classic')}
-          />
-          One theme
-        </label>
-      )}
       <label>
         <input
           id="mode-toggle"
diff --git a/pages/app/index.tsx b/pages/app/index.tsx
index 6f971d8923..496f5c8f2e 100644
--- a/pages/app/index.tsx
+++ b/pages/app/index.tsx
@@ -28,12 +28,10 @@ interface GlobalFlags {
 interface CustomFlags {
   appLayoutDelayedWidget?: boolean;
 }
-const awsuiVisualRefreshFlag = Symbol.for('awsui-visual-refresh-flag');
 const awsuiGlobalFlagsSymbol = Symbol.for('awsui-global-flags');
 const awsuiCustomFlagsSymbol = Symbol.for('awsui-custom-flags');
 
 interface ExtendedWindow extends Window {
-  [awsuiVisualRefreshFlag]?: () => boolean;
   [awsuiGlobalFlagsSymbol]?: GlobalFlags;
   [awsuiCustomFlagsSymbol]?: CustomFlags;
 }
@@ -96,12 +94,10 @@ function App() {
 }
 
 const history = createHashHistory();
-const { direction, visualRefresh, oneTheme, appLayoutWidget, appLayoutToolbar, appLayoutDelayedWidget } = parseQuery(
+const { direction, appLayoutWidget, appLayoutToolbar, appLayoutDelayedWidget } = parseQuery(
   history.location.search
 );
 
-// The VR class needs to be set before any React rendering occurs.
-window[awsuiVisualRefreshFlag] = () => visualRefresh && !oneTheme;
 if (!window[awsuiGlobalFlagsSymbol]) {
   window[awsuiGlobalFlagsSymbol] = {};
 }
@@ -112,11 +108,6 @@ window[awsuiGlobalFlagsSymbol].appLayoutWidget = appLayoutWidget;
 window[awsuiGlobalFlagsSymbol].appLayoutToolbar = appLayoutToolbar;
 window[awsuiCustomFlagsSymbol].appLayoutDelayedWidget = appLayoutDelayedWidget;
 
-// Visual Refresh and One Theme are mutually exclusive — manage both classes here so they never coexist.
-// useRuntimeVisualRefresh() detects .awsui-visual-refresh on body and short-circuits before its Symbol fallback.
-document.body.classList.toggle('awsui-one-theme', oneTheme);
-document.body.classList.toggle('awsui-visual-refresh', visualRefresh && !oneTheme);
-
 // Apply the direction value to the HTML element dir attribute
 document.documentElement.setAttribute('dir', direction);
 
diff --git a/pages/theming/integration.page.tsx b/pages/theming/integration.page.tsx
index 595f6096f9..9281b5d051 100644
--- a/pages/theming/integration.page.tsx
+++ b/pages/theming/integration.page.tsx
@@ -69,7 +69,7 @@ const sharedItems = [
 export default function () {
   const { urlParams } = useContext(AppContext);
   const [themed, setThemed] = useState<boolean>(false);
-  const [secondaryTheme, setSecondaryTheme] = useState<boolean>(urlParams.visualRefresh);
+  const [secondaryTheme, setSecondaryTheme] = useState<boolean>(false);
   const [themeMethod, setThemeMethod] = useState<'applyTheme' | 'generateThemeStylesheet'>('applyTheme');
 
   useEffect(() => {
diff --git a/pages/webpack.config.cjs b/pages/webpack.config.cjs
index 7d61998cf2..f9f7700009 100644
--- a/pages/webpack.config.cjs
+++ b/pages/webpack.config.cjs
@@ -8,8 +8,7 @@ const workspace = require('../build-tools/utils/workspace');
 
 module.exports = () => {
   const react18 = process.env.REACT_VERSION === '18';
-  const theme = process.env.THEME || 'default';
-  const themeDefinition = themes.find(t => t.name === theme);
+  const themeDefinition = themes[0];
   return baseConfig({
     componentsPath: path.resolve(themeDefinition.outputPath),
     designTokensPath: path.resolve(
@@ -18,7 +17,7 @@ module.exports = () => {
       themeDefinition.designTokensOutput
     ),
     globalStylesPath: themeDefinition.globalStylesPath,
-    outputPath: `pages/lib/static-${theme}`,
+    outputPath: `pages/lib/static-${themeDefinition.name}`,
     react18,
   });
 };
diff --git a/style-dictionary/core-open-source/borders.ts b/style-dictionary/core-open-source/borders.ts
new file mode 100644
index 0000000000..b50d89c324
--- /dev/null
+++ b/style-dictionary/core-open-source/borders.ts
@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../utils/interfaces.js';
+
+export const tokens: StyleDictionary.BordersDictionary = {
+  borderWidthButton: '1px',
+  borderWidthToken: '1px',
+  borderWidthAlert: '0px',
+  borderItemWidth: '1px',
+  borderWidthAlertInlineStart: '2px',
+  borderWidthItemSelected: '1px',
+  borderWidthCardSelected: '1px',
+
+  borderRadiusAlert: '2px',
+  borderRadiusBadge: '16px',
+  borderRadiusButton: '8px',
+  borderRadiusContainer: '12px',
+  borderRadiusDropdown: '8px',
+  borderRadiusDropzone: '8px',
+  borderRadiusFlashbar: '4px',
+  borderRadiusItem: '8px',
+  borderRadiusInput: '8px',
+  borderRadiusPopover: '8px',
+  borderRadiusTabsFocusRing: '10px',
+  borderRadiusToken: '8px',
+  borderRadiusTutorialPanelItem: '4px',
+
+  borderWidthIconSmall: '1.5px',
+  borderWidthIconNormal: '1.5px',
+  borderWidthIconMedium: '1.75px',
+  borderWidthIconBig: '2px',
+  borderWidthIconLarge: '2.5px',
+};
diff --git a/style-dictionary/core-open-source/colors.ts b/style-dictionary/core-open-source/colors.ts
new file mode 100644
index 0000000000..19cdf12d48
--- /dev/null
+++ b/style-dictionary/core-open-source/colors.ts
@@ -0,0 +1,82 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ReferenceTokens } from '@cloudscape-design/theming-build';
+
+import { expandColorDictionary, expandReferenceTokens } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.ColorsDictionary = {
+  colorTextBodyDefault: { light: '#0f141a', dark: '#ccccd1' },
+
+  colorBorderButtonNormalDefault: { light: '#1b232d', dark: '#f3f3f7' },
+  colorBorderButtonNormalHover: { light: '#1b232d', dark: '#f9f9fb' },
+  colorBorderButtonNormalActive: { light: '#1b232d', dark: '#f9f9fb' },
+  colorBackgroundButtonNormalDefault: { light: '#ffffff', dark: '#161d26' },
+  colorBackgroundButtonNormalHover: { light: '#f6f6f9', dark: '#424650' },
+  colorBackgroundButtonNormalActive: { light: '#ebebf0', dark: '#131920' },
+  colorTextButtonNormalDefault: { light: '#1b232d', dark: '#f3f3f7' },
+  colorTextButtonNormalHover: { light: '#1b232d', dark: '#f9f9fb' },
+  colorTextButtonNormalActive: { light: '#1b232d', dark: '#f9f9fb' },
+
+  colorBackgroundButtonPrimaryDefault: { light: '#1b232d', dark: '#f9f9fb' },
+  colorBackgroundButtonPrimaryHover: { light: '#06080a', dark: '#ffffff' },
+  colorBackgroundButtonPrimaryActive: { light: '#1b232d', dark: '#f9f9fb' },
+  colorTextButtonPrimaryDefault: { light: '#ffffff', dark: '#131920' },
+  colorTextButtonPrimaryHover: { light: '#ffffff', dark: '#131920' },
+  colorTextButtonPrimaryActive: { light: '#ffffff', dark: '#131920' },
+
+  colorBackgroundButtonLinkDefault: { light: '#f6f6f9', dark: '#232b37' },
+  colorBackgroundButtonLinkHover: { light: '#ebebf0', dark: '#424650' },
+  colorBackgroundButtonLinkActive: { light: '#ebebf0', dark: '#131920' },
+  colorTextLinkButtonNormalDefault: { light: '#1b232d', dark: '#f9f9fb' },
+
+  colorBackgroundToggleButtonNormalPressed: { light: '#ebebf0', dark: '#131920' },
+  colorBorderToggleButtonNormalPressed: { light: '#1b232d', dark: '#f9f9fb' },
+  colorTextToggleButtonNormalPressed: { light: '#1b232d', dark: '#f9f9fb' },
+
+  colorBackgroundControlChecked: { light: '#1b232d', dark: '#f9f9fb' },
+
+  colorTextLinkDefault: { light: '#0f141a', dark: '#ccccd1' },
+  colorTextLinkHover: { light: '#424650', dark: '#ffffff' },
+  colorTextLinkSecondaryDefault: { light: '#295eff', dark: '#7598ff' },
+  colorTextLinkSecondaryHover: { light: '#0033cc', dark: '#94afff' },
+  colorTextLinkInfoDefault: { light: '#295eff', dark: '#7598ff' },
+  colorTextLinkInfoHover: { light: '#0033cc', dark: '#94afff' },
+  colorTextAccent: { light: '#1b232d', dark: '#f9f9fb' },
+
+  colorBorderItemFocused: { light: '#1b232d', dark: '#f9f9fb' },
+  colorBorderItemSelected: { light: '#1b232d', dark: '#f9f9fb' },
+  colorBackgroundItemSelected: { light: '#f6f6f9', dark: '#0f141a' },
+  colorBackgroundLayoutToggleSelectedDefault: { light: '#1b232d', dark: '#f9f9fb' },
+
+  colorBackgroundSegmentActive: { light: '#1b232d', dark: '#f9f9fb' },
+
+  colorBackgroundSliderRangeDefault: { light: '#1b232d', dark: '#f9f9fb' },
+  colorBackgroundSliderHandleDefault: { light: '#1b232d', dark: '#f9f9fb' },
+
+  colorBackgroundProgressBarValueDefault: { light: '#1b232d', dark: '#f9f9fb' },
+
+  colorBackgroundNotificationGreen: { light: '#008559', dark: '#008559' },
+  colorBackgroundNotificationBlue: { light: '#0033cc', dark: '#0033cc' },
+  colorTextNotificationDefault: { light: '#ffffff', dark: '#ffffff' },
+
+  colorTextStatusInfo: { light: '#0033cc', dark: '#7598ff' },
+  colorTextStatusSuccess: { light: '#008559', dark: '#00bd6b' },
+  colorTextDropdownItemFilterMatch: { light: '#1b232d', dark: '#f9f9fb' },
+  colorBackgroundDropdownItemFilterMatch: { light: '#f3f3f7', dark: '#06080a' },
+
+  colorTextBreadcrumbCurrent: { light: '#656871', dark: '#8c8c94' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export const referenceTokens: ReferenceTokens = expandReferenceTokens({
+  color: {
+    primary: {
+      seed: '#1b232d',
+    },
+  },
+});
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'color';
diff --git a/style-dictionary/core-open-source/contexts/alert.ts b/style-dictionary/core-open-source/contexts/alert.ts
new file mode 100644
index 0000000000..b93afe7a62
--- /dev/null
+++ b/style-dictionary/core-open-source/contexts/alert.ts
@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const tokens: StyleDictionary.ColorsDictionary = {
+  colorBackgroundStatusInfo: { light: '#f6f6f9', dark: '#232b37' },
+  colorBackgroundStatusWarning: { light: '#f6f6f9', dark: '#232b37' },
+  colorBackgroundStatusError: { light: '#f6f6f9', dark: '#232b37' },
+  colorBackgroundStatusSuccess: { light: '#f6f6f9', dark: '#232b37' },
+  colorTextStatusInfo: { light: '#0033cc', dark: '#7598ff' },
+  colorBorderStatusInfo: { light: '#0033cc', dark: '#7598ff' },
+  colorTextStatusSuccess: { light: '#008559', dark: '#00bd6b' },
+  colorBorderStatusSuccess: { light: '#008559', dark: '#00bd6b' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/core-open-source/contexts/flashbar.ts b/style-dictionary/core-open-source/contexts/flashbar.ts
new file mode 100644
index 0000000000..a10e2e0fc7
--- /dev/null
+++ b/style-dictionary/core-open-source/contexts/flashbar.ts
@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const tokens: StyleDictionary.ColorsDictionary = {
+  colorBackgroundNotificationGreen: { light: '#008559', dark: '#008559' },
+  colorBackgroundNotificationBlue: { light: '#0033cc', dark: '#0033cc' },
+  colorTextNotificationDefault: { light: '#ffffff', dark: '#ffffff' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/core-open-source/contexts/header.ts b/style-dictionary/core-open-source/contexts/header.ts
new file mode 100644
index 0000000000..34c95bc0f2
--- /dev/null
+++ b/style-dictionary/core-open-source/contexts/header.ts
@@ -0,0 +1,27 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+// Header context tokens are single values (applied in dark mode context)
+const tokens: StyleDictionary.ColorsDictionary = {
+  colorBorderButtonNormalDefault: '#f3f3f7',
+  colorBorderButtonNormalHover: '#f9f9fb',
+  colorBorderButtonNormalActive: '#f9f9fb',
+  colorBackgroundButtonNormalHover: '#1b232d',
+  colorBackgroundButtonNormalActive: '#131920',
+  colorTextButtonNormalDefault: '#f3f3f7',
+  colorTextButtonNormalHover: '#f9f9fb',
+  colorTextButtonNormalActive: '#f9f9fb',
+  colorBackgroundButtonPrimaryDefault: '#f9f9fb',
+  colorBackgroundButtonPrimaryHover: '#ffffff',
+  colorBackgroundButtonPrimaryActive: '#f9f9fb',
+  colorTextButtonPrimaryDefault: '#131920',
+  colorTextButtonPrimaryHover: '#131920',
+  colorTextButtonPrimaryActive: '#131920',
+  colorTextLinkDefault: '#ccccd1',
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/core-open-source/contexts/top-navigation.ts b/style-dictionary/core-open-source/contexts/top-navigation.ts
new file mode 100644
index 0000000000..e6a4fd54de
--- /dev/null
+++ b/style-dictionary/core-open-source/contexts/top-navigation.ts
@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const tokens: StyleDictionary.ColorsDictionary = {
+  colorBackgroundContainerContent: { light: '#ffffff', dark: '#161d26' },
+  colorBorderDividerDefault: { light: '#c6c6cd', dark: '#424650' },
+  colorTextTopNavigationTitle: { light: '#1b232d', dark: '#f3f3f7' },
+  colorTextInteractiveDefault: { light: '#1b232d', dark: '#f3f3f7' },
+  colorTextInteractiveHover: { light: '#1b232d', dark: '#f9f9fb' },
+  colorTextInteractiveActive: { light: '#06080a', dark: '#f6f6f9' },
+  colorTextAccent: { light: '#06080a', dark: '#f6f6f9' },
+  colorTextDropdownItemDefault: { light: '#06080a', dark: '#f6f6f9' },
+  colorTextDropdownItemHighlighted: { light: '#06080a', dark: '#f6f6f9' },
+  colorTextDropdown: { light: '#06080a', dark: '#f6f6f9' },
+  colorTextGroupLabel: { light: '#424650', dark: '#c6c6cd' },
+  colorBackgroundDropdownItemDefault: { light: '#ffffff', dark: '#1b232d' },
+  colorBackgroundDropdownItemHover: { light: '#f3f3f7', dark: '#131920' },
+  colorBorderDropdownContainer: { light: '#b4b4bb', dark: '#656871' },
+  colorTextBodyDefault: { light: '#06080a', dark: '#f6f6f9' },
+  colorBackgroundInputDefault: { light: '#ffffff', dark: '#1b232d' },
+  colorBorderInputDefault: { light: '#b4b4bb', dark: '#656871' },
+  colorTextInputDefault: { light: '#06080a', dark: '#f6f6f9' },
+  colorTextInputPlaceholder: { light: '#656871', dark: '#8c8c94' },
+  colorBorderDropdownItemDefault: { light: '#e8e8e8', dark: '#424650' },
+  colorTextDropdownItemSecondary: { light: '#424650', dark: '#c6c6cd' },
+  colorItemSelected: { light: '#06080a', dark: '#f6f6f9' },
+  colorBackgroundDropdownItemSelected: { light: '#f6f6f9', dark: '#06080a' },
+  colorBorderItemSelected: { light: '#06080a', dark: '#f6f6f9' },
+  colorTextButtonInlineIconDefault: { light: '#1b232d', dark: '#f9f9fb' },
+  colorTextButtonInlineIconHover: { light: '#1b232d', dark: '#f9f9fb' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/core-open-source/index.ts b/style-dictionary/core-open-source/index.ts
new file mode 100644
index 0000000000..ba2dffe345
--- /dev/null
+++ b/style-dictionary/core-open-source/index.ts
@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { ThemeBuilder } from '@cloudscape-design/theming-build';
+
+import { buildCoreOpenSource } from '../core/index.js';
+import {
+  createAlertContext,
+  createFlashbarContext,
+  createHeaderContext,
+  createTopNavigationContext,
+} from '../utils/contexts.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { createColorMode, createDensityMode, createMotionMode } from '../utils/modes.js';
+
+const modes = [
+  createColorMode('.awsui-dark-mode'),
+  createDensityMode('.awsui-compact-mode'),
+  createMotionMode('.awsui-motion-disabled'),
+];
+
+const overrides: Array<StyleDictionary.CategoryModule> = [
+  await import('./colors.js'),
+  await import('./typography.js'),
+  await import('./borders.js'),
+  await import('./spacing.js'),
+  await import('./sizes.js'),
+];
+
+const builder = new ThemeBuilder('core-open-source', 'body', modes);
+
+// Layer 1: core baseline (full token set + contexts).
+await buildCoreOpenSource(builder);
+
+// Layer 2: core-open-source overrides.
+overrides.forEach(({ tokens, mode: modeId, referenceTokens }) => {
+  const mode = modes.find(m => m.id === modeId);
+  if (referenceTokens) {
+    builder.addReferenceTokens(referenceTokens, mode);
+  }
+  builder.addTokens(tokens, mode);
+});
+
+// Layer 3: context overrides.
+builder.addContext(createTopNavigationContext((await import('./contexts/top-navigation.js')).tokens));
+builder.addContext(createHeaderContext((await import('./contexts/header.js')).tokens));
+builder.addContext(createFlashbarContext((await import('./contexts/flashbar.js')).tokens));
+builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens));
+
+const theme = builder.build();
+export default theme;
diff --git a/style-dictionary/core-open-source/sizes.ts b/style-dictionary/core-open-source/sizes.ts
new file mode 100644
index 0000000000..9a3af6053c
--- /dev/null
+++ b/style-dictionary/core-open-source/sizes.ts
@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandDensityDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.SizesDictionary = {
+  sizeVerticalInput: { comfortable: '30px', compact: '26px' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'density';
diff --git a/style-dictionary/core-open-source/spacing.ts b/style-dictionary/core-open-source/spacing.ts
new file mode 100644
index 0000000000..6d8de3c322
--- /dev/null
+++ b/style-dictionary/core-open-source/spacing.ts
@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandDensityDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.SpacingDictionary = {
+  spaceAlertVertical: '4px',
+  spaceButtonHorizontal: '12px',
+  spaceTabsVertical: '2px',
+  spaceTokenVertical: '2px',
+  spaceFieldVertical: { comfortable: '4px', compact: '2px' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'density';
diff --git a/style-dictionary/core-open-source/typography.ts b/style-dictionary/core-open-source/typography.ts
new file mode 100644
index 0000000000..55c154e029
--- /dev/null
+++ b/style-dictionary/core-open-source/typography.ts
@@ -0,0 +1,31 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../utils/interfaces.js';
+
+export const tokens: StyleDictionary.TypographyDictionary = {
+  fontFamilyBase: "'Noto Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+
+  fontSizeHeadingXl: '24px',
+  lineHeightHeadingXl: '30px',
+  fontWeightHeadingXl: '600',
+
+  fontSizeHeadingL: '20px',
+  lineHeightHeadingL: '24px',
+  fontWeightHeadingL: '600',
+
+  fontSizeHeadingM: '18px',
+  lineHeightHeadingM: '22px',
+  fontWeightHeadingM: '600',
+
+  fontSizeHeadingS: '16px',
+  lineHeightHeadingS: '20px',
+  fontWeightHeadingS: '600',
+
+  fontSizeHeadingXs: '14px',
+  lineHeightHeadingXs: '20px',
+  fontWeightHeadingXs: '600',
+
+  fontWeightButton: '600',
+  fontWeightTabs: '600',
+  fontSizeTabs: '16px',
+};
diff --git a/style-dictionary/core/color-palette.ts b/style-dictionary/core/color-palette.ts
index ab95af3dea..8c9a1dd39a 100644
--- a/style-dictionary/core/color-palette.ts
+++ b/style-dictionary/core/color-palette.ts
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 import { expandColorDictionary } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
-import { referenceTokens as vrReferenceTokens } from '../visual-refresh/color-palette.js';
 
 const paletteTokens: StyleDictionary.ColorPaletteDictionary = {
   colorGrey50: '#fcfcfd',
@@ -258,5 +257,4 @@ const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColor
 export const mode: StyleDictionary.ModeIdentifier = 'color';
 
 export { expandedTokens as tokens };
-export { vrReferenceTokens as referenceTokens };
 export { paletteTokens };
diff --git a/style-dictionary/core/index.ts b/style-dictionary/core/index.ts
index 3d0a451658..3e17665562 100644
--- a/style-dictionary/core/index.ts
+++ b/style-dictionary/core/index.ts
@@ -34,11 +34,16 @@ const tokenCategories: Array<StyleDictionary.CategoryModule> = [
   await import('../visual-refresh/shadows.js'),
 ];
 
-async function buildCoreOpenSource(builder: ThemeBuilder) {
-  tokenCategories.forEach(({ tokens, mode: modeId, referenceTokens }) => {
+export async function buildCoreOpenSource(builder: ThemeBuilder) {
+  // Reference tokens come from visual-refresh (semantic color mapping: primary=blue, neutral=grey, etc.)
+  const { referenceTokens } = await import('../visual-refresh/color-palette.js');
+  const colorMode = modes.find(mode => mode.id === 'color');
+  builder.addReferenceTokens(referenceTokens, colorMode);
+
+  tokenCategories.forEach(({ tokens, mode: modeId, referenceTokens: catRefTokens }) => {
     const mode = modes.find(mode => mode.id === modeId);
-    if (referenceTokens) {
-      builder.addReferenceTokens(referenceTokens, mode);
+    if (catRefTokens) {
+      builder.addReferenceTokens(catRefTokens, mode);
     }
     builder.addTokens(tokens, mode);
   });
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 4b68611181..5a85cb0cf7 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -718,6 +718,7 @@ export type ColorsTokenName =
   | 'colorTextCounter'
   | 'colorTextDisabled'
   | 'colorTextDisabledInlineEdit'
+  | 'colorTextDropdown'
   | 'colorTextDropdownFooter'
   | 'colorTextDropdownGroupLabel'
   | 'colorTextDropdownItemDefault'
@@ -746,6 +747,7 @@ export type ColorsTokenName =
   | 'colorBackgroundStatusIndicatorSuccess'
   | 'colorBackgroundStatusIndicatorInfo'
   | 'colorBackgroundStatusIndicatorNeutral'
+  | 'colorTextInputDefault'
   | 'colorTextInputDisabled'
   | 'colorTextInputPlaceholder'
   | 'colorTextInputPlaceholderDisabled'
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index bda2b1ebd8..1f067c0ba5 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -241,6 +241,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextDisabledInlineEdit: { light: '{colorNeutral650}', dark: '{colorNeutral400}' },
   colorTextDropdownFooter: '{colorTextFormSecondary}',
   colorTextDropdownGroupLabel: '{colorTextGroupLabel}',
+  colorTextDropdown: '{colorTextDropdownItemDefault}',
   colorTextDropdownItemDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' },
   colorTextDropdownItemDimmed: '{colorTextInteractiveDisabled}',
   colorTextDropdownItemDisabled: '{colorTextInteractiveDisabled}',
@@ -264,6 +265,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextIconCaret: { light: '{colorNeutral500}', dark: '{colorNeutral450}' },
   colorTextIconSubtle: { light: '{colorNeutral600}', dark: '{colorNeutral400}' },
   colorTextInputDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
+  colorTextInputDefault: '{colorTextFormDefault}',
   colorTextInputPlaceholder: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
   colorTextInputPlaceholderDisabled: '{colorTextInputDisabled}',
   colorTextInteractiveActive: { light: '{colorNeutral950}', dark: '{colorNeutral100}' },