Theme Card
A preview of a theme, drawn as a small fake of a themed UI.
Live demo
Theme Card derives an invocation exactly the way <xtyle-theme-scope> does — a named algorithm plus its knobs and token constraints — but paints the result instead of applying it, so a theme can be shown without the page having to wear it. What it draws is a fake: a small simulated interface in the theme's own colors, with a surface, a title, a row of swatches, a filled button, and the status dots.
A fake reads a palette faster than a list of hex values does, because it shows the colors doing the job they were derived for. The whole drawing lives in the component's fill, so a mod can redraw the fake into whatever preview an app wants — a different mock, more swatches, a type specimen — without touching the element. interactive turns the card into a real button that emits select, which is what a theme picker listens to; selected marks the current one. A bad invocation shows its error on the card rather than a blank frame.
When to use
How this component composes with the rest of the set.
<xtyle-theme-scope>: the card previews an invocation, the scope applies the one that was chosen. select to drive the choice; the event carries the card's name, algorithm, and scheme. component.theme-card fill to redraw the fake when an app wants a different preview. Props
7 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
States
interactive
The card is a button and can be chosen.
selected
The card is the currently chosen theme.
error
The invocation could not be derived; the card shows why instead of a blank frame.
Anatomy
The named parts that make up the component, with their selectors.
card
The card itself; a <button> under interactive, a grouped <span> otherwise.
preview
The fake: an inline SVG of a themed interface, drawn from the derived register.
name
The theme's display name.
meta
The algorithm and the scheme the derivation landed on.
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.
--accent
--bg-1
--border-thick
--border-thin
--danger
--duration-fast
--ease-standard
--fg-0
--fg-2
--font-sans
--leading-tight
--line
--line-2
--radius-md
--ring
--space-1
--space-2
--text-sm
--text-xs
--weight-medium
Accessibility
interactive the card is a real <button> with aria-pressed, so it is reachable, announced, and operable from the keyboard. aria-hidden); the card's accessible name carries the theme's name, algorithm, and scheme instead. --ring token, consistent with every other control. Code
Previews, a seeded invocation, and a selectable row
Cards previewing the blessed algorithms, one seeded and pinned light, and an interactive row that reports what was chosen.
<!-- A preview of an algorithm's default theme -->
<xtyle-theme-card algorithm="xtyle-quiet" name="Quiet"></xtyle-theme-card>
<!-- A seeded invocation, pinned light -->
<xtyle-theme-card
name="Grape"
scheme="light"
constraints='{"--accent":"#7c5cff"}'
></xtyle-theme-card>
<!-- Selectable: emits `select` for a picker to listen to -->
<xtyle-theme-card algorithm="xtyle-loud" name="Loud" interactive selected></xtyle-theme-card><script lang="ts">
import { ThemeCard } from "@xtyle/svelte";
let chosen = $state("xtyle-default");
</script>
{#each ["xtyle-default", "xtyle-quiet", "xtyle-loud"] as algorithm}
<ThemeCard
{algorithm}
name={algorithm}
interactive
selected={chosen === algorithm}
onselect={() => (chosen = algorithm)}
/>
{/each}---
import ThemeCard from "@xtyle/astro/ThemeCard.astro";
---
<ThemeCard algorithm="xtyle-quiet" name="Quiet" />
<!-- a seeded invocation, pinned light -->
<ThemeCard name="Grape" scheme="light" constraints={{ "--accent": "#7c5cff" }} />
<!-- selectable -->
<ThemeCard algorithm="xtyle-loud" name="Loud" interactive selected />