From a6e00070598ef9f2506c1a04260fbcf6bb163242 Mon Sep 17 00:00:00 2001 From: at-susie Date: Tue, 23 Jun 2026 16:19:39 +0200 Subject: [PATCH 1/2] chore: Explore new box component variant for visual accent --- src/box/interfaces.ts | 13 +++++- src/box/internal.tsx | 6 +++ src/box/style-box.scss | 102 +++++++++++++++++++++++++++++++++++++++++ src/box/styles.scss | 1 + 4 files changed, 121 insertions(+), 1 deletion(-) create mode 100644 src/box/style-box.scss diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts index 9de987b480..0851d75645 100644 --- a/src/box/interfaces.ts +++ b/src/box/interfaces.ts @@ -19,10 +19,18 @@ export interface BoxProps extends BaseComponentProps { * styled using "Display large light" typography. * - If you set it to `awsui-inline-code`, the component will render a `code` element, * styled with a background and padding for inline code snippets. + * - If you set it to `awsui-accent`, the component will render a `span`, + * styled as a visual accent container with background and content color combinations. + * Use with the `accentColor` prop to select a color variant. * * Override the HTML tag by using property `tagOverride`. */ variant?: BoxProps.Variant; + /** + * Defines the accent color for the `awsui-style-box` variant. + * Only applies when `variant` is set to `awsui-style-box`. + */ + accentColor?: BoxProps.AccentColor; /** * Overrides the default HTML tag provided by the variant. */ @@ -154,7 +162,10 @@ export namespace BoxProps { | 'awsui-key-label' | 'awsui-gen-ai-label' | 'awsui-value-large' - | 'awsui-inline-code'; + | 'awsui-inline-code' + | 'awsui-accent'; + + export type AccentColor = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'mint' | 'lime' | 'grey'; export type Display = 'block' | 'inline' | 'inline-block' | 'none'; export type TextAlign = 'left' | 'center' | 'right'; diff --git a/src/box/internal.tsx b/src/box/internal.tsx index b8391b6eb3..dd1578d217 100644 --- a/src/box/internal.tsx +++ b/src/box/internal.tsx @@ -23,6 +23,7 @@ export default function InternalBox({ fontSize, fontWeight, color, + accentColor, children, nativeAttributes, __internalRootRef, @@ -37,6 +38,7 @@ export default function InternalBox({ styles.root, styles.box, styles[`${variant.replace(/^awsui-/, '')}-variant`], + accentColor && styles[`accent-${accentColor}`], marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]), paddingsClassNamesSuffices.map(suffix => styles[`p-${suffix}`]), styles[`d-${display}`], @@ -90,5 +92,9 @@ const getTag = (variant: BoxProps.Variant, tagOverride: BoxProps['tagOverride']) return 'code'; } + if (variant === 'awsui-accent') { + return 'span'; + } + return variant; }; diff --git a/src/box/style-box.scss b/src/box/style-box.scss new file mode 100644 index 0000000000..2350a8d66e --- /dev/null +++ b/src/box/style-box.scss @@ -0,0 +1,102 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../internal/styles/tokens' as awsui; +@use '../internal/styles/utils/theming' as theming; + +// ─── Base accent variant ───────────────────────────────────────────────────── +.accent-variant { + display: inline-flex; + padding-block: awsui.$space-xxs; + padding-inline: awsui.$space-xs; + border-start-start-radius: 2px; + border-start-end-radius: 2px; + border-end-start-radius: 2px; + border-end-end-radius: 2px; + color: inherit; +} + +// ─── Accent colors ────────────────────────────────────────────────────────────── + +.accent-red { + background-color: #fff5f5; + color: #db0000; + @include theming.dark-mode-only { + background-color: rgba(82, 0, 0, 0.8); + color: #ff7a7a; + } +} + +.accent-yellow { + background-color: #fffef0; + color: #f2b100; + @include theming.dark-mode-only { + background-color: rgba(87, 58, 0, 0.8); + color: #ffe347; + } +} + +.accent-indigo { + background-color: #f5f7ff; + color: #295eff; + @include theming.dark-mode-only { + background-color: rgba(0, 20, 117, 0.8); + color: #7598ff; + } +} + +.accent-green { + background-color: #effff1; + color: #00802f; + @include theming.dark-mode-only { + background-color: rgba(0, 51, 17, 0.8); + color: #00e500; + } +} + +.accent-orange { + background-color: #fff7f5; + color: #db3300; + @include theming.dark-mode-only { + background-color: rgba(71, 17, 0, 0.8); + color: #ff6a3d; + } +} + +.accent-purple { + background-color: #faf5ff; + color: #962eff; + @include theming.dark-mode-only { + background-color: rgba(48, 0, 97, 0.8); + color: #bf80ff; + } +} + +.accent-mint { + background-color: #ebfff6; + color: #008559; + @include theming.dark-mode-only { + background-color: rgba(0, 51, 34, 0.8); + color: #00e582; + } +} + +.accent-lime { + background-color: #f7ffeb; + color: #008a00; + @include theming.dark-mode-only { + background-color: rgba(0, 46, 0, 0.8); + color: #7ae500; + } +} + +.accent-grey { + background-color: #fcfcfc; + color: #6b6b6b; + @include theming.dark-mode-only { + background-color: rgba(21, 21, 21, 0.8); + color: #b7b7b7; + } +} diff --git a/src/box/styles.scss b/src/box/styles.scss index 02596c3049..9beaa46c4a 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 './style-box'; .root { @include styles.default-text-style; From 8f84eff27891b88031737010d5d49f72bbfa0935 Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 24 Jun 2026 12:47:24 +0200 Subject: [PATCH 2/2] chore: Update example page --- pages/box/style-box.page.tsx | 191 +++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 pages/box/style-box.page.tsx diff --git a/pages/box/style-box.page.tsx b/pages/box/style-box.page.tsx new file mode 100644 index 0000000000..613ce1b2bd --- /dev/null +++ b/pages/box/style-box.page.tsx @@ -0,0 +1,191 @@ +// 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 ButtonDropdown from '~components/button-dropdown'; +import CopyToClipboard from '~components/copy-to-clipboard'; +import Icon from '~components/icon'; +import KeyValuePairs from '~components/key-value-pairs'; +import Link from '~components/link'; +import List from '~components/list'; +import ProgressBar from '~components/progress-bar'; +import SpaceBetween from '~components/space-between'; +import StatusIndicator from '~components/status-indicator'; + +// ─── Data ────────────────────────────────────────────────────────────────────── + +const ALL_VARIANTS: BoxProps.AccentColor[] = [ + 'red', + 'yellow', + 'indigo', + 'green', + 'orange', + 'purple', + 'mint', + 'lime', + 'grey', +]; + +const BOX_VARIANTS: { variant: BoxProps['variant']; label: string; content: string }[] = [ + { variant: 'h3', label: 'h3', content: 'Heading 3' }, + { variant: 'h4', label: 'h4', content: 'Heading 4' }, + { variant: 'p', label: 'p', content: 'Body paragraph text' }, +]; + +const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.AccentColor }[] = [ + { 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 variant="awsui-accent" — Direction 4 + + + + Uses the existing Box component with a new awsui-accent variant and accentColor 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 + + + E1WG1ZNPRXT0D4 + + ), + info: ( + + Info + + ), + }, + { + label: 'ARN', + value: ( + + ), + }, + { + label: 'Status', + value: Available, + }, + { + label: 'SSL Certificate', + id: 'ssl-certificate-id', + value: ( + + ), + }, + { + label: 'Price class', + value: ( + + Use only US, Canada, Europe + + ), + }, + { + label: 'CNAMEs', + value: ( + + abc.service23G24.xyz + + ), + }, + ]} + /> + + + List + + ({ + id: item.id, + content: item.content, + icon: ( + + + + ), + actions: ( + + ), + })} + /> +
+ ); +}