diff --git a/pages/app/types/global.d.ts b/pages/app/types/global.d.ts index 43caf8a7eb..2b223095fb 100644 --- a/pages/app/types/global.d.ts +++ b/pages/app/types/global.d.ts @@ -5,6 +5,11 @@ declare module '*.scss' { export default styles; } +declare module '*.css.js' { + const styles: Record; + export default styles; +} + declare module '*.png' { const image: string; export default image; diff --git a/pages/link/variant-comparison.page.tsx b/pages/link/variant-comparison.page.tsx new file mode 100644 index 0000000000..c0f4dd2227 --- /dev/null +++ b/pages/link/variant-comparison.page.tsx @@ -0,0 +1,100 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import Link, { LinkProps } from '~components/link'; + +import styles from './styles.scss'; + +interface RowProps { + label: string; + variant: LinkProps['variant']; + href?: string; + color?: LinkProps['color']; +} + +function LinkCell({ variant, href, color }: Omit) { + const isInverted = color === 'inverted'; + return ( + +
+ + Link text + +
+ + ); +} + +const variants: Array<{ label: string; variant: LinkProps['variant'] }> = [ + { label: 'primary', variant: 'primary' }, + { label: 'secondary', variant: 'secondary' }, + { label: 'info', variant: 'info' }, +]; + +export default function LinkVariantComparison() { + return ( + <> + +

Link variant comparison

+

Focused view for evaluating primary, secondary and info variants — with/without href, normal and inverted.

+ + + + + + + + + + + + + {variants.map(({ label, variant }) => ( + + + + + + + + ))} + + + Custom link + + + + + Custom link + + + +
VariantWith href (normal)Without href (normal)With href (inverted)Without href (inverted)
{label}
+ + ); +} diff --git a/pages/style-box/simple.page.tsx b/pages/style-box/simple.page.tsx new file mode 100644 index 0000000000..0f53917063 --- /dev/null +++ b/pages/style-box/simple.page.tsx @@ -0,0 +1,194 @@ +// 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 { StyleBox, StyleBoxVariant } from '~components/internal/components/style-box'; +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'; + +const STYLE_VARIANTS: StyleBoxVariant[] = [ + 'red', + 'yellow', + 'indigo', + 'green', + 'orange', + 'purple', + 'mint', + 'lime', + 'grey', +]; + +// Representative icon per StyleBox variant — used in the shape="circle" showcase +const VARIANT_ICON: Record = { + red: 'status-negative', + yellow: 'status-warning', + indigo: 'status-info', + green: 'status-positive', + orange: 'notification', + purple: 'gen-ai', + mint: 'check', + lime: 'thumbs-up', + grey: 'settings', +}; + +// Box variants to showcase — each gets its own section +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; variant: StyleBoxVariant }[] = [ + { id: 'health', content: 'Health overview', icon: 'face-happy', variant: 'green' }, + { id: 'functions', content: 'Functions', icon: 'script', variant: 'indigo' }, + { id: 'network', content: 'Network configuration', icon: 'globe', variant: 'grey' }, + { id: 'multi-session', content: 'Multi-session data', icon: 'multiscreen', variant: 'purple' }, + { id: 'alert', content: 'Alert center', icon: 'security', variant: 'red' }, + { id: 'communication', content: 'Communication', icon: 'contact', variant: 'mint' }, +]; + +export default function StyleBoxPage() { + return ( +
+ + StyleBox — color variants × Box variants + + + {/* shape="sharp" — one section per Box variant */} + + shape="sharp" + + + {BOX_VARIANTS.map(({ variant, label, content }) => ( +
+ + Box variant="{label}" + + + {STYLE_VARIANTS.map(styleVariant => ( + + {content} + + ))} + +
+ ))} + + {/* shape="circle" — all style variants with icons */} + + shape="circle" + + + {STYLE_VARIANTS.map(styleVariant => ( + + + + ))} + + + {/* ── Application in components ─────────────────────────────────────── */} + + Application in components + + + {/* KeyValuePairs — StyleBox on Distribution ID and Price class values */} + + KeyValuePairs + + + E1WG1ZNPRXT0D4 + + ), + }, + { + 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 — StyleBox circle shape applied only to the icon slot */} + + List + + ({ + id: item.id, + content: item.content, + icon: ( + + + + ), + actions: ( + + ), + })} + /> +
+ ); +} diff --git a/src/internal/components/style-box/index.tsx b/src/internal/components/style-box/index.tsx new file mode 100644 index 0000000000..22cf4ff3b0 --- /dev/null +++ b/src/internal/components/style-box/index.tsx @@ -0,0 +1,117 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +/** + * @experimental This component is unstable and subject to change without a + * major version bump. It is available to selected builders only. + * Do not use it unless you have been explicitly invited to test it. + */ + +import React from 'react'; +import clsx from 'clsx'; + +import { getVisualContextClassname } from '../visual-context/index.js'; + +import styles from './styles.css.js'; + +export type StyleBoxVariant = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'mint' | 'lime' | 'grey'; + +/** + * Controls the shape (border-radius and geometry) of the StyleBox wrapper. + * + * - `"sharp"` — 2px, a barely-rounded square corner. This is the default. + * - `"circle"` — equal width and height with 50% border-radius, producing a perfect circle. + * Content is centered. + * + * @experimental + */ +export type StyleBoxShape = 'sharp' | 'circle'; + +export interface StyleBoxProps { + /** + * The color variant to apply to the wrapper. + * + * Each variant renders the same padding (unless `shape="circle"`). Background and content + * colors are drawn from the corresponding Cloudscape core color palette: + * + * | Variant | Light bg (`50`) | Dark bg (`950`@80%) | Text/icon (`600`/`200`) | + * |------------|-----------------|---------------------|-------------------------| + * | `red` | `colorRed50` | `colorRed950` | `colorRed600/200` | + * | `yellow` | `colorYellow50` | `colorYellow950` | `colorYellow600/200` | + * | `indigo` | `colorIndigo50` | `colorIndigo950` | `colorIndigo600/200` | + * | `green` | `colorGreen50` | `colorGreen950` | `colorGreen600/200` | + * | `orange` | `colorOrange50` | `colorOrange950` | `colorOrange600/200` | + * | `purple` | `colorPurple50` | `colorPurple950` | `colorPurple600/200` | + * | `mint` | `colorMint50` | `colorMint950` | `colorMint600/200` | + * | `lime` | `colorLime50` | `colorLime950` | `colorLime600/200` | + * | `grey` | `colorNeutralGrey100` | `colorNeutralGrey750` | `colorNeutralGrey800/100` | + * + * @experimental + */ + variant: StyleBoxVariant; + + /** + * Controls the shape of the wrapper. + * + * - `"sharp"` — 2px. This is the default. + * - `"circle"` — 50% border-radius with equal width/height. Content is centered. + * + * @experimental + */ + shape?: StyleBoxShape; + + /** + * The HTML element rendered as the wrapper. Defaults to `"div"`. + * Use a semantic element (e.g. `"section"`, `"aside"`) when the region + * has landmark meaning. + */ + as?: keyof JSX.IntrinsicElements; + + /** Additional class names to merge onto the wrapper element. */ + className?: string; + + children: React.ReactNode; +} + +const VARIANT_BACKGROUND_CLASS: Record = { + red: styles['variant-red'], + yellow: styles['variant-yellow'], + indigo: styles['variant-indigo'], + green: styles['variant-green'], + orange: styles['variant-orange'], + purple: styles['variant-purple'], + mint: styles['variant-mint'], + lime: styles['variant-lime'], + grey: styles['variant-grey'], +}; + +const SHAPE_CLASS: Record = { + sharp: styles['shape-sharp'], + circle: styles['shape-circle'], +}; + +/** + * StyleBox wraps content in a color-tinted container. Background, content text + * color, and shape are all controlled through props. + * + * Content colors are applied via the Cloudscape visual context pattern: each + * variant adds an `awsui-context-style-box-{variant}` class to the wrapper, + * which scopes the token overrides defined in + * `style-dictionary/one-theme/contexts/style-box-*.ts`. + * + * @experimental + */ +export function StyleBox({ variant, shape = 'sharp', as: Tag = 'div', className, children }: StyleBoxProps) { + return ( + + {children} + + ); +} diff --git a/src/internal/components/style-box/styles.scss b/src/internal/components/style-box/styles.scss new file mode 100644 index 0000000000..381b21ae3f --- /dev/null +++ b/src/internal/components/style-box/styles.scss @@ -0,0 +1,112 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../../styles/tokens' as awsui; + +/* + * StyleBox applies one of the predefined color-tinted style treatments to a wrapper element. + * + * Color styling is provided by the Cloudscape visual context pattern: + * - Each variant class sets the background-color via a semantic token + * (e.g. awsui.$color-background-style-box-red). + * - The corresponding awsui-context-style-box-{variant} class on the element + * activates token overrides defined in + * style-dictionary/one-theme/contexts/style-box-*.ts, which re-scope + * colorTextBodyDefault, colorTextHeadingDefault, colorTextIconSubtle, etc. + * under the context selector. No CSS custom property hash overrides are needed. + * + * Shape modifiers control border-radius and geometry: + * sharp → 2px corners + standard padding (default) + * circle → 50% radius, fixed square dimensions (perfect circle) + * + * Padding is NOT in %style-box-base so .shape-circle does not need to + * fight specificity to remove it. + * + * NOTE: This component is experimental. Do not rely on these class names or + * the specific values here remaining stable across releases. + */ + +// ─── Shared layout ──────────────────────────────────────────────────────────── + +%style-box-base { + display: inline-flex; +} + +// ─── Shape modifiers ────────────────────────────────────────────────────────── + +// sharp: 2px corners with compact padding +.shape-sharp { + padding-block: 0px; + padding-inline: awsui.$space-xxxs; + border-start-start-radius: 2px; + border-start-end-radius: 2px; + border-end-start-radius: 2px; + border-end-end-radius: 2px; +} + +// circle: fixed square dimensions regardless of content, fully rounded. +// Both inline-size and block-size are explicitly set to the same computed value +// so the circle is always perfectly square. Content is centered. +.shape-circle { + inline-size: calc(awsui.$space-scaled-xs * 2 + awsui.$size-icon-medium); + block-size: calc(awsui.$space-scaled-xs * 2 + awsui.$size-icon-medium); + align-items: center; + justify-content: center; + flex-shrink: 0; + border-start-start-radius: 50%; + border-start-end-radius: 50%; + border-end-start-radius: 50%; + border-end-end-radius: 50%; +} + +// ─── Variants ───────────────────────────────────────────────────────────────── +// Background color is set here via a semantic token. +// Content (text/icon) colors come from the visual context token overrides +// registered in style-dictionary/one-theme/contexts/style-box-*.ts. + +.variant-red { + @extend %style-box-base; + background-color: awsui.$color-background-style-box-red; +} + +.variant-yellow { + @extend %style-box-base; + background-color: awsui.$color-background-style-box-yellow; +} + +.variant-indigo { + @extend %style-box-base; + background-color: awsui.$color-background-style-box-indigo; +} + +.variant-green { + @extend %style-box-base; + background-color: awsui.$color-background-style-box-green; +} + +.variant-orange { + @extend %style-box-base; + background-color: awsui.$color-background-style-box-orange; +} + +.variant-purple { + @extend %style-box-base; + background-color: awsui.$color-background-style-box-purple; +} + +.variant-mint { + @extend %style-box-base; + background-color: awsui.$color-background-style-box-mint; +} + +.variant-lime { + @extend %style-box-base; + background-color: awsui.$color-background-style-box-lime; +} + +.variant-grey { + @extend %style-box-base; + background-color: awsui.$color-background-style-box-grey; +} diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts index a638123a38..2adbd2a4db 100644 --- a/style-dictionary/one-theme/colors.ts +++ b/style-dictionary/one-theme/colors.ts @@ -172,6 +172,20 @@ const tokens: StyleDictionary.ColorsDictionary = { // ── Code view ───────────────────────────────────────────────────────────── colorBackgroundCodeView: { light: '{colorNeutral200}', dark: '{colorNeutral700}' }, + + // ── StyleBox variant backgrounds ────────────────────────────────────────── + // Light: 50-level tint; Dark: 950-level shade at 80% opacity. + // Palette tokens (colorRedNNN etc.) are global scope and cannot be referenced + // in ColorsDictionary values, so literal hex values are used here. + colorBackgroundStyleBoxRed: { light: '#fff5f5', dark: 'rgba(82, 0, 0, 0.8)' }, + colorBackgroundStyleBoxYellow: { light: '#fffef0', dark: 'rgba(87, 58, 0, 0.8)' }, + colorBackgroundStyleBoxIndigo: { light: '#f5f7ff', dark: 'rgba(0, 20, 117, 0.8)' }, + colorBackgroundStyleBoxGreen: { light: '#effff1', dark: 'rgba(0, 51, 17, 0.8)' }, + colorBackgroundStyleBoxOrange: { light: '#fff7f5', dark: 'rgba(71, 17, 0, 0.8)' }, + colorBackgroundStyleBoxPurple: { light: '#faf5ff', dark: 'rgba(48, 0, 97, 0.8)' }, + colorBackgroundStyleBoxMint: { light: '#ebfff6', dark: 'rgba(0, 51, 34, 0.8)' }, + colorBackgroundStyleBoxLime: { light: '#f7ffeb', dark: 'rgba(0, 46, 0, 0.8)' }, + colorBackgroundStyleBoxGrey: { light: '#f9f9f9', dark: 'rgba(45, 45, 45, 0.8)' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge( diff --git a/style-dictionary/one-theme/contexts/style-box.ts b/style-dictionary/one-theme/contexts/style-box.ts new file mode 100644 index 0000000000..91422ec279 --- /dev/null +++ b/style-dictionary/one-theme/contexts/style-box.ts @@ -0,0 +1,47 @@ +// 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'; + +// Content color tokens overridden by each StyleBox variant context. +// The context selector (.awsui-context-style-box-{variant}) is registered in +// style-dictionary/utils/contexts.ts and activated by StyleBox/index.tsx via +// getVisualContextClassname(). The token build pipeline scopes these overrides +// under the selector automatically — no CSS custom property hash strings needed. +// +// Affected tokens (same set for every variant): +// colorTextBodyDefault, colorTextHeadingDefault, colorTextBodySecondary, +// colorTextHeadingSecondary, colorTextIconSubtle, colorTextSmall +// +// Palette tokens (colorRedNNN etc.) are ColorPaletteTokenName (global scope) and +// cannot be used as references inside ColorsDictionary values. Literal hex values +// from style-dictionary/core/color-palette.ts are used instead. +// +// Light: 600-level palette value | Dark: 200-level palette value +// Exception — grey uses colorNeutralGrey: +// Light: colorNeutralGrey800 (#242424) | Dark: colorNeutralGrey100 (#f9f9f9) + +function makeTokens(light: string, dark: string): StyleDictionary.ExpandedColorScopeDictionary { + const tokens: StyleDictionary.ColorsDictionary = { + colorTextBodyDefault: { light, dark }, + colorTextHeadingDefault: { light, dark }, + colorTextBodySecondary: { light, dark }, + colorTextHeadingSecondary: { light, dark }, + colorTextIconSubtle: { light, dark }, + colorTextSmall: { light, dark }, + }; + return expandColorDictionary(merge({}, tokens)); +} + +// Values sourced from style-dictionary/core/color-palette.ts +export const redTokens = makeTokens('#db0000', '#ffc2c2'); +export const yellowTokens = makeTokens('#f2b100', '#fef571'); +export const indigoTokens = makeTokens('#295eff', '#c2d1ff'); +export const greenTokens = makeTokens('#00802f', '#aeffa8'); +export const orangeTokens = makeTokens('#db3300', '#ffc0ad'); +export const purpleTokens = makeTokens('#962eff', '#e8d1ff'); +export const mintTokens = makeTokens('#008559', '#8fffce'); +export const limeTokens = makeTokens('#008a00', '#d1ff8a'); +export const greyTokens = makeTokens('#242424', '#f9f9f9'); diff --git a/style-dictionary/one-theme/index.ts b/style-dictionary/one-theme/index.ts index 383a6127cb..6bd1dc327b 100644 --- a/style-dictionary/one-theme/index.ts +++ b/style-dictionary/one-theme/index.ts @@ -13,6 +13,15 @@ import { createFlashbarWarningContext, createHeaderAlertContext, createHeaderContext, + createStyleBoxGreenContext, + createStyleBoxGreyContext, + createStyleBoxIndigoContext, + createStyleBoxLimeContext, + createStyleBoxMintContext, + createStyleBoxOrangeContext, + createStyleBoxPurpleContext, + createStyleBoxRedContext, + createStyleBoxYellowContext, createTopNavigationContext, } from '../utils/contexts.js'; import { StyleDictionary } from '../utils/interfaces.js'; @@ -56,5 +65,16 @@ builder.addContext(createFlashbarContext((await import('./contexts/flashbar.js') builder.addContext(createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens)); builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens)); +const styleBoxContexts = await import('./contexts/style-box.js'); +builder.addContext(createStyleBoxRedContext(styleBoxContexts.redTokens)); +builder.addContext(createStyleBoxYellowContext(styleBoxContexts.yellowTokens)); +builder.addContext(createStyleBoxIndigoContext(styleBoxContexts.indigoTokens)); +builder.addContext(createStyleBoxGreenContext(styleBoxContexts.greenTokens)); +builder.addContext(createStyleBoxOrangeContext(styleBoxContexts.orangeTokens)); +builder.addContext(createStyleBoxPurpleContext(styleBoxContexts.purpleTokens)); +builder.addContext(createStyleBoxMintContext(styleBoxContexts.mintTokens)); +builder.addContext(createStyleBoxLimeContext(styleBoxContexts.limeTokens)); +builder.addContext(createStyleBoxGreyContext(styleBoxContexts.greyTokens)); + const theme = builder.build(); export default theme; diff --git a/style-dictionary/utils/contexts.ts b/style-dictionary/utils/contexts.ts index 5cdb143be2..0e70214fc6 100644 --- a/style-dictionary/utils/contexts.ts +++ b/style-dictionary/utils/contexts.ts @@ -75,3 +75,39 @@ export const createAppLayoutToolbarContext = (tokens: TokenCategory) => { + return { id: 'style-box-red', selector: '.awsui-context-style-box-red', tokens }; +}; + +export const createStyleBoxYellowContext = (tokens: TokenCategory) => { + return { id: 'style-box-yellow', selector: '.awsui-context-style-box-yellow', tokens }; +}; + +export const createStyleBoxIndigoContext = (tokens: TokenCategory) => { + return { id: 'style-box-indigo', selector: '.awsui-context-style-box-indigo', tokens }; +}; + +export const createStyleBoxGreenContext = (tokens: TokenCategory) => { + return { id: 'style-box-green', selector: '.awsui-context-style-box-green', tokens }; +}; + +export const createStyleBoxOrangeContext = (tokens: TokenCategory) => { + return { id: 'style-box-orange', selector: '.awsui-context-style-box-orange', tokens }; +}; + +export const createStyleBoxPurpleContext = (tokens: TokenCategory) => { + return { id: 'style-box-purple', selector: '.awsui-context-style-box-purple', tokens }; +}; + +export const createStyleBoxMintContext = (tokens: TokenCategory) => { + return { id: 'style-box-mint', selector: '.awsui-context-style-box-mint', tokens }; +}; + +export const createStyleBoxLimeContext = (tokens: TokenCategory) => { + return { id: 'style-box-lime', selector: '.awsui-context-style-box-lime', tokens }; +}; + +export const createStyleBoxGreyContext = (tokens: TokenCategory) => { + return { id: 'style-box-grey', selector: '.awsui-context-style-box-grey', tokens }; +}; diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index ad1c766d40..f8706bcbfd 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -871,7 +871,16 @@ export type ColorsTokenName = | 'colorTextBadgeBlue' | 'colorTextBadgeRed' | 'colorBorderBadge' - | 'colorBackgroundCodeView'; + | 'colorBackgroundCodeView' + | 'colorBackgroundStyleBoxRed' + | 'colorBackgroundStyleBoxYellow' + | 'colorBackgroundStyleBoxIndigo' + | 'colorBackgroundStyleBoxGreen' + | 'colorBackgroundStyleBoxOrange' + | 'colorBackgroundStyleBoxPurple' + | 'colorBackgroundStyleBoxMint' + | 'colorBackgroundStyleBoxLime' + | 'colorBackgroundStyleBoxGrey'; export type TypographyTokenName = | 'fontBoxValueLargeWeight' | 'fontButtonLetterSpacing' diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index 0da380b1d5..ff5fe435d9 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -355,6 +355,19 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextBadgeBlue: '{colorTextNotificationDefault}', colorTextBadgeRed: '{colorTextNotificationDefault}', colorBackgroundCodeView: { light: '#f8f8f8', dark: '#282c34' }, + + // StyleBox variant backgrounds — defined here so the SCSS variable is always available. + // One Theme overrides these with palette token references in one-theme/colors.ts. + // Visual Refresh has no StyleBox component; these are effectively no-ops outside one-theme. + colorBackgroundStyleBoxRed: 'transparent', + colorBackgroundStyleBoxYellow: 'transparent', + colorBackgroundStyleBoxIndigo: 'transparent', + colorBackgroundStyleBoxGreen: 'transparent', + colorBackgroundStyleBoxOrange: 'transparent', + colorBackgroundStyleBoxPurple: 'transparent', + colorBackgroundStyleBoxMint: 'transparent', + colorBackgroundStyleBoxLime: 'transparent', + colorBackgroundStyleBoxGrey: 'transparent', }; 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 02f8aa13f8..39771a0e5a 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -1205,6 +1205,15 @@ const metadata: StyleDictionary.MetadataIndex = { themeable: true, public: true, }, + colorBackgroundStyleBoxRed: { description: 'StyleBox red variant background (One Theme only).', public: false }, + colorBackgroundStyleBoxYellow: { description: 'StyleBox yellow variant background (One Theme only).', public: false }, + colorBackgroundStyleBoxIndigo: { description: 'StyleBox indigo variant background (One Theme only).', public: false }, + colorBackgroundStyleBoxGreen: { description: 'StyleBox green variant background (One Theme only).', public: false }, + colorBackgroundStyleBoxOrange: { description: 'StyleBox orange variant background (One Theme only).', public: false }, + colorBackgroundStyleBoxPurple: { description: 'StyleBox purple variant background (One Theme only).', public: false }, + colorBackgroundStyleBoxMint: { description: 'StyleBox mint variant background (One Theme only).', public: false }, + colorBackgroundStyleBoxLime: { description: 'StyleBox lime variant background (One Theme only).', public: false }, + colorBackgroundStyleBoxGrey: { description: 'StyleBox grey variant background (One Theme only).', public: false }, }; export default metadata;