chore: Add one-theme theme

build-tools/utils/themes.js

@@ -13,7 +13,7 @@ const themes = [
     designTokensPackageJson: { name: '@cloudscape-design/design-tokens' },
     outputPath: path.join(workspace.targetPath, 'components'),
     primaryThemePath: './classic/index.js',
-    secondaryThemePaths: ['./visual-refresh-secondary/index.js'],
+    secondaryThemePaths: ['./visual-refresh-secondary/index.js', './one-theme-secondary/index.js'],
   },
 ];
 

pages/app/app-context.tsx

@@ -14,6 +14,7 @@ interface AppUrlParams {
   visualRefresh: boolean;
   motionDisabled: boolean;
   appLayoutWidget: boolean;
+  oneTheme: boolean;
   mode?: Mode;
 }
 
@@ -34,6 +35,7 @@ const appContextDefaults: AppContextType = {
     visualRefresh: THEME === 'default',
     motionDisabled: false,
     appLayoutWidget: false,
+    oneTheme: false,
   },
   setMode: () => {},
   setUrlParams: () => {},

pages/app/components/theme-switcher.tsx

@@ -9,31 +9,46 @@ import SpaceBetween from '~components/space-between';
 
 import AppContext from '../app-context';
 
+type ThemeOption = 'classic' | 'visual-refresh' | 'one-theme';
+
 export default function ThemeSwitcher() {
   const { mode, urlParams, setUrlParams, setMode } = useContext(AppContext);
 
-  const vrSwitchProps: React.InputHTMLAttributes<HTMLInputElement> = {
-    id: 'visual-refresh-toggle',
-    type: 'checkbox',
+  const currentTheme: ThemeOption = urlParams.oneTheme
+    ? 'one-theme'
+    : urlParams.visualRefresh
+      ? 'visual-refresh'
+      : 'classic';
+
+  const setTheme = (next: ThemeOption) => {
+    setUrlParams({
+      visualRefresh: next === 'visual-refresh' || !!ALWAYS_VISUAL_REFRESH,
+      oneTheme: next === 'one-theme',
+    });
+    window.location.reload();
   };
 
-  if (ALWAYS_VISUAL_REFRESH) {
-    vrSwitchProps.checked = true;
-    vrSwitchProps.readOnly = true;
-  } else {
-    vrSwitchProps.checked = urlParams.visualRefresh;
-    vrSwitchProps.onChange = event => {
-      setUrlParams({ visualRefresh: event.target.checked });
-      window.location.reload();
-    };
-  }
+  const themeOptions: Array<{ value: ThemeOption; label: string; id: string; disabled?: boolean }> = [
+    { value: 'classic', label: 'Classic', id: 'classic-toggle', disabled: !!ALWAYS_VISUAL_REFRESH },
+    { value: 'visual-refresh', label: 'Visual refresh', id: 'visual-refresh-toggle' },
+    { value: 'one-theme', label: 'One theme', id: 'one-theme-toggle' },
+  ];
 
   return (
     <SpaceBetween direction="horizontal" size="xs">
-      <label>
-        <input {...vrSwitchProps} />
-        Visual refresh
-      </label>
+      {themeOptions.map(option => (
+        <label key={option.value}>
+          <input
+            id={option.id}
+            type="radio"
+            name="theme"
+            checked={currentTheme === option.value}
+            disabled={option.disabled}
+            onChange={() => setTheme(option.value)}
+          />
+          {option.label}
+        </label>
+      ))}
       <label>
         <input
           id="mode-toggle"

pages/app/index.tsx

@@ -95,7 +95,7 @@ function App() {
 }
 
 const history = createHashHistory();
-const { direction, visualRefresh, appLayoutWidget, appLayoutToolbar, appLayoutDelayedWidget } = parseQuery(
+const { direction, visualRefresh, appLayoutWidget, appLayoutToolbar, appLayoutDelayedWidget, oneTheme } = parseQuery(
   history.location.search
 );
 
@@ -114,6 +114,10 @@ window[awsuiCustomFlagsSymbol].appLayoutDelayedWidget = appLayoutDelayedWidget;
 // Apply the direction value to the HTML element dir attribute
 document.documentElement.setAttribute('dir', direction);
 
+if (oneTheme) {
+  document.body.classList.add('awsui-one-theme');
+}
+
 // Apply Safari-specific class to hide flaky scrollbars in tests
 const lowerCaseUserAgent = navigator.userAgent.toLowerCase();
 const isSafari = lowerCaseUserAgent.indexOf('safari') > -1 && lowerCaseUserAgent.indexOf('chrome') === -1;

style-dictionary/one-theme-secondary/index.ts

@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ThemeBuilder } from '@cloudscape-design/theming-build';
+
+import { buildVisualRefresh } from '../one-theme/index.js';
+import { createColorMode, createDensityMode, createMotionMode } from '../utils/modes.js';
+
+const modes = [
+  createColorMode('.awsui-dark-mode'),
+  createDensityMode('.awsui-compact-mode'),
+  createMotionMode('.awsui-motion-disabled'),
+];
+
+const builder = new ThemeBuilder('one-theme', '.awsui-one-theme', modes);
+const theme = buildVisualRefresh(builder);
+
+export default theme;

style-dictionary/one-theme/borders.ts

@@ -0,0 +1,74 @@
+// 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 = {
+  borderActiveWidth: '4px',
+  borderCodeEditorStatusDividerWidth: '{borderDividerSectionWidth}',
+  borderContainerStickyWidth: '0px',
+  borderContainerTopWidth: '0px',
+  borderControlFocusRingShadowSpread: '1px',
+  borderControlInvalidFocusRingShadowSpread: '2px',
+  borderDividerListWidth: '1px',
+  borderDividerSectionWidth: '1px',
+  borderDropdownVirtualOffsetWidth: '2px',
+  borderInvalidWidth: '8px',
+  borderItemWidth: '2px',
+  borderLineChartDashArray: '3 5',
+  borderLineChartLineJoin: 'round',
+  borderLineChartWidth: '2px',
+  borderPanelHeaderWidth: '1px',
+  borderPanelTopWidth: '1px',
+  borderRadiusAlert: '{borderRadiusFlashbar}',
+  borderRadiusBadge: '4px',
+  borderRadiusButton: '8px',
+  borderRadiusCalendarDayFocusRing: '3px',
+  borderRadiusCodeEditor: '{borderRadiusInput}',
+  borderRadiusCardDefault: '{borderRadiusContainer}',
+  borderRadiusCardEmbedded: '{borderRadiusChatBubble}',
+  borderRadiusItemCardDefault: '{borderRadiusCardDefault}',
+  borderRadiusItemCardEmbedded: '{borderRadiusCardEmbedded}',
+  borderRadiusContainer: '16px',
+  borderRadiusControlCircularFocusRing: '4px',
+  borderRadiusControlDefaultFocusRing: '4px',
+  borderRadiusDropdown: '{borderRadiusItem}',
+  borderRadiusDropzone: '12px',
+  borderRadiusFlashbar: '12px',
+  borderRadiusItem: '8px',
+  borderRadiusInput: '8px',
+  borderRadiusPopover: '{borderRadiusInput}',
+  borderRadiusTabsFocusRing: '20px',
+  borderRadiusTiles: '{borderRadiusInput}',
+  borderRadiusToken: '{borderRadiusInput}',
+  borderRadiusChatBubble: '8px',
+  borderRadiusTutorialPanelItem: '{borderRadiusInput}',
+  borderTableStickyWidth: '1px',
+  borderLinkFocusRingOutline: '0',
+  borderLinkFocusRingShadowSpread: '2px',
+  borderWidthCard: '{borderDividerSectionWidth}',
+  borderWidthCardSelected: '{borderItemWidth}',
+  borderWidthItemCard: '{borderWidthCard}',
+  borderWidthItemCardHighlighted: '{borderWidthCardSelected}',
+  borderWidthItemSelected: '2px',
+  borderWidthAlert: '2px',
+  borderWidthAlertBlockStart: '{borderWidthAlert}',
+  borderWidthAlertBlockEnd: '{borderWidthAlert}',
+  borderWidthAlertInlineStart: '{borderWidthAlert}',
+  borderWidthAlertInlineEnd: '{borderWidthAlert}',
+  borderWidthButton: '2px',
+  borderWidthDropdown: '2px',
+  borderWidthField: '1px',
+  borderWidthPopover: '2px',
+  borderWidthToken: '2px',
+  borderWidthIconSmall: '2px',
+  borderWidthIconNormal: '2px',
+  borderWidthIconMedium: '2px',
+  borderWidthIconBig: '3px',
+  borderWidthIconLarge: '4px',
+  borderRadiusActionCardDefault: '{borderRadiusCardDefault}',
+  borderRadiusActionCardEmbedded: '{borderRadiusCardEmbedded}',
+  borderWidthActionCardDefault: '{borderWidthCard}',
+  borderWidthActionCardHover: '{borderWidthCard}',
+  borderWidthActionCardActive: '{borderWidthCard}',
+  borderWidthActionCardDisabled: '{borderWidthCard}',
+};

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

@@ -0,0 +1,167 @@
+// 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.ColorChartsDictionary = {
+  colorChartsRed300: { light: '#ea7158', dark: '#d63f38' },
+  colorChartsRed400: { light: '#dc5032', dark: '#ed5958' },
+  colorChartsRed500: { light: '#d13313', dark: '#fe6e73' },
+  colorChartsRed600: { light: '#ba2e0f', dark: '#ff8a8a' },
+  colorChartsRed700: { light: '#a82a0c', dark: '#ffa09e' },
+  colorChartsRed800: { light: '#972709', dark: '#ffb3b0' },
+  colorChartsRed900: { light: '#892407', dark: '#ffc4c0' },
+  colorChartsRed1000: { light: '#7d2105', dark: '#ffd2cf' },
+  colorChartsRed1100: { light: '#721e03', dark: '#ffe0dd' },
+  colorChartsRed1200: { light: '#671c00', dark: '#ffecea' },
+  colorChartsOrange300: { light: '#e07941', dark: '#c55305' },
+  colorChartsOrange400: { light: '#cc5f21', dark: '#de6923' },
+  colorChartsOrange500: { light: '#bc4d01', dark: '#f27c36' },
+  colorChartsOrange600: { light: '#a84401', dark: '#f89256' },
+  colorChartsOrange700: { light: '#983c02', dark: '#fca572' },
+  colorChartsOrange800: { light: '#8a3603', dark: '#ffb68b' },
+  colorChartsOrange900: { light: '#7e3103', dark: '#ffc6a4' },
+  colorChartsOrange1000: { light: '#732c02', dark: '#ffd4bb' },
+  colorChartsOrange1100: { light: '#692801', dark: '#ffe1cf' },
+  colorChartsOrange1200: { light: '#602400', dark: '#ffede2' },
+  colorChartsYellow300: { light: '#b2911c', dark: '#977001' },
+  colorChartsYellow400: { light: '#9c7b0b', dark: '#b08400' },
+  colorChartsYellow500: { light: '#8a6b05', dark: '#c59600' },
+  colorChartsYellow600: { light: '#7b5f04', dark: '#d3a61c' },
+  colorChartsYellow700: { light: '#6f5504', dark: '#dfb52c' },
+  colorChartsYellow800: { light: '#654d03', dark: '#eac33a' },
+  colorChartsYellow900: { light: '#5d4503', dark: '#f1cf65' },
+  colorChartsYellow1000: { light: '#553f03', dark: '#f7db8a' },
+  colorChartsYellow1100: { light: '#4d3901', dark: '#fce5a8' },
+  colorChartsYellow1200: { light: '#483300', dark: '#ffefc9' },
+  colorChartsGreen300: { light: '#67a353', dark: '#48851a' },
+  colorChartsGreen400: { light: '#41902c', dark: '#5a9b29' },
+  colorChartsGreen500: { light: '#1f8104', dark: '#69ae34' },
+  colorChartsGreen600: { light: '#1a7302', dark: '#7dbd4c' },
+  colorChartsGreen700: { light: '#176702', dark: '#8fca61' },
+  colorChartsGreen800: { light: '#145d02', dark: '#9fd673' },
+  colorChartsGreen900: { light: '#125502', dark: '#b2df8d' },
+  colorChartsGreen1000: { light: '#104d01', dark: '#c5e7a8' },
+  colorChartsGreen1100: { light: '#0f4601', dark: '#d5efbe' },
+  colorChartsGreen1200: { light: '#0d4000', dark: '#e4f7d5' },
+  colorChartsTeal300: { light: '#2ea597', dark: '#018977' },
+  colorChartsTeal400: { light: '#1c8e81', dark: '#009d89' },
+  colorChartsTeal500: { light: '#0d7d70', dark: '#00b09b' },
+  colorChartsTeal600: { light: '#096f64', dark: '#40bfa9' },
+  colorChartsTeal700: { light: '#06645a', dark: '#5fccb7' },
+  colorChartsTeal800: { light: '#045b52', dark: '#77d7c3' },
+  colorChartsTeal900: { light: '#03524a', dark: '#94e0d0' },
+  colorChartsTeal1000: { light: '#014b44', dark: '#ace9db' },
+  colorChartsTeal1100: { light: '#01443e', dark: '#c2f0e6' },
+  colorChartsTeal1200: { light: '#003e38', dark: '#d7f7f0' },
+  colorChartsBlue1300: { light: '#529ccb', dark: '#00819c' },
+  colorChartsBlue1400: { light: '#3184c2', dark: '#0497ba' },
+  colorChartsBlue1500: { light: '#0273bb', dark: '#08aad2' },
+  colorChartsBlue1600: { light: '#0166ab', dark: '#44b9dd' },
+  colorChartsBlue1700: { light: '#015b9d', dark: '#63c6e7' },
+  colorChartsBlue1800: { light: '#015292', dark: '#79d2f0' },
+  colorChartsBlue1900: { light: '#014a87', dark: '#98dcf5' },
+  colorChartsBlue11000: { light: '#01437d', dark: '#b3e4f8' },
+  colorChartsBlue11100: { light: '#003c75', dark: '#caedfc' },
+  colorChartsBlue11200: { light: '#00366d', dark: '#ddf4ff' },
+  colorChartsBlue2300: { light: '#688ae8', dark: '#486de8' },
+  colorChartsBlue2400: { light: '#5978e3', dark: '#6384f5' },
+  colorChartsBlue2500: { light: '#4066df', dark: '#7698fe' },
+  colorChartsBlue2600: { light: '#3759ce', dark: '#8ea9ff' },
+  colorChartsBlue2700: { light: '#314fbf', dark: '#a2b8ff' },
+  colorChartsBlue2800: { light: '#2c46b1', dark: '#b1c5ff' },
+  colorChartsBlue2900: { light: '#273ea5', dark: '#c3d1ff' },
+  colorChartsBlue21000: { light: '#23379b', dark: '#d2dcff' },
+  colorChartsBlue21100: { light: '#1f3191', dark: '#dfe6ff' },
+  colorChartsBlue21200: { light: '#1b2b88', dark: '#ecf0ff' },
+  colorChartsPurple300: { light: '#a783e1', dark: '#8d59de' },
+  colorChartsPurple400: { light: '#9469d6', dark: '#a173ea' },
+  colorChartsPurple500: { light: '#8456ce', dark: '#b088f5' },
+  colorChartsPurple600: { light: '#7749bf', dark: '#bf9bf9' },
+  colorChartsPurple700: { light: '#6b40b2', dark: '#cbabfc' },
+  colorChartsPurple800: { light: '#6237a7', dark: '#d6baff' },
+  colorChartsPurple900: { light: '#59309d', dark: '#dfc8ff' },
+  colorChartsPurple1000: { light: '#512994', dark: '#e8d5ff' },
+  colorChartsPurple1100: { light: '#4a238b', dark: '#efe2ff' },
+  colorChartsPurple1200: { light: '#431d84', dark: '#f5edff' },
+  colorChartsPink300: { light: '#da7596', dark: '#c64a70' },
+  colorChartsPink400: { light: '#ce567c', dark: '#d56889' },
+  colorChartsPink500: { light: '#c33d69', dark: '#e07f9d' },
+  colorChartsPink600: { light: '#b1325c', dark: '#eb92ad' },
+  colorChartsPink700: { light: '#a32952', dark: '#f5a2bb' },
+  colorChartsPink800: { light: '#962249', dark: '#ffb0c8' },
+  colorChartsPink900: { light: '#8b1b42', dark: '#ffc1d4' },
+  colorChartsPink1000: { light: '#81143b', dark: '#ffd1de' },
+  colorChartsPink1100: { light: '#780d35', dark: '#ffdfe8' },
+  colorChartsPink1200: { light: '#6f062f', dark: '#ffecf1' },
+  colorChartsStatusCritical: { light: '{colorChartsRed1000}', dark: '{colorChartsRed300}' },
+  colorChartsStatusHigh: { light: '{colorChartsRed600}', dark: '{colorChartsRed500}' },
+  colorChartsStatusMedium: { light: '{colorChartsOrange400}', dark: '{colorChartsOrange600}' },
+  colorChartsStatusLow: { light: '{colorChartsYellow300}', dark: '{colorChartsYellow700}' },
+  colorChartsStatusPositive: { light: '{colorChartsGreen300}', dark: '{colorChartsGreen500}' },
+  colorChartsStatusInfo: { light: '{colorChartsBlue1400}', dark: '{colorChartsBlue1500}' },
+  colorChartsStatusNeutral: '{colorNeutral500}',
+  colorChartsThresholdNegative: { light: '{colorError600}', dark: '{colorError400}' },
+  colorChartsThresholdPositive: { light: '{colorSuccess600}', dark: '{colorSuccess500}' },
+  colorChartsThresholdInfo: { light: '{colorInfo600}', dark: '{colorInfo300}' },
+  colorChartsThresholdNeutral: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
+  colorChartsLineGrid: { light: '{colorNeutral300}', dark: '{colorNeutral650}' },
+  colorChartsLineTick: { light: '{colorNeutral300}', dark: '{colorNeutral650}' },
+  colorChartsLineAxis: { light: '{colorNeutral300}', dark: '{colorNeutral650}' },
+  colorChartsPaletteCategorical1: '{colorChartsBlue2300}',
+  colorChartsPaletteCategorical2: '{colorChartsPink500}',
+  colorChartsPaletteCategorical3: '{colorChartsTeal300}',
+  colorChartsPaletteCategorical4: '{colorChartsPurple500}',
+  colorChartsPaletteCategorical5: '{colorChartsOrange300}',
+  colorChartsPaletteCategorical6: '{colorChartsBlue2600}',
+  colorChartsPaletteCategorical7: '{colorChartsPink800}',
+  colorChartsPaletteCategorical8: '{colorChartsTeal600}',
+  colorChartsPaletteCategorical9: '{colorChartsPurple800}',
+  colorChartsPaletteCategorical10: '{colorChartsOrange600}',
+  colorChartsPaletteCategorical11: '{colorChartsBlue2900}',
+  colorChartsPaletteCategorical12: '{colorChartsPink1100}',
+  colorChartsPaletteCategorical13: '{colorChartsTeal900}',
+  colorChartsPaletteCategorical14: '{colorChartsPurple1100}',
+  colorChartsPaletteCategorical15: '{colorChartsOrange900}',
+  colorChartsPaletteCategorical16: '{colorChartsBlue21200}',
+  colorChartsPaletteCategorical17: '{colorChartsPink400}',
+  colorChartsPaletteCategorical18: '{colorChartsTeal1200}',
+  colorChartsPaletteCategorical19: '{colorChartsPurple400}',
+  colorChartsPaletteCategorical20: '{colorChartsOrange1200}',
+  colorChartsPaletteCategorical21: '{colorChartsBlue2500}',
+  colorChartsPaletteCategorical22: '{colorChartsPink700}',
+  colorChartsPaletteCategorical23: '{colorChartsTeal500}',
+  colorChartsPaletteCategorical24: '{colorChartsPurple700}',
+  colorChartsPaletteCategorical25: '{colorChartsOrange500}',
+  colorChartsPaletteCategorical26: '{colorChartsBlue2800}',
+  colorChartsPaletteCategorical27: '{colorChartsPink1000}',
+  colorChartsPaletteCategorical28: '{colorChartsTeal800}',
+  colorChartsPaletteCategorical29: '{colorChartsPurple1000}',
+  colorChartsPaletteCategorical30: '{colorChartsOrange800}',
+  colorChartsPaletteCategorical31: '{colorChartsBlue21100}',
+  colorChartsPaletteCategorical32: '{colorChartsPink300}',
+  colorChartsPaletteCategorical33: '{colorChartsTeal1100}',
+  colorChartsPaletteCategorical34: '{colorChartsPurple300}',
+  colorChartsPaletteCategorical35: '{colorChartsOrange1100}',
+  colorChartsPaletteCategorical36: '{colorChartsBlue2400}',
+  colorChartsPaletteCategorical37: '{colorChartsPink600}',
+  colorChartsPaletteCategorical38: '{colorChartsTeal400}',
+  colorChartsPaletteCategorical39: '{colorChartsPurple600}',
+  colorChartsPaletteCategorical40: '{colorChartsOrange400}',
+  colorChartsPaletteCategorical41: '{colorChartsBlue2700}',
+  colorChartsPaletteCategorical42: '{colorChartsPink900}',
+  colorChartsPaletteCategorical43: '{colorChartsTeal700}',
+  colorChartsPaletteCategorical44: '{colorChartsPurple900}',
+  colorChartsPaletteCategorical45: '{colorChartsOrange700}',
+  colorChartsPaletteCategorical46: '{colorChartsBlue21000}',
+  colorChartsPaletteCategorical47: '{colorChartsPink1200}',
+  colorChartsPaletteCategorical48: '{colorChartsTeal1000}',
+  colorChartsPaletteCategorical49: '{colorChartsPurple1200}',
+  colorChartsPaletteCategorical50: '{colorChartsOrange1000}',
+  colorChartsErrorBarMarker: { light: '{colorNeutral900}', dark: '{colorWhite}' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'color';