@ponchia/ui 0.3.3 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/README.md +108 -175
  2. package/behaviors/index.d.ts +24 -1
  3. package/behaviors/index.js +222 -2
  4. package/classes/index.d.ts +46 -3
  5. package/classes/index.js +47 -0
  6. package/classes/vscode.css-custom-data.json +13 -1
  7. package/css/disclosure.css +180 -0
  8. package/css/dots.css +5 -1
  9. package/css/feedback.css +123 -0
  10. package/css/forms.css +44 -0
  11. package/css/overlay.css +48 -0
  12. package/css/primitives.css +69 -0
  13. package/css/site.css +33 -0
  14. package/css/tokens.css +8 -1
  15. package/dist/bronto.css +1 -1
  16. package/dist/css/disclosure.css +1 -1
  17. package/dist/css/dots.css +1 -1
  18. package/dist/css/feedback.css +1 -1
  19. package/dist/css/forms.css +1 -1
  20. package/dist/css/overlay.css +1 -1
  21. package/dist/css/primitives.css +1 -1
  22. package/dist/css/site.css +1 -1
  23. package/dist/css/tokens.css +1 -1
  24. package/docs/contrast.md +100 -0
  25. package/docs/reference.md +82 -3
  26. package/docs/theming.md +49 -0
  27. package/docs/usage.md +165 -0
  28. package/fonts/OFL.txt +93 -0
  29. package/llms.txt +6 -0
  30. package/package.json +26 -5
  31. package/tokens/index.d.ts +5 -5
  32. package/tokens/index.js +6 -1
  33. package/tokens/index.json +12 -2
  34. package/tokens/resolved.json +6 -0
  35. package/tokens/tokens.dtcg.json +36 -9
package/docs/usage.md ADDED
@@ -0,0 +1,165 @@
1
+ # Usage — when to reach for what
2
+
3
+ `docs/reference.md` is the *catalog* (every class, generated). This is
4
+ the *decision guide*: the rules a kitchen-sink demo can't tell you. It is
5
+ hand-written and stable — treated as contract like
6
+ [theming.md](theming.md), not auto-generated.
7
+
8
+ The one principle everything below follows:
9
+
10
+ > **Color is rationed. Structure carries meaning.** Reach for layout,
11
+ > type weight, and the hairline before reaching for a hue. The accent is
12
+ > a spotlight, not a paint bucket.
13
+
14
+ ## Density: the unset default and its two presets
15
+
16
+ `data-density` has two presets over an unset middle default. There is no
17
+ `data-density="default"` value — *unset* is the design target; you opt
18
+ into a preset on `<html>` or any subtree:
19
+
20
+ | Value | Use for |
21
+ | ---------------------- | ------------------------------------------------ |
22
+ | _(unset)_ | general app & content — the design target |
23
+ | `compact` | data-dense admin: tables, dashboards, toolbars |
24
+ | `comfortable` | marketing / landing / reading-first pages |
25
+
26
+ Scope it, don't globalize blindly: a dashboard with one marketing-style
27
+ hero can set `compact` on `<html>` and `comfortable` on the hero section.
28
+
29
+ ## Badge vs chip vs status dot
30
+
31
+ All three are small. They are **not** interchangeable:
32
+
33
+ | Use | When |
34
+ | -------------- | ----------------------------------------------------------------- |
35
+ | **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. |
36
+ | **badge** | a label *classifying* the thing it sits on (count, tone, "BETA"). Static, not actionable. `ui.badge({ tone })`. |
37
+ | **chip** | a discrete, often removable/selectable token the user manipulated (a filter, a tag input value). Interactive affordance implied. |
38
+
39
+ Rule of thumb: state → dot, classification → badge, user-controlled value
40
+ → chip.
41
+
42
+ ## Numbers: `ui-num` vs the table state classes
43
+
44
+ - Inside `.ui-table`, a numeric cell is `.is-num` (+ `.is-pos` /
45
+ `.is-neg` for P&L tone). These are table-local `is-*` hooks, not in
46
+ `cls` by design.
47
+ - **Anywhere else** (a card, a stat, inline figures) use the `ui-num`
48
+ primitive — `ui.num({ tone })`. Same tabular/aligned/tone intent,
49
+ freed from the table. Do not hand-roll right-align + `text-green`;
50
+ that's the duplication `ui-num` exists to kill.
51
+
52
+ ## Prose vs primitives, and prose inside a card
53
+
54
+ - `ui-prose` styles **raw, unclassed semantic HTML** (MDX / CMS / LLM
55
+ output). Use it for *body content you don't control the markup of*.
56
+ - Do **not** wrap app UI in `ui-prose` to "get nice spacing" — compose
57
+ primitives instead; prose deliberately restyles bare `<h2>`, `<table>`,
58
+ `<a>` and will fight your components.
59
+ - Prose **inside a card**: put `ui-prose` on an inner wrapper, not on
60
+ `.ui-card` itself, so card padding/border stays the card's and prose
61
+ rhythm stays the content's. One responsibility per element.
62
+
63
+ ## Buttons: variant and size
64
+
65
+ - **primary** — the single most important action in a view. Aim for one.
66
+ - **ghost** — secondary actions; the default for "another button here".
67
+ - **subtle** — tertiary / low-stakes (toolbar, inline).
68
+ - Size: default everywhere; `--sm` for dense tooling (toolbars,
69
+ pagination, table row actions), `--lg` for a hero CTA only.
70
+ - Loading is **not** a class: set `aria-busy="true"` (+ `disabled`); the
71
+ spinner is CSS. This is the ARIA-driven contract — see reference.md
72
+ → "Composition & state".
73
+
74
+ ## Link vs link--cta
75
+
76
+ Plain `ui-link` for in-flow links. `ui-link--cta` is the eyebrow-faced
77
+ action link (accent · display · uppercase + arrow) — a *navigational
78
+ call to action*, not a substitute for a button (no form submit, no
79
+ destructive action).
80
+
81
+ ## Feedback: alert vs toast vs tooltip
82
+
83
+ | Surface | Lifetime / trigger |
84
+ | -------- | ----------------------------------------------------------- |
85
+ | alert / callout | persistent, in-flow, part of the page (form errors, page-level notice). |
86
+ | toast | transient, out-of-flow, system-initiated. Danger toasts route to an assertive live region; everything else polite. |
87
+ | tooltip | supplemental, hover/focus, never essential info (it's not announced reliably; don't hide required content in it). |
88
+
89
+ ## Meter vs progress
90
+
91
+ Both are a thin horizontal bar; they mean different things.
92
+
93
+ - **`ui-progress`** — *task* progress: how far an operation has run. Can be
94
+ indeterminate (`ui-progress--indeterminate`). The fill is always accent.
95
+ - **`ui-meter`** — a *measured static value*: coverage, disk, capacity, a
96
+ KPI against a target. Never indeterminate. Tone the fill by threshold
97
+ (`ui.meter({ tone })` → accent/success/warning/danger); the unset
98
+ default is neutral. Drive the width with the shared `--value` knob
99
+ (`style="--value: 72"`, 0–100) and author `role="meter"` +
100
+ `aria-valuenow/min/max` for AT.
101
+
102
+ Rule of thumb: *something is happening* → progress; *something measures
103
+ this much* → meter.
104
+
105
+ ## Steps, timeline, kbd, input icons
106
+
107
+ - **`ui-steps`** — a stepper for a multi-step flow. Use an `<ol>`. State is
108
+ ARIA-driven (the framework rule): the active step is `aria-current="step"`
109
+ (no class); completed steps take `ui-steps__item--done`. Markers are
110
+ auto-numbered by CSS counter.
111
+ - **`ui-timeline`** — a vertical event list on a hairline spine (`<ol>` of
112
+ `ui-timeline__item`, optional `ui-timeline__time`). `aria-current` on an
113
+ item marks the live/most-recent event.
114
+ - **`ui-kbd`** — an inline keyboard-key glyph. Wrap a `<kbd>`; for a
115
+ shortcut, use one per key (`<kbd>⌘</kbd> <kbd>K</kbd>`).
116
+ - **`ui-input-icon`** — a leading (or `--end` trailing) icon *inside* one
117
+ control. This is distinct from `ui-input-group`, whose addon sits
118
+ *adjacent* to the control. Wrap the input; the icon is decorative
119
+ (`aria-hidden`) and the input keeps its full width. Don't hand-roll an
120
+ absolute overlay.
121
+
122
+ ## Modal: native `<dialog>` vs `is-open`
123
+
124
+ Prefer the **native `<dialog>`** path — you get top-layer, backdrop and
125
+ focus-trap free. Only use `ui-modal.is-open` (`ui.modal({ open: true })`)
126
+ when a portal/React modal genuinely can't be a `<dialog>`; then the
127
+ backdrop and focus-trap are **yours** to provide. A drawer is a modal
128
+ that enters from an edge — same rule.
129
+
130
+ ## Carousel & lightbox: one primitive, two skins
131
+
132
+ `ui-carousel` is a scroll-snap track of `__slide`s wired by `initCarousel`
133
+ (prev/next, keyboard, a `__thumb` strip, the `__status` counter, ARIA).
134
+ Because the track is **native horizontal scroll**, touch and trackpad
135
+ swipe — with momentum — are the browser's; the behavior only keeps the JS
136
+ index in sync with the scroll both ways. Add `data-bronto-carousel-loop`
137
+ to wrap at the ends.
138
+
139
+ A **lightbox is the same carousel inside a native
140
+ `<dialog class="ui-lightbox">`**, opened with `data-bronto-open` (wired by
141
+ `initDialog`). Do **not** hand-roll an overlay: the `<dialog>` gives the
142
+ top layer, the backdrop, the focus-trap, Escape, and focus-return for
143
+ free — exactly the parts a from-scratch lightbox gets wrong. The inline
144
+ carousel crops (`cover`); the lightbox shows the whole image (`contain`).
145
+
146
+ This is deliberately *not* an auto-playing marketing slider (no timers, no
147
+ infinite-clone track). It's a gallery: the user drives it.
148
+
149
+ ## When to add a behavior
150
+
151
+ The CSS is the framework; `@ponchia/ui/behaviors` is the *sanctioned*
152
+ home for the little JS that genuinely needs scripting (theme persistence,
153
+ disclosure, dialog glue, toast, combobox, form-validation, table-sort).
154
+ Reach for it instead of reimplementing — every initializer is SSR-safe,
155
+ idempotent, and returns a cleanup. If you find yourself writing focus
156
+ management or `aria-expanded` toggling by hand, there is probably already
157
+ a behavior for it.
158
+
159
+ ## Re-brand obligations (the short version)
160
+
161
+ Changing `--accent` is one declaration, but **contrast is then yours**:
162
+ the shipped palettes are gated (see [contrast.md](contrast.md)); your
163
+ custom accent is not. Verify primary-button label, `--accent-text`, and
164
+ the focus ring against their backgrounds. Full contract:
165
+ [theming.md](theming.md).
package/fonts/OFL.txt ADDED
@@ -0,0 +1,93 @@
1
+ Copyright 2024 The Doto Project Authors (https://github.com/oliverlalan/Doto)
2
+
3
+ This Font Software is licensed under the SIL Open Font License, Version 1.1.
4
+ This license is copied below, and is also available with a FAQ at:
5
+ https://openfontlicense.org
6
+
7
+
8
+ -----------------------------------------------------------
9
+ SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10
+ -----------------------------------------------------------
11
+
12
+ PREAMBLE
13
+ The goals of the Open Font License (OFL) are to stimulate worldwide
14
+ development of collaborative font projects, to support the font creation
15
+ efforts of academic and linguistic communities, and to provide a free and
16
+ open framework in which fonts may be shared and improved in partnership
17
+ with others.
18
+
19
+ The OFL allows the licensed fonts to be used, studied, modified and
20
+ redistributed freely as long as they are not sold by themselves. The
21
+ fonts, including any derivative works, can be bundled, embedded,
22
+ redistributed and/or sold with any software provided that any reserved
23
+ names are not used by derivative works. The fonts and derivatives,
24
+ however, cannot be released under any other type of license. The
25
+ requirement for fonts to remain under this license does not apply
26
+ to any document created using the fonts or their derivatives.
27
+
28
+ DEFINITIONS
29
+ "Font Software" refers to the set of files released by the Copyright
30
+ Holder(s) under this license and clearly marked as such. This may
31
+ include source files, build scripts and documentation.
32
+
33
+ "Reserved Font Name" refers to any names specified as such after the
34
+ copyright statement(s).
35
+
36
+ "Original Version" refers to the collection of Font Software components as
37
+ distributed by the Copyright Holder(s).
38
+
39
+ "Modified Version" refers to any derivative made by adding to, deleting,
40
+ or substituting -- in part or in whole -- any of the components of the
41
+ Original Version, by changing formats or by porting the Font Software to a
42
+ new environment.
43
+
44
+ "Author" refers to any designer, engineer, programmer, technical
45
+ writer or other person who contributed to the Font Software.
46
+
47
+ PERMISSION & CONDITIONS
48
+ Permission is hereby granted, free of charge, to any person obtaining
49
+ a copy of the Font Software, to use, study, copy, merge, embed, modify,
50
+ redistribute, and sell modified and unmodified copies of the Font
51
+ Software, subject to the following conditions:
52
+
53
+ 1) Neither the Font Software nor any of its individual components,
54
+ in Original or Modified Versions, may be sold by itself.
55
+
56
+ 2) Original or Modified Versions of the Font Software may be bundled,
57
+ redistributed and/or sold with any software, provided that each copy
58
+ contains the above copyright notice and this license. These can be
59
+ included either as stand-alone text files, human-readable headers or
60
+ in the appropriate machine-readable metadata fields within text or
61
+ binary files as long as those fields can be easily viewed by the user.
62
+
63
+ 3) No Modified Version of the Font Software may use the Reserved Font
64
+ Name(s) unless explicit written permission is granted by the corresponding
65
+ Copyright Holder. This restriction only applies to the primary font name as
66
+ presented to the users.
67
+
68
+ 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69
+ Software shall not be used to promote, endorse or advertise any
70
+ Modified Version, except to acknowledge the contribution(s) of the
71
+ Copyright Holder(s) and the Author(s) or with their explicit written
72
+ permission.
73
+
74
+ 5) The Font Software, modified or unmodified, in part or in whole,
75
+ must be distributed entirely under this license, and must not be
76
+ distributed under any other license. The requirement for fonts to
77
+ remain under this license does not apply to any document created
78
+ using the Font Software.
79
+
80
+ TERMINATION
81
+ This license becomes null and void if any of the above conditions are
82
+ not met.
83
+
84
+ DISCLAIMER
85
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88
+ OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90
+ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91
+ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92
+ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93
+ OTHER DEALINGS IN THE FONT SOFTWARE.
package/llms.txt CHANGED
@@ -57,6 +57,12 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
57
57
  the same source as the types and CI-drift-checked.
58
58
  - `docs/theming.md` — the token contract: which tokens to override, the
59
59
  light/dark model, and the rationed-accent rule.
60
+ - `docs/usage.md` — the decision guide: badge vs chip vs dot, default
61
+ density, prose-in-card, when to add a behavior. Read this before
62
+ re-implementing UI the framework already has an opinion about.
63
+ - `docs/contrast.md` — the published, CI-gated WCAG 2.1 contrast matrix
64
+ for every contractual token pairing, per theme. Generated from the
65
+ resolved palette; the build fails below the declared floor.
60
66
  - `tokens/index.d.ts` — every design-token name as a literal union.
61
67
  - `tokens/index.json` — tokens as plain data (global / light / dark).
62
68
  - `tokens/tokens.dtcg.json` — same tokens in W3C DTCG format.
package/package.json CHANGED
@@ -1,8 +1,23 @@
1
1
  {
2
2
  "name": "@ponchia/ui",
3
- "version": "0.3.3",
3
+ "version": "0.3.5",
4
4
  "type": "module",
5
- "description": "Shared Bronto UI framework — Nothing-inspired monochrome CSS theme, dot-matrix motifs, admin shell.",
5
+ "description": "Nothing-inspired, CSS-first UI framework — monochrome design tokens, one rationed accent, dot-matrix motifs, zero runtime dependencies, framework-agnostic.",
6
+ "keywords": [
7
+ "css",
8
+ "ui",
9
+ "ui-framework",
10
+ "design-system",
11
+ "design-tokens",
12
+ "cascade-layers",
13
+ "css-layers",
14
+ "nothing",
15
+ "monochrome",
16
+ "framework-agnostic",
17
+ "zero-dependencies",
18
+ "dark-mode",
19
+ "accessibility"
20
+ ],
6
21
  "license": "MIT",
7
22
  "repository": {
8
23
  "type": "git",
@@ -27,7 +42,9 @@
27
42
  "shiki",
28
43
  "llms.txt",
29
44
  "docs/reference.md",
30
- "docs/theming.md"
45
+ "docs/theming.md",
46
+ "docs/contrast.md",
47
+ "docs/usage.md"
31
48
  ],
32
49
  "style": "./dist/bronto.css",
33
50
  "scripts": {
@@ -40,6 +57,7 @@
40
57
  "resolved:build": "node scripts/gen-resolved.mjs",
41
58
  "dts:build": "node scripts/gen-dts.mjs",
42
59
  "reference:build": "node scripts/gen-reference.mjs",
60
+ "contrast:build": "node scripts/gen-contrast.mjs",
43
61
  "vscode:build": "node scripts/gen-vscode-data.mjs",
44
62
  "dist:build": "node scripts/build-dist.mjs",
45
63
  "check:exports": "node scripts/check-exports.mjs",
@@ -54,10 +72,11 @@
54
72
  "check:pack": "node scripts/check-pack.mjs",
55
73
  "check:release": "node scripts/check-release.mjs",
56
74
  "check:reference": "node scripts/check-reference.mjs",
75
+ "check:contrast": "node scripts/check-contrast.mjs",
57
76
  "check:vscode": "node scripts/check-vscode-data.mjs",
58
- "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",
77
+ "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",
59
78
  "test": "node --test \"test/*.test.mjs\"",
60
- "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",
79
+ "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",
61
80
  "prepublishOnly": "npm run check && npm test"
62
81
  },
63
82
  "devDependencies": {
@@ -120,6 +139,8 @@
120
139
  "./llms.txt": "./llms.txt",
121
140
  "./docs/reference.md": "./docs/reference.md",
122
141
  "./docs/theming.md": "./docs/theming.md",
142
+ "./docs/contrast.md": "./docs/contrast.md",
143
+ "./docs/usage.md": "./docs/usage.md",
123
144
  "./classes": {
124
145
  "types": "./classes/index.d.ts",
125
146
  "default": "./classes/index.js"
package/tokens/index.d.ts CHANGED
@@ -3,9 +3,9 @@
3
3
 
4
4
  export type ThemeName = 'light' | 'dark';
5
5
 
6
- 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';
7
- 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';
8
- 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';
6
+ 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';
7
+ 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';
8
+ 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';
9
9
 
10
10
  /** Exact mirror of the :root blocks in css/tokens.css (literal keys). */
11
11
  export declare const cssVars: {
@@ -14,8 +14,8 @@ export declare const cssVars: {
14
14
  dark: Record<DarkTokenName, string>;
15
15
  };
16
16
 
17
- 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';
18
- 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';
17
+ 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';
18
+ 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';
19
19
 
20
20
  /** Ergonomic view derived from {@link cssVars} (`--` prefix stripped). */
21
21
  export declare const tokens: {
package/tokens/index.js CHANGED
@@ -32,8 +32,8 @@ export const cssVars = {
32
32
  '--mono': "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
33
33
  '--sans':
34
34
  "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
35
- '--display': "'Doto', var(--mono)",
36
35
  '--dot-font': "'Doto', var(--mono)",
36
+ '--display': 'var(--dot-font)',
37
37
  '--text-2xs': '0.68rem',
38
38
  '--text-xs': '0.76rem',
39
39
  '--text-sm': '0.86rem',
@@ -81,6 +81,7 @@ export const cssVars = {
81
81
  '--bronto-color-success': 'var(--success)',
82
82
  '--bronto-color-warning': 'var(--warning)',
83
83
  '--bronto-color-danger': 'var(--danger)',
84
+ '--bronto-color-info': 'var(--info)',
84
85
  '--surface': 'var(--panel)',
85
86
  '--surface-raised': 'var(--panel-strong)',
86
87
  '--surface-muted': 'var(--panel-soft)',
@@ -112,6 +113,8 @@ export const cssVars = {
112
113
  '--orange-soft': 'rgb(168, 95, 50, 0.13)',
113
114
  '--danger': '#c01622',
114
115
  '--danger-soft': 'rgb(192, 22, 34, 0.1)',
116
+ '--info': '#1f63c4',
117
+ '--info-soft': 'rgb(31, 99, 196, 0.12)',
115
118
  '--code-bg': 'rgb(10, 10, 10, 0.05)',
116
119
  '--button-text': '#ffffff',
117
120
  '--field-dot': 'rgb(10, 10, 10, 0.16)',
@@ -146,6 +149,8 @@ export const cssVars = {
146
149
  '--orange-soft': 'rgb(208, 140, 91, 0.15)',
147
150
  '--danger': '#ff4d54',
148
151
  '--danger-soft': 'rgb(255, 77, 84, 0.15)',
152
+ '--info': '#6fb0e6',
153
+ '--info-soft': 'rgb(111, 176, 230, 0.14)',
149
154
  '--code-bg': 'rgb(255, 255, 255, 0.05)',
150
155
  '--button-text': '#000000',
151
156
  '--field-dot': 'rgb(242, 242, 242, 0.14)',
package/tokens/index.json CHANGED
@@ -15,8 +15,8 @@
15
15
  "--space-2xl": "2.5rem",
16
16
  "--mono": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
17
17
  "--sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
18
- "--display": "'Doto', var(--mono)",
19
18
  "--dot-font": "'Doto', var(--mono)",
19
+ "--display": "var(--dot-font)",
20
20
  "--text-2xs": "0.68rem",
21
21
  "--text-xs": "0.76rem",
22
22
  "--text-sm": "0.86rem",
@@ -64,6 +64,7 @@
64
64
  "--bronto-color-success": "var(--success)",
65
65
  "--bronto-color-warning": "var(--warning)",
66
66
  "--bronto-color-danger": "var(--danger)",
67
+ "--bronto-color-info": "var(--info)",
67
68
  "--surface": "var(--panel)",
68
69
  "--surface-raised": "var(--panel-strong)",
69
70
  "--surface-muted": "var(--panel-soft)",
@@ -94,6 +95,8 @@
94
95
  "--orange-soft": "rgb(168, 95, 50, 0.13)",
95
96
  "--danger": "#c01622",
96
97
  "--danger-soft": "rgb(192, 22, 34, 0.1)",
98
+ "--info": "#1f63c4",
99
+ "--info-soft": "rgb(31, 99, 196, 0.12)",
97
100
  "--code-bg": "rgb(10, 10, 10, 0.05)",
98
101
  "--button-text": "#ffffff",
99
102
  "--field-dot": "rgb(10, 10, 10, 0.16)",
@@ -127,6 +130,8 @@
127
130
  "--orange-soft": "rgb(208, 140, 91, 0.15)",
128
131
  "--danger": "#ff4d54",
129
132
  "--danger-soft": "rgb(255, 77, 84, 0.15)",
133
+ "--info": "#6fb0e6",
134
+ "--info-soft": "rgb(111, 176, 230, 0.14)",
130
135
  "--code-bg": "rgb(255, 255, 255, 0.05)",
131
136
  "--button-text": "#000000",
132
137
  "--field-dot": "rgb(242, 242, 242, 0.14)",
@@ -153,8 +158,8 @@
153
158
  "space-2xl": "2.5rem",
154
159
  "mono": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
155
160
  "sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
156
- "display": "'Doto', var(--mono)",
157
161
  "dot-font": "'Doto', var(--mono)",
162
+ "display": "var(--dot-font)",
158
163
  "text-2xs": "0.68rem",
159
164
  "text-xs": "0.76rem",
160
165
  "text-sm": "0.86rem",
@@ -202,6 +207,7 @@
202
207
  "bronto-color-success": "var(--success)",
203
208
  "bronto-color-warning": "var(--warning)",
204
209
  "bronto-color-danger": "var(--danger)",
210
+ "bronto-color-info": "var(--info)",
205
211
  "surface": "var(--panel)",
206
212
  "surface-raised": "var(--panel-strong)",
207
213
  "surface-muted": "var(--panel-soft)",
@@ -233,6 +239,8 @@
233
239
  "orange-soft": "rgb(168, 95, 50, 0.13)",
234
240
  "danger": "#c01622",
235
241
  "danger-soft": "rgb(192, 22, 34, 0.1)",
242
+ "info": "#1f63c4",
243
+ "info-soft": "rgb(31, 99, 196, 0.12)",
236
244
  "code-bg": "rgb(10, 10, 10, 0.05)",
237
245
  "button-text": "#ffffff",
238
246
  "field-dot": "rgb(10, 10, 10, 0.16)",
@@ -266,6 +274,8 @@
266
274
  "orange-soft": "rgb(208, 140, 91, 0.15)",
267
275
  "danger": "#ff4d54",
268
276
  "danger-soft": "rgb(255, 77, 84, 0.15)",
277
+ "info": "#6fb0e6",
278
+ "info-soft": "rgb(111, 176, 230, 0.14)",
269
279
  "code-bg": "rgb(255, 255, 255, 0.05)",
270
280
  "button-text": "#000000",
271
281
  "field-dot": "rgb(242, 242, 242, 0.14)",
package/tokens/resolved.json CHANGED
@@ -26,6 +26,7 @@
26
26
  "--bronto-color-success": "#2f7d4f",
27
27
  "--bronto-color-warning": "#806414",
28
28
  "--bronto-color-danger": "#c01622",
29
+ "--bronto-color-info": "#1f63c4",
29
30
  "--surface": "#ffffff",
30
31
  "--surface-raised": "#ffffff",
31
32
  "--surface-muted": "#ececea",
@@ -54,6 +55,8 @@
54
55
  "--orange-soft": "rgba(168, 95, 50, 0.13)",
55
56
  "--danger": "#c01622",
56
57
  "--danger-soft": "rgba(192, 22, 34, 0.1)",
58
+ "--info": "#1f63c4",
59
+ "--info-soft": "rgba(31, 99, 196, 0.12)",
57
60
  "--code-bg": "rgba(10, 10, 10, 0.05)",
58
61
  "--button-text": "#ffffff",
59
62
  "--field-dot": "rgba(10, 10, 10, 0.16)",
@@ -87,6 +90,7 @@
87
90
  "--bronto-color-success": "#4ec27e",
88
91
  "--bronto-color-warning": "#d8bd72",
89
92
  "--bronto-color-danger": "#ff4d54",
93
+ "--bronto-color-info": "#6fb0e6",
90
94
  "--surface": "#0c0c0c",
91
95
  "--surface-raised": "#141414",
92
96
  "--surface-muted": "#1a1a1a",
@@ -115,6 +119,8 @@
115
119
  "--orange-soft": "rgba(208, 140, 91, 0.15)",
116
120
  "--danger": "#ff4d54",
117
121
  "--danger-soft": "rgba(255, 77, 84, 0.15)",
122
+ "--info": "#6fb0e6",
123
+ "--info-soft": "rgba(111, 176, 230, 0.14)",
118
124
  "--code-bg": "rgba(255, 255, 255, 0.05)",
119
125
  "--button-text": "#000000",
120
126
  "--field-dot": "rgba(242, 242, 242, 0.14)",
package/tokens/tokens.dtcg.json CHANGED
@@ -80,15 +80,6 @@
80
80
  ]
81
81
  }
82
82
  },
83
- "display": {
84
- "DEFAULT": {
85
- "$type": "fontFamily",
86
- "$value": null,
87
- "$extensions": {
88
- "com.ponchia.css": "'Doto', var(--mono)"
89
- }
90
- }
91
- },
92
83
  "dot": {
93
84
  "font": {
94
85
  "$type": "fontFamily",
@@ -106,6 +97,15 @@
106
97
  "$value": "14px"
107
98
  }
108
99
  },
100
+ "display": {
101
+ "DEFAULT": {
102
+ "$type": "fontFamily",
103
+ "$value": null,
104
+ "$extensions": {
105
+ "com.ponchia.css": "var(--dot-font)"
106
+ }
107
+ }
108
+ },
109
109
  "text": {
110
110
  "2xs": {
111
111
  "$type": "dimension",
@@ -420,6 +420,13 @@
420
420
  "$extensions": {
421
421
  "com.ponchia.css": "var(--danger)"
422
422
  }
423
+ },
424
+ "color-info": {
425
+ "$type": "color",
426
+ "$value": null,
427
+ "$extensions": {
428
+ "com.ponchia.css": "var(--info)"
429
+ }
423
430
  }
424
431
  },
425
432
  "border": {
@@ -563,6 +570,16 @@
563
570
  "$value": "rgb(192, 22, 34, 0.1)"
564
571
  }
565
572
  },
573
+ "info": {
574
+ "DEFAULT": {
575
+ "$type": "color",
576
+ "$value": "#1f63c4"
577
+ },
578
+ "soft": {
579
+ "$type": "color",
580
+ "$value": "rgb(31, 99, 196, 0.12)"
581
+ }
582
+ },
566
583
  "code": {
567
584
  "bg": {
568
585
  "$type": "color",
@@ -738,6 +755,16 @@
738
755
  "$value": "rgb(255, 77, 84, 0.15)"
739
756
  }
740
757
  },
758
+ "info": {
759
+ "DEFAULT": {
760
+ "$type": "color",
761
+ "$value": "#6fb0e6"
762
+ },
763
+ "soft": {
764
+ "$type": "color",
765
+ "$value": "rgb(111, 176, 230, 0.14)"
766
+ }
767
+ },
741
768
  "code": {
742
769
  "bg": {
743
770
  "$type": "color",