@ponchia/ui 0.3.2 → 0.3.4

package/docs/theming.md

@@ -0,0 +1,209 @@
+# Theming & branding contract
+
+`@ponchia/ui` is one framework meant to dress several different projects.
+This is the **stable, supported surface** for re-branding without forking.
+Anything not listed here is internal and may change between minor versions.
+
+## The one knob: `--accent`
+
+The whole accent family derives from `--accent` via `color-mix()`:
+
+| Token                 | Derivation (light / dark)                    | Role |
+| --------------------- | -------------------------------------------- | ---- |
+| `--accent-strong`     | `--accent` mixed 83% with black / 84% white  | darker/lighter accent for hover, emphasis |
+| `--accent-text`       | `var(--accent-strong)` (alias)               | **accent used as foreground text** — the on-surface, AA-safe one |
+| `--accent-soft`       | `--accent` at 10% / 14% over transparent     | tinted fills |
+| `--bg-accent`         | `--accent` at 6% / 8%                         | faint accent backgrounds |
+| `--field-dot-accent`  | `--accent` at 78% / 82%                       | form dot indicators |
+| `--focus-ring`        | `var(--accent)` (solid)                       | **every focus outline** — override to tune the ring alone |
+
+So a full re-brand is one declaration — globally or on any subtree:
+
+```css
+:root      { --accent: #2f6df6; }   /* brand the whole app blue   */
+.promo     { --accent: #16a34a; }   /* …or just this section green */
+:root[data-theme='dark'] { --accent: #6ea8ff; } /* per-theme tuning */
+```
+
+Everything — buttons, focus rings, dot motifs, accent borders, soft
+fills — follows automatically, in both light and dark.
+
+> **Two contrast obligations when you change `--accent`:**
+>
+> 1. **Buttons** — pick an `--accent` with ≥ 4.5:1 against `--button-text`
+>    (white in light, black in dark) for accessible primary buttons.
+> 2. **Accent-as-text** — anywhere the accent is foreground text (links,
+>    active nav/tabs, eyebrows, chips) the framework uses `--accent-text`,
+>    **not** raw `--accent`, so it stays AA on surfaces. `--accent-text`
+>    defaults to `--accent-strong` (a darkened/​lightened accent). If you
+>    re-brand to a pale hue, raw `--accent` would fail as text — override
+>    `--accent-text` to a sufficiently dark/light value rather than
+>    relying on the 83%/84% mix.
+>
+> The defaults are tuned for both; verify if you deviate hard. The focus
+> ring is solid `--accent` (≥ 3:1 non-text) — re-brand to a near-`--bg`
+> hue and you must also raise `--focus-ring` (it's an independent knob).
+
+## Other supported knobs
+
+- **Spacing** — override the `--space-2xs … --space-2xl` scale, or use a
+  preset: `data-density="compact"` / `data-density="comfortable"` on any
+  element (defaults to the middle scale).
+- **Radius** — `--radius-sm … --radius-xl`, `--radius-pill`. The Nothing
+  default is near-sharp; raise these for a softer brand.
+- **Type** — `--display` (dot-matrix face), `--mono`, `--sans`. Override
+  to drop Doto or swap the body face; the token layer keeps working even
+  if you self-host fonts (see the `fonts.css` note in the README).
+- **Surfaces / lines / text** — the `--bg*`, `--panel*`, `--line*`,
+  `--text*` tokens are overridable for a bespoke palette, but you then
+  own their contrast. Prefer just `--accent` unless you need a full
+  re-skin.
+- **Native controls** — checkbox/radio/range tick marks use the CSS
+  `accent-color: var(--accent)` (browser-rendered). The check glyph
+  colour is the UA's choice and not in our control, so a very light
+  `--accent` (e.g. a pale yellow) can make native checkmarks low-
+  contrast. If you re-brand to a light hue, verify native controls or
+  set `accent-color` yourself on them — this is the one accent surface
+  the framework can't tune for you.
+
+## Beyond accent: a full re-skin (the knob really works)
+
+The "Nothing" look is the **default skin, not the architecture**. It is
+a handful of token declarations deep — no selector hardcodes the
+identity. An audit of `css/` found radius (every rounded element goes
+through `var(--radius-*)`), the display face, dot density, motion easings
+and the colour scale are *all* token-driven; the only hardcoded geometry
+is the deliberate `border-radius: 0` on a few sharp elements and `50%` on
+dots/avatars (correct to hardcode — they are circles, not skin).
+
+The framework derives its accent **per theme** (the shipped red is
+`#d71921` light / `#ff3b41` dark) precisely so each side stays
+contrast-safe. A serious re-skin does the same — one override block,
+no fork:
+
+```css
+/* "Warm" — softer, rounder, no dot-matrix. Per-theme so the primary
+   button label stays AA on both sides (measured: see below). */
+:root,
+:root[data-theme='light'] {
+  --accent: #a8431a;            /* terracotta — #fff label = 6.03:1 */
+  --radius-md: 10px;            /* the system rounds everywhere at once */
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --display: var(--sans);       /* retire the Doto dot-matrix face */
+  --dot-size: 0;                /* mute the decorative dot-grid motif */
+}
+:root[data-theme='dark'] {
+  --accent: #e8a06a;            /* lighter warm — #000 label = 9.67:1 */
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) { --accent: #e8a06a; }
+}
+```
+
+That changes buttons, cards, inputs, badges, focus rings, the display
+type and the dot motif together, because every component consumes those
+tokens — not because there is a per-component theme file. This is the
+difference between a *system* and a *skin*: the skin is swappable, the
+system (rationed colour, density, classless prose, minimal JS) is what
+you are actually adopting.
+
+Caveat, restated: a custom `--accent` is **your** contrast obligation —
+the shipped palettes are CI-gated ([contrast.md](contrast.md)), a re-skin
+is not. The values above are *measured* (white label on `#a8431a` =
+6.03:1, black on `#e8a06a` = 9.67:1, both ≥ 4.5:1 AA); pick your own with
+the same check. Don't set one global `--accent` and hope — that is why
+this example is split per theme.
+
+## Token tiers (0.3.1)
+
+Three additive, non-breaking tiers sit on top of the primitives. The
+short legacy names (`--panel`, `--line`, `--accent`, …) keep working
+forever as aliases — the tiers are about giving consumers stabler,
+coarser-grained handles.
+
+- **Semantic tier — `--bronto-color-*`.** Role-named aliases:
+  `--bronto-color-surface`, `-surface-raised`, `-border`,
+  `-border-strong`, `-text`, `-text-muted`, `-action`, `-on-action`,
+  `-focus`, `-success`, `-warning`, `-danger`, `-bg`. Target these in
+  new consumer code: re-skinning a _role_ is now one override instead of
+  chasing component internals. They resolve through the per-theme
+  primitives, so light/dark still Just Works.
+- **Accent ramp — `--accent-1 … --accent-6`.** A stepped family
+  (subtle → bold) derived from the single `--accent` knob via
+  `color-mix` against the theme background. Re-brands and theme-adapts
+  automatically. This is the palette for charts / data-viz / multi-state
+  surfaces (the use case the JS token export advertises).
+- **Neutral ramp — `--surface-1 … --surface-6`** (low → high contrast
+  against `--bg`) for layered surfaces without hand-picking greys.
+- **Stacking scale — `--z-base / -raised / -sticky / -overlay /
+  -popover / -toast`.** Every framework `z-index` now resolves through
+  these; override one to slot your app's own layers around the
+  framework's without specificity/`z-index` wars.
+
+All four tiers are in the DTCG export and the JS token model.
+
+## Accessibility markup contracts
+
+A few components are styled but need the consumer to author the right
+semantics — the CSS can't add ARIA for you:
+
+- **`.ui-switch`** — put `role="switch"` on the `<input type="checkbox">`.
+  It then announces "switch, on/off" and the native `checked` drives
+  `aria-checked` (no JS). Forced-colors state cues ship in `forms.css`.
+- **`.ui-tab` / tabs** — operability requires `initTabs()`; don't
+  server-render panels `hidden` unless it's guaranteed to run (see the
+  `initTabs` doc comment).
+- **`.ui-combobox`** — use `initCombobox()`; it owns the APG ARIA.
+- **`.ui-tooltip`** — fine for short labels; for edge-critical or rich
+  content use `.ui-popover` + `initPopover()` (collision-aware).
+
+> **Verify a rebrand:** open
+> [`demo/theme-playground.html`](../demo/theme-playground.html) — paste
+> your `--accent`, see the derived family and the computed WCAG ratios
+> for `--accent-text` / `--accent` against the surface, and copy the CSS
+> + DTCG override. This is the instrument for the "verify your hue"
+> obligation below.
+
+## Contrast
+
+- `data-contrast="high"` on any element, **and** the OS
+  `prefers-contrast: more` signal, collapse the soft greys toward the
+  strong end (hairlines → `--line-strong`, dim text → `--text-soft`,
+  solid focus ring). Theme-agnostic — they reference the per-theme
+  `*-strong` tokens, so they work under light and dark.
+- Windows High Contrast / `forced-colors: active` is handled in
+  `base.css`: state that was signalled only by a fill (progress, status
+  dots, switch, segmented) is re-asserted with system colors.
+
+## Design-token interop (DTCG)
+
+`@ponchia/ui/tokens.dtcg.json` is the token model in the W3C Design
+Tokens Community Group format, for Style Dictionary / Figma / other
+tooling. Generated from `tokens/index.js` and drift-checked by
+`npm run check`. Resolvable primitives (the scale, `--accent`, literal
+palette) carry real `$value`s; the CSS-runtime-derived family
+(`accent-soft`, `focus-ring`, aliases) is spec-shaped with
+`$value: null` + the CSS in `$extensions["com.ponchia.css"]` rather than
+fabricating a number — the resolvable knob is `color.<theme>.accent`.
+
+## Reading tokens from JS
+
+`@ponchia/ui/tokens` exposes the model as data. The ergonomic view only
+strips the `--` prefix — **keys stay kebab-case**, so they must be
+bracket-accessed: `themeColor('dark')['accent-soft']`, **not**
+`.accentSoft`. (`themeColor('dark').accent` works only because `accent`
+is a single word.) `--accent` and the non-derived colors resolve to
+literal hex; the derived members (`accent-strong`, `accent-soft`,
+`focus-ring`, …) are `color-mix(…)` / alias strings — resolve them in the
+DOM via `getComputedStyle` if you need the final value, or just read/​set
+`--accent` itself. The `.d.ts` now types these keys as literal unions
+(`ColorKey`/`ScaleKey`), so a mistyped key is a compile error and
+autocomplete lists the real names.
+
+## Stability
+
+The token **names** and the `--accent` derivation are the contract and
+are covered by `npm run check` (the `tokens.css ⇄ tokens/index.js ⇄
+index.json` drift check). Token **values** may be tuned within a theme;
+treat a value change as visual, a name/derivation change as breaking.

package/docs/usage.md

@@ -0,0 +1,113 @@
+# Usage — when to reach for what
+
+`docs/reference.md` is the *catalog* (every class, generated). This is
+the *decision guide*: the rules a kitchen-sink demo can't tell you. It is
+hand-written and stable — treated as contract like
+[theming.md](theming.md), not auto-generated.
+
+The one principle everything below follows:
+
+> **Color is rationed. Structure carries meaning.** Reach for layout,
+> type weight, and the hairline before reaching for a hue. The accent is
+> a spotlight, not a paint bucket.
+
+## Density: the unset default and its two presets
+
+`data-density` has two presets over an unset middle default. There is no
+`data-density="default"` value — *unset* is the design target; you opt
+into a preset on `<html>` or any subtree:
+
+| Value                  | Use for                                          |
+| ---------------------- | ------------------------------------------------ |
+| _(unset)_              | general app & content — the design target        |
+| `compact`              | data-dense admin: tables, dashboards, toolbars   |
+| `comfortable`          | marketing / landing / reading-first pages        |
+
+Scope it, don't globalize blindly: a dashboard with one marketing-style
+hero can set `compact` on `<html>` and `comfortable` on the hero section.
+
+## Badge vs chip vs status dot
+
+All three are small. They are **not** interchangeable:
+
+| Use            | When                                                              |
+| -------------- | ----------------------------------------------------------------- |
+| **status dot** | a single piece of state on something else (row online, build ok). Smallest possible signal; pair with text for a11y, never color-only. |
+| **badge**      | a label *classifying* the thing it sits on (count, tone, "BETA"). Static, not actionable. `ui.badge({ tone })`. |
+| **chip**       | a discrete, often removable/selectable token the user manipulated (a filter, a tag input value). Interactive affordance implied. |
+
+Rule of thumb: state → dot, classification → badge, user-controlled value
+→ chip.
+
+## Numbers: `ui-num` vs the table state classes
+
+- Inside `.ui-table`, a numeric cell is `.is-num` (+ `.is-pos` /
+  `.is-neg` for P&L tone). These are table-local `is-*` hooks, not in
+  `cls` by design.
+- **Anywhere else** (a card, a stat, inline figures) use the `ui-num`
+  primitive — `ui.num({ tone })`. Same tabular/aligned/tone intent,
+  freed from the table. Do not hand-roll right-align + `text-green`;
+  that's the duplication `ui-num` exists to kill.
+
+## Prose vs primitives, and prose inside a card
+
+- `ui-prose` styles **raw, unclassed semantic HTML** (MDX / CMS / LLM
+  output). Use it for *body content you don't control the markup of*.
+- Do **not** wrap app UI in `ui-prose` to "get nice spacing" — compose
+  primitives instead; prose deliberately restyles bare `<h2>`, `<table>`,
+  `<a>` and will fight your components.
+- Prose **inside a card**: put `ui-prose` on an inner wrapper, not on
+  `.ui-card` itself, so card padding/border stays the card's and prose
+  rhythm stays the content's. One responsibility per element.
+
+## Buttons: variant and size
+
+- **primary** — the single most important action in a view. Aim for one.
+- **ghost** — secondary actions; the default for "another button here".
+- **subtle** — tertiary / low-stakes (toolbar, inline).
+- Size: default everywhere; `--sm` for dense tooling (toolbars,
+  pagination, table row actions), `--lg` for a hero CTA only.
+- Loading is **not** a class: set `aria-busy="true"` (+ `disabled`); the
+  spinner is CSS. This is the ARIA-driven contract — see reference.md
+  → "Composition & state".
+
+## Link vs link--cta
+
+Plain `ui-link` for in-flow links. `ui-link--cta` is the eyebrow-faced
+action link (accent · display · uppercase + arrow) — a *navigational
+call to action*, not a substitute for a button (no form submit, no
+destructive action).
+
+## Feedback: alert vs toast vs tooltip
+
+| Surface  | Lifetime / trigger                                          |
+| -------- | ----------------------------------------------------------- |
+| alert / callout | persistent, in-flow, part of the page (form errors, page-level notice). |
+| toast    | transient, out-of-flow, system-initiated. Danger toasts route to an assertive live region; everything else polite. |
+| tooltip  | supplemental, hover/focus, never essential info (it's not announced reliably; don't hide required content in it). |
+
+## Modal: native `<dialog>` vs `is-open`
+
+Prefer the **native `<dialog>`** path — you get top-layer, backdrop and
+focus-trap free. Only use `ui-modal.is-open` (`ui.modal({ open: true })`)
+when a portal/React modal genuinely can't be a `<dialog>`; then the
+backdrop and focus-trap are **yours** to provide. A drawer is a modal
+that enters from an edge — same rule.
+
+## When to add a behavior
+
+The CSS is the framework; `@ponchia/ui/behaviors` is the *sanctioned*
+home for the little JS that genuinely needs scripting (theme persistence,
+disclosure, dialog glue, toast, combobox, form-validation, table-sort).
+Reach for it instead of reimplementing — every initializer is SSR-safe,
+idempotent, and returns a cleanup. If you find yourself writing focus
+management or `aria-expanded` toggling by hand, there is probably already
+a behavior for it.
+
+## Re-brand obligations (the short version)
+
+Changing `--accent` is one declaration, but **contrast is then yours**:
+the shipped palettes are gated (see [contrast.md](contrast.md)); your
+custom accent is not. Verify primary-button label, `--accent-text`, and
+the focus ring against their backgrounds. Full contract:
+[theming.md](theming.md).

package/llms.txt

@@ -0,0 +1,91 @@
+# @ponchia/ui
+
+> CSS-first, framework-agnostic UI framework. Zero runtime dependencies.
+> One `@layer bronto` cascade, a typed class vocabulary, design tokens as
+> data, and optional SSR-safe vanilla behaviors. Nothing-inspired:
+> monochrome surfaces, a single rationed accent, dot-matrix display type.
+>
+> This file orients an LLM/agent. The authoritative, always-correct API
+> is the TypeScript declarations shipped in this package (paths below):
+> they are generated from the runtime sources and CI-drift-checked, so
+> they never lie. Read them before guessing class or token names.
+
+## Use the framework
+
+CSS (pick one; do not import both):
+
+```css
+@import '@ponchia/ui';        /* dist/bronto.css — flattened, minified, one file (recommended) */
+@import '@ponchia/ui/css';    /* css/core.css — @import fan-out, needs a bundler */
+```
+
+Everything lands in `@layer bronto`. Consumer styles in no layer (or a
+later layer) always win over framework styles regardless of selector
+specificity — this is the intended override mechanism; do not fight it
+with `!important`.
+
+Typed class vocabulary (returns plain strings — works in any framework):
+
+```js
+import { cls, ui, cx } from '@ponchia/ui/classes';
+// ui.button({ variant: 'ghost' }) -> "ui-button ui-button--ghost"
+// cx(ui.dot({ tone: 'success' }), 'my-extra') -> joined, falsy-skipped
+// cls is the frozen flat registry of every class the framework defines
+```
+
+Tokens as data (theming + reading the palette):
+
+```js
+import { cssVars, tokens, themeColor } from '@ponchia/ui/tokens';
+```
+
+Optional vanilla behaviors (theme toggle, etc. — SSR-safe, tree-shakeable):
+
+```js
+import { applyStoredTheme } from '@ponchia/ui/behaviors';
+```
+
+## Authoritative offline references (shipped in this package)
+
+Read these from `node_modules/@ponchia/ui/` — no network needed:
+
+- `classes/index.d.ts` — literal-typed `cls` map (exact class strings),
+  every `ui.*()` recipe signature, every `*Opts` interface. The complete
+  class surface; an agent should read this to know valid class names.
+- `docs/reference.md` — the full class catalog as prose tables (every
+  class grouped by component, with registry key + kind). Generated from
+  the same source as the types and CI-drift-checked.
+- `docs/theming.md` — the token contract: which tokens to override, the
+  light/dark model, and the rationed-accent rule.
+- `docs/usage.md` — the decision guide: badge vs chip vs dot, default
+  density, prose-in-card, when to add a behavior. Read this before
+  re-implementing UI the framework already has an opinion about.
+- `docs/contrast.md` — the published, CI-gated WCAG 2.1 contrast matrix
+  for every contractual token pairing, per theme. Generated from the
+  resolved palette; the build fails below the declared floor.
+- `tokens/index.d.ts` — every design-token name as a literal union.
+- `tokens/index.json` — tokens as plain data (global / light / dark).
+- `tokens/tokens.dtcg.json` — same tokens in W3C DTCG format.
+- `tokens/resolved.json` — every colour token resolved to a static
+  `#rrggbb` / `rgba(...)` per theme (var() + color-mix() evaluated).
+  Use this for non-CSS render targets: MapLibre/canvas/WebGL/SVG.
+- `behaviors/index.d.ts` — typed signatures for the optional behaviors.
+- `classes/vscode.css-custom-data.json` — editor autocomplete for tokens.
+
+## Human-browsable references (not shipped in the npm tarball, by design)
+
+- Live kitchen-sink demo (every component, light/dark, RTL): https://ponchia.github.io/bronto-ui/
+- Architecture & the CSS-first decision: https://github.com/Ponchia/bronto-ui/blob/main/docs/architecture.md
+- Framework integration guides (Astro / SvelteKit / React-Solid / vanilla):
+  https://github.com/Ponchia/bronto-ui/tree/main/docs/getting-started
+
+## Rules an agent should respect
+
+- Never invent `ui-*` class names. Every valid class is a member of
+  `cls` in `classes/index.d.ts`; if it is not there, it does not exist.
+- Prefer the `ui.*()` recipes over hand-concatenating modifier strings.
+- Override framework styles by writing your own rules outside
+  `@layer bronto` — not with higher specificity or `!important`.
+- The accent color is deliberately rationed (monochrome + one accent).
+  Do not introduce new hues; theme via the documented tokens only.
+- Pre-1.0 SemVer: breaking changes ship in the *minor*. Pin `~0.x`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponchia/ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "description": "Shared Bronto UI framework — Nothing-inspired monochrome CSS theme, dot-matrix motifs, admin shell.",
   "license": "MIT",
@@ -24,7 +24,12 @@
     "tokens",
     "classes",
     "behaviors",
-    "shiki"
+    "shiki",
+    "llms.txt",
+    "docs/reference.md",
+    "docs/theming.md",
+    "docs/contrast.md",
+    "docs/usage.md"
   ],
   "style": "./dist/bronto.css",
   "scripts": {
@@ -34,8 +39,10 @@
     "check:format": "prettier --check .",
     "tokens:build": "node scripts/gen-tokens-json.mjs",
     "dtcg:build": "node scripts/gen-dtcg.mjs",
+    "resolved:build": "node scripts/gen-resolved.mjs",
     "dts:build": "node scripts/gen-dts.mjs",
     "reference:build": "node scripts/gen-reference.mjs",
+    "contrast:build": "node scripts/gen-contrast.mjs",
     "vscode:build": "node scripts/gen-vscode-data.mjs",
     "dist:build": "node scripts/build-dist.mjs",
     "check:exports": "node scripts/check-exports.mjs",
@@ -44,15 +51,17 @@
     "check:dts": "node scripts/check-dts.mjs",
     "check:types": "tsc -p tsconfig.json",
     "check:dtcg": "node scripts/check-dtcg.mjs",
+    "check:resolved": "node scripts/check-resolved.mjs",
     "check:shiki": "node scripts/check-shiki.mjs",
     "check:dist": "node scripts/check-dist.mjs",
     "check:pack": "node scripts/check-pack.mjs",
     "check:release": "node scripts/check-release.mjs",
     "check:reference": "node scripts/check-reference.mjs",
+    "check:contrast": "node scripts/check-contrast.mjs",
     "check:vscode": "node scripts/check-vscode-data.mjs",
-    "check": "npm run lint && npm run check:format && npm run check:exports && npm run check:tokens && npm run check:classes && npm run check:dts && npm run check:types && npm run check:dtcg && npm run check:shiki && npm run check:dist && npm run check:pack && npm run check:release && npm run check:reference && npm run check:vscode",
+    "check": "npm run lint && npm run check:format && npm run check:exports && npm run check:tokens && npm run check:classes && npm run check:dts && npm run check:types && npm run check:dtcg && npm run check:resolved && npm run check:shiki && npm run check:dist && npm run check:pack && npm run check:release && npm run check:reference && npm run check:contrast && npm run check:vscode",
     "test": "node --test \"test/*.test.mjs\"",
-    "prepack": "npm run tokens:build && npm run dtcg:build && npm run dts:build && npm run reference:build && npm run vscode:build && npm run dist:build",
+    "prepack": "npm run tokens:build && npm run dtcg:build && npm run resolved:build && npm run dts:build && npm run reference:build && npm run contrast:build && npm run vscode:build && npm run dist:build",
     "prepublishOnly": "npm run check && npm test"
   },
   "devDependencies": {
@@ -110,7 +119,13 @@
     "./vscode.css-custom-data.json": "./classes/vscode.css-custom-data.json",
     "./tokens.json": "./tokens/index.json",
     "./tokens.dtcg.json": "./tokens/tokens.dtcg.json",
+    "./tokens/resolved.json": "./tokens/resolved.json",
     "./shiki/nothing.json": "./shiki/nothing.json",
+    "./llms.txt": "./llms.txt",
+    "./docs/reference.md": "./docs/reference.md",
+    "./docs/theming.md": "./docs/theming.md",
+    "./docs/contrast.md": "./docs/contrast.md",
+    "./docs/usage.md": "./docs/usage.md",
     "./classes": {
       "types": "./classes/index.d.ts",
       "default": "./classes/index.js"

package/tokens/index.d.ts

@@ -3,9 +3,9 @@
 
 export type ThemeName = 'light' | 'dark';
 
-export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--mono' | '--sans' | '--display' | '--dot-font' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--z-base' | '--z-raised' | '--z-sticky' | '--z-overlay' | '--z-popover' | '--z-toast' | '--accent-1' | '--accent-2' | '--accent-3' | '--accent-4' | '--accent-5' | '--accent-6' | '--surface-1' | '--surface-2' | '--surface-3' | '--surface-4' | '--surface-5' | '--surface-6' | '--bronto-color-bg' | '--bronto-color-surface' | '--bronto-color-surface-raised' | '--bronto-color-border' | '--bronto-color-border-strong' | '--bronto-color-text' | '--bronto-color-text-muted' | '--bronto-color-action' | '--bronto-color-on-action' | '--bronto-color-focus' | '--bronto-color-success' | '--bronto-color-warning' | '--bronto-color-danger' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
-export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-soft' | '--danger' | '--danger-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
-export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-soft' | '--danger' | '--danger-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
+export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--mono' | '--sans' | '--dot-font' | '--display' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--z-base' | '--z-raised' | '--z-sticky' | '--z-overlay' | '--z-popover' | '--z-toast' | '--accent-1' | '--accent-2' | '--accent-3' | '--accent-4' | '--accent-5' | '--accent-6' | '--surface-1' | '--surface-2' | '--surface-3' | '--surface-4' | '--surface-5' | '--surface-6' | '--bronto-color-bg' | '--bronto-color-surface' | '--bronto-color-surface-raised' | '--bronto-color-border' | '--bronto-color-border-strong' | '--bronto-color-text' | '--bronto-color-text-muted' | '--bronto-color-action' | '--bronto-color-on-action' | '--bronto-color-focus' | '--bronto-color-success' | '--bronto-color-warning' | '--bronto-color-danger' | '--bronto-color-info' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
+export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
+export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
 
 /** Exact mirror of the :root blocks in css/tokens.css (literal keys). */
 export declare const cssVars: {
@@ -14,8 +14,8 @@ export declare const cssVars: {
   dark: Record<DarkTokenName, string>;
 };
 
-export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'mono' | 'sans' | 'display' | 'dot-font' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'z-base' | 'z-raised' | 'z-sticky' | 'z-overlay' | 'z-popover' | 'z-toast' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-4' | 'surface-5' | 'surface-6' | 'bronto-color-bg' | 'bronto-color-surface' | 'bronto-color-surface-raised' | 'bronto-color-border' | 'bronto-color-border-strong' | 'bronto-color-text' | 'bronto-color-text-muted' | 'bronto-color-action' | 'bronto-color-on-action' | 'bronto-color-focus' | 'bronto-color-success' | 'bronto-color-warning' | 'bronto-color-danger' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
-export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-strong' | 'accent-text' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'orange' | 'orange-soft' | 'danger' | 'danger-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
+export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'mono' | 'sans' | 'dot-font' | 'display' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'z-base' | 'z-raised' | 'z-sticky' | 'z-overlay' | 'z-popover' | 'z-toast' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-4' | 'surface-5' | 'surface-6' | 'bronto-color-bg' | 'bronto-color-surface' | 'bronto-color-surface-raised' | 'bronto-color-border' | 'bronto-color-border-strong' | 'bronto-color-text' | 'bronto-color-text-muted' | 'bronto-color-action' | 'bronto-color-on-action' | 'bronto-color-focus' | 'bronto-color-success' | 'bronto-color-warning' | 'bronto-color-danger' | 'bronto-color-info' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
+export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-strong' | 'accent-text' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'orange' | 'orange-soft' | 'danger' | 'danger-soft' | 'info' | 'info-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
 
 /** Ergonomic view derived from {@link cssVars} (`--` prefix stripped). */
 export declare const tokens: {

package/tokens/index.js

@@ -32,8 +32,8 @@ export const cssVars = {
     '--mono': "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
     '--sans':
       "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-    '--display': "'Doto', var(--mono)",
     '--dot-font': "'Doto', var(--mono)",
+    '--display': 'var(--dot-font)',
     '--text-2xs': '0.68rem',
     '--text-xs': '0.76rem',
     '--text-sm': '0.86rem',
@@ -81,6 +81,7 @@ export const cssVars = {
     '--bronto-color-success': 'var(--success)',
     '--bronto-color-warning': 'var(--warning)',
     '--bronto-color-danger': 'var(--danger)',
+    '--bronto-color-info': 'var(--info)',
     '--surface': 'var(--panel)',
     '--surface-raised': 'var(--panel-strong)',
     '--surface-muted': 'var(--panel-soft)',
@@ -112,6 +113,8 @@ export const cssVars = {
     '--orange-soft': 'rgb(168, 95, 50, 0.13)',
     '--danger': '#c01622',
     '--danger-soft': 'rgb(192, 22, 34, 0.1)',
+    '--info': '#1f63c4',
+    '--info-soft': 'rgb(31, 99, 196, 0.12)',
     '--code-bg': 'rgb(10, 10, 10, 0.05)',
     '--button-text': '#ffffff',
     '--field-dot': 'rgb(10, 10, 10, 0.16)',
@@ -146,6 +149,8 @@ export const cssVars = {
     '--orange-soft': 'rgb(208, 140, 91, 0.15)',
     '--danger': '#ff4d54',
     '--danger-soft': 'rgb(255, 77, 84, 0.15)',
+    '--info': '#6fb0e6',
+    '--info-soft': 'rgb(111, 176, 230, 0.14)',
     '--code-bg': 'rgb(255, 255, 255, 0.05)',
     '--button-text': '#000000',
     '--field-dot': 'rgb(242, 242, 242, 0.14)',

package/tokens/index.json

@@ -15,8 +15,8 @@
       "--space-2xl": "2.5rem",
       "--mono": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
       "--sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      "--display": "'Doto', var(--mono)",
       "--dot-font": "'Doto', var(--mono)",
+      "--display": "var(--dot-font)",
       "--text-2xs": "0.68rem",
       "--text-xs": "0.76rem",
       "--text-sm": "0.86rem",
@@ -64,6 +64,7 @@
       "--bronto-color-success": "var(--success)",
       "--bronto-color-warning": "var(--warning)",
       "--bronto-color-danger": "var(--danger)",
+      "--bronto-color-info": "var(--info)",
       "--surface": "var(--panel)",
       "--surface-raised": "var(--panel-strong)",
       "--surface-muted": "var(--panel-soft)",
@@ -94,6 +95,8 @@
       "--orange-soft": "rgb(168, 95, 50, 0.13)",
       "--danger": "#c01622",
       "--danger-soft": "rgb(192, 22, 34, 0.1)",
+      "--info": "#1f63c4",
+      "--info-soft": "rgb(31, 99, 196, 0.12)",
       "--code-bg": "rgb(10, 10, 10, 0.05)",
       "--button-text": "#ffffff",
       "--field-dot": "rgb(10, 10, 10, 0.16)",
@@ -127,6 +130,8 @@
       "--orange-soft": "rgb(208, 140, 91, 0.15)",
       "--danger": "#ff4d54",
       "--danger-soft": "rgb(255, 77, 84, 0.15)",
+      "--info": "#6fb0e6",
+      "--info-soft": "rgb(111, 176, 230, 0.14)",
       "--code-bg": "rgb(255, 255, 255, 0.05)",
       "--button-text": "#000000",
       "--field-dot": "rgb(242, 242, 242, 0.14)",
@@ -153,8 +158,8 @@
       "space-2xl": "2.5rem",
       "mono": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
       "sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      "display": "'Doto', var(--mono)",
       "dot-font": "'Doto', var(--mono)",
+      "display": "var(--dot-font)",
       "text-2xs": "0.68rem",
       "text-xs": "0.76rem",
       "text-sm": "0.86rem",
@@ -202,6 +207,7 @@
       "bronto-color-success": "var(--success)",
       "bronto-color-warning": "var(--warning)",
       "bronto-color-danger": "var(--danger)",
+      "bronto-color-info": "var(--info)",
       "surface": "var(--panel)",
       "surface-raised": "var(--panel-strong)",
       "surface-muted": "var(--panel-soft)",
@@ -233,6 +239,8 @@
         "orange-soft": "rgb(168, 95, 50, 0.13)",
         "danger": "#c01622",
         "danger-soft": "rgb(192, 22, 34, 0.1)",
+        "info": "#1f63c4",
+        "info-soft": "rgb(31, 99, 196, 0.12)",
         "code-bg": "rgb(10, 10, 10, 0.05)",
         "button-text": "#ffffff",
         "field-dot": "rgb(10, 10, 10, 0.16)",
@@ -266,6 +274,8 @@
         "orange-soft": "rgb(208, 140, 91, 0.15)",
         "danger": "#ff4d54",
         "danger-soft": "rgb(255, 77, 84, 0.15)",
+        "info": "#6fb0e6",
+        "info-soft": "rgb(111, 176, 230, 0.14)",
         "code-bg": "rgb(255, 255, 255, 0.05)",
         "button-text": "#000000",
         "field-dot": "rgb(242, 242, 242, 0.14)",