diff --git a/.changeset/feedback-bg-contrast.md b/.changeset/feedback-bg-contrast.md new file mode 100644 index 000000000..1f4a7996e --- /dev/null +++ b/.changeset/feedback-bg-contrast.md @@ -0,0 +1,18 @@ +--- +'@launchpad-ui/tokens': patch +'@launchpad-ui/components': patch +--- + +Fix `feedback` color aliases that failed WCAG AA contrast (DSYS-204). + +Tokens: + +- Lighten `bg-feedback-*` to the `*.0` step (light) and darken to `*.950` (dark) so paired `text-feedback` content meets 4.5:1. +- Soften `border-feedback-*` to `*.100` (light) / `*.800` (dark) so the borders pair with the lighter feedback backgrounds. +- Darken `fill-feedback-warning` to the `*.600` step for legibility. +- Decouple `border-field-error` and `border-interactive-destructive` from `border-feedback-error` — they now map to `red-500` (light) / `red-400` (dark) so invalid-field and destructive borders keep their vivid state indication. + +Components: + +- `Alert` now sources its background and border colors from the `bg-feedback-*` / `border-feedback-*` tokens (and `bg-ui-secondary` / `border-ui-primary` for the neutral variant) instead of hardcoded primitives. +- `Toast` status icons use `text-feedback-*` for sufficient contrast against the toast surface. diff --git a/.changeset/taggroup-tag-borders.md b/.changeset/taggroup-tag-borders.md new file mode 100644 index 000000000..e38f9125f --- /dev/null +++ b/.changeset/taggroup-tag-borders.md @@ -0,0 +1,5 @@ +--- +'@launchpad-ui/components': patch +--- + +Add a 1px border to `TagGroup` tags for better definition against the lightened feedback backgrounds. Feedback variants (`success`, `error`, `warning`, `info`, `new`) use their matching `border-feedback-*` token and the `default` variant uses `border-ui-primary`; the `beta` and `federal` variants are intentionally left borderless. diff --git a/packages/components/src/styles/Alert.module.css b/packages/components/src/styles/Alert.module.css index 67b3e891f..4b42c28bb 100644 --- a/packages/components/src/styles/Alert.module.css +++ b/packages/components/src/styles/Alert.module.css @@ -1,28 +1,28 @@ /* Temporary color aliases for Alerts. This block should be removed when the new color system is implemented. */ :root, [data-theme='default'] { - --alert-color-border-neutral: var(--lp-color-gray-200); - --alert-color-bg-neutral: var(--lp-color-gray-0); - --alert-color-border-error: var(--lp-color-red-200); - --alert-color-bg-error: var(--lp-color-red-0); - --alert-color-border-info: var(--lp-color-blue-200); - --alert-color-bg-info: var(--lp-color-blue-0); - --alert-color-border-success: var(--lp-color-green-200); - --alert-color-bg-success: var(--lp-color-green-0); - --alert-color-border-warning: var(--lp-color-yellow-200); - --alert-color-bg-warning: var(--lp-color-yellow-0); + --alert-color-border-neutral: var(--lp-color-border-ui-primary); + --alert-color-bg-neutral: var(--lp-color-bg-ui-secondary); + --alert-color-border-error: var(--lp-color-border-feedback-error); + --alert-color-bg-error: var(--lp-color-bg-feedback-error); + --alert-color-border-info: var(--lp-color-border-feedback-info); + --alert-color-bg-info: var(--lp-color-bg-feedback-info); + --alert-color-border-success: var(--lp-color-border-feedback-success); + --alert-color-bg-success: var(--lp-color-bg-feedback-success); + --alert-color-border-warning: var(--lp-color-border-feedback-warning); + --alert-color-bg-warning: var(--lp-color-bg-feedback-warning); } [data-theme='dark'] { - --alert-color-border-neutral: var(--lp-color-gray-800); - --alert-color-bg-neutral: var(--lp-color-gray-900); - --alert-color-border-error: var(--lp-color-red-700); - --alert-color-bg-error: #391620; - --alert-color-border-info: var(--lp-color-blue-700); - --alert-color-bg-info: #192142; - --alert-color-border-success: var(--lp-color-green-700); - --alert-color-bg-success: #14260d; - --alert-color-border-warning: var(--lp-color-yellow-800); - --alert-color-bg-warning: var(--lp-color-yellow-900); + --alert-color-border-neutral: var(--lp-color-border-ui-primary); + --alert-color-bg-neutral: var(--lp-color-bg-ui-secondary); + --alert-color-border-error: var(--lp-color-border-feedback-error); + --alert-color-bg-error: var(--lp-color-bg-feedback-error); + --alert-color-border-info: var(--lp-color-border-feedback-info); + --alert-color-bg-info: var(--lp-color-bg-feedback-info); + --alert-color-border-success: var(--lp-color-border-feedback-success); + --alert-color-bg-success: var(--lp-color-bg-feedback-success); + --alert-color-border-warning: var(--lp-color-border-feedback-warning); + --alert-color-bg-warning: var(--lp-color-bg-feedback-warning); } /* Shared styles for both the block and inline variants */ diff --git a/packages/components/src/styles/TagGroup.module.css b/packages/components/src/styles/TagGroup.module.css index 3f75f1d7c..c27e79b9d 100644 --- a/packages/components/src/styles/TagGroup.module.css +++ b/packages/components/src/styles/TagGroup.module.css @@ -68,22 +68,26 @@ .default { color: var(--lp-color-text-ui-secondary); - background-color: var(--lp-color-bg-ui-tertiary); + background-color: var(--lp-color-bg-ui-secondary); + border: 1px solid var(--lp-color-border-ui-primary); } .success { color: var(--lp-color-text-feedback-success); background-color: var(--lp-color-bg-feedback-success); + border: 1px solid var(--lp-color-border-feedback-success); } .error { color: var(--lp-color-text-feedback-error); background-color: var(--lp-color-bg-feedback-error); + border: 1px solid var(--lp-color-border-feedback-error); } .warning { color: var(--lp-color-text-feedback-warning); background-color: var(--lp-color-bg-feedback-warning); + border: 1px solid var(--lp-color-border-feedback-warning); } .beta { @@ -99,9 +103,11 @@ .new { color: var(--lp-color-text-feedback-success); background-color: var(--lp-color-bg-feedback-success); + border: 1px solid var(--lp-color-border-feedback-success); } .info { color: var(--lp-color-text-feedback-info); background-color: var(--lp-color-bg-feedback-info); + border: 1px solid var(--lp-color-border-feedback-info); } diff --git a/packages/components/src/styles/Toast.module.css b/packages/components/src/styles/Toast.module.css index 0465e1e51..e9198cf75 100644 --- a/packages/components/src/styles/Toast.module.css +++ b/packages/components/src/styles/Toast.module.css @@ -38,15 +38,15 @@ } & .info { - fill: var(--lp-color-fill-feedback-info); + fill: var(--lp-color-text-feedback-info); } & .error { - fill: var(--lp-color-fill-feedback-error); + fill: var(--lp-color-text-feedback-error); } & .success { - fill: var(--lp-color-fill-feedback-success); + fill: var(--lp-color-text-feedback-success); } &[data-focus-visible] { diff --git a/packages/tokens/tokens/color-aliases.dark.json b/packages/tokens/tokens/color-aliases.dark.json index bd5ac34bc..b92d6192a 100644 --- a/packages/tokens/tokens/color-aliases.dark.json +++ b/packages/tokens/tokens/color-aliases.dark.json @@ -4,16 +4,16 @@ "bg": { "feedback": { "error": { - "$value": "{color.red.900}" + "$value": "{color.red.950}" }, "info": { - "$value": "{color.blue.900}" + "$value": "{color.blue.950}" }, "success": { - "$value": "{color.green.900}" + "$value": "{color.green.950}" }, "warning": { - "$value": "{color.yellow.900}" + "$value": "{color.yellow.950}" } }, "interactive": { @@ -104,16 +104,16 @@ "border": { "feedback": { "error": { - "$value": "{color.red.400}" + "$value": "{color.red.800}" }, "info": { - "$value": "{color.blue.400}" + "$value": "{color.blue.800}" }, "success": { - "$value": "{color.green.400}" + "$value": "{color.green.800}" }, "warning": { - "$value": "{color.yellow.400}" + "$value": "{color.yellow.800}" } }, "field": { @@ -122,6 +122,9 @@ }, "focus": { "$value": "{color.blue.400}" + }, + "error": { + "$value": "{color.red.400}" } }, "interactive": { @@ -130,6 +133,9 @@ }, "selected": { "$value": "{color.blue.400}" + }, + "destructive": { + "$value": "{color.red.400}" } }, "ui": { @@ -188,7 +194,7 @@ "$value": "{color.blue.400}" }, "warning": { - "$value": "{color.yellow.400}" + "$value": "{color.yellow.600}" } }, "interactive": { diff --git a/packages/tokens/tokens/color-aliases.default.json b/packages/tokens/tokens/color-aliases.default.json index b072a7007..2137e80e6 100644 --- a/packages/tokens/tokens/color-aliases.default.json +++ b/packages/tokens/tokens/color-aliases.default.json @@ -14,16 +14,16 @@ "$value": "{color.gray.800}" }, "error": { - "$value": "{color.red.50}" + "$value": "{color.red.0}" }, "info": { - "$value": "{color.blue.50}" + "$value": "{color.blue.0}" }, "success": { - "$value": "{color.green.50}" + "$value": "{color.green.0}" }, "warning": { - "$value": "{color.yellow.50}" + "$value": "{color.yellow.0}" } }, "interactive": { @@ -139,16 +139,16 @@ }, "feedback": { "error": { - "$value": "{color.red.500}" + "$value": "{color.red.100}" }, "info": { - "$value": "{color.blue.500}" + "$value": "{color.blue.100}" }, "success": { - "$value": "{color.green.500}" + "$value": "{color.green.100}" }, "warning": { - "$value": "{color.yellow.500}" + "$value": "{color.yellow.100}" } }, "field": { @@ -162,7 +162,7 @@ "$value": "{color.blue.500}" }, "error": { - "$value": "{color.border.feedback.error}" + "$value": "{color.red.500}" }, "disabled": { "$value": "{color.border.ui.secondary}" @@ -201,7 +201,7 @@ } }, "destructive": { - "$value": "{color.border.feedback.error}" + "$value": "{color.red.500}" }, "disabled": { "$value": "transparent" @@ -238,7 +238,7 @@ "$value": "{color.green.500}" }, "warning": { - "$value": "{color.yellow.500}" + "$value": "{color.yellow.600}" } }, "interactive": {