revert: Updates severity notification palette (#3014)

cloudscape-design · Nov 14, 2024 · 9ab7368 · 9ab7368
1 parent 7740586
commit 9ab7368
Show file tree

Hide file tree

Showing 13 changed files with 114 additions and 1,292 deletions.
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
diff --git a/src/badge/styles.scss b/src/badge/styles.scss
@@ -37,27 +37,27 @@
   }
 
   &.badge-color-severity-critical {
-    background-color: awsui.$color-background-notification-severity-critical;
-    color: awsui.$color-text-notification-severity-critical;
+    background-color: awsui.$color-background-severity-critical;
+    color: awsui.$color-text-severity-critical;
   }
 
   &.badge-color-severity-high {
-    background-color: awsui.$color-background-notification-severity-high;
-    color: awsui.$color-text-notification-severity-high;
+    background-color: awsui.$color-background-severity-high;
+    color: awsui.$color-text-severity-high;
   }
 
   &.badge-color-severity-medium {
-    background-color: awsui.$color-background-notification-severity-medium;
-    color: awsui.$color-text-notification-severity-medium;
+    background-color: awsui.$color-background-severity-medium;
+    color: awsui.$color-text-severity-medium;
   }
 
   &.badge-color-severity-low {
-    background-color: awsui.$color-background-notification-severity-low;
-    color: awsui.$color-text-notification-severity-low;
+    background-color: awsui.$color-background-severity-low;
+    color: awsui.$color-text-severity-low;
   }
 
   &.badge-color-severity-neutral {
-    background-color: awsui.$color-background-notification-severity-neutral;
-    color: awsui.$color-text-notification-severity-neutral;
+    background-color: awsui.$color-background-severity-neutral;
+    color: awsui.$color-text-severity-neutral;
   }
 }
diff --git a/style-dictionary/classic/color-severity.ts b/style-dictionary/classic/color-severity.ts
diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts
@@ -148,6 +148,7 @@ 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(

diff --git a/style-dictionary/classic/index.ts b/style-dictionary/classic/index.ts
@@ -21,7 +21,6 @@ const modes = [
 const tokenCategories = [
   require('./color-palette'),
   require('./color-charts'),
-  require('./color-severity'),
   require('./colors'),
   require('./typography'),
   require('./borders'),

diff --git a/style-dictionary/utils/interfaces.ts b/style-dictionary/utils/interfaces.ts
@@ -7,7 +7,6 @@ import {
   ColorChartsTokenName,
   ColorPaletteTokenName,
   ColorScopeTokenName,
-  ColorSeverityTokenName,
   ColorsTokenName,
   DensityScopeTokenName,
   GlobalScopeTokenName,
@@ -48,7 +47,6 @@ 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>>;
 

diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
@@ -210,22 +210,6 @@ 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'
@@ -488,7 +472,17 @@ export type ColorsTokenName =
   | 'colorDropzoneTextDefault'
   | 'colorDropzoneTextHover'
   | 'colorDropzoneBorderDefault'
-  | 'colorDropzoneBorderHover';
+  | 'colorDropzoneBorderHover'
+  | 'colorBackgroundSeverityCritical'
+  | 'colorTextSeverityCritical'
+  | 'colorBackgroundSeverityHigh'
+  | 'colorTextSeverityHigh'
+  | 'colorBackgroundSeverityMedium'
+  | 'colorTextSeverityMedium'
+  | 'colorBackgroundSeverityLow'
+  | 'colorTextSeverityLow'
+  | 'colorBackgroundSeverityNeutral'
+  | 'colorTextSeverityNeutral';
 export type TypographyTokenName =
   | 'fontBoxValueLargeWeight'
   | 'fontButtonLetterSpacing'
@@ -750,7 +744,7 @@ export type ShadowsTokenName =
   | 'shadowStickyColumnLast';
 
 export type GlobalScopeTokenName = ColorPaletteTokenName | TypographyTokenName | BordersTokenName;
-export type ColorScopeTokenName = ColorChartsTokenName | ColorsTokenName | ShadowsTokenName | ColorSeverityTokenName;
+export type ColorScopeTokenName = ColorChartsTokenName | ColorsTokenName | ShadowsTokenName;
 export type MotionScopeTokenName = MotionTokenName;
 export type DensityScopeTokenName = SizesTokenName | SpacingTokenName;
 

diff --git a/style-dictionary/visual-refresh/color-severity.ts b/style-dictionary/visual-refresh/color-severity.ts
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
@@ -268,6 +268,16 @@ 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);

diff --git a/style-dictionary/visual-refresh/index.ts b/style-dictionary/visual-refresh/index.ts
@@ -22,7 +22,6 @@ const modes = [
 const tokenCategories = [
   require('./color-palette'),
   require('./color-charts'),
-  require('./color-severity'),
   require('./colors'),
   require('./typography'),
   require('./borders'),

diff --git a/style-dictionary/visual-refresh/metadata/color-severity.ts b/style-dictionary/visual-refresh/metadata/color-severity.ts
diff --git a/style-dictionary/visual-refresh/metadata/index.ts b/style-dictionary/visual-refresh/metadata/index.ts
@@ -9,7 +9,6 @@ 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';
@@ -20,19 +19,6 @@ import typography from './typography';
 const allTokens = mapValues(theme.tokens, () => ({}));
 
 const metadata: StyleDictionary.MetadataIndex = expandMetadata(
-  merge(
-    {},
-    allTokens,
-    borders,
-    colorCharts,
-    colorSeverity,
-    colorPalette,
-    colors,
-    motion,
-    shadows,
-    sizes,
-    spacing,
-    typography
-  )
+  merge({}, allTokens, borders, colorCharts, colorPalette, colors, motion, shadows, sizes, spacing, typography)
 );
 export default metadata;