From 7ab26f9167aa04af37b87e18f40875486aaa0e9e Mon Sep 17 00:00:00 2001 From: Avinash Dwarapu Date: Tue, 3 Sep 2024 17:01:20 +0200 Subject: [PATCH] =?UTF-8?q?Revert=20"revert:=20Revert=20"fix:=20Improve=20?= =?UTF-8?q?progress=20bar=20color=20contrast=20in=20warning=20f=E2=80=A6"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 37e8488735f0789068c2dde753249304d30ea25b. --- .../progress-bar/permutations-flash.page.tsx | 8 ++++ src/progress-bar/styles.scss | 41 ++++--------------- style-dictionary/utils/token-names.ts | 1 + style-dictionary/visual-refresh/colors.ts | 1 + .../contexts/flashbar-warning.ts | 5 +++ 5 files changed, 22 insertions(+), 34 deletions(-) diff --git a/pages/progress-bar/permutations-flash.page.tsx b/pages/progress-bar/permutations-flash.page.tsx index 06c6616ce3..3a95e848a6 100644 --- 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', }))} /> + ({ + type: 'warning', + content: , + buttonText: permutation.resultButtonText, + statusIconAriaLabel: 'warning', + }))} + /> ); diff --git a/src/progress-bar/styles.scss b/src/progress-bar/styles.scss index b7c130f7cf..6933c68b4c 100644 --- 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 index dc3ba502fc..ca95b669c0 100644 --- 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 index 05d33a4ab1..3e44ac2a21 100644 --- 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 index a99c6d071a..46f3ce7227 100644 --- 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}',