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 (