refactor: decouple flash and alert styling from shared tokens

src/alert/styles.scss

@@ -24,6 +24,7 @@
 
 .alert {
   @include styles.styles-reset;
+  color: awsui.$color-text-alert-default;
   position: relative;
   display: flex;
   flex-direction: row;
@@ -144,17 +145,17 @@ $_border-colors: (
 );
 
 $_background-colors: (
-  'error': awsui.$color-background-status-error,
-  'warning': awsui.$color-background-status-warning,
-  'success': awsui.$color-background-status-success,
-  'info': awsui.$color-background-status-info,
+  'error': awsui.$color-background-alert-error,
+  'warning': awsui.$color-background-alert-warning,
+  'success': awsui.$color-background-alert-success,
+  'info': awsui.$color-background-alert-info,
 );
 
 $_text-colors: (
-  'error': awsui.$color-text-status-error,
-  'warning': awsui.$color-text-status-warning,
-  'success': awsui.$color-text-status-success,
-  'info': awsui.$color-text-status-info,
+  'error': awsui.$color-text-alert-icon-error,
+  'warning': awsui.$color-text-alert-icon-warning,
+  'success': awsui.$color-text-alert-icon-success,
+  'info': awsui.$color-text-alert-icon-info,
 );
 
 @each $type in map.keys($_text-colors) {

src/flashbar/flash.tsx

@@ -224,6 +224,10 @@ export const Flash = React.forwardRef(
             [styles.exiting]: transitionState === 'exiting',
             [styles.exited]: transitionState === 'exited',
           },
+          // The separate flashbar-warning context exists for VR, where warning
+          // flashes have a light background and dark text. One Theme does not
+          // need this context. We don't want to add a isOneTheme check here so
+          // we still set the flashbar-warning context for One Theme.
           getVisualContextClassname(type === 'warning' && !loading ? 'flashbar-warning' : 'flashbar'),
           initialHidden && styles['initial-hidden']
         )}

src/flashbar/styles.scss

@@ -151,7 +151,7 @@
   border-inline-start-color: awsui.$color-border-status-success;
 
   > .flash-body > .flash-focus-container > .flash-icon {
-    color: awsui.$color-text-status-success;
+    color: awsui.$color-text-flashbar-icon-success;
   }
 }
 
@@ -160,7 +160,7 @@
   border-inline-start-color: awsui.$color-border-status-error;
 
   > .flash-body > .flash-focus-container > .flash-icon {
-    color: awsui.$color-text-status-error;
+    color: awsui.$color-text-flashbar-icon-error;
   }
 }
 
@@ -170,7 +170,7 @@
   border-inline-start-color: awsui.$color-border-status-info;
 
   > .flash-body > .flash-focus-container > .flash-icon {
-    color: awsui.$color-text-status-info;
+    color: awsui.$color-text-flashbar-icon-info;
   }
 }
 
@@ -180,6 +180,6 @@
   border-inline-start-color: awsui.$color-border-status-warning;
 
   > .flash-body > .flash-focus-container > .flash-icon {
-    color: awsui.$color-text-status-warning;
+    color: awsui.$color-text-flashbar-icon-warning;
   }
 }

src/progress-bar/internal.tsx

@@ -39,7 +39,11 @@ export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDesc
   return (
     <div className={styles['progress-container']}>
       <progress
-        className={clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete)}
+        className={clsx(
+          styles.progress,
+          progressValue >= MAX_VALUE && styles.complete,
+          isInFlash && styles['progress-flash']
+        )}
         max={MAX_VALUE}
         value={progressValue}
         aria-label={ariaLabel}

src/progress-bar/styles.scss

@@ -129,6 +129,26 @@ $progress-value-background-color: var(
     @include general-progress-bar-style;
     background-color: $progress-value-background-color;
   }
+
+  &.progress-flash {
+    background-color: var(#{custom-props.$progressBarBackgroundColor}, awsui.$color-background-progress-bar-flash);
+
+    &::-webkit-progress-bar {
+      background-color: var(#{custom-props.$progressBarBackgroundColor}, awsui.$color-background-progress-bar-flash);
+    }
+    &::-webkit-progress-value {
+      background-color: var(
+        #{custom-props.$progressValueBackgroundColor},
+        awsui.$color-background-progress-bar-value-flash
+      );
+    }
+    &::-moz-progress-bar {
+      background-color: var(
+        #{custom-props.$progressValueBackgroundColor},
+        awsui.$color-background-progress-bar-value-flash
+      );
+    }
+  }
 }
 
 .additional-info {

style-dictionary/utils/token-names.ts

@@ -625,6 +625,8 @@ export type ColorsTokenName =
   | 'colorBackgroundVisualAccentAmber'
   | 'colorBackgroundPopover'
   | 'colorBackgroundProgressBarValueDefault'
+  | 'colorBackgroundProgressBarValueFlash'
+  | 'colorBackgroundProgressBarFlash'
   | 'colorBackgroundProgressBarDefault'
   | 'colorBackgroundSegmentActive'
   | 'colorBackgroundSegmentDefault'
@@ -647,6 +649,10 @@ export type ColorsTokenName =
   | 'colorBackgroundSliderRangeErrorActive'
   | 'colorBackgroundSliderRangeWarningDefault'
   | 'colorBackgroundSliderRangeWarningActive'
+  | 'colorBackgroundAlertError'
+  | 'colorBackgroundAlertInfo'
+  | 'colorBackgroundAlertSuccess'
+  | 'colorBackgroundAlertWarning'
   | 'colorBackgroundStatusError'
   | 'colorBackgroundStatusInfo'
   | 'colorBackgroundDialog'
@@ -813,6 +819,10 @@ export type ColorsTokenName =
   | 'colorTextExpandableSectionDefault'
   | 'colorTextExpandableSectionHover'
   | 'colorTextExpandableSectionNavigationIconDefault'
+  | 'colorTextFlashbarIconError'
+  | 'colorTextFlashbarIconInfo'
+  | 'colorTextFlashbarIconSuccess'
+  | 'colorTextFlashbarIconWarning'
   | 'colorBorderExpandableSectionDefault'
   | 'colorTextFormDefault'
   | 'colorTextFormLabel'
@@ -859,6 +869,11 @@ export type ColorsTokenName =
   | 'colorTextLinkInfoHover'
   | 'colorTextLinkInvertedHover'
   | 'colorTextNotificationDefault'
+  | 'colorTextAlertDefault'
+  | 'colorTextAlertIconError'
+  | 'colorTextAlertIconInfo'
+  | 'colorTextAlertIconSuccess'
+  | 'colorTextAlertIconWarning'
   | 'colorTextNotificationStackBar'
   | 'colorTextNotificationYellow'
   | 'colorTextPaginationPageNumberActiveDisabled'

style-dictionary/visual-refresh/colors.ts

@@ -95,6 +95,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundNotificationStackBarHover: '{colorNeutral650}',
   colorBackgroundPopover: { light: '{colorWhite}', dark: '{colorNeutral800}' },
   colorBackgroundProgressBarValueDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBackgroundProgressBarValueFlash: '{colorBackgroundProgressBarValueDefault}',
+  colorBackgroundProgressBarFlash: '{colorBackgroundProgressBarDefault}',
   colorBackgroundProgressBarDefault: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
   colorBackgroundSegmentActive: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
   colorBackgroundSegmentDefault: '{colorBackgroundButtonNormalDefault}',
@@ -117,6 +119,10 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundSliderRangeWarningActive: '{colorTextStatusWarning}',
   colorBackgroundStatusError: { light: '{colorError50}', dark: '{colorError1000}' },
   colorBackgroundStatusInfo: { light: '{colorInfo50}', dark: '{colorInfo1000}' },
+  colorBackgroundAlertError: '{colorBackgroundStatusError}',
+  colorBackgroundAlertInfo: '{colorBackgroundStatusInfo}',
+  colorBackgroundAlertSuccess: '{colorBackgroundStatusSuccess}',
+  colorBackgroundAlertWarning: '{colorBackgroundStatusWarning}',
   colorBackgroundDialog: '{colorBackgroundStatusInfo}',
   colorBackgroundStatusSuccess: { light: '{colorSuccess50}', dark: '{colorSuccess1000}' },
   colorBackgroundStatusWarning: { light: '{colorWarning50}', dark: '{colorWarning1000}' },
@@ -317,6 +323,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextLinkButtonUnderline: 'transparent',
   colorTextLinkButtonUnderlineHover: 'transparent',
   colorTextNotificationDefault: '{colorNeutral100}',
+  colorTextAlertDefault: '{colorTextBodyDefault}',
   colorTextNotificationStackBar: '{colorWhite}',
   colorTextNotificationYellow: '{colorNeutral950}',
   colorTextPaginationPageNumberActiveDisabled: '{colorTextInteractiveDisabled}',
@@ -325,6 +332,14 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextSegmentDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' },
   colorTextSegmentHover: '{colorTextButtonNormalHover}',
   colorTextSmall: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
+  colorTextFlashbarIconError: '{colorTextStatusError}',
+  colorTextFlashbarIconInfo: '{colorTextStatusInfo}',
+  colorTextFlashbarIconSuccess: '{colorTextStatusSuccess}',
+  colorTextFlashbarIconWarning: '{colorTextStatusWarning}',
+  colorTextAlertIconError: '{colorTextStatusError}',
+  colorTextAlertIconInfo: '{colorTextStatusInfo}',
+  colorTextAlertIconSuccess: '{colorTextStatusSuccess}',
+  colorTextAlertIconWarning: '{colorTextStatusWarning}',
   colorTextStatusError: { light: '{colorError600}', dark: '{colorError400}' },
   colorTextStatusInactive: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
   colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' },

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

@@ -261,6 +261,26 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorBackgroundAlertError: {
+    description: 'The background color of error alerts.',
+    public: false,
+    themeable: false,
+  },
+  colorBackgroundAlertInfo: {
+    description: 'The background color of info alerts.',
+    public: false,
+    themeable: false,
+  },
+  colorBackgroundAlertSuccess: {
+    description: 'The background color of success alerts.',
+    public: false,
+    themeable: false,
+  },
+  colorBackgroundAlertWarning: {
+    description: 'The background color of warning alerts.',
+    public: false,
+    themeable: false,
+  },
   colorBackgroundFlashbarError: {
     description: 'The background color of error flash messages.',
     public: true,
@@ -431,6 +451,16 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorBackgroundProgressBarValueFlash: {
+    description: 'The background color of the progress bar value inside flash messages.',
+    public: false,
+    themeable: false,
+  },
+  colorBackgroundProgressBarFlash: {
+    description: 'The background color of the progress bar track inside flash messages.',
+    public: false,
+    themeable: false,
+  },
   colorBackgroundProgressBarDefault: {
     description: 'The default background color of the progress bar.',
     public: true,
@@ -1018,6 +1048,26 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorTextFlashbarIconError: {
+    description: 'The icon color inside error flash messages.',
+    public: false,
+    themeable: false,
+  },
+  colorTextFlashbarIconInfo: {
+    description: 'The icon color inside info and in-progress flash messages.',
+    public: false,
+    themeable: false,
+  },
+  colorTextFlashbarIconSuccess: {
+    description: 'The icon color inside success flash messages.',
+    public: false,
+    themeable: false,
+  },
+  colorTextFlashbarIconWarning: {
+    description: 'The icon color inside warning flash messages.',
+    public: false,
+    themeable: false,
+  },
   colorTextFormDefault: {
     description:
       'The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.',
@@ -1198,6 +1248,31 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorTextAlertDefault: {
+    description: 'Default text color inside alerts.',
+    public: false,
+    themeable: false,
+  },
+  colorTextAlertIconError: {
+    description: 'The icon color inside error alerts.',
+    public: false,
+    themeable: false,
+  },
+  colorTextAlertIconInfo: {
+    description: 'The icon color inside info alerts.',
+    public: false,
+    themeable: false,
+  },
+  colorTextAlertIconSuccess: {
+    description: 'The icon color inside success alerts.',
+    public: false,
+    themeable: false,
+  },
+  colorTextAlertIconWarning: {
+    description: 'The icon color inside warning alerts.',
+    public: false,
+    themeable: false,
+  },
   colorTextNotificationYellow: {
     description: 'The text and foreground color used on warning flash messages (yellow notification surface).',
     public: true,