Contributing

How to add or change a token or component.

Adding a component

files

packages/ui/src/components/badge/
  badge.css.ts     styles: vanilla-extract recipe using vars only
  badge.tsx        typed React component (forwardRef, className passthrough)
  badge.test.tsx   behavior + axe
apps/styleguide/examples/badge/
  tones.tsx        live example, shown with its source
  tones.css.ts     its styles, if any (shown too); never inline style={{}}
apps/styleguide/lib/components.ts
                   summary, usage, accessibility notes

Write styles with vanilla-extract in a .css.ts file. Use vars for every value; no raw colors or pixels.
Build on a native element or a Radix primitive. Forward refs and pass className through.
Add tests for behavior and an axe check.
Add at least one example and a docs entry. Props tables are generated from your types.
Run pnpm --filter @jsonresume/ui test and pnpm --filter styleguide build.

Changing tokens

Tokens live in packages/ui/src/tokens/theme.ts. Change the light and dark value together; the contrast tests fail if a text pairing drops below 4.5:1. Renaming a token renames its CSS variable, so treat it as a breaking change.

Review checklist

Does it look like jsonresume.org: light, calm, one yellow band, red only for the main action?
Does it work with only a keyboard, at 320px, and at 200% zoom?
Is there one obvious way to use it, and is it documented with an example?