diff --git a/.changeset/alert-dark-warning-colors.md b/.changeset/alert-dark-warning-colors.md new file mode 100644 index 000000000..8d306f89a --- /dev/null +++ b/.changeset/alert-dark-warning-colors.md @@ -0,0 +1,5 @@ +--- +'@launchpad-ui/components': patch +--- + +Adjust dark mode Alert warning variant colors to read more yellow/gold and distinguish from error. Use theme-aware `--alert-color-icon-warning` token for the warning icon fill. diff --git a/packages/components/src/styles/Alert.module.css b/packages/components/src/styles/Alert.module.css index 1d1d2d859..2453c6823 100644 --- a/packages/components/src/styles/Alert.module.css +++ b/packages/components/src/styles/Alert.module.css @@ -11,6 +11,7 @@ --alert-color-bg-success: var(--lp-color-green-0); --alert-color-border-warning: #fad88f; --alert-color-bg-warning: #fdfae4; + --alert-color-icon-warning: var(--lp-color-brand-orange-base); } [data-theme='dark'] { --alert-color-border-neutral: var(--lp-color-gray-800); @@ -21,8 +22,9 @@ --alert-color-bg-info: #192142; --alert-color-border-success: var(--lp-color-green-700); --alert-color-bg-success: #14260d; - --alert-color-border-warning: #932c00; - --alert-color-bg-warning: #3c170c; + --alert-color-border-warning: #946020; + --alert-color-bg-warning: #34260e; + --alert-color-icon-warning: var(--lp-color-brand-orange-base); } /* Shared styles for both the block and inline variants */ @@ -46,7 +48,7 @@ } &.warning .icon { - fill: #e65d00; + fill: var(--alert-color-icon-warning); } }