diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 30b658079c..4bd63ec6f8 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -84,6 +84,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-action-card-default": "#ffffff", "color-background-action-card-disabled": "#eaeded", "color-background-action-card-hover": "#f1faff", + "color-background-alert-error": "#fdf3f1", + "color-background-alert-info": "#f1faff", + "color-background-alert-success": "#f2f8f0", + "color-background-alert-warning": "#fffef0", "color-background-avatar-default": "#545b64", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-backdrop": "rgba(242, 243, 243, 0.9)", @@ -174,7 +178,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-notification-yellow": "#ffe347", "color-background-popover": "#ffffff", "color-background-progress-bar-default": "#eaeded", + "color-background-progress-bar-flash": "#eaeded", "color-background-progress-bar-value-default": "#0073bb", + "color-background-progress-bar-value-flash": "#0073bb", "color-background-segment-active": "#0073bb", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", @@ -569,6 +575,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-success-950": "#003311", "color-text-accent": "#0073bb", "color-text-action-card-disabled": "#879596", + "color-text-alert-default": "#16191f", + "color-text-alert-icon-error": "#d13212", + "color-text-alert-icon-info": "#0073bb", + "color-text-alert-icon-success": "#1d8102", + "color-text-alert-icon-warning": "#906806", "color-text-avatar": "#ffffff", "color-text-badge-blue": "#fafafa", "color-text-badge-green": "#fafafa", @@ -631,6 +642,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-expandable-section-default": "#545b64", "color-text-expandable-section-hover": "#16191f", "color-text-expandable-section-navigation-icon-default": "#879596", + "color-text-flashbar-icon-error": "#d13212", + "color-text-flashbar-icon-info": "#0073bb", + "color-text-flashbar-icon-success": "#1d8102", + "color-text-flashbar-icon-warning": "#906806", "color-text-form-default": "#16191f", "color-text-form-label": "#16191f", "color-text-form-secondary": "#687078", @@ -1066,6 +1081,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-action-card-default": "#1a2029", "color-background-action-card-disabled": "#21252c", "color-background-action-card-hover": "#21252c", + "color-background-alert-error": "#270a11", + "color-background-alert-info": "#12293b", + "color-background-alert-success": "#172211", + "color-background-alert-warning": "#191100", "color-background-avatar-default": "#545b64", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-backdrop": "rgba(22, 25, 31, 0.8)", @@ -1156,7 +1175,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-notification-yellow": "#ffe347", "color-background-popover": "#21252c", "color-background-progress-bar-default": "#414750", + "color-background-progress-bar-flash": "#414750", "color-background-progress-bar-value-default": "#00a1c9", + "color-background-progress-bar-value-flash": "#00a1c9", "color-background-segment-active": "#00a1c9", "color-background-segment-default": "#2a2e33", "color-background-segment-disabled": "#2a2e33", @@ -1551,6 +1572,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-success-950": "#003311", "color-text-accent": "#44b9d6", "color-text-action-card-disabled": "#879596", + "color-text-alert-default": "#d5dbdb", + "color-text-alert-icon-error": "#ff5d64", + "color-text-alert-icon-info": "#44b9d6", + "color-text-alert-icon-success": "#6aaf35", + "color-text-alert-icon-warning": "#fbd332", "color-text-avatar": "#ffffff", "color-text-badge-blue": "#fafafa", "color-text-badge-green": "#fafafa", @@ -1613,6 +1639,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-expandable-section-default": "#d5dbdb", "color-text-expandable-section-hover": "#fafafa", "color-text-expandable-section-navigation-icon-default": "#95a5a6", + "color-text-flashbar-icon-error": "#ff5d64", + "color-text-flashbar-icon-info": "#44b9d6", + "color-text-flashbar-icon-success": "#6aaf35", + "color-text-flashbar-icon-warning": "#fbd332", "color-text-form-default": "#d5dbdb", "color-text-form-label": "#d5dbdb", "color-text-form-secondary": "#95a5a6", @@ -2048,6 +2078,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-action-card-default": "#ffffff", "color-background-action-card-disabled": "#eaeded", "color-background-action-card-hover": "#f1faff", + "color-background-alert-error": "#fdf3f1", + "color-background-alert-info": "#f1faff", + "color-background-alert-success": "#f2f8f0", + "color-background-alert-warning": "#fffef0", "color-background-avatar-default": "#545b64", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-backdrop": "rgba(242, 243, 243, 0.9)", @@ -2138,7 +2172,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-notification-yellow": "#ffe347", "color-background-popover": "#ffffff", "color-background-progress-bar-default": "#eaeded", + "color-background-progress-bar-flash": "#eaeded", "color-background-progress-bar-value-default": "#0073bb", + "color-background-progress-bar-value-flash": "#0073bb", "color-background-segment-active": "#0073bb", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", @@ -2533,6 +2569,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-success-950": "#003311", "color-text-accent": "#0073bb", "color-text-action-card-disabled": "#879596", + "color-text-alert-default": "#16191f", + "color-text-alert-icon-error": "#d13212", + "color-text-alert-icon-info": "#0073bb", + "color-text-alert-icon-success": "#1d8102", + "color-text-alert-icon-warning": "#906806", "color-text-avatar": "#ffffff", "color-text-badge-blue": "#fafafa", "color-text-badge-green": "#fafafa", @@ -2595,6 +2636,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-expandable-section-default": "#545b64", "color-text-expandable-section-hover": "#16191f", "color-text-expandable-section-navigation-icon-default": "#879596", + "color-text-flashbar-icon-error": "#d13212", + "color-text-flashbar-icon-info": "#0073bb", + "color-text-flashbar-icon-success": "#1d8102", + "color-text-flashbar-icon-warning": "#906806", "color-text-form-default": "#16191f", "color-text-form-label": "#16191f", "color-text-form-secondary": "#687078", @@ -3030,6 +3075,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-action-card-default": "#ffffff", "color-background-action-card-disabled": "#eaeded", "color-background-action-card-hover": "#f1faff", + "color-background-alert-error": "#fdf3f1", + "color-background-alert-info": "#f1faff", + "color-background-alert-success": "#f2f8f0", + "color-background-alert-warning": "#fffef0", "color-background-avatar-default": "#545b64", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-backdrop": "rgba(242, 243, 243, 0.9)", @@ -3120,7 +3169,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-notification-yellow": "#ffe347", "color-background-popover": "#ffffff", "color-background-progress-bar-default": "#eaeded", + "color-background-progress-bar-flash": "#eaeded", "color-background-progress-bar-value-default": "#0073bb", + "color-background-progress-bar-value-flash": "#0073bb", "color-background-segment-active": "#0073bb", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", @@ -3515,6 +3566,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-success-950": "#003311", "color-text-accent": "#0073bb", "color-text-action-card-disabled": "#879596", + "color-text-alert-default": "#16191f", + "color-text-alert-icon-error": "#d13212", + "color-text-alert-icon-info": "#0073bb", + "color-text-alert-icon-success": "#1d8102", + "color-text-alert-icon-warning": "#906806", "color-text-avatar": "#ffffff", "color-text-badge-blue": "#fafafa", "color-text-badge-green": "#fafafa", @@ -3577,6 +3633,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-expandable-section-default": "#545b64", "color-text-expandable-section-hover": "#16191f", "color-text-expandable-section-navigation-icon-default": "#879596", + "color-text-flashbar-icon-error": "#d13212", + "color-text-flashbar-icon-info": "#0073bb", + "color-text-flashbar-icon-success": "#1d8102", + "color-text-flashbar-icon-warning": "#906806", "color-text-form-default": "#16191f", "color-text-form-label": "#16191f", "color-text-form-secondary": "#687078", @@ -4012,6 +4072,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-action-card-default": "#ffffff", "color-background-action-card-disabled": "#ffffff", "color-background-action-card-hover": "#f0fbff", + "color-background-alert-error": "#fff5f5", + "color-background-alert-info": "#f0fbff", + "color-background-alert-success": "#effff1", + "color-background-alert-warning": "#fffef0", "color-background-avatar-default": "#424650", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-backdrop": "rgba(35, 43, 55, 0.7)", @@ -4102,7 +4166,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-notification-yellow": "#ffe347", "color-background-popover": "#ffffff", "color-background-progress-bar-default": "#ebebf0", + "color-background-progress-bar-flash": "#ebebf0", "color-background-progress-bar-value-default": "#006ce0", + "color-background-progress-bar-value-flash": "#006ce0", "color-background-segment-active": "#006ce0", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", @@ -4497,6 +4563,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-success-950": "#003311", "color-text-accent": "#006ce0", "color-text-action-card-disabled": "#8c8c94", + "color-text-alert-default": "#0f141a", + "color-text-alert-icon-error": "#db0000", + "color-text-alert-icon-info": "#006ce0", + "color-text-alert-icon-success": "#00802f", + "color-text-alert-icon-warning": "#855900", "color-text-avatar": "#ffffff", "color-text-badge-blue": "#f9f9fa", "color-text-badge-green": "#f9f9fa", @@ -4559,6 +4630,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-expandable-section-default": "#0f141a", "color-text-expandable-section-hover": "#006ce0", "color-text-expandable-section-navigation-icon-default": "#424650", + "color-text-flashbar-icon-error": "#db0000", + "color-text-flashbar-icon-info": "#006ce0", + "color-text-flashbar-icon-success": "#00802f", + "color-text-flashbar-icon-warning": "#855900", "color-text-form-default": "#0f141a", "color-text-form-label": "#0f141a", "color-text-form-secondary": "#656871", @@ -4994,6 +5069,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-action-card-default": "#ffffff", "color-background-action-card-disabled": "#ffffff", "color-background-action-card-hover": "#f0fbff", + "color-background-alert-error": "#fff5f5", + "color-background-alert-info": "#f0fbff", + "color-background-alert-success": "#effff1", + "color-background-alert-warning": "#fffef0", "color-background-avatar-default": "#424650", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-backdrop": "rgba(35, 43, 55, 0.7)", @@ -5084,7 +5163,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-notification-yellow": "#ffe347", "color-background-popover": "#ffffff", "color-background-progress-bar-default": "#ebebf0", + "color-background-progress-bar-flash": "#ebebf0", "color-background-progress-bar-value-default": "#006ce0", + "color-background-progress-bar-value-flash": "#006ce0", "color-background-segment-active": "#006ce0", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", @@ -5479,6 +5560,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-success-950": "#003311", "color-text-accent": "#006ce0", "color-text-action-card-disabled": "#8c8c94", + "color-text-alert-default": "#0f141a", + "color-text-alert-icon-error": "#db0000", + "color-text-alert-icon-info": "#006ce0", + "color-text-alert-icon-success": "#00802f", + "color-text-alert-icon-warning": "#855900", "color-text-avatar": "#ffffff", "color-text-badge-blue": "#f9f9fa", "color-text-badge-green": "#f9f9fa", @@ -5541,6 +5627,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-expandable-section-default": "#0f141a", "color-text-expandable-section-hover": "#006ce0", "color-text-expandable-section-navigation-icon-default": "#424650", + "color-text-flashbar-icon-error": "#db0000", + "color-text-flashbar-icon-info": "#006ce0", + "color-text-flashbar-icon-success": "#00802f", + "color-text-flashbar-icon-warning": "#855900", "color-text-form-default": "#0f141a", "color-text-form-label": "#0f141a", "color-text-form-secondary": "#656871", @@ -5976,6 +6066,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-action-card-default": "#161d26", "color-background-action-card-disabled": "#161d26", "color-background-action-card-hover": "#1b232d", + "color-background-alert-error": "#1f0000", + "color-background-alert-info": "#001129", + "color-background-alert-success": "#001401", + "color-background-alert-warning": "#191100", "color-background-avatar-default": "#424650", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-backdrop": "rgba(15, 20, 26, 0.7)", @@ -6066,7 +6160,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-notification-yellow": "#ffe347", "color-background-popover": "#1b232d", "color-background-progress-bar-default": "#333843", + "color-background-progress-bar-flash": "#333843", "color-background-progress-bar-value-default": "#42b4ff", + "color-background-progress-bar-value-flash": "#42b4ff", "color-background-segment-active": "#42b4ff", "color-background-segment-default": "#0f141a", "color-background-segment-disabled": "#0f141a", @@ -6461,6 +6557,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-success-950": "#003311", "color-text-accent": "#42b4ff", "color-text-action-card-disabled": "#8c8c94", + "color-text-alert-default": "#c6c6cd", + "color-text-alert-icon-error": "#ff7a7a", + "color-text-alert-icon-info": "#42b4ff", + "color-text-alert-icon-success": "#2bb534", + "color-text-alert-icon-warning": "#fbd332", "color-text-avatar": "#ffffff", "color-text-badge-blue": "#f9f9fa", "color-text-badge-green": "#f9f9fa", @@ -6523,6 +6624,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-expandable-section-default": "#dedee3", "color-text-expandable-section-hover": "#42b4ff", "color-text-expandable-section-navigation-icon-default": "#dedee3", + "color-text-flashbar-icon-error": "#ff7a7a", + "color-text-flashbar-icon-info": "#42b4ff", + "color-text-flashbar-icon-success": "#2bb534", + "color-text-flashbar-icon-warning": "#fbd332", "color-text-form-default": "#dedee3", "color-text-form-label": "#dedee3", "color-text-form-secondary": "#a4a4ad", @@ -6958,6 +7063,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-action-card-default": "#161d26", "color-background-action-card-disabled": "#161d26", "color-background-action-card-hover": "#1b232d", + "color-background-alert-error": "#1f0000", + "color-background-alert-info": "#001129", + "color-background-alert-success": "#001401", + "color-background-alert-warning": "#191100", "color-background-avatar-default": "#424650", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-backdrop": "rgba(15, 20, 26, 0.7)", @@ -7048,7 +7157,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-notification-yellow": "#ffe347", "color-background-popover": "#1b232d", "color-background-progress-bar-default": "#333843", + "color-background-progress-bar-flash": "#333843", "color-background-progress-bar-value-default": "#42b4ff", + "color-background-progress-bar-value-flash": "#42b4ff", "color-background-segment-active": "#42b4ff", "color-background-segment-default": "#161d26", "color-background-segment-disabled": "#161d26", @@ -7443,6 +7554,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-success-950": "#003311", "color-text-accent": "#42b4ff", "color-text-action-card-disabled": "#8c8c94", + "color-text-alert-default": "#c6c6cd", + "color-text-alert-icon-error": "#ff7a7a", + "color-text-alert-icon-info": "#42b4ff", + "color-text-alert-icon-success": "#2bb534", + "color-text-alert-icon-warning": "#fbd332", "color-text-avatar": "#ffffff", "color-text-badge-blue": "#f9f9fa", "color-text-badge-green": "#f9f9fa", @@ -7505,6 +7621,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-expandable-section-default": "#dedee3", "color-text-expandable-section-hover": "#42b4ff", "color-text-expandable-section-navigation-icon-default": "#dedee3", + "color-text-flashbar-icon-error": "#ff7a7a", + "color-text-flashbar-icon-info": "#42b4ff", + "color-text-flashbar-icon-success": "#2bb534", + "color-text-flashbar-icon-warning": "#fbd332", "color-text-form-default": "#dedee3", "color-text-form-label": "#dedee3", "color-text-form-secondary": "#a4a4ad", diff --git a/src/alert/styles.scss b/src/alert/styles.scss index c0c7d11f99..0cb3e3bc5f 100644 --- a/src/alert/styles.scss +++ b/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) { diff --git a/src/flashbar/flash.tsx b/src/flashbar/flash.tsx index 867a3a57b4..c97eb43cc9 100644 --- a/src/flashbar/flash.tsx +++ b/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'] )} diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss index 4f21d78443..788854ea25 100644 --- a/src/flashbar/styles.scss +++ b/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; } } diff --git a/src/progress-bar/internal.tsx b/src/progress-bar/internal.tsx index c8c0cec3d4..f8a0c785a8 100644 --- a/src/progress-bar/internal.tsx +++ b/src/progress-bar/internal.tsx @@ -39,7 +39,11 @@ export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDesc return (
= 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} diff --git a/src/progress-bar/styles.scss b/src/progress-bar/styles.scss index bbb99c06ae..49bd3e65c1 100644 --- a/src/progress-bar/styles.scss +++ b/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 { diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index c8c87850ea..c4031149ab 100644 --- a/style-dictionary/utils/token-names.ts +++ b/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' diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index 8e12282a2f..6296b778bf 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/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}' }, diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index d4c924a4b2..e26eb817f5 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/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,