Contributing

How to add or change a component so it stays consistent, accessible and explained.

Add a component+

1. Create the component file. Export the component and its prop types. Use tokens only.
2. Export it from the matching index file.
3. Document it in src/docs/entries/ with examples, props, usage, accessibility and tokens.
4. Run the checks below. Then look at it in light mode, dark mode and a 400px wide screen.

Doc entry template+

{
  id: "badge",
  name: "Badge",
  summary: "A small pill that labels a status or category.",
  description: "…",
  anatomy: ["Icon (optional)", "Label"],
  examples: [{ title: "Tones", code: '<Badge tone="success">Done</Badge>', render: () => <Badge tone="success">Done</Badge> }],
  props: [{ name: "tone", type: '"neutral" | "accent" | …', default: '"neutral"', description: "…" }],
  usage: { do: ["…"], dont: ["…"] },
  accessibility: ["…"],
  tokens: ["--lime", "--border"],
}

Checks+

npm run typecheck
npm run build
npm run check:a11y

Pull request checklist+

• No hex values or one-off colors. Checked in light and dark.
• Buttons with only an icon have labels. The keyboard works, and npm run check:a11y finds no serious problems.
• Animation stops when a person asks for less motion.
• Explained with at least two examples, a full props table, and usage and accessibility notes.
• Amber used only when a person has to act. Lime never used as text.