Skip to content

feat(tokens): add success and warning four-step colour ladder #96

Description

@joshsadam

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

  • Swatches in Lookbook token page show all new roles in light and dark.
  • pnpm run build:css:check passes.
  • Docs clearly state that solid-fill success/warning is now allowed only through these tokens.

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions