chore: Integrate one-theme styles

style-dictionary/core/color-palette.ts

@@ -26,6 +26,26 @@ const paletteTokens: StyleDictionary.ColorPaletteDictionary = {
   colorGrey950: '#0f141a',
   colorGrey1000: '#06080a',
 
+  colorNeutralGrey50: '#fcfcfc',
+  colorNeutralGrey100: '#f9f9f9',
+  colorNeutralGrey150: '#f8f8f8',
+  colorNeutralGrey200: '#f5f5f5',
+  colorNeutralGrey250: '#ededed',
+  colorNeutralGrey300: '#e1e1e1',
+  colorNeutralGrey350: '#c9c9c9',
+  colorNeutralGrey400: '#b7b7b7',
+  colorNeutralGrey450: '#a9a9a9',
+  colorNeutralGrey500: '#909090',
+  colorNeutralGrey600: '#6b6b6b',
+  colorNeutralGrey650: '#494949',
+  colorNeutralGrey700: '#3b3b3b',
+  colorNeutralGrey750: '#2d2d2d',
+  colorNeutralGrey800: '#242424',
+  colorNeutralGrey850: '#1e1e1e',
+  colorNeutralGrey900: '#1a1a1a',
+  colorNeutralGrey950: '#151515',
+  colorNeutralGrey1000: '#080808',
+
   colorLime50: '#f7ffeb',
   colorLime100: '#ebffcc',
   colorLime200: '#d1ff8a',

style-dictionary/one-theme/borders.ts

@@ -0,0 +1,37 @@
+// 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 = {
+  // ── Border widths ─────────────────────────────────────────────────────────
+  borderWidthButton: '1px',
+  borderWidthToken: '1px',
+  borderWidthAlert: '0px',
+  borderItemWidth: '1px',
+  borderWidthAlertInlineStart: '2px',
+  borderWidthItemSelected: '1px',
+  borderWidthCardSelected: '1px',
+
+  // ── Icon stroke widths ────────────────────────────────────────────────────
+  borderWidthIconSmall: '1.5px',
+  borderWidthIconNormal: '1.5px',
+  borderWidthIconMedium: '1.75px',
+  borderWidthIconBig: '2px',
+  borderWidthIconLarge: '2.5px',
+
+  // ── Border radii ──────────────────────────────────────────────────────────
+  borderRadiusAlert: '2px',
+  borderRadiusBadge: '16px',
+  borderRadiusButton: '2px',
+  borderRadiusContainer: '4px',
+  borderRadiusDropdown: '2px',
+  borderRadiusDropzone: '4px',
+  borderRadiusFlashbar: '2px',
+  borderRadiusItem: '2px',
+  borderRadiusInput: '2px',
+  borderRadiusPopover: '4px',
+  borderRadiusTabsFocusRing: '4px',
+  borderRadiusToken: '2px',
+  borderRadiusTutorialPanelItem: '4px',
+  borderRadiusStatusIndicator: '2px',
+};

style-dictionary/one-theme/color-palette.ts

@@ -0,0 +1,161 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import pick from 'lodash/pick.js';
+
+import { ReferenceTokens } from '@cloudscape-design/theming-build';
+
+import { paletteTokens as brand } from '../core/color-palette.js';
+import { expandColorDictionary, expandReferenceTokens } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+/**
+ * @deprecated These color palette tokens are deprecated and may be removed in a future version.
+ * Use semantic reference tokens instead:
+ * - colorNeutralGrey* → colorNeutral*
+ * - colorIndigo* → colorPrimary* or colorInfo*
+ * - colorRed* → colorError*
+ * - colorGreen* → colorSuccess*
+ * - colorYellow* → colorWarning*
+ *
+ * Reference tokens provide better semantic meaning and consistency across themes.
+ */
+const tokens: StyleDictionary.ColorPaletteDictionary = {
+  ...pick(brand, [
+    'colorNeutralGrey50',
+    'colorNeutralGrey100',
+    'colorNeutralGrey150',
+    'colorNeutralGrey200',
+    'colorNeutralGrey250',
+    'colorNeutralGrey300',
+    'colorNeutralGrey350',
+    'colorNeutralGrey400',
+    'colorNeutralGrey450',
+    'colorNeutralGrey500',
+    'colorNeutralGrey600',
+    'colorNeutralGrey650',
+    'colorNeutralGrey700',
+    'colorNeutralGrey750',
+    'colorNeutralGrey800',
+    'colorNeutralGrey850',
+    'colorNeutralGrey900',
+    'colorNeutralGrey950',
+    'colorNeutralGrey1000',
+    'colorIndigo50',
+    'colorIndigo100',
+    'colorIndigo200',
+    'colorIndigo300',
+    'colorIndigo400',
+    'colorIndigo500',
+    'colorIndigo600',
+    'colorIndigo700',
+    'colorIndigo800',
+    'colorIndigo900',
+    'colorIndigo1000',
+    'colorGreen50',
+    'colorGreen200',
+    'colorGreen500',
+    'colorGreen600',
+    'colorGreen700',
+    'colorGreen900',
+    'colorGreen1000',
+    'colorRed50',
+    'colorRed400',
+    'colorRed600',
+    'colorRed900',
+    'colorRed1000',
+    'colorYellow50',
+    'colorYellow300',
+    'colorYellow400',
+    'colorYellow500',
+    'colorYellow800',
+    'colorYellow900',
+    'colorYellow1000',
+    'colorPurple400',
+    'colorPurple700',
+    'colorAmber400',
+    'colorAmber500',
+    'colorAwsSquidInk',
+    'colorTransparent',
+    'colorBlack',
+    'colorWhite',
+  ]),
+};
+
+// Reference tokens for visual-refresh theme
+const referenceTokens: ReferenceTokens = {
+  color: {
+    primary: {
+      50: brand.colorIndigo50,
+      100: brand.colorIndigo100,
+      200: brand.colorIndigo200,
+      300: brand.colorIndigo300,
+      400: brand.colorIndigo400,
+      500: brand.colorIndigo500,
+      600: brand.colorIndigo600, // a11y
+      700: brand.colorIndigo700,
+      800: brand.colorIndigo800,
+      900: brand.colorIndigo900,
+      1000: brand.colorIndigo1000,
+    },
+    neutral: {
+      50: brand.colorNeutralGrey50,
+      100: brand.colorNeutralGrey100,
+      150: brand.colorNeutralGrey150,
+      200: brand.colorNeutralGrey200,
+      250: brand.colorNeutralGrey250,
+      300: brand.colorNeutralGrey300,
+      350: brand.colorNeutralGrey350,
+      400: brand.colorNeutralGrey400,
+      450: brand.colorNeutralGrey450,
+      500: brand.colorNeutralGrey500, // a11y
+      600: brand.colorNeutralGrey600,
+      650: brand.colorNeutralGrey650,
+      700: brand.colorNeutralGrey700,
+      750: brand.colorNeutralGrey750,
+      800: brand.colorNeutralGrey800,
+      850: brand.colorNeutralGrey850,
+      900: brand.colorNeutralGrey900,
+      950: brand.colorNeutralGrey950,
+      1000: brand.colorNeutralGrey1000,
+    },
+    error: {
+      50: brand.colorRed50,
+      300: brand.colorRed300,
+      400: brand.colorRed400,
+      600: brand.colorRed600,
+      900: brand.colorRed900,
+      1000: brand.colorRed1000,
+    },
+    success: {
+      50: brand.colorGreen50,
+      200: brand.colorGreen200,
+      500: brand.colorGreen500,
+      600: brand.colorGreen600,
+      700: brand.colorGreen700,
+      1000: brand.colorGreen1000,
+    },
+    warning: {
+      50: brand.colorYellow50,
+      300: brand.colorYellow300,
+      400: brand.colorYellow400,
+      500: brand.colorYellow500,
+      800: brand.colorYellow800,
+      900: brand.colorYellow900,
+      1000: brand.colorYellow1000,
+    },
+    info: {
+      50: brand.colorIndigo50,
+      300: brand.colorIndigo300,
+      400: brand.colorIndigo400,
+      600: brand.colorIndigo600,
+      1000: brand.colorIndigo1000,
+    },
+  },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+const expandedReferenceTokens: ReferenceTokens = expandReferenceTokens(referenceTokens);
+
+export const mode: StyleDictionary.ModeIdentifier = 'color';
+export { expandedTokens as tokens };
+export { expandedReferenceTokens as referenceTokens };

style-dictionary/one-theme/colors.ts

@@ -3,9 +3,114 @@
 import { expandColorDictionary } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
 
-// Anything not listed here falls back to the visual-refresh value via ThemeBuilder.addTokens in ./index.ts.
+// One Theme color overrides on top of the visual-refresh baseline.
+// Tokens not listed here fall back to the visual-refresh value via ThemeBuilder.addTokens in ./index.ts.
 const tokens: StyleDictionary.ColorsDictionary = {
-  colorBackgroundButtonPrimaryDefault: '{colorBlack}',
+  // ── Body text ─────────────────────────────────────────────────────────────
+  colorTextBodyDefault: { light: '{colorNeutralGrey950}', dark: '{colorNeutralGrey350}' },
+  colorTextBodySecondary: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey450}' },
+
+  // ── Container / layout ────────────────────────────────────────────────────
+  colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorNeutralGrey950}' },
+  colorBackgroundContainerHeader: { light: '{colorWhite}', dark: '{colorNeutralGrey950}' },
+  colorBackgroundContainerContent: { light: '{colorWhite}', dark: '{colorNeutralGrey950}' },
+  colorBorderDividerDefault: { light: '{colorNeutralGrey350}', dark: '{colorNeutralGrey750}' },
+  colorBorderDividerSecondary: { light: '{colorNeutralGrey250}', dark: '{colorNeutralGrey800}' },
+  colorBorderLayout: { light: '{colorNeutralGrey350}', dark: '{colorNeutralGrey750}' },
+
+  // ── Normal button ─────────────────────────────────────────────────────────
+  colorBorderButtonNormalDefault: { light: '{colorNeutralGrey650}', dark: '{colorNeutralGrey700}' },
+  colorBorderButtonNormalHover: { light: '{colorNeutralGrey650}', dark: '{colorNeutralGrey650}' },
+  colorBorderButtonNormalActive: { light: '{colorNeutralGrey650}', dark: '{colorNeutralGrey600}' },
+  colorBackgroundButtonNormalDefault: { light: '{colorWhite}', dark: '{colorNeutralGrey850}' },
+  colorBackgroundButtonNormalHover: { light: '{colorNeutralGrey150}', dark: '{colorNeutralGrey800}' },
+  colorBackgroundButtonNormalActive: { light: '{colorNeutralGrey250}', dark: '{colorNeutralGrey850}' },
+  colorTextButtonNormalDefault: { light: '{colorNeutralGrey700}', dark: '{colorNeutralGrey350}' },
+  colorTextButtonNormalHover: { light: '{colorNeutralGrey700}', dark: '{colorNeutralGrey250}' },
+  colorTextButtonNormalActive: { light: '{colorNeutralGrey700}', dark: '{colorNeutralGrey300}' },
+
+  // ── Primary button ────────────────────────────────────────────────────────
+  colorBackgroundButtonPrimaryDefault: { light: '{colorNeutralGrey800}', dark: '{colorNeutralGrey300}' },
+  colorBackgroundButtonPrimaryHover: { light: '{colorNeutralGrey700}', dark: '{colorNeutralGrey200}' },
+  colorBackgroundButtonPrimaryActive: { light: '{colorNeutralGrey800}', dark: '{colorNeutralGrey300}' },
+  colorTextButtonPrimaryDefault: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey950}' },
+  colorTextButtonPrimaryHover: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey950}' },
+  colorTextButtonPrimaryActive: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey950}' },
+
+  // ── Link button ───────────────────────────────────────────────────────────
+  colorBackgroundButtonLinkDefault: { light: '{colorNeutralGrey150}', dark: '{colorNeutralGrey750}' },
+  colorBackgroundButtonLinkHover: { light: '{colorNeutralGrey250}', dark: '{colorNeutralGrey650}' },
+  colorBackgroundButtonLinkActive: { light: '{colorNeutralGrey250}', dark: '{colorNeutralGrey900}' },
+  colorTextLinkButtonNormalDefault: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+
+  // ── Toggle button ─────────────────────────────────────────────────────────
+  colorBackgroundToggleButtonNormalPressed: { light: '{colorWhite}', dark: '{colorNeutralGrey850}' },
+  colorBorderToggleButtonNormalPressed: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorTextToggleButtonNormalPressed: { light: '{colorNeutralGrey900}', dark: '{colorWhite}' },
+
+  // ── Input / form ──────────────────────────────────────────────────────────
+  colorBackgroundInputDefault: { light: '{colorWhite}', dark: '{colorNeutralGrey950}' },
+  colorBackgroundInputDisabled: { light: '{colorNeutralGrey250}', dark: '{colorNeutralGrey800}' },
+  colorBorderInputDefault: { light: '{colorNeutralGrey400}', dark: '{colorNeutralGrey600}' },
+  colorTextFormLabel: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey300}' },
+  colorTextFormSecondary: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey500}' },
+  colorTextLabel: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey500}' },
+  colorTextKeyValuePairsValue: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey300}' },
+
+  // ── Controls ──────────────────────────────────────────────────────────────
+  colorBackgroundControlChecked: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+
+  // ── Links ─────────────────────────────────────────────────────────────────
+  colorTextLinkDefault: { light: '{colorNeutralGrey950}', dark: '{colorNeutralGrey350}' },
+  colorTextLinkHover: { light: '{colorNeutralGrey650}', dark: '{colorNeutralGrey200}' },
+  colorTextLinkSecondaryDefault: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey450}' },
+  colorTextLinkInfoDefault: { light: '{colorIndigo600}', dark: '{colorIndigo400}' },
+  colorTextLinkInfoHover: { light: '{colorIndigo800}', dark: '{colorIndigo300}' },
+  colorTextAccent: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorTextLinkDecorationDefault: { light: '{colorNeutralGrey650}', dark: '{colorNeutralGrey600}' },
+
+  // ── Selection / focus ─────────────────────────────────────────────────────
+  colorBorderItemFocused: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorBorderItemSelected: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorBackgroundItemSelected: { light: '{colorNeutralGrey150}', dark: '{colorNeutralGrey1000}' },
+  colorBackgroundLayoutToggleSelectedDefault: { light: '{colorNeutralGrey800}', dark: '{colorNeutralGrey100}' },
+  colorBackgroundLayoutToggleSelectedHover: { light: '{colorNeutralGrey800}', dark: '{colorNeutralGrey100}' },
+  colorBackgroundLayoutToggleSelectedActive: { light: '{colorNeutralGrey800}', dark: '{colorNeutralGrey100}' },
+
+  // ── Segmented control ─────────────────────────────────────────────────────
+  colorBackgroundSegmentActive: { light: '{colorNeutralGrey800}', dark: '{colorNeutralGrey300}' },
+  colorBackgroundSegmentDefault: { light: 'transparent', dark: 'transparent' },
+
+  // ── Slider / progress ─────────────────────────────────────────────────────
+  colorBackgroundSliderRangeDefault: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorBackgroundSliderHandleDefault: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorBackgroundProgressBarValueDefault: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+
+  // ── Notifications ─────────────────────────────────────────────────────────
+  colorBackgroundNotificationGreen: { light: '{colorSuccess700}', dark: '{colorSuccess700}' },
+  colorBackgroundNotificationBlue: { light: '{colorIndigo800}', dark: '{colorIndigo800}' },
+  colorTextNotificationDefault: { light: '{colorWhite}', dark: '{colorWhite}' },
+
+  // ── Status text ───────────────────────────────────────────────────────────
+  colorTextStatusInfo: { light: '{colorIndigo600}', dark: '{colorIndigo300}' },
+  colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess200}' },
+  colorTextStatusWarning: { light: '{colorWarning800}', dark: '{colorWarning300}' },
+  colorTextStatusError: { light: '{colorError600}', dark: '{colorError300}' },
+  colorTextStatusInactive: { light: '{colorNeutralGrey650}', dark: '{colorNeutralGrey450}' },
+
+  // ── Dropdown filter match ─────────────────────────────────────────────────
+  colorTextDropdownItemFilterMatch: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorBackgroundDropdownItemFilterMatch: { light: '{colorNeutralGrey200}', dark: '{colorNeutralGrey1000}' },
+
+  // ── Status indicator backgrounds (alpha values — no palette token available) ──
+  colorBackgroundStatusIndicatorInfo: { light: '#5c7fff10', dark: '#5c7fff20' },
+  colorBackgroundStatusIndicatorWarning: { light: '#fbd33210', dark: '#fbd33220' },
+  colorBackgroundStatusIndicatorSuccess: { light: '#2bb53410', dark: '#2bb53420' },
+  colorBackgroundStatusIndicatorError: { light: '#ff7a7a10', dark: '#ff7a7a20' },
+  colorBackgroundStatusIndicatorNeutral: { light: '{colorNeutralGrey250}', dark: '{colorNeutralGrey800}' },
+
+  // ── Breadcrumb ────────────────────────────────────────────────────────────
+  colorTextBreadcrumbCurrent: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey500}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);

style-dictionary/one-theme/contexts/alert.ts

@@ -0,0 +1,22 @@
+// 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';
+
+const tokens: StyleDictionary.ColorsDictionary = {
+  colorBackgroundStatusInfo: { light: '#5c7fff20', dark: '#161a2d' },
+  colorBackgroundStatusWarning: { light: '#fbd33220', dark: '#fbd33210' },
+  colorBackgroundStatusError: { light: '#ff7a7a10', dark: '#ff7a7a10' },
+  colorBackgroundStatusSuccess: { light: '#7ae50020', dark: '#2bb53410' },
+  colorTextStatusInfo: { light: '#0033cc', dark: '#7598ff' },
+  colorBorderStatusInfo: { light: '#0033cc', dark: '#7598ff' },
+  colorTextStatusSuccess: { light: '#00802f', dark: '#aeffa8' },
+  colorBorderStatusSuccess: { light: '#00802f', dark: '#aeffa8' },
+  colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens));
+
+export { expandedTokens as tokens };

style-dictionary/one-theme/contexts/app-layout-toolbar.ts

@@ -0,0 +1,14 @@
+// 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';
+
+const tokens: StyleDictionary.ColorsDictionary = {
+  colorBackgroundLayoutMain: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey1000}' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens));
+
+export { expandedTokens as tokens };