revert: Revert "fix: Improve progress bar color contrast in warning f…

…lash message" (#2518)
cloudscape-design · Jul 25, 2024 · 37e8488 · 37e8488
1 parent 8901807
commit 37e8488
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 22 deletions.
diff --git a/pages/progress-bar/permutations-flash.page.tsx b/pages/progress-bar/permutations-flash.page.tsx
@@ -20,14 +20,6 @@ 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,11 +94,14 @@ $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;
 
@@ -107,8 +110,7 @@ $bar-color-in-flash: awsui.$color-background-progress-bar-content-in-flash;
     background-color: $background-color;
   }
 
-  &::-webkit-progress-value,
-  &::-moz-progress-bar {
+  &::-webkit-progress-value {
     @include general-progress-bar-style;
     background-color: $bar-color;
   }
@@ -120,18 +122,43 @@ $bar-color-in-flash: awsui.$color-background-progress-bar-content-in-flash;
     border-end-end-radius: 10px;
   }
 
+  &::-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 {
+    border-start-start-radius: 10px;
+    border-start-end-radius: 10px;
+    border-end-start-radius: 10px;
+    border-end-end-radius: 10px;
+  }
+
   &.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,7 +211,6 @@ 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,7 +4,6 @@ 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,11 +21,6 @@ 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}',