diff --git a/package.json b/package.json index 0ba9e6c444..b83d88ff67 100644 --- a/package.json +++ b/package.json @@ -181,7 +181,7 @@ { "path": "lib/components/internal/widget-exports.js", "brotli": false, - "limit": "1380 kB", + "limit": "1390 kB", "ignore": "react-dom" } ], diff --git a/pages/visual-contexts/content-header-notifications.page.tsx b/pages/visual-contexts/content-header-notifications.page.tsx new file mode 100644 index 0000000000..6a3212a0a1 --- /dev/null +++ b/pages/visual-contexts/content-header-notifications.page.tsx @@ -0,0 +1,29 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import Box from '~components/box'; +import VisualContext from '~components/internal/components/visual-context'; +import SpaceBetween from '~components/space-between'; + +import PermutationsView from '../utils/permutations-view'; +import ScreenshotArea from '../utils/screenshot-area'; +import { alertPermutations, flashbarPermutations, renderAlert, renderFlashbar } from './notifications-permutations'; + +import styles from './styles.scss'; + +export default function ContentHeaderNotificationsPermutations() { + return ( + + + + + Notifications in content-header visual context + + + + + + + ); +} diff --git a/pages/visual-contexts/notifications-permutations.tsx b/pages/visual-contexts/notifications-permutations.tsx new file mode 100644 index 0000000000..28ca3beedd --- /dev/null +++ b/pages/visual-contexts/notifications-permutations.tsx @@ -0,0 +1,69 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import Alert, { AlertProps } from '~components/alert'; +import Box from '~components/box'; +import Button from '~components/button'; +import Divider from '~components/divider'; +import Flashbar, { FlashbarProps } from '~components/flashbar'; +import Link from '~components/link'; +import SpaceBetween from '~components/space-between'; + +import createPermutations from '../utils/permutations'; + +const noop = () => void 0; + +const types = ['info', 'success', 'warning', 'error'] as const; + +// Embedded content is rendered by other components, which read the shared body text, +// link and divider tokens rather than inheriting from the notification. +function EmbeddedContent({ linkColor }: { linkColor?: 'inverted' }) { + return ( + + + Message with a{' '} + + link + {' '} + and inline code. + + + Body text below a divider. + + ); +} + +/* eslint-disable react/jsx-key */ +export const flashbarPermutations = createPermutations([ + { + type: [...types], + header: ['Flash header'], + content: [], + action: [], + dismissible: [true], + dismissLabel: ['Dismiss'], + onDismiss: [noop], + }, +]); + +export const alertPermutations = createPermutations([ + { + type: [...types], + header: ['Alert header'], + children: [], + action: [], + dismissible: [true], + dismissAriaLabel: ['Dismiss'], + onDismiss: [noop], + }, +]); +/* eslint-enable react/jsx-key */ + +export function renderFlashbar(permutation: FlashbarProps.MessageDefinition) { + return ; +} + +export function renderAlert(permutation: AlertProps) { + return ; +} diff --git a/pages/visual-contexts/notifications.page.tsx b/pages/visual-contexts/notifications.page.tsx new file mode 100644 index 0000000000..376368604c --- /dev/null +++ b/pages/visual-contexts/notifications.page.tsx @@ -0,0 +1,24 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import Box from '~components/box'; +import SpaceBetween from '~components/space-between'; + +import PermutationsView from '../utils/permutations-view'; +import ScreenshotArea from '../utils/screenshot-area'; +import { alertPermutations, flashbarPermutations, renderAlert, renderFlashbar } from './notifications-permutations'; + +export default function NotificationsPermutations() { + return ( + + + + Notifications on the page surface + + + + + + ); +} diff --git a/pages/visual-contexts/top-navigation-notifications.page.tsx b/pages/visual-contexts/top-navigation-notifications.page.tsx new file mode 100644 index 0000000000..cac2c00614 --- /dev/null +++ b/pages/visual-contexts/top-navigation-notifications.page.tsx @@ -0,0 +1,29 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import Box from '~components/box'; +import VisualContext from '~components/internal/components/visual-context'; +import SpaceBetween from '~components/space-between'; + +import PermutationsView from '../utils/permutations-view'; +import ScreenshotArea from '../utils/screenshot-area'; +import { alertPermutations, flashbarPermutations, renderAlert, renderFlashbar } from './notifications-permutations'; + +import styles from './styles.scss'; + +export default function TopNavigationNotificationsPermutations() { + return ( + + + + + Notifications in top-navigation visual context + + + + + + + ); +} 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/classic/index.ts b/style-dictionary/classic/index.ts index e572b59768..d4c5e387c6 100644 --- a/style-dictionary/classic/index.ts +++ b/style-dictionary/classic/index.ts @@ -9,6 +9,7 @@ import { createFlashbarContext, createFlashbarWarningContext, createTopNavigationContext, + excludeOneTheme, } from '../utils/contexts.js'; import { StyleDictionary } from '../utils/interfaces.js'; import { createColorMode, createDensityMode, createMotionMode } from '../utils/modes.js'; @@ -43,13 +44,20 @@ export async function buildClassicOpenSource(builder: ThemeBuilder) { builder.addContext(createCompactTableContext((await import('./contexts/compact-table.js')).tokens)); builder.addContext(createTopNavigationContext((await import('./contexts/top-navigation.js')).tokens)); - builder.addContext(createFlashbarContext((await import('./contexts/flashbar.js')).tokens)); - builder.addContext(createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens)); - builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens)); builder.addContext( createAppLayoutToolsDrawerTriggerContext((await import('./contexts/tools-drawer-trigger.js')).tokens) ); + // One theme styles notifications through base tokens and defines no flashbar + // or alert contexts. For packages bundling both themes, we scope out one + // theme so contexts don't override one theme colors. + const notificationContexts = [ + createFlashbarContext((await import('./contexts/flashbar.js')).tokens), + createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens), + createAlertContext((await import('./contexts/alert.js')).tokens), + ]; + notificationContexts.forEach(context => builder.addContext(excludeOneTheme(context))); + return builder.build(); } diff --git a/style-dictionary/one-theme/color-palette.ts b/style-dictionary/one-theme/color-palette.ts index 329b8b558e..719f6aa0c5 100644 --- a/style-dictionary/one-theme/color-palette.ts +++ b/style-dictionary/one-theme/color-palette.ts @@ -127,6 +127,7 @@ const referenceTokens: ReferenceTokens = { 100: brand.colorRed100, 300: brand.colorRed300, 400: brand.colorRed400, + 500: brand.colorRed500, 600: brand.colorRed600, 700: brand.colorRed700, 800: brand.colorRed800, diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts index 928c663ad3..da4b9407b6 100644 --- a/style-dictionary/one-theme/colors.ts +++ b/style-dictionary/one-theme/colors.ts @@ -128,6 +128,8 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundSliderRangeDefault: { light: '{colorPrimary600}', dark: '{colorPrimary500}' }, colorBackgroundSliderHandleDefault: { light: '{colorPrimary600}', dark: '{colorPrimary500}' }, colorBackgroundProgressBarValueDefault: { light: '{colorPrimary600}', dark: '{colorPrimary500}' }, + colorBackgroundProgressBarValueFlash: '{colorTextNotificationDefault}', + colorBackgroundProgressBarFlash: { light: '{colorGreyOpaque10}', dark: '{colorGreyOpaque25}' }, // ── Badge ───────────────────────────────────────────────────────── colorBackgroundBadgeGreen: { light: '{colorSuccess100}', dark: 'rgba(43, 181, 52, 0.2)' }, @@ -135,26 +137,44 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundBadgeRed: { light: '{colorError100}', dark: 'rgba(255, 61, 61, 0.2)' }, colorBackgroundBadgeYellow: { light: '{colorWarning100}', dark: 'rgba(251, 211, 50, 0.2)' }, colorBackgroundBadgeGrey: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, - colorTextNotificationDefault: { light: '{colorNeutral100}', dark: '{colorNeutral100}' }, + colorTextNotificationDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextNotificationYellow: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextNotificationLinkDefault: { light: '{colorNeutral900}', dark: '{colorNeutral50}' }, + colorTextNotificationLinkHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + colorBorderDividerNotification: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, + colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + colorTextInteractiveInvertedDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextInteractiveInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, colorTextBadgeGreen: { light: '{colorSuccess600}', dark: '{colorSuccess200}' }, colorTextBadgeBlue: { light: '{colorInfo600}', dark: '{colorInfo300}' }, colorTextBadgeRed: { light: '{colorError700}', dark: '{colorError400}' }, colorTextBadgeGrey: { light: '{colorNeutral850}', dark: '{colorNeutral300}' }, - // ── Flashbar (one-theme: subtle alert-style backgrounds) ─────────────────── + // Flashbar colorBackgroundFlashbarError: { light: '#fceded', dark: '#460303' }, colorBackgroundFlashbarInfo: { light: '#eaeffc', dark: '#08144f' }, colorBackgroundFlashbarSuccess: { light: '#e9fce7', dark: '#03220d' }, colorBackgroundFlashbarWarning: { light: '#fcfadb', dark: '#372603' }, + colorTextFlashbarIconInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, + colorTextFlashbarIconSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, + + // Alert + colorBackgroundAlertError: { light: '#fceded', dark: '#460303' }, + colorBackgroundAlertInfo: { light: '#eaeffc', dark: '#08144f' }, + colorBackgroundAlertSuccess: { light: '#e9fce7', dark: '#03220d' }, + colorBackgroundAlertWarning: { light: '#fcfadb', dark: '#372603' }, + colorTextAlertDefault: '{colorTextNotificationDefault}', // ── Status border ─────────────────────────────────────────────────────────── - colorBorderStatusError: { light: '{colorError600}', dark: '{colorError400}' }, + colorBorderStatusError: { light: '{colorError600}', dark: '{colorError500}' }, colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess300}' }, colorBorderStatusWarning: { light: '{colorWarning900}', dark: '{colorWarning300}' }, // ── Status text ─────────────────────────────────────────────────────────── + colorTextAlertIconInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, + colorTextAlertIconSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo300}' }, colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess200}' }, colorTextStatusWarning: { light: '{colorWarning900}', dark: '{colorWarning300}' }, diff --git a/style-dictionary/one-theme/contexts/alert.ts b/style-dictionary/one-theme/contexts/alert.ts deleted file mode 100644 index 37b05da0e6..0000000000 --- a/style-dictionary/one-theme/contexts/alert.ts +++ /dev/null @@ -1,52 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import merge from 'lodash/merge.js'; - -import { expandColorDictionary } from '../../utils/index.js'; -import { StyleDictionary } from '../../utils/interfaces.js'; - -const tokens: StyleDictionary.ColorsDictionary = { - // Status backgrounds - colorBackgroundStatusError: { light: '#fceded', dark: '#460303' }, - colorBackgroundStatusInfo: { light: '#eaeffc', dark: '#08144f' }, - colorBackgroundStatusSuccess: { light: '#e9fce7', dark: '#03220d' }, - colorBackgroundStatusWarning: { light: '#fcfadb', dark: '#372603' }, - - // Status text and borders - colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - - // Buttons - colorTextButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorTextButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, - colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.05)', - colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.1)', - - // Link - colorTextLinkDefault: { light: '{colorNeutral900}', dark: '{colorNeutral50}' }, - colorTextLinkHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - - // Dividers - colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, - - // Alert text - colorTextBodyDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - - // Expandable section - colorTextExpandableSectionHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, - - // Focus ring - colorBorderItemFocused: { light: '{colorNeutral800}', dark: '{colorWhite}' }, -}; - -const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); - -export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/flashbar-warning.ts b/style-dictionary/one-theme/contexts/flashbar-warning.ts deleted file mode 100644 index 51e476a1da..0000000000 --- a/style-dictionary/one-theme/contexts/flashbar-warning.ts +++ /dev/null @@ -1,61 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import merge from 'lodash/merge.js'; - -import { expandColorDictionary } from '../../utils/index.js'; -import { StyleDictionary } from '../../utils/interfaces.js'; - -const tokens: StyleDictionary.ColorsDictionary = { - // Status backgrounds - colorBackgroundStatusInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, - colorBackgroundStatusWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, - colorBackgroundStatusError: { light: '{colorError100}', dark: '{colorError950}' }, - colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, - - // Status text and borders - colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - - // Buttons - colorTextButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorTextButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, - colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.05)', - colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.1)', - - // Link - colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - - // Dismiss button - colorTextInteractiveInvertedDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextInteractiveInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - - // Dividers - colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, - - // Notification text - colorTextNotificationYellow: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextNotificationDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextHeadingSecondary: { light: '{colorNeutral750}', dark: '{colorNeutral300}' }, - - // Expandable section - colorTextExpandableSectionHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, - - // Progress bar - colorBackgroundProgressBarValueDefault: { light: '{colorNeutral800}', dark: '{colorWhite}' }, - colorBackgroundProgressBarDefault: { light: '{colorGreyOpaque10}', dark: '{colorGreyOpaque25}' }, - - // Focus ring - colorBorderItemFocused: { light: '{colorNeutral800}', dark: '{colorWhite}' }, -}; - -const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); - -export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts deleted file mode 100644 index 9b279fa4ff..0000000000 --- a/style-dictionary/one-theme/contexts/flashbar.ts +++ /dev/null @@ -1,60 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import merge from 'lodash/merge.js'; - -import { expandColorDictionary } from '../../utils/index.js'; -import { StyleDictionary } from '../../utils/interfaces.js'; - -const tokens: StyleDictionary.ColorsDictionary = { - // Status backgrounds - colorBackgroundStatusInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, - colorBackgroundStatusWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, - colorBackgroundStatusError: { light: '{colorError100}', dark: '{colorError950}' }, - colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, - - // Status text and borders - colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - - // Buttons - colorTextButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorTextButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, - colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.05)', - colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.1)', - - // Link - colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - - // Dismiss button - colorTextInteractiveInvertedDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextInteractiveInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - - // Dividers - colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, - - // Notification text - colorTextNotificationDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextHeadingSecondary: { light: '{colorNeutral750}', dark: '{colorNeutral300}' }, - - // Expandable section - colorTextExpandableSectionHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, - - // Progress bar - colorBackgroundProgressBarValueDefault: { light: '{colorNeutral800}', dark: '{colorWhite}' }, - colorBackgroundProgressBarDefault: { light: '{colorGreyOpaque10}', dark: '{colorGreyOpaque25}' }, - - // Focus ring - colorBorderItemFocused: { light: '{colorNeutral800}', dark: '{colorWhite}' }, -}; - -const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); - -export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/notification-controls.ts b/style-dictionary/one-theme/contexts/notification-controls.ts new file mode 100644 index 0000000000..1f78794a96 --- /dev/null +++ b/style-dictionary/one-theme/contexts/notification-controls.ts @@ -0,0 +1,38 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { expandColorDictionary } from '../../utils/index.js'; +import { StyleDictionary } from '../../utils/interfaces.js'; + +/** + * Interactive controls and embedded content inside flash messages and alerts follow + * the notification text treatment. Values are references only: the referenced base + * tokens resolve per mode and are pinned dark by the surface contexts (header, top + * navigation), so no combined contexts are needed. + * + * Embedded content (text, links, dividers) has to be redirected here rather than in + * the alert and flashbar stylesheets, because it is rendered by other components + * which read the shared tokens directly. + */ +const tokens: StyleDictionary.ColorsDictionary = { + colorTextBodyDefault: '{colorTextNotificationDefault}', + colorTextLinkDefault: '{colorTextNotificationLinkDefault}', + colorTextLinkHover: '{colorTextNotificationLinkHover}', + colorBorderDividerDefault: '{colorBorderDividerNotification}', + colorTextButtonNormalDefault: '{colorTextInteractiveInvertedDefault}', + colorTextButtonNormalHover: '{colorTextInteractiveInvertedHover}', + colorTextButtonNormalActive: '{colorTextInteractiveInvertedDefault}', + colorBorderButtonNormalDefault: '{colorTextInteractiveInvertedDefault}', + colorBorderButtonNormalHover: '{colorTextInteractiveInvertedHover}', + colorBorderButtonNormalActive: '{colorTextInteractiveInvertedDefault}', + colorBackgroundButtonNormalDefault: 'transparent', + colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.05)', + colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.1)', + colorBorderItemFocused: { + light: '{colorTextInteractiveInvertedDefault}', + dark: '{colorTextInteractiveInvertedHover}', + }, +}; + +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); + +export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/contexts/top-navigation.ts b/style-dictionary/one-theme/contexts/top-navigation.ts index 29d4eb5dbb..e3b6c7f6aa 100644 --- a/style-dictionary/one-theme/contexts/top-navigation.ts +++ b/style-dictionary/one-theme/contexts/top-navigation.ts @@ -6,6 +6,7 @@ import { expandColorDictionary, pickState } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; import { tokens as vrParentTokens } from '../../visual-refresh/colors.js'; import { tokens as oneThemeParentTokens } from '../colors.js'; +import { tokens as parentShadowsTokens } from '../shadows.js'; const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundContainerContent: '{colorNeutral950}', @@ -27,9 +28,10 @@ const tokens: StyleDictionary.ColorsDictionary = { const vrDarkValues = pickState(vrParentTokens, 'dark'); const oneThemeDarkValues = pickState(oneThemeParentTokens, 'dark'); +const darkShadowsValues = pickState(parentShadowsTokens, 'dark'); const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( - merge({}, vrDarkValues, oneThemeDarkValues, tokens) + merge({}, vrDarkValues, oneThemeDarkValues, darkShadowsValues, tokens) ); export const mode: StyleDictionary.ModeIdentifier = 'color'; diff --git a/style-dictionary/one-theme/index.ts b/style-dictionary/one-theme/index.ts index 3799038475..53ecc9dbd1 100644 --- a/style-dictionary/one-theme/index.ts +++ b/style-dictionary/one-theme/index.ts @@ -8,7 +8,6 @@ import { createCompactTableContext, createFlashbarContext, createFlashbarWarningContext, - createHeaderAlertContext, createHeaderContext, createTopNavigationContext, } from '../utils/contexts.js'; @@ -45,13 +44,16 @@ tokenCategories.forEach(({ tokens, mode: modeId, referenceTokens }) => { }); builder.addContext(createCompactTableContext((await import('../visual-refresh/contexts/compact-table.js')).tokens)); -builder.addContext(createHeaderAlertContext((await import('../visual-refresh/contexts/header-alert.js')).tokens)); builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens)); builder.addContext(createTopNavigationContext((await import('./contexts/top-navigation.js')).tokens)); builder.addContext(createHeaderContext((await import('./contexts/header.js')).tokens)); -builder.addContext(createFlashbarContext((await import('./contexts/flashbar.js')).tokens)); -builder.addContext(createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens)); -builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens)); + +// Notification design lives in base tokens; these contexts only carry references +// so interactive controls inside notifications follow the notification treatment. +const notificationControlTokens = (await import('./contexts/notification-controls.js')).tokens; +builder.addContext(createFlashbarContext(notificationControlTokens)); +builder.addContext(createFlashbarWarningContext(notificationControlTokens)); +builder.addContext(createAlertContext(notificationControlTokens)); const theme = builder.build(); export default theme; diff --git a/style-dictionary/utils/contexts.ts b/style-dictionary/utils/contexts.ts index 5cdb143be2..de9b4b3c84 100644 --- a/style-dictionary/utils/contexts.ts +++ b/style-dictionary/utils/contexts.ts @@ -2,6 +2,17 @@ // SPDX-License-Identifier: Apache-2.0 import { GlobalValue, ModeValue, TokenCategory } from '@cloudscape-design/theming-build'; +const oneThemeGuard = ':where(:not(.awsui-one-theme):not(.awsui-one-theme *))'; + +/** + * Global (body) themes' context rules would otherwise also match context elements in + * one theme, which styles notifications through base tokens without these contexts. + */ +export const excludeOneTheme = (context: T): T => ({ + ...context, + selector: `${context.selector}${oneThemeGuard}`, +}); + export const createTopNavigationContext = (tokens: TokenCategory) => { return { id: 'top-navigation', diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index c8c87850ea..f8ddbc5dbf 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' @@ -697,6 +703,7 @@ export type ColorsTokenName = | 'colorBorderControlDisabled' | 'colorBorderDividerActive' | 'colorBorderDividerDefault' + | 'colorBorderDividerNotification' | 'colorBorderDividerSecondary' | 'colorBorderDividerTableGroup' | 'colorBorderDividerPanelBottom' @@ -813,6 +820,10 @@ export type ColorsTokenName = | 'colorTextExpandableSectionDefault' | 'colorTextExpandableSectionHover' | 'colorTextExpandableSectionNavigationIconDefault' + | 'colorTextFlashbarIconError' + | 'colorTextFlashbarIconInfo' + | 'colorTextFlashbarIconSuccess' + | 'colorTextFlashbarIconWarning' | 'colorBorderExpandableSectionDefault' | 'colorTextFormDefault' | 'colorTextFormLabel' @@ -859,6 +870,13 @@ export type ColorsTokenName = | 'colorTextLinkInfoHover' | 'colorTextLinkInvertedHover' | 'colorTextNotificationDefault' + | 'colorTextNotificationLinkDefault' + | 'colorTextNotificationLinkHover' + | '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..511c5a7e41 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}' }, @@ -176,6 +182,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBorderControlDisabled: '{colorBackgroundControlDisabled}', colorBorderDividerActive: { light: '{colorNeutral950}', dark: '{colorNeutral100}' }, colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral650}' }, + colorBorderDividerNotification: '{colorBorderDividerDefault}', colorBorderDividerPanelBottom: '{colorBorderDividerDefault}', colorBorderDividerPanelSide: '{colorBorderDividerDefault}', colorBorderDividerSecondary: { light: '{colorNeutral250}', dark: '{colorNeutral750}' }, @@ -317,6 +324,9 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextLinkButtonUnderline: 'transparent', colorTextLinkButtonUnderlineHover: 'transparent', colorTextNotificationDefault: '{colorNeutral100}', + colorTextAlertDefault: '{colorTextBodyDefault}', + colorTextNotificationLinkDefault: '{colorTextLinkDefault}', + colorTextNotificationLinkHover: '{colorTextLinkHover}', colorTextNotificationStackBar: '{colorWhite}', colorTextNotificationYellow: '{colorNeutral950}', colorTextPaginationPageNumberActiveDisabled: '{colorTextInteractiveDisabled}', @@ -325,6 +335,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/index.ts b/style-dictionary/visual-refresh/index.ts index f838dd584d..7214e8f318 100644 --- a/style-dictionary/visual-refresh/index.ts +++ b/style-dictionary/visual-refresh/index.ts @@ -11,6 +11,7 @@ import { createHeaderAlertContext, createHeaderContext, createTopNavigationContext, + excludeOneTheme, } from '../utils/contexts.js'; import { StyleDictionary } from '../utils/interfaces.js'; import { createColorMode, createDensityMode, createMotionMode } from '../utils/modes.js'; @@ -43,16 +44,23 @@ export async function buildVisualRefresh(builder: ThemeBuilder) { builder.addTokens(tokens, mode); }); - // Add contexts for component-specific overrides + // Add contexts for component-specific overrides. builder.addContext(createCompactTableContext((await import('./contexts/compact-table.js')).tokens)); builder.addContext(createTopNavigationContext((await import('./contexts/top-navigation.js')).tokens)); builder.addContext(createHeaderContext((await import('./contexts/header.js')).tokens)); - builder.addContext(createFlashbarContext((await import('./contexts/flashbar.js')).tokens)); - builder.addContext(createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens)); - builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens)); - builder.addContext(createHeaderAlertContext((await import('./contexts/header-alert.js')).tokens)); builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens)); + // One theme styles notifications through base tokens and defines no flashbar + // or alert contexts. For packages bundling both themes, we scope out one + // theme so contexts don't override one theme colors. + const notificationContexts = [ + createFlashbarContext((await import('./contexts/flashbar.js')).tokens), + createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens), + createAlertContext((await import('./contexts/alert.js')).tokens), + createHeaderAlertContext((await import('./contexts/header-alert.js')).tokens), + ]; + notificationContexts.forEach(context => builder.addContext(excludeOneTheme(context))); + return builder.build(); } diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index d4c924a4b2..f83509d2b0 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, @@ -693,6 +723,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorBorderDividerNotification: { + description: 'The border color for dividers inside flash messages and alerts.', + public: false, + themeable: false, + }, colorBorderDividerSecondary: { description: 'The border color for row dividers. For example: row dividers for table and collection preferences.', public: true, @@ -1018,6 +1053,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 +1253,41 @@ 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, + }, + colorTextNotificationLinkDefault: { + description: 'The default text color of links inside flash messages and alerts.', + public: false, + themeable: false, + }, + colorTextNotificationLinkHover: { + description: 'The text color of hovered links inside flash messages and alerts.', + public: false, + themeable: false, + }, colorTextNotificationYellow: { description: 'The text and foreground color used on warning flash messages (yellow notification surface).', public: true,