diff --git a/build-tools/eslint/index.js b/build-tools/eslint/index.js index 4772857a5a..38adc6767f 100644 --- a/build-tools/eslint/index.js +++ b/build-tools/eslint/index.js @@ -3,4 +3,5 @@ module.exports.rules = { 'ban-files': require('./ban-files'), 'prefer-live-region': require('./prefer-live-region'), + 'no-legacy-tokens': require('./no-legacy-tokens'), }; diff --git a/build-tools/eslint/no-legacy-tokens.js b/build-tools/eslint/no-legacy-tokens.js new file mode 100644 index 0000000000..4dd9bdf6fb --- /dev/null +++ b/build-tools/eslint/no-legacy-tokens.js @@ -0,0 +1,61 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +const LEGACY_TOKEN_PATTERN = /\{color(Grey|Blue|Green|Red|Yellow)\d+\}/g; +const REFERENCE_TOKEN_SUGGESTIONS = { + colorGrey: 'colorNeutral', + colorBlue: 'colorPrimary or colorInfo', + colorGreen: 'colorSuccess', + colorRed: 'colorError', + colorYellow: 'colorWarning', +}; + +module.exports = { + meta: { + type: 'problem', + messages: { + 'no-legacy-tokens': + 'Direct palette token {{token}} is deprecated. Use reference tokens like {{suggestion}} instead.', + }, + docs: { + description: 'Prevents use of legacy color palette tokens in favor of semantic reference tokens.', + }, + fixable: 'code', + }, + create(context) { + return { + Literal(node) { + if (typeof node.value === 'string') { + const matches = node.value.match(LEGACY_TOKEN_PATTERN); + if (matches) { + matches.forEach(token => { + const colorFamily = token.match(/color(Grey|Blue|Green|Red|Yellow)/)?.[1]; + const suggestion = REFERENCE_TOKEN_SUGGESTIONS[`color${colorFamily}`] || 'semantic reference tokens'; + + context.report({ + node, + messageId: 'no-legacy-tokens', + data: { token, suggestion }, + }); + }); + } + } + }, + TemplateElement(node) { + const matches = node.value.raw.match(LEGACY_TOKEN_PATTERN); + if (matches) { + matches.forEach(token => { + const colorFamily = token.match(/color(Grey|Blue|Green|Red|Yellow)/)?.[1]; + const suggestion = REFERENCE_TOKEN_SUGGESTIONS[`color${colorFamily}`] || 'semantic reference tokens'; + + context.report({ + node, + messageId: 'no-legacy-tokens', + data: { token, suggestion }, + }); + }); + } + }, + }; + }, +}; diff --git a/eslint.config.mjs b/eslint.config.mjs index 3c361dd6de..ee54c8c7ce 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -133,6 +133,7 @@ export default tsEslint.config( ], }, ], + '@cloudscape-design/components/no-legacy-tokens': 'error', }, }, { diff --git a/style-dictionary/classic/color-charts.ts b/style-dictionary/classic/color-charts.ts index 3baebd9edf..79694d05dc 100644 --- a/style-dictionary/classic/color-charts.ts +++ b/style-dictionary/classic/color-charts.ts @@ -7,9 +7,9 @@ import { StyleDictionary } from '../utils/interfaces.js'; import { tokens as parentTokens } from '../visual-refresh/color-charts.js'; const tokens: StyleDictionary.ColorChartsDictionary = { - colorChartsLineGrid: { dark: '{colorGrey700}' }, - colorChartsLineTick: { dark: '{colorGrey700}' }, - colorChartsLineAxis: { dark: '{colorGrey700}' }, + colorChartsLineGrid: { dark: '{colorNeutral700}' }, + colorChartsLineTick: { dark: '{colorNeutral700}' }, + colorChartsLineAxis: { dark: '{colorNeutral700}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge( diff --git a/style-dictionary/classic/color-palette.ts b/style-dictionary/classic/color-palette.ts index 32dc9be449..4f6f2eb811 100644 --- a/style-dictionary/classic/color-palette.ts +++ b/style-dictionary/classic/color-palette.ts @@ -2,9 +2,21 @@ // 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 '../visual-refresh/color-palette.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 = { colorBlue50: '#f1faff', colorBlue200: '#99cbe4', @@ -38,6 +50,50 @@ const tokens: StyleDictionary.ColorPaletteDictionary = { colorYellow900: '#906806', }; -const expandedTokens: StyleDictionary.ExpandedGlobalScopeDictionary = merge({}, parentTokens, tokens); +const referenceTokens: StyleDictionary.ReferenceDictionary = { + colorPrimary50: tokens.colorBlue50, + colorPrimary200: tokens.colorBlue200, + colorPrimary300: tokens.colorBlue300, + colorPrimary400: tokens.colorBlue400, + colorPrimary600: tokens.colorBlue600, + colorPrimary700: tokens.colorBlue700, + colorPrimary1000: tokens.colorBlue1000, + colorNeutral100: tokens.colorGrey100, + colorNeutral200: tokens.colorGrey200, + colorNeutral250: tokens.colorGrey250, + colorNeutral300: tokens.colorGrey300, + colorNeutral400: tokens.colorGrey400, + colorNeutral450: tokens.colorGrey450, + colorNeutral500: tokens.colorGrey500, + colorNeutral600: tokens.colorGrey600, + colorNeutral650: tokens.colorGrey650, + colorNeutral700: tokens.colorGrey700, + colorNeutral750: tokens.colorGrey750, + colorNeutral800: tokens.colorGrey800, + colorNeutral850: tokens.colorGrey850, + colorNeutral950: tokens.colorGrey950, + colorError50: tokens.colorRed50, + colorError400: tokens.colorRed400, + colorError600: tokens.colorRed600, + colorError1000: tokens.colorRed1000, + colorInfo50: tokens.colorBlue50, + colorInfo300: tokens.colorBlue300, + colorInfo400: tokens.colorBlue400, + colorInfo600: tokens.colorBlue600, + colorInfo1000: tokens.colorBlue1000, + colorSuccess50: tokens.colorGreen50, + colorSuccess500: tokens.colorGreen500, + colorSuccess600: tokens.colorGreen600, + colorSuccess1000: tokens.colorGreen1000, + colorWarning900: tokens.colorYellow900, +}; + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge( + {}, + parentTokens, + tokens, + expandColorDictionary(referenceTokens) +); export { expandedTokens as tokens }; +export const mode: StyleDictionary.ModeIdentifier = 'color'; diff --git a/style-dictionary/classic/color-severity.ts b/style-dictionary/classic/color-severity.ts index 9a020fc6c9..e71b58c805 100644 --- a/style-dictionary/classic/color-severity.ts +++ b/style-dictionary/classic/color-severity.ts @@ -7,7 +7,7 @@ import { StyleDictionary } from '../utils/interfaces.js'; import { tokens as parentTokens } from '../visual-refresh/color-severity.js'; const tokens: StyleDictionary.ColorSeverityDictionary = { - colorTextNotificationSeverityMedium: { light: '{colorBlack}', dark: '{colorGrey950}' }, + colorTextNotificationSeverityMedium: { light: '{colorBlack}', dark: '{colorNeutral950}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge( diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts index d19b73e25b..e24588eacf 100644 --- a/style-dictionary/classic/colors.ts +++ b/style-dictionary/classic/colors.ts @@ -11,147 +11,147 @@ const tokens: StyleDictionary.ColorsDictionary = { colorGreyTransparent: { light: 'rgba(0, 28, 36, 0.3)', dark: 'rgba(0, 0, 0, 0.3)' }, colorGreyTransparentHeavy: { light: 'rgba(0, 28, 36, 0.5)', dark: 'rgba(0, 0, 0, 0.5)' }, colorGreyTransparentLight: { light: 'rgba(0, 28, 36, 0.15)', dark: 'rgba(0, 0, 0, 0.3)' }, - colorBackgroundButtonLinkActive: { light: '{colorGrey250}', dark: '{colorGrey950}' }, - colorBackgroundButtonLinkHover: { light: '{colorGrey100}' }, - colorBackgroundButtonNormalActive: { light: '{colorGrey250}', dark: '{colorGrey950}' }, - colorBackgroundButtonNormalDefault: { dark: '{colorGrey750}' }, - colorBackgroundButtonNormalDisabled: { dark: '{colorGrey750}' }, - colorBackgroundButtonNormalHover: { light: '{colorGrey100}' }, - colorBackgroundToggleButtonNormalPressed: { light: '{colorGrey250}', dark: '{colorGrey950}' }, - colorBackgroundButtonPrimaryActive: { light: '{colorBlue1000}', dark: '{colorBlue300}' }, - colorBackgroundButtonPrimaryDefault: { light: '{colorBlue600}', dark: '{colorBlue300}' }, - colorBackgroundButtonPrimaryDisabled: { light: '{colorWhite}', dark: '{colorGrey750}' }, - colorBackgroundButtonPrimaryHover: { light: '{colorBlue700}', dark: '{colorBlue400}' }, - colorBackgroundCalendarCurrentDate: { dark: '{colorGrey950}' }, - colorBackgroundCellShaded: { light: '{colorGrey200}', dark: '{colorGrey950}' }, + colorBackgroundButtonLinkActive: { light: '{colorNeutral250}', dark: '{colorNeutral950}' }, + colorBackgroundButtonLinkHover: { light: '{colorNeutral100}' }, + colorBackgroundButtonNormalActive: { light: '{colorNeutral250}', dark: '{colorNeutral950}' }, + colorBackgroundButtonNormalDefault: { dark: '{colorNeutral750}' }, + colorBackgroundButtonNormalDisabled: { dark: '{colorNeutral750}' }, + colorBackgroundButtonNormalHover: { light: '{colorNeutral100}' }, + colorBackgroundToggleButtonNormalPressed: { light: '{colorNeutral250}', dark: '{colorNeutral950}' }, + colorBackgroundButtonPrimaryActive: { light: '{colorPrimary1000}', dark: '{colorPrimary300}' }, + colorBackgroundButtonPrimaryDefault: { light: '{colorPrimary600}', dark: '{colorPrimary300}' }, + colorBackgroundButtonPrimaryDisabled: { light: '{colorWhite}', dark: '{colorNeutral750}' }, + colorBackgroundButtonPrimaryHover: { light: '{colorPrimary700}', dark: '{colorPrimary400}' }, + colorBackgroundCalendarCurrentDate: { dark: '{colorNeutral950}' }, + colorBackgroundCellShaded: { light: '{colorNeutral200}', dark: '{colorNeutral950}' }, colorBackgroundCodeEditorLoading: '{colorBackgroundCodeEditorStatusBar}', - colorBackgroundContainerContent: { dark: '{colorGrey750}' }, - colorBackgroundContainerHeader: { light: '{colorGrey100}', dark: '{colorGrey800}' }, - colorBackgroundDropdownItemDefault: { dark: '{colorGrey750}' }, - colorBackgroundDropdownItemFilterMatch: { dark: '{colorBlue1000}' }, + colorBackgroundContainerContent: { dark: '{colorNeutral750}' }, + colorBackgroundContainerHeader: { light: '{colorNeutral100}', dark: '{colorNeutral800}' }, + colorBackgroundDropdownItemDefault: { dark: '{colorNeutral750}' }, + colorBackgroundDropdownItemFilterMatch: { dark: '{colorPrimary1000}' }, colorBackgroundHomeHeader: { light: '{colorBlack}', dark: '{colorBlack}' }, - colorBackgroundInputDisabled: { dark: '{colorGrey700}' }, - colorBackgroundItemSelected: { dark: '{colorBlue1000}' }, - colorBackgroundLayoutMain: { light: '{colorGrey200}', dark: '{colorGrey950}' }, + colorBackgroundInputDisabled: { dark: '{colorNeutral700}' }, + colorBackgroundItemSelected: { dark: '{colorPrimary1000}' }, + colorBackgroundLayoutMain: { light: '{colorNeutral200}', dark: '{colorNeutral950}' }, colorBackgroundLayoutMobilePanel: '{colorBackgroundLayoutPanelContent}', - colorBackgroundLayoutToggleActive: '{colorGrey750}', + colorBackgroundLayoutToggleActive: '{colorNeutral750}', colorBackgroundLayoutToggleDefault: 'transparent', - colorBackgroundLayoutToggleHover: '{colorGrey650}', - colorBackgroundLayoutToggleSelectedDefault: { light: '{colorBlue600}', dark: '{colorBlue300}' }, + colorBackgroundLayoutToggleHover: '{colorNeutral650}', + colorBackgroundLayoutToggleSelectedDefault: { light: '{colorPrimary600}', dark: '{colorPrimary300}' }, colorBackgroundModalOverlay: { light: '{colorGreyOpaque90}', dark: '{colorGreyOpaque80}' }, - colorBackgroundNotificationStackBar: '{colorGrey750}', - colorBackgroundNotificationStackBarActive: '{colorGrey750}', - colorBackgroundNotificationStackBarHover: '{colorGrey650}', - colorBackgroundProgressBarContentInFlash: { light: '{colorGreyOpaque70}', dark: '{colorGrey100}' }, + colorBackgroundNotificationStackBar: '{colorNeutral750}', + colorBackgroundNotificationStackBarActive: '{colorNeutral750}', + colorBackgroundNotificationStackBarHover: '{colorNeutral650}', + colorBackgroundProgressBarContentInFlash: { light: '{colorGreyOpaque70}', dark: '{colorNeutral100}' }, colorBackgroundSegmentHover: '{colorBackgroundButtonNormalHover}', - colorBackgroundTilesDisabled: { dark: '{colorGrey750}' }, - colorBackgroundToggleCheckedDisabled: { dark: '{colorBlue700}' }, - colorBackgroundChatBubbleIncoming: { light: '{colorGrey200}', dark: '{colorGrey950}' }, + colorBackgroundTilesDisabled: { dark: '{colorNeutral750}' }, + colorBackgroundToggleCheckedDisabled: { dark: '{colorPrimary700}' }, + colorBackgroundChatBubbleIncoming: { light: '{colorNeutral200}', dark: '{colorNeutral950}' }, colorBorderButtonNormalActive: '{colorBorderButtonNormalDefault}', - colorBorderButtonNormalDefault: { light: '{colorGrey650}', dark: '{colorGrey500}' }, - colorBorderToggleButtonNormalPressed: { light: '{colorGrey650}', dark: '{colorGrey500}' }, - colorBorderButtonNormalDisabled: { light: '{colorGrey300}', dark: '{colorGrey700}' }, - colorTextButtonNormalDisabled: { light: '{colorGrey500}', dark: '{colorGrey500}' }, - colorTextButtonIconDisabled: { light: '{colorGrey500}', dark: '{colorGrey500}' }, - colorBorderButtonNormalHover: { light: '{colorGrey950}', dark: '{colorGrey400}' }, - colorBorderButtonPrimaryDisabled: { light: '{colorGrey300}', dark: '{colorGrey700}' }, - colorTextButtonPrimaryDisabled: { light: '{colorGrey500}', dark: '{colorGrey500}' }, - colorItemSelected: { dark: '{colorBlue300}' }, - colorBorderItemSelected: { dark: '{colorBlue400}' }, + colorBorderButtonNormalDefault: { light: '{colorNeutral650}', dark: '{colorNeutral500}' }, + colorBorderToggleButtonNormalPressed: { light: '{colorNeutral650}', dark: '{colorNeutral500}' }, + colorBorderButtonNormalDisabled: { light: '{colorNeutral300}', dark: '{colorNeutral700}' }, + colorTextButtonNormalDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' }, + colorTextButtonIconDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' }, + colorBorderButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorNeutral400}' }, + colorBorderButtonPrimaryDisabled: { light: '{colorNeutral300}', dark: '{colorNeutral700}' }, + colorTextButtonPrimaryDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' }, + colorItemSelected: { dark: '{colorPrimary300}' }, + colorBorderItemSelected: { dark: '{colorPrimary400}' }, colorBorderCalendarGrid: { light: '{colorBorderDropdownItemDefault}', dark: '{colorBorderDividerDefault}' }, colorBorderCalendarGridSelectedFocusRing: '{colorBorderItemFocused}', - colorBorderCodeEditorPaneItemHover: { light: '{colorGrey600}', dark: '{colorGrey500}' }, + colorBorderCodeEditorPaneItemHover: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, colorBorderContainerDivider: '{colorBorderDividerDefault}', - colorBorderContainerTop: { light: '{colorGrey250}', dark: '{colorGrey750}' }, - colorBorderControlDefault: { light: '{colorGrey600}' }, - colorBorderDividerActive: '{colorGrey600}', - colorBorderDividerDefault: { light: '{colorGrey250}', dark: '{colorGrey700}' }, - colorBorderDividerInteractiveDefault: '{colorGrey600}', + colorBorderContainerTop: { light: '{colorNeutral250}', dark: '{colorNeutral750}' }, + colorBorderControlDefault: { light: '{colorNeutral600}' }, + colorBorderDividerActive: '{colorNeutral600}', + colorBorderDividerDefault: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, + colorBorderDividerInteractiveDefault: '{colorNeutral600}', colorBorderDividerPanelBottom: '{colorShadowSide}', colorBorderDividerPanelSide: 'transparent', - colorBorderDividerSecondary: { light: '{colorGrey250}', dark: '{colorGrey700}' }, + colorBorderDividerSecondary: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, colorBorderDropdownContainer: 'transparent', - colorBorderDropdownItemHover: { dark: '{colorGrey500}' }, + colorBorderDropdownItemHover: { dark: '{colorNeutral500}' }, colorBorderDropdownItemDimmedHover: `{colorBorderDropdownItemHover}`, colorBorderDropdownItemSelected: '{colorBorderDropdownItemDefault}', colorBorderDropdownItemTop: '{colorBorderDropdownItemDefault}', - colorBorderInputDefault: { light: '{colorGrey600}', dark: '{colorGrey500}' }, + colorBorderInputDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, colorBorderInputFocused: '{colorBorderItemFocused}', - colorBorderItemFocused: { light: '{colorBlue600}' }, + colorBorderItemFocused: { light: '{colorPrimary600}' }, colorBorderItemPlaceholder: '{colorTransparent}', - colorBorderLayout: { light: '{colorGrey300}', dark: '{colorGrey700}' }, - colorBorderNotificationStackBar: '{colorGrey750}', + colorBorderLayout: { light: '{colorNeutral300}', dark: '{colorNeutral700}' }, + colorBorderNotificationStackBar: '{colorNeutral750}', colorBorderPanelHeader: '{colorBorderDividerDefault}', - colorBorderPopover: { light: '{colorGrey300}', dark: '{colorGrey650}' }, + colorBorderPopover: { light: '{colorNeutral300}', dark: '{colorNeutral650}' }, colorBorderSegmentActive: '{colorBorderSegmentHover}', - colorBorderSegmentDefault: { light: '{colorGrey600}', dark: '{colorGrey500}' }, + colorBorderSegmentDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, colorBorderSegmentDisabled: '{colorBorderButtonNormalDisabled}', - colorBorderSegmentHover: { light: '{colorGrey950}', dark: '{colorWhite}' }, - colorBorderDropdownItemFocused: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorBorderStatusError: { dark: '{colorRed600}' }, - colorBorderStatusSuccess: { dark: '{colorGreen600}' }, - colorBorderTabsDivider: { light: '{colorGrey400}', dark: '{colorGrey700}' }, + colorBorderSegmentHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + colorBorderDropdownItemFocused: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBorderStatusError: { dark: '{colorError600}' }, + colorBorderStatusSuccess: { dark: '{colorSuccess600}' }, + colorBorderTabsDivider: { light: '{colorNeutral400}', dark: '{colorNeutral700}' }, colorBorderTabsShadow: { light: '{colorBorderDividerDefault}' }, colorBorderTabsUnderline: '{colorTextInteractiveHover}', - colorBorderTilesDisabled: { light: '{colorTransparent}', dark: '{colorGrey700}' }, - colorBorderTutorial: { light: '{colorGrey400}', dark: '{colorGrey500}' }, + colorBorderTilesDisabled: { light: '{colorTransparent}', dark: '{colorNeutral700}' }, + colorBorderTutorial: { light: '{colorNeutral400}', dark: '{colorNeutral500}' }, colorForegroundControlDefault: { dark: '{colorWhite}' }, - colorForegroundControlDisabled: { dark: '{colorGrey600}' }, - colorForegroundControlReadOnly: { light: '{colorGrey600}', dark: '{colorGrey450}' }, - colorStrokeCodeEditorResizeHandler: '{colorGrey600}', - colorStrokeCodeEditorGutterActiveLineDefault: { dark: '{colorGrey700}' }, - colorTextAccent: { light: '{colorBlue600}', dark: '{colorBlue300}' }, - colorTextBodyDefault: { light: '{colorGrey950}', dark: '{colorGrey300}' }, - colorTextBodySecondary: { light: '{colorGrey650}', dark: '{colorGrey300}' }, - colorTextBreadcrumbCurrent: { dark: '{colorGrey300}' }, - colorTextBreadcrumbIcon: { light: '{colorGrey600}' }, + colorForegroundControlDisabled: { dark: '{colorNeutral600}' }, + colorForegroundControlReadOnly: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorStrokeCodeEditorResizeHandler: '{colorNeutral600}', + colorStrokeCodeEditorGutterActiveLineDefault: { dark: '{colorNeutral700}' }, + colorTextAccent: { light: '{colorPrimary600}', dark: '{colorPrimary300}' }, + colorTextBodyDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' }, + colorTextBodySecondary: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, + colorTextBreadcrumbCurrent: { dark: '{colorNeutral300}' }, + colorTextBreadcrumbIcon: { light: '{colorNeutral600}' }, colorTextButtonInlineIconDefault: '{colorTextInteractiveDefault}', colorTextButtonInlineIconHover: '{colorTextInteractiveHover}', - colorTextButtonNormalActive: { light: '{colorGrey950}', dark: '{colorGrey100}' }, - colorTextToggleButtonNormalPressed: { light: '{colorGrey950}', dark: '{colorGrey100}' }, - colorTextButtonNormalDefault: { light: '{colorGrey650}', dark: '{colorGrey300}' }, - colorTextButtonNormalHover: { light: '{colorGrey950}', dark: '{colorGrey100}' }, + colorTextButtonNormalActive: { light: '{colorNeutral950}', dark: '{colorNeutral100}' }, + colorTextToggleButtonNormalPressed: { light: '{colorNeutral950}', dark: '{colorNeutral100}' }, + colorTextButtonNormalDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, + colorTextButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorNeutral100}' }, colorTextLinkButtonNormalDefault: '{colorTextButtonNormalDefault}', colorTextLinkButtonNormalHover: '{colorTextButtonNormalHover}', colorTextLinkButtonNormalActive: '{colorTextButtonNormalActive}', colorTextCalendarDateHover: '{colorTextDropdownItemHighlighted}', colorTextCalendarDateSelected: '{colorTextDropdownItemHighlighted}', colorTextCalendarMonth: '{colorTextBodySecondary}', - colorTextColumnHeader: { dark: '{colorGrey450}' }, - colorTextColumnSortingIcon: { light: '{colorGrey600}', dark: '{colorGrey450}' }, - colorTextDisabledInlineEdit: { dark: '{colorGrey450}' }, + colorTextColumnHeader: { dark: '{colorNeutral450}' }, + colorTextColumnSortingIcon: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorTextDisabledInlineEdit: { dark: '{colorNeutral450}' }, colorTextGroupLabel: '{colorTextLabel}', colorTextExpandableSectionDefault: '{colorTextInteractiveDefault}', colorTextExpandableSectionHover: '{colorTextInteractiveHover}', colorTextExpandableSectionNavigationIconDefault: '{colorTextIconCaret}', - colorTextHeadingDefault: { light: '{colorGrey950}', dark: '{colorGrey250}' }, - colorTextHeadingSecondary: { light: '{colorGrey650}', dark: '{colorGrey300}' }, - colorTextHomeHeaderDefault: { light: '{colorWhite}', dark: '{colorGrey250}' }, - colorTextHomeHeaderSecondary: '{colorGrey300}', - colorTextFormDefault: { light: '{colorGrey950}', dark: '{colorGrey300}' }, - colorTextInputDisabled: { light: '{colorGrey500}' }, - colorTextInputPlaceholder: { light: '{colorGrey600}', dark: '{colorGrey500}' }, + colorTextHeadingDefault: { light: '{colorNeutral950}', dark: '{colorNeutral250}' }, + colorTextHeadingSecondary: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, + colorTextHomeHeaderDefault: { light: '{colorWhite}', dark: '{colorNeutral250}' }, + colorTextHomeHeaderSecondary: '{colorNeutral300}', + colorTextFormDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' }, + colorTextInputDisabled: { light: '{colorNeutral500}' }, + colorTextInputPlaceholder: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, colorTextInputPlaceholderDisabled: '{colorTextInputPlaceholder}', - colorTextLabel: { light: '{colorGrey650}', dark: '{colorGrey450}' }, - colorTextLayoutToggle: { light: '{colorGrey650}', dark: '{colorGrey300}' }, - colorTextLayoutToggleActive: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorTextLayoutToggleHover: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorTextLayoutToggleSelected: { light: '{colorWhite}', dark: '{colorGrey950}' }, - colorTextLinkDefault: { dark: '{colorBlue300}' }, - colorTextLinkHover: { light: '{colorBlue700}', dark: '{colorBlue200}' }, + colorTextLabel: { light: '{colorNeutral650}', dark: '{colorNeutral450}' }, + colorTextLayoutToggle: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, + colorTextLayoutToggleActive: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorTextLayoutToggleHover: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorTextLayoutToggleSelected: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextLinkDefault: { dark: '{colorPrimary300}' }, + colorTextLinkHover: { light: '{colorPrimary700}', dark: '{colorPrimary200}' }, colorTextLinkInvertedHover: '{colorTextNotificationDefault}', colorTextLinkButtonUnderline: 'currentColor', colorTextLinkButtonUnderlineHover: 'currentColor', colorTextPaginationPageNumberActiveDisabled: '{colorTextBodySecondary}', colorTextPaginationPageNumberDefault: { dark: '{colorTextInteractiveDefault}' }, - colorTextSegmentActive: { dark: '{colorGrey850}' }, + colorTextSegmentActive: { dark: '{colorNeutral850}' }, colorTextSegmentDefault: '{colorTextButtonNormalDefault}', - colorTextStatusInfo: { dark: '{colorBlue300}' }, - colorBoardPlaceholderActive: { light: '{colorGrey300}', dark: '{colorGrey600}' }, - colorBoardPlaceholderHover: { light: '{colorBlue200}', dark: '{colorBlue600}' }, - colorDragPlaceholderActive: { light: '{colorGrey300}', dark: '{colorGrey600}' }, - colorDragPlaceholderHover: { light: '{colorBlue200}', dark: '{colorBlue600}' }, - colorBackgroundDropdownItemHover: { light: '{colorGrey200}', dark: '{colorGrey700}' }, + colorTextStatusInfo: { dark: '{colorPrimary300}' }, + colorBoardPlaceholderActive: { light: '{colorNeutral300}', dark: '{colorNeutral600}' }, + colorBoardPlaceholderHover: { light: '{colorPrimary200}', dark: '{colorPrimary600}' }, + colorDragPlaceholderActive: { light: '{colorNeutral300}', dark: '{colorNeutral600}' }, + colorDragPlaceholderHover: { light: '{colorPrimary200}', dark: '{colorPrimary600}' }, + colorBackgroundDropdownItemHover: { light: '{colorNeutral200}', dark: '{colorNeutral700}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge( diff --git a/style-dictionary/classic/contexts/flashbar.ts b/style-dictionary/classic/contexts/flashbar.ts index 49bbb3274b..d733fbaf03 100644 --- a/style-dictionary/classic/contexts/flashbar.ts +++ b/style-dictionary/classic/contexts/flashbar.ts @@ -7,14 +7,14 @@ import { StyleDictionary } from '../../utils/interfaces.js'; import { tokens as parentTokens } from '../colors.js'; const tokens = { - colorBorderItemFocused: '{colorGrey100}', - colorTextExpandableSectionDefault: '{colorGrey100}', - colorTextExpandableSectionHover: '{colorGrey100}', - colorTextBodyDefault: '{colorGrey100}', - colorTextHeadingSecondary: '{colorGrey100}', - colorBorderDividerDefault: '{colorGrey100}', - colorTextTutorialHotspotDefault: '{colorGrey300}', - colorTextTutorialHotspotHover: '{colorGrey100}', + colorBorderItemFocused: '{colorNeutral100}', + colorTextExpandableSectionDefault: '{colorNeutral100}', + colorTextExpandableSectionHover: '{colorNeutral100}', + colorTextBodyDefault: '{colorNeutral100}', + colorTextHeadingSecondary: '{colorNeutral100}', + colorBorderDividerDefault: '{colorNeutral100}', + colorTextTutorialHotspotDefault: '{colorNeutral300}', + colorTextTutorialHotspotHover: '{colorNeutral100}', }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( diff --git a/style-dictionary/classic/contexts/tools-drawer-trigger.ts b/style-dictionary/classic/contexts/tools-drawer-trigger.ts index 529fec32ba..5f6ed0ed31 100644 --- a/style-dictionary/classic/contexts/tools-drawer-trigger.ts +++ b/style-dictionary/classic/contexts/tools-drawer-trigger.ts @@ -8,8 +8,8 @@ import { tokens as parentTokens } from '../colors.js'; const appLayoutToolsDrawerTriggerFocusedButton: StyleDictionary.ColorsDictionary = { colorBorderItemFocused: { - light: '{colorGrey100}', - dark: '{colorGrey750}', + light: '{colorNeutral100}', + dark: '{colorNeutral750}', }, }; diff --git a/style-dictionary/core/color-palette.ts b/style-dictionary/core/color-palette.ts index 6c3bb9965f..7f76f54d31 100644 --- a/style-dictionary/core/color-palette.ts +++ b/style-dictionary/core/color-palette.ts @@ -1,8 +1,11 @@ // 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'; -export const tokens: StyleDictionary.ColorPaletteDictionary = { +const paletteTokens: StyleDictionary.ColorPaletteDictionary = { colorGrey50: '#fcfcfd', colorGrey100: '#f9f9fa', colorGrey150: '#f6f6f9', @@ -250,3 +253,89 @@ export const tokens: StyleDictionary.ColorPaletteDictionary = { colorBlack: '#000000', colorWhite: '#ffffff', }; + +const referenceTokens: StyleDictionary.ReferenceDictionary = { + colorPrimary50: paletteTokens.colorBlue50, + colorPrimary100: paletteTokens.colorBlue100, + colorPrimary200: paletteTokens.colorBlue200, + colorPrimary300: paletteTokens.colorBlue300, + colorPrimary400: paletteTokens.colorBlue400, + colorPrimary500: paletteTokens.colorBlue500, + colorPrimary600: paletteTokens.colorBlue600, + colorPrimary700: paletteTokens.colorBlue700, + colorPrimary800: paletteTokens.colorBlue800, + colorPrimary900: paletteTokens.colorBlue900, + colorPrimary1000: paletteTokens.colorBlue1000, + colorNeutral50: paletteTokens.colorGrey50, + colorNeutral100: paletteTokens.colorGrey100, + colorNeutral150: paletteTokens.colorGrey150, + colorNeutral200: paletteTokens.colorGrey200, + colorNeutral250: paletteTokens.colorGrey250, + colorNeutral300: paletteTokens.colorGrey300, + colorNeutral350: paletteTokens.colorGrey350, + colorNeutral400: paletteTokens.colorGrey400, + colorNeutral450: paletteTokens.colorGrey450, + colorNeutral500: paletteTokens.colorGrey500, + colorNeutral550: paletteTokens.colorGrey550, + colorNeutral600: paletteTokens.colorGrey600, + colorNeutral650: paletteTokens.colorGrey650, + colorNeutral700: paletteTokens.colorGrey700, + colorNeutral750: paletteTokens.colorGrey750, + colorNeutral800: paletteTokens.colorGrey800, + colorNeutral850: paletteTokens.colorGrey850, + colorNeutral900: paletteTokens.colorGrey900, + colorNeutral950: paletteTokens.colorGrey950, + colorNeutral1000: paletteTokens.colorGrey1000, + colorError50: paletteTokens.colorRed50, + colorError100: paletteTokens.colorRed100, + colorError200: paletteTokens.colorRed200, + colorError300: paletteTokens.colorRed300, + colorError400: paletteTokens.colorRed400, + colorError500: paletteTokens.colorRed500, + colorError600: paletteTokens.colorRed600, + colorError700: paletteTokens.colorRed700, + colorError800: paletteTokens.colorRed800, + colorError900: paletteTokens.colorRed900, + colorError1000: paletteTokens.colorRed1000, + colorInfo50: paletteTokens.colorBlue50, + colorInfo100: paletteTokens.colorBlue100, + colorInfo200: paletteTokens.colorBlue200, + colorInfo300: paletteTokens.colorBlue300, + colorInfo400: paletteTokens.colorBlue400, + colorInfo500: paletteTokens.colorBlue500, + colorInfo600: paletteTokens.colorBlue600, + colorInfo700: paletteTokens.colorBlue700, + colorInfo800: paletteTokens.colorBlue800, + colorInfo900: paletteTokens.colorBlue900, + colorInfo1000: paletteTokens.colorBlue1000, + colorSuccess50: paletteTokens.colorGreen50, + colorSuccess100: paletteTokens.colorGreen100, + colorSuccess200: paletteTokens.colorGreen200, + colorSuccess300: paletteTokens.colorGreen300, + colorSuccess400: paletteTokens.colorGreen400, + colorSuccess500: paletteTokens.colorGreen500, + colorSuccess600: paletteTokens.colorGreen600, + colorSuccess700: paletteTokens.colorGreen700, + colorSuccess800: paletteTokens.colorGreen800, + colorSuccess900: paletteTokens.colorGreen900, + colorSuccess1000: paletteTokens.colorGreen1000, + colorWarning50: paletteTokens.colorYellow50, + colorWarning100: paletteTokens.colorYellow100, + colorWarning200: paletteTokens.colorYellow200, + colorWarning300: paletteTokens.colorYellow300, + colorWarning400: paletteTokens.colorYellow400, + colorWarning500: paletteTokens.colorYellow500, + colorWarning600: paletteTokens.colorYellow600, + colorWarning700: paletteTokens.colorYellow700, + colorWarning800: paletteTokens.colorYellow800, + colorWarning900: paletteTokens.colorYellow900, + colorWarning1000: paletteTokens.colorYellow1000, +}; + +const expandedReferenceTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(referenceTokens); +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge({}, paletteTokens, expandedReferenceTokens); + +export const mode: StyleDictionary.ModeIdentifier = 'color'; + +export { expandedTokens as tokens }; +export { paletteTokens, expandedReferenceTokens }; diff --git a/style-dictionary/utils/interfaces.ts b/style-dictionary/utils/interfaces.ts index c2f16a543e..88e0fa5a30 100644 --- a/style-dictionary/utils/interfaces.ts +++ b/style-dictionary/utils/interfaces.ts @@ -13,6 +13,7 @@ import { GlobalScopeTokenName, MotionScopeTokenName, MotionTokenName, + ReferenceTokenName, ShadowsTokenName, SizesTokenName, SpacingTokenName, @@ -32,6 +33,7 @@ export namespace StyleDictionary { export type ColorModeEntry = ExpandedColorModeEntry | GlobalEntry; export type DensityModeEntry = ExpandedDensityModeEntry | GlobalEntry; export type MotionModeEntry = ExpandedMotionModeEntry | GlobalEntry; + export type ReferenceEntry = ColorModeEntry | GlobalEntry; export type GlobalScopeDictionary = Partial>; @@ -42,11 +44,13 @@ export namespace StyleDictionary { export type ExpandedGlobalScopeDictionary = Partial>; export type ExpandedColorScopeDictionary = Partial>; export type ExpandedDensityScopeDictionary = Partial>; - export type ExpandedMotionScopeDictionary = Partial>; + export type ColorPaletteDictionary = Partial>; export type TypographyDictionary = Partial>; export type BordersDictionary = Partial>; + export type ReferenceDictionary = Partial>; + export type ColorChartsDictionary = Partial>; export type ColorSeverityDictionary = Partial>; export type ColorsDictionary = Partial>; diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 11cc8534d1..01fd9dc6d7 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -1,5 +1,83 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 + +export type ReferenceTokenName = + | 'colorPrimary50' + | 'colorPrimary100' + | 'colorPrimary200' + | 'colorPrimary300' + | 'colorPrimary400' + | 'colorPrimary500' + | 'colorPrimary600' + | 'colorPrimary700' + | 'colorPrimary800' + | 'colorPrimary900' + | 'colorPrimary1000' + | 'colorNeutral50' + | 'colorNeutral100' + | 'colorNeutral150' + | 'colorNeutral200' + | 'colorNeutral250' + | 'colorNeutral300' + | 'colorNeutral350' + | 'colorNeutral400' + | 'colorNeutral450' + | 'colorNeutral500' + | 'colorNeutral550' + | 'colorNeutral600' + | 'colorNeutral650' + | 'colorNeutral700' + | 'colorNeutral750' + | 'colorNeutral800' + | 'colorNeutral850' + | 'colorNeutral900' + | 'colorNeutral950' + | 'colorNeutral1000' + | 'colorError50' + | 'colorError100' + | 'colorError200' + | 'colorError300' + | 'colorError400' + | 'colorError500' + | 'colorError600' + | 'colorError700' + | 'colorError800' + | 'colorError900' + | 'colorError1000' + | 'colorInfo50' + | 'colorInfo100' + | 'colorInfo200' + | 'colorInfo300' + | 'colorInfo400' + | 'colorInfo500' + | 'colorInfo600' + | 'colorInfo700' + | 'colorInfo800' + | 'colorInfo900' + | 'colorInfo1000' + | 'colorSuccess50' + | 'colorSuccess100' + | 'colorSuccess200' + | 'colorSuccess300' + | 'colorSuccess400' + | 'colorSuccess500' + | 'colorSuccess600' + | 'colorSuccess700' + | 'colorSuccess800' + | 'colorSuccess900' + | 'colorSuccess1000' + | 'colorWarning50' + | 'colorWarning100' + | 'colorWarning200' + | 'colorWarning300' + | 'colorWarning400' + | 'colorWarning500' + | 'colorWarning600' + | 'colorWarning700' + | 'colorWarning800' + | 'colorWarning900' + | 'colorWarning1000'; + export type ColorPaletteTokenName = | 'colorAwsSquidInk' | 'colorWhite' @@ -956,7 +1034,13 @@ export type ShadowsTokenName = | 'shadowStickyColumnLast'; export type GlobalScopeTokenName = ColorPaletteTokenName | TypographyTokenName | BordersTokenName; -export type ColorScopeTokenName = ColorChartsTokenName | ColorsTokenName | ShadowsTokenName | ColorSeverityTokenName; +export type ColorScopeTokenName = + | ReferenceTokenName + | ColorChartsTokenName + | ColorsTokenName + | ShadowsTokenName + | ColorSeverityTokenName + | ColorPaletteTokenName; export type MotionScopeTokenName = MotionTokenName; export type DensityScopeTokenName = SizesTokenName | SpacingTokenName; diff --git a/style-dictionary/visual-refresh/color-charts.ts b/style-dictionary/visual-refresh/color-charts.ts index f354ae98fa..b57f3e64bf 100644 --- a/style-dictionary/visual-refresh/color-charts.ts +++ b/style-dictionary/visual-refresh/color-charts.ts @@ -100,14 +100,14 @@ const tokens: StyleDictionary.ColorChartsDictionary = { colorChartsStatusLow: { light: '{colorChartsYellow300}', dark: '{colorChartsYellow700}' }, colorChartsStatusPositive: { light: '{colorChartsGreen300}', dark: '{colorChartsGreen500}' }, colorChartsStatusInfo: { light: '{colorChartsBlue1400}', dark: '{colorChartsBlue1500}' }, - colorChartsStatusNeutral: '{colorGrey500}', - colorChartsThresholdNegative: { light: '{colorRed600}', dark: '{colorRed400}' }, - colorChartsThresholdPositive: { light: '{colorGreen600}', dark: '{colorGreen500}' }, - colorChartsThresholdInfo: { light: '{colorBlue600}', dark: '{colorBlue300}' }, - colorChartsThresholdNeutral: { light: '{colorGrey600}', dark: '{colorGrey450}' }, - colorChartsLineGrid: { light: '{colorGrey300}', dark: '{colorGrey650}' }, - colorChartsLineTick: { light: '{colorGrey300}', dark: '{colorGrey650}' }, - colorChartsLineAxis: { light: '{colorGrey300}', dark: '{colorGrey650}' }, + 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}', @@ -158,7 +158,7 @@ const tokens: StyleDictionary.ColorChartsDictionary = { colorChartsPaletteCategorical48: '{colorChartsTeal1000}', colorChartsPaletteCategorical49: '{colorChartsPurple1200}', colorChartsPaletteCategorical50: '{colorChartsOrange1000}', - colorChartsErrorBarMarker: { light: '{colorGrey900}', dark: '{colorWhite}' }, + colorChartsErrorBarMarker: { light: '{colorNeutral900}', dark: '{colorWhite}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts index a9e1e67cda..83b8c7800a 100644 --- a/style-dictionary/visual-refresh/color-palette.ts +++ b/style-dictionary/visual-refresh/color-palette.ts @@ -1,71 +1,80 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import merge from 'lodash/merge.js'; +import pick from 'lodash/pick.js'; -import { tokens as brand } from '../core/color-palette.js'; +import { expandedReferenceTokens, paletteTokens as brand } from '../core/color-palette.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 = { - colorGrey50: brand.colorGrey50, - colorGrey100: brand.colorGrey100, - colorGrey150: brand.colorGrey150, - colorGrey200: brand.colorGrey200, - colorGrey250: brand.colorGrey250, - colorGrey300: brand.colorGrey300, - colorGrey350: brand.colorGrey350, - colorGrey400: brand.colorGrey400, - colorGrey450: brand.colorGrey450, - colorGrey500: brand.colorGrey500, - colorGrey600: brand.colorGrey600, - colorGrey650: brand.colorGrey650, - colorGrey700: brand.colorGrey700, - colorGrey750: brand.colorGrey750, - colorGrey800: brand.colorGrey800, - colorGrey850: brand.colorGrey850, - colorGrey900: brand.colorGrey900, - colorGrey950: brand.colorGrey950, - colorGrey1000: brand.colorGrey1000, - - colorBlue50: brand.colorBlue50, - colorBlue100: brand.colorBlue100, - colorBlue200: brand.colorBlue200, - colorBlue300: brand.colorBlue300, - colorBlue400: brand.colorBlue400, - colorBlue600: brand.colorBlue600, - colorBlue700: brand.colorBlue700, - colorBlue900: brand.colorBlue900, - colorBlue1000: brand.colorBlue1000, - - colorGreen50: brand.colorGreen50, - colorGreen500: brand.colorGreen500, - colorGreen600: brand.colorGreen600, - colorGreen900: brand.colorGreen900, - colorGreen1000: brand.colorGreen1000, - - colorRed50: brand.colorRed50, - colorRed400: brand.colorRed400, - colorRed600: brand.colorRed600, - colorRed900: brand.colorRed900, - colorRed1000: brand.colorRed1000, - - colorYellow50: brand.colorYellow50, - colorYellow400: brand.colorYellow400, - colorYellow500: brand.colorYellow500, - colorYellow900: brand.colorYellow900, - colorYellow1000: brand.colorYellow1000, - - colorPurple400: brand.colorPurple400, - colorPurple700: brand.colorPurple700, - - colorAmber400: brand.colorAmber400, - colorAmber500: brand.colorAmber500, - - colorAwsSquidInk: '#232f3e', - colorTransparent: 'transparent', - colorBlack: '#000000', - colorWhite: '#ffffff', + ...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', + ]), }; -const expandedTokens: StyleDictionary.ExpandedGlobalScopeDictionary = merge({}, tokens); +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge({}, tokens, expandedReferenceTokens); + +export const mode: StyleDictionary.ModeIdentifier = 'color'; export { expandedTokens as tokens }; diff --git a/style-dictionary/visual-refresh/color-severity.ts b/style-dictionary/visual-refresh/color-severity.ts index 45dbbb3c00..9d538bd812 100644 --- a/style-dictionary/visual-refresh/color-severity.ts +++ b/style-dictionary/visual-refresh/color-severity.ts @@ -9,7 +9,7 @@ const tokens: StyleDictionary.ColorSeverityDictionary = { colorSeverityRed: { light: '#ce3311', dark: '#fe6e73' }, colorSeverityOrange: { light: '#f89256', dark: '#f89256' }, colorSeverityYellow: { light: '#f2cd54', dark: '#f2cd54' }, - colorSeverityGrey: '{colorGrey600}', + colorSeverityGrey: '{colorNeutral600}', colorBackgroundNotificationSeverityCritical: '{colorSeverityDarkRed}', colorBackgroundNotificationSeverityHigh: '{colorSeverityRed}', @@ -17,11 +17,11 @@ const tokens: StyleDictionary.ColorSeverityDictionary = { colorBackgroundNotificationSeverityLow: '{colorSeverityYellow}', colorBackgroundNotificationSeverityNeutral: '{colorSeverityGrey}', - colorTextNotificationSeverityCritical: { light: '{colorGrey100}', dark: '{colorBlack}' }, - colorTextNotificationSeverityHigh: { light: '{colorGrey100}', dark: '{colorGrey950}' }, - colorTextNotificationSeverityMedium: '{colorGrey950}', - colorTextNotificationSeverityLow: '{colorGrey950}', - colorTextNotificationSeverityNeutral: '{colorGrey100}', + colorTextNotificationSeverityCritical: { light: '{colorNeutral100}', dark: '{colorBlack}' }, + colorTextNotificationSeverityHigh: { light: '{colorNeutral100}', dark: '{colorNeutral950}' }, + colorTextNotificationSeverityMedium: '{colorNeutral950}', + colorTextNotificationSeverityLow: '{colorNeutral950}', + colorTextNotificationSeverityNeutral: '{colorNeutral100}', }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index f0d0f599a1..6aa0a72474 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -14,276 +14,276 @@ const tokens: StyleDictionary.ColorsDictionary = { 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: '{colorRed600}', dark: '{colorRed400}' }, - colorBackgroundButtonLinkActive: { light: '{colorBlue100}', dark: '{colorGrey700}' }, - colorBackgroundButtonLinkHover: { light: '{colorBlue50}', dark: '{colorGrey800}' }, - colorBackgroundButtonNormalActive: { light: '{colorBlue100}', dark: '{colorGrey700}' }, - colorBackgroundButtonNormalDefault: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorBackgroundButtonNormalDisabled: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorBackgroundButtonNormalHover: { light: '{colorBlue50}', dark: '{colorGrey800}' }, - colorBackgroundToggleButtonNormalPressed: { light: '{colorBlue100}', dark: '{colorGrey700}' }, - colorBackgroundButtonPrimaryActive: { light: '{colorBlue900}', dark: '{colorBlue400}' }, + colorBackgroundBadgeIcon: { light: '{colorError600}', dark: '{colorError400}' }, + colorBackgroundButtonLinkActive: { light: '{colorPrimary100}', dark: '{colorNeutral700}' }, + 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: '{colorPrimary900}', dark: '{colorPrimary400}' }, colorBackgroundButtonPrimaryDefault: '{colorBorderButtonNormalDefault}', - colorBackgroundButtonPrimaryDisabled: { light: '{colorGrey250}', dark: '{colorGrey750}' }, + colorBackgroundButtonPrimaryDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral750}' }, colorBackgroundButtonPrimaryHover: '{colorBorderButtonNormalHover}', - colorBackgroundDirectionButtonActive: '{colorGrey750}', - colorBackgroundDirectionButtonDefault: '{colorGrey650}', - colorBackgroundDirectionButtonDisabled: { light: '{colorGrey250}', dark: '{colorGrey750}' }, - colorBackgroundDirectionButtonHover: '{colorGrey700}', + colorBackgroundDirectionButtonActive: '{colorNeutral750}', + colorBackgroundDirectionButtonDefault: '{colorNeutral650}', + colorBackgroundDirectionButtonDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral750}' }, + colorBackgroundDirectionButtonHover: '{colorNeutral700}', colorTextDirectionButtonDefault: '{colorWhite}', colorTextDirectionButtonDisabled: '{colorTextInteractiveDisabled}', - colorBackgroundCalendarCurrentDate: { light: '{colorGrey200}', dark: '{colorGrey700}' }, - colorBackgroundCellShaded: { light: '{colorGrey150}', dark: '{colorGrey800}' }, - colorBackgroundCodeEditorGutterActiveLineDefault: { light: '{colorGrey600}', dark: '{colorGrey500}' }, + colorBackgroundCalendarCurrentDate: { light: '{colorNeutral200}', dark: '{colorNeutral700}' }, + colorBackgroundCellShaded: { light: '{colorNeutral150}', dark: '{colorNeutral800}' }, + colorBackgroundCodeEditorGutterActiveLineDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, colorBackgroundCodeEditorGutterActiveLineError: '{colorTextStatusError}', - colorBackgroundCodeEditorGutterDefault: { light: '{colorGrey200}', dark: '{colorGrey800}' }, - colorBackgroundCodeEditorLoading: { light: '{colorGrey100}', dark: '{colorGrey800}' }, - colorBackgroundCodeEditorPaneItemHover: { light: '{colorGrey250}', dark: '{colorGrey700}' }, - colorBackgroundCodeEditorStatusBar: { light: '{colorGrey200}', dark: '{colorGrey800}' }, - colorBackgroundContainerContent: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorBackgroundContainerHeader: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorBackgroundControlChecked: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorBackgroundControlDefault: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorBackgroundControlDisabled: { light: '{colorGrey300}', dark: '{colorGrey700}' }, - colorBackgroundDropdownItemDefault: { light: '{colorWhite}', dark: '{colorGrey800}' }, + colorBackgroundCodeEditorGutterDefault: { light: '{colorNeutral200}', dark: '{colorNeutral800}' }, + colorBackgroundCodeEditorLoading: { light: '{colorNeutral100}', dark: '{colorNeutral800}' }, + colorBackgroundCodeEditorPaneItemHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, + colorBackgroundCodeEditorStatusBar: { light: '{colorNeutral200}', dark: '{colorNeutral800}' }, + 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: '{colorBlue50}', dark: '{colorGrey700}' }, - colorBackgroundDropdownItemHover: { light: '{colorGrey200}', dark: '{colorGrey900}' }, + colorBackgroundDropdownItemFilterMatch: { light: '{colorPrimary50}', dark: '{colorNeutral700}' }, + colorBackgroundDropdownItemHover: { light: '{colorNeutral200}', dark: '{colorNeutral900}' }, colorBackgroundDropdownItemSelected: '{colorBackgroundItemSelected}', - colorBackgroundHomeHeader: '{colorGrey950}', + colorBackgroundHomeHeader: '{colorNeutral950}', colorBackgroundInlineCode: { light: 'rgba(0, 0, 0, 0.1)', dark: 'rgba(255, 255, 255, 0.1)' }, - colorBackgroundInputDefault: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorBackgroundInputDisabled: { light: '{colorGrey250}', dark: '{colorGrey800}' }, - colorBackgroundItemSelected: { light: '{colorBlue50}', dark: '{colorBlue1000}' }, - colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorBackgroundLayoutMobilePanel: '{colorGrey950}', + colorBackgroundInputDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundInputDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral800}' }, + colorBackgroundItemSelected: { light: '{colorPrimary50}', dark: '{colorPrimary1000}' }, + colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundLayoutMobilePanel: '{colorNeutral950}', colorBackgroundLayoutPanelContent: '{colorBackgroundContainerContent}', - colorBackgroundLayoutPanelHover: { light: '{colorGrey250}', dark: '{colorGrey700}' }, - colorBackgroundLayoutToggleActive: '{colorGrey650}', - colorBackgroundLayoutToggleDefault: '{colorGrey650}', - colorBackgroundLayoutToggleHover: '{colorGrey600}', - colorBackgroundLayoutToggleSelectedActive: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorBackgroundLayoutToggleSelectedDefault: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorBackgroundLayoutToggleSelectedHover: { light: '{colorBlue700}', dark: '{colorBlue300}' }, + colorBackgroundLayoutPanelHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, + colorBackgroundLayoutToggleActive: '{colorNeutral650}', + colorBackgroundLayoutToggleDefault: '{colorNeutral650}', + colorBackgroundLayoutToggleHover: '{colorNeutral600}', + colorBackgroundLayoutToggleSelectedActive: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBackgroundLayoutToggleSelectedDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBackgroundLayoutToggleSelectedHover: { light: '{colorPrimary700}', dark: '{colorPrimary300}' }, colorBackgroundModalOverlay: '{colorGreyOpaque70}', - colorBackgroundNotificationBlue: '{colorBlue600}', - colorBackgroundNotificationGreen: '{colorGreen600}', - colorBackgroundNotificationGrey: { light: '{colorGrey650}', dark: '{colorGrey600}' }, - colorBackgroundNotificationRed: '{colorRed600}', - colorBackgroundNotificationYellow: '{colorYellow400}', - colorBackgroundNotificationStackBar: '{colorGrey750}', - colorBackgroundNotificationStackBarActive: '{colorGrey750}', - colorBackgroundNotificationStackBarHover: '{colorGrey650}', - colorBackgroundPopover: { light: '{colorWhite}', dark: '{colorGrey800}' }, - colorBackgroundProgressBarContentDefault: { light: '{colorBlue600}', dark: '{colorBlue400}' }, + colorBackgroundNotificationBlue: '{colorInfo600}', + colorBackgroundNotificationGreen: '{colorSuccess600}', + colorBackgroundNotificationGrey: { light: '{colorNeutral650}', dark: '{colorNeutral600}' }, + colorBackgroundNotificationRed: '{colorError600}', + colorBackgroundNotificationYellow: '{colorWarning400}', + colorBackgroundNotificationStackBar: '{colorNeutral750}', + colorBackgroundNotificationStackBarActive: '{colorNeutral750}', + colorBackgroundNotificationStackBarHover: '{colorNeutral650}', + colorBackgroundPopover: { light: '{colorWhite}', dark: '{colorNeutral800}' }, + colorBackgroundProgressBarContentDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, colorBackgroundProgressBarContentInFlash: '{colorWhite}', - colorBackgroundProgressBarLayoutDefault: { light: '{colorGrey250}', dark: '{colorGrey700}' }, + colorBackgroundProgressBarLayoutDefault: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, colorBackgroundProgressBarLayoutInFlash: '{colorGreyOpaque25}', - colorBackgroundSegmentActive: { light: '{colorBlue600}', dark: '{colorBlue400}' }, + colorBackgroundSegmentActive: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, colorBackgroundSegmentDefault: '{colorBackgroundButtonNormalDefault}', colorBackgroundSegmentDisabled: '{colorBackgroundButtonNormalDisabled}', colorBackgroundSegmentHover: '{colorBackgroundButtonNormalHover}', colorBackgroundSegmentWrapper: '{colorBackgroundContainerContent}', - colorBackgroundSliderHandleDefault: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorBackgroundSliderHandleActive: { light: '{colorBlue700}', dark: '{colorBlue300}' }, - colorBackgroundSliderTrack: { light: '{colorGrey500}', dark: '{colorGrey600}' }, - colorBackgroundSliderHandleRing: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorBackgroundSliderErrorPressed: { light: '{colorRed900}', dark: '{colorRed400}' }, - colorBackgroundSliderWarningPressed: { light: '{colorYellow900}', dark: '{colorYellow500}' }, - colorBackgroundStatusError: { light: '{colorRed50}', dark: '{colorRed1000}' }, - colorBackgroundStatusInfo: { light: '{colorBlue50}', dark: '{colorBlue1000}' }, + colorBackgroundSliderHandleDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBackgroundSliderHandleActive: { light: '{colorPrimary700}', dark: '{colorPrimary300}' }, + colorBackgroundSliderTrack: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, + colorBackgroundSliderHandleRing: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundSliderErrorPressed: { light: '{colorError900}', dark: '{colorError400}' }, + colorBackgroundSliderWarningPressed: { light: '{colorWarning900}', dark: '{colorWarning500}' }, + colorBackgroundStatusError: { light: '{colorError50}', dark: '{colorError1000}' }, + colorBackgroundStatusInfo: { light: '{colorInfo50}', dark: '{colorInfo1000}' }, colorBackgroundDialog: '{colorBackgroundStatusInfo}', - colorBackgroundStatusSuccess: { light: '{colorGreen50}', dark: '{colorGreen1000}' }, - colorBackgroundStatusWarning: { light: '{colorYellow50}', dark: '{colorYellow1000}' }, + colorBackgroundStatusSuccess: { light: '{colorSuccess50}', dark: '{colorSuccess1000}' }, + colorBackgroundStatusWarning: { light: '{colorWarning50}', dark: '{colorWarning1000}' }, colorBackgroundTableHeader: '{colorBackgroundContainerHeader}', - colorBackgroundTilesDisabled: { light: '{colorGrey250}', dark: '{colorGrey800}' }, - colorBackgroundToggleCheckedDisabled: { light: '{colorBlue200}', dark: '{colorBlue900}' }, - colorBackgroundToggleDefault: { light: '{colorGrey650}', dark: '{colorGrey500}' }, + 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: '{colorGrey650}', + 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: '{colorGrey150}', dark: '{colorGrey950}' }, + colorBackgroundChatBubbleIncoming: { light: '{colorNeutral150}', dark: '{colorNeutral950}' }, colorTextChatBubbleOutgoing: '{colorTextBodyDefault}', colorTextChatBubbleIncoming: '{colorTextBodyDefault}', - colorBorderButtonNormalActive: { light: '{colorBlue900}', dark: '{colorBlue300}' }, - colorBorderButtonNormalDefault: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorBorderToggleButtonNormalPressed: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorBorderButtonNormalDisabled: { light: '{colorGrey400}', dark: '{colorGrey600}' }, - colorTextButtonNormalDisabled: { light: '{colorGrey500}', dark: '{colorGrey500}' }, - colorBorderButtonNormalHover: { light: '{colorBlue900}', dark: '{colorBlue300}' }, - colorTextButtonIconDisabled: { light: '{colorGrey500}', dark: '{colorGrey500}' }, + 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}' }, colorBorderButtonPrimaryDisabled: '{colorBackgroundButtonPrimaryDisabled}', - colorTextButtonPrimaryDisabled: { light: '{colorGrey500}', dark: '{colorGrey500}' }, - colorItemSelected: { light: '{colorBlue600}', dark: '{colorBlue400}' }, + colorTextButtonPrimaryDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' }, + colorItemSelected: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, colorBorderCalendarGrid: 'transparent', - colorBorderCalendarGridSelectedFocusRing: { light: '{colorGrey100}', dark: '{colorGrey850}' }, - colorBorderCellShaded: { light: '{colorGrey300}', dark: '{colorGrey700}' }, - colorBorderCodeEditorAceActiveLineLightTheme: '{colorGrey300}', - colorBorderCodeEditorAceActiveLineDarkTheme: '{colorGrey600}', - colorBorderCodeEditorDefault: { light: '{colorGrey300}', dark: '{colorGrey600}' }, + colorBorderCalendarGridSelectedFocusRing: { light: '{colorNeutral100}', dark: '{colorNeutral850}' }, + colorBorderCellShaded: { light: '{colorNeutral300}', dark: '{colorNeutral700}' }, + colorBorderCodeEditorAceActiveLineLightTheme: '{colorNeutral300}', + colorBorderCodeEditorAceActiveLineDarkTheme: '{colorNeutral600}', + colorBorderCodeEditorDefault: { light: '{colorNeutral300}', dark: '{colorNeutral600}' }, colorBorderCodeEditorPaneItemHover: '{colorBorderDropdownItemHover}', colorBorderContainerDivider: 'transparent', colorBorderContainerTop: 'transparent', colorBorderControlChecked: '{colorBackgroundControlChecked}', - colorBorderControlDefault: '{colorGrey500}', + colorBorderControlDefault: '{colorNeutral500}', colorBorderControlDisabled: '{colorBackgroundControlDisabled}', - colorBorderDividerActive: { light: '{colorGrey950}', dark: '{colorGrey100}' }, - colorBorderDividerDefault: { light: '{colorGrey350}', dark: '{colorGrey650}' }, + colorBorderDividerActive: { light: '{colorNeutral950}', dark: '{colorNeutral100}' }, + colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral650}' }, colorBorderDividerPanelBottom: '{colorBorderDividerDefault}', colorBorderDividerPanelSide: '{colorBorderDividerDefault}', - colorBorderDividerSecondary: { light: '{colorGrey250}', dark: '{colorGrey750}' }, - colorBorderDropdownContainer: { light: '{colorGrey400}', dark: '{colorGrey600}' }, + colorBorderDividerSecondary: { light: '{colorNeutral250}', dark: '{colorNeutral750}' }, + colorBorderDropdownContainer: { light: '{colorNeutral400}', dark: '{colorNeutral600}' }, colorBorderDropdownGroup: '{colorBorderDropdownItemDefault}', colorBorderDropdownItemDefault: '{colorBorderDividerDefault}', - colorBorderDropdownItemHover: { light: '{colorGrey500}', dark: '{colorGrey600}' }, - colorBorderDropdownItemDimmedHover: '{colorGrey500}', + colorBorderDropdownItemHover: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, + colorBorderDropdownItemDimmedHover: '{colorNeutral500}', colorBorderDropdownItemSelected: '{colorBorderItemSelected}', colorBorderDropdownItemTop: 'transparent', colorBorderEditableCellHover: '{colorBorderDropdownItemHover}', - colorBorderInputDefault: { light: '{colorGrey500}', dark: '{colorGrey600}' }, + colorBorderInputDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, colorBorderInputDisabled: '{colorBackgroundInputDisabled}', - colorBorderInputFocused: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorBorderItemFocused: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorBorderDropdownItemFocused: { light: '{colorGrey650}', dark: '{colorGrey300}' }, + colorBorderInputFocused: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBorderItemFocused: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBorderDropdownItemFocused: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, colorBorderItemPlaceholder: '{colorBorderItemSelected}', colorBorderItemSelected: '{colorItemSelected}', - colorBorderLayout: { light: '{colorGrey350}', dark: '{colorGrey650}' }, - colorBorderNotificationStackBar: '{colorGrey750}', + colorBorderLayout: { light: '{colorNeutral350}', dark: '{colorNeutral650}' }, + colorBorderNotificationStackBar: '{colorNeutral750}', colorBorderPanelHeader: '{colorBorderDividerDefault}', colorBorderPopover: '{colorBorderDropdownContainer}', colorBorderSegmentActive: '{colorBorderSegmentDefault}', - colorBorderSegmentDefault: { light: '{colorGrey650}', dark: '{colorGrey300}' }, + colorBorderSegmentDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, colorBorderSegmentDisabled: '{colorBorderSegmentDefault}', colorBorderSegmentHover: '{colorBorderSegmentDefault}', - colorBorderStatusError: { light: '{colorRed600}', dark: '{colorRed400}' }, - colorBorderStatusInfo: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorBorderStatusSuccess: { light: '{colorGreen600}', dark: '{colorGreen500}' }, - colorBorderStatusWarning: { light: '{colorYellow900}', dark: '{colorYellow500}' }, + colorBorderStatusError: { light: '{colorError600}', dark: '{colorError400}' }, + colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, + colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, + colorBorderStatusWarning: { light: '{colorWarning900}', dark: '{colorWarning500}' }, colorBorderDialog: '{colorBorderStatusInfo}', - colorBorderDividerInteractiveDefault: { light: '{colorGrey500}', dark: '{colorGrey300}' }, - colorBorderTabsDivider: { light: '{colorGrey350}', dark: '{colorGrey650}' }, + colorBorderDividerInteractiveDefault: { light: '{colorNeutral500}', dark: '{colorNeutral300}' }, + colorBorderTabsDivider: { light: '{colorNeutral350}', dark: '{colorNeutral650}' }, colorBorderTabsShadow: '{colorGreyTransparent}', colorBorderTabsUnderline: '{colorTextAccent}', colorBorderTilesDisabled: '{colorBackgroundTilesDisabled}', - colorBorderTutorial: { light: '{colorGrey300}', dark: '{colorGrey650}' }, - colorForegroundControlDefault: { light: '{colorWhite}', dark: '{colorGrey950}' }, - colorForegroundControlDisabled: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorForegroundControlReadOnly: { light: '{colorGrey600}', dark: '{colorGrey450}' }, + 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: '{colorGrey500}', - colorStrokeCodeEditorResizeHandler: { light: '{colorGrey650}', dark: '{colorGrey300}' }, - colorStrokeCodeEditorGutterActiveLineDefault: { light: '{colorGrey300}', dark: '{colorGrey800}' }, - colorStrokeCodeEditorGutterActiveLineHover: { light: '{colorGrey100}', dark: '{colorGrey950}' }, - colorTextAccent: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorTextBodyDefault: { light: '{colorGrey950}', dark: '{colorGrey350}' }, - colorTextBodySecondary: { light: '{colorGrey650}', dark: '{colorGrey350}' }, - colorTextBreadcrumbCurrent: { light: '{colorGrey600}', dark: '{colorGrey500}' }, - colorTextBreadcrumbIcon: { light: '{colorGrey500}', dark: '{colorTextInteractiveDisabled}' }, + colorStrokeChartLine: '{colorNeutral500}', + colorStrokeCodeEditorResizeHandler: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, + 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: '{colorBlue900}', dark: '{colorBlue300}' }, - colorTextToggleButtonNormalPressed: { light: '{colorBlue900}', dark: '{colorBlue300}' }, - colorTextButtonNormalDefault: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorTextButtonNormalHover: { light: '{colorBlue900}', dark: '{colorBlue300}' }, + 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}', - colorTextButtonPrimaryActive: { light: '{colorWhite}', dark: '{colorGrey950}' }, - colorTextButtonPrimaryDefault: { light: '{colorWhite}', dark: '{colorGrey950}' }, - colorTextButtonPrimaryHover: { light: '{colorWhite}', dark: '{colorGrey950}' }, + colorTextButtonPrimaryActive: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextButtonPrimaryDefault: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextButtonPrimaryHover: { light: '{colorWhite}', dark: '{colorNeutral950}' }, colorTextCalendarDateHover: '{colorTextDropdownItemDefault}', colorTextCalendarDateSelected: '{colorTextAccent}', - colorTextCalendarMonth: { light: '{colorGrey600}', dark: '{colorGrey450}' }, - colorTextCodeEditorGutterActiveLine: { light: '{colorWhite}', dark: '{colorGrey950}' }, - colorTextCodeEditorGutterDefault: { light: '{colorGrey950}', dark: '{colorGrey300}' }, - colorTextCodeEditorStatusBarDisabled: { light: '{colorGrey500}', dark: '{colorGrey600}' }, - colorTextCodeEditorTabButtonError: { light: '{colorWhite}', dark: '{colorGrey950}' }, - colorTextColumnHeader: { light: '{colorGrey650}', dark: '{colorGrey400}' }, + 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: '{colorGrey600}', dark: '{colorGrey450}' }, - colorTextDisabled: { light: '{colorGrey400}', dark: '{colorGrey600}' }, - colorTextDisabledInlineEdit: { light: '{colorGrey650}', dark: '{colorGrey400}' }, + colorTextCounter: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorTextDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' }, + colorTextDisabledInlineEdit: { light: '{colorNeutral650}', dark: '{colorNeutral400}' }, colorTextDropdownFooter: '{colorTextFormSecondary}', colorTextDropdownGroupLabel: '{colorTextGroupLabel}', - colorTextDropdownItemDefault: { light: '{colorGrey950}', dark: '{colorGrey300}' }, + colorTextDropdownItemDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' }, colorTextDropdownItemDimmed: '{colorTextInteractiveDisabled}', colorTextDropdownItemDisabled: '{colorTextInteractiveDisabled}', - colorTextDropdownItemFilterMatch: { light: '{colorBlue600}', dark: '{colorBlue300}' }, - colorTextDropdownItemHighlighted: { light: '{colorGrey950}', dark: '{colorGrey250}' }, + colorTextDropdownItemFilterMatch: { light: '{colorPrimary600}', dark: '{colorPrimary300}' }, + colorTextDropdownItemHighlighted: { light: '{colorNeutral950}', dark: '{colorNeutral250}' }, colorTextDropdownItemSecondary: '{colorTextFormSecondary}', - colorTextDropdownItemSecondaryHover: { light: '{colorGrey600}', dark: '{colorGrey300}' }, - colorTextEmpty: { light: '{colorGrey600}', dark: '{colorGrey300}' }, - colorTextExpandableSectionDefault: { light: '{colorGrey950}', dark: '{colorGrey300}' }, + colorTextDropdownItemSecondaryHover: { light: '{colorNeutral600}', dark: '{colorNeutral300}' }, + colorTextEmpty: { light: '{colorNeutral600}', dark: '{colorNeutral300}' }, + colorTextExpandableSectionDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' }, colorTextExpandableSectionHover: '{colorTextAccent}', colorTextExpandableSectionNavigationIconDefault: '{colorTextInteractiveDefault}', - colorTextFormDefault: { light: '{colorGrey950}', dark: '{colorGrey300}' }, + colorTextFormDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' }, colorTextFormLabel: '{colorTextFormDefault}', - colorTextFormSecondary: { light: '{colorGrey600}', dark: '{colorGrey450}' }, - colorTextGroupLabel: { light: '{colorGrey650}', dark: '{colorGrey350}' }, + colorTextFormSecondary: { light: '{colorNeutral600}', dark: '{colorNeutral450}' }, + colorTextGroupLabel: { light: '{colorNeutral650}', dark: '{colorNeutral350}' }, colorTextLabelGenAi: { light: '{colorPurple700}', dark: '{colorPurple400}' }, - colorTextHeadingDefault: { light: '{colorGrey950}', dark: '{colorGrey250}' }, - colorTextHeadingSecondary: { light: '{colorGrey650}', dark: '{colorGrey450}' }, - colorTextHomeHeaderDefault: '{colorGrey250}', - colorTextHomeHeaderSecondary: '{colorGrey350}', - colorTextIconCaret: { light: '{colorGrey500}', dark: '{colorGrey450}' }, - colorTextIconSubtle: { light: '{colorGrey600}', dark: '{colorGrey400}' }, - colorTextInputDisabled: { light: '{colorGrey400}', dark: '{colorGrey600}' }, - colorTextInputPlaceholder: { light: '{colorGrey600}', dark: '{colorGrey450}' }, + 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: '{colorGrey950}', dark: '{colorGrey100}' }, - colorTextInteractiveDefault: { light: '{colorGrey650}', dark: '{colorGrey300}' }, - colorTextInteractiveDisabled: { light: '{colorGrey400}', dark: '{colorGrey600}' }, - colorTextInteractiveHover: { light: '{colorGrey950}', dark: '{colorGrey100}' }, - colorTextToggleButtonIconPressed: { light: '{colorGrey950}', dark: '{colorGrey100}' }, - colorTextInteractiveInvertedDefault: '{colorGrey300}', - colorTextInteractiveInvertedHover: '{colorGrey100}', - colorTextInverted: { light: '{colorWhite}', dark: '{colorGrey950}' }, + 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: '{colorGrey850}' }, - colorTextLayoutToggleHover: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorTextLayoutToggleSelected: { light: '{colorWhite}', dark: '{colorGrey950}' }, - colorTextLinkDefault: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorTextLinkHover: { light: '{colorBlue900}', dark: '{colorBlue300}' }, + 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}' }, colorTextLinkInvertedHover: '{colorWhite}', colorTextLinkButtonUnderline: 'transparent', colorTextLinkButtonUnderlineHover: 'transparent', - colorTextNotificationDefault: '{colorGrey100}', + colorTextNotificationDefault: '{colorNeutral100}', colorTextNotificationStackBar: '{colorWhite}', - colorTextNotificationYellow: '{colorGrey950}', + colorTextNotificationYellow: '{colorNeutral950}', colorTextPaginationPageNumberActiveDisabled: '{colorTextInteractiveDisabled}', - colorTextPaginationPageNumberDefault: { light: '{colorTextInteractiveDefault}', dark: '{colorGrey400}' }, - colorTextSegmentActive: { light: '{colorWhite}', dark: '{colorGrey950}' }, - colorTextSegmentDefault: { light: '{colorGrey650}', dark: '{colorGrey300}' }, + colorTextPaginationPageNumberDefault: { light: '{colorTextInteractiveDefault}', dark: '{colorNeutral400}' }, + colorTextSegmentActive: { light: '{colorWhite}', dark: '{colorNeutral950}' }, + colorTextSegmentDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' }, colorTextSegmentHover: '{colorTextButtonNormalHover}', - colorTextSmall: { light: '{colorGrey600}', dark: '{colorGrey450}' }, - colorTextStatusError: { light: '{colorRed600}', dark: '{colorRed400}' }, - colorTextStatusInactive: { light: '{colorGrey600}', dark: '{colorGrey450}' }, - colorTextStatusInfo: { light: '{colorBlue600}', dark: '{colorBlue400}' }, - colorTextStatusSuccess: { light: '{colorGreen600}', dark: '{colorGreen500}' }, - colorTextStatusWarning: { light: '{colorYellow900}', dark: '{colorYellow500}' }, - colorTextTopNavigationTitle: { light: '{colorGrey950}', dark: '{colorGrey100}' }, + 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: '{colorGrey250}', dark: '{colorGrey600}' }, - colorBoardPlaceholderHover: { light: '{colorBlue100}', dark: '{colorBlue600}' }, - colorDragPlaceholderActive: { light: '{colorGrey250}', dark: '{colorGrey600}' }, - colorDragPlaceholderHover: { light: '{colorBlue100}', dark: '{colorBlue600}' }, - colorDropzoneBackgroundDefault: { light: '{colorWhite}', dark: '{colorGrey850}' }, - colorDropzoneBackgroundHover: { light: '{colorBlue50}', dark: '{colorBlue1000}' }, - colorDropzoneTextDefault: { light: '{colorGrey650}', dark: '{colorGrey350}' }, - colorDropzoneTextHover: { light: '{colorGrey650}', dark: '{colorGrey350}' }, - colorDropzoneBorderDefault: { light: '{colorGrey500}', dark: '{colorGrey600}' }, - colorDropzoneBorderHover: { light: '{colorBlue900}', dark: '{colorBlue300}' }, - colorGapGlobalDrawer: { light: '{colorGrey250}', dark: '{colorGrey950}' }, + 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}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); diff --git a/style-dictionary/visual-refresh/contexts/alert.ts b/style-dictionary/visual-refresh/contexts/alert.ts index de275d6e08..66565e2666 100644 --- a/style-dictionary/visual-refresh/contexts/alert.ts +++ b/style-dictionary/visual-refresh/contexts/alert.ts @@ -8,13 +8,13 @@ import { tokens as parentTokens } from '../colors.js'; export const alertButtonTokens: StyleDictionary.ColorsDictionary = { colorTextButtonNormalDefault: { - light: '{colorGrey650}', - dark: '{colorGrey300}', + light: '{colorNeutral650}', + dark: '{colorNeutral300}', }, colorBorderButtonNormalDefault: '{colorTextButtonNormalDefault}', colorBackgroundButtonNormalDefault: 'transparent', colorTextButtonNormalHover: { - light: '{colorGrey950}', + light: '{colorNeutral950}', dark: '{colorWhite}', }, colorBorderButtonNormalHover: '{colorTextButtonNormalHover}', @@ -42,7 +42,7 @@ const colorTokens: StyleDictionary.ColorsDictionary = { ...alertButtonTokens, ...alertExpandableSectionTokens, colorBorderItemFocused: { - dark: '{colorGrey100}', + dark: '{colorNeutral100}', }, }; diff --git a/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts b/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts index 6513325737..985715608b 100644 --- a/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts +++ b/style-dictionary/visual-refresh/contexts/app-layout-toolbar.ts @@ -6,7 +6,7 @@ import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; const tokens = { - colorBackgroundLayoutMain: { light: '{colorGrey50}', dark: '{colorGrey900}' }, + colorBackgroundLayoutMain: { light: '{colorNeutral50}', dark: '{colorNeutral900}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, { ...tokens })); diff --git a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts index 9ef63247b0..1c1224483b 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts @@ -18,12 +18,12 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = { colorBorderItemFocused: '{colorTextNotificationYellow}', // Dismiss button - colorTextInteractiveInvertedDefault: '{colorGrey650}', - colorTextInteractiveInvertedHover: '{colorGrey950}', + colorTextInteractiveInvertedDefault: '{colorNeutral650}', + colorTextInteractiveInvertedHover: '{colorNeutral950}', // Progress bars in flashbars should be using variant="flash" (which uses a white background by default). // For the warning state, it should use colorGrey950. - colorBackgroundProgressBarContentInFlash: '{colorGrey950}', + colorBackgroundProgressBarContentInFlash: '{colorNeutral950}', colorBackgroundProgressBarLayoutInFlash: '{colorGreyOpaque10}', // Expandable sections @@ -37,8 +37,8 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = { colorTextBodyDefault: '{colorTextNotificationYellow}', // Tutorial hotspot - colorTextTutorialHotspotDefault: '{colorGrey600}', - colorTextTutorialHotspotHover: '{colorGrey900}', + colorTextTutorialHotspotDefault: '{colorNeutral600}', + colorTextTutorialHotspotHover: '{colorNeutral900}', // Inline-code variant background in Box colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.1)', diff --git a/style-dictionary/visual-refresh/contexts/flashbar.ts b/style-dictionary/visual-refresh/contexts/flashbar.ts index f333f6ffc1..52e05b8dba 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar.ts @@ -7,8 +7,8 @@ import { StyleDictionary } from '../../utils/interfaces.js'; import { tokens as parentTokens } from '../colors.js'; export const baseTokens: StyleDictionary.ColorsDictionary = { - colorTextButtonNormalDefault: '{colorGrey100}', - colorBorderButtonNormalDefault: '{colorGrey100}', + colorTextButtonNormalDefault: '{colorNeutral100}', + colorBorderButtonNormalDefault: '{colorNeutral100}', colorBackgroundButtonNormalDefault: 'transparent', colorTextButtonNormalHover: '{colorWhite}', colorBorderButtonNormalHover: '{colorWhite}', @@ -16,14 +16,14 @@ export const baseTokens: StyleDictionary.ColorsDictionary = { colorTextButtonNormalActive: '{colorWhite}', colorBorderButtonNormalActive: '{colorWhite}', colorBackgroundButtonNormalActive: 'rgba(0, 7, 22, 0.2)', - colorBorderItemFocused: '{colorGrey100}', - colorTextExpandableSectionDefault: '{colorGrey100}', + colorBorderItemFocused: '{colorNeutral100}', + colorTextExpandableSectionDefault: '{colorNeutral100}', colorTextExpandableSectionHover: '{colorWhite}', - colorTextBodyDefault: '{colorGrey100}', - colorTextHeadingSecondary: '{colorGrey100}', - colorBorderDividerDefault: '{colorGrey100}', - colorTextTutorialHotspotDefault: '{colorGrey300}', - colorTextTutorialHotspotHover: '{colorGrey100}', + colorTextBodyDefault: '{colorNeutral100}', + colorTextHeadingSecondary: '{colorNeutral100}', + colorBorderDividerDefault: '{colorNeutral100}', + colorTextTutorialHotspotDefault: '{colorNeutral300}', + colorTextTutorialHotspotHover: '{colorNeutral100}', colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)', }; diff --git a/style-dictionary/visual-refresh/contexts/header.ts b/style-dictionary/visual-refresh/contexts/header.ts index 797a80f0a3..b8f6bd7918 100644 --- a/style-dictionary/visual-refresh/contexts/header.ts +++ b/style-dictionary/visual-refresh/contexts/header.ts @@ -7,7 +7,7 @@ import { StyleDictionary } from '../../utils/interfaces.js'; import { tokens as parentColorTokens } from '../colors.js'; import { tokens as parentShadowsTokens } from '../shadows.js'; -const background = '{colorGrey950}'; +const background = '{colorNeutral950}'; const colorTokens: StyleDictionary.ColorsDictionary = { colorBackgroundLayoutMain: background, diff --git a/style-dictionary/visual-refresh/contexts/top-navigation.ts b/style-dictionary/visual-refresh/contexts/top-navigation.ts index 6756ce1abe..1b8b6f2a60 100644 --- a/style-dictionary/visual-refresh/contexts/top-navigation.ts +++ b/style-dictionary/visual-refresh/contexts/top-navigation.ts @@ -7,8 +7,8 @@ import { StyleDictionary } from '../../utils/interfaces.js'; import { tokens as parentTokens } from '../colors.js'; const tokens = { - colorBackgroundContainerContent: '{colorGrey850}', - colorBackgroundDropdownItemDefault: '{colorGrey850}', + colorBackgroundContainerContent: '{colorNeutral850}', + colorBackgroundDropdownItemDefault: '{colorNeutral850}', }; const darkModeValues = pickState(parentTokens, 'dark');