Problem
Accent and danger each have four CSS steps: base, strong, solid, and solid-hover. Success and warning only have a single base token each.
The design docs say solid-fill success or warning surfaces are not supported until the ladder exists. Without it, future components may reach for raw emerald-* or amber-* classes under pressure.
This is not required to fix current Button/Form/Tabs/Link migration work. It should land before building filled success/warning buttons, badges, alerts, or richer Toast variants.
What we will build
Six new tokens, light and dark values, documented in Lookbook, matching the accent/danger pattern:
--pvc-color-success-strong
--pvc-color-success-solid
--pvc-color-success-solid-hover
--pvc-color-warning-strong
--pvc-color-warning-solid
--pvc-color-warning-solid-hover
How we will build it
- Add the six tokens to
pathogen.tailwind.css under :root and .dark.
- Follow the same rules as danger:
- foreground steps for text/borders
- solid steps for fills
- solid hover darkens
- Update the token swatch table in
docs/lookbook/design_system/02-tokens.md.erb.
- Remove row 4 from
What's On Our List when done.
- Rebuild generated CSS.
Testing
Not in scope
- Migrating Toast or building Badge/Alert components.
- Changing existing success/warning one-off usages in host apps.
- Adding new status components.
Done when
All six tokens ship, docs and roadmap are updated, and reviewers have semantic tokens to use for filled success/warning UI.
Depends on: None, but lower priority than current component drift.
Unblocks: Solid success/warning buttons, badges, alerts, and richer Toast variants.
Design docs: docs/lookbook/design_system/02-tokens.md.erb (What's On Our List row 4); docs/lookbook/design_system/01-design-contract.md.erb (Colour)
Problem
Accent and danger each have four CSS steps: base, strong, solid, and solid-hover. Success and warning only have a single base token each.
The design docs say solid-fill success or warning surfaces are not supported until the ladder exists. Without it, future components may reach for raw
emerald-*oramber-*classes under pressure.This is not required to fix current Button/Form/Tabs/Link migration work. It should land before building filled success/warning buttons, badges, alerts, or richer Toast variants.
What we will build
Six new tokens, light and dark values, documented in Lookbook, matching the accent/danger pattern:
--pvc-color-success-strong--pvc-color-success-solid--pvc-color-success-solid-hover--pvc-color-warning-strong--pvc-color-warning-solid--pvc-color-warning-solid-hoverHow we will build it
pathogen.tailwind.cssunder:rootand.dark.docs/lookbook/design_system/02-tokens.md.erb.What's On Our Listwhen done.Testing
pnpm run build:css:checkpasses.Not in scope
Done when
All six tokens ship, docs and roadmap are updated, and reviewers have semantic tokens to use for filled success/warning UI.
Depends on: None, but lower priority than current component drift.
Unblocks: Solid success/warning buttons, badges, alerts, and richer Toast variants.
Design docs:
docs/lookbook/design_system/02-tokens.md.erb(What's On Our Listrow 4);docs/lookbook/design_system/01-design-contract.md.erb(Colour)