fix: Improve progress bar color contrast in warning flash message (#2480

)
cloudscape-design · Jul 24, 2024 · f46ab18 · f46ab18
1 parent e23c109
commit f46ab18
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 34 deletions.
diff --git a/pages/progress-bar/permutations-flash.page.tsx b/pages/progress-bar/permutations-flash.page.tsx
@@ -20,6 +20,14 @@ export default function ProgressBarPermutations() {
             statusIconAriaLabel: 'info',
           }))}
         />
+        <Flashbar
+          items={permutations.map(permutation => ({
+            type: 'warning',
+            content: <ProgressBar {...permutation} variant="flash" />,
+            buttonText: permutation.resultButtonText,
+            statusIconAriaLabel: 'warning',
+          }))}
+        />
       </ScreenshotArea>
     </article>
   );

diff --git a/src/progress-bar/styles.scss b/src/progress-bar/styles.scss
@@ -37,7 +37,7 @@
 
 .label {
   &-flash {
-    color: 'inherit';
+    color: inherit;
     font-weight: styles.$font-weight-bold;
   }
   &-key-value {
@@ -94,14 +94,11 @@ $background-color-in-flash: awsui.$color-background-progress-bar-layout-in-flash
 $bar-color: awsui.$color-background-progress-bar-content-default;
 $bar-color-in-flash: awsui.$color-background-progress-bar-content-in-flash;
 
-// Current version of Edge has a known bug with CSS variables used in pseudo elements.
-$bar-color-edge: #0073bb;
-$bar-color-edge-in-flash: rgba(255, 255, 255, 0.7);
-
 .progress {
   inline-size: 100%;
   margin-inline-end: awsui.$space-s;
   min-inline-size: 0;
+
   @include general-progress-background-style;
   background-color: $background-color;
 
@@ -110,31 +107,13 @@ $bar-color-edge-in-flash: rgba(255, 255, 255, 0.7);
     background-color: $background-color;
   }
 
-  &::-webkit-progress-value {
-    @include general-progress-bar-style;
-    background-color: $bar-color;
-  }
-
-  &.complete::-webkit-progress-value {
-    border-start-start-radius: 10px;
-    border-start-end-radius: 10px;
-    border-end-start-radius: 10px;
-    border-end-end-radius: 10px;
-  }
-
+  &::-webkit-progress-value,
   &::-moz-progress-bar {
     @include general-progress-bar-style;
     background-color: $bar-color;
   }
 
-  &::-ms-fill {
-    @include general-progress-bar-style;
-    background-color: $bar-color-edge;
-    border-block: none;
-    border-inline: none;
-  }
-
-  &.complete::-ms-fill {
+  &.complete::-webkit-progress-value {
     border-start-start-radius: 10px;
     border-start-end-radius: 10px;
     border-end-start-radius: 10px;
@@ -143,22 +122,16 @@ $bar-color-edge-in-flash: rgba(255, 255, 255, 0.7);
 
   &.progress-in-flash {
     background-color: $background-color-in-flash;
+    &::-moz-progress-bar {
+      background-color: $bar-color-in-flash;
+    }
 
     &::-webkit-progress-bar {
       background-color: $background-color-in-flash;
     }
-
     &::-webkit-progress-value {
       background-color: $bar-color-in-flash;
     }
-
-    &::-moz-progress-bar {
-      background-color: $bar-color-in-flash;
-    }
-
-    &::-ms-fill {
-      background-color: $bar-color-edge-in-flash;
-    }
   }
 }
 

diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
@@ -211,6 +211,7 @@ export type ColorChartsTokenName =
   | 'colorChartsPaletteCategorical49'
   | 'colorChartsPaletteCategorical50';
 export type ColorsTokenName =
+  | 'colorGreyOpaque10'
   | 'colorGreyOpaque25'
   | 'colorGreyOpaque40'
   | 'colorGreyOpaque50'

diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
@@ -4,6 +4,7 @@ import { expandColorDictionary } from '../utils';
 import { StyleDictionary } from '../utils/interfaces';
 
 const tokens: StyleDictionary.ColorsDictionary = {
+  colorGreyOpaque10: 'rgba(0, 0, 0, 0.1)',
   colorGreyOpaque25: 'rgba(255, 255, 255, 0.25)',
   colorGreyOpaque40: 'rgba(0, 0, 0, 0.4)',
   colorGreyOpaque50: 'rgba(0, 0, 0, 0.5)',

diff --git a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts
@@ -21,6 +21,11 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = {
   colorTextInteractiveInvertedDefault: '{colorGrey600}',
   colorTextInteractiveInvertedHover: '{colorGrey900}',
 
+  // Progress bars in flashbars should be using variant="flash" (which uses a white background by default).
+  // For the warning state, it should use colorGrey900.
+  colorBackgroundProgressBarContentInFlash: '{colorGrey900}',
+  colorBackgroundProgressBarLayoutInFlash: '{colorGreyOpaque10}',
+
   // Expandable sections
   colorTextExpandableSectionDefault: '{colorTextNotificationYellow}',
   colorTextExpandableSectionHover: '{colorTextNotificationYellow}',