[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_784":785,"_786":787},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":88,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":124,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",239,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","docs/reference/val-town-style-guide.md","latestPath","fileId","c81d8562-798e-11f1-8388-1607ee4eb77e","name","val-town-style-guide.md","fileType","content","# Val Town UI style guide — design tokens reference\n\nResearch reference for ADR-0005\n(`docs/adr/0005-val-town-visual-language-default-theme.md`) and the\nscales/palette PRD (`docs/issues/structural-scales-palette/PRD.md`). Extracted\n2026-07-06.\n\n## What was found, and from where\n\nVal Town's marketing/app site is a **Remix SSR** application, so a plain HTTP\n`GET` of each `https://www.val.town/_ui/` page returns the **real,\nserver-rendered component markup** — every element with its full Tailwind\nutility class list. The token layer lives in the site's compiled Tailwind **v4**\nstylesheet, linked from every page and served from\n`https://static2.esm.town/assets/tailwind-.css` (current hash at\nextraction time: `tailwind-Dy1Hj0e7.css`). That file contains the Tailwind v4\n`@theme` block (the full `--color-*` scale in **oklch**, plus `--spacing`,\n`--radius-*`, `--text-*`, `--font-weight-*`) **and** Val Town's own semantic\ncolor aliases split across the light `@theme`/`:root` layer and a `.dark {…}`\nblock.\n\n**This is the primary, authoritative source** and it is machine-readable\nend-to-end: component class lists → utility classes → resolved token values, all\nfrom the live site.\n\nA **secondary** source — the val **`dcm31/townie-mobile`**, `frontend/style.css`\n(read via the Val Town MCP `read_file`) — is the distilled token set its author\nhand-fed to Fable. It agrees with the live site on the design _language_\n(slate + sky, IBM Plex Sans, iA Writer Quattro eyebrows, dark-ink-on-accent, 8px\nradius) but its literal hex values are **Tailwind v3** (e.g.\n`--vt-sky: #38bdf8`), which differ numerically from the live site's Tailwind\n**v4** oklch derivations (`sky-400` → `#00bcff`). Reconciliation is called out\nbelow.\n\n### Colour-space note\n\nThe live tokens are **oklch** (Tailwind v4). Every hex in this doc is a\n**computed** oklch→sRGB conversion (D65, standard sRGB transfer). Hexes are\nlabelled as computed; the oklch string is the source-of-truth value. Contrast\nratios are likewise computed from those sRGB values.\n\n### Reconciliation: townie-mobile (v3 hex) vs live `_ui` (v4 oklch)\n\n| Role | townie `style.css` (v3 literal) | live `_ui` (v4 oklch → computed hex) | Agree? |\n| ----------- | --------------------------------------- | --------------------------------------------------- | -------------------------------------- |\n| Accent | `--vt-sky #38bdf8` (sky-400) | `sky-400` `oklch(74.6% .16 232.661)` → `#00bcff` | Same token name; v4 hex more saturated |\n| Deep accent | `--vt-sky-deep #0369a1` (sky-700) | `sky-700` `oklch(50% .134 242.749)` → `#0069a8` | Same name, v4 slightly different |\n| Border | `--vt-border #e2e8f0` (slate-200) | `slate-200` `oklch(92.9% .013 255.508)` → `#e2e8f0` | **Identical** |\n| Accent-fg | send btn `text-sky-950` on `bg-sky-400` | primary btn `text-sky-950` on `bg-sky-400` | **Identical convention** |\n\nBoth confirm **VT = Tailwind slate + sky**. Treat the **live `_ui` v4 oklch\nvalues as current source of truth**; townie's hexes are the older/hand-distilled\nvariant.\n\n---\n\n## 1. Color palette\n\n### 1a. Val Town semantic aliases (the actual theme layer)\n\nVT defines exactly **five** semantic color tokens, each aliased to a raw scale\nstep, with a light default (in the `@theme`/root layer) and a `.dark` override.\nSource: `tailwind-Dy1Hj0e7.css`, `:root`/`@theme` and `.dark{…}` blocks\n(verbatim property names).\n\n| Semantic token | Light → raw | Light hex (computed) | Dark → raw | Dark hex (computed) |\n| -------------------- | ------------------- | -------------------- | ------------------- | ------------------- |\n| `--color-background` | `--color-white` | `#ffffff` | `--color-black` | `#000000` |\n| `--color-text` | `--color-black` | `#000000` | `--color-white` | `#ffffff` |\n| `--color-border` | `--color-slate-200` | `#e2e8f0` | `--color-slate-700` | `#314158` |\n| `--color-muted` | `--color-gray-600` | `#4a5565` | `--color-gray-300` | `#d1d5dc` |\n| `--color-shadow` | `--color-gray-50` | `#f8fafc`* | `--color-gray-900` | `#101828`* |\n\nVerbatim:\n`.dark{--color-text:var(--color-white);--color-background:var(--color-black);--color-border:var(--color-slate-700);--color-muted:var(--color-gray-300);--color-shadow:var(--color-gray-900)}`\nand light\n`--color-text:var(--color-black);--color-background:var(--color-white);--color-border:var(--color-slate-200);--color-muted:var(--color-gray-600);--color-shadow:var(--color-gray-50)`.\n(*`--color-shadow` gray hexes are approximate; used as a shadow tint, not a\nsurface.)\n\nNotable: **dark-mode background is true black** (`#000`) with true-white text —\nan OLED-style maximum-contrast choice, not a dark-gray. There is **no** semantic\ntoken for elevated / recessed surfaces or for accent — those come from raw\n`sky-*`/`slate-*` utilities in the components (§1b, §5).\n\n### 1b. Raw scale steps used across components (Tailwind v4 oklch)\n\nEvery value below is a class observed in live `_ui` component markup. oklch is\nthe source value; hex is computed. Full scales for slate/sky/rose/emerald/gray\nexist in the file; these are the steps actually referenced.\n\n**Neutrals — `slate` (structure) and `gray` (muted text)**\n\n| Token | oklch | Hex (computed) | Role in `_ui` |\n| ----------- | --------------------------- | -------------- | ------------------------------------------------------- |\n| `white` | `#fff` | `#ffffff` | Base surface (light) |\n| `slate-50` | `oklch(98.4% .003 247.858)` | `#f8fafc` | Secondary button fill (light); read-only input bg |\n| `slate-100` | `oklch(96.8% .007 247.896)` | `#f1f5f9` | Default button fill; soft/filled input fill (light) |\n| `slate-200` | `oklch(92.9% .013 255.508)` | `#e2e8f0` | **Border** (`--color-border` light) |\n| `slate-300` | `oklch(86.9% .022 252.894)` | `#cad5e2` | Input border (light); hover border on filled input |\n| `slate-400` | `oklch(70.4% .04 256.788)` | `#90a1b9` | Input hover border (light) |\n| `slate-700` | `oklch(37.2% .044 257.287)` | `#314158` | **Border** (`--color-border` dark); input border (dark) |\n| `slate-800` | `oklch(27.9% .041 260.031)` | `#1d293d` | Default button fill (dark); soft input fill (dark) |\n| `slate-900` | `oklch(20.8% .042 265.755)` | `#0f172b` | Secondary button fill (dark); read-only input bg (dark) |\n| `slate-950` | `oklch(12.9% .042 264.695)` | `#020618` | (deepest neutral) |\n| `gray-300` | `oklch(87.2% .01 258.338)` | `#d1d5dc` | **Muted text** (`--color-muted` dark) |\n| `gray-600` | `oklch(44.6% .03 256.802)` | `#4a5565` | **Muted text** (`--color-muted` light) |\n| `black` | `#000` | `#000000` | Text (light); base (dark) |\n\n**Accent — `sky`**\n\n| Token | oklch | Hex (computed) | Role in `_ui` |\n| --------- | --------------------------- | -------------- | ---------------------------------------------- |\n| `sky-50` | `oklch(97.7% .013 236.62)` | `#f0f9ff` | Secondary/clear button hover fill (light) |\n| `sky-100` | `oklch(95.1% .026 236.824)` | `#dff2fe` | Default button hover fill; active card (light) |\n| `sky-200` | `oklch(90.1% .058 230.902)` | `#b8e6fe` | Default button active; accent text (dark) |\n| `sky-300` | `oklch(82.8% .111 230.318)` | `#74d4ff` | **Input focus ring** |\n| `sky-400` | `oklch(74.6% .16 232.661)` | `#00bcff` | **Primary button fill (light)** — the accent |\n| `sky-500` | `oklch(68.5% .169 237.323)` | `#00a6f4` | **Button focus ring**; input focus border |\n| `sky-700` | `oklch(50% .134 242.749)` | `#0069a8` | **Primary button fill (dark)** |\n| `sky-800` | `oklch(44.3% .11 240.79)` | `#00598a` | Accent text on light (hover/aria-current) |\n| `sky-950` | `oklch(29.3% .066 243.157)` | `#052f4a` | **Text on `sky-400` primary fill (light)** |\n\n**Danger — `rose`; Success — `emerald`**\n\n| Token | oklch | Hex (computed) | Role |\n| ------------- | --------------------------- | -------------- | ----------------------------------------- |\n| `rose-50` | `oklch(96.9% .015 12.422)` | `#fff1f2` | Private privacy-badge bg |\n| `rose-300` | `oklch(81% .117 11.638)` | `#ffa1ad` | **Danger button fill (light)** |\n| `rose-400` | `oklch(71.2% .194 13.428)` | `#ff637e` | Danger button hover; focus ring |\n| `rose-800` | `oklch(45.5% .188 13.697)` | `#a50036` | **Danger button fill (dark)**; badge text |\n| `rose-950` | `oklch(27.1% .105 12.094)` | `#4d0218` | **Text on danger fill (light)** |\n| `emerald-100` | `oklch(95% .052 163.051)` | `#d0fae5` | Public privacy-badge bg |\n| `emerald-400` | `oklch(76.5% .177 163.223)` | `#00d492` | **Success/green button fill (light)** |\n| `emerald-950` | `oklch(26.2% .051 172.552)` | `#002c22` | Text on success fill (light) |\n\nAlso referenced: `red-300`/`red-700` for input invalid rings; `amber-*` and\n`blue-*` for callout variants; `orange-*` for the \"unlisted\" privacy badge.\n\n---\n\n## 2. Spacing scale\n\n`--spacing: .25rem` → **base unit 4px** (Tailwind v4 default; all\n`gap-*`/`p-*`/`h-*`/`w-*` utilities are multiples of it). No bespoke VT spacing\ntokens. Container widths are also defined\n(`--container-xs 20rem … --container-7xl 80rem`) if a max-width scale is needed.\n\nComponent-level spacing is captured per component in §5.\n\n---\n\n## 3. Border-radius scale\n\nFrom the `@theme` block (verbatim):\n\n| Token | rem | px | Where used in `_ui` |\n| -------------- | --------- | ------- | ------------------------------------------------------------------------------ |\n| `--radius-xs` | `.125rem` | 2px | — |\n| `--radius-sm` | `.25rem` | 4px | — |\n| `--radius-md` | `.375rem` | 6px | — |\n| `--radius-lg` | `.5rem` | **8px** | **Buttons, inputs, selects, textareas, cards, sidebar panels** (the workhorse) |\n| `--radius-xl` | `.75rem` | 12px | Large buttons; callouts |\n| `--radius-2xl` | `1rem` | 16px | — |\n| `--radius-3xl` | `1.5rem` | 24px | — |\n| `rounded-full` | 9999px | — | Privacy badges, pills |\n\nCanonical control radius = **8px (`rounded-lg`)**; large controls step up to\n12px (`rounded-xl`). Matches townie's \"8px radius.\"\n\n---\n\n## 4. Typography\n\n**Font families** (from `tailwind-.css` `html` rule + `app.css`\n`@font-face`)\n\n| Role | Stack | Source |\n| ----------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------- |\n| Sans (body/UI) | `\"IBM Plex Sans\", -apple-system, sans-serif` | `html,:host{…font-family:IBM Plex Sans,-apple-system,sans-serif;line-height:1.5}` |\n| Mono | `\"iA Writer Mono\", \"Menlo\", \"Consolas\", \"ui-monospace\", monospace` | `--font-mono` |\n| Eyebrow / display | `\"iA Writer Quattro\"` (weights 400/700, normal+italic) | `app.css` `@font-face` blocks |\n\n**Type scale** (`--text-*` with paired `--line-height`, verbatim)\n\n| Token | size | line-height (computed) | approx px |\n| ----------- | ----------------- | ---------------------------- | --------- |\n| `text-xs` | `.75rem` (12px) | `calc(1 / .75)` = 1.333 | 12 / 16 |\n| `text-sm` | `.875rem` (14px) | `calc(1.25 / .875)` = 1.429 | 14 / 20 |\n| `text-base` | `1rem` (16px) | `1.5` | 16 / 24 |\n| `text-lg` | `1.125rem` (18px) | `calc(1.75 / 1.125)` = 1.556 | 18 / 28 |\n| `text-xl` | `1.25rem` (20px) | `calc(1.75 / 1.25)` = 1.4 | 20 / 28 |\n| `text-2xl` | `1.5rem` (24px) | `calc(2 / 1.5)` = 1.333 | 24 / 32 |\n| `text-3xl` | `1.875rem` (30px) | `1.2` | 30 / 36 |\n\nControls (buttons/inputs) default to `text-sm` (14/20). `text-[11px]` is used\nfor privacy badges. Default body line-height is `1.5`.\n\n**Font weights** (`--font-weight-*`): normal 400, medium 500, semibold 600, bold\n700, extrabold 800. Buttons are **`font-bold` (700)**; badges are\n**`font-semibold` (600)**; inputs/selects `font-normal` (400).\n\n---\n\n## 5. Component-level styling specs\n\nAll class lists below are verbatim from live `_ui` SSR markup\n(`www.val.town/_ui/`), condensed to the meaningful tokens (dropped the\nlong `[&:not([disabled])]:` guards where they only wrap a hover/active listed\nhere).\n\n### Button (`/_ui/button`)\n\n**Base:**\n`inline-flex items-center justify-center gap-x-2 shrink-0 whitespace-nowrap\nselect-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 outline-0\nfocus-visible:ring-2 transition font-bold`\n\n**Sizes:** `sm` = `text-sm h-8 px-3 rounded-lg` · `md`(default) =\n`text-sm h-10 px-4\nrounded-lg` · `lg` = `text-base h-12 px-5 rounded-xl`.\nIcon-only appends `!px-0 w-8` (sm) / `w-10` (md).\n\n**Focus ring:** `ring-2 ring-sky-500` (rose-400 for danger, emerald-500 for\ngreen, slate-700 for blend).\n\n| Variant | Light fill / text / border | Light hover → active | Dark fill / text | Dark hover → active |\n| ----------- | --------------------------------------------------------------- | ------------------------------------------------------ | ---------------------------------------------------------------- | --------------------------------------------------------- |\n| `default` | `bg-slate-100 text-slate-800` | `bg-sky-100 text-sky-800` → `bg-sky-200` | `bg-slate-800 text-slate-200` | `bg-sky-900 text-sky-200` → `bg-slate-800` |\n| `primary` | `bg-sky-400 text-sky-950` border-transparent | `bg-sky-500` → `bg-sky-600` | `bg-sky-700 text-white` | `bg-sky-600` → `bg-sky-700` |\n| `secondary` | `bg-slate-50 text-black border-slate-200` | `bg-sky-50 text-sky-800 border-sky-200` → `bg-sky-100` | `bg-slate-900 text-white border-slate-800` | `bg-sky-900 text-sky-200 border-sky-500` → `bg-slate-800` |\n| `clear` | `text-black` (no fill) | `text-sky-800 bg-sky-500/10` → `bg-sky-500/5` | `text-white` | `text-sky-200 bg-sky-500/40` → `bg-sky-500/20` |\n| `danger` | `bg-rose-300 text-rose-950` border-transparent | `bg-rose-400` → `bg-rose-500` | `bg-rose-800 text-white` | `bg-rose-700` → `bg-rose-800` |\n| `green` | `bg-emerald-400 text-emerald-950` border-transparent | `bg-emerald-500` → `bg-emerald-600` | `bg-emerald-700 text-white` | `bg-emerald-600` → `bg-emerald-700` |\n| `blend` | `mix-blend-color-burn bg-slate-500 text-black border-slate-700` | `bg-slate-600` → `bg-slate-700` | `mix-blend-color-dodge bg-slate-500 text-white border-slate-400` | `bg-slate-400` → `bg-slate-300` |\n\nKey convention: **primary/danger/green fills use a dark-ink-on-bright-color\npairing in light mode** (`text-sky-950`/`text-rose-950`/`text-emerald-950`) and\nflip to **white ink on a deeper fill in dark mode** (`text-white` on\n`sky-700`/`rose-800`/`emerald-700`).\n\n### Input / Select / Textarea (`/_ui/input`, `/select`, `/textarea`)\n\n**Base:**\n`block w-full border outline-0 transition disabled:cursor-not-allowed\ndisabled:opacity-50 text-sm h-10 px-3 rounded-lg`.\nsm = `h-8 px-2`.\n\n- **Default variant:** `bg-background text-black border-slate-300`, hover\n `border-slate-400`; dark `text-white border-slate-700`, hover\n `border-slate-600`. (Note it uses the semantic `bg-background` token, so field\n bg = white/black by mode.)\n- **Filled/soft variant:** `bg-slate-100 text-black border-transparent`, hover\n `border-slate-300`; dark `bg-slate-800 text-white`, hover `border-slate-700`.\n- **Focus:** `focus-visible:ring-2 focus-visible:ring-sky-300` +\n `focus-visible:border-sky-500`.\n- **Invalid** (`aria-invalid`/`user-invalid`): `ring-red-300 border-red-300`\n (dark `ring-red-700 border-red-700`), hover `border-red-400`.\n- **Read-only:** `read-only:bg-slate-50` (dark `bg-slate-900`).\n- **Disabled:** `opacity-50 cursor-not-allowed`.\n- **Select** adds `appearance-none pr-10 cursor-pointer`; **Textarea** adds\n `h-auto py-2`; a `code` content variant adds `font-mono`.\n\n### Card (`/_ui/card`)\n\nSurface uses `bg-background`, `border`, `rounded-lg`, `transition`; hover\n`hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg` (note: cards\nhover **blue**, not sky). BigCard is the larger variant.\n\n### Callout (`/_ui/callout`)\n\n**Base:**\n`flex flex-wrap items-center gap-2 pl-4 pr-2 py-2 min-h-12 text-sm rounded-xl\nborder`.\nColor variants (light → dark):\n\n- info/blue: `text-blue-800 bg-blue-50 border-blue-100` →\n `text-blue-200 bg-blue-950 border-blue-900`\n- warning/amber: `text-amber-800 bg-amber-100 border-amber-200` →\n `text-amber-100 bg-amber-950 border-amber-900`\n\n### Privacy Badge (`/_ui/privacy-badge`)\n\n**Base:**\n`inline-flex items-center justify-center font-semibold text-[11px] h-5\nmin-w-[56px] rounded-full px-2`.\nVariants:\n\n- public: `text-emerald-800 bg-emerald-100 saturate-50`\n- private: `text-rose-800 bg-rose-50`\n- unlisted: `text-orange-800 bg-orange-50`\n\n### Dropdown / panel (`/_ui/dropdown`)\n\nFloating panel: `bg-background rounded-lg shadow-lg` (width `w-64`, margin\n`m-2`).\n\n### Shadows\n\nTailwind defaults (`shadow-lg` on cards/panels/dropdowns). The `--color-shadow`\nsemantic token (gray-50 light / gray-900 dark) tints shadow color per mode.\ntownie additionally used custom `0 2px 12px rgba(15,23,42,.05)` composer shadows\n(slate-tinted).\n\n---\n\n## 6. Mapping onto Kylä tokens\n\nKylä `--kyla-*` → Val Town values. **Both light and dark are now\nprimary-sourced** from the live `_ui` Tailwind v4 theme (semantic aliases +\ncomponent usage). Hexes are computed from oklch.\n\n| Kylä token | VT source | Light | Dark | Notes |\n| ------------------------------ | -------------------------------------- | ------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `--kyla-base` | `--color-background` | `#ffffff` (white) | `#000000` (**true black**) | VT dark base is pure black (OLED), not gray. |\n| `--kyla-elevated` | _(no VT token)_ | `#ffffff` + shadow | `#0f172b` (`slate-900`) | VT has no elevated-fill token in light; raise via `shadow-lg`. In dark, `slate-900` (secondary-button fill) is the natural raised surface. See Gaps. |\n| `--kyla-recessed` | component `bg-slate-100`/`bg-slate-50` | `#f1f5f9` (`slate-100`) | `#1d293d` (`slate-800`) | Filled input / default-button wells. `slate-50 #f8fafc` is a shallower recess (secondary btn, read-only). |\n| `--kyla-fg` | `--color-text` | `#000000` | `#ffffff` | true-black / true-white. |\n| `--kyla-fg-muted` | `--color-muted` | `#4a5565` (`gray-600`) | `#d1d5dc` (`gray-300`) | VT's real, now-sourced muted token — AA-safe both modes (§7). Supersedes the earlier `slate-700` guess; the two are near-equivalent (`gray-600` 7.56:1, `slate-700` 10.36:1) — either is fine, `gray-600` is the literal VT value. Definitely **not** `slate-400`. |\n| `--kyla-line` | `--color-border` | `#e2e8f0` (`slate-200`) | `#314158` (`slate-700`) | The one VT border token. Note controls use `slate-300`/`slate-700` for _field_ borders — a touch stronger than the panel border. |\n| `--kyla-hairline` | _(no VT token)_ | `#f1f5f9` (`slate-100`) | `#1d293d` (`slate-800`) | VT has no lighter-than-border token; propose one step lighter (light) / the elevated fill (dark). See Gaps. |\n| `--kyla-accent` | primary button fill | `#00bcff` (`sky-400`) | `#0069a8` (`sky-700`) | VT's accent **changes by mode**: bright sky-400 in light, deeper sky-700 in dark. Focus rings use `sky-500 #00a6f4`. |\n| `--kyla-accent-fg` | primary button text | `#052f4a` (`sky-950`, dark ink) | `#ffffff` (white) | Dark ink on the bright light-mode fill; white on the deep dark-mode fill. **Never white on sky-400** (§7). |\n| `--kyla-danger` | danger button fill | `#ffa1ad` (`rose-300`) | `#a50036` (`rose-800`) | Pale rose w/ dark ink (light) → deep rose w/ white (dark). |\n| `--kyla-danger-fg` _(implied)_ | danger button text | `#4d0218` (`rose-950`) | `#ffffff` | Kylä has no danger-fg token — see Gaps. |\n| `--kyla-radius` | `--radius-lg` | `8px` | `8px` | Scale 2/4/6/8/12/16/24; large controls 12px. |\n\nScale-level (needed by the PRD):\n\n| Concept | VT value (light = dark unless noted) |\n| --------------- | ----------------------------------------------------------------------- |\n| Spacing base | `--spacing: .25rem` = 4px |\n| Radius scale | 2 / 4 / 6 / 8 / 12 / 16 / 24 px (`xs…3xl`); control default 8 |\n| Sans | `\"IBM Plex Sans\", -apple-system, sans-serif` |\n| Mono | `\"iA Writer Mono\", \"Menlo\", \"Consolas\", \"ui-monospace\", monospace` |\n| Eyebrow/display | `\"iA Writer Quattro\"` (400/700) |\n| Body type | `text-base` 16px / lh 1.5; controls `text-sm` 14/20 |\n| Weights | 400 / 500 / 600 / 700 / 800; buttons 700, badges 600 |\n| Hues | accent = sky · danger = rose · success = emerald · neutral = slate/gray |\n\n---\n\n## 7. Gaps and AA concerns\n\n### Gaps — Kylä tokens with no direct VT semantic equivalent\n\n- **`--kyla-elevated`, `--kyla-recessed`, `--kyla-hairline`:** VT's semantic\n layer is only `background / text / border / muted / shadow`. There is **no**\n token for a second surface level. In light mode VT elevates by shadow over the\n same white; recessed/hairline surfaces come from raw `slate-50`/`slate-100`\n fills at the component level. The proposed values are the observed component\n fills, not named VT tokens — reasonable but an extrapolation.\n- **`--kyla-danger-fg` / accent-fg split:** VT expresses \"ink on a colored fill\"\n per component (dark-950 in light, white in dark) rather than as a token. Also,\n VT uses several distinct accent roles a single\n `--kyla-accent`/`--kyla-accent-fg` can't hold: **fill** (`sky-400`/`sky-700`),\n **focus ring** (`sky-500`, inputs `sky-300`), and **accent text on a surface**\n (`sky-800` light / `sky-200` dark, used for hover/aria-current). Consider\n `--kyla-accent-ring` and `--kyla-accent-text` in addition to fill+fg.\n\n### VT tokens/roles Kylä has no home for\n\n- **`--color-shadow`** (gray-50 light / gray-900 dark) — a mode-aware shadow\n tint; Kylä has no shadow token.\n- **Field border ≠ panel border:** inputs use `slate-300`/`slate-700`, panels\n use `slate-200`/`slate-700` (`--color-border`). Kylä's single `--kyla-line`\n flattens this.\n- **Semantic status set beyond danger:** VT ships `emerald` (success/green\n button, public badge), `amber`/`blue` (callouts), `orange` (unlisted badge).\n Kylä has only `danger`.\n- **`blend` button** (`mix-blend-color-burn`/`-dodge`) — a mode-adaptive\n technique, no token.\n\n### WCAG AA (ratios **computed** from oklch→sRGB; 4.5:1 body, 3:1 large/UI)\n\n| Foreground | Background | Ratio | Verdict |\n| ------------------------------- | ---------------------------- | ----------- | ----------------------------------------------------------------------------- |\n| `text` black | `background` white (light) | **21.0:1** | Pass AAA |\n| `text` white | `background` black (dark) | **21.0:1** | Pass AAA |\n| `muted` gray-600 | white (light) | **7.56:1** | Pass |\n| `muted` gray-300 | black (dark) | **14.26:1** | Pass |\n| primary `sky-950` | `sky-400` fill (light) | **6.37:1** | Pass |\n| primary white | `sky-700` fill (dark) | **5.86:1** | Pass |\n| default `slate-800` | `slate-100` fill (light) | **13.34:1** | Pass |\n| default-hover `sky-800` | `sky-100` (light) | **6.53:1** | Pass |\n| danger `rose-950` | `rose-300` fill (light) | **8.19:1** | Pass |\n| danger white | `rose-800` fill (dark) | **7.92:1** | Pass |\n| green `emerald-950` | `emerald-400` fill (light) | **7.83:1** | Pass |\n| `slate-700` (field border/text) | white | **10.36:1** | Pass |\n| **white** | **`sky-400`** (anti-pattern) | **2.18:1** | **FAIL** — do not put white on the light accent; VT correctly uses `sky-950`. |\n\nTakeaways for Kylä:\n\n1. Every default VT foreground/surface pairing clears AA comfortably (5.9–21:1)\n in **both** modes — safe to adopt wholesale.\n2. `--kyla-accent-fg` must be **dark ink (`sky-950`) in light** and **white in\n dark**; a single fixed value can't serve both because `sky-400` needs dark\n ink (white fails at 2.18:1) while `sky-700` needs white.\n3. `--kyla-fg-muted` = `gray-600` (light) / `gray-300` (dark) is AA-safe; keep\n the mode split rather than one value.\n4. Note the deliberate **true-black dark background** — visually aggressive\n (21:1); fine for AA, but worth a conscious call vs a softer\n `slate-950 #020618` if Kylä prefers less glare.\n\n---\n\n## 8. Sources\n\n**Primary — live `_ui` (Remix SSR, plain HTTPS GET; class lists verbatim):**\n\n1. `https://www.val.town/_ui/button`, `/callout`, `/card`, `/dropdown`,\n `/input`, `/select`, `/textarea`, `/forms`, `/privacy-badge` —\n server-rendered component markup with full Tailwind class lists (cited per\n component in §5).\n2. `https://static2.esm.town/assets/tailwind-Dy1Hj0e7.css` — compiled Tailwind\n v4 stylesheet: the `@theme` `--color-*` (oklch) / `--spacing` / `--radius-*`\n / `--text-*` / `--font-weight-*` tokens, the `html` font-family rule, and\n VT's semantic aliases in the root layer + `.dark{…}` block (all quoted\n verbatim in §1a, §3, §4). Hash read from the pages' ``\n tags.\n3. `https://static2.esm.town/assets/_app-*.css` — `@font-face` for iA Writer\n Quattro (400/700, normal+italic).\n\n**Secondary — distilled token set (via Val Town MCP `read_file`):** 4.\n`dcm31/townie-mobile` → `frontend/style.css` — `--vt-sky #38bdf8`,\n`--vt-sky-deep\n #0369a1`, `--vt-border #e2e8f0` (Tailwind **v3** hexes), IBM\nPlex Sans body, iA Writer Quattro eyebrow (10px/700/0.14em uppercase).\nReconciled against the live v4 values in the intro; agrees on token names and\nthe dark-ink-on-accent convention, differs on exact hex.\n\n**Value resolution / conversion:** 5. oklch→sRGB hex and all §7 contrast ratios\nare **computed** (D65 sRGB), not read from a source. oklch strings in §1 are the\nsource-of-truth values.\n\n**Informal, non-verbatim signal (not used for any concrete value in this doc):**\n6. `https://www.val.town/secret-styleguide` — Val Town's broader internal\ncomponent library (Tag, Alert, Link, Pagination, Table, Tooltip, Card/\nProjectCard/BigCard, and ~20 more, many product-specific). Unlike the `_ui/*`\npages, this one does not expose Tailwind class attributes to a plain fetch —\nonly rendered layout/component names are recoverable. Cited in the\n`v1-component-set` PRD's VT Parallelism Audit purely as a qualitative signal\n(e.g. confirming Card is really \"ProjectCard,\" or that \"Tag\" is the closer\nanalog to a generic Badge) — never as a source of hex/class values the way §1–§5\nare.\n\nNothing here is invented: every token traces to a CSS property name or a\ncomponent class list; every hex/ratio is a labelled computation from a sourced\noklch value.\n","# Val Town UI style guide — design tokens reference\n\nResearch reference for ADR-0005\n(`docs/adr/0005-val-town-visual-language-default-theme.md`) and the\nscales/palette PRD (`docs/issues/structural-scales-palette/spec.md`). Extracted\n2026-07-06.\n\n## What was found, and from where\n\nVal Town's marketing/app site is a **Remix SSR** application, so a plain HTTP\n`GET` of each `https://www.val.town/_ui/` page returns the **real,\nserver-rendered component markup** — every element with its full Tailwind\nutility class list. The token layer lives in the site's compiled Tailwind **v4**\nstylesheet, linked from every page and served from\n`https://static2.esm.town/assets/tailwind-.css` (current hash at\nextraction time: `tailwind-Dy1Hj0e7.css`). That file contains the Tailwind v4\n`@theme` block (the full `--color-*` scale in **oklch**, plus `--spacing`,\n`--radius-*`, `--text-*`, `--font-weight-*`) **and** Val Town's own semantic\ncolor aliases split across the light `@theme`/`:root` layer and a `.dark {…}`\nblock.\n\n**This is the primary, authoritative source** and it is machine-readable\nend-to-end: component class lists → utility classes → resolved token values, all\nfrom the live site.\n\nA **secondary** source — the val **`dcm31/townie-mobile`**, `frontend/style.css`\n(read via the Val Town MCP `read_file`) — is the distilled token set its author\nhand-fed to Fable. It agrees with the live site on the design _language_\n(slate + sky, IBM Plex Sans, iA Writer Quattro eyebrows, dark-ink-on-accent, 8px\nradius) but its literal hex values are **Tailwind v3** (e.g.\n`--vt-sky: #38bdf8`), which differ numerically from the live site's Tailwind\n**v4** oklch derivations (`sky-400` → `#00bcff`). Reconciliation is called out\nbelow.\n\n### Colour-space note\n\nThe live tokens are **oklch** (Tailwind v4). Every hex in this doc is a\n**computed** oklch→sRGB conversion (D65, standard sRGB transfer). Hexes are\nlabelled as computed; the oklch string is the source-of-truth value. Contrast\nratios are likewise computed from those sRGB values.\n\n### Reconciliation: townie-mobile (v3 hex) vs live `_ui` (v4 oklch)\n\n| Role | townie `style.css` (v3 literal) | live `_ui` (v4 oklch → computed hex) | Agree? |\n| ----------- | --------------------------------------- | --------------------------------------------------- | -------------------------------------- |\n| Accent | `--vt-sky #38bdf8` (sky-400) | `sky-400` `oklch(74.6% .16 232.661)` → `#00bcff` | Same token name; v4 hex more saturated |\n| Deep accent | `--vt-sky-deep #0369a1` (sky-700) | `sky-700` `oklch(50% .134 242.749)` → `#0069a8` | Same name, v4 slightly different |\n| Border | `--vt-border #e2e8f0` (slate-200) | `slate-200` `oklch(92.9% .013 255.508)` → `#e2e8f0` | **Identical** |\n| Accent-fg | send btn `text-sky-950` on `bg-sky-400` | primary btn `text-sky-950` on `bg-sky-400` | **Identical convention** |\n\nBoth confirm **VT = Tailwind slate + sky**. Treat the **live `_ui` v4 oklch\nvalues as current source of truth**; townie's hexes are the older/hand-distilled\nvariant.\n\n---\n\n## 1. Color palette\n\n### 1a. Val Town semantic aliases (the actual theme layer)\n\nVT defines exactly **five** semantic color tokens, each aliased to a raw scale\nstep, with a light default (in the `@theme`/root layer) and a `.dark` override.\nSource: `tailwind-Dy1Hj0e7.css`, `:root`/`@theme` and `.dark{…}` blocks\n(verbatim property names).\n\n| Semantic token | Light → raw | Light hex (computed) | Dark → raw | Dark hex (computed) |\n| -------------------- | ------------------- | -------------------- | ------------------- | ------------------- |\n| `--color-background` | `--color-white` | `#ffffff` | `--color-black` | `#000000` |\n| `--color-text` | `--color-black` | `#000000` | `--color-white` | `#ffffff` |\n| `--color-border` | `--color-slate-200` | `#e2e8f0` | `--color-slate-700` | `#314158` |\n| `--color-muted` | `--color-gray-600` | `#4a5565` | `--color-gray-300` | `#d1d5dc` |\n| `--color-shadow` | `--color-gray-50` | `#f8fafc`* | `--color-gray-900` | `#101828`* |\n\nVerbatim:\n`.dark{--color-text:var(--color-white);--color-background:var(--color-black);--color-border:var(--color-slate-700);--color-muted:var(--color-gray-300);--color-shadow:var(--color-gray-900)}`\nand light\n`--color-text:var(--color-black);--color-background:var(--color-white);--color-border:var(--color-slate-200);--color-muted:var(--color-gray-600);--color-shadow:var(--color-gray-50)`.\n(*`--color-shadow` gray hexes are approximate; used as a shadow tint, not a\nsurface.)\n\nNotable: **dark-mode background is true black** (`#000`) with true-white text —\nan OLED-style maximum-contrast choice, not a dark-gray. There is **no** semantic\ntoken for elevated / recessed surfaces or for accent — those come from raw\n`sky-*`/`slate-*` utilities in the components (§1b, §5).\n\n### 1b. Raw scale steps used across components (Tailwind v4 oklch)\n\nEvery value below is a class observed in live `_ui` component markup. oklch is\nthe source value; hex is computed. Full scales for slate/sky/rose/emerald/gray\nexist in the file; these are the steps actually referenced.\n\n**Neutrals — `slate` (structure) and `gray` (muted text)**\n\n| Token | oklch | Hex (computed) | Role in `_ui` |\n| ----------- | --------------------------- | -------------- | ------------------------------------------------------- |\n| `white` | `#fff` | `#ffffff` | Base surface (light) |\n| `slate-50` | `oklch(98.4% .003 247.858)` | `#f8fafc` | Secondary button fill (light); read-only input bg |\n| `slate-100` | `oklch(96.8% .007 247.896)` | `#f1f5f9` | Default button fill; soft/filled input fill (light) |\n| `slate-200` | `oklch(92.9% .013 255.508)` | `#e2e8f0` | **Border** (`--color-border` light) |\n| `slate-300` | `oklch(86.9% .022 252.894)` | `#cad5e2` | Input border (light); hover border on filled input |\n| `slate-400` | `oklch(70.4% .04 256.788)` | `#90a1b9` | Input hover border (light) |\n| `slate-700` | `oklch(37.2% .044 257.287)` | `#314158` | **Border** (`--color-border` dark); input border (dark) |\n| `slate-800` | `oklch(27.9% .041 260.031)` | `#1d293d` | Default button fill (dark); soft input fill (dark) |\n| `slate-900` | `oklch(20.8% .042 265.755)` | `#0f172b` | Secondary button fill (dark); read-only input bg (dark) |\n| `slate-950` | `oklch(12.9% .042 264.695)` | `#020618` | (deepest neutral) |\n| `gray-300` | `oklch(87.2% .01 258.338)` | `#d1d5dc` | **Muted text** (`--color-muted` dark) |\n| `gray-600` | `oklch(44.6% .03 256.802)` | `#4a5565` | **Muted text** (`--color-muted` light) |\n| `black` | `#000` | `#000000` | Text (light); base (dark) |\n\n**Accent — `sky`**\n\n| Token | oklch | Hex (computed) | Role in `_ui` |\n| --------- | --------------------------- | -------------- | ---------------------------------------------- |\n| `sky-50` | `oklch(97.7% .013 236.62)` | `#f0f9ff` | Secondary/clear button hover fill (light) |\n| `sky-100` | `oklch(95.1% .026 236.824)` | `#dff2fe` | Default button hover fill; active card (light) |\n| `sky-200` | `oklch(90.1% .058 230.902)` | `#b8e6fe` | Default button active; accent text (dark) |\n| `sky-300` | `oklch(82.8% .111 230.318)` | `#74d4ff` | **Input focus ring** |\n| `sky-400` | `oklch(74.6% .16 232.661)` | `#00bcff` | **Primary button fill (light)** — the accent |\n| `sky-500` | `oklch(68.5% .169 237.323)` | `#00a6f4` | **Button focus ring**; input focus border |\n| `sky-700` | `oklch(50% .134 242.749)` | `#0069a8` | **Primary button fill (dark)** |\n| `sky-800` | `oklch(44.3% .11 240.79)` | `#00598a` | Accent text on light (hover/aria-current) |\n| `sky-950` | `oklch(29.3% .066 243.157)` | `#052f4a` | **Text on `sky-400` primary fill (light)** |\n\n**Danger — `rose`; Success — `emerald`**\n\n| Token | oklch | Hex (computed) | Role |\n| ------------- | --------------------------- | -------------- | ----------------------------------------- |\n| `rose-50` | `oklch(96.9% .015 12.422)` | `#fff1f2` | Private privacy-badge bg |\n| `rose-300` | `oklch(81% .117 11.638)` | `#ffa1ad` | **Danger button fill (light)** |\n| `rose-400` | `oklch(71.2% .194 13.428)` | `#ff637e` | Danger button hover; focus ring |\n| `rose-800` | `oklch(45.5% .188 13.697)` | `#a50036` | **Danger button fill (dark)**; badge text |\n| `rose-950` | `oklch(27.1% .105 12.094)` | `#4d0218` | **Text on danger fill (light)** |\n| `emerald-100` | `oklch(95% .052 163.051)` | `#d0fae5` | Public privacy-badge bg |\n| `emerald-400` | `oklch(76.5% .177 163.223)` | `#00d492` | **Success/green button fill (light)** |\n| `emerald-950` | `oklch(26.2% .051 172.552)` | `#002c22` | Text on success fill (light) |\n\nAlso referenced: `red-300`/`red-700` for input invalid rings; `amber-*` and\n`blue-*` for callout variants; `orange-*` for the \"unlisted\" privacy badge.\n\n---\n\n## 2. Spacing scale\n\n`--spacing: .25rem` → **base unit 4px** (Tailwind v4 default; all\n`gap-*`/`p-*`/`h-*`/`w-*` utilities are multiples of it). No bespoke VT spacing\ntokens. Container widths are also defined\n(`--container-xs 20rem … --container-7xl 80rem`) if a max-width scale is needed.\n\nComponent-level spacing is captured per component in §5.\n\n---\n\n## 3. Border-radius scale\n\nFrom the `@theme` block (verbatim):\n\n| Token | rem | px | Where used in `_ui` |\n| -------------- | --------- | ------- | ------------------------------------------------------------------------------ |\n| `--radius-xs` | `.125rem` | 2px | — |\n| `--radius-sm` | `.25rem` | 4px | — |\n| `--radius-md` | `.375rem` | 6px | — |\n| `--radius-lg` | `.5rem` | **8px** | **Buttons, inputs, selects, textareas, cards, sidebar panels** (the workhorse) |\n| `--radius-xl` | `.75rem` | 12px | Large buttons; callouts |\n| `--radius-2xl` | `1rem` | 16px | — |\n| `--radius-3xl` | `1.5rem` | 24px | — |\n| `rounded-full` | 9999px | — | Privacy badges, pills |\n\nCanonical control radius = **8px (`rounded-lg`)**; large controls step up to\n12px (`rounded-xl`). Matches townie's \"8px radius.\"\n\n---\n\n## 4. Typography\n\n**Font families** (from `tailwind-.css` `html` rule + `app.css`\n`@font-face`)\n\n| Role | Stack | Source |\n| ----------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------- |\n| Sans (body/UI) | `\"IBM Plex Sans\", -apple-system, sans-serif` | `html,:host{…font-family:IBM Plex Sans,-apple-system,sans-serif;line-height:1.5}` |\n| Mono | `\"iA Writer Mono\", \"Menlo\", \"Consolas\", \"ui-monospace\", monospace` | `--font-mono` |\n| Eyebrow / display | `\"iA Writer Quattro\"` (weights 400/700, normal+italic) | `app.css` `@font-face` blocks |\n\n**Type scale** (`--text-*` with paired `--line-height`, verbatim)\n\n| Token | size | line-height (computed) | approx px |\n| ----------- | ----------------- | ---------------------------- | --------- |\n| `text-xs` | `.75rem` (12px) | `calc(1 / .75)` = 1.333 | 12 / 16 |\n| `text-sm` | `.875rem` (14px) | `calc(1.25 / .875)` = 1.429 | 14 / 20 |\n| `text-base` | `1rem` (16px) | `1.5` | 16 / 24 |\n| `text-lg` | `1.125rem` (18px) | `calc(1.75 / 1.125)` = 1.556 | 18 / 28 |\n| `text-xl` | `1.25rem` (20px) | `calc(1.75 / 1.25)` = 1.4 | 20 / 28 |\n| `text-2xl` | `1.5rem` (24px) | `calc(2 / 1.5)` = 1.333 | 24 / 32 |\n| `text-3xl` | `1.875rem` (30px) | `1.2` | 30 / 36 |\n\nControls (buttons/inputs) default to `text-sm` (14/20). `text-[11px]` is used\nfor privacy badges. Default body line-height is `1.5`.\n\n**Font weights** (`--font-weight-*`): normal 400, medium 500, semibold 600, bold\n700, extrabold 800. Buttons are **`font-bold` (700)**; badges are\n**`font-semibold` (600)**; inputs/selects `font-normal` (400).\n\n---\n\n## 5. Component-level styling specs\n\nAll class lists below are verbatim from live `_ui` SSR markup\n(`www.val.town/_ui/`), condensed to the meaningful tokens (dropped the\nlong `[&:not([disabled])]:` guards where they only wrap a hover/active listed\nhere).\n\n### Button (`/_ui/button`)\n\n**Base:**\n`inline-flex items-center justify-center gap-x-2 shrink-0 whitespace-nowrap\nselect-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 outline-0\nfocus-visible:ring-2 transition font-bold`\n\n**Sizes:** `sm` = `text-sm h-8 px-3 rounded-lg` · `md`(default) =\n`text-sm h-10 px-4\nrounded-lg` · `lg` = `text-base h-12 px-5 rounded-xl`.\nIcon-only appends `!px-0 w-8` (sm) / `w-10` (md).\n\n**Focus ring:** `ring-2 ring-sky-500` (rose-400 for danger, emerald-500 for\ngreen, slate-700 for blend).\n\n| Variant | Light fill / text / border | Light hover → active | Dark fill / text | Dark hover → active |\n| ----------- | --------------------------------------------------------------- | ------------------------------------------------------ | ---------------------------------------------------------------- | --------------------------------------------------------- |\n| `default` | `bg-slate-100 text-slate-800` | `bg-sky-100 text-sky-800` → `bg-sky-200` | `bg-slate-800 text-slate-200` | `bg-sky-900 text-sky-200` → `bg-slate-800` |\n| `primary` | `bg-sky-400 text-sky-950` border-transparent | `bg-sky-500` → `bg-sky-600` | `bg-sky-700 text-white` | `bg-sky-600` → `bg-sky-700` |\n| `secondary` | `bg-slate-50 text-black border-slate-200` | `bg-sky-50 text-sky-800 border-sky-200` → `bg-sky-100` | `bg-slate-900 text-white border-slate-800` | `bg-sky-900 text-sky-200 border-sky-500` → `bg-slate-800` |\n| `clear` | `text-black` (no fill) | `text-sky-800 bg-sky-500/10` → `bg-sky-500/5` | `text-white` | `text-sky-200 bg-sky-500/40` → `bg-sky-500/20` |\n| `danger` | `bg-rose-300 text-rose-950` border-transparent | `bg-rose-400` → `bg-rose-500` | `bg-rose-800 text-white` | `bg-rose-700` → `bg-rose-800` |\n| `green` | `bg-emerald-400 text-emerald-950` border-transparent | `bg-emerald-500` → `bg-emerald-600` | `bg-emerald-700 text-white` | `bg-emerald-600` → `bg-emerald-700` |\n| `blend` | `mix-blend-color-burn bg-slate-500 text-black border-slate-700` | `bg-slate-600` → `bg-slate-700` | `mix-blend-color-dodge bg-slate-500 text-white border-slate-400` | `bg-slate-400` → `bg-slate-300` |\n\nKey convention: **primary/danger/green fills use a dark-ink-on-bright-color\npairing in light mode** (`text-sky-950`/`text-rose-950`/`text-emerald-950`) and\nflip to **white ink on a deeper fill in dark mode** (`text-white` on\n`sky-700`/`rose-800`/`emerald-700`).\n\n### Input / Select / Textarea (`/_ui/input`, `/select`, `/textarea`)\n\n**Base:**\n`block w-full border outline-0 transition disabled:cursor-not-allowed\ndisabled:opacity-50 text-sm h-10 px-3 rounded-lg`.\nsm = `h-8 px-2`.\n\n- **Default variant:** `bg-background text-black border-slate-300`, hover\n `border-slate-400`; dark `text-white border-slate-700`, hover\n `border-slate-600`. (Note it uses the semantic `bg-background` token, so field\n bg = white/black by mode.)\n- **Filled/soft variant:** `bg-slate-100 text-black border-transparent`, hover\n `border-slate-300`; dark `bg-slate-800 text-white`, hover `border-slate-700`.\n- **Focus:** `focus-visible:ring-2 focus-visible:ring-sky-300` +\n `focus-visible:border-sky-500`.\n- **Invalid** (`aria-invalid`/`user-invalid`): `ring-red-300 border-red-300`\n (dark `ring-red-700 border-red-700`), hover `border-red-400`.\n- **Read-only:** `read-only:bg-slate-50` (dark `bg-slate-900`).\n- **Disabled:** `opacity-50 cursor-not-allowed`.\n- **Select** adds `appearance-none pr-10 cursor-pointer`; **Textarea** adds\n `h-auto py-2`; a `code` content variant adds `font-mono`.\n\n### Card (`/_ui/card`)\n\nSurface uses `bg-background`, `border`, `rounded-lg`, `transition`; hover\n`hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg` (note: cards\nhover **blue**, not sky). BigCard is the larger variant.\n\n### Callout (`/_ui/callout`)\n\n**Base:**\n`flex flex-wrap items-center gap-2 pl-4 pr-2 py-2 min-h-12 text-sm rounded-xl\nborder`.\nColor variants (light → dark):\n\n- info/blue: `text-blue-800 bg-blue-50 border-blue-100` →\n `text-blue-200 bg-blue-950 border-blue-900`\n- warning/amber: `text-amber-800 bg-amber-100 border-amber-200` →\n `text-amber-100 bg-amber-950 border-amber-900`\n\n### Privacy Badge (`/_ui/privacy-badge`)\n\n**Base:**\n`inline-flex items-center justify-center font-semibold text-[11px] h-5\nmin-w-[56px] rounded-full px-2`.\nVariants:\n\n- public: `text-emerald-800 bg-emerald-100 saturate-50`\n- private: `text-rose-800 bg-rose-50`\n- unlisted: `text-orange-800 bg-orange-50`\n\n### Dropdown / panel (`/_ui/dropdown`)\n\nFloating panel: `bg-background rounded-lg shadow-lg` (width `w-64`, margin\n`m-2`).\n\n### Shadows\n\nTailwind defaults (`shadow-lg` on cards/panels/dropdowns). The `--color-shadow`\nsemantic token (gray-50 light / gray-900 dark) tints shadow color per mode.\ntownie additionally used custom `0 2px 12px rgba(15,23,42,.05)` composer shadows\n(slate-tinted).\n\n---\n\n## 6. Mapping onto Kylä tokens\n\nKylä `--kyla-*` → Val Town values. **Both light and dark are now\nprimary-sourced** from the live `_ui` Tailwind v4 theme (semantic aliases +\ncomponent usage). Hexes are computed from oklch.\n\n| Kylä token | VT source | Light | Dark | Notes |\n| ------------------------------ | -------------------------------------- | ------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `--kyla-base` | `--color-background` | `#ffffff` (white) | `#000000` (**true black**) | VT dark base is pure black (OLED), not gray. |\n| `--kyla-elevated` | _(no VT token)_ | `#ffffff` + shadow | `#0f172b` (`slate-900`) | VT has no elevated-fill token in light; raise via `shadow-lg`. In dark, `slate-900` (secondary-button fill) is the natural raised surface. See Gaps. |\n| `--kyla-recessed` | component `bg-slate-100`/`bg-slate-50` | `#f1f5f9` (`slate-100`) | `#1d293d` (`slate-800`) | Filled input / default-button wells. `slate-50 #f8fafc` is a shallower recess (secondary btn, read-only). |\n| `--kyla-fg` | `--color-text` | `#000000` | `#ffffff` | true-black / true-white. |\n| `--kyla-fg-muted` | `--color-muted` | `#4a5565` (`gray-600`) | `#d1d5dc` (`gray-300`) | VT's real, now-sourced muted token — AA-safe both modes (§7). Supersedes the earlier `slate-700` guess; the two are near-equivalent (`gray-600` 7.56:1, `slate-700` 10.36:1) — either is fine, `gray-600` is the literal VT value. Definitely **not** `slate-400`. |\n| `--kyla-line` | `--color-border` | `#e2e8f0` (`slate-200`) | `#314158` (`slate-700`) | The one VT border token. Note controls use `slate-300`/`slate-700` for _field_ borders — a touch stronger than the panel border. |\n| `--kyla-hairline` | _(no VT token)_ | `#f1f5f9` (`slate-100`) | `#1d293d` (`slate-800`) | VT has no lighter-than-border token; propose one step lighter (light) / the elevated fill (dark). See Gaps. |\n| `--kyla-accent` | primary button fill | `#00bcff` (`sky-400`) | `#0069a8` (`sky-700`) | VT's accent **changes by mode**: bright sky-400 in light, deeper sky-700 in dark. Focus rings use `sky-500 #00a6f4`. |\n| `--kyla-accent-fg` | primary button text | `#052f4a` (`sky-950`, dark ink) | `#ffffff` (white) | Dark ink on the bright light-mode fill; white on the deep dark-mode fill. **Never white on sky-400** (§7). |\n| `--kyla-danger` | danger button fill | `#ffa1ad` (`rose-300`) | `#a50036` (`rose-800`) | Pale rose w/ dark ink (light) → deep rose w/ white (dark). |\n| `--kyla-danger-fg` _(implied)_ | danger button text | `#4d0218` (`rose-950`) | `#ffffff` | Kylä has no danger-fg token — see Gaps. |\n| `--kyla-radius` | `--radius-lg` | `8px` | `8px` | Scale 2/4/6/8/12/16/24; large controls 12px. |\n\nScale-level (needed by the PRD):\n\n| Concept | VT value (light = dark unless noted) |\n| --------------- | ----------------------------------------------------------------------- |\n| Spacing base | `--spacing: .25rem` = 4px |\n| Radius scale | 2 / 4 / 6 / 8 / 12 / 16 / 24 px (`xs…3xl`); control default 8 |\n| Sans | `\"IBM Plex Sans\", -apple-system, sans-serif` |\n| Mono | `\"iA Writer Mono\", \"Menlo\", \"Consolas\", \"ui-monospace\", monospace` |\n| Eyebrow/display | `\"iA Writer Quattro\"` (400/700) |\n| Body type | `text-base` 16px / lh 1.5; controls `text-sm` 14/20 |\n| Weights | 400 / 500 / 600 / 700 / 800; buttons 700, badges 600 |\n| Hues | accent = sky · danger = rose · success = emerald · neutral = slate/gray |\n\n---\n\n## 7. Gaps and AA concerns\n\n### Gaps — Kylä tokens with no direct VT semantic equivalent\n\n- **`--kyla-elevated`, `--kyla-recessed`, `--kyla-hairline`:** VT's semantic\n layer is only `background / text / border / muted / shadow`. There is **no**\n token for a second surface level. In light mode VT elevates by shadow over the\n same white; recessed/hairline surfaces come from raw `slate-50`/`slate-100`\n fills at the component level. The proposed values are the observed component\n fills, not named VT tokens — reasonable but an extrapolation.\n- **`--kyla-danger-fg` / accent-fg split:** VT expresses \"ink on a colored fill\"\n per component (dark-950 in light, white in dark) rather than as a token. Also,\n VT uses several distinct accent roles a single\n `--kyla-accent`/`--kyla-accent-fg` can't hold: **fill** (`sky-400`/`sky-700`),\n **focus ring** (`sky-500`, inputs `sky-300`), and **accent text on a surface**\n (`sky-800` light / `sky-200` dark, used for hover/aria-current). Consider\n `--kyla-accent-ring` and `--kyla-accent-text` in addition to fill+fg.\n\n### VT tokens/roles Kylä has no home for\n\n- **`--color-shadow`** (gray-50 light / gray-900 dark) — a mode-aware shadow\n tint; Kylä has no shadow token.\n- **Field border ≠ panel border:** inputs use `slate-300`/`slate-700`, panels\n use `slate-200`/`slate-700` (`--color-border`). Kylä's single `--kyla-line`\n flattens this.\n- **Semantic status set beyond danger:** VT ships `emerald` (success/green\n button, public badge), `amber`/`blue` (callouts), `orange` (unlisted badge).\n Kylä has only `danger`.\n- **`blend` button** (`mix-blend-color-burn`/`-dodge`) — a mode-adaptive\n technique, no token.\n\n### WCAG AA (ratios **computed** from oklch→sRGB; 4.5:1 body, 3:1 large/UI)\n\n| Foreground | Background | Ratio | Verdict |\n| ------------------------------- | ---------------------------- | ----------- | ----------------------------------------------------------------------------- |\n| `text` black | `background` white (light) | **21.0:1** | Pass AAA |\n| `text` white | `background` black (dark) | **21.0:1** | Pass AAA |\n| `muted` gray-600 | white (light) | **7.56:1** | Pass |\n| `muted` gray-300 | black (dark) | **14.26:1** | Pass |\n| primary `sky-950` | `sky-400` fill (light) | **6.37:1** | Pass |\n| primary white | `sky-700` fill (dark) | **5.86:1** | Pass |\n| default `slate-800` | `slate-100` fill (light) | **13.34:1** | Pass |\n| default-hover `sky-800` | `sky-100` (light) | **6.53:1** | Pass |\n| danger `rose-950` | `rose-300` fill (light) | **8.19:1** | Pass |\n| danger white | `rose-800` fill (dark) | **7.92:1** | Pass |\n| green `emerald-950` | `emerald-400` fill (light) | **7.83:1** | Pass |\n| `slate-700` (field border/text) | white | **10.36:1** | Pass |\n| **white** | **`sky-400`** (anti-pattern) | **2.18:1** | **FAIL** — do not put white on the light accent; VT correctly uses `sky-950`. |\n\nTakeaways for Kylä:\n\n1. Every default VT foreground/surface pairing clears AA comfortably (5.9–21:1)\n in **both** modes — safe to adopt wholesale.\n2. `--kyla-accent-fg` must be **dark ink (`sky-950`) in light** and **white in\n dark**; a single fixed value can't serve both because `sky-400` needs dark\n ink (white fails at 2.18:1) while `sky-700` needs white.\n3. `--kyla-fg-muted` = `gray-600` (light) / `gray-300` (dark) is AA-safe; keep\n the mode split rather than one value.\n4. Note the deliberate **true-black dark background** — visually aggressive\n (21:1); fine for AA, but worth a conscious call vs a softer\n `slate-950 #020618` if Kylä prefers less glare.\n\n---\n\n## 8. Sources\n\n**Primary — live `_ui` (Remix SSR, plain HTTPS GET; class lists verbatim):**\n\n1. `https://www.val.town/_ui/button`, `/callout`, `/card`, `/dropdown`,\n `/input`, `/select`, `/textarea`, `/forms`, `/privacy-badge` —\n server-rendered component markup with full Tailwind class lists (cited per\n component in §5).\n2. `https://static2.esm.town/assets/tailwind-Dy1Hj0e7.css` — compiled Tailwind\n v4 stylesheet: the `@theme` `--color-*` (oklch) / `--spacing` / `--radius-*`\n / `--text-*` / `--font-weight-*` tokens, the `html` font-family rule, and\n VT's semantic aliases in the root layer + `.dark{…}` block (all quoted\n verbatim in §1a, §3, §4). Hash read from the pages' ``\n tags.\n3. `https://static2.esm.town/assets/_app-*.css` — `@font-face` for iA Writer\n Quattro (400/700, normal+italic).\n\n**Secondary — distilled token set (via Val Town MCP `read_file`):** 4.\n`dcm31/townie-mobile` → `frontend/style.css` — `--vt-sky #38bdf8`,\n`--vt-sky-deep\n #0369a1`, `--vt-border #e2e8f0` (Tailwind **v3** hexes), IBM\nPlex Sans body, iA Writer Quattro eyebrow (10px/700/0.14em uppercase).\nReconciled against the live v4 values in the intro; agrees on token names and\nthe dark-ink-on-accent convention, differs on exact hex.\n\n**Value resolution / conversion:** 5. oklch→sRGB hex and all §7 contrast ratios\nare **computed** (D65 sRGB), not read from a source. oklch strings in §1 are the\nsource-of-truth values.\n\n**Informal, non-verbatim signal (not used for any concrete value in this doc):**\n6. `https://www.val.town/secret-styleguide` — Val Town's broader internal\ncomponent library (Tag, Alert, Link, Pagination, Table, Tooltip, Card/\nProjectCard/BigCard, and ~20 more, many product-specific). Unlike the `_ui/*`\npages, this one does not expose Tailwind class attributes to a plain fetch —\nonly rendered layout/component names are recoverable. Cited in the\n`v1-component-set` PRD's VT Parallelism Audit purely as a qualitative signal\n(e.g. confirming Card is really \"ProjectCard,\" or that \"Tag\" is the closer\nanalog to a generic Badge) — never as a source of hex/class values the way §1–§5\nare.\n\nNothing here is invented: every token traces to a CSS property name or a\ncomponent class list; every hex/ratio is a labelled computation from a sourced\noklch value.\n","createdAt",["D",1784059571413],"branchVersion","branchId","687a9437-44a8-49ca-94d7-3277b6842513","id","a2eea118-e17c-4a68-9fa4-155c6cf32150","kyla-ui",["D",1781804868537],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Components for consistently styled web apps on Val Town","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","a2eea118e17c4a689fa4155c6cf32150","tursoHostname","a2eea118e17c4a689fa4155c6cf32150-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789701064442],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"isOwned",269,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nbbaier","handle","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":779,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":780,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":781,"_82":782,"_84":783,"_86":25},"tree",[226,273,277,289,290,291,292,293,294,295],"files",[226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295],"counts",{"_216":61,"_217":164,"_218":194,"_219":220,"_221":222},"contents",[129,130,131,132,133,134,135,136,137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":210,"_32":211,"_30":212,"_142":-5,"_41":42,"_40":213,"_144":124,"_38":214,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_27":215},{"_43":204,"_32":205,"_30":206,"_142":-5,"_41":42,"_40":207,"_144":124,"_38":208,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_27":209},{"_43":197,"_32":198,"_30":199,"_142":-5,"_41":42,"_40":200,"_144":124,"_38":201,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_27":203},{"_43":189,"_32":190,"_30":191,"_142":-5,"_41":42,"_40":192,"_144":124,"_38":193,"_13":194,"_34":20,"_35":195,"_24":25,"_149":-5,"_27":196},{"_43":183,"_32":184,"_30":185,"_142":-5,"_41":42,"_40":186,"_144":25,"_38":187,"_13":156,"_34":20,"_35":181,"_24":25,"_149":-5,"_27":188},{"_43":175,"_32":176,"_30":177,"_142":-5,"_41":42,"_40":178,"_144":25,"_38":179,"_13":180,"_34":20,"_35":181,"_24":25,"_149":-5,"_27":182},{"_43":167,"_32":168,"_30":169,"_142":-5,"_41":42,"_40":170,"_144":25,"_38":171,"_13":172,"_34":20,"_35":173,"_24":25,"_149":-5,"_27":174},{"_43":159,"_32":160,"_30":161,"_142":-5,"_41":42,"_40":162,"_144":25,"_38":163,"_13":164,"_34":20,"_35":165,"_24":25,"_149":-5,"_27":166},{"_43":151,"_32":152,"_30":153,"_142":-5,"_41":42,"_40":154,"_144":124,"_38":155,"_13":156,"_34":20,"_35":157,"_24":25,"_149":-5,"_27":158},{"_43":139,"_32":140,"_30":141,"_142":-5,"_41":42,"_40":143,"_144":25,"_38":145,"_13":146,"_34":147,"_35":148,"_24":25,"_149":-5,"_27":150},"3e999b05-fb36-482c-ab6a-8727b74c5daa","mod.ts","92255786-6b52-11f1-8262-1607ee4eb77e","parentId",218,"latest",["D",1784058614099],3,"script","/**\n * Kylä UI — public barrel for the zero-dependency core.\n *\n * Radix-backed components (e.g. Dialog) are intentionally NOT re-exported here;\n * they live behind their own import paths so Radix only loads when used (ADR-0002).\n */\n\n// Components\nexport { Button, type ButtonProps } from \"./src/components/button.tsx\";\nexport { KylaProvider, type Mode, useKylaMode } from \"./src/theme/provider.tsx\";\nexport { type ColorToken, type State, tw } from \"./src/theme/tw.ts\";\nexport { cn } from \"./src/utils/cn.ts\";\nexport { variants } from \"./src/utils/variants.ts\";\n","label",[140],"fb6b027f-bd29-4744-8112-2dc00068f0a8","deno.json","47d67822-6b3e-11f1-bad1-1607ee4eb77e",223,["D",1784059569607],4,"{\n \"compilerOptions\": {\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"]\n },\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-sloppy-imports\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true\n },\n \"fmt\": {\n \"exclude\": [\".vt/\"]\n },\n \"lint\": {\n \"include\": [\"mod.ts\", \"preview/\", \"src/\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-import-prefix\"]\n }\n },\n \"tasks\": {\n \"fmt\": \"deno fmt\",\n \"fmt:check\": \"deno fmt --check\",\n \"lint\": \"deno lint\",\n \"typecheck\": \"deno check --allow-import=esm.town,www.val.town,esm.sh,jsr.io mod.ts preview src\",\n \"test\": \"deno test --allow-import=esm.town,www.val.town,esm.sh,jsr.io\",\n \"check\": \"deno task fmt:check && deno task lint && deno task typecheck && deno task test\"\n },\n \"lock\": false,\n \"nodeModulesDir\": \"auto\"\n}\n",[152],"62b6399a-f511-424d-a3cb-d2cc8d8347f2","README.md","ec9dd180-6b3d-11f1-89a3-1607ee4eb77e",204,["D",1784058612287],7,"# Kylä UI\n\nA component library for building **consistently styled** web apps on Val Town.\nKylä is Finnish for \"village.\"\n\nMost Val Town apps are assembled fast and without a designer, so they end up\nlooking inconsistent. Kylä gives you opinionated, on-system components so your\napp looks coherent by default. Accessibility (semantic HTML, label association,\nvisible focus, AA contrast) is a quiet guarantee underneath.\n\nBuilt for Val Town's reality: **no build step**. Components are React, styled\nwith runtime [Twind](https://twind.style) + semantic CSS-variable tokens, and\nconsumed by import — no bundler, no codegen.\n\n## Quick start\n\n1. Your HTML shell must load Twind (it has to be present before first paint):\n\n ```html\n \n ```\n\n2. Wrap your app in `KylaProvider` (it injects the design tokens and owns\n light/dark mode), then use components:\n\n ```tsx\n /** @jsxImportSource https://esm.sh/react@18.2.0 */\n import {\n Button,\n KylaProvider,\n } from \"https://esm.town/v/nbbaier/kyla-ui/mod.ts\";\n\n export function App() {\n return (\n \n \n \n );\n }\n ```\n\nTo pin a version, append `?v=NNN` to the import URL; the unpinned URL always\ntracks the latest release (see\n[ADR-0004](docs/adr/0004-version-pinned-upgrade-contract.md)).\n\n## Status\n\nEarly. The styling foundation (`cn`, `tw`, `variants`, `KylaProvider`) and the\nfirst component (`Button`) are in place; the rest of the v1 component set and\nthe real design palette are still to come.\n\n## Components\n\n- `Button` — `variant`: `primary | subtle | ghost | danger`, `size`:\n `sm | md | lg`.\n\n## Project docs\n\n- [`CONTEXT.md`](CONTEXT.md) — the glossary / shared language.\n- [`docs/roadmap.md`](docs/roadmap.md) — the dependency-ordered plan to v1 +\n status.\n- [`docs/adr/`](docs/adr/) — architecture decision records.\n\nThe substrate (Radix + Twind + tokens + Provider on Val Town) is proven in a\nseparate spike val, `nbbaier/kyla-ui-spike`.\n",[160],"2a2918a9-7e7b-4b9e-a2fe-7d1c29ffdd5c","CONTEXT.md","bce56486-6b46-11f1-8898-1607ee4eb77e",174,["D",1784058609130],5,"# Kylä UI — Context\n\nA glossary of the core terms in this project. Implementation details live in\ncode and ADRs, not here.\n\n> \"Kylä\" is Finnish for \"village.\"\n\n## Glossary\n\n### Kylä UI\n\nThe component library itself: a Val Town val (`nbbaier/kyla-ui`) that exports\nReact components, a styling system, and any helpers needed to build consistently\nstyled web apps. It is **consumed by import**\n(`import { ... } from \"https://esm.town/v/nbbaier/kyla-ui/...\"`), not by\nremixing. This val is the source of truth for visual consistency across apps. It\n**also serves its own Gallery** (docs) at its HTTP route — the library documents\nitself, co-located with its source.\n\n### Starter\n\nA separate, remixable demo val (`kyla-ui-starter` or similar) that shows\nidiomatic _end-to-end_ use of Kylä UI: a tiny but genuine **todo app** with a\nreal HTTP route and `std/sqlite`, a working app shell, Provider + hydration\nwiring, and view-source link. A new app begins by remixing the Starter, then\nediting. The Starter **depends on** Kylä UI; the library never depends on the\nStarter. (Component reference/docs live in the library's Gallery, not the\nStarter.)\n\n### Gallery\n\nThe library's self-hosted documentation surface: an HTTP route on `kyla-ui` that\nrenders every component in its variants and Modes, with the Mode toggle. It is\nboth living docs and the in-browser proof that the stack renders correctly on\nVal Town (Twind + CSS-var tokens, Provider mode, Radix `Dialog` hydration). The\nseed of a fuller docs site later.\n\n### Release\n\nA blessed version of Kylä UI, produced by merging a development branch into\n`main`. `main` is the stable line: raw development never happens on it, so\nHEAD-of-`main` is always a Release. Each Release corresponds to a concrete Val\nTown version number (`?v=NNN`). A consumer tracks Releases by importing the\nunpinned URL (always latest Release) or freezes onto one by pinning its\n`?v=NNN`, which the README's release table maps by name.\n\n### Consumer\n\nA web app (a val) built with Kylä UI. Gets visual consistency by importing the\nlibrary rather than copying its code.\n\n### Semantic Token\n\nA named, intent-based design value (e.g. \"base surface,\" \"default foreground,\"\n\"line/border,\" \"danger\") rather than a raw value (e.g. \"blue-500\"). Components\nreference semantic tokens only; they never hard-code raw colors. Tokens are the\nunit of visual consistency and the surface through which a Theme is applied.\n(Modeled on Cloudflare Kumo's semantic-token system.)\n\nCanonical token vocabulary (CSS custom properties, all prefixed `--kyla-`):\n\n- **Surfaces** (hierarchy): `base` → `elevated` → `recessed`\n- **Foreground:** `fg`, `fg-muted`\n- **Borders:** `line`, `hairline`\n- **Accent:** `accent`, `accent-fg`, `accent-ring`, `accent-text`\n- **Status:** `danger`, `danger-fg`, `success`, `success-fg`\n- **Shape:** `radius`\n\nThe default theme's values conform to the Val Town UI style guide (see\n[ADR-0005](docs/adr/0005-val-town-visual-language-default-theme.md)); Kylä keeps\nits own richer surface hierarchy over VT's palette.\n\nOf these, the consumer-facing Override Surface for v1 is intentionally small\n(e.g. `--kyla-accent`, `--kyla-radius`, font); the rest are structural and stay\nfixed.\n\n### Theme\n\nA complete set of values bound to the Semantic Tokens, producing a coherent\nlook. A consumer switches the active theme without touching component code.\nLight/dark is one axis of theming; brand/variant overrides are another.\n\nFor v1, Kylä ships **one opinionated theme** with automatic light/dark, and\nexposes a deliberately small **Override Surface** — a few tokens (e.g. accent,\nradius, font) a consumer may redefine to express brand. Structural tokens\n(surface hierarchy, spacing, borders) stay fixed; that fixedness _is_ the\nconsistency. A fuller named-theme system (multiple consumer-defined Themes, à la\nKumo's theme configs) is a deliberate later step, not a v1 feature.\n\n### Variant\n\nA named, typed dimension of a component's appearance exposed as a prop (e.g.\n`variant=\"primary\"`, `size=\"sm\"`, `tone=\"danger\"`). Variants map to Semantic\nTokens internally; they are the consumer's primary, discoverable means of\nvarying a component while staying on-system. An escape-hatch `className` always\nmerges last, letting an app deviate locally without forking. For v1 the public\nsurface is finished components plus a `cn()` helper and the Provider — the\nunderlying Headless Primitives stay internal.\n\n### Mode\n\nThe light/dark axis of a Theme. Modeled as\n`data-mode=\"light\" | \"dark\" | \"system\"`, where `system` falls through to the OS\npreference via CSS `light-dark()` (zero JS). Mode is **owned by the Provider** —\nit sets `data-mode` and exposes a hook to read/set it (persistence opt-in) — so\napps get a first-class light/dark toggle without hand-rolling one (a common\nsource of inconsistency and flash-of-wrong-theme bugs).\n\n### Headless Primitive\n\nThe behavior-and-accessibility layer of an interactive component (focus\nmanagement, keyboard nav, ARIA), independent of its visual styling. For the hard\ninteractive components (Dialog, Popover, Menu, Tabs), Kylä builds on a\nthird-party headless primitive library rather than hand-rolling. Simple visual\ncomponents (Button, Card, Stack, Text, Input, Badge) have no separate Headless\nPrimitive — they are styled directly.\n",[168],"16d56331-fa60-4ad6-828c-e4aa90df5d26","CLAUDE.md","a53286c6-775c-11f1-abf2-1607ee4eb77e",209,["D",1784058612706],6,"## Working on changes\n\nDevelopment happens on a Val Town **val branch**, never directly on `main`.\n`main` is the stable release line — HEAD-of-`main` is always a Release (a\nconcrete `?v=NNN`), so raw work never lands on it. Branch off `main`, do the\nwork on the branch, and land it by merging the branch into `main`, which cuts\nthe next Release. See\n[ADR-0004](docs/adr/0004-version-pinned-upgrade-contract.md) for the rationale\nand the consumer-facing pinning contract.\n\n**Exception: docs-only changes push straight to `main`.** Changes confined to\n`docs/**` (PRDs, ADRs, roadmap, reference docs) carry no code/version surface,\nso they don't need a branch + merge cycle — push them directly. Any change that\ntouches `src/`, `mod.ts`, or other shipped code still follows the branch flow\nabove.\n\n## Agent skills\n\n### Issue tracker\n\nIssues and PRDs live as local markdown files under\n`docs/issues//`; no external tracker. See\n`docs/agents/issue-tracker.md`.\n\n### Triage labels\n\nUses the default five-role label vocabulary unchanged (`needs-triage`,\n`needs-info`, `ready-for-agent`, `ready-for-human`, `wontfix`). See\n`docs/agents/triage-labels.md`.\n\n### Domain docs\n\nSingle-context layout: `CONTEXT.md` + `docs/adr/` at the repo root. See\n`docs/agents/domain.md`.\n",[176],"2e526e7a-43ed-462a-9002-10a05fff27d6","AGENTS.md","9b865e5e-7770-11f1-b136-1607ee4eb77e",206,["D",1784058612540],[184],"1c7f3876-c7c1-4d67-8ed9-16bd851ecf3f",".vtignore","47ce4d8c-6b3e-11f1-8eca-1607ee4eb77e",13,["D",1781805649048],1,".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor\n.claude",[190],"da3f4f02-c070-4df1-9bc5-96c25fc6eefd","src","91e38b30-6b52-11f1-bb7a-1607ee4eb77e",28,["D",1781813780417],"directory",[198],"aac8fba5-9942-4296-93bc-56339f5fdbb7","preview","019f397a-0ad7-770b-b0dd-ab97f904224e",78,["D",1783375727322],[205],"61b715f9-32d9-45da-bff6-008ae80a2386","docs","bc8b0c5c-6b46-11f1-aeb1-1607ee4eb77e",14,["D",1781808698019],[211],"pulls","branches","forks","envVars",{"_223":61,"_225":61},"connections",{"_223":61,"_224":61},"count","unfilledCount","emptyCount",{"_43":210,"_32":211,"_30":212,"_142":-5,"_41":42,"_40":213,"_144":124,"_38":776,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":777,"_27":778},{"_43":771,"_32":738,"_30":732,"_142":212,"_41":42,"_40":772,"_144":124,"_38":773,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":774,"_27":775},{"_43":763,"_32":764,"_30":765,"_142":732,"_41":42,"_40":766,"_144":124,"_38":767,"_13":146,"_34":20,"_35":768,"_24":25,"_149":-5,"_297":769,"_27":770},{"_43":755,"_32":756,"_30":757,"_142":732,"_41":42,"_40":758,"_144":124,"_38":759,"_13":194,"_34":20,"_35":760,"_24":25,"_149":-5,"_297":761,"_27":762},{"_43":747,"_32":748,"_30":749,"_142":732,"_41":42,"_40":750,"_144":124,"_38":751,"_13":194,"_34":20,"_35":752,"_24":25,"_149":-5,"_297":753,"_27":754},{"_43":739,"_32":740,"_30":741,"_142":732,"_41":42,"_40":742,"_144":124,"_38":743,"_13":194,"_34":20,"_35":744,"_24":25,"_149":-5,"_297":745,"_27":746},{"_43":729,"_32":730,"_30":731,"_142":732,"_41":42,"_40":733,"_144":124,"_38":734,"_13":324,"_34":20,"_35":735,"_24":25,"_149":-5,"_297":736,"_27":737},{"_43":724,"_32":707,"_30":701,"_142":212,"_41":42,"_40":725,"_144":124,"_38":726,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":727,"_27":728},{"_43":716,"_32":717,"_30":718,"_142":701,"_41":42,"_40":719,"_144":124,"_38":720,"_13":194,"_34":20,"_35":721,"_24":25,"_149":-5,"_297":722,"_27":723},{"_43":708,"_32":709,"_30":710,"_142":701,"_41":42,"_40":711,"_144":124,"_38":712,"_13":164,"_34":20,"_35":713,"_24":25,"_149":-5,"_297":714,"_27":715},{"_43":698,"_32":699,"_30":700,"_142":701,"_41":42,"_40":702,"_144":124,"_38":703,"_13":146,"_34":20,"_35":704,"_24":25,"_149":-5,"_297":705,"_27":706},{"_43":693,"_32":692,"_30":686,"_142":212,"_41":42,"_40":694,"_144":124,"_38":695,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":696,"_27":697},{"_43":683,"_32":684,"_30":685,"_142":686,"_41":42,"_40":687,"_144":124,"_38":688,"_13":194,"_34":20,"_35":689,"_24":25,"_149":-5,"_297":690,"_27":691},{"_43":678,"_32":461,"_30":503,"_142":212,"_41":42,"_40":679,"_144":124,"_38":680,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":681,"_27":682},{"_43":673,"_32":658,"_30":652,"_142":503,"_41":42,"_40":674,"_144":124,"_38":675,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":676,"_27":677},{"_43":668,"_32":461,"_30":662,"_142":652,"_41":42,"_40":669,"_144":124,"_38":670,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":671,"_27":672},{"_43":659,"_32":660,"_30":661,"_142":662,"_41":42,"_40":663,"_144":124,"_38":664,"_13":324,"_34":20,"_35":665,"_24":25,"_149":-5,"_297":666,"_27":667},{"_43":650,"_32":453,"_30":651,"_142":652,"_41":42,"_40":653,"_144":25,"_38":654,"_13":324,"_34":20,"_35":655,"_24":25,"_149":-5,"_297":656,"_27":657},{"_43":645,"_32":614,"_30":608,"_142":503,"_41":42,"_40":646,"_144":124,"_38":647,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":648,"_27":649},{"_43":640,"_32":461,"_30":618,"_142":608,"_41":42,"_40":641,"_144":124,"_38":642,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":643,"_27":644},{"_43":632,"_32":633,"_30":634,"_142":618,"_41":42,"_40":635,"_144":124,"_38":636,"_13":324,"_34":20,"_35":637,"_24":25,"_149":-5,"_297":638,"_27":639},{"_43":624,"_32":625,"_30":626,"_142":618,"_41":42,"_40":627,"_144":124,"_38":628,"_13":324,"_34":20,"_35":629,"_24":25,"_149":-5,"_297":630,"_27":631},{"_43":615,"_32":616,"_30":617,"_142":618,"_41":42,"_40":619,"_144":124,"_38":620,"_13":324,"_34":20,"_35":621,"_24":25,"_149":-5,"_297":622,"_27":623},{"_43":606,"_32":453,"_30":607,"_142":608,"_41":42,"_40":609,"_144":124,"_38":610,"_13":324,"_34":20,"_35":611,"_24":25,"_149":-5,"_297":612,"_27":613},{"_43":601,"_32":570,"_30":564,"_142":503,"_41":42,"_40":602,"_144":124,"_38":603,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":604,"_27":605},{"_43":596,"_32":461,"_30":574,"_142":564,"_41":42,"_40":597,"_144":124,"_38":598,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":599,"_27":600},{"_43":588,"_32":589,"_30":590,"_142":574,"_41":42,"_40":591,"_144":124,"_38":592,"_13":324,"_34":20,"_35":593,"_24":25,"_149":-5,"_297":594,"_27":595},{"_43":580,"_32":581,"_30":582,"_142":574,"_41":42,"_40":583,"_144":124,"_38":584,"_13":324,"_34":20,"_35":585,"_24":25,"_149":-5,"_297":586,"_27":587},{"_43":571,"_32":572,"_30":573,"_142":574,"_41":42,"_40":575,"_144":25,"_38":576,"_13":194,"_34":20,"_35":577,"_24":25,"_149":-5,"_297":578,"_27":579},{"_43":562,"_32":509,"_30":563,"_142":564,"_41":42,"_40":565,"_144":25,"_38":566,"_13":194,"_34":20,"_35":567,"_24":25,"_149":-5,"_297":568,"_27":569},{"_43":557,"_32":517,"_30":511,"_142":503,"_41":42,"_40":558,"_144":124,"_38":559,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":560,"_27":561},{"_43":552,"_32":461,"_30":521,"_142":511,"_41":42,"_40":553,"_144":124,"_38":554,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":555,"_27":556},{"_43":543,"_32":544,"_30":545,"_142":521,"_41":42,"_40":546,"_144":124,"_38":547,"_13":548,"_34":20,"_35":549,"_24":25,"_149":-5,"_297":550,"_27":551},{"_43":535,"_32":536,"_30":537,"_142":521,"_41":42,"_40":538,"_144":25,"_38":539,"_13":156,"_34":20,"_35":540,"_24":25,"_149":-5,"_297":541,"_27":542},{"_43":527,"_32":528,"_30":529,"_142":521,"_41":42,"_40":530,"_144":25,"_38":531,"_13":180,"_34":20,"_35":532,"_24":25,"_149":-5,"_297":533,"_27":534},{"_43":518,"_32":519,"_30":520,"_142":521,"_41":42,"_40":522,"_144":25,"_38":523,"_13":172,"_34":20,"_35":524,"_24":25,"_149":-5,"_297":525,"_27":526},{"_43":508,"_32":509,"_30":510,"_142":511,"_41":42,"_40":512,"_144":25,"_38":513,"_13":172,"_34":20,"_35":514,"_24":25,"_149":-5,"_297":515,"_27":516},{"_43":502,"_32":462,"_30":455,"_142":503,"_41":42,"_40":504,"_144":124,"_38":505,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":506,"_27":507},{"_43":497,"_32":461,"_30":466,"_142":455,"_41":42,"_40":498,"_144":124,"_38":499,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":500,"_27":501},{"_43":489,"_32":490,"_30":491,"_142":466,"_41":42,"_40":492,"_144":25,"_38":493,"_13":324,"_34":20,"_35":494,"_24":25,"_149":-5,"_297":495,"_27":496},{"_43":481,"_32":482,"_30":483,"_142":466,"_41":42,"_40":484,"_144":124,"_38":485,"_13":146,"_34":20,"_35":486,"_24":25,"_149":-5,"_297":487,"_27":488},{"_43":473,"_32":474,"_30":475,"_142":466,"_41":42,"_40":476,"_144":124,"_38":477,"_13":324,"_34":20,"_35":478,"_24":25,"_149":-5,"_297":479,"_27":480},{"_43":463,"_32":464,"_30":465,"_142":466,"_41":42,"_40":467,"_144":124,"_38":468,"_13":469,"_34":20,"_35":470,"_24":25,"_149":-5,"_297":471,"_27":472},{"_43":452,"_32":453,"_30":454,"_142":455,"_41":42,"_40":456,"_144":124,"_38":457,"_13":156,"_34":20,"_35":458,"_24":25,"_149":-5,"_297":459,"_27":460},{"_43":447,"_32":446,"_30":442,"_142":212,"_41":42,"_40":448,"_144":124,"_38":449,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":450,"_27":451},{"_43":441,"_32":33,"_30":31,"_142":442,"_41":42,"_40":14,"_144":25,"_38":443,"_13":146,"_34":20,"_35":37,"_24":25,"_149":-5,"_297":444,"_27":445},{"_43":433,"_32":434,"_30":435,"_142":212,"_41":42,"_40":436,"_144":25,"_38":437,"_13":156,"_34":20,"_35":438,"_24":25,"_149":-5,"_297":439,"_27":440},{"_43":204,"_32":205,"_30":206,"_142":-5,"_41":42,"_40":207,"_144":124,"_38":430,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":431,"_27":432},{"_43":422,"_32":423,"_30":424,"_142":206,"_41":42,"_40":425,"_144":25,"_38":426,"_13":194,"_34":147,"_35":427,"_24":25,"_149":-5,"_297":428,"_27":429},{"_43":415,"_32":416,"_30":417,"_142":206,"_41":42,"_40":207,"_144":25,"_38":418,"_13":61,"_34":147,"_35":419,"_24":25,"_149":-5,"_297":420,"_27":421},{"_43":407,"_32":408,"_30":409,"_142":206,"_41":42,"_40":207,"_144":25,"_38":410,"_13":61,"_34":411,"_35":412,"_24":25,"_149":-5,"_297":413,"_27":414},{"_43":197,"_32":198,"_30":199,"_142":-5,"_41":42,"_40":200,"_144":124,"_38":404,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":405,"_27":406},{"_43":399,"_32":398,"_30":392,"_142":199,"_41":42,"_40":400,"_144":124,"_38":401,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":402,"_27":403},{"_43":389,"_32":390,"_30":391,"_142":392,"_41":42,"_40":393,"_144":25,"_38":394,"_13":180,"_34":147,"_35":395,"_24":25,"_149":-5,"_297":396,"_27":397},{"_43":384,"_32":351,"_30":345,"_142":199,"_41":42,"_40":385,"_144":124,"_38":386,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":387,"_27":388},{"_43":376,"_32":377,"_30":378,"_142":345,"_41":42,"_40":379,"_144":124,"_38":380,"_13":194,"_34":147,"_35":381,"_24":25,"_149":-5,"_297":382,"_27":383},{"_43":368,"_32":369,"_30":370,"_142":345,"_41":42,"_40":371,"_144":25,"_38":372,"_13":324,"_34":147,"_35":373,"_24":25,"_149":-5,"_297":374,"_27":375},{"_43":360,"_32":361,"_30":362,"_142":345,"_41":42,"_40":363,"_144":25,"_38":364,"_13":180,"_34":147,"_35":365,"_24":25,"_149":-5,"_297":366,"_27":367},{"_43":352,"_32":353,"_30":354,"_142":345,"_41":42,"_40":355,"_144":25,"_38":356,"_13":194,"_34":147,"_35":357,"_24":25,"_149":-5,"_297":358,"_27":359},{"_43":342,"_32":343,"_30":344,"_142":345,"_41":42,"_40":346,"_144":25,"_38":347,"_13":156,"_34":147,"_35":348,"_24":25,"_149":-5,"_297":349,"_27":350},{"_43":337,"_32":328,"_30":321,"_142":199,"_41":42,"_40":338,"_144":124,"_38":339,"_13":61,"_34":202,"_35":-5,"_24":25,"_149":-5,"_297":340,"_27":341},{"_43":329,"_32":330,"_30":331,"_142":321,"_41":42,"_40":332,"_144":124,"_38":333,"_13":324,"_34":147,"_35":334,"_24":25,"_149":-5,"_297":335,"_27":336},{"_43":318,"_32":319,"_30":320,"_142":321,"_41":42,"_40":322,"_144":25,"_38":323,"_13":324,"_34":147,"_35":325,"_24":25,"_149":-5,"_297":326,"_27":327},{"_43":189,"_32":190,"_30":191,"_142":-5,"_41":42,"_40":192,"_144":124,"_38":315,"_13":194,"_34":20,"_35":195,"_24":25,"_149":-5,"_297":316,"_27":317},{"_43":183,"_32":184,"_30":185,"_142":-5,"_41":42,"_40":186,"_144":25,"_38":312,"_13":156,"_34":20,"_35":181,"_24":25,"_149":-5,"_297":313,"_27":314},{"_43":175,"_32":176,"_30":177,"_142":-5,"_41":42,"_40":178,"_144":25,"_38":309,"_13":180,"_34":20,"_35":181,"_24":25,"_149":-5,"_297":310,"_27":311},{"_43":167,"_32":168,"_30":169,"_142":-5,"_41":42,"_40":170,"_144":25,"_38":306,"_13":172,"_34":20,"_35":173,"_24":25,"_149":-5,"_297":307,"_27":308},{"_43":159,"_32":160,"_30":161,"_142":-5,"_41":42,"_40":162,"_144":25,"_38":303,"_13":164,"_34":20,"_35":165,"_24":25,"_149":-5,"_297":304,"_27":305},{"_43":151,"_32":152,"_30":153,"_142":-5,"_41":42,"_40":154,"_144":124,"_38":300,"_13":156,"_34":20,"_35":157,"_24":25,"_149":-5,"_297":301,"_27":302},{"_43":139,"_32":140,"_30":141,"_142":-5,"_41":42,"_40":143,"_144":25,"_38":296,"_13":146,"_34":147,"_35":148,"_24":25,"_149":-5,"_297":298,"_27":299},["D",1784058614099],"children",[],[140],["D",1784059569607],[],[152],["D",1784058612287],[],[160],["D",1784058609130],[],[168],["D",1784058612706],[],[176],["D",1784058612540],[],[184],["D",1781805649048],[],[190],"5ebf4750-ae58-4959-955e-6a7b3bab1b83","variants.ts","92020682-6b52-11f1-80b8-1607ee4eb77e","56dc5a24-6b54-11f1-9b1d-1607ee4eb77e",210,["D",1784058612975],2,"import { cn } from \"./cn.ts\";\n\ntype VariantShape = Record>;\ntype Selection = { [K in keyof V]?: keyof V[K] };\n\n/**\n * Minimal cva-style helper: maps typed variant props to token-based class strings.\n *\n * Hand-rolled to avoid an external dependency (per ADR-0002's keep-the-common-case\n * dependency-free posture). Supports a `base` string, `variants` maps, optional\n * `defaultVariants`, and a trailing `className` escape hatch (merged last via cn()).\n *\n * Example:\n * const button = variants({\n * base: cn(tw.radius, \"px-4 py-2 font-medium\"),\n * variants: {\n * variant: { primary: cn(tw.bg(\"accent\"), tw.text(\"accent-fg\")), ... },\n * size: { sm: \"text-sm px-3 py-1.5\", md: \"text-base\" },\n * },\n * defaultVariants: { variant: \"primary\", size: \"md\" },\n * });\n * button({ variant: \"primary\", size: \"sm\", className });\n */\nexport function variants(config: {\n base?: string;\n variants?: V;\n defaultVariants?: Selection;\n}) {\n return (props: Selection & { className?: string } = {}): string => {\n const { className, ...selected } = props;\n const classes: string[] = [];\n if (config.base) classes.push(config.base);\n if (config.variants) {\n for (const key in config.variants) {\n const chosen = (selected as Selection)[key] ??\n config.defaultVariants?.[key];\n if (chosen != null) {\n const cls = config.variants[key][chosen as string];\n if (cls) classes.push(cls);\n }\n }\n }\n return cn(...classes, className);\n };\n}\n",[],[198,328,319],"utils","33c08f5a-4737-462a-a6c8-7f544fc943d7","cn.ts","91f4e2d6-6b52-11f1-a883-1607ee4eb77e",208,["D",1784058612720],"import { type ClassValue, clsx } from \"npm:clsx@2.1.1\";\nimport { twMerge } from \"npm:tailwind-merge@3.6.0\";\n\n/**\n * Merge class strings with conflict resolution.\n *\n * `clsx` flattens conditionals/arrays and drops falsy values; `twMerge` keeps only\n * the winning class when two conflict. This matters on Val Town: Twind injects CSS\n * rules in first-seen order, so source order — not className order — would otherwise\n * decide a tie. `cn()` resolves the conflict *in the class string itself*, so the\n * outcome is deterministic regardless of Twind's injection order. The\n * `[color:var(--…)]` hint our token utilities carry (ADR-0001) is also what lets\n * twMerge group and dedupe background/text/border *colors* independently of\n * size/width utilities — verified empirically on the Val Town runtime.\n *\n * Call order is the contract: a component passes its own classes FIRST and the\n * caller's escape-hatch `className` LAST — `cn(componentClasses, className)` — so\n * the caller reliably overrides. Versions are pinned so merge behavior is\n * reproducible (bare `npm:` specifiers resolve to \"latest\" and could shift).\n */\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n",[],[198,328,330],"14b26de5-d175-4ba4-8abe-7f94001d8ac4",48,["D",1781814540380],[287,288],[198,328],"2c3691eb-0ca3-412d-ab7a-3af5d551cf2d","tw.ts","92125ad2-6b52-11f1-8a2f-1607ee4eb77e","56fb5e2e-6b54-11f1-95d4-1607ee4eb77e",215,["D",1784058613304],"/**\n * Token utilities — the only sanctioned way to apply semantic colors.\n *\n * Authors compose styles from these instead of hand-writing `[color:var(--…)]`,\n * which makes the silent \"forgot the color: hint\" failure (see ADR-0001 — a bare\n * `bg-[var(--…)]` is type-ambiguous and Twind emits nothing) structurally\n * impossible. The TypeScript union also makes a typo'd token a compile error.\n *\n * Each color builder takes an optional state prefix so prefixed utilities keep the\n * hint too — `tw.bg(\"recessed\", \"hover\")` → `hover:bg-[color:var(--kyla-recessed)]`.\n */\nexport type ColorToken =\n | \"base\"\n | \"elevated\"\n | \"recessed\"\n | \"fg\"\n | \"fg-muted\"\n | \"line\"\n | \"hairline\"\n | \"accent\"\n | \"accent-fg\"\n | \"accent-ring\"\n | \"accent-text\"\n | \"danger\"\n | \"danger-fg\"\n | \"success\"\n | \"success-fg\";\n\n/** Common interaction states a token utility may be scoped to. */\nexport type State = \"hover\" | \"focus\" | \"focus-visible\" | \"active\" | \"disabled\";\n\nconst color = (prop: string, name: ColorToken, on?: State): string =>\n `${on ? `${on}:` : \"\"}${prop}-[color:var(--kyla-${name})]`;\n\n/**\n * Token class builders. Usage: `cn(tw.bg(\"elevated\"), tw.border(\"line\"), \"p-6\")`.\n * Color builders emit the required `color:` hint (optionally state-prefixed);\n * `radius` is a length and needs no hint.\n */\nexport const tw = {\n bg: (t: ColorToken, on?: State) => color(\"bg\", t, on),\n text: (t: ColorToken, on?: State) => color(\"text\", t, on),\n border: (t: ColorToken, on?: State) => color(\"border\", t, on),\n ring: (t: ColorToken, on?: State) => color(\"ring\", t, on),\n ringOffset: (t: ColorToken, on?: State) => color(\"ring-offset\", t, on),\n /** border-radius token (a length — no `color:` hint needed) */\n radius: \"rounded-[var(--kyla-radius)]\",\n} as const;\n",[],[198,351,343],"theme","079d89c0-a9d9-4ba9-aa6b-d3a7b92f55b5","tokens_test.ts","e650bcd8-7b38-11f1-a19c-1607ee4eb77e",212,["D",1784058613153],"/**\n * The repo's first test harness — the load-bearing AA-contrast guarantee.\n *\n * It parses the token stylesheet, enumerates every *sanctioned* foreground /\n * surface pairing, and asserts each meets its WCAG AA threshold in **both** light\n * and dark mode. A future palette edit that breaks contrast fails here rather than\n * shipping. Kept a plain `deno test` so later scale slices reuse the pattern.\n */\nimport { assert, assertAlmostEquals } from \"jsr:@std/assert@1\";\nimport { contrastRatio } from \"./contrast.ts\";\nimport { tokenCSS } from \"./tokens.ts\";\n\ntype Mode = \"light\" | \"dark\";\ntype Palette = Record>;\n\n/** Parse `--kyla-NAME: light-dark(, );` declarations into a palette. */\nfunction parsePalette(css: string): Palette {\n const re =\n /--kyla-([\\w-]+):\\s*light-dark\$\\s*(#[0-9a-fA-F]{3,6})\\s*,\\s*(#[0-9a-fA-F]{3,6})\\s*\$/g;\n const palette: Palette = {};\n for (const [, name, light, dark] of css.matchAll(re)) {\n palette[name] = { light, dark };\n }\n return palette;\n}\n\nconst palette = parsePalette(tokenCSS);\nconst MODES: Mode[] = [\"light\", \"dark\"];\n\n// WCAG AA: 4.5:1 for body text. Every sanctioned pairing here is text-on-surface.\nconst AA_BODY = 4.5;\n\n/**\n * The sanctioned foreground/surface pairings (PRD §Palette): body text and\n * secondary text on every surface, and ink on each colored fill. Anything not\n * listed here is not a promised pairing and is intentionally not asserted.\n */\nconst SURFACES = [\"base\", \"elevated\", \"recessed\"] as const;\nconst PAIRINGS: Array<{ fg: string; bg: string; min: number }> = [\n ...SURFACES.map((bg) => ({ fg: \"fg\", bg, min: AA_BODY })),\n ...SURFACES.map((bg) => ({ fg: \"fg-muted\", bg, min: AA_BODY })),\n { fg: \"accent-fg\", bg: \"accent\", min: AA_BODY },\n { fg: \"danger-fg\", bg: \"danger\", min: AA_BODY },\n { fg: \"success-fg\", bg: \"success\", min: AA_BODY },\n];\n\nDeno.test(\"contrastRatio returns the correct WCAG ratio for known pairs\", () => {\n assertAlmostEquals(contrastRatio(\"#000000\", \"#ffffff\"), 21, 0.05);\n assertAlmostEquals(contrastRatio(\"#ffffff\", \"#ffffff\"), 1, 0.001);\n // #767676 on white is the canonical WCAG AA boundary example (~4.54:1).\n assertAlmostEquals(contrastRatio(\"#767676\", \"#ffffff\"), 4.54, 0.05);\n // Order-independent.\n assertAlmostEquals(\n contrastRatio(\"#052f4a\", \"#00bcff\"),\n contrastRatio(\"#00bcff\", \"#052f4a\"),\n 0.001,\n );\n});\n\nDeno.test(\"every sanctioned fg/surface pairing meets AA in both modes\", () => {\n for (const mode of MODES) {\n for (const { fg, bg, min } of PAIRINGS) {\n assert(palette[fg], `missing token --kyla-${fg}`);\n assert(palette[bg], `missing token --kyla-${bg}`);\n const ratio = contrastRatio(palette[fg][mode], palette[bg][mode]);\n assert(\n ratio >= min,\n `${fg} on ${bg} (${mode}) is ${ratio.toFixed(2)}:1, below AA ${min}:1`,\n );\n }\n }\n});\n\nDeno.test(\"palette expands the color vocabulary with the new semantic tokens\", () => {\n for (\n const name of [\n \"accent-ring\",\n \"accent-text\",\n \"danger-fg\",\n \"success\",\n \"success-fg\",\n ]\n ) {\n assert(palette[name], `expected --kyla-${name} in the token stylesheet`);\n }\n});\n\nDeno.test(\"dark-mode base uses the sanctioned slate-950 softening, not true black\", () => {\n assert(palette.base, \"missing --kyla-base\");\n assertEqualsHex(palette.base.dark, \"#020618\");\n assert(\n palette.base.dark.toLowerCase() !== \"#000000\",\n \"dark base must be softened slate-950, not true black\",\n );\n});\n\nfunction assertEqualsHex(actual: string, expected: string): void {\n assert(\n actual.toLowerCase() === expected.toLowerCase(),\n `expected ${expected}, got ${actual}`,\n );\n}\n",[],[198,351,353],"094ad873-f39f-4d8f-b4d4-7fc1c811ebf5","tokens.ts","920ac18c-6b52-11f1-a416-1607ee4eb77e",160,["D",1783577301432],"/**\n * The Kylä token stylesheet, as a string the Provider injects at runtime.\n *\n * Semantic design values as CSS custom properties (ADR-0001). `light-dark()`\n * resolves against the CSS `color-scheme` property, so toggling `color-scheme`\n * via `data-mode` flips every token at once — no `dark:` variants.\n *\n * Surface hierarchy (conventional): in light mode `elevated` is the *brightest*\n * (cards lift toward the light), `base` is the page, `recessed` is an inset well;\n * dark mode inverts brightness.\n *\n * Palette: the real Val Town values, ported (not invented) from the VT UI style\n * guide and AA-verified in both modes (ADR-0005; see\n * docs/reference/val-town-style-guide.md §6–§7). The AA guarantee is enforced by\n * tokens_test.ts — a pairing that regresses fails the suite. The one sanctioned\n * deviation from VT is the dark-mode `base`: `slate-950 #020618`, a deliberate\n * softening of VT's true-black `#000` to cut glare.\n *\n * NOTE: the spacing, graduated-radius, and type scales are still provisional /\n * pending — see slices 02–03 of the `structural-scales-palette` PRD under\n * docs/issues/. `--kyla-radius` below is the provisional base until slice 02.\n */\nexport const tokenCSS = `\n:root {\n color-scheme: light dark;\n\n /* surfaces — base (page) / elevated (cards) / recessed (wells) */\n --kyla-base: light-dark(#ffffff, #020618);\n --kyla-elevated: light-dark(#ffffff, #0f172b);\n --kyla-recessed: light-dark(#f1f5f9, #1d293d);\n\n /* foreground */\n --kyla-fg: light-dark(#000000, #ffffff);\n --kyla-fg-muted: light-dark(#4a5565, #d1d5dc);\n\n /* borders */\n --kyla-line: light-dark(#e2e8f0, #314158);\n --kyla-hairline: light-dark(#f1f5f9, #1d293d);\n\n /* accent */\n --kyla-accent: light-dark(#00bcff, #0069a8);\n --kyla-accent-fg: light-dark(#052f4a, #ffffff);\n --kyla-accent-ring: light-dark(#00a6f4, #00a6f4);\n --kyla-accent-text: light-dark(#00598a, #b8e6fe);\n\n /* status — danger / success */\n --kyla-danger: light-dark(#ffa1ad, #a50036);\n --kyla-danger-fg: light-dark(#4d0218, #ffffff);\n --kyla-success: light-dark(#00d492, #007a55);\n --kyla-success-fg: light-dark(#002c22, #ffffff);\n\n /* shape */\n --kyla-radius: 10px;\n}\n\n/* data-mode overrides the OS preference by pinning color-scheme */\n[data-mode=\"light\"] { color-scheme: light; }\n[data-mode=\"dark\"] { color-scheme: dark; }\n[data-mode=\"system\"] { color-scheme: light dark; }\n\nhtml, body { margin: 0; }\n`;\n",[],[198,351,361],"cf4d662e-41d8-4717-8376-4b45710d239d","provider.tsx","92200010-6b52-11f1-80b8-1607ee4eb77e",214,["D",1784058613306],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n createContext,\n useContext,\n useEffect,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { tokenCSS } from \"./tokens.ts\";\n\n/**\n * The Kylä root. Guarantees the styling substrate is present and owns Mode.\n *\n * - Injects the token stylesheet into at runtime (idempotent). Twind itself\n * must live in the HTML shell since it has to load before first paint (ADR-0001);\n * only the tokens are Provider-injected.\n * - Owns Mode via `data-mode` on and exposes `useKylaMode()`. `system`\n * falls through to the OS preference via `light-dark()` (zero JS).\n */\nexport type Mode = \"light\" | \"dark\" | \"system\";\n\nconst ModeContext = createContext<{ mode: Mode; setMode: (m: Mode) => void }>({\n mode: \"system\",\n setMode: () => {},\n});\n\nexport function useKylaMode() {\n return useContext(ModeContext);\n}\n\nconst TOKENS_ID = \"kyla-tokens\";\n\nexport function KylaProvider({\n children,\n defaultMode = \"system\",\n}: {\n children: React.ReactNode;\n defaultMode?: Mode;\n}) {\n const [mode, setMode] = useState(defaultMode);\n\n // Inject the token stylesheet once. Idempotent: guards against double-inject.\n useEffect(() => {\n if (document.getElementById(TOKENS_ID)) return;\n const style = document.createElement(\"style\");\n style.id = TOKENS_ID;\n style.textContent = tokenCSS;\n document.head.appendChild(style);\n }, []);\n\n // Reflect Mode onto the document so `data-mode` selectors take effect.\n useEffect(() => {\n document.documentElement.setAttribute(\"data-mode\", mode);\n }, [mode]);\n\n return (\n \n {children}\n \n );\n}\n",[],[198,351,369],"8d4dc0bf-f133-42f5-9cde-dd3ce6ec7cf1","contrast.ts","e6508772-7b38-11f1-a19c-1607ee4eb77e",213,["D",1784058613115],"/**\n * Pure WCAG contrast utilities over resolved sRGB colors — no DOM, no browser.\n *\n * This is the natural seam for the palette's AA guarantee: \"AA holds\" is a\n * property of the resolved color values, computable without a browser. The token\n * stylesheet resolves each semantic token to a concrete hex per mode (via\n * `light-dark()`); these helpers turn those hexes into WCAG contrast ratios so a\n * test can assert every sanctioned foreground/surface pairing stays legible.\n */\n\n/** An sRGB color as integer channels in the range 0–255. */\nexport type RGB = [r: number, g: number, b: number];\n\n/** Parse a `#rgb` or `#rrggbb` hex string into sRGB channels (0–255). */\nexport function parseHex(hex: string): RGB {\n const h = hex.trim().replace(/^#/, \"\");\n const full = h.length === 3\n ? h\n .split(\"\")\n .map((c) => c + c)\n .join(\"\")\n : h;\n if (!/^[0-9a-fA-F]{6}$/.test(full)) {\n throw new Error(`Invalid hex color: ${hex}`);\n }\n return [\n parseInt(full.slice(0, 2), 16),\n parseInt(full.slice(2, 4), 16),\n parseInt(full.slice(4, 6), 16),\n ];\n}\n\n/** WCAG relative luminance of an sRGB color (0 = black, 1 = white). */\nexport function relativeLuminance([r, g, b]: RGB): number {\n const linear = (channel: number): number => {\n const s = channel / 255;\n return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n };\n return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);\n}\n\n/**\n * WCAG contrast ratio between two colors (hex strings), in the range 1–21.\n * Order-independent: `contrastRatio(a, b) === contrastRatio(b, a)`.\n */\nexport function contrastRatio(a: string, b: string): number {\n const la = relativeLuminance(parseHex(a));\n const lb = relativeLuminance(parseHex(b));\n const lighter = Math.max(la, lb);\n const darker = Math.min(la, lb);\n return (lighter + 0.05) / (darker + 0.05);\n}\n",[],[198,351,377],"05fe2e2c-2444-41d7-938d-50483f27ebd6",50,["D",1781814540580],[281,282,283,284,285],[198,351],"278379df-c00a-4e96-93e8-af9b17a6b783","button.tsx","8569cf08-6b53-11f1-a668-1607ee4eb77e","56eb3bb6-6b54-11f1-95d4-1607ee4eb77e",211,["D",1784058613060],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { forwardRef } from \"https://esm.sh/react@18.2.0\";\nimport { cn } from \"../utils/cn.ts\";\nimport { tw } from \"../theme/tw.ts\";\nimport { variants } from \"../utils/variants.ts\";\n\n/**\n * Button — the first zero-dependency component, and the reference for how every\n * component is authored: typed variant props mapped to token classes via\n * `variants()`, a semantic `\n ))}\n \n \n );\n}\n\nfunction ButtonMatrix() {\n return (\n

\n {/* variants × sizes */}\n {VARIANTS.map((variant) => (\n

\n \n {variant}\n \n variant=\"{variant}\"\n

\n {SIZES.map((size) => (\n \n ))}\n \n

\n ))}\n

\n );\n}\n\nfunction TokenSwatches() {\n return (\n

\n {COLOR_TOKENS.map((token) => (\n \n \n

\n {token}\n

\n --kyla-{token}\n

\n ))}\n \n );\n}\n\nfunction WipBanner() {\n return (\n \n

\n 🚧 Preview / work in progress. This page renders the\n {\" \"}\n current{\" \"}\n Kylä UI surface — one component (Button) plus the theme system. Palette\n values are provisional and more components are on the way.\n

\n \n );\n}\n\nexport function Preview() {\n return (\n \n \n

\n {/* header */}\n

\n Kylä UI\n

\n Consistently styled components for Val Town apps. (Kylä ·\n Finnish for “village”.)\n

\n \n

\n\n \n\n \n \n \n\n \n

\n alert(\"Saved! (from Kylä Button)\")}\n >\n Save\n \n \n \n \n

\n \n\n \n \n \n\n \n

\n ✅ In place\n

Styling core — cn / tw / variants
KylaProvider + light / dark / system mode
Semantic design tokens
Button

\n 🔜 To come\n

The rest of the v1 component set
The real, AA-checked palette
Spacing / radius / type scales
Radix-backed components (e.g. Dialog)

\n \n\n \n Preview is illustrative — not a stable API.\n \n view source\n \n \n

\n \n \n );\n}\n",[],[205,423],["D",1783375727322],[274,275,276],[205],"5e581b55-62c7-496e-9fc1-4913707672ee","roadmap.md","45b8411a-798a-11f1-b04a-1607ee4eb77e",224,["D",1784059569816],"# Kylä UI — Roadmap\n\nThe dependency-ordered plan for reaching v1. Each row links a spec in the\n[issue tracker](issues/); vocabulary is in [`../CONTEXT.md`](../CONTEXT.md) and\nthe load-bearing decisions are in [`adr/`](adr/). This doc is the synthesis —\nthe \"what next and in what order\" — not a re-spec of any single feature.\n\n## Built\n\n- **Styling foundation** — `cn`, `tw` (token utilities with the mandatory\n `color:` hint), `variants`, `KylaProvider` + Mode, provisional token\n stylesheet.\n- **`Button`** — the reference component (typed variants → tokens, semantic\n element, forwarded ref, escape-hatch `className`, token focus ring). \"Built\"\n means the pattern is proven, not that it's at VT coverage parity — see\n ADR-0005's coverage-parity clause and item 2 below.\n- **Substrate proof** — `nbbaier/kyla-ui-spike`, all four spikes green (Radix\n Dialog under the React-18.2.0 pin, Twind + CSS-var tokens, Provider injection,\n `light-dark()` + `data-mode`).\n\n## Planned — dependency order\n\nEach spec is `ready-for-agent`. Later rows assume earlier ones.\n\n| # | Feature | Spec | Depends on | Why it's here |\n| - | ------------------------------- | ---------------------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 1 | **Structural scales & palette** | [`structural-scales-palette`](issues/structural-scales-palette/spec.md) | — | Highest-leverage deferred item: fixed spacing/radius/type scales + real AA-checked palette, **conforming to the Val Town UI style guide** ([ADR-0005](adr/0005-val-town-visual-language-default-theme.md)). Where consistency actually lives; unblocks the set. Establishes the first test harness. |\n| 2 | **v1 zero-dep component set** | [`v1-component-set`](issues/v1-component-set/spec.md) | 1 | Text/Heading, Card, Input, Textarea, Label, Badge, Stack, Box, Divider, Select — the rest of the importable core, following the `Button` pattern — plus a `Button` revision slice closing its VT variant/state coverage gap (ADR-0005). |\n| 3 | **Dialog (Radix-backed)** | [`dialog-radix`](issues/dialog-radix/spec.md) | 2 | First headless-backed component, behind its own import path, out of the barrel. Exercises the hybrid split (ADR-0002) in real code. |\n| — | **Preview shell conventions** | [`gallery`](issues/gallery/spec.md) (folded in) | — | Bring the `preview/` HTML shell in line with platform conventions (real `.html` file, no inline `

\n {title}\n

Diff · v239