Theme Swatch
A theme's palette as a row of chips, read straight off the derivation.
Live demo
Theme Swatch derives an invocation the way <xtyle-theme-scope> does and paints the palette instead of applying it, so the colors a theme produced can be read without the page having to wear it. It composes <xtyle-swatch> for every chip rather than reinventing one — the dot, the label, the value readout, and the colour-model details all come from that component, so a Swatch mod restyles these along with every other chip in the app.
tokens picks which of the derived tokens to show and takes any token name, so a row can be the default palette read, just the accents, or the four status hues; a token the algorithm never produced is skipped rather than drawn as a hole. Where <xtyle-theme-card> shows a theme as a fake of an interface, this shows it as its literal values — the two are the picture and the parts list, and a picker often wants both. The row itself renders through this component's own fill, so a mod can restructure it without touching the element.
When to use
How this component composes with the rest of the set.
<xtyle-theme-card> so a theme reads as both a picture and its literal values. tokens to a family (--success,--warn,--danger,--info) to show what a theme does to status color specifically. details when someone needs the hex, rgb, hsl, and oklch of what the algorithm produced. <xtyle-swatch>, so a Swatch mod restyles these chips along with every other one. Props
8 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
States
error
The invocation could not be derived; the row says why instead of rendering empty.
Anatomy
The named parts that make up the component, with their selectors.
row
The chip row. Wraps, so a long token list reflows rather than scrolling.
chip
One <xtyle-swatch> per shown token, carrying the derived color as both its swatch and its value.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--danger
--font-sans
--leading-tight
--space-2
--text-xs
Accessibility
<xtyle-swatch>, so its label, value, and colour-model readout carry the meaning rather than the color alone. details makes each chip focusable, which is the Swatch's own behavior. Code
The default read, an accent-only row, and a bare strip
A full palette read, a larger accents-only row with the colour-model readout, and a seeded light theme as chips alone.
<!-- The default palette read of an algorithm's theme -->
<xtyle-theme-swatch algorithm="xtyle-quiet"></xtyle-theme-swatch>
<!-- Just the accents, larger, with the colour-model readout on hover -->
<xtyle-theme-swatch tokens="--accent,--accent-2,--accent-3" size="lg" details></xtyle-theme-swatch>
<!-- A seeded invocation, pinned light, chips only -->
<xtyle-theme-swatch
scheme="light"
labels="false"
constraints='{"--accent":"#7c5cff"}'
></xtyle-theme-swatch><script lang="ts">
import { ThemeSwatch } from "@xtyle/svelte";
</script>
<ThemeSwatch algorithm="xtyle-quiet" />
<!-- just the accents, larger, with the colour-model readout -->
<ThemeSwatch tokens={["--accent", "--accent-2", "--accent-3"]} size="lg" details />
<!-- a seeded invocation, pinned light, chips only -->
<ThemeSwatch scheme="light" labels={false} constraints={{ "--accent": "#7c5cff" }} />---
import ThemeSwatch from "@xtyle/astro/ThemeSwatch.astro";
---
<ThemeSwatch algorithm="xtyle-quiet" />
<!-- just the accents, larger, with the colour-model readout -->
<ThemeSwatch tokens={["--accent", "--accent-2", "--accent-3"]} size="lg" details />
<!-- a seeded invocation, pinned light, chips only -->
<ThemeSwatch scheme="light" labels={false} constraints={{ "--accent": "#7c5cff" }} />