Design system

ColorSwatch

One color token: its color, name, value and alias, with copy.

import { ColorSwatch } from "@flinbu/seed";

Cards and rows

bg-accent-solid → blue-600Primary actions

bg-error-primary → red-50Error surfaces

overlay-alpha-primaryBehind dialogs

text-primary → neutral-900

text-secondary → neutral-600

text-tertiary → neutral-500

import { ColorSwatch } from "@flinbu/seed";

<div className="flex w-full max-w-2xl flex-col gap-lg">
  <div className="flex flex-wrap gap-sm">
    <ColorSwatch color="var(--bg-accent-solid)" name="bg-accent-solid" alias="blue-600" usage="Primary actions" />
    <ColorSwatch color="var(--bg-error-primary)" name="bg-error-primary" alias="red-50" usage="Error surfaces" />
    <ColorSwatch color="var(--bg-overlay-alpha-primary)" name="overlay-alpha-primary" usage="Behind dialogs" />
  </div>
  <div className="flex flex-col">
    <ColorSwatch layout="row" color="var(--text-primary)" name="text-primary" alias="neutral-900" />
    <ColorSwatch layout="row" color="var(--text-secondary)" name="text-secondary" alias="neutral-600" />
    <ColorSwatch layout="row" color="var(--text-tertiary)" name="text-tertiary" alias="neutral-500" />
  </div>
</div>

Use it for

Token pages and color lists.
Showing a customer's colors on the stage.

Use something else for

Decoration: it's for reading a token.

Props

Prop	Type	Default	Description
`color`	`string`	–	Any CSS color, usually var(--token).
`name`	`string`	–	Token name; copied.
`value`	`ReactNode`	–	Shown instead of the measured value.
`alias`	`ReactNode`	–	The primitive, for the theme shown.
`usage`	`ReactNode`	–	Where it's used.
`layout`	`'card''row''chip'`	`'card'`	Layout.
`size / selected / copy`	`…`	–	More.

Accessibility

The copy Button is named 'Copy <token>'.
The color sits on a checkerboard, so transparency reads as transparency.