Skip to content

docs: update design token examples in CONTRIBUTING to match redesign #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
royalpinto007 merged 1 commit into from
Aug 7, 2026
+2 −1
Merged

docs: update design token examples in CONTRIBUTING to match redesign #70

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading