@ponchia/ui 0.3.3 → 0.3.4

package/docs/reference.md

@@ -9,7 +9,7 @@ rendering of every class is the kitchen-sink demo:
 **<https://ponchia.github.io/bronto-ui/>**. Theming knobs and the token
 contract: [docs/theming.md](theming.md).
 
-- 226 classes across 101 component groups
+- 230 classes across 101 component groups
 - Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
 - Tokens as data: `import { cssVars, tokens, themeColor } from '@ponchia/ui/tokens'`
 
@@ -38,6 +38,7 @@ each one matches a real selector in the stylesheet.
 | `cls.alertTitle` | `ui-alert__title` | part |
 | `cls.alertAccent` | `ui-alert--accent` | modifier |
 | `cls.alertDanger` | `ui-alert--danger` | modifier |
+| `cls.alertInfo` | `ui-alert--info` | modifier |
 | `cls.alertSuccess` | `ui-alert--success` | modifier |
 | `cls.alertWarning` | `ui-alert--warning` | modifier |
 
@@ -166,6 +167,7 @@ each one matches a real selector in the stylesheet.
 | `cls.badgeAccent` | `ui-badge--accent` | modifier |
 | `cls.badgeDanger` | `ui-badge--danger` | modifier |
 | `cls.badgeDot` | `ui-badge--dot` | modifier |
+| `cls.badgeInfo` | `ui-badge--info` | modifier |
 | `cls.badgeMuted` | `ui-badge--muted` | modifier |
 | `cls.badgeSuccess` | `ui-badge--success` | modifier |
 | `cls.badgeWarning` | `ui-badge--warning` | modifier |
@@ -273,6 +275,7 @@ each one matches a real selector in the stylesheet.
 | `cls.dot` | `ui-dot` | base |
 | `cls.dotAccent` | `ui-dot--accent` | modifier |
 | `cls.dotDanger` | `ui-dot--danger` | modifier |
+| `cls.dotInfo` | `ui-dot--info` | modifier |
 | `cls.dotLive` | `ui-dot--live` | modifier |
 | `cls.dotSuccess` | `ui-dot--success` | modifier |
 | `cls.dotWarning` | `ui-dot--warning` | modifier |
@@ -727,6 +730,7 @@ each one matches a real selector in the stylesheet.
 | `cls.toastTitle` | `ui-toast__title` | part |
 | `cls.toastAccent` | `ui-toast--accent` | modifier |
 | `cls.toastDanger` | `ui-toast--danger` | modifier |
+| `cls.toastInfo` | `ui-toast--info` | modifier |
 | `cls.toastSuccess` | `ui-toast--success` | modifier |
 | `cls.toastWarning` | `ui-toast--warning` | modifier |
 
@@ -782,7 +786,7 @@ works in any framework without a binding layer:
   `ui-button`; the leading spinner is injected by CSS with no extra
   markup or class. `ui-button--sm`/`--lg` size it.
 - **Badge tone** — `ui.badge({ tone })` emits the framework tone
-  (`accent|success|warning|danger|muted`). Mapping an app's own variant
+  (`accent|success|warning|danger|info|muted`). Mapping an app's own variant
   vocabulary onto a tone is application logic, not a framework class.
 - **Modal** — native `<dialog>` gets backdrop + top-layer + focus-trap
   free. For a controlled/portal modal, add `is-open`
@@ -813,8 +817,8 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--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` |
@@ -862,6 +866,7 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--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)` |
@@ -895,6 +900,8 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--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)` |
@@ -931,6 +938,8 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--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/docs/theming.md

@@ -66,6 +66,55 @@ fills — follows automatically, in both light and dark.
   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

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

@@ -57,6 +57,12 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
   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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponchia/ui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "Shared Bronto UI framework — Nothing-inspired monochrome CSS theme, dot-matrix motifs, admin shell.",
   "license": "MIT",
@@ -27,7 +27,9 @@
     "shiki",
     "llms.txt",
     "docs/reference.md",
-    "docs/theming.md"
+    "docs/theming.md",
+    "docs/contrast.md",
+    "docs/usage.md"
   ],
   "style": "./dist/bronto.css",
   "scripts": {
@@ -40,6 +42,7 @@
     "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",
@@ -54,10 +57,11 @@
     "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:resolved && 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 resolved: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": {
@@ -120,6 +124,8 @@
     "./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)",

package/tokens/resolved.json

@@ -26,6 +26,7 @@
     "--bronto-color-success": "#2f7d4f",
     "--bronto-color-warning": "#806414",
     "--bronto-color-danger": "#c01622",
+    "--bronto-color-info": "#1f63c4",
     "--surface": "#ffffff",
     "--surface-raised": "#ffffff",
     "--surface-muted": "#ececea",
@@ -54,6 +55,8 @@
     "--orange-soft": "rgba(168, 95, 50, 0.13)",
     "--danger": "#c01622",
     "--danger-soft": "rgba(192, 22, 34, 0.1)",
+    "--info": "#1f63c4",
+    "--info-soft": "rgba(31, 99, 196, 0.12)",
     "--code-bg": "rgba(10, 10, 10, 0.05)",
     "--button-text": "#ffffff",
     "--field-dot": "rgba(10, 10, 10, 0.16)",
@@ -87,6 +90,7 @@
     "--bronto-color-success": "#4ec27e",
     "--bronto-color-warning": "#d8bd72",
     "--bronto-color-danger": "#ff4d54",
+    "--bronto-color-info": "#6fb0e6",
     "--surface": "#0c0c0c",
     "--surface-raised": "#141414",
     "--surface-muted": "#1a1a1a",
@@ -115,6 +119,8 @@
     "--orange-soft": "rgba(208, 140, 91, 0.15)",
     "--danger": "#ff4d54",
     "--danger-soft": "rgba(255, 77, 84, 0.15)",
+    "--info": "#6fb0e6",
+    "--info-soft": "rgba(111, 176, 230, 0.14)",
     "--code-bg": "rgba(255, 255, 255, 0.05)",
     "--button-text": "#000000",
     "--field-dot": "rgba(242, 242, 242, 0.14)",

package/tokens/tokens.dtcg.json

@@ -80,15 +80,6 @@
         ]
       }
     },
-    "display": {
-      "DEFAULT": {
-        "$type": "fontFamily",
-        "$value": null,
-        "$extensions": {
-          "com.ponchia.css": "'Doto', var(--mono)"
-        }
-      }
-    },
     "dot": {
       "font": {
         "$type": "fontFamily",
@@ -106,6 +97,15 @@
         "$value": "14px"
       }
     },
+    "display": {
+      "DEFAULT": {
+        "$type": "fontFamily",
+        "$value": null,
+        "$extensions": {
+          "com.ponchia.css": "var(--dot-font)"
+        }
+      }
+    },
     "text": {
       "2xs": {
         "$type": "dimension",
@@ -420,6 +420,13 @@
         "$extensions": {
           "com.ponchia.css": "var(--danger)"
         }
+      },
+      "color-info": {
+        "$type": "color",
+        "$value": null,
+        "$extensions": {
+          "com.ponchia.css": "var(--info)"
+        }
       }
     },
     "border": {
@@ -563,6 +570,16 @@
           "$value": "rgb(192, 22, 34, 0.1)"
         }
       },
+      "info": {
+        "DEFAULT": {
+          "$type": "color",
+          "$value": "#1f63c4"
+        },
+        "soft": {
+          "$type": "color",
+          "$value": "rgb(31, 99, 196, 0.12)"
+        }
+      },
       "code": {
         "bg": {
           "$type": "color",
@@ -738,6 +755,16 @@
           "$value": "rgb(255, 77, 84, 0.15)"
         }
       },
+      "info": {
+        "DEFAULT": {
+          "$type": "color",
+          "$value": "#6fb0e6"
+        },
+        "soft": {
+          "$type": "color",
+          "$value": "rgb(111, 176, 230, 0.14)"
+        }
+      },
       "code": {
         "bg": {
           "$type": "color",