Skip to content

chore: Fix style specificity issue in custom style flashbar #4684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
at-susie wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

chore: Fix style specificity issue in custom style flashbar #4684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff6da7f
chore: Fix style specificity issue in custom style flashbar
at-susie Jul 1, 2026
629f2ba
fix: Resolve colorTextInteractiveDefault token conflict with board-co…
at-susie Jul 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
588 changes: 38 additions & 550 deletions src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions src/button/constants.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,13 +125,13 @@ $variants: (
'flashbar-icon': (
'default-background': transparent,
'default-border-color': transparent,
'default-color': awsui.$color-text-interactive-default,
'default-color': awsui.$color-text-interactive-inverted-default,
'hover-background': transparent,
'hover-border-color': transparent,
'hover-color': awsui.$color-text-interactive-hover,
'hover-color': awsui.$color-text-interactive-inverted-hover,
'active-background': transparent,
'active-border-color': transparent,
'active-color': awsui.$color-text-interactive-default,
'active-color': awsui.$color-text-interactive-inverted-default,
'disabled-background': transparent,
'disabled-border-color': transparent,
'disabled-color': awsui.$color-text-interactive-disabled,
Expand Down
8 changes: 6 additions & 2 deletions src/flashbar/flash.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import InternalLiveRegion from '../live-region/internal';
import InternalSpinner from '../spinner/internal';
import { GeneratedAnalyticsMetadataFlashbarDismiss } from './analytics-metadata/interfaces';
import { FlashbarProps } from './interfaces';
import { getDismissButtonStyles, getFlashStyles } from './style';
import { getDismissButtonStyles, getFlashIconStyles, getFlashStyles } from './style';

import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
Expand Down Expand Up @@ -238,7 +238,11 @@ export const Flash = React.forwardRef(
role="group"
aria-labelledby={`${flashIconId} ${flashMessageId}`}
>
<div className={clsx(styles['flash-icon'], styles['flash-text'])} id={flashIconId}>
<div
className={clsx(styles['flash-icon'], styles['flash-text'])}
id={flashIconId}
style={getFlashIconStyles(style, effectiveType)}
>
{icon}
</div>
<div className={clsx(styles['flash-message'], styles['flash-text'])} id={flashMessageId}>
Expand Down
10 changes: 10 additions & 0 deletions src/flashbar/style.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,16 @@ export function getCollapsibleFlashStyles(style: FlashbarProps['style'], type: s
};
}

export function getFlashIconStyles(style: FlashbarProps['style'] | undefined, type: string = 'info') {
if (SYSTEM !== 'core' || !style) {
return undefined;
}
const styleKey = getStylePropertyKey(type as FlashbarProps.Type);
const color = style?.item?.root?.color && style?.item?.root?.color[styleKey as keyof typeof style.item.root.color];

return color ? { color } : undefined;
}

export function getFlashStyles(style: FlashbarProps['style'] | undefined, type: string = 'info') {
if (SYSTEM !== 'core' || !style) {
return undefined;
Expand Down
6 changes: 3 additions & 3 deletions style-dictionary/one-theme/contexts/flashbar-warning.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ const tokens: StyleDictionary.ColorsDictionary = {
// Link
colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' },

// Dismiss button
colorTextInteractiveDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' },
colorTextInteractiveHover: { light: '{colorNeutral950}', dark: '{colorWhite}' },
// Dismiss button (flashbar-icon variant reads colorTextInteractiveInverted*)
colorTextInteractiveInvertedDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' },
colorTextInteractiveInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' },

// Dividers
colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' },
Expand Down
6 changes: 3 additions & 3 deletions style-dictionary/one-theme/contexts/flashbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ const tokens: StyleDictionary.ColorsDictionary = {
// Link
colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' },

// Dismiss button
colorTextInteractiveDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' },
colorTextInteractiveHover: { light: '{colorNeutral950}', dark: '{colorWhite}' },
// Dismiss button (flashbar-icon variant reads colorTextInteractiveInverted*)
colorTextInteractiveInvertedDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' },
colorTextInteractiveInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' },

// Dividers
colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' },
Expand Down
6 changes: 3 additions & 3 deletions style-dictionary/visual-refresh/contexts/flashbar-warning.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ const baseTokens: StyleDictionary.ColorsDictionary = {
// (matching the surrounding text); only one-theme opts into the status color.
colorTextStatusWarning: '{colorTextNotificationYellow}',

// Dismiss button (flashbar-icon variant) now reads colorTextInteractive*.
// Dismiss button (flashbar-icon variant) reads colorTextInteractiveInverted*.
// The warning flash is light in both modes, so pin to dark values for contrast.
colorTextInteractiveDefault: '{colorNeutral650}',
colorTextInteractiveHover: '{colorNeutral950}',
colorTextInteractiveInvertedDefault: '{colorNeutral650}',
colorTextInteractiveInvertedHover: '{colorNeutral950}',

// Progress bars
colorBackgroundProgressBarValueDefault: '{colorNeutral950}',
Expand Down
5 changes: 0 additions & 5 deletions style-dictionary/visual-refresh/contexts/flashbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,6 @@ 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}',
Expand Down
Loading