From cceaf97e928abb900e822d50bccfa13038f5cb6e Mon Sep 17 00:00:00 2001 From: at-susie Date: Thu, 7 May 2026 14:47:02 +0200 Subject: [PATCH 1/2] chore: Add one-theme theme --- style-dictionary/one-theme/borders.ts | 74 ++ style-dictionary/one-theme/color-charts.ts | 167 +++ style-dictionary/one-theme/color-palette.ts | 151 +++ style-dictionary/one-theme/color-severity.ts | 30 + style-dictionary/one-theme/colors.ts | 333 ++++++ style-dictionary/one-theme/contexts/alert.ts | 67 ++ .../one-theme/contexts/app-layout-toolbar.ts | 14 + .../one-theme/contexts/compact-table.ts | 29 + .../one-theme/contexts/flashbar-warning.ts | 66 ++ .../one-theme/contexts/flashbar.ts | 46 + .../one-theme/contexts/header-alert.ts | 16 + style-dictionary/one-theme/contexts/header.ts | 38 + .../one-theme/contexts/top-navigation.ts | 21 + style-dictionary/one-theme/index.ts | 62 ++ style-dictionary/one-theme/metadata.ts | 5 + .../one-theme/metadata/borders.ts | 224 ++++ .../one-theme/metadata/color-charts.ts | 713 +++++++++++++ .../one-theme/metadata/color-palette.ts | 7 + .../one-theme/metadata/color-severity.ts | 66 ++ style-dictionary/one-theme/metadata/colors.ts | 995 ++++++++++++++++++ style-dictionary/one-theme/metadata/index.ts | 38 + style-dictionary/one-theme/metadata/motion.ts | 78 ++ .../one-theme/metadata/shadows.ts | 29 + style-dictionary/one-theme/metadata/sizes.ts | 14 + .../one-theme/metadata/spacing.ts | 189 ++++ .../one-theme/metadata/typography.ts | 237 +++++ style-dictionary/one-theme/motion.ts | 58 + style-dictionary/one-theme/shadows.ts | 57 + style-dictionary/one-theme/sizes.ts | 21 + style-dictionary/one-theme/spacing.ts | 135 +++ style-dictionary/one-theme/typography.ts | 64 ++ 31 files changed, 4044 insertions(+) create mode 100644 style-dictionary/one-theme/borders.ts create mode 100644 style-dictionary/one-theme/color-charts.ts create mode 100644 style-dictionary/one-theme/color-palette.ts create mode 100644 style-dictionary/one-theme/color-severity.ts create mode 100644 style-dictionary/one-theme/colors.ts create mode 100644 style-dictionary/one-theme/contexts/alert.ts create mode 100644 style-dictionary/one-theme/contexts/app-layout-toolbar.ts create mode 100644 style-dictionary/one-theme/contexts/compact-table.ts create mode 100644 style-dictionary/one-theme/contexts/flashbar-warning.ts create mode 100644 style-dictionary/one-theme/contexts/flashbar.ts create mode 100644 style-dictionary/one-theme/contexts/header-alert.ts create mode 100644 style-dictionary/one-theme/contexts/header.ts create mode 100644 style-dictionary/one-theme/contexts/top-navigation.ts create mode 100644 style-dictionary/one-theme/index.ts create mode 100644 style-dictionary/one-theme/metadata.ts create mode 100644 style-dictionary/one-theme/metadata/borders.ts create mode 100644 style-dictionary/one-theme/metadata/color-charts.ts create mode 100644 style-dictionary/one-theme/metadata/color-palette.ts create mode 100644 style-dictionary/one-theme/metadata/color-severity.ts create mode 100644 style-dictionary/one-theme/metadata/colors.ts create mode 100644 style-dictionary/one-theme/metadata/index.ts create mode 100644 style-dictionary/one-theme/metadata/motion.ts create mode 100644 style-dictionary/one-theme/metadata/shadows.ts create mode 100644 style-dictionary/one-theme/metadata/sizes.ts create mode 100644 style-dictionary/one-theme/metadata/spacing.ts create mode 100644 style-dictionary/one-theme/metadata/typography.ts create mode 100644 style-dictionary/one-theme/motion.ts create mode 100644 style-dictionary/one-theme/shadows.ts create mode 100644 style-dictionary/one-theme/sizes.ts create mode 100644 style-dictionary/one-theme/spacing.ts create mode 100644 style-dictionary/one-theme/typography.ts diff --git a/style-dictionary/one-theme/borders.ts b/style-dictionary/one-theme/borders.ts new file mode 100644 index 0000000000..854c637ca0 --- /dev/null +++ b/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}', +}; diff --git a/style-dictionary/one-theme/color-charts.ts b/style-dictionary/one-theme/color-charts.ts new file mode 100644 index 0000000000..b57f3e64bf --- /dev/null +++ b/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'; diff --git a/style-dictionary/one-theme/color-palette.ts b/style-dictionary/one-theme/color-palette.ts new file mode 100644 index 0000000000..b9c75b7770 --- /dev/null +++ b/style-dictionary/one-theme/color-palette.ts @@ -0,0 +1,151 @@ +// 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: + * - colorGrey* → colorNeutral* + * - colorBlue* → 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, [ + 'colorGrey50', + 'colorGrey100', + 'colorGrey150', + 'colorGrey200', + 'colorGrey250', + 'colorGrey300', + 'colorGrey350', + 'colorGrey400', + 'colorGrey450', + 'colorGrey500', + 'colorGrey600', + 'colorGrey650', + 'colorGrey700', + 'colorGrey750', + 'colorGrey800', + 'colorGrey850', + 'colorGrey900', + 'colorGrey950', + 'colorGrey1000', + 'colorBlue50', + 'colorBlue100', + 'colorBlue200', + 'colorBlue300', + 'colorBlue400', + 'colorBlue600', + 'colorBlue700', + 'colorBlue900', + 'colorBlue1000', + 'colorGreen50', + 'colorGreen500', + 'colorGreen600', + 'colorGreen900', + 'colorGreen1000', + 'colorRed50', + 'colorRed400', + 'colorRed600', + 'colorRed900', + 'colorRed1000', + 'colorYellow50', + 'colorYellow400', + 'colorYellow500', + 'colorYellow900', + 'colorYellow1000', + 'colorPurple400', + 'colorPurple700', + 'colorAmber400', + 'colorAmber500', + 'colorAwsSquidInk', + 'colorTransparent', + 'colorBlack', + 'colorWhite', + ]), +}; + +// Reference tokens for visual-refresh theme +const referenceTokens: ReferenceTokens = { + color: { + primary: { + 50: brand.colorBlue50, + 100: brand.colorBlue100, + 200: brand.colorBlue200, + 300: brand.colorBlue300, + 400: brand.colorBlue400, + 500: brand.colorBlue500, + 600: brand.colorBlue600, // a11y + 700: brand.colorBlue700, + 800: brand.colorBlue800, + 900: brand.colorBlue900, + 1000: brand.colorBlue1000, + }, + neutral: { + 50: brand.colorGrey50, + 100: brand.colorGrey100, + 150: brand.colorGrey150, + 200: brand.colorGrey200, + 250: brand.colorGrey250, + 300: brand.colorGrey300, + 350: brand.colorGrey350, + 400: brand.colorGrey400, + 450: brand.colorGrey450, + 500: brand.colorGrey500, // a11y + 550: brand.colorGrey550, + 600: brand.colorGrey600, + 650: brand.colorGrey650, + 700: brand.colorGrey700, + 750: brand.colorGrey750, + 800: brand.colorGrey800, + 850: brand.colorGrey850, + 900: brand.colorGrey900, + 950: brand.colorGrey950, + 1000: brand.colorGrey1000, + }, + error: { + 50: brand.colorRed50, + 400: brand.colorRed400, + 600: brand.colorRed600, + 900: brand.colorRed900, + 1000: brand.colorRed1000, + }, + success: { + 50: brand.colorGreen50, + 500: brand.colorGreen500, + 600: brand.colorGreen600, + 1000: brand.colorGreen1000, + }, + warning: { + 50: brand.colorYellow50, + 400: brand.colorYellow400, + 500: brand.colorYellow500, + 900: brand.colorYellow900, + 1000: brand.colorYellow1000, + }, + info: { + 50: brand.colorBlue50, + 300: brand.colorBlue300, + 400: brand.colorBlue400, + 600: brand.colorBlue600, + 1000: brand.colorBlue1000, + }, + }, +}; + +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 }; diff --git a/style-dictionary/one-theme/color-severity.ts b/style-dictionary/one-theme/color-severity.ts new file mode 100644 index 0000000000..9d538bd812 --- /dev/null +++ b/style-dictionary/one-theme/color-severity.ts @@ -0,0 +1,30 @@ +// 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.ColorSeverityDictionary = { + // note: these should not be used directly. Instead, use the semantic tokens defined below. + colorSeverityDarkRed: { light: '#870303', dark: '#d63f38' }, + colorSeverityRed: { light: '#ce3311', dark: '#fe6e73' }, + colorSeverityOrange: { light: '#f89256', dark: '#f89256' }, + colorSeverityYellow: { light: '#f2cd54', dark: '#f2cd54' }, + colorSeverityGrey: '{colorNeutral600}', + + colorBackgroundNotificationSeverityCritical: '{colorSeverityDarkRed}', + colorBackgroundNotificationSeverityHigh: '{colorSeverityRed}', + colorBackgroundNotificationSeverityMedium: '{colorSeverityOrange}', + colorBackgroundNotificationSeverityLow: '{colorSeverityYellow}', + colorBackgroundNotificationSeverityNeutral: '{colorSeverityGrey}', + + colorTextNotificationSeverityCritical: { light: '{colorNeutral100}', dark: '{colorBlack}' }, + colorTextNotificationSeverityHigh: { light: '{colorNeutral100}', dark: '{colorNeutral950}' }, + colorTextNotificationSeverityMedium: '{colorNeutral950}', + colorTextNotificationSeverityLow: '{colorNeutral950}', + colorTextNotificationSeverityNeutral: '{colorNeutral100}', +}; + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); + +export { expandedTokens as tokens }; +export const mode: StyleDictionary.ModeIdentifier = 'color'; diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts new file mode 100644 index 0000000000..eb619bc114 --- /dev/null +++ b/style-dictionary/one-theme/colors.ts @@ -0,0 +1,333 @@ +// 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 = { + colorGreyOpaque10: 'rgba(0, 0, 0, 0.1)', + colorGreyOpaque25: 'rgba(255, 255, 255, 0.25)', + colorGreyOpaque40: 'rgba(0, 0, 0, 0.4)', + colorGreyOpaque50: 'rgba(0, 0, 0, 0.5)', + colorGreyOpaque70: { light: 'rgba(35, 43, 55, 0.7)', dark: 'rgba(15, 20, 26, 0.7)' }, + colorGreyOpaque80: 'rgba(22, 25, 31, 0.8)', + colorGreyOpaque90: 'rgba(242, 243, 243, 0.9)', + colorGreyTransparent: { light: 'rgba(15, 20, 26, 0.12)', dark: 'rgba(15, 20, 26, 1)' }, + colorGreyTransparentHeavy: { light: 'rgba(15, 20, 26, 0.12)', dark: 'rgba(15, 20, 26, 1)' }, + colorGreyTransparentLight: { light: 'rgba(15, 20, 26, 0.12)', dark: 'rgba(15, 20, 26, 1)' }, + colorBackgroundBadgeIcon: { light: '{colorError600}', dark: '{colorError400}' }, + colorBackgroundButtonLinkActive: { light: '{colorPrimary100}', dark: '{colorNeutral700}' }, + colorBackgroundButtonLinkDefault: { light: 'transparent', dark: 'transparent' }, + colorBackgroundButtonLinkDisabled: { light: 'transparent', dark: 'transparent' }, + colorBackgroundButtonLinkHover: { light: '{colorPrimary50}', dark: '{colorNeutral800}' }, + colorBackgroundButtonNormalActive: { light: '{colorPrimary100}', dark: '{colorNeutral700}' }, + colorBackgroundButtonNormalDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundButtonNormalDisabled: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundButtonNormalHover: { light: '{colorPrimary50}', dark: '{colorNeutral800}' }, + colorBackgroundToggleButtonNormalPressed: { light: '{colorPrimary100}', dark: '{colorNeutral700}' }, + colorBackgroundButtonPrimaryActive: { light: '{colorIndigo500}', dark: '{colorIndigo500}' }, + colorBackgroundButtonPrimaryDefault: { light: '{colorIndigo500}', dark: '{colorIndigo500}' }, + colorBackgroundButtonPrimaryDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral750}' }, + colorBackgroundButtonPrimaryHover: { light: '{colorIndigo400}', dark: '{colorIndigo400}' }, + colorBackgroundDirectionButtonActive: '{colorNeutral750}', + colorBackgroundDirectionButtonDefault: '{colorNeutral650}', + colorBackgroundDirectionButtonDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral750}' }, + colorBackgroundDirectionButtonHover: '{colorNeutral700}', + colorTextDirectionButtonDefault: '{colorWhite}', + colorTextDirectionButtonDisabled: '{colorTextInteractiveDisabled}', + colorBackgroundCalendarCurrentDate: { light: '{colorNeutral200}', dark: '{colorNeutral700}' }, + colorBackgroundCellShaded: { light: '{colorNeutral150}', dark: '{colorNeutral800}' }, + colorBackgroundCodeEditorGutterActiveLineDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, + colorBackgroundCodeEditorGutterActiveLineError: '{colorTextStatusError}', + colorBackgroundCodeEditorGutterDefault: { light: '{colorNeutral200}', dark: '{colorNeutral800}' }, + colorBackgroundCodeEditorLoading: { light: '{colorNeutral100}', dark: '{colorNeutral800}' }, + colorBackgroundCodeEditorPaneItemHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, + colorBackgroundCodeEditorStatusBar: { light: '{colorNeutral200}', dark: '{colorNeutral800}' }, + colorBackgroundCard: '{colorBackgroundContainerContent}', + colorBackgroundItemCard: '{colorBackgroundCard}', + colorBackgroundContainerContent: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundContainerHeader: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundControlChecked: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBackgroundControlDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundControlDisabled: { light: '{colorNeutral300}', dark: '{colorNeutral700}' }, + colorBackgroundDropdownItemDefault: { light: '{colorWhite}', dark: '{colorNeutral800}' }, + colorBackgroundDropdownItemDimmed: 'transparent', + colorBackgroundDropdownItemFilterMatch: { light: '{colorPrimary50}', dark: '{colorNeutral700}' }, + colorBackgroundDropdownItemHover: { light: '{colorNeutral200}', dark: '{colorNeutral900}' }, + colorBackgroundDropdownItemSelected: '{colorBackgroundItemSelected}', + colorBackgroundHomeHeader: '{colorNeutral950}', + colorBackgroundInlineCode: { light: 'rgba(0, 0, 0, 0.1)', dark: 'rgba(255, 255, 255, 0.1)' }, + colorBackgroundInputDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundInputDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral800}' }, + colorBackgroundItemSelected: { light: '{colorPrimary50}', dark: '{colorPrimary1000}' }, + colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundDrawer: '{colorBackgroundLayoutPanelContent}', + colorBackgroundDrawerBackdrop: '{colorGreyOpaque70}', + colorBackgroundLayoutMobilePanel: '{colorNeutral950}', + colorBackgroundLayoutPanelContent: '{colorBackgroundContainerContent}', + colorBackgroundLayoutPanelHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, + colorBackgroundLayoutToolbar: '{colorBackgroundLayoutPanelContent}', + colorBackgroundLayoutToggleActive: '{colorNeutral650}', + colorBackgroundLayoutToggleDefault: '{colorNeutral650}', + colorBackgroundLayoutToggleHover: '{colorNeutral600}', + colorBackgroundLayoutToggleSelectedActive: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBackgroundLayoutToggleSelectedDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBackgroundLayoutToggleSelectedHover: { light: '{colorPrimary700}', dark: '{colorPrimary300}' }, + colorBackgroundModalOverlay: '{colorGreyOpaque70}', + colorBackgroundNotificationBlue: '{colorInfo600}', + colorBackgroundNotificationGreen: '{colorSuccess600}', + colorBackgroundNotificationGrey: { light: '{colorNeutral650}', dark: '{colorNeutral600}' }, + colorBackgroundNotificationRed: '{colorError600}', + colorBackgroundNotificationYellow: '{colorWarning400}', + colorBackgroundNotificationStackBar: '{colorNeutral750}', + colorBackgroundNotificationStackBarActive: '{colorNeutral750}', + colorBackgroundNotificationStackBarHover: '{colorNeutral650}', + colorBackgroundPopover: { light: '{colorWhite}', dark: '{colorNeutral800}' }, + colorBackgroundProgressBarValueDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBackgroundProgressBarDefault: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, + colorBackgroundSegmentActive: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBackgroundSegmentDefault: '{colorBackgroundButtonNormalDefault}', + colorBackgroundSegmentDisabled: '{colorBackgroundButtonNormalDisabled}', + colorBackgroundSegmentHover: '{colorBackgroundButtonNormalHover}', + colorBackgroundSegmentWrapper: '{colorBackgroundContainerContent}', + colorBackgroundSliderRangeDefault: '{colorBackgroundSliderHandleDefault}', + colorBackgroundSliderRangeActive: '{colorBackgroundSliderHandleActive}', + colorBackgroundSliderHandleDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBackgroundSliderHandleActive: { light: '{colorPrimary700}', dark: '{colorPrimary300}' }, + colorBackgroundSliderTrackDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, + colorBackgroundSliderHandleRing: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundSliderHandleErrorDefault: '{colorTextStatusError}', + colorBackgroundSliderHandleErrorActive: '{colorTextStatusError}', + colorBackgroundSliderHandleWarningDefault: '{colorTextStatusWarning}', + colorBackgroundSliderHandleWarningActive: '{colorTextStatusWarning}', + colorBackgroundSliderRangeErrorDefault: '{colorTextStatusError}', + colorBackgroundSliderRangeErrorActive: '{colorTextStatusError}', + colorBackgroundSliderRangeWarningDefault: '{colorTextStatusWarning}', + colorBackgroundSliderRangeWarningActive: '{colorTextStatusWarning}', + colorBackgroundStatusError: { light: '{colorError50}', dark: '{colorError1000}' }, + colorBackgroundStatusInfo: { light: '{colorInfo50}', dark: '{colorInfo1000}' }, + colorBackgroundDialog: '{colorBackgroundStatusInfo}', + colorBackgroundStatusSuccess: { light: '{colorSuccess50}', dark: '{colorSuccess1000}' }, + colorBackgroundStatusWarning: { light: '{colorWarning50}', dark: '{colorWarning1000}' }, + colorBackgroundTableHeader: '{colorBackgroundContainerHeader}', + colorBackgroundTilesDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral800}' }, + colorBackgroundToggleCheckedDisabled: { light: '{colorPrimary200}', dark: '{colorPrimary900}' }, + colorBackgroundToggleDefault: { light: '{colorNeutral650}', dark: '{colorNeutral500}' }, + colorBackgroundAvatarGenAi: + 'radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)', + colorBackgroundAvatarDefault: '{colorNeutral650}', + colorTextAvatar: '{colorWhite}', + colorBackgroundLoadingBarGenAi: + 'linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)', + colorBackgroundChatBubbleOutgoing: 'transparent', + colorBackgroundChatBubbleIncoming: { light: '{colorNeutral150}', dark: '{colorNeutral950}' }, + colorTextChatBubbleOutgoing: '{colorTextBodyDefault}', + colorTextChatBubbleIncoming: '{colorTextBodyDefault}', + colorBorderButtonLinkDisabled: '{colorBackgroundButtonLinkDisabled}', + colorBorderButtonNormalActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorBorderButtonNormalDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBorderToggleButtonNormalPressed: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBorderButtonNormalDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' }, + colorTextButtonNormalDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' }, + colorBorderButtonNormalHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorTextButtonIconDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' }, + colorBorderButtonPrimaryActive: '{colorBackgroundButtonPrimaryActive}', + colorBorderButtonPrimaryDefault: '{colorBackgroundButtonPrimaryDefault}', + colorBorderButtonPrimaryDisabled: '{colorBackgroundButtonPrimaryDisabled}', + colorBorderButtonPrimaryHover: '{colorBackgroundButtonPrimaryHover}', + colorTextButtonPrimaryDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' }, + colorItemSelected: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBorderCalendarGrid: 'transparent', + colorBorderCalendarGridSelectedFocusRing: { light: '{colorNeutral100}', dark: '{colorNeutral850}' }, + colorBorderCellShaded: { light: '{colorNeutral300}', dark: '{colorNeutral700}' }, + colorBorderCodeEditorAceActiveLineLightTheme: '{colorNeutral300}', + colorBorderCodeEditorAceActiveLineDarkTheme: '{colorNeutral600}', + colorBorderCodeEditorDefault: { light: '{colorNeutral300}', dark: '{colorNeutral600}' }, + colorBorderCodeEditorPaneItemHover: '{colorBorderDropdownItemHover}', + colorBorderCard: '{colorBorderDividerDefault}', + colorBorderCardHighlighted: '{colorBorderItemSelected}', + colorBorderItemCard: '{colorBorderCard}', + colorBorderItemCardHighlighted: '{colorBorderCardHighlighted}', + colorBorderContainerDivider: 'transparent', + colorBorderContainerTop: 'transparent', + colorBorderControlChecked: '{colorBackgroundControlChecked}', + colorBorderControlDefault: '{colorNeutral500}', + colorBorderControlDisabled: '{colorBackgroundControlDisabled}', + colorBorderDividerActive: { light: '{colorNeutral950}', dark: '{colorNeutral100}' }, + colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral650}' }, + colorBorderDividerPanelBottom: '{colorBorderDividerDefault}', + colorBorderDividerPanelSide: '{colorBorderDividerDefault}', + colorBorderDividerSecondary: { light: '{colorNeutral250}', dark: '{colorNeutral750}' }, + colorBorderDropdownContainer: { light: '{colorNeutral400}', dark: '{colorNeutral600}' }, + colorBorderDropdownGroup: '{colorBorderDropdownItemDefault}', + colorBorderDropdownItemDefault: '{colorBorderDividerDefault}', + colorBorderDropdownItemHover: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, + colorBorderDropdownItemDimmedHover: '{colorNeutral500}', + colorBorderDropdownItemSelected: '{colorBorderItemSelected}', + colorBorderDropdownItemTop: 'transparent', + colorBorderEditableCellHover: '{colorBorderDropdownItemHover}', + colorBorderInputDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, + colorBorderInputDisabled: '{colorBackgroundInputDisabled}', + colorBorderInputFocused: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBorderItemFocused: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBorderDropdownItemFocused: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, + colorBorderItemPlaceholder: '{colorBorderItemSelected}', + colorBorderItemSelected: '{colorItemSelected}', + colorBorderLayout: { light: '{colorNeutral350}', dark: '{colorNeutral650}' }, + colorBorderNotificationStackBar: '{colorNeutral750}', + colorBorderPanelHeader: '{colorBorderDividerDefault}', + colorBorderPopover: '{colorBorderDropdownContainer}', + colorBorderSegmentActive: '{colorBorderSegmentDefault}', + colorBorderSegmentDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, + colorBorderSegmentDisabled: '{colorBorderSegmentDefault}', + colorBorderSegmentHover: '{colorBorderSegmentDefault}', + colorBorderStatusError: { light: '{colorError600}', dark: '{colorError400}' }, + colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, + colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, + colorBorderStatusWarning: { light: '{colorWarning900}', dark: '{colorWarning500}' }, + colorBorderDialog: '{colorBorderStatusInfo}', + colorBorderDividerInteractiveDefault: { light: '{colorNeutral500}', dark: '{colorNeutral300}' }, + colorBorderTabsDivider: { light: '{colorNeutral350}', dark: '{colorNeutral650}' }, + colorBorderTabsShadow: '{colorGreyTransparent}', + colorBorderTabsUnderline: '{colorTextAccent}', + colorBorderTilesDisabled: '{colorBackgroundTilesDisabled}', + colorBorderTutorial: { light: '{colorNeutral300}', dark: '{colorNeutral650}' }, + colorForegroundControlDefault: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorForegroundControlDisabled: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorForegroundControlReadOnly: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorShadowDefault: '{colorGreyTransparentHeavy}', + colorShadowMedium: '{colorGreyTransparent}', + colorShadowSide: '{colorGreyTransparentLight}', + colorStrokeChartLine: '{colorNeutral500}', + colorStrokeCodeEditorGutterActiveLineDefault: { light: '{colorNeutral300}', dark: '{colorNeutral800}' }, + colorStrokeCodeEditorGutterActiveLineHover: { light: '{colorNeutral100}', dark: '{colorNeutral950}' }, + colorTextAccent: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorTextBodyDefault: { light: '{colorNeutral950}', dark: '{colorNeutral350}' }, + colorTextBodySecondary: { light: '{colorNeutral650}', dark: '{colorNeutral350}' }, + colorTextBreadcrumbCurrent: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, + colorTextBreadcrumbIcon: { light: '{colorNeutral500}', dark: '{colorTextInteractiveDisabled}' }, + colorTextButtonInlineIconDefault: '{colorTextLinkDefault}', + colorTextButtonInlineIconDisabled: '{colorTextInteractiveDisabled}', + colorTextButtonInlineIconHover: '{colorTextLinkHover}', + colorTextButtonNormalActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorTextToggleButtonNormalPressed: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorTextButtonNormalDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorTextButtonNormalHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorTextLinkButtonNormalDefault: '{colorTextButtonNormalDefault}', + colorTextLinkButtonNormalHover: '{colorTextButtonNormalHover}', + colorTextLinkButtonNormalActive: '{colorTextButtonNormalActive}', + colorTextButtonLinkActive: '{colorTextButtonNormalActive}', + colorTextButtonLinkDefault: '{colorTextButtonNormalDefault}', + colorTextButtonLinkDisabled: '{colorTextInteractiveDisabled}', + colorTextButtonLinkHover: '{colorTextButtonNormalHover}', + colorTextButtonPrimaryActive: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextButtonPrimaryDefault: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextButtonPrimaryHover: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextCalendarDateHover: '{colorTextDropdownItemDefault}', + colorTextCalendarMonth: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorTextCodeEditorGutterActiveLine: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextCodeEditorGutterDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' }, + colorTextCodeEditorStatusBarDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, + colorTextCodeEditorTabButtonError: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextColumnHeader: { light: '{colorNeutral650}', dark: '{colorNeutral400}' }, + colorTextColumnSortingIcon: '{colorTextColumnHeader}', + colorTextControlDisabled: '{colorTextInteractiveDisabled}', + colorTextCounter: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorTextDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' }, + colorTextDisabledInlineEdit: { light: '{colorNeutral650}', dark: '{colorNeutral400}' }, + colorTextDropdownFooter: '{colorTextFormSecondary}', + colorTextDropdownGroupLabel: '{colorTextGroupLabel}', + colorTextDropdownItemDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' }, + colorTextDropdownItemDimmed: '{colorTextInteractiveDisabled}', + colorTextDropdownItemDisabled: '{colorTextInteractiveDisabled}', + colorTextDropdownItemFilterMatch: { light: '{colorPrimary600}', dark: '{colorPrimary300}' }, + colorTextDropdownItemHighlighted: { light: '{colorNeutral950}', dark: '{colorNeutral250}' }, + colorTextDropdownItemSecondary: '{colorTextFormSecondary}', + colorTextDropdownItemSecondaryHover: { light: '{colorNeutral600}', dark: '{colorNeutral300}' }, + colorTextEmpty: { light: '{colorNeutral600}', dark: '{colorNeutral300}' }, + colorTextExpandableSectionDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' }, + colorTextExpandableSectionHover: '{colorTextAccent}', + colorTextExpandableSectionNavigationIconDefault: '{colorTextInteractiveDefault}', + colorTextFormDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' }, + colorTextFormLabel: '{colorTextFormDefault}', + colorTextFormSecondary: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorTextGroupLabel: { light: '{colorNeutral650}', dark: '{colorNeutral350}' }, + colorTextLabelGenAi: { light: '{colorPurple700}', dark: '{colorPurple400}' }, + colorTextHeadingDefault: { light: '{colorNeutral950}', dark: '{colorNeutral250}' }, + colorTextHeadingSecondary: { light: '{colorNeutral650}', dark: '{colorNeutral450}' }, + colorTextHomeHeaderDefault: '{colorNeutral250}', + colorTextHomeHeaderSecondary: '{colorNeutral350}', + colorTextIconCaret: { light: '{colorNeutral500}', dark: '{colorNeutral450}' }, + colorTextIconSubtle: { light: '{colorNeutral600}', dark: '{colorNeutral400}' }, + colorTextInputDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' }, + colorTextInputPlaceholder: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorTextInputPlaceholderDisabled: '{colorTextInputDisabled}', + colorTextInteractiveActive: { light: '{colorNeutral950}', dark: '{colorNeutral100}' }, + colorTextInteractiveDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, + colorTextInteractiveDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' }, + colorTextInteractiveHover: { light: '{colorNeutral950}', dark: '{colorNeutral100}' }, + colorTextToggleButtonIconPressed: { light: '{colorNeutral950}', dark: '{colorNeutral100}' }, + colorTextInteractiveInvertedDefault: '{colorNeutral300}', + colorTextInteractiveInvertedHover: '{colorNeutral100}', + colorTextInverted: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextLabel: '{colorTextFormLabel}', + colorTextLayoutToggle: '{colorWhite}', + colorTextLayoutToggleActive: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorTextLayoutToggleHover: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorTextLayoutToggleSelected: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextLinkDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorTextLinkHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorTextLinkSecondaryDefault: '{colorTextLinkDefault}', + colorTextLinkSecondaryHover: '{colorTextLinkHover}', + colorTextLinkInfoDefault: '{colorTextLinkDefault}', + colorTextLinkInfoHover: '{colorTextLinkHover}', + colorTextLinkInvertedHover: '{colorWhite}', + colorTextLinkButtonUnderline: 'transparent', + colorTextLinkButtonUnderlineHover: 'transparent', + colorTextNotificationDefault: '{colorNeutral100}', + colorTextNotificationStackBar: '{colorWhite}', + colorTextNotificationYellow: '{colorNeutral950}', + colorTextPaginationPageNumberActiveDisabled: '{colorTextInteractiveDisabled}', + colorTextPaginationPageNumberDefault: { light: '{colorTextInteractiveDefault}', dark: '{colorNeutral400}' }, + colorTextSegmentActive: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextSegmentDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, + colorTextSegmentHover: '{colorTextButtonNormalHover}', + colorTextSmall: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorTextStatusError: { light: '{colorError600}', dark: '{colorError400}' }, + colorTextStatusInactive: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, + colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, + colorTextStatusWarning: { light: '{colorWarning900}', dark: '{colorWarning500}' }, + colorTextTopNavigationTitle: { light: '{colorNeutral950}', dark: '{colorNeutral100}' }, + colorTextTutorialHotspotDefault: '{colorTextLinkDefault}', + colorTextTutorialHotspotHover: '{colorTextLinkHover}', + colorBoardPlaceholderActive: { light: '{colorNeutral250}', dark: '{colorNeutral600}' }, + colorBoardPlaceholderHover: { light: '{colorPrimary100}', dark: '{colorPrimary600}' }, + colorDragPlaceholderActive: { light: '{colorNeutral250}', dark: '{colorNeutral600}' }, + colorDragPlaceholderHover: { light: '{colorPrimary100}', dark: '{colorPrimary600}' }, + colorDropzoneBackgroundDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorDropzoneBackgroundHover: { light: '{colorPrimary50}', dark: '{colorPrimary1000}' }, + colorDropzoneTextDefault: { light: '{colorNeutral650}', dark: '{colorNeutral350}' }, + colorDropzoneTextHover: { light: '{colorNeutral650}', dark: '{colorNeutral350}' }, + colorDropzoneBorderDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, + colorDropzoneBorderHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorGapGlobalDrawer: { light: '{colorNeutral250}', dark: '{colorNeutral950}' }, + colorTreeViewConnectorLine: { light: '{colorNeutral500}', dark: '{colorNeutral300}' }, + colorBackgroundActionCardDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundActionCardHover: { light: '{colorPrimary50}', dark: '{colorNeutral800}' }, + colorBackgroundActionCardActive: { light: '{colorPrimary100}', dark: '{colorNeutral700}' }, + colorBorderActionCardDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBorderActionCardHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorBorderActionCardActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorBorderActionCardDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' }, + colorBackgroundActionCardDisabled: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorTextActionCardDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' }, + colorIconActionCardDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorIconActionCardHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorIconActionCardActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, + colorIconActionCardDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' }, +}; + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); + +export { expandedTokens as tokens }; +export const mode: StyleDictionary.ModeIdentifier = 'color'; diff --git a/style-dictionary/one-theme/contexts/alert.ts b/style-dictionary/one-theme/contexts/alert.ts new file mode 100644 index 0000000000..66565e2666 --- /dev/null +++ b/style-dictionary/one-theme/contexts/alert.ts @@ -0,0 +1,67 @@ +// 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'; + +export const alertButtonTokens: StyleDictionary.ColorsDictionary = { + colorTextButtonNormalDefault: { + light: '{colorNeutral650}', + dark: '{colorNeutral300}', + }, + colorBorderButtonNormalDefault: '{colorTextButtonNormalDefault}', + colorBackgroundButtonNormalDefault: 'transparent', + colorTextButtonNormalHover: { + light: '{colorNeutral950}', + dark: '{colorWhite}', + }, + colorBorderButtonNormalHover: '{colorTextButtonNormalHover}', + colorBackgroundButtonNormalHover: { + light: 'rgba(0, 7, 22, 0.05)', + dark: 'rgba(255, 255, 255, 0.1)', + }, + colorTextButtonNormalActive: '{colorTextButtonNormalHover}', + colorBorderButtonNormalActive: '{colorTextButtonNormalHover}', + colorBackgroundButtonNormalActive: { + light: 'rgba(0, 7, 22, 0.1)', + dark: 'rgba(255, 255, 255, 0.15)', + }, + colorTextLinkButtonNormalDefault: '{colorTextLinkDefault}', + colorTextLinkButtonNormalHover: '{colorTextLinkHover}', +}; + +const alertExpandableSectionTokens: StyleDictionary.ColorsDictionary = { + colorBorderDividerDefault: '{colorTextButtonNormalDefault}', + colorTextExpandableSectionDefault: '{colorTextButtonNormalDefault}', + colorTextExpandableSectionHover: '{colorTextButtonNormalHover}', +}; + +const colorTokens: StyleDictionary.ColorsDictionary = { + ...alertButtonTokens, + ...alertExpandableSectionTokens, + colorBorderItemFocused: { + dark: '{colorNeutral100}', + }, +}; + +const alertExpandableSectionFontTokens: StyleDictionary.TypographyDictionary = { + fontExpandableHeadingSize: '14px', +}; + +const alertExpandableSectionBorderTokens: StyleDictionary.BordersDictionary = { + borderDividerSectionWidth: '1px', +}; + +export const expandedColorTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( + merge({}, parentTokens, colorTokens) +); + +const expandedTokens = { + ...expandedColorTokens, + ...alertExpandableSectionFontTokens, + ...alertExpandableSectionBorderTokens, +}; + +export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/app-layout-toolbar.ts b/style-dictionary/one-theme/contexts/app-layout-toolbar.ts new file mode 100644 index 0000000000..985715608b --- /dev/null +++ b/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 = { + colorBackgroundLayoutMain: { light: '{colorNeutral50}', dark: '{colorNeutral900}' }, +}; + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, { ...tokens })); + +export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/compact-table.ts b/style-dictionary/one-theme/contexts/compact-table.ts new file mode 100644 index 0000000000..ebc31378e1 --- /dev/null +++ b/style-dictionary/one-theme/contexts/compact-table.ts @@ -0,0 +1,29 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import merge from 'lodash/merge.js'; + +import { expandDensityDictionary } from '../../utils/index.js'; +import { StyleDictionary } from '../../utils/interfaces.js'; +import { tokens as parentTokens } from '../spacing.js'; + +const spacingTokens: StyleDictionary.SpacingDictionary = { + spaceScaledXxxs: '{spaceNone}', + spaceScaledXxs: '{spaceXxxs}', + spaceScaledXs: '{spaceXxs}', + spaceScaledS: '{spaceXs}', + spaceScaledM: '{spaceS}', + spaceScaledL: '{spaceM}', + spaceScaledXl: '{spaceL}', + spaceScaledXxl: '{spaceXl}', + spaceScaledXxxl: '{spaceXxl}', +}; + +const sizeTokens: StyleDictionary.SizesDictionary = { + sizeVerticalInput: '28px', +}; + +const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary( + merge({}, parentTokens, { ...spacingTokens, ...sizeTokens }) +); + +export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/flashbar-warning.ts b/style-dictionary/one-theme/contexts/flashbar-warning.ts new file mode 100644 index 0000000000..5fac6a6e01 --- /dev/null +++ b/style-dictionary/one-theme/contexts/flashbar-warning.ts @@ -0,0 +1,66 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import merge from 'lodash/merge.js'; + +import { expandColorDictionary, pickState } from '../../utils/index.js'; +import { StyleDictionary } from '../../utils/interfaces.js'; +import { tokens as parentTokens } from '../colors.js'; +import { alertButtonTokens } from './alert.js'; + +const baseTokens: StyleDictionary.ColorsDictionary = { + // Links in flash should be using color="inverted", which makes them underlined by default in flashbars + // and changes their color to match the surrounding text. + colorTextNotificationDefault: '{colorTextNotificationYellow}', + colorTextLinkInvertedHover: '{colorTextNotificationYellow}', + + // Focus outline matches the text color to align with other flashbar types and to ensure color contrast. + colorBorderItemFocused: '{colorTextNotificationYellow}', + + // Dismiss button + colorTextInteractiveInvertedDefault: '{colorNeutral650}', + colorTextInteractiveInvertedHover: '{colorNeutral950}', + + // Progress bars + colorBackgroundProgressBarValueDefault: '{colorNeutral950}', + colorBackgroundProgressBarDefault: '{colorGreyOpaque10}', + + // Expandable sections + colorTextExpandableSectionDefault: '{colorTextNotificationYellow}', + colorTextExpandableSectionHover: '{colorTextNotificationYellow}', + // Bottom border of the header when expanded (default variant) + colorBorderDividerDefault: '{colorTextNotificationYellow}', + // Description + colorTextHeadingSecondary: '{colorTextNotificationYellow}', + // Content + colorTextBodyDefault: '{colorTextNotificationYellow}', + colorTextBodySecondary: '{colorTextNotificationYellow}', + + // Tutorial hotspot + colorTextTutorialHotspotDefault: '{colorNeutral600}', + colorTextTutorialHotspotHover: '{colorNeutral900}', + + // Inline-code variant background in Box + colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.1)', + + // Key-value pairs + colorTextLabel: '{colorTextNotificationYellow}', + + // Info links + colorTextLinkDefault: '{colorTextNotificationYellow}', + colorTextLinkHover: '{colorTextNotificationYellow}', +}; + +// Token configuration that is shared between classic and visual refresh +export const sharedTokens: StyleDictionary.ColorsDictionary = { + ...baseTokens, + + // For buttons we use the same tokens as alert. But because the warning flash messages + // look the same in light and dark mode, we only pick the light mode colors. + ...pickState(expandColorDictionary(alertButtonTokens), 'light'), +}; + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( + merge({}, parentTokens, sharedTokens) +); + +export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts new file mode 100644 index 0000000000..6d5a88c2dd --- /dev/null +++ b/style-dictionary/one-theme/contexts/flashbar.ts @@ -0,0 +1,46 @@ +// 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'; + +// Token configuration that is shared between classic and visual refresh +export const sharedTokens: StyleDictionary.ColorsDictionary = { + colorTextButtonNormalDefault: '{colorNeutral100}', + colorBorderButtonNormalDefault: '{colorNeutral100}', + colorBackgroundButtonNormalDefault: 'transparent', + colorTextButtonNormalHover: '{colorWhite}', + colorBorderButtonNormalHover: '{colorWhite}', + colorBackgroundButtonNormalHover: 'rgba(0, 7, 22, 0.15)', + colorTextButtonNormalActive: '{colorWhite}', + colorBorderButtonNormalActive: '{colorWhite}', + colorBackgroundButtonNormalActive: 'rgba(0, 7, 22, 0.2)', + colorBorderItemFocused: '{colorNeutral100}', + colorTextExpandableSectionDefault: '{colorNeutral100}', + colorTextExpandableSectionHover: '{colorWhite}', + colorTextBodyDefault: '{colorNeutral100}', + colorTextBodySecondary: '{colorNeutral100}', + colorTextHeadingSecondary: '{colorNeutral100}', + colorBorderDividerDefault: '{colorNeutral100}', + colorTextTutorialHotspotDefault: '{colorNeutral300}', + colorTextTutorialHotspotHover: '{colorNeutral100}', + colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)', + // Key-value pairs + colorTextLabel: '{colorNeutral100}', + + // Info links + colorTextLinkDefault: '{colorNeutral100}', + colorTextLinkHover: '{colorWhite}', + + // Progress Bar + colorBackgroundProgressBarValueDefault: '{colorWhite}', + colorBackgroundProgressBarDefault: '{colorGreyOpaque25}', +}; + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( + merge({}, parentTokens, sharedTokens) +); + +export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/header-alert.ts b/style-dictionary/one-theme/contexts/header-alert.ts new file mode 100644 index 0000000000..1b78f2e723 --- /dev/null +++ b/style-dictionary/one-theme/contexts/header-alert.ts @@ -0,0 +1,16 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import merge from 'lodash/merge.js'; + +import { expandColorDictionary, pickState } from '../../utils/index.js'; +import { StyleDictionary } from '../../utils/interfaces.js'; +import { expandedColorTokens as alertTokens } from './alert.js'; + +const darkModeColorValues = pickState(alertTokens, 'dark'); + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( + merge({}, alertTokens, darkModeColorValues) +); + +export default expandedTokens; +export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/header.ts b/style-dictionary/one-theme/contexts/header.ts new file mode 100644 index 0000000000..b8f6bd7918 --- /dev/null +++ b/style-dictionary/one-theme/contexts/header.ts @@ -0,0 +1,38 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import merge from 'lodash/merge.js'; + +import { expandColorDictionary, pickState } from '../../utils/index.js'; +import { StyleDictionary } from '../../utils/interfaces.js'; +import { tokens as parentColorTokens } from '../colors.js'; +import { tokens as parentShadowsTokens } from '../shadows.js'; + +const background = '{colorNeutral950}'; + +const colorTokens: StyleDictionary.ColorsDictionary = { + colorBackgroundLayoutMain: background, + colorBackgroundButtonNormalDefault: background, + colorBackgroundButtonNormalDisabled: background, + colorBackgroundControlDefault: background, + colorBackgroundInputDefault: background, + colorBackgroundSegmentDefault: background, + colorBackgroundSegmentDisabled: background, + colorBackgroundTableHeader: background, + colorBackgroundSegmentWrapper: background, +}; + +const shadowsTokens: StyleDictionary.ShadowsDictionary = { + shadowFlashSticky: parentShadowsTokens.shadowFlashSticky, + shadowPanel: parentShadowsTokens.shadowPanel, + shadowPanelToggle: parentShadowsTokens.shadowPanelToggle, +}; + +const darkModeColorValues = pickState(parentColorTokens, 'dark'); +const darkModeShadowsValues = pickState(parentShadowsTokens, 'dark'); + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( + merge({}, darkModeShadowsValues, darkModeColorValues, shadowsTokens, colorTokens) +); + +export const mode: StyleDictionary.ModeIdentifier = 'color'; +export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/top-navigation.ts b/style-dictionary/one-theme/contexts/top-navigation.ts new file mode 100644 index 0000000000..1b8b6f2a60 --- /dev/null +++ b/style-dictionary/one-theme/contexts/top-navigation.ts @@ -0,0 +1,21 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import merge from 'lodash/merge.js'; + +import { expandColorDictionary, pickState } from '../../utils/index.js'; +import { StyleDictionary } from '../../utils/interfaces.js'; +import { tokens as parentTokens } from '../colors.js'; + +const tokens = { + colorBackgroundContainerContent: '{colorNeutral850}', + colorBackgroundDropdownItemDefault: '{colorNeutral850}', +}; + +const darkModeValues = pickState(parentTokens, 'dark'); + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( + merge({}, darkModeValues, tokens) +); + +export const mode: StyleDictionary.ModeIdentifier = 'color'; +export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/index.ts b/style-dictionary/one-theme/index.ts new file mode 100644 index 0000000000..f838dd584d --- /dev/null +++ b/style-dictionary/one-theme/index.ts @@ -0,0 +1,62 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { ThemeBuilder } from '@cloudscape-design/theming-build'; + +import { + createAlertContext, + createAppLayoutToolbarContext, + createCompactTableContext, + createFlashbarContext, + createFlashbarWarningContext, + createHeaderAlertContext, + 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 tokenCategories: Array = [ + await import('./color-palette.js'), // Still needed for now for non-deprecated palette tokens like colorWhite, colorBlack + await import('./color-charts.js'), + await import('./color-severity.js'), + await import('./colors.js'), + await import('./typography.js'), + await import('./borders.js'), + await import('./motion.js'), + await import('./sizes.js'), + await import('./spacing.js'), + await import('./shadows.js'), +]; + +export async function buildVisualRefresh(builder: ThemeBuilder) { + tokenCategories.forEach(({ tokens, mode: modeId, referenceTokens }) => { + const mode = modes.find(mode => mode.id === modeId); + if (referenceTokens) { + builder.addReferenceTokens(referenceTokens, mode); + } + builder.addTokens(tokens, mode); + }); + + // Add contexts for component-specific overrides + builder.addContext(createCompactTableContext((await import('./contexts/compact-table.js')).tokens)); + 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(createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens)); + builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens)); + builder.addContext(createHeaderAlertContext((await import('./contexts/header-alert.js')).tokens)); + builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens)); + + return builder.build(); +} + +const builder = new ThemeBuilder('visual-refresh', 'body', modes); +const theme = await buildVisualRefresh(builder); + +export default theme; diff --git a/style-dictionary/one-theme/metadata.ts b/style-dictionary/one-theme/metadata.ts new file mode 100644 index 0000000000..2cd8815640 --- /dev/null +++ b/style-dictionary/one-theme/metadata.ts @@ -0,0 +1,5 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import metadata from './metadata/index.js'; + +export default metadata; diff --git a/style-dictionary/one-theme/metadata/borders.ts b/style-dictionary/one-theme/metadata/borders.ts new file mode 100644 index 0000000000..6329b6a6f5 --- /dev/null +++ b/style-dictionary/one-theme/metadata/borders.ts @@ -0,0 +1,224 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../../utils/interfaces.js'; + +const metadata: StyleDictionary.MetadataIndex = { + borderActiveWidth: { description: 'The height of the active tab indicator.' }, + borderDividerListWidth: { description: 'Used for divider between repeated items such as dropdowns and tables.' }, + borderDividerSectionWidth: { + description: + 'The default system divider width - used for dividers between sections of content such as key/value pairs and tabs, for both full width and inset dividers.', + }, + borderInvalidWidth: { description: 'Used for invalid input left border width.' }, + borderPanelHeaderWidth: { description: 'The split panel header bottom divider width.' }, + borderPanelTopWidth: { description: 'The split panel top border width.' }, + borderWidthItemSelected: { + description: 'The border width of selected items, like table rows.', + public: true, + themeable: true, + }, + borderRadiusAlert: { + description: 'The border radius of alerts.', + public: true, + themeable: true, + }, + borderRadiusBadge: { + description: 'The border radius of badges.', + public: true, + themeable: true, + }, + borderRadiusButton: { + description: "The border radius of buttons and segmented control's segments.", + public: true, + themeable: true, + }, + borderRadiusCalendarDayFocusRing: { + description: 'The border radius of the focused day in date picker and date range picker.', + public: true, + themeable: true, + }, + borderRadiusCodeEditor: { + description: 'The border radius of code editors.', + }, + borderRadiusContainer: { + description: + 'The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.', + public: true, + themeable: true, + }, + borderRadiusControlCircularFocusRing: { + description: 'The border radius of the focus indicator of circular controls. For example: radio button.', + public: true, + themeable: true, + }, + borderRadiusControlDefaultFocusRing: { + description: + 'The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.', + public: true, + themeable: true, + }, + borderRadiusDropdown: { + description: + 'The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.', + public: true, + themeable: true, + }, + borderRadiusDropzone: { + description: 'The border radius of file upload dropzone.', + public: true, + themeable: true, + }, + borderRadiusFlashbar: { + description: 'The border radius of flash messages in flashbars.', + public: true, + themeable: true, + }, + borderRadiusItem: { + description: + 'The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.', + public: true, + themeable: true, + }, + borderRadiusInput: { + description: 'The border radius of form controls. For example: input, select.', + public: true, + themeable: true, + }, + borderRadiusPopover: { + description: 'The border radius of popovers.', + public: true, + themeable: true, + }, + borderRadiusTabsFocusRing: { + description: "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.", + public: true, + themeable: true, + }, + borderRadiusTiles: { + description: 'The border radius of tiles.', + public: true, + themeable: true, + }, + borderRadiusToken: { + description: 'The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.', + public: true, + themeable: true, + }, + borderRadiusChatBubble: { + description: 'The border radius of chat bubbles.', + public: true, + themeable: false, + }, + borderRadiusTutorialPanelItem: { + description: 'The border radius of tutorials inside a tutorial panel.', + public: true, + themeable: true, + }, + borderWidthAlert: { + description: 'The border width of alerts.', + public: true, + themeable: true, + }, + borderWidthAlertBlockStart: { + description: 'The block-start border width of alerts.', + public: true, + themeable: true, + }, + borderWidthAlertBlockEnd: { + description: 'The block-end border width of alerts.', + public: true, + themeable: true, + }, + borderWidthAlertInlineStart: { + description: 'The inline-start border width of alerts.', + public: true, + themeable: true, + }, + borderWidthAlertInlineEnd: { + description: 'The inline-end border width of alerts.', + public: true, + themeable: true, + }, + borderWidthCard: { + description: 'The border width of a card.', + public: true, + themeable: true, + }, + borderWidthCardSelected: { + description: 'The border width of a selected card.', + public: true, + themeable: true, + }, + borderWidthButton: { + description: 'The border width of buttons.', + public: true, + themeable: true, + }, + borderWidthDropdown: { + description: 'The border width of dropdowns.', + public: true, + themeable: true, + }, + borderWidthField: { + description: 'The border width of form fields.', + public: true, + themeable: true, + }, + borderWidthPopover: { + description: 'The border width of popovers.', + public: true, + themeable: true, + }, + borderWidthToken: { + description: 'The border width of tokens.', + public: true, + themeable: true, + }, + borderWidthIconSmall: { + description: 'The visual stroke width of small icons.', + public: true, + themeable: true, + }, + borderWidthIconNormal: { + description: 'The visual stroke width of normal icons.', + public: true, + themeable: true, + }, + borderWidthIconMedium: { + description: 'The visual stroke width of medium icons.', + public: true, + themeable: true, + }, + borderWidthIconBig: { + description: 'The visual stroke width of big icons.', + public: true, + themeable: true, + }, + borderWidthIconLarge: { + description: 'The visual stroke width of large icons.', + public: true, + themeable: true, + }, + borderRadiusCardDefault: { + description: 'The border radius of default cards.', + public: true, + themeable: true, + }, + borderRadiusCardEmbedded: { + description: 'The border radius of embedded cards.', + public: true, + themeable: true, + }, + borderRadiusActionCardDefault: { + description: 'The border radius of default action cards.', + public: true, + themeable: true, + }, + borderRadiusActionCardEmbedded: { + description: 'The border radius of embedded action cards.', + public: true, + themeable: true, + }, +}; + +export default metadata; diff --git a/style-dictionary/one-theme/metadata/color-charts.ts b/style-dictionary/one-theme/metadata/color-charts.ts new file mode 100644 index 0000000000..b349c4e62d --- /dev/null +++ b/style-dictionary/one-theme/metadata/color-charts.ts @@ -0,0 +1,713 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../../utils/interfaces.js'; + +const metadata: StyleDictionary.MetadataIndex = { + colorChartsRed300: { + description: "Color from the 'red' data visualization palette at a contrast ratio of 3:1", + public: true, + }, + colorChartsRed400: { + description: "Color from the 'red' data visualization palette at a contrast ratio of 4:1", + public: true, + }, + colorChartsRed500: { + description: "Color from the 'red' data visualization palette at a contrast ratio of 5:1", + public: true, + }, + colorChartsRed600: { + description: "Color from the 'red' data visualization palette at a contrast ratio of 6:1", + public: true, + }, + colorChartsRed700: { + description: "Color from the 'red' data visualization palette at a contrast ratio of 7:1", + public: true, + }, + colorChartsRed800: { + description: "Color from the 'red' data visualization palette at a contrast ratio of 8:1", + public: true, + }, + colorChartsRed900: { + description: "Color from the 'red' data visualization palette at a contrast ratio of 9:1", + public: true, + }, + colorChartsRed1000: { + description: "Color from the 'red' data visualization palette at a contrast ratio of 10:1", + public: true, + }, + colorChartsRed1100: { + description: "Color from the 'red' data visualization palette at a contrast ratio of 11:1", + public: true, + }, + colorChartsRed1200: { + description: "Color from the 'red' data visualization palette at a contrast ratio of 12:1", + public: true, + }, + colorChartsOrange300: { + description: "Color from the 'orange' data visualization palette at a contrast ratio of 3:1", + public: true, + }, + colorChartsOrange400: { + description: "Color from the 'orange' data visualization palette at a contrast ratio of 4:1", + public: true, + }, + colorChartsOrange500: { + description: "Color from the 'orange' data visualization palette at a contrast ratio of 5:1", + public: true, + }, + colorChartsOrange600: { + description: "Color from the 'orange' data visualization palette at a contrast ratio of 6:1", + public: true, + }, + colorChartsOrange700: { + description: "Color from the 'orange' data visualization palette at a contrast ratio of 7:1", + public: true, + }, + colorChartsOrange800: { + description: "Color from the 'orange' data visualization palette at a contrast ratio of 8:1", + public: true, + }, + colorChartsOrange900: { + description: "Color from the 'orange' data visualization palette at a contrast ratio of 9:1", + public: true, + }, + colorChartsOrange1000: { + description: "Color from the 'orange' data visualization palette at a contrast ratio of 10:1", + public: true, + }, + colorChartsOrange1100: { + description: "Color from the 'orange' data visualization palette at a contrast ratio of 11:1", + public: true, + }, + colorChartsOrange1200: { + description: "Color from the 'orange' data visualization palette at a contrast ratio of 12:1", + public: true, + }, + colorChartsYellow300: { + description: "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1", + public: true, + }, + colorChartsYellow400: { + description: "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1", + public: true, + }, + colorChartsYellow500: { + description: "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1", + public: true, + }, + colorChartsYellow600: { + description: "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1", + public: true, + }, + colorChartsYellow700: { + description: "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1", + public: true, + }, + colorChartsYellow800: { + description: "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1", + public: true, + }, + colorChartsYellow900: { + description: "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1", + public: true, + }, + colorChartsYellow1000: { + description: "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1", + public: true, + }, + colorChartsYellow1100: { + description: "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1", + public: true, + }, + colorChartsYellow1200: { + description: "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1", + public: true, + }, + colorChartsGreen300: { + description: "Color from the 'green' data visualization palette at a contrast ratio of 3:1", + public: true, + }, + colorChartsGreen400: { + description: "Color from the 'green' data visualization palette at a contrast ratio of 4:1", + public: true, + }, + colorChartsGreen500: { + description: "Color from the 'green' data visualization palette at a contrast ratio of 5:1", + public: true, + }, + colorChartsGreen600: { + description: "Color from the 'green' data visualization palette at a contrast ratio of 6:1", + public: true, + }, + colorChartsGreen700: { + description: "Color from the 'green' data visualization palette at a contrast ratio of 7:1", + public: true, + }, + colorChartsGreen800: { + description: "Color from the 'green' data visualization palette at a contrast ratio of 8:1", + public: true, + }, + colorChartsGreen900: { + description: "Color from the 'green' data visualization palette at a contrast ratio of 9:1", + public: true, + }, + colorChartsGreen1000: { + description: "Color from the 'green' data visualization palette at a contrast ratio of 10:1", + public: true, + }, + colorChartsGreen1100: { + description: "Color from the 'green' data visualization palette at a contrast ratio of 11:1", + public: true, + }, + colorChartsGreen1200: { + description: "Color from the 'green' data visualization palette at a contrast ratio of 12:1", + public: true, + }, + colorChartsTeal300: { + description: "Color from the 'teal' data visualization palette at a contrast ratio of 3:1", + public: true, + }, + colorChartsTeal400: { + description: "Color from the 'teal' data visualization palette at a contrast ratio of 4:1", + public: true, + }, + colorChartsTeal500: { + description: "Color from the 'teal' data visualization palette at a contrast ratio of 5:1", + public: true, + }, + colorChartsTeal600: { + description: "Color from the 'teal' data visualization palette at a contrast ratio of 6:1", + public: true, + }, + colorChartsTeal700: { + description: "Color from the 'teal' data visualization palette at a contrast ratio of 7:1", + public: true, + }, + colorChartsTeal800: { + description: "Color from the 'teal' data visualization palette at a contrast ratio of 8:1", + public: true, + }, + colorChartsTeal900: { + description: "Color from the 'teal' data visualization palette at a contrast ratio of 9:1", + public: true, + }, + colorChartsTeal1000: { + description: "Color from the 'teal' data visualization palette at a contrast ratio of 10:1", + public: true, + }, + colorChartsTeal1100: { + description: "Color from the 'teal' data visualization palette at a contrast ratio of 11:1", + public: true, + }, + colorChartsTeal1200: { + description: "Color from the 'teal' data visualization palette at a contrast ratio of 12:1", + public: true, + }, + colorChartsBlue1300: { + description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1", + public: true, + sassName: '$color-charts-blue-1-300', + }, + colorChartsBlue1400: { + description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1", + public: true, + sassName: '$color-charts-blue-1-400', + }, + colorChartsBlue1500: { + description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1", + public: true, + sassName: '$color-charts-blue-1-500', + }, + colorChartsBlue1600: { + description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1", + public: true, + sassName: '$color-charts-blue-1-600', + }, + colorChartsBlue1700: { + description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1", + public: true, + sassName: '$color-charts-blue-1-700', + }, + colorChartsBlue1800: { + description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1", + public: true, + sassName: '$color-charts-blue-1-800', + }, + colorChartsBlue1900: { + description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1", + public: true, + sassName: '$color-charts-blue-1-900', + }, + colorChartsBlue11000: { + description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1", + public: true, + sassName: '$color-charts-blue-1-1000', + }, + colorChartsBlue11100: { + description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1", + public: true, + sassName: '$color-charts-blue-1-1100', + }, + colorChartsBlue11200: { + description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1", + public: true, + sassName: '$color-charts-blue-1-1200', + }, + colorChartsBlue2300: { + description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1", + public: true, + sassName: '$color-charts-blue-2-300', + }, + colorChartsBlue2400: { + description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1", + public: true, + sassName: '$color-charts-blue-2-400', + }, + colorChartsBlue2500: { + description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1", + public: true, + sassName: '$color-charts-blue-2-500', + }, + colorChartsBlue2600: { + description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1", + public: true, + sassName: '$color-charts-blue-2-600', + }, + colorChartsBlue2700: { + description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1", + public: true, + sassName: '$color-charts-blue-2-700', + }, + colorChartsBlue2800: { + description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1", + public: true, + sassName: '$color-charts-blue-2-800', + }, + colorChartsBlue2900: { + description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1", + public: true, + sassName: '$color-charts-blue-2-900', + }, + colorChartsBlue21000: { + description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1", + public: true, + sassName: '$color-charts-blue-2-1000', + }, + colorChartsBlue21100: { + description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1", + public: true, + sassName: '$color-charts-blue-2-1100', + }, + colorChartsBlue21200: { + description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1", + public: true, + sassName: '$color-charts-blue-2-1200', + }, + colorChartsPurple300: { + description: "Color from the 'purple' data visualization palette at a contrast ratio of 3:1", + public: true, + }, + colorChartsPurple400: { + description: "Color from the 'purple' data visualization palette at a contrast ratio of 4:1", + public: true, + }, + colorChartsPurple500: { + description: "Color from the 'purple' data visualization palette at a contrast ratio of 5:1", + public: true, + }, + colorChartsPurple600: { + description: "Color from the 'purple' data visualization palette at a contrast ratio of 6:1", + public: true, + }, + colorChartsPurple700: { + description: "Color from the 'purple' data visualization palette at a contrast ratio of 7:1", + public: true, + }, + colorChartsPurple800: { + description: "Color from the 'purple' data visualization palette at a contrast ratio of 8:1", + public: true, + }, + colorChartsPurple900: { + description: "Color from the 'purple' data visualization palette at a contrast ratio of 9:1", + public: true, + }, + colorChartsPurple1000: { + description: "Color from the 'purple' data visualization palette at a contrast ratio of 10:1", + public: true, + }, + colorChartsPurple1100: { + description: "Color from the 'purple' data visualization palette at a contrast ratio of 11:1", + public: true, + }, + colorChartsPurple1200: { + description: "Color from the 'purple' data visualization palette at a contrast ratio of 12:1", + public: true, + }, + colorChartsPink300: { + description: "Color from the 'pink' data visualization palette at a contrast ratio of 3:1", + public: true, + }, + colorChartsPink400: { + description: "Color from the 'pink' data visualization palette at a contrast ratio of 4:1", + public: true, + }, + colorChartsPink500: { + description: "Color from the 'pink' data visualization palette at a contrast ratio of 5:1", + public: true, + }, + colorChartsPink600: { + description: "Color from the 'pink' data visualization palette at a contrast ratio of 6:1", + public: true, + }, + colorChartsPink700: { + description: "Color from the 'pink' data visualization palette at a contrast ratio of 7:1", + public: true, + }, + colorChartsPink800: { + description: "Color from the 'pink' data visualization palette at a contrast ratio of 8:1", + public: true, + }, + colorChartsPink900: { + description: "Color from the 'pink' data visualization palette at a contrast ratio of 9:1", + public: true, + }, + colorChartsPink1000: { + description: "Color from the 'pink' data visualization palette at a contrast ratio of 10:1", + public: true, + }, + colorChartsPink1100: { + description: "Color from the 'pink' data visualization palette at a contrast ratio of 11:1", + public: true, + }, + colorChartsPink1200: { + description: "Color from the 'pink' data visualization palette at a contrast ratio of 12:1", + public: true, + }, + colorChartsStatusCritical: { + description: 'Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"', + public: true, + themeable: true, + }, + colorChartsStatusHigh: { + 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"', + public: true, + themeable: true, + }, + colorChartsStatusMedium: { + description: 'Color to represent a medium-level of severity. For example: "Sev-3"', + public: true, + themeable: true, + }, + colorChartsStatusLow: { + description: 'Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"', + public: true, + themeable: true, + }, + colorChartsStatusPositive: { + description: 'Color to represent a positive status. *For example: "Success" or "Running"', + public: true, + themeable: true, + }, + colorChartsStatusInfo: { + description: 'Color to represent an informational status. For example: "In-progress" or "Updating"', + public: true, + themeable: true, + }, + colorChartsStatusNeutral: { + 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"', + public: true, + themeable: true, + }, + colorChartsThresholdNegative: { + description: 'The color to represent a threshold with a negative outcome. For example: A maximum limit', + public: true, + themeable: true, + }, + colorChartsThresholdPositive: { + description: 'The color to represent a threshold with a positive outcome. For example: A designated pass rate', + public: true, + themeable: true, + }, + colorChartsThresholdInfo: { + description: + 'The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate', + public: true, + themeable: true, + }, + colorChartsThresholdNeutral: { + description: 'The color to represent a threshold with a neutral outcome. For example: An average or baseline', + public: true, + themeable: true, + }, + colorChartsLineGrid: { + description: 'Color of the grid lines in a chart.', + public: true, + }, + colorChartsLineTick: { + description: 'Color of the tick marks in a chart.', + public: true, + }, + colorChartsLineAxis: { + description: 'Color of the axis lines in a chart.', + public: true, + }, + colorChartsPaletteCategorical1: { + description: 'Color #1 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical2: { + description: 'Color #2 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical3: { + description: 'Color #3 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical4: { + description: 'Color #4 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical5: { + description: 'Color #5 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical6: { + description: 'Color #6 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical7: { + description: 'Color #7 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical8: { + description: 'Color #8 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical9: { + description: 'Color #9 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical10: { + description: 'Color #10 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical11: { + description: 'Color #11 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical12: { + description: 'Color #12 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical13: { + description: 'Color #13 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical14: { + description: 'Color #14 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical15: { + description: 'Color #15 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical16: { + description: 'Color #16 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical17: { + description: 'Color #17 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical18: { + description: 'Color #18 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical19: { + description: 'Color #19 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical20: { + description: 'Color #20 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical21: { + description: 'Color #21 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical22: { + description: 'Color #22 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical23: { + description: 'Color #23 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical24: { + description: 'Color #24 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical25: { + description: 'Color #25 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical26: { + description: 'Color #26 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical27: { + description: 'Color #27 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical28: { + description: 'Color #28 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical29: { + description: 'Color #29 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical30: { + description: 'Color #30 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical31: { + description: 'Color #31 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical32: { + description: 'Color #32 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical33: { + description: 'Color #33 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical34: { + description: 'Color #34 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical35: { + description: 'Color #35 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical36: { + description: 'Color #36 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical37: { + description: 'Color #37 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical38: { + description: 'Color #38 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical39: { + description: 'Color #39 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical40: { + description: 'Color #40 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical41: { + description: 'Color #41 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical42: { + description: 'Color #42 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical43: { + description: 'Color #43 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical44: { + description: 'Color #44 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical45: { + description: 'Color #45 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical46: { + description: 'Color #46 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical47: { + description: 'Color #47 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical48: { + description: 'Color #48 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical49: { + description: 'Color #49 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsPaletteCategorical50: { + description: 'Color #50 on the categorical data visualization palette.', + public: true, + themeable: true, + }, + colorChartsErrorBarMarker: { + description: 'Color for the error bar marker in charts.', + public: true, + themeable: true, + }, +}; + +export default metadata; diff --git a/style-dictionary/one-theme/metadata/color-palette.ts b/style-dictionary/one-theme/metadata/color-palette.ts new file mode 100644 index 0000000000..96390e317a --- /dev/null +++ b/style-dictionary/one-theme/metadata/color-palette.ts @@ -0,0 +1,7 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../../utils/interfaces.js'; + +const metadata: StyleDictionary.MetadataIndex = {}; + +export default metadata; diff --git a/style-dictionary/one-theme/metadata/color-severity.ts b/style-dictionary/one-theme/metadata/color-severity.ts new file mode 100644 index 0000000000..7b5d404a2b --- /dev/null +++ b/style-dictionary/one-theme/metadata/color-severity.ts @@ -0,0 +1,66 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../../utils/interfaces.js'; + +const metadata: StyleDictionary.MetadataIndex = { + colorBackgroundNotificationSeverityCritical: { + description: + 'Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"', + public: true, + themeable: true, + }, + colorBackgroundNotificationSeverityHigh: { + description: + 'Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"', + public: true, + themeable: true, + }, + colorBackgroundNotificationSeverityMedium: { + description: 'Background color in a notification to represent a medium-level of severity. For example: "Sev-3"', + public: true, + themeable: true, + }, + colorBackgroundNotificationSeverityLow: { + description: + 'Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"', + public: true, + themeable: true, + }, + colorBackgroundNotificationSeverityNeutral: { + 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"', + public: true, + themeable: true, + }, + colorTextNotificationSeverityCritical: { + description: + 'Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"', + public: true, + themeable: true, + }, + colorTextNotificationSeverityHigh: { + description: + 'Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"', + public: true, + themeable: true, + }, + colorTextNotificationSeverityMedium: { + description: 'Text color in a notification to represent a medium-level of severity. For example: "Sev-3"', + public: true, + themeable: true, + }, + colorTextNotificationSeverityLow: { + description: + 'Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"', + public: true, + themeable: true, + }, + colorTextNotificationSeverityNeutral: { + 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"', + public: true, + themeable: true, + }, +}; + +export default metadata; diff --git a/style-dictionary/one-theme/metadata/colors.ts b/style-dictionary/one-theme/metadata/colors.ts new file mode 100644 index 0000000000..7421baae11 --- /dev/null +++ b/style-dictionary/one-theme/metadata/colors.ts @@ -0,0 +1,995 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../../utils/interfaces.js'; + +const metadata: StyleDictionary.MetadataIndex = { + colorBackgroundButtonNormalActive: { + description: 'The background color of normal buttons in active state.', + themeable: true, + public: true, + }, + colorBackgroundButtonNormalDefault: { + description: 'The default background color of normal buttons.', + themeable: true, + public: true, + }, + colorBackgroundButtonNormalDisabled: { + description: 'The background color of normal buttons in disabled state.', + themeable: true, + public: true, + }, + colorBackgroundButtonNormalHover: { + description: 'The background color of normal buttons in hover state.', + themeable: true, + public: true, + }, + colorBackgroundButtonLinkActive: { + description: 'The background color of link buttons in active state.', + themeable: true, + public: true, + }, + colorBackgroundButtonLinkDefault: { + description: 'The background color of link buttons in default state.', + themeable: true, + public: true, + }, + colorBackgroundButtonLinkHover: { + description: 'The background color of link buttons in hover state.', + themeable: true, + public: true, + }, + colorBackgroundButtonLinkDisabled: { + description: 'The background color of link buttons in disabled state.', + themeable: true, + public: true, + }, + colorBackgroundToggleButtonNormalPressed: { + description: 'The background color of normal toggle buttons in pressed state.', + themeable: true, + public: true, + }, + colorBackgroundButtonPrimaryActive: { + description: 'The background color of primary buttons in active state.', + themeable: true, + public: true, + }, + colorBackgroundButtonPrimaryDefault: { + description: 'The default background color of primary buttons.', + themeable: true, + public: true, + }, + colorBackgroundButtonPrimaryDisabled: { + description: 'The background color of primary buttons in disabled state.', + themeable: true, + public: true, + }, + colorBackgroundButtonPrimaryHover: { + description: 'The background color of primary buttons in hover state.', + themeable: true, + public: true, + }, + colorBackgroundCellShaded: { + description: 'The background color of shaded table cells.', + themeable: true, + public: true, + }, + colorBackgroundCard: { + description: 'The background color of a card.', + public: true, + themeable: true, + }, + colorBackgroundContainerContent: { + description: + 'The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.', + public: true, + themeable: true, + }, + colorBackgroundContainerHeader: { + description: + 'The background color of container headers. For example: headers of form sections, containers, tables, and card collections.', + public: true, + themeable: true, + }, + colorBackgroundControlChecked: { + 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.', + public: true, + themeable: true, + }, + colorBackgroundControlDefault: { + description: + 'The default background color of form controls. For example: radio buttons and checkboxes default background fill color.', + public: true, + themeable: true, + }, + colorBackgroundControlDisabled: { + description: + 'The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.', + public: true, + themeable: true, + }, + colorBackgroundDropdownItemDefault: { + description: + 'The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.', + public: true, + themeable: true, + }, + colorBackgroundDropdownItemFilterMatch: { + 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.", + public: true, + themeable: true, + }, + colorBackgroundDropdownItemHover: { + description: + 'The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.', + public: true, + themeable: true, + }, + colorBackgroundDropdownItemSelected: { + description: + 'The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns.', + }, + colorBackgroundHomeHeader: { + description: "The background color of the home header, displayed on the Service's home page.", + public: true, + themeable: true, + }, + colorBackgroundInputDefault: { + description: + 'The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.', + public: true, + themeable: true, + }, + colorBackgroundInputDisabled: { + 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.', + public: true, + themeable: true, + }, + colorBackgroundItemSelected: { + description: + 'The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.', + public: true, + themeable: true, + }, + colorBackgroundLayoutMain: { + description: 'The background color of the main content area on a page. For example: content area in app layout.', + public: true, + themeable: true, + }, + colorBackgroundLayoutPanelContent: { + description: + 'The background color of app layout panel content area. For example: The side navigation and tools panel content background color.', + }, + colorBackgroundLayoutToolbar: { + description: + "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons.", + public: true, + themeable: true, + }, + colorBackgroundLayoutToggleActive: { + description: "The background color of the app layout toggle button when it's active.", + public: true, + themeable: true, + }, + colorBackgroundLayoutToggleDefault: { + description: 'The default background color of the app layout toggle button.', + public: true, + themeable: true, + }, + colorBackgroundLayoutToggleHover: { + description: 'The background color of the app layout toggle button on hover.', + public: true, + themeable: true, + }, + colorBackgroundLayoutToggleSelectedActive: { + description: "The background color of the app layout toggle button when it's selected and active.", + public: true, + themeable: true, + }, + colorBackgroundLayoutToggleSelectedDefault: { + description: "The default background color of the app layout toggle button when it's selected.", + public: true, + themeable: true, + }, + colorBackgroundLayoutToggleSelectedHover: { + description: "The background color of the app layout toggle button on hover when it's selected.", + public: true, + themeable: true, + }, + colorBackgroundNotificationBlue: { + description: 'Background color for blue notifications. For example: blue badges and info flash messages.', + public: true, + themeable: true, + }, + colorBackgroundNotificationGreen: { + description: 'Background color for green notifications. For example: green badges and success flash messages.', + public: true, + themeable: true, + }, + colorBackgroundNotificationRed: { + description: 'Background color for red notifications. For example: red badges and error flash messages.', + public: true, + themeable: true, + }, + colorBackgroundNotificationYellow: { + description: 'Background color for yellow notifications. For example: yellow badges and warning flash messages.', + public: true, + themeable: true, + }, + colorBackgroundNotificationGrey: { + description: 'Background color for grey notifications. For example: grey badges.', + public: true, + themeable: true, + }, + colorBackgroundPopover: { + description: 'Background color for the popover container.', + public: true, + themeable: true, + }, + colorBackgroundProgressBarValueDefault: { + description: 'The default background color of the progress bar value.', + public: true, + themeable: true, + }, + colorBackgroundProgressBarDefault: { + description: 'The default background color of the progress bar.', + public: true, + themeable: true, + }, + colorBackgroundSegmentActive: { + description: 'The background color of the active segment in a segmented control.', + public: true, + themeable: true, + }, + colorBackgroundSegmentDefault: { + description: 'The background color of inactive segments in a segmented control.', + public: true, + themeable: true, + }, + colorBackgroundSegmentDisabled: { + description: 'The background color of disabled segments in a segmented control.', + public: true, + themeable: true, + }, + colorBackgroundSegmentHover: { + description: 'The background color of inactive segments in a segmented control on hover.', + public: true, + themeable: true, + }, + colorBackgroundSegmentWrapper: { + description: 'The background color of segmented control wrapper.', + public: false, + themeable: true, + }, + colorBackgroundSliderHandleDefault: { + description: 'The default background color of the slider handle.', + themeable: true, + public: true, + }, + colorBackgroundSliderHandleActive: { + description: 'The background color of the slider handle in active state.', + themeable: true, + public: true, + }, + colorBackgroundSliderRangeDefault: { + description: 'The default background color of the slider range.', + themeable: true, + public: true, + }, + colorBackgroundSliderRangeActive: { + description: 'The background color of the slider range in active state.', + themeable: true, + public: true, + }, + colorBackgroundSliderTrackDefault: { + description: 'The default background color of the slider track.', + themeable: true, + public: true, + }, + colorBackgroundStatusError: { + description: 'The background color of an item in error state. For example: error alerts.', + public: true, + themeable: true, + }, + colorBackgroundStatusInfo: { + description: 'The background color of an informational item. For example: information alerts.', + public: true, + themeable: true, + }, + colorBackgroundDialog: { + description: 'The background color of the feedback/input dialogue box.', + public: true, + themeable: true, + }, + colorBackgroundStatusSuccess: { + description: 'The background color of an item in success state. For example: success alerts.', + public: true, + themeable: true, + }, + colorBackgroundStatusWarning: { + description: 'The background color of an item in warning state. For example: warning alerts.', + public: true, + themeable: true, + }, + colorBackgroundToggleCheckedDisabled: { + description: 'The background color of checked toggles in disabled state.', + themeable: true, + public: true, + }, + colorBackgroundAvatarDefault: { + description: 'The default background color of avatars.', + themeable: false, + public: true, + }, + colorBackgroundAvatarGenAi: { + description: 'The gen-ai background color of avatars.', + themeable: false, + public: true, + }, + colorTextAvatar: { + description: 'The text and icon color of avatars.', + themeable: false, + public: true, + }, + colorBackgroundLoadingBarGenAi: { + description: 'The background color of gen-ai loading bars.', + themeable: false, + public: true, + }, + colorBackgroundChatBubbleOutgoing: { + description: 'The background color of `outgoing` chat bubble.', + themeable: true, + public: true, + }, + colorBackgroundChatBubbleIncoming: { + description: 'The background color of `incoming` chat bubble.', + themeable: true, + public: true, + }, + colorTextChatBubbleOutgoing: { + description: 'Text color of `outgoing` chat bubble.', + themeable: true, + public: true, + }, + colorTextChatBubbleIncoming: { + description: 'Text color of `incoming` chat bubble.', + themeable: true, + public: true, + }, + colorBorderButtonNormalActive: { + description: 'The border color of normal buttons in active state.', + themeable: true, + public: true, + }, + colorBorderButtonLinkDisabled: { + description: 'The border color of link buttons in disabled state.', + themeable: true, + public: true, + }, + colorBorderButtonNormalDefault: { description: 'The border color of normal buttons.', themeable: true, public: true }, + colorBorderToggleButtonNormalPressed: { + description: 'The border color of normal toggle buttons in pressed state.', + themeable: true, + public: true, + }, + colorBorderButtonNormalDisabled: { + description: 'The border color of normal buttons in disabled state.', + themeable: true, + public: true, + }, + colorTextButtonNormalDisabled: { + description: 'The text color of normal buttons in disabled state.', + themeable: true, + public: true, + }, + colorBorderButtonNormalHover: { + description: 'The border color of normal buttons in hover state.', + themeable: true, + public: true, + }, + colorTextButtonIconDisabled: { + description: 'The color of icon buttons in disabled state.', + themeable: true, + public: true, + }, + colorBorderButtonPrimaryActive: { + description: 'The border color of primary buttons in active state.', + themeable: true, + public: true, + }, + colorBorderButtonPrimaryDefault: { + description: 'The border color of primary buttons.', + themeable: true, + public: true, + }, + colorBorderButtonPrimaryDisabled: { + description: 'The border color of primary buttons in disabled state.', + themeable: true, + public: true, + }, + colorBorderButtonPrimaryHover: { + description: 'The border color of primary buttons in hover state.', + themeable: true, + public: true, + }, + colorTextButtonPrimaryDisabled: { + description: 'The text color of primary buttons in disabled state.', + themeable: true, + public: true, + }, + colorItemSelected: { + description: + 'The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items.', + public: true, + themeable: true, + }, + colorBorderCard: { + description: 'The border color of a card.', + public: true, + themeable: true, + }, + colorBorderContainerTop: { + description: + 'The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.', + public: true, + themeable: true, + }, + colorBorderControlDefault: { + description: 'The default border color of form controls. For example: radio buttons and checkboxes.', + public: true, + themeable: true, + }, + colorBorderControlDisabled: { + description: 'The border color of disabled form controls. For example: disabled radio buttons and checkboxes.', + }, + colorBorderDividerDefault: { + 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.', + public: true, + themeable: true, + }, + colorBorderDividerSecondary: { + description: 'The border color for row dividers. For example: row dividers for table and collection preferences.', + public: true, + themeable: true, + }, + colorBorderDropdownContainer: { + description: + 'The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select.', + public: true, + themeable: true, + }, + colorBorderPopover: { + description: 'The border color of the popover.', + public: true, + themeable: true, + }, + colorBorderDropdownItemHover: { + description: + 'The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.', + public: true, + themeable: true, + }, + colorBorderInputDefault: { + description: + 'The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.', + public: true, + themeable: true, + }, + colorBorderItemFocused: { + description: 'The color of focus states. For example: the focus ring around interactive elements.', + public: true, + themeable: true, + }, + colorBorderInputFocused: { + description: + 'The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.', + public: true, + themeable: true, + }, + colorBorderItemPlaceholder: { + description: 'The border color for dividers.', + }, + colorBorderItemSelected: { + description: + 'The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.', + public: true, + themeable: true, + }, + colorBorderDropdownItemFocused: { + 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.', + public: true, + themeable: true, + }, + colorBorderSegmentActive: { + description: 'Deprecated - this token is no longer in use.', + public: true, + themeable: true, + }, + colorBorderSegmentDefault: { + description: 'Deprecated - this token is no longer in use.', + public: true, + themeable: true, + }, + colorBorderSegmentDisabled: { + description: 'Deprecated - this token is no longer in use.', + public: true, + themeable: true, + }, + colorBorderSegmentHover: { + description: 'Deprecated - this token is no longer in use.', + public: true, + themeable: true, + }, + colorBorderStatusError: { + description: 'The border color of an item in error state. For example: error alerts.', + public: true, + themeable: true, + }, + colorBorderStatusInfo: { + description: 'The border color of an informational item. For example: information alerts.', + public: true, + themeable: true, + }, + colorBorderStatusSuccess: { + description: 'The border color of an item in success state. For example: success alerts.', + public: true, + themeable: true, + }, + colorBorderStatusWarning: { + description: 'The border color of an item in warning state. For example: warning alerts.', + public: true, + themeable: true, + }, + colorBorderDialog: { + description: 'The border color of the feedback/input dialogue box.', + public: true, + themeable: true, + }, + colorBorderTutorial: { description: 'The border color of tutorials in the tutorials list in the tutorial panel.' }, + colorForegroundControlDefault: { + description: + 'The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.', + public: true, + themeable: true, + }, + colorForegroundControlDisabled: { + description: + 'The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.', + public: true, + themeable: true, + }, + colorForegroundControlReadOnly: { + description: + 'The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.', + public: true, + themeable: true, + }, + colorTextAccent: { + description: + 'The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section.', + public: true, + themeable: true, + }, + colorTextBodyDefault: { + 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.', + public: true, + themeable: true, + }, + colorTextBodySecondary: { + description: + 'The color of text that is secondary to base text. For example: text in the navigation and tools panels.', + public: true, + themeable: true, + }, + colorTextBreadcrumbCurrent: { + description: 'The text color that marks the breadcrumb item for the page the user is currently viewing.', + themeable: true, + public: true, + }, + colorTextBreadcrumbIcon: { + description: 'The color used for the icon delimiter between breadcrumb items.', + themeable: true, + public: true, + }, + colorTextButtonInlineIconDefault: { + description: 'The default color of inline button icons.', + themeable: true, + public: true, + }, + colorTextButtonInlineIconDisabled: { + description: 'The color of inline button icons in disabled state.', + themeable: true, + public: true, + }, + colorTextButtonInlineIconHover: { + description: 'The color of inline button icons in hover state.', + themeable: true, + public: true, + }, + colorTextButtonNormalActive: { + description: 'The active text color of normal buttons. For example: Active text color in normal and link buttons.', + themeable: true, + public: true, + }, + colorTextToggleButtonNormalPressed: { + description: 'The pressed text color of normal toggle buttons.', + themeable: true, + public: true, + }, + colorTextButtonNormalDefault: { + description: 'The default text color of normal buttons.', + themeable: true, + public: true, + }, + colorTextButtonNormalHover: { + description: 'The hover text color of normal buttons.', + themeable: true, + public: true, + }, + colorTextButtonPrimaryActive: { + description: 'The active text color of primary buttons.', + themeable: true, + public: true, + }, + colorTextLinkButtonNormalDefault: { + description: 'The default text color of link buttons.', + themeable: true, + public: false, + }, + colorTextLinkButtonNormalHover: { + description: 'The hover text color of link buttons.', + themeable: true, + public: false, + }, + colorTextLinkButtonNormalActive: { + description: 'The active text color of link buttons.', + themeable: true, + public: false, + }, + colorTextButtonLinkActive: { + description: 'The text color of link buttons in active state.', + themeable: true, + public: true, + }, + colorTextButtonLinkDefault: { + description: 'The default text color of link buttons.', + themeable: true, + public: true, + }, + colorTextButtonLinkHover: { + description: 'The text color of link buttons in hover state.', + themeable: true, + public: true, + }, + colorTextButtonLinkDisabled: { + description: 'The text color of link buttons in disabled state.', + themeable: true, + public: true, + }, + colorTextButtonPrimaryDefault: { + description: 'The default text color of primary buttons.', + themeable: true, + public: true, + }, + colorTextButtonPrimaryHover: { + description: 'The hover text color of primary buttons.', + themeable: true, + public: true, + }, + colorTextControlDisabled: { + description: + 'The text color of a disabled control. For example: the label and description on a disabled checkbox, radio button, or toggle.', + }, + colorTextCounter: { + description: 'The default color for counters. For example: counters in table headers', + themeable: true, + public: true, + }, + colorTextDropdownFooter: { + description: + 'The default color of dropdown footer text. For example: end of results text in an asynchrounous select and autosuggest.', + }, + colorTextDropdownItemDefault: { + description: + 'The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.', + themeable: true, + public: true, + }, + colorTextDropdownItemDisabled: { + 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.', + themeable: true, + public: true, + }, + colorTextDropdownItemFilterMatch: { + 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.", + public: true, + themeable: true, + }, + colorTextDropdownItemHighlighted: { + description: + 'The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest.', + public: true, + themeable: true, + }, + colorTextDropdownItemSecondary: { + description: + 'The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest.', + }, + colorTextEmpty: { + description: + 'The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.', + public: true, + themeable: true, + }, + colorTextFormDefault: { + 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.', + public: true, + themeable: true, + }, + colorTextFormLabel: { description: 'Component specific: Special because control group is different.' }, + colorTextFormSecondary: { + 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.', + public: true, + themeable: true, + }, + colorTextGroupLabel: { + 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.", + public: true, + themeable: true, + }, + colorTextLabelGenAi: { + description: 'The default color for labels indicating that content is produced by generative AI.', + public: true, + themeable: false, + }, + colorTextHeadingDefault: { + description: + 'The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.', + public: true, + themeable: true, + }, + colorTextHeadingSecondary: { + 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.', + public: true, + themeable: true, + }, + colorTextHomeHeaderDefault: { + description: "The color of the home header's text, displayed on the Service's home page.", + public: true, + themeable: true, + }, + colorTextHomeHeaderSecondary: { + description: "The color of the home header's secondary text, displayed on the Service's home page.", + public: true, + themeable: true, + }, + colorTextInputDisabled: { + 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.', + public: true, + themeable: true, + }, + colorTextInputPlaceholder: { + 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.', + public: true, + themeable: true, + }, + colorTextInteractiveActive: { + description: 'The color of clickable elements in their active state. For example: tabs and icons.', + public: true, + themeable: true, + }, + colorTextInteractiveDefault: { + description: 'The color of clickable elements in their default state. For example: tabs, and icons.', + public: true, + themeable: true, + }, + colorTextInteractiveDisabled: { + description: + 'The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.', + public: true, + themeable: true, + }, + colorTextInteractiveHover: { + description: 'The color of clickable elements on hover. For example: icons on hover.', + public: true, + themeable: true, + }, + colorTextToggleButtonIconPressed: { + description: 'The pressed text color of icon toggle buttons.', + public: true, + themeable: true, + }, + colorTextInteractiveInvertedDefault: { + description: + 'The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.', + themeable: true, + public: true, + }, + colorTextInteractiveInvertedHover: { + description: + 'The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.', + themeable: true, + public: true, + }, + colorTextLayoutToggle: { + description: 'The default color of the app layout toggle.', + public: true, + themeable: true, + }, + colorTextLayoutToggleActive: { + description: "The color of the app layout toggle button when it's active.", + public: true, + themeable: true, + }, + colorTextLayoutToggleHover: { + description: 'The color of the app layout toggle button on hover.', + public: true, + themeable: true, + }, + colorTextLayoutToggleSelected: { + description: "The color of the app layout toggle button when it's selected.", + public: true, + themeable: true, + }, + colorTextLabel: { + description: + "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.", + public: true, + themeable: true, + }, + colorTextLinkDefault: { + description: + 'The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.', + public: true, + themeable: true, + }, + colorTextLinkHover: { + description: + 'The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.', + public: true, + themeable: true, + }, + colorTextLinkSecondaryDefault: { + description: + 'The default color for secondary links. For example: links with lower visual emphasis or supplementary content.', + public: true, + themeable: true, + }, + colorTextLinkSecondaryHover: { + description: + 'The hover color for secondary links. For example: links with lower visual emphasis or supplementary content.', + public: true, + themeable: true, + }, + colorTextLinkInfoDefault: { + description: 'The default color for info links.', + public: true, + themeable: true, + }, + colorTextLinkInfoHover: { + description: 'The hover color for info links.', + public: true, + themeable: true, + }, + colorTextNotificationDefault: { + description: 'Default text color for notifications. For example: the text on badges and flashes.', + public: true, + themeable: true, + }, + colorTextSegmentActive: { + description: 'The text color of the active segment in a segmented control.', + public: true, + themeable: true, + }, + colorTextSegmentDefault: { + description: 'The text color of inactive segments in a segmented control.', + public: true, + themeable: true, + }, + colorTextSegmentHover: { + description: 'The text color of inactive segments in a segmented control on hover.', + public: true, + themeable: true, + }, + colorTextStatusError: { + description: 'The color of error text and icons. For example: form field error text and error status indicators.', + public: true, + themeable: true, + }, + colorTextStatusInactive: { + 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.', + public: true, + themeable: true, + }, + colorTextStatusInfo: { + description: 'The color of info text and icons. For example: info status indicators and info alert icon.', + public: true, + themeable: true, + }, + colorTextStatusSuccess: { + description: 'The color of success text and icons. For example: success status indicators and success alert icon.', + public: true, + themeable: true, + }, + colorTextStatusWarning: { + description: 'The color of warning icons.', + themeable: true, + public: true, + }, + colorTextTopNavigationTitle: { + description: 'The color of the title in the top navigation.', + public: true, + themeable: true, + }, + colorTreeViewConnectorLine: { + description: 'The color of the tree view connector lines.', + public: true, + themeable: true, + }, + colorBoardPlaceholderActive: { + description: 'The color of board placeholder in active state.', + themeable: false, + public: true, + }, + colorBoardPlaceholderHover: { + description: 'The color of board placeholder in hovered state.', + themeable: false, + public: true, + }, + colorDragPlaceholderActive: { + description: 'The color of drag placeholder in active state.', + themeable: false, + public: true, + }, + colorDragPlaceholderHover: { + description: 'The color of drag placeholder in hovered state.', + themeable: false, + public: true, + }, + colorDropzoneBackgroundDefault: { + description: 'The default color of file upload dropzone background.', + themeable: true, + public: true, + }, + colorDropzoneBackgroundHover: { + description: 'The color of file upload dropzone background in hovered state.', + themeable: true, + public: true, + }, + colorDropzoneTextDefault: { + description: 'The default color of file upload dropzone text.', + themeable: true, + public: true, + }, + colorDropzoneTextHover: { + description: 'The color of file upload dropzone text in hovered state.', + themeable: true, + public: true, + }, + colorDropzoneBorderDefault: { + description: 'The default color of file upload dropzone border.', + themeable: true, + public: true, + }, + colorDropzoneBorderHover: { + description: 'The color of file upload dropzone border in hovered state.', + themeable: true, + public: true, + }, +}; + +export default metadata; diff --git a/style-dictionary/one-theme/metadata/index.ts b/style-dictionary/one-theme/metadata/index.ts new file mode 100644 index 0000000000..134d7a991c --- /dev/null +++ b/style-dictionary/one-theme/metadata/index.ts @@ -0,0 +1,38 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import mapValues from 'lodash/mapValues.js'; +import merge from 'lodash/merge.js'; + +import { StyleDictionary } from '../../utils/interfaces.js'; +import { expandMetadata } from '../../utils/metadata.js'; +import theme from '../index.js'; +import borders from './borders.js'; +import colorCharts from './color-charts.js'; +import colorPalette from './color-palette.js'; +import colorSeverity from './color-severity.js'; +import colors from './colors.js'; +import motion from './motion.js'; +import shadows from './shadows.js'; +import sizes from './sizes.js'; +import spacing from './spacing.js'; +import typography from './typography.js'; + +const allTokens = mapValues(theme.tokens, () => ({})); + +const metadata: StyleDictionary.MetadataIndex = expandMetadata( + merge( + {}, + allTokens, + borders, + colorCharts, + colorSeverity, + colorPalette, + colors, + motion, + shadows, + sizes, + spacing, + typography + ) +); +export default metadata; diff --git a/style-dictionary/one-theme/metadata/motion.ts b/style-dictionary/one-theme/metadata/motion.ts new file mode 100644 index 0000000000..dc0a2994fc --- /dev/null +++ b/style-dictionary/one-theme/metadata/motion.ts @@ -0,0 +1,78 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../../utils/interfaces.js'; + +const metadata: StyleDictionary.MetadataIndex = { + motionEasingResponsive: { + description: 'The easing curve for providing responsive yet smooth visual feedback.', + public: true, + themeable: false, + }, + motionEasingSticky: { + description: 'The easing curve for making an element sticky to a certain state.', + public: true, + themeable: false, + }, + motionEasingExpressive: { + description: "The easing curve for drawing a user's attention in an expressive way.", + public: true, + themeable: false, + }, + + motionDurationResponsive: { + description: 'The duration for making the motion feel quick and responsive.', + public: true, + themeable: false, + }, + motionDurationExpressive: { + description: 'The duration for accommodating the motion with more expressiveness.', + public: true, + themeable: false, + }, + motionDurationComplex: { + description: 'The duration for drawing more attention or accommodating for more complexity.', + public: true, + themeable: false, + }, + + motionDurationAvatarGenAiGradient: { + description: 'The duration for gradient motion of gen-ai avatars.', + public: true, + themeable: false, + }, + motionDurationAvatarLoadingDots: { + description: 'The duration for loading motion of avatars.', + public: true, + themeable: false, + }, + motionEasingAvatarGenAiGradient: { + description: 'The easing curve for gradient motion of gen-ai avatars.', + public: true, + themeable: false, + }, + + motionKeyframesFadeIn: { + description: 'The CSS keyframes for showing an element.', + public: true, + themeable: false, + }, + motionKeyframesFadeOut: { + description: 'The CSS keyframes for hiding an element.', + public: true, + themeable: false, + }, + motionKeyframesScalePopup: { + description: "The CSS keyframes for scaling up an element to draw the user's attention.", + public: true, + themeable: false, + visualRefreshOnly: true, + }, + motionKeyframesStatusIconError: { + description: "The CSS keyframes applied to an error status icon to draw the user's attention.", + public: true, + themeable: false, + visualRefreshOnly: true, + }, +}; + +export default metadata; diff --git a/style-dictionary/one-theme/metadata/shadows.ts b/style-dictionary/one-theme/metadata/shadows.ts new file mode 100644 index 0000000000..9b9c0ebe37 --- /dev/null +++ b/style-dictionary/one-theme/metadata/shadows.ts @@ -0,0 +1,29 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../../utils/interfaces.js'; + +const metadata: StyleDictionary.MetadataIndex = { + shadowCard: { + description: 'The shadow of a card.', + public: true, + themeable: true, + }, + shadowContainer: { description: 'Shadow for containers and cards.' }, + shadowContainerActive: { description: 'Shadow for containers and cards in active state.', public: true }, + shadowDropup: { + description: + 'Shadow for dropdown elements that pop up above the trigger, for example a dropdown at the bottom of the screen.', + }, + shadowPanel: { description: 'Shadow for global elements like app layout panels and top navigation.' }, + shadowPanelToggle: { description: 'Shadow for circular toggles in visual refresh.' }, + shadowSplitBottom: { + description: + 'Adjustment to the panel shadow so it displays the same for panels positioned at the bottom of the screen.', + }, + shadowSplitSide: { + description: 'Adjustment to the panel shadow so it does not bleed onto adjacent panels to the right of it.', + }, + shadowSticky: { description: 'Shadow for sticky elements or inner elements that already have shadow around.' }, +}; + +export default metadata; diff --git a/style-dictionary/one-theme/metadata/sizes.ts b/style-dictionary/one-theme/metadata/sizes.ts new file mode 100644 index 0000000000..5231424e5b --- /dev/null +++ b/style-dictionary/one-theme/metadata/sizes.ts @@ -0,0 +1,14 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../../utils/interfaces.js'; + +const metadata: StyleDictionary.MetadataIndex = { + sizeVerticalInput: { + description: + 'The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.', + public: true, + themeable: true, + }, +}; + +export default metadata; diff --git a/style-dictionary/one-theme/metadata/spacing.ts b/style-dictionary/one-theme/metadata/spacing.ts new file mode 100644 index 0000000000..40c0879139 --- /dev/null +++ b/style-dictionary/one-theme/metadata/spacing.ts @@ -0,0 +1,189 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../../utils/interfaces.js'; + +const metadata: StyleDictionary.MetadataIndex = { + spaceAlertVertical: { + description: 'The vertical padding inside alert components.', + public: true, + themeable: true, + }, + spaceScaled2xL: { sassName: '$space-scaled-2x-l' }, + spaceScaled2xM: { sassName: '$space-scaled-2x-m' }, + spaceScaled2xNone: { sassName: '$space-scaled-2x-none' }, + spaceScaled2xS: { sassName: '$space-scaled-2x-s' }, + spaceScaled2xXl: { sassName: '$space-scaled-2x-xl' }, + spaceScaled2xXs: { sassName: '$space-scaled-2x-xs' }, + spaceScaled2xXxl: { sassName: '$space-scaled-2x-xxl' }, + spaceScaled2xXxs: { sassName: '$space-scaled-2x-xxs' }, + spaceScaled2xXxxl: { sassName: '$space-scaled-2x-xxxl' }, + spaceScaled2xXxxs: { sassName: '$space-scaled-2x-xxxs' }, + + spaceStaticL: { + description: 'The static L spacing unit.', + public: true, + themeable: false, + }, + spaceStaticM: { + description: 'The static M spacing unit.', + public: true, + themeable: false, + }, + spaceStaticS: { + description: 'The static S spacing unit.', + public: true, + themeable: false, + }, + spaceStaticXl: { + description: 'The static XL spacing unit.', + public: true, + themeable: false, + }, + spaceStaticXs: { + description: 'The static XS spacing unit.', + public: true, + themeable: false, + }, + spaceStaticXxl: { + description: 'The static XXL spacing unit.', + public: true, + themeable: false, + }, + spaceStaticXxs: { + description: 'The static XXS spacing unit.', + public: true, + themeable: false, + }, + spaceStaticXxxl: { + description: 'The static XXXL spacing unit.', + public: true, + themeable: false, + }, + spaceStaticXxxs: { + description: 'The static XXXS spacing unit.', + public: true, + themeable: false, + }, + spaceScaledL: { + description: 'The L spacing unit which scales between modes. For example: vertical space between form fields.', + public: true, + themeable: false, + }, + spaceScaledM: { + description: 'The M spacing unit which scales between modes. For example: horizontal padding inside a popover.', + public: true, + themeable: false, + }, + spaceScaledS: { + description: 'The S spacing unit which scales between modes. For example: vertical padding inside a popover.', + public: true, + themeable: false, + }, + spaceScaledXl: { + description: + 'The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.', + public: true, + themeable: false, + }, + spaceScaledXs: { + description: + 'The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.', + public: true, + themeable: false, + }, + spaceScaledXxl: { + description: + 'The XXL spacing unit which scales between modes. For example: left indentation of grouped options in a select.', + public: true, + themeable: false, + }, + spaceScaledXxs: { + description: + 'The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.', + public: true, + themeable: false, + }, + spaceScaledXxxl: { + description: + 'The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.', + public: true, + themeable: false, + }, + spaceScaledXxxs: { + description: 'The XXXS spacing unit which scales between modes.', + public: true, + themeable: false, + }, + spaceCardHorizontalDefault: { + description: 'The default horizontal padding inside a card.', + public: true, + themeable: true, + }, + spaceCardHorizontalEmbedded: { + description: 'The horizontal padding inside embedded a card.', + public: true, + themeable: true, + }, + spaceCardVerticalDefault: { + description: 'The default vertical padding inside a card.', + public: true, + themeable: true, + }, + spaceCardVerticalEmbedded: { + description: 'The vertical padding inside embedded a card.', + public: true, + themeable: true, + }, + spaceContainerHorizontal: { + description: 'The horizontal padding inside a container.', + public: true, + themeable: false, + }, + spaceFieldHorizontal: { + description: 'The horizontal padding inside field components.', + public: true, + themeable: false, + }, + spaceTabsVertical: { + description: 'The vertical padding inside tabs.', + public: true, + themeable: true, + }, + spaceTreeViewIndentation: { + description: 'The indentation of tree view items.', + public: true, + themeable: false, + }, + spaceButtonHorizontal: { + description: 'The horizontal padding inside buttons.', + public: true, + themeable: true, + }, + spaceButtonVertical: { + description: 'The vertical padding inside buttons.', + public: true, + themeable: true, + }, + spaceTokenVertical: { + description: 'The vertical padding inside tokens.', + public: true, + themeable: true, + }, + spaceFieldVertical: { + description: 'The vertical padding inside control components.', + public: true, + themeable: true, + }, + spaceOptionPaddingVertical: { + description: 'The vertical padding inside dropdown option items.', + public: true, + themeable: false, + }, + spaceOptionPaddingHorizontal: { + description: 'The horizontal padding inside dropdown option items.', + public: true, + themeable: false, + }, +}; + +export default metadata; diff --git a/style-dictionary/one-theme/metadata/typography.ts b/style-dictionary/one-theme/metadata/typography.ts new file mode 100644 index 0000000000..fe32a92f1d --- /dev/null +++ b/style-dictionary/one-theme/metadata/typography.ts @@ -0,0 +1,237 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../../utils/interfaces.js'; + +const metadata: StyleDictionary.MetadataIndex = { + fontButtonLetterSpacing: { + description: 'The default letter spacing for button text.', + }, + fontChartDetailSize: { + description: 'Used for secondary chart text, e.g. mixed chart axes and pie chart label descriptions.', + }, + fontDisplayLabelWeight: { + description: 'The default font weight for labels. For example, keys in key-value pairs, or form field labels.', + }, + fontFamilyBase: { + description: 'The default font family that will be applied globally to the product interface.', + themeable: true, + public: true, + }, + fontFamilyDisplay: { + description: 'The font family for display text. Defaults to the base font family.', + themeable: true, + public: true, + }, + fontFamilyHeading: { + description: 'The font family for headings and component headers. Defaults to the base font family.', + themeable: true, + public: true, + }, + fontFamilyMonospace: { + description: 'The monospace font family that will be applied globally to the product interface.', + themeable: true, + public: true, + }, + fontHeaderH2DescriptionLineHeight: { sassName: '$font-header-h2-description-line-height' }, + fontHeaderH2DescriptionSize: { sassName: '$font-header-h2-description-size' }, + fontSizeBodyM: { + description: 'The default font size for regular body text. For example,

tags in text content, or button text.', + themeable: true, + public: true, + }, + fontSizeBodyS: { + description: 'The default font size for small body text. For example, form field descriptions, or badge text.', + themeable: true, + public: true, + }, + fontSizeDisplayL: { + description: 'The default font size for large display text.', + themeable: true, + public: true, + }, + fontSizeHeadingXl: { + description: 'The default font size for h1s.', + themeable: true, + public: true, + }, + fontSizeHeadingL: { + description: 'The default font size for h2s.', + themeable: true, + public: true, + }, + fontSizeHeadingM: { + description: 'The default font size for h3s.', + themeable: true, + public: true, + }, + fontSizeHeadingS: { + description: 'The default font size for h4s.', + themeable: true, + public: true, + }, + fontSizeHeadingXs: { + description: 'The default font size for h5s.', + themeable: true, + public: true, + }, + fontWeightNormal: { + description: 'The default normal font weight.', + themeable: true, + public: true, + }, + fontWeightBold: { + description: 'The default bold font weight for body text. For example, and tags in text content.', + themeable: true, + public: true, + }, + fontWeightLighter: { + description: 'The default lighter font weight.', + themeable: true, + public: true, + }, + fontWeightHeavy: { + description: 'The default heavy font weight.', + themeable: true, + public: true, + }, + fontWeightButton: { + description: 'The default font weight for button text.', + themeable: true, + public: true, + }, + fontWeightAlertHeader: { + description: 'The default font weight for alert header text.', + themeable: true, + public: true, + }, + fontWeightFlashbarHeader: { + description: 'The default font weight for flashbar header text.', + themeable: true, + public: true, + }, + fontWeightHeadingXl: { + description: 'The default font weight for h1s.', + themeable: true, + public: true, + }, + fontWeightHeadingL: { + description: 'The default font weight for h2s.', + themeable: true, + public: true, + }, + fontWeightHeadingM: { + description: 'The default font weight for h3s.', + themeable: true, + public: true, + }, + fontWeightHeadingS: { + description: 'The default font weight for h4s.', + themeable: true, + public: true, + }, + fontWeightHeadingXs: { + description: 'The default font weight for h5s.', + themeable: true, + public: true, + }, + fontWeightDisplayL: { + description: 'The default font weight for large display text.', + themeable: true, + public: true, + }, + fontSizeTabs: { + description: 'The default font size for tabs.', + themeable: true, + public: true, + }, + fontWeightTabs: { + description: 'The default font weight for tabs.', + themeable: true, + public: true, + }, + fontWeightTabsDisabled: { + description: 'The default font weight for disabled tabs.', + themeable: true, + public: true, + }, + letterSpacingBodyS: { + description: 'The default letter spacing for small body text.', + }, + letterSpacingDisplayL: { + description: 'The default letter spacing for large display text.', + themeable: true, + public: true, + }, + letterSpacingHeadingXl: { + description: 'The default letter spacing for h1s.', + themeable: true, + public: true, + }, + letterSpacingHeadingL: { + description: 'The default letter spacing for h2s.', + themeable: true, + public: true, + }, + letterSpacingHeadingM: { + description: 'The default letter spacing for h3s.', + themeable: true, + public: true, + }, + letterSpacingHeadingS: { + description: 'The default letter spacing for h4s.', + themeable: true, + public: true, + }, + letterSpacingHeadingXs: { + description: 'The default letter spacing for h5s.', + themeable: true, + public: true, + }, + lineHeightBodyM: { + description: 'The default line height for regular body text.', + themeable: true, + public: true, + }, + lineHeightBodyS: { + description: 'The default line height for small body text.', + themeable: true, + public: true, + }, + lineHeightDisplayL: { + description: 'The default line height for large display text.', + themeable: true, + public: true, + }, + lineHeightHeadingXl: { + description: 'The default line height for h1s.', + themeable: true, + public: true, + }, + lineHeightHeadingL: { + description: 'The default line height for h2s.', + themeable: true, + public: true, + }, + lineHeightHeadingM: { + description: 'The default line height for h3s.', + themeable: true, + public: true, + }, + lineHeightHeadingS: { + description: 'The default line height for h4s.', + themeable: true, + public: true, + }, + lineHeightHeadingXs: { + description: 'The default line height for h5s.', + themeable: true, + public: true, + }, + lineHeightTabs: { + description: 'The default line height for tabs.', + themeable: true, + public: true, + }, +}; + +export default metadata; diff --git a/style-dictionary/one-theme/motion.ts b/style-dictionary/one-theme/motion.ts new file mode 100644 index 0000000000..b80aa856b8 --- /dev/null +++ b/style-dictionary/one-theme/motion.ts @@ -0,0 +1,58 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { tokenStylesSuffix } from '../utils/environment.js'; +import { expandMotionDictionary } from '../utils/index.js'; +import { StyleDictionary } from '../utils/interfaces.js'; + +const tokens: StyleDictionary.MotionDictionary = { + motionDurationExtraFast: { default: '45ms', disabled: '0ms' }, + motionDurationExtraSlow: { default: '270ms', disabled: '0ms' }, + motionDurationFast: { default: '90ms', disabled: '0ms' }, + motionDurationModerate: { default: '135ms', disabled: '0ms' }, + motionDurationRefreshOnlyAmbient: { default: '2000ms', disabled: '0ms' }, + motionDurationRefreshOnlyFast: { default: '115ms', disabled: '0ms' }, + motionDurationRefreshOnlyMedium: { default: '165ms', disabled: '0ms' }, + motionDurationRefreshOnlySlow: { default: '250ms', disabled: '0ms' }, + motionDurationAvatarGenAiGradient: { default: '3600ms', disabled: '0ms' }, + motionDurationAvatarLoadingDots: { default: '1200ms', disabled: '0ms' }, + motionDurationRotate180: '{motionDurationModerate}', + motionDurationRotate90: '{motionDurationModerate}', + motionDurationShowPaced: '{motionDurationSlow}', + motionDurationShowQuick: '{motionDurationModerate}', + motionDurationSlow: { default: '180ms', disabled: '0ms' }, + motionDurationTransitionQuick: '{motionDurationFast}', + motionDurationTransitionShowPaced: '{motionDurationSlow}', + motionDurationTransitionShowQuick: '{motionDurationFast}', + + motionEasingEaseOutQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)', + motionEasingRefreshOnlyA: 'cubic-bezier(0, 0, 0, 1)', + motionEasingRefreshOnlyB: 'cubic-bezier(1, 0, 0.83, 1)', + motionEasingRefreshOnlyC: 'cubic-bezier(0.84, 0, 0.16, 1)', + motionEasingRefreshOnlyD: 'cubic-bezier(0.33, 0, 0.67, 1)', + motionEasingAvatarGenAiGradient: 'cubic-bezier(0.7, 0, 0.3, 1)', + motionEasingRotate180: '{motionEasingEaseOutQuart}', + motionEasingRotate90: '{motionEasingEaseOutQuart}', + motionEasingShowPaced: 'ease-out', + motionEasingShowQuick: 'ease-out', + motionEasingTransitionQuick: 'linear', + motionEasingTransitionShowPaced: 'ease-out', + motionEasingTransitionShowQuick: 'linear', + + motionEasingResponsive: '{motionEasingRefreshOnlyA}', + motionEasingSticky: '{motionEasingRefreshOnlyB}', + motionEasingExpressive: '{motionEasingRefreshOnlyC}', + + motionDurationResponsive: '{motionDurationRefreshOnlyFast}', + motionDurationExpressive: '{motionDurationRefreshOnlyMedium}', + motionDurationComplex: '{motionDurationRefreshOnlySlow}', + + motionKeyframesFadeIn: 'awsui-fade-in-' + tokenStylesSuffix, + motionKeyframesFadeOut: 'awsui-fade-out-' + tokenStylesSuffix, + motionKeyframesStatusIconError: 'awsui-status-icon-error-' + tokenStylesSuffix, + motionKeyframesScalePopup: 'awsui-scale-popup-' + tokenStylesSuffix, +}; + +const expandedTokens: StyleDictionary.ExpandedMotionScopeDictionary = expandMotionDictionary(tokens); + +export { expandedTokens as tokens }; +export const mode: StyleDictionary.ModeIdentifier = 'motion'; diff --git a/style-dictionary/one-theme/shadows.ts b/style-dictionary/one-theme/shadows.ts new file mode 100644 index 0000000000..7ae686037d --- /dev/null +++ b/style-dictionary/one-theme/shadows.ts @@ -0,0 +1,57 @@ +// 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.ShadowsDictionary = { + shadowCard: 'none', + shadowItemCard: '{shadowCard}', + shadowContainer: { + light: '0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)', // 1px grey-200 faux border + dark: '0px 1px 8px 2px rgba(0, 7, 22, 0.6)', + }, + shadowContainerActive: { + light: '0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a', + dark: '0px 1px 1px 1px #192534, 0px 6px 36px #00040c', + }, + shadowDropdown: { light: '0px 4px 20px 1px rgba(0, 7, 22, 0.10)', dark: '0px 4px 20px 1px rgba(0, 4, 12, 1)' }, + shadowDropup: '{shadowDropdown}', + shadowFlashCollapsed: '0px 4px 4px rgba(0, 0, 0, 0.25)', + shadowFlashSticky: { + light: '0px 4px 8px rgba(0, 7, 22, 0.10)', + dark: '0px 4px 8px rgba(0, 7, 22, 0.5)', + }, + shadowModal: '{shadowDropdown}', + shadowPanel: { + light: '0px 0px 0px 1px #b6bec9', + dark: '0px 0px 0px 1px #414d5c', + }, + shadowPanelToggle: { light: '0px 6px 12px 1px rgba(0, 7, 22, 0.12)', dark: '0px 6px 12px 1px rgba(0, 7, 22, 1)' }, + shadowPopover: '{shadowDropdown}', + shadowSplitBottom: { + light: '0px -36px 36px -36px rgba(0, 7, 22, 0.10)', + dark: '0px -36px 36px -36px rgba(0, 7, 22, 1)', + }, + shadowSplitSide: { + light: '-1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.10)', + dark: '-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1)', + }, + shadowSticky: { light: '0px 4px 8px 1px rgba(0, 7, 22, 0.10)', dark: '0px 4px 8px 1px rgba(0, 7, 22, 0.5)' }, + shadowStickyEmbedded: { + light: '0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10)', // 2px grey-200 faux bottom border + dark: '0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1)', // 2px grey-600 faux bottom border + }, + shadowStickyColumnFirst: { + light: '4px 0px 8px 1px rgba(0, 7, 22, 0.1)', + dark: '0px 4px 8px 1px rgba(0, 7, 22, 0.5)', + }, + shadowStickyColumnLast: { + light: '-4px 0 8px 1px rgba(0, 28, 36, 0.1)', + dark: '0px 4px 8px 1px rgba(0, 7, 22, 0.5)', + }, +}; + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); + +export { expandedTokens as tokens }; +export const mode: StyleDictionary.ModeIdentifier = 'color'; diff --git a/style-dictionary/one-theme/sizes.ts b/style-dictionary/one-theme/sizes.ts new file mode 100644 index 0000000000..d80230db33 --- /dev/null +++ b/style-dictionary/one-theme/sizes.ts @@ -0,0 +1,21 @@ +// 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 = { + sizeCalendarGridWidth: '238px', + sizeControl: '16px', + sizeIconBig: '32px', + sizeIconLarge: '48px', + sizeIconMedium: '20px', + sizeIconNormal: '16px', + sizeTableSelectionHorizontal: '40px', + sizeVerticalInput: { comfortable: '32px', compact: '28px' }, + sizeVerticalPanelIconOffset: { comfortable: '15px', compact: '13px' }, +}; + +const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(tokens); + +export { expandedTokens as tokens }; +export const mode: StyleDictionary.ModeIdentifier = 'density'; diff --git a/style-dictionary/one-theme/spacing.ts b/style-dictionary/one-theme/spacing.ts new file mode 100644 index 0000000000..ba27185bbb --- /dev/null +++ b/style-dictionary/one-theme/spacing.ts @@ -0,0 +1,135 @@ +// 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 = { + spaceAlertActionLeft: '{spaceS}', + spaceAlertHorizontal: '{spaceFlashbarHorizontal}', + spaceAlertMessageRight: '{spaceXxs}', + spaceAlertVertical: '{spaceFlashbarVertical}', + spaceButtonFocusOutlineGutter: '4px', + spaceButtonHorizontal: '{spaceScaledL}', + spaceButtonVertical: '{spaceScaledXxs}', + spaceTokenVertical: '{spaceScaledXxs}', + spaceFieldVertical: { comfortable: '5px', compact: '3px' }, + spaceButtonIconFocusOutlineGutterVertical: '0px', + spaceButtonIconOnlyHorizontal: { comfortable: '6px', compact: '{spaceXxs}' }, + spaceButtonInlineIconFocusOutlineGutter: '0px', + spaceButtonModalDismissVertical: '{spaceScaledXxxs}', + spaceCalendarGridFocusOutlineGutter: '-5px', + spaceCalendarGridSelectedFocusOutlineGutter: '{spaceCalendarGridFocusOutlineGutter}', + spaceCalendarGridGutter: '6px', + spaceCardHorizontalDefault: '{spaceContainerHorizontal}', + spaceCardHorizontalEmbedded: { comfortable: '{spaceS}', compact: '10px' }, + spaceCardVerticalDefault: '{spaceScaledM}', + spaceCardVerticalEmbedded: { comfortable: '10px', compact: '{spaceXs}' }, + spaceItemCardHorizontalDefault: '{spaceCardHorizontalDefault}', + spaceItemCardHorizontalEmbedded: '{spaceCardHorizontalEmbedded}', + spaceItemCardVerticalDefault: '{spaceCardVerticalDefault}', + spaceItemCardVerticalEmbedded: '{spaceCardVerticalEmbedded}', + spaceCodeEditorStatusFocusOutlineGutter: '-7px', + spaceContainerContentTop: '{spaceXxs}', + spaceContainerHeaderTop: '{spaceS}', + spaceContainerHeaderBottom: '{spaceScaledXs}', + spaceContainerHorizontal: '{spaceL}', + spaceContentHeaderPaddingBottom: '{spaceScaledM}', + spaceDarkHeaderOverlapDistance: { comfortable: '36px', compact: '32px' }, + spaceExpandableSectionIconOffsetTop: '{spaceScaled2xXxs}', + spaceFieldHorizontal: '{spaceS}', + spaceFieldIconOffset: '36px', + spaceFilteringTokenDismissButtonFocusOutlineGutter: '-5px', + spaceFilteringTokenOperationSelectFocusOutlineGutter: '-5px', + spaceFlashbarActionLeft: '{spaceS}', + spaceFlashbarDismissRight: '0px', + spaceFlashbarHorizontal: '{spaceM}', + spaceFlashbarVertical: '{spaceScaledXs}', + spaceGridGutter: { comfortable: '{spaceL}', compact: '{spaceM}' }, + spaceKeyValueGap: '0px', + spaceLayoutContentBottom: '{spaceScaled2xXxxl}', + spaceLayoutContentHorizontal: '{spaceScaled2xXl}', + spaceLayoutToggleDiameter: '36px', + spaceLayoutTogglePadding: '{spaceStaticS}', + spaceModalContentBottom: '{spaceScaled2xM}', + spaceModalHorizontal: '{spaceContainerHorizontal}', + spacePanelContentBottom: '{spaceScaledXxxl}', + spacePanelContentTop: '{spaceScaledL}', + spacePanelDividerMarginHorizontal: '{spaceXs}', + spacePanelHeaderVertical: '{spaceScaledL}', + spacePanelNavLeft: '28px', + spacePanelSideLeft: '28px', + spacePanelSideRight: '{spaceScaledXl}', + spacePanelSplitTop: '{spaceScaledL}', + spacePanelSplitBottom: '{spaceScaledL}', + spaceSegmentedControlFocusOutlineGutter: '6px', + spaceTabsContentTop: '{spaceScaledS}', + spaceTabsFocusOutlineGutter: '-8px', + spaceTabsVertical: '{spaceScaledXxs}', + spaceTableContentBottom: '{spaceXxs}', + spaceTableEmbeddedHeaderTop: '0px', + spaceTableFooterHorizontal: '{spaceTableHeaderHorizontal}', + spaceTableHeaderFocusOutlineGutter: { comfortable: '0px', compact: '-1px' }, + spaceTableHeaderHorizontal: '0px', + spaceTableHeaderToolsBottom: '0px', + spaceTableHeaderToolsFullPageBottom: '4px', + spaceTableHorizontal: '{spaceContainerHorizontal}', + spaceTreeViewIndentation: '{spaceXl}', + spaceTileGutter: { comfortable: '{spaceXl}', compact: '{spaceM}' }, + spaceActionCardHorizontalDefault: '{spaceCardHorizontalDefault}', + spaceActionCardHorizontalEmbedded: '{spaceCardHorizontalEmbedded}', + spaceActionCardVerticalDefault: '{spaceCardVerticalDefault}', + spaceActionCardVerticalEmbedded: '{spaceCardVerticalEmbedded}', + spaceActionCardDescriptionPaddingTop: '{spaceScaledXxs}', + spaceActionCardContentPaddingTop: '{spaceScaledXs}', + + spaceOptionPaddingVertical: '{spaceXxs}', + spaceOptionPaddingHorizontal: '{spaceL}', + + spaceScaled2xNone: '{spaceNone}', + spaceScaled2xXxxs: { comfortable: '{spaceXxxs}', compact: '{spaceNone}' }, + spaceScaled2xXxs: { comfortable: '{spaceXxs}', compact: '{spaceNone}' }, + spaceScaled2xXs: { comfortable: '{spaceXs}', compact: '{spaceNone}' }, + spaceScaled2xS: { comfortable: '{spaceS}', compact: '{spaceXxs}' }, + spaceScaled2xM: { comfortable: '{spaceM}', compact: '{spaceXs}' }, + spaceScaled2xL: { comfortable: '{spaceL}', compact: '{spaceS}' }, + spaceScaled2xXl: { comfortable: '{spaceXl}', compact: '{spaceM}' }, + spaceScaled2xXxl: { comfortable: '{spaceXxl}', compact: '{spaceL}' }, + spaceScaled2xXxxl: { comfortable: '{spaceXxxl}', compact: '{spaceXl}' }, + + spaceScaledNone: '{spaceNone}', + spaceScaledXxxs: { comfortable: '{spaceXxxs}', compact: '{spaceNone}' }, + spaceScaledXxs: { comfortable: '{spaceXxs}', compact: '{spaceXxxs}' }, + spaceScaledXs: { comfortable: '{spaceXs}', compact: '{spaceXxs}' }, + spaceScaledS: { comfortable: '{spaceS}', compact: '{spaceXs}' }, + spaceScaledM: { comfortable: '{spaceM}', compact: '{spaceS}' }, + spaceScaledL: { comfortable: '{spaceL}', compact: '{spaceM}' }, + spaceScaledXl: { comfortable: '{spaceXl}', compact: '{spaceL}' }, + spaceScaledXxl: { comfortable: '{spaceXxl}', compact: '{spaceXl}' }, + spaceScaledXxxl: { comfortable: '{spaceXxxl}', compact: '{spaceXxl}' }, + + spaceStaticXxxs: '{spaceXxxs}', + spaceStaticXxs: '{spaceXxs}', + spaceStaticXs: '{spaceXs}', + spaceStaticS: '{spaceS}', + spaceStaticM: '{spaceM}', + spaceStaticL: '{spaceL}', + spaceStaticXl: '{spaceXl}', + spaceStaticXxl: '{spaceXxl}', + spaceStaticXxxl: '{spaceXxxl}', + + spaceNone: '0px', + spaceXxxs: '2px', + spaceXxs: '4px', + spaceXs: '8px', + spaceS: '12px', + spaceM: '16px', + spaceL: '20px', + spaceXl: '24px', + spaceXxl: '32px', + spaceXxxl: '40px', +}; + +const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(tokens); + +export { expandedTokens as tokens }; +export const mode: StyleDictionary.ModeIdentifier = 'density'; diff --git a/style-dictionary/one-theme/typography.ts b/style-dictionary/one-theme/typography.ts new file mode 100644 index 0000000000..0fd488808f --- /dev/null +++ b/style-dictionary/one-theme/typography.ts @@ -0,0 +1,64 @@ +// 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 = { + fontBoxValueLargeWeight: '700', + fontButtonLetterSpacing: '0.005em', + fontChartDetailSize: '{fontSizeBodyS}', + fontDisplayLabelWeight: '700', + fontExpandableHeadingSize: '{fontSizeHeadingS}', + fontFamilyBase: "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif", + fontFamilyDisplay: '{fontFamilyBase}', + fontFamilyHeading: '{fontFamilyBase}', + fontFamilyMonospace: "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace", + fontHeaderH2DescriptionLineHeight: '{lineHeightBodyM}', + fontHeaderH2DescriptionSize: '{fontSizeBodyM}', + fontLinkButtonLetterSpacing: '{fontButtonLetterSpacing}', + fontLinkButtonWeight: '{fontWeightButton}', + fontPanelHeaderLineHeight: '{lineHeightHeadingM}', + fontPanelHeaderSize: '{fontSizeHeadingM}', + fontSizeBodyM: '14px', + fontSizeBodyS: '12px', + fontSizeDisplayL: '42px', + fontSizeHeadingXl: '24px', + fontSizeHeadingL: '20px', + fontSizeHeadingM: '18px', + fontSizeHeadingS: '16px', + fontSizeHeadingXs: '14px', + fontSmoothingMozOsx: 'grayscale', + fontSmoothingWebkit: 'antialiased', + fontSizeTabs: '{fontSizeHeadingS}', + fontWeightTabs: '700', + fontWeightTabsDisabled: '{fontWayfindingLinkActiveWeight}', + lineHeightTabs: '{lineHeightHeadingS}', + fontWayfindingLinkActiveWeight: '700', + fontWeightButton: '700', + fontWeightAlertHeader: '700', + fontWeightFlashbarHeader: '700', + fontWeightHeadingXl: '700', + fontWeightHeadingL: '700', + fontWeightHeadingM: '700', + fontWeightHeadingS: '700', + fontWeightHeadingXs: '700', + fontWeightDisplayL: '700', + fontWeightHeavy: '700', + fontWeightNormal: '400', + fontWeightBold: '700', + fontWeightLighter: '300', + letterSpacingBodyS: '0.005em', + letterSpacingDisplayL: '-0.03em', + letterSpacingHeadingXl: '-0.02em', + letterSpacingHeadingL: '-0.015em', + letterSpacingHeadingM: '-0.010em', + letterSpacingHeadingS: '-0.005em', + letterSpacingHeadingXs: 'normal', + lineHeightBodyM: '20px', + lineHeightBodyS: '16px', + lineHeightDisplayL: '48px', + lineHeightHeadingXl: '30px', + lineHeightHeadingL: '24px', + lineHeightHeadingM: '22px', + lineHeightHeadingS: '20px', + lineHeightHeadingXs: '18px', +}; From e77110b7bf046fcdb8f53da4ba68e6c546d69821 Mon Sep 17 00:00:00 2001 From: at-susie Date: Thu, 7 May 2026 16:53:28 +0200 Subject: [PATCH 2/2] chore: Update theme-switcher --- build-tools/utils/themes.js | 2 +- pages/app/app-context.tsx | 2 + pages/app/components/theme-switcher.tsx | 49 ++++++++++++------- pages/app/index.tsx | 6 ++- style-dictionary/one-theme-secondary/index.ts | 17 +++++++ style-dictionary/one-theme/colors.ts | 6 +-- 6 files changed, 60 insertions(+), 22 deletions(-) create mode 100644 style-dictionary/one-theme-secondary/index.ts diff --git a/build-tools/utils/themes.js b/build-tools/utils/themes.js index 5066477bbf..9e97d1a6a6 100644 --- a/build-tools/utils/themes.js +++ b/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'], }, ]; diff --git a/pages/app/app-context.tsx b/pages/app/app-context.tsx index b0b2d48bd8..5ccb49794b 100644 --- a/pages/app/app-context.tsx +++ b/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: () => {}, diff --git a/pages/app/components/theme-switcher.tsx b/pages/app/components/theme-switcher.tsx index d6afde3416..7f8c2034fb 100644 --- a/pages/app/components/theme-switcher.tsx +++ b/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 = { - 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 ( - + {themeOptions.map(option => ( + + ))}