@junoput01/junoui 0.2.0 → 0.4.0

package/docs/layout.md

@@ -0,0 +1,271 @@
+# Layout & responsiveness
+
+How blocks adapt — defined once, inherited by every UI. Two mechanisms:
+
+1. **Intrinsic layout primitives** — reflow by available space, no media queries.
+2. **Container queries** — a component restyles by _its own_ width, not the viewport
+   (right for a library dropped into unknown layouts).
+
+Breakpoint tokens (`--juno-bp-sm…2xl`) follow Tailwind's scale and exist for the
+rare viewport-level case.
+
+## Why container queries over viewport breakpoints
+
+junoui components live inside arbitrary app skeletons. A card doesn't know if it's
+in a 280px sidebar or full width — so it adapts to its container:
+
+```css
+.juno-card {
+  container-type: inline-size;
+} /* already set */
+```
+
+`.juno-card__row` stacks automatically when the card is < 320px wide, anywhere.
+
+## Layout primitives
+
+Wrap a region; it adapts on resize. Every knob is a custom property with a token
+default — override per instance inline.
+
+| Class                    | Does                                     | Key knob (default)                       |
+| ------------------------ | ---------------------------------------- | ---------------------------------------- |
+| `.juno-center`           | Max-measure wrapper, fluid gutters       | `--juno-measure` (`bp-xl`)               |
+| `.juno-stack`            | Vertical rhythm between children         | `--juno-stack-space` (`space-16`)        |
+| `.juno-cluster`          | Wrapping inline group (toolbars, tags)   | `--juno-cluster-space` (`space-8`)       |
+| `.juno-grid-auto`        | Cards that collapse columns themselves   | `--juno-grid-min` (`240px`)              |
+| `.juno-grid-auto--tiles` | Media wall wired to the density layer    | `--juno-tile-min` / `--juno-gap-content` |
+| `.juno-sidebar`          | Aside + fluid content, stacks when tight | `--juno-sidebar-width` (`280px`)         |
+| `.juno-switcher`         | N-up or all-stacked at a threshold       | `--juno-switcher-threshold` (`bp-sm`)    |
+| `.juno-scroller`         | Bare scroll container (axis/snap/bar)    | `--juno-scroller-snap` (`none`)          |
+| `.juno-reel`             | Horizontal scroll-snap row               | `--juno-reel-space` (`space-12`)         |
+
+### Examples
+
+```html
+<!-- responsive card grid — no breakpoints, columns just fit -->
+<div class="juno-grid-auto" style="--juno-grid-min:280px;">
+  <article class="juno-card">…</article>
+  <article class="juno-card">…</article>
+  <article class="juno-card">…</article>
+</div>
+
+<!-- toolbar that wraps -->
+<div class="juno-cluster">
+  <button class="juno-btn juno--nominal">CONFIRM</button>
+  <button class="juno-btn juno-btn--ghost">CANCEL</button>
+</div>
+
+<!-- sidebar + content; stacks when content would get too narrow -->
+<div class="juno-sidebar">
+  <aside class="juno-sidebar__aside">…</aside>
+  <main class="juno-sidebar__main">…</main>
+</div>
+
+<!-- two-up that flips to stacked under ~640px of space -->
+<div class="juno-switcher">
+  <div>A</div>
+  <div>B</div>
+</div>
+
+<!-- media wall: tile size + gap follow [data-juno-density] -->
+<div class="juno-grid-auto juno-grid-auto--tiles"><img … /><img … /><img … /></div>
+```
+
+`--tiles` reads `--juno-tile-min` / `--juno-gap-content` from the density layer
+(`150px` / `space-10` comfortable, `108px` / `space-4` compact), so one
+`data-juno-density` attribute re-densifies controls, surfaces **and** content
+grids together.
+
+## Scroller
+
+Every scrolling region in the library — `.juno-reel`, `.juno-app-shell__main`,
+tab strips — is the same three knobs: overflow axis, overscroll containment,
+snap type. `.juno-scroller` ships them as overridable custom props instead of
+each consumer re-deriving (and usually forgetting `overscroll-behavior`, which
+lets iOS pull-to-refresh/scroll-chain through an inner scroller into the
+page). Defaults: `overflow: auto` (both axes), `overscroll-behavior: contain`,
+no snap.
+
+```html
+<!-- vertical list scroller with containment, no snap -->
+<div class="juno-scroller juno-scroller--y">…</div>
+
+<!-- horizontal, scrollbar hidden, softer "proximity" snap, opt-in stops -->
+<div
+  class="juno-scroller juno-scroller--x juno-scroller--bare"
+  style="--juno-scroller-snap: x proximity;"
+>
+  <div class="juno-snap">…</div>
+  <div class="juno-snap">…</div>
+</div>
+```
+
+- `.juno-scroller--x` — horizontal axis only (`overflow: auto hidden`)
+- `.juno-scroller--y` — vertical axis only (`overflow: hidden auto`)
+- `.juno-scroller--bare` — hides the scrollbar (Firefox + WebKit)
+- `.juno-snap` — on a child: opts into `scroll-snap-align`
+
+`.juno-reel` is `.juno-scroller`'s horizontal-snap preset baked into one
+class: it now reads its `scroll-snap-type` from the same `--juno-scroller-snap`
+prop (default unchanged: `inline mandatory`), so the mode is overridable
+per instance instead of hardcoded — e.g. a "magnet" strip that wants
+`proximity` instead of a stepped `mandatory` feel:
+
+```html
+<div class="juno-reel" style="--juno-scroller-snap: inline proximity;">…</div>
+```
+
+## Gesture surfaces
+
+For an element whose pointer events an app JS layer owns outright — drag-pan,
+pinch-zoom, swipe classification, anything that is a state machine rather than
+native scrolling — junoui ships the CSS side of that contract as one class.
+The gesture handler itself is the app's job (or a sibling `junoui-<framework>`
+package): junoui declares the surface, never the logic.
+
+```html
+<div class="juno-gesture-surface" id="viewport"><!-- JS drag/pinch handlers attach here --></div>
+
+<!-- only needs the touch-action axis lock, not the full reset -->
+<li class="juno-list__item juno-pan-x"><!-- swipe-to-reveal row --></li>
+```
+
+`.juno-gesture-surface` sets `touch-action: var(--juno-touch-action, none)`,
+`-webkit-touch-callout: none`, `user-select: none` and
+`-webkit-tap-highlight-color: transparent` — so the UA never fights the
+handler with its own scroll/zoom recognition, long-press callout, text
+selection or tap flash. Override `--juno-touch-action` per instance to hand
+back one axis (`pan-x` / `pan-y`) instead of all of them. `.juno-pan-x` /
+`.juno-pan-y` are standalone single-axis classes for elements that want the
+axis lock alone.
+
+These four properties are **community convention, not Apple-documented
+behavior** — see [ios-conformance.md](./ios-conformance.md) before citing them
+as a platform requirement.
+
+## App shell
+
+Every product app assembles the same frame; `.juno-app-shell` ships it as
+classes — a collapsible [rail](./components/rail.md), a topbar, a scrolling
+content outlet, and a [dock](./components/dock.md) at the foot — so you stop
+copy-pasting the same `<style>` block into every app.
+
+```html
+<div class="juno-app-shell">
+  <nav class="juno-rail juno-rail--responsive" aria-label="Primary">
+    <div class="juno-rail__brand">JUNO</div>
+    <a class="juno-rail__item" href="/library" aria-current="page">
+      <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-squares-four" /></svg>
+      <span class="juno-rail__label">Library</span>
+    </a>
+  </nav>
+  <div class="juno-app-shell__body">
+    <header class="juno-app-shell__topbar">
+      <input class="juno-input" type="search" placeholder="SEARCH…" />
+      <span class="juno-badge juno-badge--soft juno--nominal">ONLINE</span>
+    </header>
+    <main class="juno-app-shell__main">…</main>
+    <nav class="juno-dock juno-hide-from-md" aria-label="Primary">
+      <a class="juno-dock__item" href="/library" aria-current="page">
+        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-squares-four" /></svg>
+        <span class="juno-dock__label">Library</span>
+      </a>
+    </nav>
+  </div>
+</div>
+```
+
+What the primitive encodes so you don't have to:
+
+- **`100dvh`, not `100vh`** — the shell fills the _dynamic_ viewport, so the
+  dock isn't clipped by the phone's shrinking address bar.
+- **The `__main` region is the scroller**, not the page. The dock (or
+  [pillbar](./components/pillbar.md)) is a flex sibling at the body foot, so it
+  stays pinned with zero `sticky`/`fixed` and never overlaps content — the
+  short-page pitfall of sticky nav bars (below) can't happen here.
+- **Safe-area insets** — the shell pads for landscape notches
+  (`inset-left`/`right`), the topbar for `inset-top`, the dock for
+  `inset-bottom`. **This requires `viewport-fit=cover` in your page's viewport
+  meta** ([getting-started](./getting-started.md#required-the-viewport-meta)) —
+  without it iOS reports every inset as `0` and none of this padding happens.
+
+Collapse the rail by toggling `.juno-rail--collapsed` (one class; the width
+transition and label hiding are built in). Trays/detail panels: the
+[slide-over](./components/drawer.md#the-slide-over-pattern) pattern in the
+drawer doc. Knobs: `--juno-app-shell-topbar-size` (topbar height).
+
+### Narrow viewports (phone)
+
+The rail↔dock swap is two classes, no JS: `.juno-rail--responsive` self-hides
+below `md`, and the dock carries `.juno-hide-from-md` so it shows only there.
+(Equivalent to hanging `.juno-hide-below-md` on the rail yourself — the
+modifier just saves you knowing to.) Keep 3–5 dock destinations; the rest go
+behind a "More" item (drawer or menu). Prefer a floating bar? Swap the dock
+for a [pillbar](./components/pillbar.md) — same contract, capsule look.
+
+**Viewport helpers.** For the cases an intrinsic primitive can't express
+(swap a nav for a menu button), hide/show by breakpoint at `sm` (640px),
+`md` (768px), `lg` (1024px):
+
+| Class                                        | Visible        |
+| -------------------------------------------- | -------------- |
+| `.juno-hide-below-md` / `.juno-show-from-md` | at `md` and up |
+| `.juno-hide-from-md` / `.juno-show-below-md` | below `md`     |
+
+`show-*` are readable aliases for the inverse `hide-*` (`show-from-md` ≡
+`hide-below-md`); pick whichever reads clearer at the call site. Same three
+cut points for `sm` and `lg`.
+
+### Page-scroll shells (dock/pillbar `--fixed`)
+
+`.juno-app-shell` is the recommended frame because its `__main` scroller keeps
+the dock in flow. If instead the **whole page** scrolls, the dock/pillbar use
+`position: sticky` — which only pins _while the column overflows_. On a short
+page that doesn't scroll, a sticky bar lands mid-content, reading as "not
+stuck." For that layout use `.juno-dock--fixed` (pins flush to the viewport
+foot) or `.juno-pillbar--fixed` (fixes to the viewport, still floating its gap
+above the foot) — then reserve the bar's footprint at the page foot (e.g.
+`padding-block-end`) so it doesn't cover the last row.
+
+### Tab + stack (phone navigation recipe)
+
+The full phone pattern is three parts: the dock or pillbar switches
+_sections_; inside a section, a [list](./components/list.md) row (or any
+link) pushes a detail view; every pushed view opens with a
+[navbar](./components/navbar.md) whose back control unwinds one level.
+junoui ships all three looks — the app owns the stack (routing/history):
+
+```html
+<div class="juno-app-shell">
+  <div class="juno-app-shell__body">
+    <!-- one section, drilled one level in -->
+    <header class="juno-navbar">
+      <a class="juno-navbar__back" href="/settings">
+        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-caret-left" /></svg>
+        <span class="juno-navbar__back-label">Settings</span>
+      </a>
+      <h1 class="juno-navbar__title">Playback</h1>
+      <div class="juno-navbar__actions"></div>
+    </header>
+    <main class="juno-app-shell__main"><!-- .juno-list groups… --></main>
+    <nav class="juno-pillbar" aria-label="Primary"><!-- section tabs --></nav>
+  </div>
+</div>
+```
+
+## Adopting in an existing project
+
+No restructuring required — additive and incremental:
+
+1. Set `data-juno-palette` / `data-juno-mode`, swap hardcoded values → `var(--juno-*)`.
+2. Add component classes where blocks match.
+3. Wrap layout regions in a primitive (`.juno-grid-auto`, `.juno-cluster`, …) to get
+   reflow. Add `container-type: inline-size` to a wrapper for component-level queries.
+
+You opt in per region; nothing forces a markup shape.
+
+## The JS line
+
+These are all CSS. Behavior that needs state (resize observers feeding app state,
+virtualization, drag-resizable panels) belongs in your app or a sibling
+`junoui-<framework>` package — not the design system.

package/docs/native.md

@@ -0,0 +1,52 @@
+# Native mobile (Android / iOS)
+
+Native platforms can't parse `oklch()`, so colors are pre-converted to sRGB hex
+during the build. Values match the web rendering.
+
+## Android
+
+Copy or sync the generated resources into your module:
+
+```
+dist/android/colors.xml   →  res/values/colors.xml
+dist/android/dimens.xml   →  res/values/dimens.xml
+```
+
+Reference them:
+
+```xml
+<TextView
+    android:textColor="@color/standard_dark_nominal"
+    android:padding="@dimen/space_16"
+    android:textSize="@dimen/font_size_14" />
+```
+
+- Color names: `<palette>_<mode>_<role>` (e.g. `colorblind_dark_warning`).
+- Dimensions are `dp`; font sizes are `sp`.
+- Theme switching: pick the resource set for the active palette/mode, or split the
+  files into qualified `values-night/` for dark mode.
+
+## iOS (Swift)
+
+Add the generated file to your target:
+
+```
+dist/ios/JunoTokens.swift
+```
+
+```swift
+label.textColor = JunoTokens.standardDarkNominal
+let pad: CGFloat = JunoTokens.space16
+let body: CGFloat = JunoTokens.fontSize14
+```
+
+- Colors are `UIColor` constants named `<palette><Mode><Role>` (camelCase).
+- Dimensions are `CGFloat` constants.
+
+## Keeping in sync
+
+Re-run `npm run build` in junoui and re-copy the files (or script the copy in your
+CI). Because all platforms derive from the same `tokens/` source, the values can
+never drift between web and native.
+
+Exact values for every token: [tokens-reference.md](./tokens-reference.md).

package/docs/roadmap.md

@@ -0,0 +1,106 @@
+# Roadmap — missing capabilities
+
+Gap analysis vs mature design systems (Material, Carbon, Radix, Polaris, Tailwind).
+What junoui does **not** yet have, prioritised. The framework line holds throughout:
+junoui ships the **look + the accessibility/structure contract**; stateful behavior
+(focus traps, open/close, positioning, data) lives in apps or a sibling
+`junoui-<framework>` package.
+
+Priority key: 🔴 must · 🟡 high · 🟢 nice.
+
+## Have today
+
+Tokens (color · spacing · type · radius · border · size · breakpoints · motion ·
+z-index · elevation · opacity), density modes, themes (3 palettes × dark/light), CSS
+components (badge, button, card, readout, status dot, loaders, **form controls** —
+field · input · select · checkbox · radio · switch · slider; **overlays** — modal ·
+drawer · tooltip · popover · menu), layout primitives + container queries,
+multi-platform outputs, docs, lint + tests + CI.
+
+## Foundations (token gaps) — ✅ shipped 2026-06
+
+All foundation token gaps are now built. Values: [tokens-reference.md](./tokens-reference.md);
+usage: [design-guidelines.md](./design-guidelines.md).
+
+| Done                              | What shipped                                                                                                   |
+| --------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| **Motion** (duration + easing)    | `--juno-motion-duration-{instant,quick,base,deliberate}` + `--juno-motion-ease-{decel,accel,standard,spring}`. |
+| **Z-index scale**                 | `--juno-z-*` layer stack: surface · raised · anchored · overlay · alert.                                       |
+| **Elevation / shadow**            | `--juno-shadow-{1,2,3}` (e1–e3) — border-first depth; shadow for lifted surfaces.                              |
+| **Opacity scale**                 | `--juno-opacity-{disabled,muted,scrim}`.                                                                       |
+| **Density modes** (compact/comfy) | `data-juno-density` swaps semantic padding aliases (`--juno-pad-*`, `--juno-gap-control`).                     |
+
+## Components
+
+| Missing                                                                                                                                                                                                          | Priority   |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| ~~**Form controls** — input, textarea, select, checkbox, radio, switch, slider~~                                                                                                                                 | ✅ shipped |
+| ~~**Field** wrapper — label + control + help + error + required~~                                                                                                                                                | ✅ shipped |
+| ~~**Overlays** — modal/dialog, drawer, tooltip, popover, menu/dropdown~~                                                                                                                                         | ✅ shipped |
+| ~~**Table / data grid** styling~~                                                                                                                                                                                | ✅ shipped |
+| ~~**Alert / toast / inline notification**~~                                                                                                                                                                      | ✅ shipped |
+| ~~**Tabs**, accordion / disclosure~~                                                                                                                                                                             | ✅ shipped |
+| ~~**Skeleton** loading placeholder (pairs with loaders)~~                                                                                                                                                        | ✅ shipped |
+| ~~Avatar, chip/tag, divider, breadcrumb, pagination, stepper~~                                                                                                                                                   | ✅ shipped |
+| **Chat layer** (`junoui-chat`) — message bubble, list, day separator, system pill, attachment cards, conversation header, chat-row, rail. Requested by the buzz integration; highest-leverage gap for chat apps. | 🟡         |
+| Calendar **visuals** (event chip, day-cell)                                                                                                                                                                      | 🟢         |
+
+## Field-driven — ✅ shipped 2026-07
+
+Gaps surfaced by the first production consumer (a media-server web client, 2026-07):
+everything a real app had to hand-roll on top of junoui, rebuilt here as generic,
+reusable pieces. The rule stands — features land app-agnostic; only the origin is
+logged.
+
+| Done                   | What shipped                                                                                                                                                                                     |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Dense sizes**        | `.juno-btn--sm` + `.juno-switch--sm` for 40–46px toolbar chrome / per-row toggles.                                                                                                               |
+| **Segmented control**  | `.juno-seg` — radio-driven exclusive pill row, zero JS; `aria-pressed` button flavor.                                                                                                            |
+| **Gauge**              | `.juno-gauge` — determinate metric ring (conic-gradient), value centered, threshold recipe doc.                                                                                                  |
+| **Spark**              | `.juno-spark` — sparkline size/stroke/color contract (app supplies points; no charting shipped).                                                                                                 |
+| **Micro badge**        | `.juno-badge--micro` — mono data-UI atom for provenance/kind tags + threshold values.                                                                                                            |
+| **Rail + app shell**   | `.juno-rail` (collapsible, `aria-current`-styled) + `layout.md#app-shell` recipe.                                                                                                                |
+| **Content density**    | `--juno-tile-min`/`--juno-gap-content` archetype + `.juno-grid-auto--tiles`.                                                                                                                     |
+| **Slide-over recipe**  | Drawer doc: scrim + header/body/pinned-footer composition from existing parts.                                                                                                                   |
+| **Media/system icons** | 14 Phosphor glyphs: squares-four · images · hexagon · puzzle-piece · play · film-strip · cloud · cloud-arrow-down · arrows-clockwise · cpu · hard-drives · sliders · arrows-out · upload-simple. |
+
+## Mobile — ✅ shipped 2026-07
+
+Mobile-first structures for narrow viewports and touch, automatic where safe,
+opt-in where markup is needed:
+
+| Done                 | What shipped                                                                                                          |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| **Dock**             | `.juno-dock` — bottom nav, phone counterpart of the rail; sticky, safe-area padded; shell swap recipe in `layout.md`. |
+| **Bottom sheet**     | Modal auto-converts below `bp.sm`: full-width, top-rounded, slides up, stretched footer actions.                      |
+| **Drawer phone fit** | Side drawers cap at `85vw` (scrim stays tappable); bottom drawer pads for the home indicator.                         |
+| **Toast snackbar**   | Full-width bottom stack on phones; slides up instead of sideways.                                                     |
+| **Scrollable tabs**  | Tab strip scrolls sideways instead of overflowing.                                                                    |
+| **Stacked table**    | `.juno-table--stack` + `data-label` — card rows below a 480px container; real `<table>` semantics kept.               |
+| **Touch ergonomics** | `pointer: coarse` raises `--juno-size-tap-min` → 44px; `hover: none` keeps table row actions visible.                 |
+| **Pillbar**          | `.juno-pillbar` — floating pill bar (iOS-style): 2–5 icon destinations/actions, translucent + blurred, safe-area.     |
+| **Navbar**           | `.juno-navbar` — stack top bar: back control always on the start edge, centered truncating title, trailing actions.   |
+| **List**             | `.juno-list` — grouped rows (settings pattern): icon + label/support + trailing value/control/chevron.                |
+| **Tab + stack**      | Shell recipe in `layout.md`: dock/pillbar switches sections, navbar backs out of pushed views.                        |
+
+## Quality / infra
+
+| Missing                                          | Why                                                                                              | Priority |
+| ------------------------------------------------ | ------------------------------------------------------------------------------------------------ | -------- |
+| ~~**Visual regression** snapshots (Playwright)~~ | ✅ shipped — `npm run test:visual` diffs every showcase page (dark + light).                     | ✅       |
+| ~~**Changesets**~~                               | ✅ shipped — `npm run changeset`; manual Version PR (`npm run version`) → CI publishes on merge. | ✅       |
+| ~~**Icon convention / set**~~                    | ✅ shipped — `.juno-icon` + SVG sprite (Phosphor bold, MIT).                                     | ✅       |
+| **eslint** (flat config)                         | JS surface is small; prettier + tests cover most.                                                | 🟢       |
+
+Done already: stylelint + prettier, `node:test` integrity suite, a11y doc + ARIA
+contract, forced-colors, RTL via logical properties, CI gate.
+
+## Recommended order
+
+1. ~~**Foundation tokens** — motion, z-index, elevation, opacity, density.~~ ✅ done.
+2. ~~**Form controls + field** — the single biggest capability gap.~~ ✅ done.
+3. ~~**Overlays** — modal, tooltip, menu.~~ ✅ done.
+4. ~~**Table / data grid** — sortable header, cell types, row states, overflow, skeleton/empty.~~ ✅ done.
+5. ~~**Quality** — visual-regression snapshots + changesets.~~ ✅ done.
+
+Biggest leverage: **#1 + #2.**

package/docs/tokens-reference.md

@@ -0,0 +1,223 @@
+<!-- GENERATED by scripts/gen-docs.mjs — do not edit by hand. Run `npm run gen-docs`. -->
+
+# Token reference
+
+Every junoui token with its value and the identifier to use on each platform.
+Colors show the authored value and the resolved sRGB hex (use the hex in any
+tool that does not understand `oklch()`).
+
+## How names map across platforms
+
+| Platform | Pattern | Example (`color.standard.dark.nominal`) |
+|---|---|---|
+| CSS — semantic | `var(--juno-<role>)` (switches with theme attrs) | `var(--juno-nominal)` |
+| SCSS | `$juno-color-<palette>-<mode>-<role>` | `$juno-color-standard-dark-nominal` |
+| JS / TS | `TOKENS.<palette>.<mode>.<role>` | `TOKENS.standard.dark.nominal` |
+| JSON (DTCG) | `color.<palette>.<mode>.<role>` | `color.standard.dark.nominal` |
+| Android | `@color/<palette>_<mode>_<role>` | `@color/standard_dark_nominal` |
+| iOS (Swift) | `JunoTokens.<camelCase>` | `JunoTokens.standardDarkNominal` |
+| Flutter (Dart) | `JunoTokens.<camelCase>` | `JunoTokens.standardDarkNominal` |
+
+Core tokens (spacing, radius, typography, …) use `--juno-<path-joined-by->`,
+e.g. `space.16` → `var(--juno-space-16)`, `@dimen/space_16`, `JunoTokens.space16`.
+
+## Color roles
+
+Color encodes status, never decoration. Each role has exactly one meaning.
+
+### Palette: colorblind
+
+| Role | Dark value | Dark hex | Light value | Light hex |
+|---|---|---|---|---|
+| `nominal` | `#78A9FF` | `#78A9FF` | `#0043CE` | `#0043CE` |
+| `active` | `#BE95FF` | `#BE95FF` | `#6929C4` | `#6929C4` |
+| `target` | `#FF7EB6` | `#FF7EB6` | `#9F1853` | `#9F1853` |
+| `caution` | `#F1C21B` | `#F1C21B` | `#7D4F00` | `#7D4F00` |
+| `warning` | `#FF832B` | `#FF832B` | `#BA4300` | `#BA4300` |
+| `data` | `oklch(93% 0.008 85)` | `#EAE7E2` | `oklch(14% 0.008 85)` | `#0B0906` |
+| `data-dim` | `oklch(38% 0.010 85)` | `#45423C` | `oklch(70% 0.008 85)` | `#A19E99` |
+| `label` | `oklch(63% 0.012 85)` | `#8C8981` | `oklch(42% 0.010 85)` | `#504D47` |
+| `muted` | `oklch(48.5% 0.010 85)` | `#625F59` | `oklch(63% 0.008 85)` | `#8B8984` |
+| `border` | `oklch(30% 0.012 85)` | `#312D27` | `oklch(82% 0.010 85)` | `#C7C4BD` |
+| `border-strong` | `oklch(40% 0.012 85)` | `#4B4740` | `oklch(74% 0.010 85)` | `#AEAAA4` |
+| `s0` | `oklch(11% 0.010 85)` | `#060402` | `oklch(97% 0.008 85)` | `#F8F5EF` |
+| `s1` | `oklch(15% 0.012 85)` | `#0D0B06` | `oklch(93% 0.010 85)` | `#EBE7E0` |
+| `s2` | `oklch(19% 0.012 85)` | `#16130E` | `oklch(89% 0.010 85)` | `#DEDAD3` |
+| `s3` | `oklch(24% 0.012 85)` | `#221F19` | `oklch(85% 0.010 85)` | `#D1CDC7` |
+
+### Palette: soft
+
+| Role | Dark value | Dark hex | Light value | Light hex |
+|---|---|---|---|---|
+| `nominal` | `oklch(63% 0.13 155)` | `#38A065` | `oklch(40% 0.11 155)` | `#00582C` |
+| `active` | `oklch(67% 0.12 210)` | `#00A8BE` | `oklch(44% 0.11 210)` | `#006174` |
+| `target` | `oklch(58% 0.14 318)` | `#9C5CAF` | `oklch(42% 0.12 318)` | `#673477` |
+| `caution` | `oklch(72% 0.12 75)` | `#D09945` | `oklch(50% 0.12 75)` | `#8A5700` |
+| `warning` | `oklch(62% 0.15 30)` | `#D15D4D` | `oklch(42% 0.13 30)` | `#86281D` |
+| `data` | `oklch(90% 0.008 88)` | `#E0DED8` | `oklch(14% 0.008 88)` | `#0A0906` |
+| `data-dim` | `oklch(39% 0.010 88)` | `#47453F` | `oklch(69% 0.008 88)` | `#9D9B96` |
+| `label` | `oklch(63% 0.010 88)` | `#8C8982` | `oklch(44% 0.010 88)` | `#55524C` |
+| `muted` | `oklch(48.5% 0.010 88)` | `#615F59` | `oklch(62.5% 0.008 88)` | `#8A8782` |
+| `border` | `oklch(31% 0.010 88)` | `#32302B` | `oklch(84% 0.010 88)` | `#CDCAC3` |
+| `border-strong` | `oklch(41% 0.010 88)` | `#4D4A44` | `oklch(76% 0.010 88)` | `#B4B1AA` |
+| `s0` | `oklch(12% 0.012 88)` | `#070602` | `oklch(96% 0.010 88)` | `#F4F2EA` |
+| `s1` | `oklch(16% 0.012 88)` | `#0F0D08` | `oklch(92% 0.010 88)` | `#E7E4DD` |
+| `s2` | `oklch(20% 0.012 88)` | `#181610` | `oklch(88% 0.010 88)` | `#DAD7D0` |
+| `s3` | `oklch(25% 0.012 88)` | `#24211B` | `oklch(84% 0.010 88)` | `#CDCAC3` |
+
+### Palette: standard
+
+| Role | Dark value | Dark hex | Light value | Light hex |
+|---|---|---|---|---|
+| `nominal` | `oklch(73% 0.22 148)` | `#00CB4C` | `oklch(42% 0.18 148)` | `#006400` |
+| `active` | `oklch(76% 0.16 204)` | `#00CDDF` | `oklch(47% 0.16 220)` | `#006B98` |
+| `target` | `oklch(65% 0.26 324)` | `#D63DE6` | `oklch(45% 0.22 324)` | `#8B0097` |
+| `caution` | `oklch(77% 0.17 73)` | `#F4A000` | `oklch(50% 0.17 73)` | `#9B4C00` |
+| `warning` | `oklch(63% 0.22 28)` | `#F13A32` | `oklch(42% 0.21 26)` | `#A10000` |
+| `data` | `oklch(93% 0.008 85)` | `#EAE7E2` | `oklch(14% 0.008 85)` | `#0B0906` |
+| `data-dim` | `oklch(38% 0.010 85)` | `#45423C` | `oklch(70% 0.008 85)` | `#A19E99` |
+| `label` | `oklch(63% 0.012 85)` | `#8C8981` | `oklch(42% 0.010 85)` | `#504D47` |
+| `muted` | `oklch(48.5% 0.010 85)` | `#625F59` | `oklch(63% 0.008 85)` | `#8B8984` |
+| `border` | `oklch(30% 0.012 85)` | `#312D27` | `oklch(82% 0.010 85)` | `#C7C4BD` |
+| `border-strong` | `oklch(40% 0.012 85)` | `#4B4740` | `oklch(74% 0.010 85)` | `#AEAAA4` |
+| `s0` | `oklch(11% 0.010 85)` | `#060402` | `oklch(97% 0.008 85)` | `#F8F5EF` |
+| `s1` | `oklch(15% 0.012 85)` | `#0D0B06` | `oklch(93% 0.010 85)` | `#EBE7E0` |
+| `s2` | `oklch(19% 0.012 85)` | `#16130E` | `oklch(89% 0.010 85)` | `#DEDAD3` |
+| `s3` | `oklch(24% 0.012 85)` | `#221F19` | `oklch(85% 0.010 85)` | `#D1CDC7` |
+
+## Core tokens
+
+### Borders
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `border.width.1` | `1px` | `var(--juno-border-width-1)` | `JunoTokens.borderWidth1` |
+| `border.width.2` | `2px` | `var(--juno-border-width-2)` | `JunoTokens.borderWidth2` |
+| `border.width.3` | `3px` | `var(--juno-border-width-3)` | `JunoTokens.borderWidth3` |
+
+### Breakpoints
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `bp.sm` | `640px` | `var(--juno-bp-sm)` | `JunoTokens.bpSm` |
+| `bp.md` | `768px` | `var(--juno-bp-md)` | `JunoTokens.bpMd` |
+| `bp.lg` | `1024px` | `var(--juno-bp-lg)` | `JunoTokens.bpLg` |
+| `bp.xl` | `1280px` | `var(--juno-bp-xl)` | `JunoTokens.bpXl` |
+| `bp.2xl` | `1536px` | `var(--juno-bp-2xl)` | `JunoTokens.bp2xl` |
+
+### Elevation
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `shadow.1` | `0 1px 2px rgb(0 0 0 / 0.30)` | `var(--juno-shadow-1)` | `JunoTokens.shadow1` |
+| `shadow.2` | `0 4px 14px rgb(0 0 0 / 0.35)` | `var(--juno-shadow-2)` | `JunoTokens.shadow2` |
+| `shadow.3` | `0 12px 32px rgb(0 0 0 / 0.50)` | `var(--juno-shadow-3)` | `JunoTokens.shadow3` |
+
+### Motion
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `motion.duration.instant` | `80ms` | `var(--juno-motion-duration-instant)` | `JunoTokens.motionDurationInstant` |
+| `motion.duration.quick` | `140ms` | `var(--juno-motion-duration-quick)` | `JunoTokens.motionDurationQuick` |
+| `motion.duration.base` | `200ms` | `var(--juno-motion-duration-base)` | `JunoTokens.motionDurationBase` |
+| `motion.duration.deliberate` | `300ms` | `var(--juno-motion-duration-deliberate)` | `JunoTokens.motionDurationDeliberate` |
+| `motion.ease.decel` | `cubic-bezier(0.2, 0.8, 0.2, 1)` | `var(--juno-motion-ease-decel)` | `JunoTokens.motionEaseDecel` |
+| `motion.ease.accel` | `cubic-bezier(0.4, 0, 1, 1)` | `var(--juno-motion-ease-accel)` | `JunoTokens.motionEaseAccel` |
+| `motion.ease.standard` | `cubic-bezier(0.2, 0.7, 0.3, 1)` | `var(--juno-motion-ease-standard)` | `JunoTokens.motionEaseStandard` |
+| `motion.ease.spring` | `cubic-bezier(0.2, 0.9, 0.3, 1.2)` | `var(--juno-motion-ease-spring)` | `JunoTokens.motionEaseSpring` |
+
+### Opacity
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `opacity.disabled` | `0.45` | `var(--juno-opacity-disabled)` | `JunoTokens.opacityDisabled` |
+| `opacity.muted` | `0.65` | `var(--juno-opacity-muted)` | `JunoTokens.opacityMuted` |
+| `opacity.scrim` | `0.62` | `var(--juno-opacity-scrim)` | `JunoTokens.opacityScrim` |
+
+### Radius
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `radius.2` | `2px` | `var(--juno-radius-2)` | `JunoTokens.radius2` |
+| `radius.3` | `3px` | `var(--juno-radius-3)` | `JunoTokens.radius3` |
+| `radius.4` | `4px` | `var(--juno-radius-4)` | `JunoTokens.radius4` |
+| `radius.5` | `5px` | `var(--juno-radius-5)` | `JunoTokens.radius5` |
+| `radius.8` | `8px` | `var(--juno-radius-8)` | `JunoTokens.radius8` |
+
+### Sizing
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `size.tap.min` | `24px` | `var(--juno-size-tap-min)` | `JunoTokens.sizeTapMin` |
+| `size.tap.comfortable` | `44px` | `var(--juno-size-tap-comfortable)` | `JunoTokens.sizeTapComfortable` |
+| `size.dot.sm` | `8px` | `var(--juno-size-dot-sm)` | `JunoTokens.sizeDotSm` |
+| `size.dot.md` | `10px` | `var(--juno-size-dot-md)` | `JunoTokens.sizeDotMd` |
+
+### Spacing
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `space.2` | `2px` | `var(--juno-space-2)` | `JunoTokens.space2` |
+| `space.4` | `4px` | `var(--juno-space-4)` | `JunoTokens.space4` |
+| `space.8` | `8px` | `var(--juno-space-8)` | `JunoTokens.space8` |
+| `space.10` | `10px` | `var(--juno-space-10)` | `JunoTokens.space10` |
+| `space.12` | `12px` | `var(--juno-space-12)` | `JunoTokens.space12` |
+| `space.16` | `16px` | `var(--juno-space-16)` | `JunoTokens.space16` |
+| `space.20` | `20px` | `var(--juno-space-20)` | `JunoTokens.space20` |
+| `space.24` | `24px` | `var(--juno-space-24)` | `JunoTokens.space24` |
+| `space.28` | `28px` | `var(--juno-space-28)` | `JunoTokens.space28` |
+| `space.32` | `32px` | `var(--juno-space-32)` | `JunoTokens.space32` |
+| `space.40` | `40px` | `var(--juno-space-40)` | `JunoTokens.space40` |
+| `space.56` | `56px` | `var(--juno-space-56)` | `JunoTokens.space56` |
+| `space.72` | `72px` | `var(--juno-space-72)` | `JunoTokens.space72` |
+| `space.96` | `96px` | `var(--juno-space-96)` | `JunoTokens.space96` |
+
+### Typography
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `font.family.sans` | `'B612', sans-serif` | `var(--juno-font-family-sans)` | `JunoTokens.fontFamilySans` |
+| `font.family.mono` | `'B612 Mono', monospace` | `var(--juno-font-family-mono)` | `JunoTokens.fontFamilyMono` |
+| `font.weight.light` | `300` | `var(--juno-font-weight-light)` | `JunoTokens.fontWeightLight` |
+| `font.weight.regular` | `400` | `var(--juno-font-weight-regular)` | `JunoTokens.fontWeightRegular` |
+| `font.weight.medium` | `500` | `var(--juno-font-weight-medium)` | `JunoTokens.fontWeightMedium` |
+| `font.weight.semibold` | `600` | `var(--juno-font-weight-semibold)` | `JunoTokens.fontWeightSemibold` |
+| `font.weight.bold` | `700` | `var(--juno-font-weight-bold)` | `JunoTokens.fontWeightBold` |
+| `font.size.10` | `10px` | `var(--juno-font-size-10)` | `JunoTokens.fontSize10` |
+| `font.size.11` | `11px` | `var(--juno-font-size-11)` | `JunoTokens.fontSize11` |
+| `font.size.12` | `12px` | `var(--juno-font-size-12)` | `JunoTokens.fontSize12` |
+| `font.size.13` | `13px` | `var(--juno-font-size-13)` | `JunoTokens.fontSize13` |
+| `font.size.14` | `14px` | `var(--juno-font-size-14)` | `JunoTokens.fontSize14` |
+| `font.size.16` | `16px` | `var(--juno-font-size-16)` | `JunoTokens.fontSize16` |
+| `font.size.18` | `18px` | `var(--juno-font-size-18)` | `JunoTokens.fontSize18` |
+| `font.size.20` | `20px` | `var(--juno-font-size-20)` | `JunoTokens.fontSize20` |
+| `font.size.28` | `28px` | `var(--juno-font-size-28)` | `JunoTokens.fontSize28` |
+| `font.size.32` | `32px` | `var(--juno-font-size-32)` | `JunoTokens.fontSize32` |
+| `font.size.36` | `36px` | `var(--juno-font-size-36)` | `JunoTokens.fontSize36` |
+| `font.size.38` | `38px` | `var(--juno-font-size-38)` | `JunoTokens.fontSize38` |
+| `font.size.48` | `48px` | `var(--juno-font-size-48)` | `JunoTokens.fontSize48` |
+| `font.size.52` | `52px` | `var(--juno-font-size-52)` | `JunoTokens.fontSize52` |
+| `font.lineHeight.none` | `1` | `var(--juno-font-lineHeight-none)` | `JunoTokens.fontLineHeightNone` |
+| `font.lineHeight.tight` | `1.1` | `var(--juno-font-lineHeight-tight)` | `JunoTokens.fontLineHeightTight` |
+| `font.lineHeight.snug` | `1.2` | `var(--juno-font-lineHeight-snug)` | `JunoTokens.fontLineHeightSnug` |
+| `font.lineHeight.normal` | `1.4` | `var(--juno-font-lineHeight-normal)` | `JunoTokens.fontLineHeightNormal` |
+| `font.lineHeight.relaxed` | `1.5` | `var(--juno-font-lineHeight-relaxed)` | `JunoTokens.fontLineHeightRelaxed` |
+| `font.lineHeight.loose` | `1.7` | `var(--juno-font-lineHeight-loose)` | `JunoTokens.fontLineHeightLoose` |
+| `font.tracking.tight` | `0.02em` | `var(--juno-font-tracking-tight)` | `JunoTokens.fontTrackingTight` |
+| `font.tracking.normal` | `0.06em` | `var(--juno-font-tracking-normal)` | `JunoTokens.fontTrackingNormal` |
+| `font.tracking.label` | `0.08em` | `var(--juno-font-tracking-label)` | `JunoTokens.fontTrackingLabel` |
+| `font.tracking.wide` | `0.12em` | `var(--juno-font-tracking-wide)` | `JunoTokens.fontTrackingWide` |
+| `font.tracking.caps` | `0.15em` | `var(--juno-font-tracking-caps)` | `JunoTokens.fontTrackingCaps` |
+| `font.tracking.wider` | `0.2em` | `var(--juno-font-tracking-wider)` | `JunoTokens.fontTrackingWider` |
+| `font.tracking.widest` | `0.3em` | `var(--juno-font-tracking-widest)` | `JunoTokens.fontTrackingWidest` |
+
+### Z-index
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `z.surface` | `0` | `var(--juno-z-surface)` | `JunoTokens.zSurface` |
+| `z.raised` | `100` | `var(--juno-z-raised)` | `JunoTokens.zRaised` |
+| `z.anchored` | `2000` | `var(--juno-z-anchored)` | `JunoTokens.zAnchored` |
+| `z.overlay` | `4000` | `var(--juno-z-overlay)` | `JunoTokens.zOverlay` |
+| `z.alert` | `5000` | `var(--juno-z-alert)` | `JunoTokens.zAlert` |
+