Components Library Operations TokenSwatchGrid

TokenSwatchGrid

Grouped theme-token swatches with usage notes and contrast labels.

Live demo

Theme tokens

Token swatch grid

chrome

#ffffff

surface

--surface

Primary app panels

#f8fafc

surface 2

--surface-2

Inset surfaces

brand

#0f766e

brand primary

--brand-primary

Primary actions

#be123c

brand accent

--brand-accent

Visual QA accents

semantic

#dcfce7

status pass

--status-pass

Passing gates

#fef3c7

status review

--status-review

Needs review

Implementation

<script lang="ts">
  import TokenSwatchGrid from '$lib/components/TokenSwatchGrid.svelte';
</script>

<TokenSwatchGrid {tokens} />

TokenSwatchGrid groups tokens by purpose and calculates simple contrast labels for hex values. It is a lightweight review surface for design-system inventory before full theme inspection.

Logic explainer

What Does It Do? (Plain English)

TokenSwatchGrid displays theme tokens as grouped swatches with usage notes and quick contrast labels. It is useful before or beside ThemeTokenInspector when teams need to review the actual design-token inventory.

How It Works (Pseudo-Code)

receive token swatches
group tokens by chrome, brand, semantic
calculate optional contrast ratio
render color cards with token name, value, usage, and label

Props Reference

Prop	Type	Default	Description
`tokens`	`TokenSwatch[]`	Required	Token definitions with name, color value, group, and usage.
`title`	`string`	`"Token swatch grid"`	Heading above the swatches.

Dependencies

No external dependencies.

API

Prop	Type	Description
`tokens`	`TokenSwatch[]`	Token rows with group, value, and usage.
`title`	`string`	Grid heading.

Installation

cp src/lib/components/TokenSwatchGrid.svelte ./src/lib/components/

Dependencies

Svelte 5+
Zero external dependencies

For your agent

01Use this before theme QA; keep token groups explicit so chrome, brand, and semantic colors do not blur together.

# Install TokenSwatchGrid into my Svelte 5 project

Grouped theme-token swatches with usage notes and contrast labels.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/TokenSwatchGrid.svelte
to src/lib/components/TokenSwatchGrid.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/tokenswatchgrid/+page.svelte to src/routes/tokenswatchgrid/+page.svelte.

## 5. Usage
```svelte
<script lang="ts">
  import TokenSwatchGrid from '$lib/components/TokenSwatchGrid.svelte';
</script>

<TokenSwatchGrid {tokens} />
```