feat: Updates severity notification palette (#3016)

src/badge/styles.scss

@@ -37,27 +37,27 @@
   }
 
   &.badge-color-severity-critical {
-    background-color: awsui.$color-background-severity-critical;
-    color: awsui.$color-text-severity-critical;
+    background-color: awsui.$color-background-notification-severity-critical;
+    color: awsui.$color-text-notification-severity-critical;
   }
 
   &.badge-color-severity-high {
-    background-color: awsui.$color-background-severity-high;
-    color: awsui.$color-text-severity-high;
+    background-color: awsui.$color-background-notification-severity-high;
+    color: awsui.$color-text-notification-severity-high;
   }
 
   &.badge-color-severity-medium {
-    background-color: awsui.$color-background-severity-medium;
-    color: awsui.$color-text-severity-medium;
+    background-color: awsui.$color-background-notification-severity-medium;
+    color: awsui.$color-text-notification-severity-medium;
   }
 
   &.badge-color-severity-low {
-    background-color: awsui.$color-background-severity-low;
-    color: awsui.$color-text-severity-low;
+    background-color: awsui.$color-background-notification-severity-low;
+    color: awsui.$color-text-notification-severity-low;
   }
 
   &.badge-color-severity-neutral {
-    background-color: awsui.$color-background-severity-neutral;
-    color: awsui.$color-text-severity-neutral;
+    background-color: awsui.$color-background-notification-severity-neutral;
+    color: awsui.$color-text-notification-severity-neutral;
   }
 }

style-dictionary/classic/color-severity.ts

@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge';
+
+import { expandColorDictionary } from '../utils';
+import { StyleDictionary } from '../utils/interfaces';
+import { tokens as parentTokens } from '../visual-refresh/color-severity';
+
+const tokens: StyleDictionary.ColorSeverityDictionary = {
+  colorTextNotificationSeverityMedium: { light: '{colorBlack}', dark: '{colorGrey900}' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(
+  {},
+  parentTokens,
+  expandColorDictionary(tokens)
+);
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'color';

style-dictionary/classic/colors.ts

@@ -149,7 +149,6 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorDragPlaceholderActive: { light: '{colorGrey300}', dark: '{colorGrey550}' },
   colorDragPlaceholderHover: { light: '{colorBlue300}', dark: '{colorBlue600}' },
   colorBackgroundDropdownItemHover: { light: '{colorGrey150}', dark: '{colorGrey650}' },
-  colorTextSeverityMedium: { light: '{colorBlack}', dark: '{colorGrey900}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(

style-dictionary/classic/index.ts

@@ -21,6 +21,7 @@ const modes = [
 const tokenCategories = [
   require('./color-palette'),
   require('./color-charts'),
+  require('./color-severity'),
   require('./colors'),
   require('./typography'),
   require('./borders'),

style-dictionary/utils/interfaces.ts

@@ -7,6 +7,7 @@ import {
   ColorChartsTokenName,
   ColorPaletteTokenName,
   ColorScopeTokenName,
+  ColorSeverityTokenName,
   ColorsTokenName,
   DensityScopeTokenName,
   GlobalScopeTokenName,
@@ -47,6 +48,7 @@ export namespace StyleDictionary {
   export type TypographyDictionary = Partial<TokenCategory<TypographyTokenName, GlobalEntry>>;
   export type BordersDictionary = Partial<TokenCategory<BordersTokenName, GlobalEntry>>;
   export type ColorChartsDictionary = Partial<TokenCategory<ColorChartsTokenName, ColorModeEntry>>;
+  export type ColorSeverityDictionary = Partial<TokenCategory<ColorSeverityTokenName, ColorModeEntry>>;
   export type ColorsDictionary = Partial<TokenCategory<ColorsTokenName, ColorModeEntry>>;
   export type ShadowsDictionary = Partial<TokenCategory<ShadowsTokenName, ColorModeEntry>>;
 

style-dictionary/utils/token-names.ts

@@ -210,6 +210,22 @@ export type ColorChartsTokenName =
   | 'colorChartsPaletteCategorical48'
   | 'colorChartsPaletteCategorical49'
   | 'colorChartsPaletteCategorical50';
+export type ColorSeverityTokenName =
+  | 'colorSeverityDarkRed'
+  | 'colorSeverityRed'
+  | 'colorSeverityOrange'
+  | 'colorSeverityYellow'
+  | 'colorSeverityGrey'
+  | 'colorBackgroundNotificationSeverityCritical'
+  | 'colorBackgroundNotificationSeverityHigh'
+  | 'colorBackgroundNotificationSeverityMedium'
+  | 'colorBackgroundNotificationSeverityLow'
+  | 'colorBackgroundNotificationSeverityNeutral'
+  | 'colorTextNotificationSeverityCritical'
+  | 'colorTextNotificationSeverityHigh'
+  | 'colorTextNotificationSeverityMedium'
+  | 'colorTextNotificationSeverityLow'
+  | 'colorTextNotificationSeverityNeutral';
 export type ColorsTokenName =
   | 'colorGreyOpaque10'
   | 'colorGreyOpaque25'
@@ -472,17 +488,7 @@ export type ColorsTokenName =
   | 'colorDropzoneTextDefault'
   | 'colorDropzoneTextHover'
   | 'colorDropzoneBorderDefault'
-  | 'colorDropzoneBorderHover'
-  | 'colorBackgroundSeverityCritical'
-  | 'colorTextSeverityCritical'
-  | 'colorBackgroundSeverityHigh'
-  | 'colorTextSeverityHigh'
-  | 'colorBackgroundSeverityMedium'
-  | 'colorTextSeverityMedium'
-  | 'colorBackgroundSeverityLow'
-  | 'colorTextSeverityLow'
-  | 'colorBackgroundSeverityNeutral'
-  | 'colorTextSeverityNeutral';
+  | 'colorDropzoneBorderHover';
 export type TypographyTokenName =
   | 'fontBoxValueLargeWeight'
   | 'fontButtonLetterSpacing'
@@ -744,7 +750,7 @@ export type ShadowsTokenName =
   | 'shadowStickyColumnLast';
 
 export type GlobalScopeTokenName = ColorPaletteTokenName | TypographyTokenName | BordersTokenName;
-export type ColorScopeTokenName = ColorChartsTokenName | ColorsTokenName | ShadowsTokenName;
+export type ColorScopeTokenName = ColorChartsTokenName | ColorsTokenName | ShadowsTokenName | ColorSeverityTokenName;
 export type MotionScopeTokenName = MotionTokenName;
 export type DensityScopeTokenName = SizesTokenName | SpacingTokenName;
 

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

@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandColorDictionary } from '../utils';
+import { StyleDictionary } from '../utils/interfaces';
+
+const tokens: StyleDictionary.ColorSeverityDictionary = {
+  // note: these should not be used directly. Instead, use the semantic tokens defined below.
+  colorSeverityDarkRed: { light: '#870303', dark: '#d63f38' },
+  colorSeverityRed: { light: '#ce3311', dark: '#fe6e73' },
+  colorSeverityOrange: { light: '#f89256', dark: '#f89256' },
+  colorSeverityYellow: { light: '#f2cd54', dark: '#f2cd54' },
+  colorSeverityGrey: '{colorGrey550}',
+
+  colorBackgroundNotificationSeverityCritical: '{colorSeverityDarkRed}',
+  colorBackgroundNotificationSeverityHigh: '{colorSeverityRed}',
+  colorBackgroundNotificationSeverityMedium: '{colorSeverityOrange}',
+  colorBackgroundNotificationSeverityLow: '{colorSeverityYellow}',
+  colorBackgroundNotificationSeverityNeutral: '{colorSeverityGrey}',
+
+  colorTextNotificationSeverityCritical: { light: '{colorGrey100}', dark: '{colorBlack}' },
+  colorTextNotificationSeverityHigh: { light: '{colorGrey100}', dark: '{colorGrey900}' },
+  colorTextNotificationSeverityMedium: '{colorGrey900}',
+  colorTextNotificationSeverityLow: '{colorGrey900}',
+  colorTextNotificationSeverityNeutral: '{colorGrey100}',
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'color';

style-dictionary/visual-refresh/colors.ts

@@ -268,16 +268,6 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorDropzoneTextHover: { light: '{colorGrey600}', dark: '{colorGrey350}' },
   colorDropzoneBorderDefault: { light: '{colorGrey500}', dark: '{colorGrey550}' },
   colorDropzoneBorderHover: { light: '{colorBlue800}', dark: '{colorBlue400}' },
-  colorBackgroundSeverityCritical: '{colorChartsStatusCritical}',
-  colorTextSeverityCritical: { light: '{colorGrey100}', dark: '{colorBlack}' },
-  colorBackgroundSeverityHigh: '{colorChartsStatusHigh}',
-  colorTextSeverityHigh: { light: '{colorGrey100}', dark: '{colorGrey900}' },
-  colorBackgroundSeverityMedium: '{colorChartsStatusMedium}',
-  colorTextSeverityMedium: '{colorGrey900}',
-  colorBackgroundSeverityLow: '{colorChartsStatusLow}',
-  colorTextSeverityLow: '{colorGrey900}',
-  colorBackgroundSeverityNeutral: { light: '{colorGrey600}', dark: '{colorGrey550}' },
-  colorTextSeverityNeutral: '{colorGrey100}',
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);

style-dictionary/visual-refresh/index.ts

@@ -22,6 +22,7 @@ const modes = [
 const tokenCategories = [
   require('./color-palette'),
   require('./color-charts'),
+  require('./color-severity'),
   require('./colors'),
   require('./typography'),
   require('./borders'),

style-dictionary/visual-refresh/metadata/color-severity.ts

@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces';
+
+const metadata: StyleDictionary.MetadataIndex = {
+  colorBackgroundNotificationSeverityCritical: {
+    description:
+      'Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationSeverityHigh: {
+    description:
+      'Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationSeverityMedium: {
+    description: 'Background color in a notification to represent a medium-level of severity. For example: "Sev-3"',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationSeverityLow: {
+    description:
+      'Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationSeverityNeutral: {
+    description:
+      'Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationSeverityCritical: {
+    description:
+      'Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationSeverityHigh: {
+    description:
+      'Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationSeverityMedium: {
+    description: 'Text color in a notification to represent a medium-level of severity. For example: "Sev-3"',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationSeverityLow: {
+    description:
+      'Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationSeverityNeutral: {
+    description:
+      'Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"',
+    public: true,
+    themeable: true,
+  },
+};
+
+export default metadata;

style-dictionary/visual-refresh/metadata/index.ts

@@ -9,6 +9,7 @@ import theme from '../index';
 import borders from './borders';
 import colorCharts from './color-charts';
 import colorPalette from './color-palette';
+import colorSeverity from './color-severity';
 import colors from './colors';
 import motion from './motion';
 import shadows from './shadows';
@@ -19,6 +20,19 @@ import typography from './typography';
 const allTokens = mapValues(theme.tokens, () => ({}));
 
 const metadata: StyleDictionary.MetadataIndex = expandMetadata(
-  merge({}, allTokens, borders, colorCharts, colorPalette, colors, motion, shadows, sizes, spacing, typography)
+  merge(
+    {},
+    allTokens,
+    borders,
+    colorCharts,
+    colorSeverity,
+    colorPalette,
+    colors,
+    motion,
+    shadows,
+    sizes,
+    spacing,
+    typography
+  )
 );
 export default metadata;