From f3a1dd51e5758af22df80b0f74c089890bd4e70a Mon Sep 17 00:00:00 2001 From: waterlemonnn Date: Sat, 8 Aug 2026 00:26:12 +0700 Subject: [PATCH] docs: update design token examples in CONTRIBUTING to match redesign The UI/bug fixes section still referenced the pre-redesign accent-red tokens and unprefixed class names. Point at the current amber accent and sev-* severity scale instead, written as the utilities contributors actually type, and carry over the never-colour-alone rule from lib/constants/severity.ts. Drops the WCAG pairing claim rather than inventing an unverified replacement. --- CONTRIBUTING.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 358ae32..bf0a28f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -138,7 +138,8 @@ Tags follow the same pattern — add to `lib/constants/tags.ts` and include the ### UI / bug fixes - Keep changes focused — one fix or feature per PR -- Match the existing design tokens (`bg-canvas`, `accent-red`, `accent-red-muted`, `text-tertiary`, etc.) defined in `tailwind.config.ts`. Use `text-accent-red-muted` (not `text-accent-red`) when placing red text on `bg-accent-red-soft` backgrounds to pass WCAG AA contrast. +- Match the existing design tokens defined in `tailwind.config.ts`. Write them as the utilities a contributor actually types, e.g. `bg-bg-canvas`, `text-text-primary`, `border-border-default` — the color keys (`bg-canvas`, `text-primary`, `border-default`) need the Tailwind prefix in front. The one brand accent is `accent` / `accent-soft` / `accent-strong`. +- Severity has its own scale, kept separate from the brand accent: `sev-critical`, `sev-high`, `sev-medium`, `sev-low`, each with a `-soft` variant. Per the doc comment on `SEVERITY_STYLES` in `lib/constants/severity.ts`, every consumer must also render the label or the tick count — never colour alone. - Test on both mobile and desktop before submitting ### New features