From f0bd68d2b3566efff6d214f863a3dbe4f1481957 Mon Sep 17 00:00:00 2001 From: at-susie Date: Fri, 26 Jun 2026 13:30:49 +0200 Subject: [PATCH 1/8] chore: Add theme-aware icon sizing and wayfinding link weight token --- src/popover/body.tsx | 3 ++- style-dictionary/one-theme/typography.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/popover/body.tsx b/src/popover/body.tsx index 43295e5ac1..8bca2d3cf1 100644 --- a/src/popover/body.tsx +++ b/src/popover/body.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useRef } from 'react'; import clsx from 'clsx'; -import { useUniqueId } from '@cloudscape-design/component-toolkit/internal'; +import { isThemeActive, Theme, useUniqueId } from '@cloudscape-design/component-toolkit/internal'; import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata'; import { ButtonProps } from '../button/interfaces'; @@ -85,6 +85,7 @@ const PopoverBody = React.forwardRef( variant="icon" formAction="none" iconName="close" + __iconSize={isThemeActive(Theme.OneTheme) ? 'x-small' : undefined} className={styles['dismiss-control']} ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)} onClick={() => onDismiss?.('close-button')} diff --git a/style-dictionary/one-theme/typography.ts b/style-dictionary/one-theme/typography.ts index da6d7b0e76..1bae70f86e 100644 --- a/style-dictionary/one-theme/typography.ts +++ b/style-dictionary/one-theme/typography.ts @@ -35,6 +35,7 @@ const tokens: StyleDictionary.TypographyDictionary = { fontWeightButton: '500', fontWeightTabs: '500', fontSizeTabs: '14px', + fontWayfindingLinkActiveWeight: '500', // ── Alerts / flashbars ──────────────────────────────────────────────────── fontWeightAlertHeader: '500', From 1abc7ebf6d70e3695ef86a218f00d209207e3de1 Mon Sep 17 00:00:00 2001 From: at-susie Date: Fri, 26 Jun 2026 18:55:44 +0200 Subject: [PATCH 2/8] chore: Update flashbar style for one theme to be same as alert --- src/button/constants.scss | 6 +-- src/flashbar/styles.scss | 29 ++++++++++-- style-dictionary/one-theme/borders.ts | 1 + style-dictionary/one-theme/colors.ts | 6 +++ style-dictionary/one-theme/contexts/alert.ts | 15 +++++-- .../one-theme/contexts/flashbar-warning.ts | 44 +++++++++---------- .../one-theme/contexts/flashbar.ts | 44 ++++++++----------- style-dictionary/utils/token-names.ts | 5 +++ style-dictionary/visual-refresh/borders.ts | 1 + style-dictionary/visual-refresh/colors.ts | 4 ++ .../contexts/flashbar-warning.ts | 12 +++-- .../visual-refresh/contexts/flashbar.ts | 12 +++++ .../visual-refresh/metadata/borders.ts | 5 +++ .../visual-refresh/metadata/colors.ts | 20 +++++++++ 14 files changed, 142 insertions(+), 62 deletions(-) diff --git a/src/button/constants.scss b/src/button/constants.scss index 9ae71e6ead..1dbbca58bd 100644 --- a/src/button/constants.scss +++ b/src/button/constants.scss @@ -125,13 +125,13 @@ $variants: ( 'flashbar-icon': ( 'default-background': transparent, 'default-border-color': transparent, - 'default-color': awsui.$color-text-interactive-inverted-default, + 'default-color': awsui.$color-text-interactive-default, 'hover-background': transparent, 'hover-border-color': transparent, - 'hover-color': awsui.$color-text-interactive-inverted-hover, + 'hover-color': awsui.$color-text-interactive-hover, 'active-background': transparent, 'active-border-color': transparent, - 'active-color': awsui.$color-text-interactive-inverted-default, + 'active-color': awsui.$color-text-interactive-default, 'disabled-background': transparent, 'disabled-border-color': transparent, 'disabled-color': awsui.$color-text-interactive-disabled, diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss index d93b760a31..4f21d78443 100644 --- a/src/flashbar/styles.scss +++ b/src/flashbar/styles.scss @@ -36,6 +36,7 @@ border-start-end-radius: awsui.$border-radius-flashbar; border-end-start-radius: awsui.$border-radius-flashbar; border-end-end-radius: awsui.$border-radius-flashbar; + border-inline-start: awsui.$border-width-flashbar-inline-start solid transparent; color: awsui.$color-text-notification-default; overflow-wrap: break-word; word-wrap: break-word; @@ -146,19 +147,39 @@ } .flash-type-success { - background-color: awsui.$color-background-notification-green; + background-color: awsui.$color-background-flashbar-success; + border-inline-start-color: awsui.$color-border-status-success; + + > .flash-body > .flash-focus-container > .flash-icon { + color: awsui.$color-text-status-success; + } } .flash-type-error { - background-color: awsui.$color-background-notification-red; + background-color: awsui.$color-background-flashbar-error; + border-inline-start-color: awsui.$color-border-status-error; + + > .flash-body > .flash-focus-container > .flash-icon { + color: awsui.$color-text-status-error; + } } .flash-type-info, .flash-type-in-progress { - background-color: awsui.$color-background-notification-blue; + background-color: awsui.$color-background-flashbar-info; + border-inline-start-color: awsui.$color-border-status-info; + + > .flash-body > .flash-focus-container > .flash-icon { + color: awsui.$color-text-status-info; + } } .flash-type-warning { color: awsui.$color-text-notification-yellow; - background-color: awsui.$color-background-notification-yellow; + background-color: awsui.$color-background-flashbar-warning; + border-inline-start-color: awsui.$color-border-status-warning; + + > .flash-body > .flash-focus-container > .flash-icon { + color: awsui.$color-text-status-warning; + } } diff --git a/style-dictionary/one-theme/borders.ts b/style-dictionary/one-theme/borders.ts index 33a3e1dd6c..52153c5fc2 100644 --- a/style-dictionary/one-theme/borders.ts +++ b/style-dictionary/one-theme/borders.ts @@ -14,6 +14,7 @@ const tokens: StyleDictionary.BordersDictionary = { borderWidthDropdown: '1px', borderWidthPopover: '1px', borderWidthAlertInlineStart: '2px', + borderWidthFlashbarInlineStart: '2px', borderWidthItemSelected: '1px', borderWidthCardSelected: '1px', diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts index e95130f580..1a67512478 100644 --- a/style-dictionary/one-theme/colors.ts +++ b/style-dictionary/one-theme/colors.ts @@ -130,6 +130,12 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundNotificationYellow: { light: '{colorWarning400}', dark: '{colorWarning900}' }, colorTextNotificationDefault: { light: '{colorNeutral100}', dark: '{colorNeutral100}' }, + // ── Flashbar (one-theme: subtle alert-style backgrounds) ─────────────────── + colorBackgroundFlashbarSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, + colorBackgroundFlashbarError: { light: '{colorError100}', dark: '{colorError950}' }, + colorBackgroundFlashbarInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, + colorBackgroundFlashbarWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, + // ── Status text ─────────────────────────────────────────────────────────── colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo300}' }, colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess200}' }, diff --git a/style-dictionary/one-theme/contexts/alert.ts b/style-dictionary/one-theme/contexts/alert.ts index 5d2891d845..567242c0e2 100644 --- a/style-dictionary/one-theme/contexts/alert.ts +++ b/style-dictionary/one-theme/contexts/alert.ts @@ -6,16 +6,23 @@ import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; const tokens: StyleDictionary.ColorsDictionary = { - colorBackgroundStatusInfo: { light: '{colorInfo50}', dark: '#161a2d' }, - colorBackgroundStatusWarning: { light: '{colorWarning50}', dark: '#191100' }, - colorBackgroundStatusError: { light: '{colorError50}', dark: '#1f0000' }, - colorBackgroundStatusSuccess: { light: '{colorSuccess50}', dark: '#001401' }, + colorBackgroundStatusInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, + colorBackgroundStatusWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, + colorBackgroundStatusError: { light: '{colorError100}', dark: '{colorError950}' }, + colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, + colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, + colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.1)', + colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.2)', colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, + + // Expandable section divider fails contrast on the dark-mode background, so + // bump it two steps lighter in dark mode only (light mode unchanged). + colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); diff --git a/style-dictionary/one-theme/contexts/flashbar-warning.ts b/style-dictionary/one-theme/contexts/flashbar-warning.ts index 54e530d1ba..3f775b9a97 100644 --- a/style-dictionary/one-theme/contexts/flashbar-warning.ts +++ b/style-dictionary/one-theme/contexts/flashbar-warning.ts @@ -5,31 +5,29 @@ import merge from 'lodash/merge.js'; import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; +// Warning flashes render in their own context. Mirror the alert treatment so a +// warning flash matches an alert: light warning background (set via +// colorBackgroundFlashbarWarning in colors.ts) with dark body text and a +// transparent normal button. const tokens: StyleDictionary.ColorsDictionary = { - colorTextNotificationYellow: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorTextNotificationDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorTextInteractiveInvertedDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorBorderDividerDefault: '{colorNeutral900}', - - // Button - colorBorderButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorWhite}' }, - colorBorderButtonNormalHover: { light: '{colorNeutral800}', dark: '{colorWhite}' }, - colorBorderButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorWhite}' }, - + colorBackgroundStatusInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, + colorBackgroundStatusWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, + colorBackgroundStatusError: { light: '{colorError100}', dark: '{colorError950}' }, + colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, + + colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, + colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, + colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, + colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, - colorBackgroundButtonNormalHover: { light: 'rgba(0, 7, 22, 0.08)', dark: 'rgba(255, 255, 255, 0.06)' }, - colorBackgroundButtonNormalActive: { light: 'rgba(0, 7, 22, 0.1)', dark: 'rgba(255, 255, 255, 0.1)' }, - - colorTextButtonNormalDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorTextButtonNormalHover: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorTextButtonNormalActive: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - - // Expandable section - colorTextExpandableSectionDefault: { light: '{colorNeutral900}', dark: '{colorNeutral100}' }, - colorTextExpandableSectionHover: { light: '{colorNeutral1000}', dark: '{colorWhite}' }, - colorTextHeadingSecondary: { light: '{colorNeutral700}', dark: '{colorNeutral100}' }, - colorBorderExpandableSectionDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorTextBodyDefault: { light: '{colorNeutral700}', dark: '{colorNeutral100}' }, + colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.1)', + colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.2)', + colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, + + colorTextNotificationYellow: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, + colorTextNotificationDefault: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, + colorTextHeadingSecondary: { light: '{colorNeutral650}', dark: '{colorNeutral400}' }, + colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts index 3a0f6e6c75..687f71d495 100644 --- a/style-dictionary/one-theme/contexts/flashbar.ts +++ b/style-dictionary/one-theme/contexts/flashbar.ts @@ -5,36 +5,30 @@ import merge from 'lodash/merge.js'; import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; +// One-theme flashbar adopts the same subtle treatment as the alert component: +// light status backgrounds (set via colorBackgroundFlashbar* in colors.ts) with +// dark body text, status-colored accents, and transparent normal buttons. +// These overrides mirror the alert context (contexts/alert.ts). const tokens: StyleDictionary.ColorsDictionary = { - colorTextButtonNormalDefault: '{colorNeutral100}', - colorBorderButtonNormalDefault: '{colorNeutral100}', - colorBackgroundButtonNormalDefault: 'transparent', - colorTextButtonNormalHover: '{colorWhite}', - colorBorderButtonNormalHover: '{colorWhite}', - colorBackgroundButtonNormalHover: 'rgba(0, 7, 22, 0.15)', - colorTextButtonNormalActive: '{colorWhite}', - colorBorderButtonNormalActive: '{colorWhite}', - colorBackgroundButtonNormalActive: 'rgba(0, 7, 22, 0.2)', - colorBorderItemFocused: '{colorNeutral100}', - colorTextExpandableSectionDefault: '{colorNeutral100}', - colorTextExpandableSectionHover: '{colorWhite}', - colorTextBodyDefault: '{colorNeutral100}', - colorTextBodySecondary: '{colorNeutral100}', - colorTextHeadingSecondary: '{colorNeutral100}', - colorBorderDividerDefault: '{colorNeutral100}', - colorTextTutorialHotspotDefault: '{colorNeutral300}', - colorTextTutorialHotspotHover: '{colorNeutral100}', - colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)', - // Key-value pairs - colorTextLabel: '{colorNeutral100}', + colorBackgroundStatusInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, + colorBackgroundStatusWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, + colorBackgroundStatusError: { light: '{colorError100}', dark: '{colorError950}' }, + colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, - // Info links - colorTextLinkDefault: '{colorNeutral100}', - colorTextLinkHover: '{colorWhite}', + colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, + colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, + colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, + colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, + colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, + colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.05)', + colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.07)', + colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, + colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, + colorTextNotificationDefault: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, // Progress Bar colorBackgroundProgressBarValueDefault: '{colorWhite}', - colorBackgroundProgressBarDefault: '{colorGreyOpaque25}', + colorBackgroundProgressBarDefault: '{colorGreyOpaque10}', }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index a7e65153ab..242694da43 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -597,6 +597,10 @@ export type ColorsTokenName = | 'colorBackgroundModalOverlay' | 'colorBackgroundNotificationBlue' | 'colorBackgroundNotificationGreen' + | 'colorBackgroundFlashbarSuccess' + | 'colorBackgroundFlashbarError' + | 'colorBackgroundFlashbarInfo' + | 'colorBackgroundFlashbarWarning' | 'colorBackgroundNotificationGrey' | 'colorBackgroundNotificationRed' | 'colorBackgroundNotificationYellow' @@ -993,6 +997,7 @@ export type BordersTokenName = | 'borderWidthAlertBlockStart' | 'borderWidthAlertBlockEnd' | 'borderWidthAlertInlineStart' + | 'borderWidthFlashbarInlineStart' | 'borderWidthAlertInlineEnd' | 'borderWidthCard' | 'borderWidthCardSelected' diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts index 3544f174fa..1695d0848b 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -59,6 +59,7 @@ export const tokens: StyleDictionary.BordersDictionary = { borderWidthAlertBlockStart: '{borderWidthAlert}', borderWidthAlertInlineEnd: '{borderWidthAlert}', borderWidthAlertInlineStart: '{borderWidthAlert}', + borderWidthFlashbarInlineStart: '0px', borderWidthButton: '2px', borderWidthCard: '{borderDividerSectionWidth}', borderWidthCardSelected: '{borderItemWidth}', diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index f8758c8bb5..a9b15e7a16 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -83,6 +83,10 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundNotificationGrey: { light: '{colorNeutral650}', dark: '{colorNeutral600}' }, colorBackgroundNotificationRed: '{colorError600}', colorBackgroundNotificationYellow: '{colorWarning400}', + colorBackgroundFlashbarSuccess: '{colorBackgroundNotificationGreen}', + colorBackgroundFlashbarError: '{colorBackgroundNotificationRed}', + colorBackgroundFlashbarInfo: '{colorBackgroundNotificationBlue}', + colorBackgroundFlashbarWarning: '{colorBackgroundNotificationYellow}', colorBackgroundNotificationStackBar: '{colorNeutral750}', colorBackgroundNotificationStackBarActive: '{colorNeutral750}', colorBackgroundNotificationStackBarHover: '{colorNeutral650}', diff --git a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts index 5fac6a6e01..822977e9fe 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts @@ -16,9 +16,15 @@ const baseTokens: StyleDictionary.ColorsDictionary = { // Focus outline matches the text color to align with other flashbar types and to ensure color contrast. colorBorderItemFocused: '{colorTextNotificationYellow}', - // Dismiss button - colorTextInteractiveInvertedDefault: '{colorNeutral650}', - colorTextInteractiveInvertedHover: '{colorNeutral950}', + // Status icon color: flashbar now drives its status icon color from + // colorTextStatus*. Classic/visual refresh keep the legacy warning icon color + // (matching the surrounding text); only one-theme opts into the status color. + colorTextStatusWarning: '{colorTextNotificationYellow}', + + // Dismiss button (flashbar-icon variant) now reads colorTextInteractive*. + // The warning flash is light in both modes, so pin to dark values for contrast. + colorTextInteractiveDefault: '{colorNeutral650}', + colorTextInteractiveHover: '{colorNeutral950}', // Progress bars colorBackgroundProgressBarValueDefault: '{colorNeutral950}', diff --git a/style-dictionary/visual-refresh/contexts/flashbar.ts b/style-dictionary/visual-refresh/contexts/flashbar.ts index 6d5a88c2dd..92b02d5cfb 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar.ts @@ -18,6 +18,11 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = { colorBorderButtonNormalActive: '{colorWhite}', colorBackgroundButtonNormalActive: 'rgba(0, 7, 22, 0.2)', colorBorderItemFocused: '{colorNeutral100}', + // The flashbar-icon (dismiss) button reads colorTextInteractive*. On the + // saturated classic/visual-refresh backgrounds, keep it inverted so the icon + // stays legible (one-theme uses the regular non-inverted values). + colorTextInteractiveDefault: '{colorTextInteractiveInvertedDefault}', + colorTextInteractiveHover: '{colorTextInteractiveInvertedHover}', colorTextExpandableSectionDefault: '{colorNeutral100}', colorTextExpandableSectionHover: '{colorWhite}', colorTextBodyDefault: '{colorNeutral100}', @@ -27,6 +32,13 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = { colorTextTutorialHotspotDefault: '{colorNeutral300}', colorTextTutorialHotspotHover: '{colorNeutral100}', colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)', + // Status icon colors: flashbar now drives its status icon color from + // colorTextStatus*, but classic/visual refresh keep the legacy uniform icon + // color (matching the surrounding notification text on the saturated + // background). Only one-theme opts into per-status icon colors. + colorTextStatusSuccess: '{colorTextNotificationDefault}', + colorTextStatusError: '{colorTextNotificationDefault}', + colorTextStatusInfo: '{colorTextNotificationDefault}', // Key-value pairs colorTextLabel: '{colorNeutral100}', diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts index a26ee2a01b..34e9a24da8 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -144,6 +144,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + borderWidthFlashbarInlineStart: { + description: 'The inline-start border width of flash messages in flashbars.', + public: true, + themeable: true, + }, borderWidthAlertInlineEnd: { description: 'The inline-end border width of alerts.', public: true, diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index c52b6282a1..db718e1b58 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -246,6 +246,26 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorBackgroundFlashbarSuccess: { + description: 'The background color of success flash messages.', + public: true, + themeable: true, + }, + colorBackgroundFlashbarError: { + description: 'The background color of error flash messages.', + public: true, + themeable: true, + }, + colorBackgroundFlashbarInfo: { + description: 'The background color of info and in-progress flash messages.', + public: true, + themeable: true, + }, + colorBackgroundFlashbarWarning: { + description: 'The background color of warning flash messages.', + public: true, + themeable: true, + }, colorBackgroundNotificationGrey: { description: 'Background color for grey notifications. For example: grey badges.', public: true, From e63ce77308531ac94597fc03d693b1a31893eb3d Mon Sep 17 00:00:00 2001 From: at-susie Date: Mon, 29 Jun 2026 06:42:51 +0200 Subject: [PATCH 3/8] chore: Update progress bar background color in flashbar --- style-dictionary/one-theme/contexts/flashbar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts index 687f71d495..93a6926c45 100644 --- a/style-dictionary/one-theme/contexts/flashbar.ts +++ b/style-dictionary/one-theme/contexts/flashbar.ts @@ -28,7 +28,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextNotificationDefault: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, // Progress Bar colorBackgroundProgressBarValueDefault: '{colorWhite}', - colorBackgroundProgressBarDefault: '{colorGreyOpaque10}', + colorBackgroundProgressBarDefault: '{colorGreyOpaque25}', }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); From bccc2c94a3f8a8ec8ddf832098297c0153274745 Mon Sep 17 00:00:00 2001 From: at-susie Date: Mon, 29 Jun 2026 07:22:19 +0200 Subject: [PATCH 4/8] chore: Refine progress bar color in flashbar context --- style-dictionary/one-theme/contexts/flashbar.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts index 93a6926c45..ac5fc985d1 100644 --- a/style-dictionary/one-theme/contexts/flashbar.ts +++ b/style-dictionary/one-theme/contexts/flashbar.ts @@ -27,8 +27,8 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, colorTextNotificationDefault: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, // Progress Bar - colorBackgroundProgressBarValueDefault: '{colorWhite}', - colorBackgroundProgressBarDefault: '{colorGreyOpaque25}', + colorBackgroundProgressBarValueDefault: { light: '{colorNeutral800}', dark: '{colorWhite}' }, + colorBackgroundProgressBarDefault: { light: '{colorGreyOpaque10}', dark: '{colorGreyOpaque25}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); From f76ada08dd7c3629304e332bc0eb1e27826f6b7a Mon Sep 17 00:00:00 2001 From: at-susie Date: Mon, 29 Jun 2026 09:26:30 +0200 Subject: [PATCH 5/8] chore: Update snapshots --- .../__snapshots__/themes.test.ts.snap | 40 ++ .../__snapshots__/design-tokens.test.ts.snap | 588 ++++++++++++++++-- 2 files changed, 590 insertions(+), 38 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index ca1310c70a..b0543791be 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -65,6 +65,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-width-card-selected": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", + "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -125,6 +126,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-dropdown-item-filter-match": "#f1faff", "color-background-dropdown-item-hover": "#f2f3f3", "color-background-dropdown-item-selected": "#f1faff", + "color-background-flashbar-error": "#d13212", + "color-background-flashbar-info": "#0073bb", + "color-background-flashbar-success": "#1d8102", + "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#000000", "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", @@ -973,6 +978,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-width-card-selected": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", + "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -1033,6 +1039,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-dropdown-item-filter-match": "#12293b", "color-background-dropdown-item-hover": "#414750", "color-background-dropdown-item-selected": "#12293b", + "color-background-flashbar-error": "#d13212", + "color-background-flashbar-info": "#0073bb", + "color-background-flashbar-success": "#1d8102", + "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#000000", "color-background-inline-code": "rgba(255, 255, 255, 0.1)", "color-background-input-default": "#1a2029", @@ -1881,6 +1891,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-width-card-selected": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", + "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -1941,6 +1952,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-dropdown-item-filter-match": "#f1faff", "color-background-dropdown-item-hover": "#f2f3f3", "color-background-dropdown-item-selected": "#f1faff", + "color-background-flashbar-error": "#d13212", + "color-background-flashbar-info": "#0073bb", + "color-background-flashbar-success": "#1d8102", + "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#000000", "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", @@ -2789,6 +2804,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-width-card-selected": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", + "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -2849,6 +2865,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-dropdown-item-filter-match": "#f1faff", "color-background-dropdown-item-hover": "#f2f3f3", "color-background-dropdown-item-selected": "#f1faff", + "color-background-flashbar-error": "#d13212", + "color-background-flashbar-info": "#0073bb", + "color-background-flashbar-success": "#1d8102", + "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#000000", "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", @@ -3697,6 +3717,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-width-card-selected": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", + "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -3757,6 +3778,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-dropdown-item-filter-match": "#f0fbff", "color-background-dropdown-item-hover": "#f3f3f7", "color-background-dropdown-item-selected": "#f0fbff", + "color-background-flashbar-error": "#db0000", + "color-background-flashbar-info": "#006ce0", + "color-background-flashbar-success": "#00802f", + "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#0f141a", "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", @@ -4605,6 +4630,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-card-selected": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", + "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -4665,6 +4691,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-dropdown-item-filter-match": "#f0fbff", "color-background-dropdown-item-hover": "#f3f3f7", "color-background-dropdown-item-selected": "#f0fbff", + "color-background-flashbar-error": "#db0000", + "color-background-flashbar-info": "#006ce0", + "color-background-flashbar-success": "#00802f", + "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#0f141a", "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", @@ -5513,6 +5543,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-card-selected": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", + "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -5573,6 +5604,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-dropdown-item-filter-match": "#333843", "color-background-dropdown-item-hover": "#131920", "color-background-dropdown-item-selected": "#001129", + "color-background-flashbar-error": "#db0000", + "color-background-flashbar-info": "#006ce0", + "color-background-flashbar-success": "#00802f", + "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#0f141a", "color-background-inline-code": "rgba(255, 255, 255, 0.1)", "color-background-input-default": "#0f141a", @@ -6421,6 +6456,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-card-selected": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", + "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -6481,6 +6517,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-dropdown-item-filter-match": "#333843", "color-background-dropdown-item-hover": "#131920", "color-background-dropdown-item-selected": "#001129", + "color-background-flashbar-error": "#db0000", + "color-background-flashbar-info": "#006ce0", + "color-background-flashbar-success": "#00802f", + "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#0f141a", "color-background-inline-code": "rgba(255, 255, 255, 0.1)", "color-background-input-default": "#161d26", diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 2738dde8d5..42f79b7a99 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -157,6 +157,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -438,6 +442,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#d13212", + "light": "#d13212", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#0073bb", + "light": "#0073bb", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#1d8102", + "light": "#1d8102", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -3664,6 +3696,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -3945,6 +3981,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#d13212", + "light": "#d13212", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#0073bb", + "light": "#0073bb", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#1d8102", + "light": "#1d8102", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -7171,6 +7235,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -7452,6 +7520,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#d13212", + "light": "#d13212", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#0073bb", + "light": "#0073bb", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#1d8102", + "light": "#1d8102", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -10678,6 +10774,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -10959,6 +11059,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#d13212", + "light": "#d13212", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#0073bb", + "light": "#0073bb", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#1d8102", + "light": "#1d8102", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -12951,7 +13079,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The default color of inline button icons.", "$value": { "dark": "#d5dbdb", - "light": "#545b64", + "light": "#d5dbdb", }, }, "color-text-button-inline-icon-disabled": { @@ -12965,7 +13093,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The color of inline button icons in hover state.", "$value": { "dark": "#fafafa", - "light": "#16191f", + "light": "#fafafa", }, }, "color-text-button-link-active": { @@ -13224,7 +13352,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*", "$value": { "dark": "#d5dbdb", - "light": "#545b64", + "light": "#d5dbdb", }, }, "color-text-interactive-disabled": { @@ -13238,7 +13366,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*", "$value": { "dark": "#fafafa", - "light": "#16191f", + "light": "#fafafa", }, }, "color-text-interactive-inverted-default": { @@ -13412,8 +13540,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { - "dark": "#ff5d64", - "light": "#d13212", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-status-inactive": { @@ -13426,15 +13554,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-status-info": { "$description": "The color of info text and icons. For example: info status indicators and info alert icon.", "$value": { - "dark": "#44b9d6", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-status-success": { "$description": "The color of success text and icons. For example: success status indicators and success alert icon.", "$value": { - "dark": "#6aaf35", - "light": "#1d8102", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-status-warning": { @@ -14185,6 +14313,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -14466,6 +14598,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#d13212", + "light": "#d13212", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#0073bb", + "light": "#0073bb", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#1d8102", + "light": "#1d8102", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -16457,7 +16617,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-button-inline-icon-default": { "$description": "The default color of inline button icons.", "$value": { - "dark": "#d5dbdb", + "dark": "#545b64", "light": "#545b64", }, }, @@ -16471,7 +16631,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-button-inline-icon-hover": { "$description": "The color of inline button icons in hover state.", "$value": { - "dark": "#fafafa", + "dark": "#16191f", "light": "#16191f", }, }, @@ -16730,7 +16890,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-interactive-default": { "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*", "$value": { - "dark": "#d5dbdb", + "dark": "#545b64", "light": "#545b64", }, }, @@ -16744,22 +16904,22 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-interactive-hover": { "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*", "$value": { - "dark": "#fafafa", + "dark": "#16191f", "light": "#16191f", }, }, "color-text-interactive-inverted-default": { "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.", "$value": { - "dark": "#545b64", - "light": "#545b64", + "dark": "#d5dbdb", + "light": "#d5dbdb", }, }, "color-text-interactive-inverted-hover": { "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.", "$value": { - "dark": "#16191f", - "light": "#16191f", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-label": { @@ -16947,8 +17107,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-status-warning": { "$description": "The color of warning icons.", "$value": { - "dark": "#fbd332", - "light": "#906806", + "dark": "#16191f", + "light": "#16191f", }, }, "color-text-toggle-button-icon-pressed": { @@ -17692,6 +17852,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -17973,6 +18137,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#12293b", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#d13212", + "light": "#d13212", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#0073bb", + "light": "#0073bb", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#1d8102", + "light": "#1d8102", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -21199,6 +21391,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -21480,6 +21676,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#d13212", + "light": "#d13212", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#0073bb", + "light": "#0073bb", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#1d8102", + "light": "#1d8102", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -24711,6 +24935,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -24992,6 +25220,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -28218,6 +28474,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -28499,6 +28759,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#001129", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -31725,6 +32013,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -32006,6 +32298,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -35232,6 +35552,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -35513,6 +35837,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -38739,6 +39091,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -39020,6 +39376,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -41201,7 +41585,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The default color of the expand icon in the navigation variant of the expandable section.", "$value": { "dark": "#dedee3", - "light": "#424650", + "light": "#dedee3", }, }, "color-text-form-default": { @@ -41285,7 +41669,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*", "$value": { "dark": "#dedee3", - "light": "#424650", + "light": "#dedee3", }, }, "color-text-interactive-disabled": { @@ -41299,7 +41683,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*", "$value": { "dark": "#f9f9fa", - "light": "#0f141a", + "light": "#f9f9fa", }, }, "color-text-interactive-inverted-default": { @@ -41473,8 +41857,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { - "dark": "#ff7a7a", - "light": "#db0000", + "dark": "#f9f9fa", + "light": "#f9f9fa", }, }, "color-text-status-inactive": { @@ -41487,15 +41871,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-status-info": { "$description": "The color of info text and icons. For example: info status indicators and info alert icon.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#f9f9fa", + "light": "#f9f9fa", }, }, "color-text-status-success": { "$description": "The color of success text and icons. For example: success status indicators and success alert icon.", "$value": { - "dark": "#2bb534", - "light": "#00802f", + "dark": "#f9f9fa", + "light": "#f9f9fa", }, }, "color-text-status-warning": { @@ -42246,6 +42630,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -42527,6 +42915,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -44707,7 +45123,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-expandable-section-navigation-icon-default": { "$description": "The default color of the expand icon in the navigation variant of the expandable section.", "$value": { - "dark": "#dedee3", + "dark": "#424650", "light": "#424650", }, }, @@ -44791,7 +45207,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-interactive-default": { "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*", "$value": { - "dark": "#dedee3", + "dark": "#424650", "light": "#424650", }, }, @@ -44805,22 +45221,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-interactive-hover": { "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*", "$value": { - "dark": "#f9f9fa", + "dark": "#0f141a", "light": "#0f141a", }, }, "color-text-interactive-inverted-default": { "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.", "$value": { - "dark": "#424650", - "light": "#424650", + "dark": "#dedee3", + "light": "#dedee3", }, }, "color-text-interactive-inverted-hover": { "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.", "$value": { - "dark": "#0f141a", - "light": "#0f141a", + "dark": "#f9f9fa", + "light": "#f9f9fa", }, }, "color-text-label": { @@ -45008,8 +45424,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-status-warning": { "$description": "The color of warning icons.", "$value": { - "dark": "#fbd332", - "light": "#855900", + "dark": "#0f141a", + "light": "#0f141a", }, }, "color-text-toggle-button-icon-pressed": { @@ -45753,6 +46169,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -46034,6 +46454,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#001129", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -49260,6 +49708,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -49541,6 +49993,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#001129", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -52767,6 +53247,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, + "border-width-flashbar-inline-start": { + "$description": "The inline-start border width of flash messages in flashbars.", + "$value": "0px", + }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -53048,6 +53532,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, + "color-background-flashbar-error": { + "$description": "The background color of error flash messages.", + "$value": { + "dark": "#db0000", + "light": "#db0000", + }, + }, + "color-background-flashbar-info": { + "$description": "The background color of info and in-progress flash messages.", + "$value": { + "dark": "#006ce0", + "light": "#006ce0", + }, + }, + "color-background-flashbar-success": { + "$description": "The background color of success flash messages.", + "$value": { + "dark": "#00802f", + "light": "#00802f", + }, + }, + "color-background-flashbar-warning": { + "$description": "The background color of warning flash messages.", + "$value": { + "dark": "#ffe347", + "light": "#ffe347", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { From 007ebc5a77729b9b2b4a99f547383c9b9d08160e Mon Sep 17 00:00:00 2001 From: at-susie Date: Mon, 29 Jun 2026 10:08:09 +0200 Subject: [PATCH 6/8] chore: Refine alert and flashbar token values in one-theme --- style-dictionary/one-theme/contexts/alert.ts | 6 ++---- style-dictionary/one-theme/contexts/flashbar.ts | 6 +----- style-dictionary/one-theme/shadows.ts | 2 +- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/style-dictionary/one-theme/contexts/alert.ts b/style-dictionary/one-theme/contexts/alert.ts index 567242c0e2..37d179fad6 100644 --- a/style-dictionary/one-theme/contexts/alert.ts +++ b/style-dictionary/one-theme/contexts/alert.ts @@ -16,12 +16,10 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, - colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.1)', - colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.2)', + colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.05)', + colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.07)', colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, - // Expandable section divider fails contrast on the dark-mode background, so - // bump it two steps lighter in dark mode only (light mode unchanged). colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, }; diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts index ac5fc985d1..c93261e893 100644 --- a/style-dictionary/one-theme/contexts/flashbar.ts +++ b/style-dictionary/one-theme/contexts/flashbar.ts @@ -5,10 +5,6 @@ import merge from 'lodash/merge.js'; import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; -// One-theme flashbar adopts the same subtle treatment as the alert component: -// light status backgrounds (set via colorBackgroundFlashbar* in colors.ts) with -// dark body text, status-colored accents, and transparent normal buttons. -// These overrides mirror the alert context (contexts/alert.ts). const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundStatusInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, colorBackgroundStatusWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, @@ -26,7 +22,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, colorTextNotificationDefault: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, - // Progress Bar + colorBackgroundProgressBarValueDefault: { light: '{colorNeutral800}', dark: '{colorWhite}' }, colorBackgroundProgressBarDefault: { light: '{colorGreyOpaque10}', dark: '{colorGreyOpaque25}' }, }; diff --git a/style-dictionary/one-theme/shadows.ts b/style-dictionary/one-theme/shadows.ts index d0d4b5085d..ee037400f7 100644 --- a/style-dictionary/one-theme/shadows.ts +++ b/style-dictionary/one-theme/shadows.ts @@ -18,7 +18,7 @@ const tokens: StyleDictionary.ShadowsDictionary = { shadowDropup: '{shadowDropdown}', shadowFlashCollapsed: '0px 4px 4px rgba(0, 0, 0, 0.25)', shadowFlashSticky: { - light: '0px 4px 8px rgba(0, 0, 0, 0.10)', + light: '0px 4px 8px rgba(0, 0, 0, 0.05)', dark: '0px 4px 8px rgba(0, 0, 0, 0.5)', }, shadowModal: '{shadowDropdown}', From fb88ebb0729486e93ba9fc3db23ad6ee849c15dc Mon Sep 17 00:00:00 2001 From: at-susie Date: Mon, 29 Jun 2026 13:05:49 +0200 Subject: [PATCH 7/8] chore: Reorganize and unify alert and flashbar token colors --- style-dictionary/one-theme/contexts/alert.ts | 26 ++++++++++- .../one-theme/contexts/flashbar-warning.ts | 44 +++++++++++++++---- .../one-theme/contexts/flashbar.ts | 32 +++++++++++++- 3 files changed, 90 insertions(+), 12 deletions(-) diff --git a/style-dictionary/one-theme/contexts/alert.ts b/style-dictionary/one-theme/contexts/alert.ts index 37d179fad6..edbd7b99ee 100644 --- a/style-dictionary/one-theme/contexts/alert.ts +++ b/style-dictionary/one-theme/contexts/alert.ts @@ -6,21 +6,45 @@ 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: '{colorInfo500}' }, colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, 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.07)', + 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)); diff --git a/style-dictionary/one-theme/contexts/flashbar-warning.ts b/style-dictionary/one-theme/contexts/flashbar-warning.ts index 3f775b9a97..157ff25537 100644 --- a/style-dictionary/one-theme/contexts/flashbar-warning.ts +++ b/style-dictionary/one-theme/contexts/flashbar-warning.ts @@ -5,29 +5,55 @@ import merge from 'lodash/merge.js'; import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; -// Warning flashes render in their own context. Mirror the alert treatment so a -// warning flash matches an alert: light warning background (set via -// colorBackgroundFlashbarWarning in colors.ts) with dark body text and a -// transparent normal button. 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: '{colorInfo500}' }, colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, 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.1)', - colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.2)', + colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.05)', + colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.1)', + + // Link + colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + + // Dismiss button + colorTextInteractiveDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextInteractiveHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + + // Dividers colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, - colorTextNotificationYellow: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, - colorTextNotificationDefault: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, - colorTextHeadingSecondary: { light: '{colorNeutral650}', dark: '{colorNeutral400}' }, + // 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)); diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts index c93261e893..2d3e925fd4 100644 --- a/style-dictionary/one-theme/contexts/flashbar.ts +++ b/style-dictionary/one-theme/contexts/flashbar.ts @@ -6,25 +6,53 @@ 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: '{colorInfo500}' }, colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, 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.07)', + colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.1)', + + // Link + colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + + // Dismiss button + colorTextInteractiveDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextInteractiveHover: { 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}' }, - colorTextNotificationDefault: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, + // 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)); From 16ef90705aa72d8cf240d93f4e66213dbeb55591 Mon Sep 17 00:00:00 2001 From: at-susie Date: Mon, 29 Jun 2026 13:25:43 +0200 Subject: [PATCH 8/8] chore: Unify styles on Flashbar and Alert --- style-dictionary/one-theme/contexts/alert.ts | 4 ++-- style-dictionary/one-theme/contexts/flashbar-warning.ts | 4 ++-- style-dictionary/one-theme/contexts/flashbar.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/style-dictionary/one-theme/contexts/alert.ts b/style-dictionary/one-theme/contexts/alert.ts index edbd7b99ee..f5b97c2917 100644 --- a/style-dictionary/one-theme/contexts/alert.ts +++ b/style-dictionary/one-theme/contexts/alert.ts @@ -13,8 +13,8 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, // Status text and borders - colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, - colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, + colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, + colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, diff --git a/style-dictionary/one-theme/contexts/flashbar-warning.ts b/style-dictionary/one-theme/contexts/flashbar-warning.ts index 157ff25537..5bbd2b8c8b 100644 --- a/style-dictionary/one-theme/contexts/flashbar-warning.ts +++ b/style-dictionary/one-theme/contexts/flashbar-warning.ts @@ -13,8 +13,8 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, // Status text and borders - colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, - colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, + colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, + colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts index 2d3e925fd4..c19d108acf 100644 --- a/style-dictionary/one-theme/contexts/flashbar.ts +++ b/style-dictionary/one-theme/contexts/flashbar.ts @@ -13,8 +13,8 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, // Status text and borders - colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, - colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, + colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, + colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' },