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 |
|---|---|---|---|---|
select when chosen. | ||||
aria-pressed on the interactive card. |
Events
What the component emits, and what rides along on event.detail. The name in the
first column is the one addEventListener takes.
| Event | Detail | 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. Created from script it renders a shadow root, where a ::part() handle is reachable from your own stylesheet and the class beside it is internal. Upgraded over server-rendered markup it renders light DOM, where the class is the handle.
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-mediumAccessibility
aria-label / aria-labelledby names the inner role="group" card, ahead of the component's own naming; aria-labelledby ids are read from the host's own tree. forced-colors: active a selected card draws a Highlight outline, since the mode forces its accent border to the same color as every other card's. 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 />