chore: Align token color palette names with brand palette (#3558)

Author: jkuelz

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: '{colorGrey650}' },
-  colorChartsLineTick: { dark: '{colorGrey650}' },
-  colorChartsLineAxis: { dark: '{colorGrey650}' },
+  colorChartsLineGrid: { dark: '{colorGrey700}' },
+  colorChartsLineTick: { dark: '{colorGrey700}' },
+  colorChartsLineAxis: { dark: '{colorGrey700}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(

style-dictionary/classic/color-palette.ts

@@ -6,36 +6,36 @@ import { StyleDictionary } from '../utils/interfaces.js';
 import { tokens as parentTokens } from '../visual-refresh/color-palette.js';
 
 const tokens: StyleDictionary.ColorPaletteDictionary = {
-  colorBlue100: '#f1faff',
-  colorBlue300: '#99cbe4',
-  colorBlue400: '#44b9d6',
-  colorBlue500: '#00a1c9',
+  colorBlue50: '#f1faff',
+  colorBlue200: '#99cbe4',
+  colorBlue300: '#44b9d6',
+  colorBlue400: '#00a1c9',
   colorBlue600: '#0073bb',
   colorBlue700: '#0a4a74',
-  colorBlue900: '#12293b',
-  colorGreen100: '#f2f8f0',
+  colorBlue1000: '#12293b',
+  colorGreen50: '#f2f8f0',
   colorGreen500: '#6aaf35',
   colorGreen600: '#1d8102',
-  colorGreen900: '#172211',
+  colorGreen1000: '#172211',
   colorGrey100: '#fafafa',
-  colorGrey150: '#f2f3f3',
-  colorGrey200: '#eaeded',
+  colorGrey200: '#f2f3f3',
+  colorGrey250: '#eaeded',
   colorGrey300: '#d5dbdb',
   colorGrey400: '#aab7b8',
   colorGrey450: '#95a5a6',
   colorGrey500: '#879596',
-  colorGrey550: '#687078',
-  colorGrey600: '#545b64',
-  colorGrey650: '#414750',
-  colorGrey700: '#2a2e33',
-  colorGrey750: '#21252c',
-  colorGrey800: '#1a2029',
-  colorGrey900: '#16191f',
-  colorRed100: '#fdf3f1',
-  colorRed500: '#ff5d64',
+  colorGrey600: '#687078',
+  colorGrey650: '#545b64',
+  colorGrey700: '#414750',
+  colorGrey750: '#2a2e33',
+  colorGrey800: '#21252c',
+  colorGrey850: '#1a2029',
+  colorGrey950: '#16191f',
+  colorRed50: '#fdf3f1',
+  colorRed400: '#ff5d64',
   colorRed600: '#d13212',
-  colorRed900: '#270a11',
-  colorYellow800: '#906806',
+  colorRed1000: '#270a11',
+  colorYellow900: '#906806',
 };
 
 const expandedTokens: StyleDictionary.ExpandedGlobalScopeDictionary = merge({}, parentTokens, tokens);

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: '{colorGrey900}' },
+  colorTextNotificationSeverityMedium: { light: '{colorBlack}', dark: '{colorGrey950}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(

style-dictionary/classic/colors.ts

@@ -9,7 +9,7 @@ import { tokens as parentTokens } from '../colors.js';
 const appLayoutToolsDrawerTriggerFocusedButton: StyleDictionary.ColorsDictionary = {
   colorBorderItemFocused: {
     light: '{colorGrey100}',
-    dark: '{colorGrey700}',
+    dark: '{colorGrey750}',
   },
 };
 

style-dictionary/classic/contexts/tools-drawer-trigger.ts

@@ -1,35 +1,34 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 export type ColorPaletteTokenName =
-  | 'colorAmazonOrange'
+  | 'colorAmber400'
+  | 'colorAmber500'
   | 'colorAwsSquidInk'
   | 'colorBlack'
+  | 'colorBlue50'
   | 'colorBlue100'
   | 'colorBlue200'
   | 'colorBlue300'
   | 'colorBlue400'
-  | 'colorBlue500'
   | 'colorBlue600'
   | 'colorBlue700'
-  | 'colorBlue800'
   | 'colorBlue900'
-  | 'colorBlueOpaque'
-  | 'colorGreen100'
+  | 'colorBlue1000'
+  | 'colorGreen50'
   | 'colorGreen500'
   | 'colorGreen600'
-  | 'colorGreen700'
   | 'colorGreen900'
+  | 'colorGreen1000'
   | 'colorGrey50'
   | 'colorGrey100'
-  | 'colorGrey125'
   | 'colorGrey150'
   | 'colorGrey200'
+  | 'colorGrey250'
   | 'colorGrey300'
   | 'colorGrey350'
   | 'colorGrey400'
   | 'colorGrey450'
   | 'colorGrey500'
-  | 'colorGrey550'
   | 'colorGrey600'
   | 'colorGrey650'
   | 'colorGrey700'
@@ -38,22 +37,19 @@ export type ColorPaletteTokenName =
   | 'colorGrey850'
   | 'colorGrey900'
   | 'colorGrey950'
-  | 'colorOrange100'
-  | 'colorOrange500'
-  | 'colorOrange600'
-  | 'colorOrange700'
+  | 'colorGrey1000'
   | 'colorPurple400'
-  | 'colorPurple600'
-  | 'colorRed100'
-  | 'colorRed500'
+  | 'colorPurple700'
+  | 'colorRed50'
+  | 'colorRed400'
   | 'colorRed600'
-  | 'colorRed700'
   | 'colorRed900'
-  | 'colorYellow100'
-  | 'colorYellow600'
-  | 'colorYellow700'
-  | 'colorYellow800'
+  | 'colorRed1000'
+  | 'colorYellow50'
+  | 'colorYellow400'
+  | 'colorYellow500'
   | 'colorYellow900'
+  | 'colorYellow1000'
   | 'colorTransparent'
   | 'colorWhite';
 export type ColorChartsTokenName =

style-dictionary/utils/token-names.ts

@@ -101,13 +101,13 @@ const tokens: StyleDictionary.ColorChartsDictionary = {
   colorChartsStatusPositive: { light: '{colorChartsGreen300}', dark: '{colorChartsGreen500}' },
   colorChartsStatusInfo: { light: '{colorChartsBlue1400}', dark: '{colorChartsBlue1500}' },
   colorChartsStatusNeutral: '{colorGrey500}',
-  colorChartsThresholdNegative: { light: '{colorRed600}', dark: '{colorRed500}' },
+  colorChartsThresholdNegative: { light: '{colorRed600}', dark: '{colorRed400}' },
   colorChartsThresholdPositive: { light: '{colorGreen600}', dark: '{colorGreen500}' },
-  colorChartsThresholdInfo: { light: '{colorBlue600}', dark: '{colorBlue400}' },
-  colorChartsThresholdNeutral: { light: '{colorGrey550}', dark: '{colorGrey450}' },
-  colorChartsLineGrid: { light: '{colorGrey300}', dark: '{colorGrey600}' },
-  colorChartsLineTick: { light: '{colorGrey300}', dark: '{colorGrey600}' },
-  colorChartsLineAxis: { light: '{colorGrey300}', dark: '{colorGrey600}' },
+  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}' },
   colorChartsPaletteCategorical1: '{colorChartsBlue2300}',
   colorChartsPaletteCategorical2: '{colorChartsPink500}',
   colorChartsPaletteCategorical3: '{colorChartsTeal300}',

style-dictionary/visual-refresh/color-charts.ts

@@ -3,59 +3,62 @@
 import { StyleDictionary } from '../utils/interfaces.js';
 
 export const tokens: StyleDictionary.ColorPaletteDictionary = {
-  colorAmazonOrange: '#ff9900',
-  colorAwsSquidInk: '#232f3e',
-  colorBlack: '#000000',
-  colorBlue100: '#f0fbff',
-  colorBlue200: '#d1f1ff',
-  colorBlue300: '#b8e7ff',
-  colorBlue400: '#75cfff',
-  colorBlue500: '#42b4ff',
-  colorBlue600: '#006ce0',
-  colorBlue700: '#004a9e',
-  colorBlue800: '#002b66',
-  colorBlue900: '#001129',
-  colorBlueOpaque: 'rgba(51, 136, 221, 0.5)',
-  colorGreen100: '#effff1',
-  colorGreen500: '#2bb534',
-  colorGreen600: '#00802f',
-  colorGreen700: '#00471e',
-  colorGreen900: '#001401',
   colorGrey50: '#fcfcfd',
   colorGrey100: '#f9f9fa',
-  colorGrey125: '#f6f6f9',
-  colorGrey150: '#f3f3f7',
-  colorGrey200: '#ebebf0',
+  colorGrey150: '#f6f6f9',
+  colorGrey200: '#f3f3f7',
+  colorGrey250: '#ebebf0',
   colorGrey300: '#dedee3',
   colorGrey350: '#c6c6cd',
   colorGrey400: '#b4b4bb',
   colorGrey450: '#a4a4ad',
   colorGrey500: '#8c8c94',
-  colorGrey550: '#656871',
-  colorGrey600: '#424650',
-  colorGrey650: '#333843',
-  colorGrey700: '#232b37',
-  colorGrey750: '#1b232d',
-  colorGrey800: '#161d26',
-  colorGrey850: '#131920',
-  colorGrey900: '#0f141a',
-  colorGrey950: '#06080a',
-  colorOrange100: '#fef6f0',
-  colorOrange500: '#ec7211',
-  colorOrange600: '#eb5f07',
-  colorOrange700: '#dd6b10',
-  colorPurple400: '#bf80ff',
-  colorPurple600: '#7300e5',
-  colorRed100: '#fff5f5',
-  colorRed500: '#ff7a7a',
+  colorGrey600: '#656871',
+  colorGrey650: '#424650',
+  colorGrey700: '#333843',
+  colorGrey750: '#232b37',
+  colorGrey800: '#1b232d',
+  colorGrey850: '#161d26',
+  colorGrey900: '#131920',
+  colorGrey950: '#0f141a',
+  colorGrey1000: '#06080a',
+
+  colorBlue50: '#f0fbff',
+  colorBlue100: '#d1f1ff',
+  colorBlue200: '#b8e7ff',
+  colorBlue300: '#75cfff',
+  colorBlue400: '#42b4ff',
+  colorBlue600: '#006ce0',
+  colorBlue700: '#004a9e',
+  colorBlue900: '#002b66',
+  colorBlue1000: '#001129',
+
+  colorGreen50: '#effff1',
+  colorGreen500: '#2bb534',
+  colorGreen600: '#00802f',
+  colorGreen900: '#00471e',
+  colorGreen1000: '#001401',
+
+  colorRed50: '#fff5f5',
+  colorRed400: '#ff7a7a',
   colorRed600: '#db0000',
-  colorRed700: '#700000',
-  colorRed900: '#1f0000',
+  colorRed900: '#700000',
+  colorRed1000: '#1f0000',
+
+  colorYellow50: '#fffef0',
+  colorYellow400: '#ffe347',
+  colorYellow500: '#fbd332',
+  colorYellow900: '#855900',
+  colorYellow1000: '#191100',
+
+  colorPurple400: '#bf80ff',
+  colorPurple700: '#7300e5',
+
+  colorAmber400: '#ff9900',
+  colorAmber500: '#fa6f00',
+
+  colorAwsSquidInk: '#232f3e',
   colorTransparent: 'transparent',
+  colorBlack: '#000000',
   colorWhite: '#ffffff',
-  colorYellow100: '#fffef0',
-  colorYellow600: '#ffe347',
-  colorYellow700: '#fbd332',
-  colorYellow800: '#855900',
-  colorYellow900: '#191100',
 };

style-dictionary/visual-refresh/color-palette.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: '{colorGrey550}',
+  colorSeverityGrey: '{colorGrey600}',
 
   colorBackgroundNotificationSeverityCritical: '{colorSeverityDarkRed}',
   colorBackgroundNotificationSeverityHigh: '{colorSeverityRed}',
@@ -18,9 +18,9 @@ const tokens: StyleDictionary.ColorSeverityDictionary = {
   colorBackgroundNotificationSeverityNeutral: '{colorSeverityGrey}',
 
   colorTextNotificationSeverityCritical: { light: '{colorGrey100}', dark: '{colorBlack}' },
-  colorTextNotificationSeverityHigh: { light: '{colorGrey100}', dark: '{colorGrey900}' },
-  colorTextNotificationSeverityMedium: '{colorGrey900}',
-  colorTextNotificationSeverityLow: '{colorGrey900}',
+  colorTextNotificationSeverityHigh: { light: '{colorGrey100}', dark: '{colorGrey950}' },
+  colorTextNotificationSeverityMedium: '{colorGrey950}',
+  colorTextNotificationSeverityLow: '{colorGrey950}',
   colorTextNotificationSeverityNeutral: '{colorGrey100}',
 };