diff --git a/package.json b/package.json index d90317ae47..3994ed1c2f 100644 --- a/package.json +++ b/package.json @@ -181,7 +181,7 @@ { "path": "lib/components/internal/widget-exports.js", "brotli": false, - "limit": "1350 kB", + "limit": "1360 kB", "ignore": "react-dom" } ], diff --git a/pages/box/visual-accent.page.tsx b/pages/box/visual-accent.page.tsx new file mode 100644 index 0000000000..fca512442b --- /dev/null +++ b/pages/box/visual-accent.page.tsx @@ -0,0 +1,172 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import Box, { BoxProps } from '~components/box'; +import Container from '~components/container'; +import Header from '~components/header'; +import Icon from '~components/icon'; +import KeyValuePairs from '~components/key-value-pairs'; +import List from '~components/list'; +import SpaceBetween from '~components/space-between'; + +import ScreenshotArea from '../utils/screenshot-area'; + +// ─── Data ────────────────────────────────────────────────────────────────────── + +const ALL_VARIANTS: BoxProps.VisualAccent.Color[] = [ + 'red', + 'yellow', + 'indigo', + 'green', + 'orange', + 'purple', + 'mint', + 'lime', + 'grey', + 'teal', + 'cyan', + 'blue', + 'violet', + 'fuchsia', + 'magenta', + 'pink', + 'rose', + 'amber', +]; + +const BOX_VARIANTS: { variant: BoxProps['variant']; label: string; content: string }[] = [ + { variant: 'h3', label: 'h3', content: 'Heading 3' }, + { variant: 'p', label: 'p', content: 'Body paragraph text' }, +]; + +const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.VisualAccent.Color }[] = [ + { id: 'health', content: 'Health overview', icon: 'face-happy', color: 'green' }, + { id: 'functions', content: 'Functions', icon: 'script', color: 'indigo' }, + { id: 'network', content: 'Network configuration', icon: 'globe', color: 'grey' }, + { id: 'multi-session', content: 'Multi-session data', icon: 'multiscreen', color: 'purple' }, + { id: 'alert', content: 'Alert center', icon: 'security', color: 'red' }, + { id: 'communication', content: 'Communication', icon: 'contact', color: 'mint' }, +]; + +// ─── Page ────────────────────────────────────────────────────────────────────── + +export default function StyleBoxPage() { + return ( + +
+ + Box visualAccent + + + + Uses the existing Box component with a new visualAccent prop. No wrapper component or utility + classes needed. + + + {/* ── Box text variants × accent colors ─────────────────────────── */} + + Text inside accent boxes + + + {BOX_VARIANTS.map(({ variant, label, content }) => ( +
+ + Wrapping Box variant="{label}" + + + {ALL_VARIANTS.map(color => ( + + {content} + + ))} + +
+ ))} + + {/* ── Icons in accent boxes ─────────────────────────────────────── */} + + Icons in accent boxes + + + {ALL_VARIANTS.map(color => ( + + + + ))} + + + {/* ── Application in components ──────────────────────────────────── */} + + Application in components + + + KeyValuePairs}> + + 114 + + ), + }, + { + label: 'Patterns', + value: ( + + 81 + + ), + }, + { + label: 'Demos', + value: ( + + 35 + + ), + }, + ]} + /> + + + + List}> + ({ + id: item.id, + content: item.content, + icon: ( + + + + ), + })} + /> + +
+ + ); +} diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index f538fa177a..79b91b092b 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -462,11 +462,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-dropzone-border-hover": "#002b66", "color-dropzone-text-default": "#545b64", "color-dropzone-text-hover": "#545b64", + "color-error-100": "#ffe0e0", "color-error-1000": "#270a11", "color-error-400": "#ff5d64", "color-error-50": "#fdf3f1", "color-error-600": "#d13212", + "color-error-800": "#990000", "color-error-900": "#700000", + "color-error-950": "#520000", "color-foreground-control-default": "#ffffff", "color-foreground-control-disabled": "#ffffff", "color-foreground-control-read-only": "#687078", @@ -483,11 +486,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-icon-action-card-default": "#0073bb", "color-icon-action-card-disabled": "#aab7b8", "color-icon-action-card-hover": "#002b66", + "color-info-100": "#d1f1ff", "color-info-1000": "#12293b", "color-info-300": "#44b9d6", "color-info-400": "#00a1c9", "color-info-50": "#f1faff", "color-info-600": "#0073bb", + "color-info-700": "#004a9e", + "color-info-800": "#003b8f", + "color-info-950": "#00204d", "color-item-selected": "#0073bb", "color-neutral-100": "#fafafa", "color-neutral-1000": "#06080a", @@ -520,6 +527,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-primary-700": "#0a4a74", "color-primary-800": "#003b8f", "color-primary-900": "#002b66", + "color-primary-950": "#00204d", "color-purple-400": "#bf80ff", "color-purple-700": "#7300e5", "color-severity-dark-red": "#870303", @@ -531,10 +539,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-shadow-side": "rgba(0, 28, 36, 0.15)", "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)", "color-stroke-chart-line": "#879596", + "color-success-100": "#d9ffd6", "color-success-1000": "#172211", + "color-success-400": "#00e500", "color-success-50": "#f2f8f0", "color-success-500": "#6aaf35", "color-success-600": "#1d8102", + "color-success-800": "#005c26", + "color-success-950": "#003311", "color-text-accent": "#0073bb", "color-text-action-card-disabled": "#879596", "color-text-avatar": "#ffffff", @@ -667,11 +679,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-tutorial-hotspot-hover": "#0a4a74", "color-transparent": "transparent", "color-tree-view-connector-line": "#879596", + "color-warning-100": "#fffbbd", "color-warning-1000": "#191100", "color-warning-400": "#ffe347", "color-warning-50": "#fffef0", "color-warning-500": "#fbd332", + "color-warning-600": "#f2b100", + "color-warning-800": "#9e6900", "color-warning-900": "#906806", + "color-warning-950": "#573a00", "color-white": "#ffffff", "font-button-letter-spacing": "0.25px", "font-chart-detail-size": "14px", @@ -1389,11 +1405,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-dropzone-border-hover": "#44b9d6", "color-dropzone-text-default": "#c6c6cd", "color-dropzone-text-hover": "#c6c6cd", + "color-error-100": "#ffe0e0", "color-error-1000": "#270a11", "color-error-400": "#ff5d64", "color-error-50": "#fdf3f1", "color-error-600": "#d13212", + "color-error-800": "#990000", "color-error-900": "#700000", + "color-error-950": "#520000", "color-foreground-control-default": "#ffffff", "color-foreground-control-disabled": "#687078", "color-foreground-control-read-only": "#95a5a6", @@ -1410,11 +1429,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-icon-action-card-default": "#00a1c9", "color-icon-action-card-disabled": "#687078", "color-icon-action-card-hover": "#44b9d6", + "color-info-100": "#d1f1ff", "color-info-1000": "#12293b", "color-info-300": "#44b9d6", "color-info-400": "#00a1c9", "color-info-50": "#f1faff", "color-info-600": "#0073bb", + "color-info-700": "#004a9e", + "color-info-800": "#003b8f", + "color-info-950": "#00204d", "color-item-selected": "#44b9d6", "color-neutral-100": "#fafafa", "color-neutral-1000": "#06080a", @@ -1447,6 +1470,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-primary-700": "#0a4a74", "color-primary-800": "#003b8f", "color-primary-900": "#002b66", + "color-primary-950": "#00204d", "color-purple-400": "#bf80ff", "color-purple-700": "#7300e5", "color-severity-dark-red": "#d63f38", @@ -1458,10 +1482,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-shadow-side": "rgba(0, 0, 0, 0.3)", "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)", "color-stroke-chart-line": "#879596", + "color-success-100": "#d9ffd6", "color-success-1000": "#172211", + "color-success-400": "#00e500", "color-success-50": "#f2f8f0", "color-success-500": "#6aaf35", "color-success-600": "#1d8102", + "color-success-800": "#005c26", + "color-success-950": "#003311", "color-text-accent": "#44b9d6", "color-text-action-card-disabled": "#879596", "color-text-avatar": "#ffffff", @@ -1594,11 +1622,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-tutorial-hotspot-hover": "#99cbe4", "color-transparent": "transparent", "color-tree-view-connector-line": "#d5dbdb", + "color-warning-100": "#fffbbd", "color-warning-1000": "#191100", "color-warning-400": "#ffe347", "color-warning-50": "#fffef0", "color-warning-500": "#fbd332", + "color-warning-600": "#f2b100", + "color-warning-800": "#9e6900", "color-warning-900": "#906806", + "color-warning-950": "#573a00", "color-white": "#ffffff", "font-button-letter-spacing": "0.25px", "font-chart-detail-size": "14px", @@ -2316,11 +2348,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-dropzone-border-hover": "#002b66", "color-dropzone-text-default": "#545b64", "color-dropzone-text-hover": "#545b64", + "color-error-100": "#ffe0e0", "color-error-1000": "#270a11", "color-error-400": "#ff5d64", "color-error-50": "#fdf3f1", "color-error-600": "#d13212", + "color-error-800": "#990000", "color-error-900": "#700000", + "color-error-950": "#520000", "color-foreground-control-default": "#ffffff", "color-foreground-control-disabled": "#ffffff", "color-foreground-control-read-only": "#687078", @@ -2337,11 +2372,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-icon-action-card-default": "#0073bb", "color-icon-action-card-disabled": "#aab7b8", "color-icon-action-card-hover": "#002b66", + "color-info-100": "#d1f1ff", "color-info-1000": "#12293b", "color-info-300": "#44b9d6", "color-info-400": "#00a1c9", "color-info-50": "#f1faff", "color-info-600": "#0073bb", + "color-info-700": "#004a9e", + "color-info-800": "#003b8f", + "color-info-950": "#00204d", "color-item-selected": "#0073bb", "color-neutral-100": "#fafafa", "color-neutral-1000": "#06080a", @@ -2374,6 +2413,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-primary-700": "#0a4a74", "color-primary-800": "#003b8f", "color-primary-900": "#002b66", + "color-primary-950": "#00204d", "color-purple-400": "#bf80ff", "color-purple-700": "#7300e5", "color-severity-dark-red": "#870303", @@ -2385,10 +2425,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-shadow-side": "rgba(0, 28, 36, 0.15)", "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)", "color-stroke-chart-line": "#879596", + "color-success-100": "#d9ffd6", "color-success-1000": "#172211", + "color-success-400": "#00e500", "color-success-50": "#f2f8f0", "color-success-500": "#6aaf35", "color-success-600": "#1d8102", + "color-success-800": "#005c26", + "color-success-950": "#003311", "color-text-accent": "#0073bb", "color-text-action-card-disabled": "#879596", "color-text-avatar": "#ffffff", @@ -2521,11 +2565,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-tutorial-hotspot-hover": "#0a4a74", "color-transparent": "transparent", "color-tree-view-connector-line": "#879596", + "color-warning-100": "#fffbbd", "color-warning-1000": "#191100", "color-warning-400": "#ffe347", "color-warning-50": "#fffef0", "color-warning-500": "#fbd332", + "color-warning-600": "#f2b100", + "color-warning-800": "#9e6900", "color-warning-900": "#906806", + "color-warning-950": "#573a00", "color-white": "#ffffff", "font-button-letter-spacing": "0.25px", "font-chart-detail-size": "14px", @@ -3243,11 +3291,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-dropzone-border-hover": "#002b66", "color-dropzone-text-default": "#545b64", "color-dropzone-text-hover": "#545b64", + "color-error-100": "#ffe0e0", "color-error-1000": "#270a11", "color-error-400": "#ff5d64", "color-error-50": "#fdf3f1", "color-error-600": "#d13212", + "color-error-800": "#990000", "color-error-900": "#700000", + "color-error-950": "#520000", "color-foreground-control-default": "#ffffff", "color-foreground-control-disabled": "#ffffff", "color-foreground-control-read-only": "#687078", @@ -3264,11 +3315,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-icon-action-card-default": "#0073bb", "color-icon-action-card-disabled": "#aab7b8", "color-icon-action-card-hover": "#002b66", + "color-info-100": "#d1f1ff", "color-info-1000": "#12293b", "color-info-300": "#44b9d6", "color-info-400": "#00a1c9", "color-info-50": "#f1faff", "color-info-600": "#0073bb", + "color-info-700": "#004a9e", + "color-info-800": "#003b8f", + "color-info-950": "#00204d", "color-item-selected": "#0073bb", "color-neutral-100": "#fafafa", "color-neutral-1000": "#06080a", @@ -3301,6 +3356,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-primary-700": "#0a4a74", "color-primary-800": "#003b8f", "color-primary-900": "#002b66", + "color-primary-950": "#00204d", "color-purple-400": "#bf80ff", "color-purple-700": "#7300e5", "color-severity-dark-red": "#870303", @@ -3312,10 +3368,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-shadow-side": "rgba(0, 28, 36, 0.15)", "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)", "color-stroke-chart-line": "#879596", + "color-success-100": "#d9ffd6", "color-success-1000": "#172211", + "color-success-400": "#00e500", "color-success-50": "#f2f8f0", "color-success-500": "#6aaf35", "color-success-600": "#1d8102", + "color-success-800": "#005c26", + "color-success-950": "#003311", "color-text-accent": "#0073bb", "color-text-action-card-disabled": "#879596", "color-text-avatar": "#ffffff", @@ -3448,11 +3508,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-tutorial-hotspot-hover": "#0a4a74", "color-transparent": "transparent", "color-tree-view-connector-line": "#879596", + "color-warning-100": "#fffbbd", "color-warning-1000": "#191100", "color-warning-400": "#ffe347", "color-warning-50": "#fffef0", "color-warning-500": "#fbd332", + "color-warning-600": "#f2b100", + "color-warning-800": "#9e6900", "color-warning-900": "#906806", + "color-warning-950": "#573a00", "color-white": "#ffffff", "font-button-letter-spacing": "0.25px", "font-chart-detail-size": "14px", @@ -4170,11 +4234,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-dropzone-border-hover": "#002b66", "color-dropzone-text-default": "#424650", "color-dropzone-text-hover": "#424650", + "color-error-100": "#ffe0e0", "color-error-1000": "#1f0000", "color-error-400": "#ff7a7a", "color-error-50": "#fff5f5", "color-error-600": "#db0000", + "color-error-800": "#990000", "color-error-900": "#700000", + "color-error-950": "#520000", "color-foreground-control-default": "#ffffff", "color-foreground-control-disabled": "#ffffff", "color-foreground-control-read-only": "#656871", @@ -4191,11 +4258,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-icon-action-card-default": "#006ce0", "color-icon-action-card-disabled": "#b4b4bb", "color-icon-action-card-hover": "#002b66", + "color-info-100": "#d1f1ff", "color-info-1000": "#001129", "color-info-300": "#75cfff", "color-info-400": "#42b4ff", "color-info-50": "#f0fbff", "color-info-600": "#006ce0", + "color-info-700": "#004a9e", + "color-info-800": "#003b8f", + "color-info-950": "#00204d", "color-item-selected": "#006ce0", "color-neutral-100": "#f9f9fa", "color-neutral-1000": "#06080a", @@ -4228,6 +4299,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-primary-700": "#004a9e", "color-primary-800": "#003b8f", "color-primary-900": "#002b66", + "color-primary-950": "#00204d", "color-purple-400": "#bf80ff", "color-purple-700": "#7300e5", "color-severity-dark-red": "#870303", @@ -4239,10 +4311,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-shadow-side": "rgba(15, 20, 26, 0.12)", "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)", "color-stroke-chart-line": "#8c8c94", + "color-success-100": "#d9ffd6", "color-success-1000": "#001401", + "color-success-400": "#00e500", "color-success-50": "#effff1", "color-success-500": "#2bb534", "color-success-600": "#00802f", + "color-success-800": "#005c26", + "color-success-950": "#003311", "color-text-accent": "#006ce0", "color-text-action-card-disabled": "#8c8c94", "color-text-avatar": "#ffffff", @@ -4375,11 +4451,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-tutorial-hotspot-hover": "#002b66", "color-transparent": "transparent", "color-tree-view-connector-line": "#8c8c94", + "color-warning-100": "#fffbbd", "color-warning-1000": "#191100", "color-warning-400": "#ffe347", "color-warning-50": "#fffef0", "color-warning-500": "#fbd332", + "color-warning-600": "#f2b100", + "color-warning-800": "#9e6900", "color-warning-900": "#855900", + "color-warning-950": "#573a00", "color-white": "#ffffff", "font-button-letter-spacing": "0.005em", "font-chart-detail-size": "12px", @@ -5097,11 +5177,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-dropzone-border-hover": "#002b66", "color-dropzone-text-default": "#424650", "color-dropzone-text-hover": "#424650", + "color-error-100": "#ffe0e0", "color-error-1000": "#1f0000", "color-error-400": "#ff7a7a", "color-error-50": "#fff5f5", "color-error-600": "#db0000", + "color-error-800": "#990000", "color-error-900": "#700000", + "color-error-950": "#520000", "color-foreground-control-default": "#ffffff", "color-foreground-control-disabled": "#ffffff", "color-foreground-control-read-only": "#656871", @@ -5118,11 +5201,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-icon-action-card-default": "#006ce0", "color-icon-action-card-disabled": "#b4b4bb", "color-icon-action-card-hover": "#002b66", + "color-info-100": "#d1f1ff", "color-info-1000": "#001129", "color-info-300": "#75cfff", "color-info-400": "#42b4ff", "color-info-50": "#f0fbff", "color-info-600": "#006ce0", + "color-info-700": "#004a9e", + "color-info-800": "#003b8f", + "color-info-950": "#00204d", "color-item-selected": "#006ce0", "color-neutral-100": "#f9f9fa", "color-neutral-1000": "#06080a", @@ -5155,6 +5242,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-primary-700": "#004a9e", "color-primary-800": "#003b8f", "color-primary-900": "#002b66", + "color-primary-950": "#00204d", "color-purple-400": "#bf80ff", "color-purple-700": "#7300e5", "color-severity-dark-red": "#870303", @@ -5166,10 +5254,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-shadow-side": "rgba(15, 20, 26, 0.12)", "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)", "color-stroke-chart-line": "#8c8c94", + "color-success-100": "#d9ffd6", "color-success-1000": "#001401", + "color-success-400": "#00e500", "color-success-50": "#effff1", "color-success-500": "#2bb534", "color-success-600": "#00802f", + "color-success-800": "#005c26", + "color-success-950": "#003311", "color-text-accent": "#006ce0", "color-text-action-card-disabled": "#8c8c94", "color-text-avatar": "#ffffff", @@ -5302,11 +5394,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-tutorial-hotspot-hover": "#002b66", "color-transparent": "transparent", "color-tree-view-connector-line": "#8c8c94", + "color-warning-100": "#fffbbd", "color-warning-1000": "#191100", "color-warning-400": "#ffe347", "color-warning-50": "#fffef0", "color-warning-500": "#fbd332", + "color-warning-600": "#f2b100", + "color-warning-800": "#9e6900", "color-warning-900": "#855900", + "color-warning-950": "#573a00", "color-white": "#ffffff", "font-button-letter-spacing": "0.005em", "font-chart-detail-size": "12px", @@ -6024,11 +6120,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-dropzone-border-hover": "#75cfff", "color-dropzone-text-default": "#c6c6cd", "color-dropzone-text-hover": "#c6c6cd", + "color-error-100": "#ffe0e0", "color-error-1000": "#1f0000", "color-error-400": "#ff7a7a", "color-error-50": "#fff5f5", "color-error-600": "#db0000", + "color-error-800": "#990000", "color-error-900": "#700000", + "color-error-950": "#520000", "color-foreground-control-default": "#0f141a", "color-foreground-control-disabled": "#161d26", "color-foreground-control-read-only": "#a4a4ad", @@ -6045,11 +6144,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-icon-action-card-default": "#42b4ff", "color-icon-action-card-disabled": "#656871", "color-icon-action-card-hover": "#75cfff", + "color-info-100": "#d1f1ff", "color-info-1000": "#001129", "color-info-300": "#75cfff", "color-info-400": "#42b4ff", "color-info-50": "#f0fbff", "color-info-600": "#006ce0", + "color-info-700": "#004a9e", + "color-info-800": "#003b8f", + "color-info-950": "#00204d", "color-item-selected": "#42b4ff", "color-neutral-100": "#f9f9fa", "color-neutral-1000": "#06080a", @@ -6082,6 +6185,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-primary-700": "#004a9e", "color-primary-800": "#003b8f", "color-primary-900": "#002b66", + "color-primary-950": "#00204d", "color-purple-400": "#bf80ff", "color-purple-700": "#7300e5", "color-severity-dark-red": "#870303", @@ -6093,10 +6197,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-shadow-side": "rgba(15, 20, 26, 1)", "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)", "color-stroke-chart-line": "#8c8c94", + "color-success-100": "#d9ffd6", "color-success-1000": "#001401", + "color-success-400": "#00e500", "color-success-50": "#effff1", "color-success-500": "#2bb534", "color-success-600": "#00802f", + "color-success-800": "#005c26", + "color-success-950": "#003311", "color-text-accent": "#42b4ff", "color-text-action-card-disabled": "#8c8c94", "color-text-avatar": "#ffffff", @@ -6229,11 +6337,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-tutorial-hotspot-hover": "#75cfff", "color-transparent": "transparent", "color-tree-view-connector-line": "#dedee3", + "color-warning-100": "#fffbbd", "color-warning-1000": "#191100", "color-warning-400": "#ffe347", "color-warning-50": "#fffef0", "color-warning-500": "#fbd332", + "color-warning-600": "#f2b100", + "color-warning-800": "#9e6900", "color-warning-900": "#855900", + "color-warning-950": "#573a00", "color-white": "#ffffff", "font-button-letter-spacing": "0.005em", "font-chart-detail-size": "12px", @@ -6951,11 +7063,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-dropzone-border-hover": "#75cfff", "color-dropzone-text-default": "#c6c6cd", "color-dropzone-text-hover": "#c6c6cd", + "color-error-100": "#ffe0e0", "color-error-1000": "#1f0000", "color-error-400": "#ff7a7a", "color-error-50": "#fff5f5", "color-error-600": "#db0000", + "color-error-800": "#990000", "color-error-900": "#700000", + "color-error-950": "#520000", "color-foreground-control-default": "#0f141a", "color-foreground-control-disabled": "#161d26", "color-foreground-control-read-only": "#a4a4ad", @@ -6972,11 +7087,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-icon-action-card-default": "#42b4ff", "color-icon-action-card-disabled": "#656871", "color-icon-action-card-hover": "#75cfff", + "color-info-100": "#d1f1ff", "color-info-1000": "#001129", "color-info-300": "#75cfff", "color-info-400": "#42b4ff", "color-info-50": "#f0fbff", "color-info-600": "#006ce0", + "color-info-700": "#004a9e", + "color-info-800": "#003b8f", + "color-info-950": "#00204d", "color-item-selected": "#42b4ff", "color-neutral-100": "#f9f9fa", "color-neutral-1000": "#06080a", @@ -7009,6 +7128,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-primary-700": "#004a9e", "color-primary-800": "#003b8f", "color-primary-900": "#002b66", + "color-primary-950": "#00204d", "color-purple-400": "#bf80ff", "color-purple-700": "#7300e5", "color-severity-dark-red": "#d63f38", @@ -7020,10 +7140,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-shadow-side": "rgba(15, 20, 26, 1)", "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)", "color-stroke-chart-line": "#8c8c94", + "color-success-100": "#d9ffd6", "color-success-1000": "#001401", + "color-success-400": "#00e500", "color-success-50": "#effff1", "color-success-500": "#2bb534", "color-success-600": "#00802f", + "color-success-800": "#005c26", + "color-success-950": "#003311", "color-text-accent": "#42b4ff", "color-text-action-card-disabled": "#8c8c94", "color-text-avatar": "#ffffff", @@ -7156,11 +7280,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-tutorial-hotspot-hover": "#75cfff", "color-transparent": "transparent", "color-tree-view-connector-line": "#dedee3", + "color-warning-100": "#fffbbd", "color-warning-1000": "#191100", "color-warning-400": "#ffe347", "color-warning-50": "#fffef0", "color-warning-500": "#fbd332", + "color-warning-600": "#f2b100", + "color-warning-800": "#9e6900", "color-warning-900": "#855900", + "color-warning-950": "#573a00", "color-white": "#ffffff", "font-button-letter-spacing": "0.005em", "font-chart-detail-size": "12px", diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index 348cce27f5..342ac6cb0d 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -5106,6 +5106,100 @@ Override the HTML tag by using property \`tagOverride\`.", "optional": true, "type": "string", }, + { + "description": "Renders the box as a visual accent wrapper to emphasize its content. + +Setting this property activates the accent styling: a coordinated background and content +color combination that works in both light and dark modes. A \`variant\` is not required to +activate the accent. The accent styling is applied on top of the element determined by +\`variant\` (or \`tagOverride\`), so the rendered HTML tag is unaffected. + +The object accepts the following fields: +- \`color\` (required) — the coordinated background and foreground color pair. The foreground + color is applied as the wrapper's CSS \`color\`, so it only affects content that inherits + the current color (for example an \`Icon\`, or a nested \`Box\` with \`color="inherit"\`). + Content that sets its own color is not overridden. +- \`aspectRatio\` — \`auto\` (default) lets the wrapper's width follow its content; + \`equal\` forces equal width and height, suitable for wrapping icons. +- \`borderRadius\` — the corner rounding applied to the wrapper, using a t-shirt size keyword + from the Box spacing scale (\`xxxs\`, \`xxs\`, \`xs\`, \`s\`, \`m\`, \`l\`, \`xl\`, \`xxl\`, \`xxxl\`), or + \`full\` for fully rounded corners. When not set, the wrapper has no border radius. Set it to + \`full\` together with \`aspectRatio: 'equal'\` to render a circle. + +Composes with existing Box props such as \`padding\` and \`margin\`.", + "inlineType": { + "name": "BoxProps.VisualAccent", + "properties": [ + { + "inlineType": { + "name": "BoxProps.VisualAccent.AspectRatio", + "type": "union", + "values": [ + "auto", + "equal", + ], + }, + "name": "aspectRatio", + "optional": true, + "type": "string", + }, + { + "inlineType": { + "name": "BoxProps.VisualAccent.BorderRadius", + "type": "union", + "values": [ + "s", + "full", + "m", + "xxxs", + "xxs", + "xs", + "l", + "xl", + "xxl", + "xxxl", + ], + }, + "name": "borderRadius", + "optional": true, + "type": "string", + }, + { + "inlineType": { + "name": "BoxProps.VisualAccent.Color", + "type": "union", + "values": [ + "blue", + "cyan", + "fuchsia", + "green", + "grey", + "indigo", + "lime", + "magenta", + "orange", + "pink", + "purple", + "red", + "teal", + "violet", + "yellow", + "mint", + "rose", + "amber", + ], + }, + "name": "color", + "optional": false, + "type": "string", + }, + ], + "type": "object", + }, + "name": "visualAccent", + "optional": true, + "type": "BoxProps.VisualAccent", + }, ], "regions": [ { diff --git a/src/box/__tests__/box.test.tsx b/src/box/__tests__/box.test.tsx index 1db48d5d10..47d9a9bb8b 100644 --- a/src/box/__tests__/box.test.tsx +++ b/src/box/__tests__/box.test.tsx @@ -174,4 +174,95 @@ describe('Box', () => { expect(container.firstChild).toHaveClass('additional-class'); }); }); + + describe('visualAccent property', () => { + test('renders the default div tag when no variant is set', () => { + const boxWrapper = renderBox({ visualAccent: { color: 'indigo' } }); + expect(boxWrapper.getElement().tagName).toBe('DIV'); + }); + + test('preserves the variant tag when combined with visualAccent', () => { + const boxWrapper = renderBox({ variant: 'h4', visualAccent: { color: 'indigo' } }); + expect(boxWrapper.getElement().tagName).toBe('H4'); + }); + + test('applies the base visual-accent class', () => { + const boxWrapper = renderBox({ visualAccent: { color: 'indigo' } }); + expect(boxWrapper.getElement()).toHaveClass(styles['visual-accent']); + }); + + test('applies the correct color class', () => { + const colors: Array = [ + 'red', + 'yellow', + 'indigo', + 'green', + 'orange', + 'purple', + 'mint', + 'lime', + 'grey', + ]; + colors.forEach(color => { + const boxWrapper = renderBox({ visualAccent: { color } }); + expect(boxWrapper.getElement()).toHaveClass(styles[`visual-accent-${color}`]); + }); + }); + + test('does not apply any accent class when visualAccent is not set', () => { + const boxWrapper = renderBox({}); + const element = boxWrapper.getElement(); + expect(element.className).not.toMatch(/visual-accent/); + expect(element.tagName).toBe('DIV'); + }); + + test('defaults to the auto aspect ratio', () => { + const boxWrapper = renderBox({ visualAccent: { color: 'indigo' } }); + expect(boxWrapper.getElement()).toHaveClass(styles['visual-accent-aspect-auto']); + }); + + test('applies the correct aspect ratio class', () => { + const aspectRatios: Array = ['auto', 'equal']; + aspectRatios.forEach(aspectRatio => { + const boxWrapper = renderBox({ visualAccent: { color: 'indigo', aspectRatio } }); + expect(boxWrapper.getElement()).toHaveClass(styles[`visual-accent-aspect-${aspectRatio}`]); + }); + }); + + test('applies the correct class for each borderRadius keyword', () => { + const keywords: Array = [ + 'xxxs', + 'xxs', + 'xs', + 's', + 'm', + 'l', + 'xl', + 'xxl', + 'xxxl', + 'full', + ]; + keywords.forEach(borderRadius => { + const boxWrapper = renderBox({ visualAccent: { color: 'indigo', borderRadius } }); + expect(boxWrapper.getElement()).toHaveClass(styles[`visual-accent-radius-${borderRadius}`]); + }); + }); + + test('does not set a borderRadius class when borderRadius is not set', () => { + const boxWrapper = renderBox({ visualAccent: { color: 'indigo' } }); + expect(boxWrapper.getElement().className).not.toMatch(/visual-accent-radius-/); + }); + + test('renders a circle when combining equal aspect ratio and full borderRadius', () => { + const boxWrapper = renderBox({ visualAccent: { color: 'indigo', aspectRatio: 'equal', borderRadius: 'full' } }); + const element = boxWrapper.getElement(); + expect(element).toHaveClass(styles['visual-accent-aspect-equal']); + expect(element).toHaveClass(styles['visual-accent-radius-full']); + }); + + test('tagOverride works with visualAccent', () => { + const boxWrapper = renderBox({ visualAccent: { color: 'indigo' }, tagOverride: 'div' }); + expect(boxWrapper.getElement().tagName).toBe('DIV'); + }); + }); }); diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts index a6acb96ee9..ce250a3604 100644 --- a/src/box/interfaces.ts +++ b/src/box/interfaces.ts @@ -23,6 +23,29 @@ export interface BoxProps extends BaseComponentProps { * Override the HTML tag by using property `tagOverride`. */ variant?: BoxProps.Variant; + /** + * Renders the box as a visual accent wrapper to emphasize its content. + * + * Setting this property activates the accent styling: a coordinated background and content + * color combination that works in both light and dark modes. A `variant` is not required to + * activate the accent. The accent styling is applied on top of the element determined by + * `variant` (or `tagOverride`), so the rendered HTML tag is unaffected. + * + * The object accepts the following fields: + * - `color` (required) — the coordinated background and foreground color pair. The foreground + * color is applied as the wrapper's CSS `color`, so it only affects content that inherits + * the current color (for example an `Icon`, or a nested `Box` with `color="inherit"`). + * Content that sets its own color is not overridden. + * - `aspectRatio` — `auto` (default) lets the wrapper's width follow its content; + * `equal` forces equal width and height, suitable for wrapping icons. + * - `borderRadius` — the corner rounding applied to the wrapper, using a t-shirt size keyword + * from the Box spacing scale (`xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`), or + * `full` for fully rounded corners. When not set, the wrapper has no border radius. Set it to + * `full` together with `aspectRatio: 'equal'` to render a circle. + * + * Composes with existing Box props such as `padding` and `margin`. + */ + visualAccent?: BoxProps.VisualAccent; /** * Overrides the default HTML tag provided by the variant. */ @@ -156,6 +179,62 @@ export namespace BoxProps { | 'awsui-value-large' | 'awsui-inline-code'; + export interface VisualAccent { + /** + * The coordinated background and foreground color pair applied to the accent wrapper. + * Each color works in both light and dark modes. + * + * The background color is applied directly to the wrapper. The foreground color is applied + * as the wrapper's CSS `color` and is therefore only picked up by content that inherits the + * current color, such as an `Icon` or a nested `Box` with `color="inherit"`. Content that + * defines its own color (for example a `Box` with an explicit `color`, or a `Link`) keeps that + * color and is not recolored by the accent. + */ + color: BoxProps.VisualAccent.Color; + /** + * Controls the aspect ratio of the accent wrapper. + * + * - `auto` (default) — the wrapper's width follows its content. + * - `equal` — the wrapper has equal width and height, suitable for wrapping icons. + * + * Combine `aspectRatio: 'equal'` with `borderRadius: 'full'` to render a circle. + */ + aspectRatio?: BoxProps.VisualAccent.AspectRatio; + /** + * The corner rounding applied to the accent wrapper. When not set, the wrapper has no + * border radius. + * + * Use one of the curated t-shirt size keywords, which map to the same spacing scale used by + * `padding` and `margin`: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, or `xxxl`. Use + * `full` for fully rounded corners; combine it with `aspectRatio: 'equal'` to render a circle. + */ + borderRadius?: BoxProps.VisualAccent.BorderRadius; + } + + export namespace VisualAccent { + export type Color = + | 'red' + | 'yellow' + | 'indigo' + | 'green' + | 'orange' + | 'purple' + | 'mint' + | 'lime' + | 'grey' + | 'teal' + | 'cyan' + | 'blue' + | 'violet' + | 'fuchsia' + | 'magenta' + | 'pink' + | 'rose' + | 'amber'; + export type AspectRatio = 'auto' | 'equal'; + export type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full'; + } + export type Display = 'block' | 'inline' | 'inline-block' | 'none'; export type TextAlign = 'left' | 'center' | 'right'; export type Float = 'left' | 'right'; diff --git a/src/box/internal.tsx b/src/box/internal.tsx index b8391b6eb3..3b31a87011 100644 --- a/src/box/internal.tsx +++ b/src/box/internal.tsx @@ -23,6 +23,7 @@ export default function InternalBox({ fontSize, fontWeight, color, + visualAccent, children, nativeAttributes, __internalRootRef, @@ -32,11 +33,17 @@ export default function InternalBox({ const marginsClassNamesSuffices = getClassNamesSuffixes(margin); const paddingsClassNamesSuffices = getClassNamesSuffixes(padding); + const accentAspectRatio = visualAccent?.aspectRatio ?? 'auto'; + const className = clsx( baseProps.className, styles.root, styles.box, styles[`${variant.replace(/^awsui-/, '')}-variant`], + visualAccent && styles['visual-accent'], + visualAccent && styles[`visual-accent-${visualAccent.color}`], + visualAccent && styles[`visual-accent-aspect-${accentAspectRatio}`], + visualAccent?.borderRadius && styles[`visual-accent-radius-${visualAccent.borderRadius}`], marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]), paddingsClassNamesSuffices.map(suffix => styles[`p-${suffix}`]), styles[`d-${display}`], diff --git a/src/box/styles.scss b/src/box/styles.scss index 02596c3049..789004f659 100644 --- a/src/box/styles.scss +++ b/src/box/styles.scss @@ -6,6 +6,7 @@ @use '../internal/styles' as styles; @use './text'; @use './layout'; +@use './visual-accent'; .root { @include styles.default-text-style; diff --git a/src/box/visual-accent.scss b/src/box/visual-accent.scss new file mode 100644 index 0000000000..7226c7c49e --- /dev/null +++ b/src/box/visual-accent.scss @@ -0,0 +1,117 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use 'sass:map'; +@use 'sass:meta'; +@use '../internal/styles/tokens' as awsui; + +// T-shirt size keywords mirror the Box spacing scale (see spacing.scss). +// `full` renders fully rounded corners (a circle when combined with `aspectRatio: 'equal'`). +$accent-radii: ( + 'xxxs': awsui.$space-xxxs, + 'xxs': awsui.$space-xxs, + 'xs': awsui.$space-xs, + 's': awsui.$space-s, + 'm': awsui.$space-m, + 'l': awsui.$space-l, + 'xl': awsui.$space-xl, + 'xxl': awsui.$space-xxl, + 'xxxl': awsui.$space-xxxl, + 'full': 50%, +); + +@mixin accent-radius($value) { + border-start-start-radius: $value; + border-start-end-radius: $value; + border-end-start-radius: $value; + border-end-end-radius: $value; +} + +// ─── Base visual accent container ───────────────────────────────────────────── +// Applied whenever the `visualAccent` prop is set. Provides the container layout. Corners are +// square by default; the `.visual-accent-radius-*` classes below apply corner rounding for the +// curated `borderRadius` keywords. +.visual-accent { + display: inline-flex; + align-items: center; + justify-content: center; + padding-block: awsui.$space-xxs; + padding-inline: awsui.$space-xs; + box-sizing: border-box; +} + +// ─── Accent border radius (t-shirt size keywords) ───────────────────────────── +// Mirror the Box spacing scale so `borderRadius` keywords align with `padding` / `margin`. +@each $name, $value in $accent-radii { + .visual-accent-radius-#{$name} { + @include accent-radius($value); + } +} + +// ─── Accent aspect ratio ────────────────────────────────────────────────────── +// `auto` — default; the container's width follows its content. +// `equal` — equal width and height, suitable for icon wrapping. Combine with +// `borderRadius: 'full'` to render a circle. + +.visual-accent-aspect-auto { + // Reset any square constraints so content can size the container naturally. + aspect-ratio: auto; + inline-size: auto; +} + +.visual-accent-aspect-equal { + // Equal padding on all sides. + padding-block: awsui.$space-xs; + padding-inline: awsui.$space-xs; + // Force the element to be a square regardless of content dimensions. + // The width is constrained to match the height (content + padding). + aspect-ratio: 1 / 1; + // Prevent content from stretching the box wider than tall. + overflow: hidden; + // Let the box shrink-wrap to its height, width follows via aspect-ratio. + inline-size: fit-content; +} + +// ─── Accent colors ────────────────────────────────────────────────────────────── +// Light/dark values are resolved by the design tokens, so no explicit dark-mode +// overrides are needed here. +// +// The selectors chain the `.visual-accent` base class with the `.visual-accent-{color}` +// modifier (both are always applied together whenever `visualAccent` is set) to reach a +// specificity of (0,3,0). This intentionally beats the `color` prop's `.box.color-*` +// selector (0,2,0) so the accent's coordinated foreground color always wins, regardless of +// stylesheet source order. Winning here preserves the guaranteed background/foreground color +// contrast of the accent pair. Descendants (nested Box, Icon) inherit this color. +// +// Token variables are looked up dynamically from the tokens module, so adding a color only +// requires extending `$accent-colors`. +$accent-colors: ( + 'red', + 'yellow', + 'indigo', + 'green', + 'orange', + 'purple', + 'mint', + 'lime', + 'grey', + 'teal', + 'cyan', + 'blue', + 'violet', + 'fuchsia', + 'magenta', + 'pink', + 'rose', + 'amber' +); +$tokens: meta.module-variables('awsui'); + +@each $accent in $accent-colors { + .box.visual-accent.visual-accent-#{$accent} { + background-color: map.get($tokens, 'color-background-accent-#{$accent}'); + color: map.get($tokens, 'color-text-accent-#{$accent}'); + } +} diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 5106958a6e..54c95afe42 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -608,6 +608,24 @@ export type ColorsTokenName = | 'colorBackgroundNotificationStackBar' | 'colorBackgroundNotificationStackBarActive' | 'colorBackgroundNotificationStackBarHover' + | 'colorBackgroundAccentRed' + | 'colorBackgroundAccentYellow' + | 'colorBackgroundAccentIndigo' + | 'colorBackgroundAccentGreen' + | 'colorBackgroundAccentOrange' + | 'colorBackgroundAccentPurple' + | 'colorBackgroundAccentMint' + | 'colorBackgroundAccentLime' + | 'colorBackgroundAccentGrey' + | 'colorBackgroundAccentTeal' + | 'colorBackgroundAccentCyan' + | 'colorBackgroundAccentBlue' + | 'colorBackgroundAccentViolet' + | 'colorBackgroundAccentFuchsia' + | 'colorBackgroundAccentMagenta' + | 'colorBackgroundAccentPink' + | 'colorBackgroundAccentRose' + | 'colorBackgroundAccentAmber' | 'colorBackgroundPopover' | 'colorBackgroundProgressBarValueDefault' | 'colorBackgroundProgressBarDefault' @@ -732,6 +750,24 @@ export type ColorsTokenName = | 'colorStrokeCodeEditorGutterActiveLineDefault' | 'colorStrokeCodeEditorGutterActiveLineHover' | 'colorTextAccent' + | 'colorTextAccentRed' + | 'colorTextAccentYellow' + | 'colorTextAccentIndigo' + | 'colorTextAccentGreen' + | 'colorTextAccentOrange' + | 'colorTextAccentPurple' + | 'colorTextAccentMint' + | 'colorTextAccentLime' + | 'colorTextAccentGrey' + | 'colorTextAccentTeal' + | 'colorTextAccentCyan' + | 'colorTextAccentBlue' + | 'colorTextAccentViolet' + | 'colorTextAccentFuchsia' + | 'colorTextAccentMagenta' + | 'colorTextAccentPink' + | 'colorTextAccentRose' + | 'colorTextAccentAmber' | 'colorTextBodyDefault' | 'colorTextBodySecondary' | 'colorTextBreadcrumbCurrent' diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts index b9c75b7770..d6a4dc1a4b 100644 --- a/style-dictionary/visual-refresh/color-palette.ts +++ b/style-dictionary/visual-refresh/color-palette.ts @@ -68,6 +68,87 @@ const tokens: StyleDictionary.ColorPaletteDictionary = { 'colorPurple700', 'colorAmber400', 'colorAmber500', + 'colorRed950', + 'colorOrange50', + 'colorOrange100', + 'colorOrange400', + 'colorOrange700', + 'colorOrange800', + 'colorOrange950', + 'colorYellow600', + 'colorYellow950', + 'colorLime50', + 'colorLime100', + 'colorLime400', + 'colorLime700', + 'colorLime800', + 'colorLime950', + 'colorGreen400', + 'colorGreen950', + 'colorMint50', + 'colorMint100', + 'colorMint400', + 'colorMint700', + 'colorMint800', + 'colorMint950', + 'colorIndigo50', + 'colorIndigo400', + 'colorIndigo600', + 'colorIndigo950', + 'colorPurple50', + 'colorPurple100', + 'colorPurple600', + 'colorPurple800', + 'colorPurple950', + // Additional visual accent hues (mirror base color primitives) + 'colorTeal50', + 'colorTeal100', + 'colorTeal400', + 'colorTeal700', + 'colorTeal800', + 'colorTeal950', + 'colorCyan50', + 'colorCyan100', + 'colorCyan400', + 'colorCyan700', + 'colorCyan800', + 'colorCyan950', + 'colorBlue950', + 'colorViolet50', + 'colorViolet100', + 'colorViolet400', + 'colorViolet700', + 'colorViolet800', + 'colorViolet950', + 'colorFuchsia50', + 'colorFuchsia100', + 'colorFuchsia400', + 'colorFuchsia700', + 'colorFuchsia800', + 'colorFuchsia950', + 'colorMagenta50', + 'colorMagenta100', + 'colorMagenta400', + 'colorMagenta700', + 'colorMagenta800', + 'colorMagenta950', + 'colorPink50', + 'colorPink100', + 'colorPink400', + 'colorPink700', + 'colorPink800', + 'colorPink950', + 'colorRose50', + 'colorRose100', + 'colorRose400', + 'colorRose700', + 'colorRose800', + 'colorRose950', + 'colorAmber50', + 'colorAmber100', + 'colorAmber700', + 'colorAmber800', + 'colorAmber950', 'colorAwsSquidInk', 'colorTransparent', 'colorBlack', @@ -89,6 +170,7 @@ const referenceTokens: ReferenceTokens = { 700: brand.colorBlue700, 800: brand.colorBlue800, 900: brand.colorBlue900, + 950: brand.colorBlue950, 1000: brand.colorBlue1000, }, neutral: { @@ -115,29 +197,44 @@ const referenceTokens: ReferenceTokens = { }, error: { 50: brand.colorRed50, + 100: brand.colorRed100, 400: brand.colorRed400, 600: brand.colorRed600, + 800: brand.colorRed800, 900: brand.colorRed900, + 950: brand.colorRed950, 1000: brand.colorRed1000, }, success: { 50: brand.colorGreen50, + 100: brand.colorGreen100, + 400: brand.colorGreen400, 500: brand.colorGreen500, 600: brand.colorGreen600, + 800: brand.colorGreen800, + 950: brand.colorGreen950, 1000: brand.colorGreen1000, }, warning: { 50: brand.colorYellow50, + 100: brand.colorYellow100, 400: brand.colorYellow400, 500: brand.colorYellow500, + 600: brand.colorYellow600, + 800: brand.colorYellow800, 900: brand.colorYellow900, + 950: brand.colorYellow950, 1000: brand.colorYellow1000, }, info: { 50: brand.colorBlue50, + 100: brand.colorBlue100, 300: brand.colorBlue300, 400: brand.colorBlue400, 600: brand.colorBlue600, + 700: brand.colorBlue700, + 800: brand.colorBlue800, + 950: brand.colorBlue950, 1000: brand.colorBlue1000, }, }, diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index 927657bff9..3ac0267871 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -370,6 +370,44 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextBadgeBlue: '{colorTextNotificationDefault}', colorTextBadgeRed: '{colorTextNotificationDefault}', colorBackgroundCodeView: { light: '#f8f8f8', dark: '#282c34' }, + + // ── Visual accent ─────────────────────────────────── + colorBackgroundAccentRed: { light: '{colorError100}', dark: 'rgba(255, 61, 61, 0.2)' }, + colorBackgroundAccentYellow: { light: '{colorWarning100}', dark: 'rgba(251, 211, 50, 0.2)' }, + colorBackgroundAccentIndigo: { light: '{colorInfo100}', dark: 'rgba(0, 153, 255, 0.2)' }, + colorBackgroundAccentGreen: { light: '{colorSuccess100}', dark: 'rgba(43, 181, 52, 0.2)' }, + colorBackgroundAccentOrange: { light: '{colorOrange100}', dark: 'rgba(255, 75, 20, 0.2)' }, + colorBackgroundAccentPurple: { light: '{colorPurple100}', dark: 'rgba(173, 92, 255, 0.2)' }, + colorBackgroundAccentMint: { light: '{colorMint100}', dark: 'rgba(0, 189, 107, 0.2)' }, + colorBackgroundAccentLime: { light: '{colorLime100}', dark: 'rgba(49, 184, 0, 0.2)' }, + colorBackgroundAccentGrey: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, + colorBackgroundAccentTeal: { light: '{colorTeal100}', dark: 'rgba(0, 173, 162, 0.2)' }, + colorBackgroundAccentCyan: { light: '{colorCyan100}', dark: 'rgba(0, 164, 189, 0.2)' }, + colorBackgroundAccentBlue: { light: '{colorInfo100}', dark: 'rgba(0, 153, 255, 0.2)' }, + colorBackgroundAccentViolet: { light: '{colorViolet100}', dark: 'rgba(133, 117, 255, 0.2)' }, + colorBackgroundAccentFuchsia: { light: '{colorFuchsia100}', dark: 'rgba(228, 51, 255, 0.2)' }, + colorBackgroundAccentMagenta: { light: '{colorMagenta100}', dark: 'rgba(255, 26, 224, 0.2)' }, + colorBackgroundAccentPink: { light: '{colorPink100}', dark: 'rgba(255, 51, 153, 0.2)' }, + colorBackgroundAccentRose: { light: '{colorRose100}', dark: 'rgba(255, 56, 106, 0.2)' }, + colorBackgroundAccentAmber: { light: '{colorAmber100}', dark: 'rgba(250, 111, 0, 0.2)' }, + colorTextAccentRed: { light: '{colorError800}', dark: '{colorError400}' }, + colorTextAccentYellow: { light: '{colorWarning900}', dark: '{colorWarning400}' }, + colorTextAccentIndigo: { light: '{colorInfo800}', dark: '{colorInfo400}' }, + colorTextAccentGreen: { light: '{colorSuccess800}', dark: '{colorSuccess400}' }, + colorTextAccentOrange: { light: '{colorOrange800}', dark: '{colorOrange400}' }, + colorTextAccentPurple: { light: '{colorPurple800}', dark: '{colorPurple400}' }, + colorTextAccentMint: { light: '{colorMint800}', dark: '{colorMint400}' }, + colorTextAccentLime: { light: '{colorLime800}', dark: '{colorLime400}' }, + colorTextAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral300}' }, + colorTextAccentTeal: { light: '{colorTeal800}', dark: '{colorTeal400}' }, + colorTextAccentCyan: { light: '{colorCyan800}', dark: '{colorCyan400}' }, + colorTextAccentBlue: { light: '{colorInfo800}', dark: '{colorInfo400}' }, + colorTextAccentViolet: { light: '{colorViolet800}', dark: '{colorViolet400}' }, + colorTextAccentFuchsia: { light: '{colorFuchsia800}', dark: '{colorFuchsia400}' }, + colorTextAccentMagenta: { light: '{colorMagenta800}', dark: '{colorMagenta400}' }, + colorTextAccentPink: { light: '{colorPink800}', dark: '{colorPink400}' }, + colorTextAccentRose: { light: '{colorRose800}', dark: '{colorRose400}' }, + colorTextAccentAmber: { light: '{colorAmber800}', dark: '{colorAmber400}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 35e79814da..eea88bad69 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -276,6 +276,186 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorBackgroundAccentRed: { + description: 'The background color of the red accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentYellow: { + description: 'The background color of the yellow accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentIndigo: { + description: 'The background color of the indigo accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentGreen: { + description: 'The background color of the green accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentOrange: { + description: 'The background color of the orange accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentPurple: { + description: 'The background color of the purple accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentMint: { + description: 'The background color of the mint accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentLime: { + description: 'The background color of the lime accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentGrey: { + description: 'The background color of the grey accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentTeal: { + description: 'The background color of the teal accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentCyan: { + description: 'The background color of the cyan accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentBlue: { + description: 'The background color of the blue accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentViolet: { + description: 'The background color of the violet accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentFuchsia: { + description: 'The background color of the fuchsia accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentMagenta: { + description: 'The background color of the magenta accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentPink: { + description: 'The background color of the pink accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentRose: { + description: 'The background color of the rose accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorBackgroundAccentAmber: { + description: 'The background color of the amber accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentRed: { + description: 'The content color of the red accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentYellow: { + description: 'The content color of the yellow accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentIndigo: { + description: 'The content color of the indigo accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentGreen: { + description: 'The content color of the green accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentOrange: { + description: 'The content color of the orange accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentPurple: { + description: 'The content color of the purple accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentMint: { + description: 'The content color of the mint accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentLime: { + description: 'The content color of the lime accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentGrey: { + description: 'The content color of the grey accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentTeal: { + description: 'The content color of the teal accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentCyan: { + description: 'The content color of the cyan accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentBlue: { + description: 'The content color of the blue accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentViolet: { + description: 'The content color of the violet accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentFuchsia: { + description: 'The content color of the fuchsia accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentMagenta: { + description: 'The content color of the magenta accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentPink: { + description: 'The content color of the pink accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentRose: { + description: 'The content color of the rose accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, + colorTextAccentAmber: { + description: 'The content color of the amber accent in the Box `awsui-accent` variant.', + public: false, + themeable: false, + }, colorBackgroundPopover: { description: 'Background color for the popover container.', public: true,