dowel-ui 0.24.0 → 0.26.0

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 (10) hide show
  1. package/README.md +42 -163
  2. package/dist/index.d.ts +16 -2
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +19 -0
  5. package/dist/index.js.map +1 -1
  6. package/dist/prose.css +448 -0
  7. package/dist/registry.json +343 -62
  8. package/dist/theme.css +77 -0
  9. package/dist/tokens.json +127 -1
  10. package/package.json +2 -1
package/README.md CHANGED
@@ -2,17 +2,19 @@
2
2
  <img src="https://raw.githubusercontent.com/lacodda/dowel/main/assets/banner.svg" width="720" alt="dowel">
3
3
  </p>
4
4
 
5
- # dowel
5
+ > The lacodda line design system: theme tokens and React primitives, distributed as a shadcn-compatible registry.
6
6
 
7
- The lacodda line design system: theme tokens and React primitives, distributed as a shadcn-compatible registry.
7
+ <p align="center">
8
+ <a href="https://www.npmjs.com/package/dowel-ui"><img src="https://img.shields.io/npm/v/dowel-ui?style=flat-square" alt="npm"></a>
9
+ <a href="https://github.com/lacodda/dowel/actions"><img src="https://img.shields.io/github/actions/workflow/status/lacodda/dowel/ci.yml?style=flat-square" alt="CI"></a>
10
+ <a href="https://github.com/lacodda/dowel/blob/main/LICENSE"><img src="https://img.shields.io/github/license/lacodda/dowel?style=flat-square" alt="License"></a>
11
+ </p>
8
12
 
9
13
  A dowel is the hidden peg that joins two boards so the seam does not show. That is what this does for the products of the line: they look made by one hand, and nobody sees the joint.
10
14
 
11
15
  **[Documentation](https://lacodda.github.io/dowel/)** — what everything is and why it is that way.
12
16
  **[The stand](https://lacodda.github.io/dowel/stand/)** — every component, live, in either theme and in the accent of any product of the line.
13
17
 
14
- **Status:** v0.24.0 - the theme, the scales, an accent per product, seventy components - overlays, menus, the command palette, the table, a hundred thousand rows, the screens between asking for data and showing it, the three ways of saying something happened, and now charts: a figure and its movement, the shape of a history, a bar of stretches, a year of days, columns over a baseline and a level between the readings - and the gates each one passes: axe, the keyboard, a dependency budget and a picture in both themes. Every component has a page of its own on the stand, which remembers the theme and the accent you left it in. Components install from a versioned registry, the docs are served in the form an agent reads, and `dowel check` tells a project what stands between it and the vocabulary. Two products of the line live on it. See the [roadmap](#roadmap).
15
-
16
18
  ## The theme
17
19
 
18
20
  One import, and a product has the vocabulary of the line:
@@ -32,47 +34,21 @@ npm install dowel-ui
32
34
  }
33
35
  ```
34
36
 
35
- That single line moves the accent and both of its partners, the accent's soft fill, the focus ring, the scrollbars, and the tint in the greys. Set nothing at all and you get dowel's own amber.
36
-
37
- Dark is the default; light arrives with the reader's system preference, or pinned with a class:
38
-
39
- ```html
40
- <html> <!-- follows the operating system -->
41
- <html class="light"> <!-- pinned light -->
42
- <html class="dark"> <!-- pinned dark -->
43
- ```
44
-
45
- With Tailwind 4 the tokens are utilities, because the theme declares them in a `@theme` block:
46
-
47
- ```html
48
- <div class="bg-raise text-text border border-line">
49
- <button class="bg-accent text-on-accent">Save</button>
50
- </div>
51
- ```
37
+ That single line moves the accent and both of its partners, the accent's soft
38
+ fill, the focus ring, the scrollbars and the tint in the greys. **The accent is
39
+ derived, not configured**: a product states one hue and the theme works out the
40
+ rest, including what colour text has to be to sit on top of it - checked
41
+ against WCAG AA in CI, in both themes. Dark is the default; light arrives with
42
+ the reader's system preference.
52
43
 
53
- The stock palette is dropped deliberately, so a stray `bg-zinc-800` does not compile. If a colour is worth using, it is worth a name in the vocabulary.
54
-
55
- ### What makes it different
56
-
57
- - **The accent is derived, not configured.** A product states one hue and the theme works out the rest, including what colour text has to be to sit on top of it. A light accent takes dark glyphs, a dark one white - checked against every colour in the line rather than left to each product to get right.
58
- - **The greys belong to the product.** They carry a trace of its hue, so the chrome of one product is not the chrome of another with a different button colour.
59
- - **Contrast is a test, not an intention.** Every accent of the line is measured against WCAG AA in CI, in both themes, as a fill and as text.
60
- - **The scales were read, not invented.** Radius, type, elevation and stacking order come from what the line's products already draw, so existing code fits them - and the places where those products disagreed with themselves are settled rather than preserved.
61
-
62
- The same vocabulary also ships as [DTCG](https://www.designtokens.org/tr/2025.10/format/) JSON at `dowel-ui/tokens.json`, generated from the stylesheet so the two cannot drift.
63
-
64
- A product of the line states one thing about its appearance - which product it is:
65
-
66
- ```css
67
- @import 'dowel-ui/theme.css';
68
- @import 'dowel-ui/accents/kilna.css';
69
- ```
44
+ With Tailwind 4 the tokens are utilities, and the stock palette is dropped
45
+ deliberately, so a stray `bg-zinc-800` does not compile. If a colour is worth
46
+ using, it is worth a name in the vocabulary - a convention the package also
47
+ ships as a lint rule.
70
48
 
71
- Or copy the files in instead of depending on the package:
72
-
73
- ```bash
74
- npx shadcn@latest add https://lacodda.github.io/dowel/r/theme.json
75
- ```
49
+ Full vocabulary, shown rather than tabulated:
50
+ **[colours](https://lacodda.github.io/dowel/reference/tokens/)** and
51
+ **[the scales](https://lacodda.github.io/dowel/reference/scales/)**.
76
52
 
77
53
  ## Primitives
78
54
 
@@ -81,119 +57,28 @@ your code:
81
57
 
82
58
  ```bash
83
59
  npx shadcn@latest add https://lacodda.github.io/dowel/r/button.json
60
+ npx shadcn@latest add https://lacodda.github.io/dowel/r/app.json # or a whole set
84
61
  ```
85
62
 
86
- Or the set a product usually starts from, in one command - `app`, `forms` and
87
- `feedback` are three sets read off what the line's products converged on:
88
-
89
- ```bash
90
- npx shadcn@latest add https://lacodda.github.io/dowel/r/app.json
91
- ```
92
-
93
- A set carries no files of its own: it resolves into the same per-component
94
- installs you could have typed, so nothing of it survives in your project and
95
- there is no membership to leave. Each minor of the registry is also served
96
- frozen at `r/v0.14/…`, for an install that has to be repeatable - inside a
97
- snapshot the cross-references point into the same snapshot, so a component and
98
- the sibling it reuses are the pair that shipped together. See
99
- [installing from the registry](https://lacodda.github.io/dowel/guides/registry/).
100
-
101
- Seventy of them so far. The everyday ones - Button, Input, Textarea, Panel,
102
- Badge, Chip, Kbd, Spinner, Truncate and Copyable; Field and the three controls
103
- that answer a question - Checkbox, RadioGroup and Switch; five for a number or
104
- a judgement - NumberField, Slider, RatingScale, DurationField and
105
- PasswordField; the harder half of a form - TagInput, FileDrop, ColorField,
106
- ActionBar and SaveState; five for a date or a time - Calendar, DatePicker,
107
- DateRangePicker, TimeField and the `calendar-math` under them; the six that
108
- float above the page - Dialog, ConfirmDialog, Drawer, Popover, PreviewCard and
109
- Tooltip; four for choosing something - Menu, ContextMenu, Select and Combobox;
110
- three for finding it - SearchField, CommandPalette and the `useShortcut` behind
111
- them; three for saying that something happened - Toast, Alert and Banner; six
112
- for showing rows of data - Table, Pagination, PageSize, NumberFormat,
113
- RelativeTime and the `table-sort` with no React in it; four for a long list or
114
- a deep one - VirtualList, TreeView with the `tree-rows` under it, and KeyValue;
115
- StatTile, for one figure and what it is a figure of, with Sparkline for the
116
- shape of its history, and Track with its `track-segments` for a bar divided
117
- into stretches; ActivityHeatmap with its legend and its `activity-weeks`, for a
118
- year of days; BarChart for a period at a time, LineChart with its `line-scale` for a level
119
- between the readings; and five for the screens
120
- between asking for data and showing it: Skeleton, EmptyState, Progress,
121
- QueryState and ErrorBoundary.
122
-
123
- Those last three are the ones products keep confusing, so each page names all
124
- four options: a **toast** goes away, an **alert** is still true after a reload,
125
- a **banner** is true on every screen, and anything that needs an answer is a
126
- **dialog**.
127
-
128
- The palette is a Combobox rather than a Dialog with a field in it, which is
129
- Base UI's own arrangement: put the input inside the popup and the popup becomes
130
- a dialog on its own, with the input still the combobox that owns the list. So
131
- the filtering, the highlight and the arrow keys are the ones Combobox already
132
- has - there is no second implementation of any of it.
133
-
134
- `Select` is the one the line's oldest rule is about. It renders
135
- `<button role="combobox">` and no native `<select>` at all - the browser draws
136
- that popup in the operating system's own chrome, where no stylesheet reaches
137
- it, and on a screen of the product's own controls it reads as a foreign object.
138
- `multiple` is a prop on Select and on Combobox rather than a component of its
139
- own.
140
-
141
- The overlays are built on [Base UI](https://base-ui.com), which supplies the
142
- part that is genuinely hard and invisible when it works: the focus trap, the
143
- return of focus to whatever opened the thing, `Escape`, the scroll lock, and
144
- the `aria-labelledby` that names a popup by its own title. Choosing between
145
- them is the harder question, and [a guide](https://lacodda.github.io/dowel/guides/overlays/) covers it.
146
-
147
- Each is written in the vocabulary - no raw colours, no `dark:` utilities - so
148
- the same component is correct in both themes and in every product's accent.
149
- Every one of them is on [the stand](https://lacodda.github.io/dowel/stand/), live - change the theme and the accent and watch what follows.
150
-
151
- That convention is a lint rule, and it ships with the package:
152
-
153
- ```js
154
- // eslint.config.js
155
- import dowel from 'dowel-ui/eslint'
156
-
157
- export default [...dowel.configs.recommended]
158
- ```
159
-
160
- Two rules come with it. One reports a hex, an `rgb()`, a stock Tailwind colour,
161
- `bg-white` and any `dark:` utility, in the file that wrote one. The other
162
- forbids the native `<select>`, whose popup the browser draws in the operating
163
- system's own chrome where no CSS reaches it - see [the guide](https://lacodda.github.io/dowel/guides/linting/).
164
-
165
- Every primitive also runs a gate of its own before it ships: axe over the
166
- rendered DOM in every variant, the keyboard over every interactive one, a
167
- declared budget for what it may import, a picture of it in both themes compared
168
- against a baseline, and a check that it carries no word of its own to translate
169
- - [what a component has to pass](https://lacodda.github.io/dowel/guides/gates/).
63
+ Eighty-four primitives so far - the everyday controls, forms, overlays built on
64
+ [Base UI](https://base-ui.com), menus and selection, the command palette,
65
+ tables and long lists, charts, the screens between asking for data and showing
66
+ it, markdown, code and diffs, a desktop window's own chrome and the three
67
+ abilities of a catalogue table. Each is
68
+ written in the vocabulary - no raw
69
+ colours, no `dark:` utilities - and runs its own gate before it ships: axe, the
70
+ keyboard, a dependency budget and a picture in both themes.
170
71
 
171
- Full vocabulary, shown rather than tabulated: **[colours](https://lacodda.github.io/dowel/reference/tokens/)** in both themes, **[the scales](https://lacodda.github.io/dowel/reference/scales/)** - radius, type, motion, elevation and stacking order - and **[the accents](https://lacodda.github.io/dowel/reference/accents/)**, where the same screen is drawn in every colour of the line.
72
+ The full catalogue, live: **[the stand](https://lacodda.github.io/dowel/stand/)**.
73
+ One page per component: **[components](https://lacodda.github.io/dowel/components/button/)**.
74
+ Installing, sets and frozen versions: **[the registry guide](https://lacodda.github.io/dowel/guides/registry/)**.
172
75
 
173
76
  ## Moving an existing project over
174
77
 
175
78
  A product arriving at dowel almost never arrives from nothing - it arrives from
176
- stock shadcn/ui, whose theme names colours by their role in a page
177
- (`--background`, `--muted-foreground`) where dowel names them by what they are
178
- on a screen. The package ships the tools for that crossing:
179
-
180
- ```console
181
- $ npx dowel check # what is not on the dowel vocabulary yet
182
- $ npx dowel codemod --write # rewrite the names that can be rewritten
183
- $ npx dowel doctor # whether the installation itself is wired right
184
- $ npx dowel diff dialog # what you changed since you copied it in
185
- ```
186
-
187
- `check`, `doctor` and `diff` only read; `codemod` writes, and only when asked
188
- twice. Everything reads the catalogue inside the installed package, so none of
189
- it needs the network.
190
-
191
- Two things are deliberately never rewritten, and the tools say so rather than
192
- guessing: a colour, because which token it was reaching for is a decision; and
193
- `--accent`, because it is the one name both vocabularies use for opposite
194
- things - stock's hover fill and dowel's product hue. The first run of `check`
195
- against dowel's own stand reported twenty-four violations that were all correct
196
- code, which is exactly how that rule was learned - see
79
+ stock shadcn/ui, whose theme names colours by their role in a page where dowel
80
+ names them by what they are on a screen. Four commands read a project, rewrite
81
+ the names that can be rewritten, and say what is left for a person to decide:
197
82
  [the migration guide](https://lacodda.github.io/dowel/guides/migration/).
198
83
 
199
84
  ## A day in the life
@@ -228,8 +113,7 @@ every dowel component targets:
228
113
  }
229
114
  ```
230
115
 
231
- **Copy in what the screen needs.**
232
-
116
+ > Copy in what the screen needs.
233
117
  ```console
234
118
  $ npx shadcn@latest add https://lacodda.github.io/dowel/r/app.json
235
119
  ```
@@ -267,19 +151,14 @@ fixed: the hand-written theme pinned dark ink on the accent for both themes,
267
151
  which was right on gold and wrong on the darkened gold the light theme uses,
268
152
  where it measured 3.49:1. Derived, it is white there, at 6.01:1.
269
153
 
270
- ## Roadmap
154
+ ## Status
271
155
 
272
- Development goes in versions; each one is a single coherent theme, and ends in a release.
156
+ The theme, the scales, an accent per product, and eighty-four primitives are
157
+ in daily use across two products of the line. Every component installs from a
158
+ versioned registry and passes its own gate - axe, the keyboard, a dependency
159
+ budget and a picture in both themes - before it ships.
273
160
 
274
- | | Delivers |
275
- | --- | --- |
276
- | **0.1 - 0.3** | The vocabulary: colours and modes, scales and motion, the accents of the line |
277
- | **0.4 - 0.7** | The primitive pipeline, the base components, the first consumer, the quality gates |
278
- | **0.8 - 0.11** | Overlays, menus and selection, the command palette, feedback |
279
- | **0.12 - 0.15** | The registry as a product, AI-readiness, migration tooling, the second consumer |
280
- | **0.16 - 0.24** | Forms, data and charts |
281
- | **0.25 - 0.33** | Frame and navigation, blocks, resilience and docs |
282
- | **1.0** | Four web products of the line on dowel; the token vocabulary and the registry format frozen |
161
+ Released versions and what landed in each: [CHANGELOG](https://github.com/lacodda/dowel/blob/main/CHANGELOG.md).
283
162
 
284
163
  ## Documentation
285
164
 
@@ -307,4 +186,4 @@ same sources the site is built from:
307
186
 
308
187
  ## License
309
188
 
310
- MIT
189
+ MIT (c) [Kirill Lakhtachev](https://lacodda.com)
package/dist/index.d.ts CHANGED
@@ -22,6 +22,15 @@ export declare const chartTokens: readonly ["chart-grid", "chart-axis"];
22
22
  * `scaleTokens`. The faintest step stays distinct from an empty cell, or the
23
23
  * grid claims a day was worked at zero when nobody reported it. */
24
24
  export declare const heatTokens: readonly ["heat-1", "heat-2", "heat-3", "heat-4", "heat-5"];
25
+ /** Syntax: the eight kinds of thing in a piece of code that are worth telling
26
+ * apart in every language. Fixed like the series - `if` should not be magenta
27
+ * in one product and cobalt in another - but measured against a different
28
+ * threshold: these are read as text, so every slot clears 4.5:1 against the
29
+ * surface code sits on, where a series colour only has to clear 3:1 as a
30
+ * filled mark. They are also the one palette here not held to the
31
+ * colour-blind floor, because syntax colour restates what the text already
32
+ * says and CodeBlock's default draws none of it. */
33
+ export declare const syntaxTokens: readonly ["syntax-keyword", "syntax-string", "syntax-number", "syntax-comment", "syntax-name", "syntax-type", "syntax-punctuation", "syntax-meta"];
25
34
  /** Tokens a product overrides to make the theme its own: the accent from the
26
35
  * brand-line registry, and how much of it bleeds into the greys. */
27
36
  export declare const themeParameters: readonly ["accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink"];
@@ -46,7 +55,7 @@ export declare const layerTokens: readonly ["z-popup", "z-sticky", "z-menu", "z-
46
55
  * vocabulary - a docs page, an inspector, the JSON export, the test that keeps
47
56
  * this file honest against the stylesheet - reads this, so a new category
48
57
  * cannot be added and quietly missed by half of them. */
49
- export declare const allTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "on-good", "on-warn", "on-bad", "on-info", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft", "series-1", "series-2", "series-3", "series-4", "series-5", "series-6", "series-7", "series-8", "scale-100", "scale-200", "scale-300", "scale-400", "scale-500", "scale-600", "scale-700", "chart-grid", "chart-axis", "heat-1", "heat-2", "heat-3", "heat-4", "heat-5", "accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink", "shadow-lift", "shadow-raise", "shadow-float", "radius-xs", "radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-2xl", "radius-inner", "font-sans", "font-mono", "text-2xs", "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "font-weight-normal", "font-weight-medium", "font-weight-semibold", "tracking-caption", "tracking-tight", "duration-quick", "duration-base", "duration-slow", "ease-out", "ease-in-out", "z-popup", "z-sticky", "z-menu", "z-floating", "z-overlay", "z-modal", "z-palette", "z-toast"];
58
+ export declare const allTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "on-good", "on-warn", "on-bad", "on-info", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft", "series-1", "series-2", "series-3", "series-4", "series-5", "series-6", "series-7", "series-8", "scale-100", "scale-200", "scale-300", "scale-400", "scale-500", "scale-600", "scale-700", "chart-grid", "chart-axis", "heat-1", "heat-2", "heat-3", "heat-4", "heat-5", "syntax-keyword", "syntax-string", "syntax-number", "syntax-comment", "syntax-name", "syntax-type", "syntax-punctuation", "syntax-meta", "accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink", "shadow-lift", "shadow-raise", "shadow-float", "radius-xs", "radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-2xl", "radius-inner", "font-sans", "font-mono", "text-2xs", "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "font-weight-normal", "font-weight-medium", "font-weight-semibold", "tracking-caption", "tracking-tight", "duration-quick", "duration-base", "duration-slow", "ease-out", "ease-in-out", "z-popup", "z-sticky", "z-menu", "z-floating", "z-overlay", "z-modal", "z-palette", "z-toast"];
50
59
  export type ColorToken = (typeof colorTokens)[number];
51
60
  export type ThemeParameter = (typeof themeParameters)[number];
52
61
  export type ElevationToken = (typeof elevationTokens)[number];
@@ -54,7 +63,12 @@ export type RadiusToken = (typeof radiusTokens)[number];
54
63
  export type TypeToken = (typeof typeTokens)[number];
55
64
  export type MotionToken = (typeof motionTokens)[number];
56
65
  export type LayerToken = (typeof layerTokens)[number];
57
- export type Token = ColorToken | ThemeParameter | ElevationToken | RadiusToken | TypeToken | MotionToken | LayerToken;
66
+ export type SeriesToken = (typeof seriesTokens)[number];
67
+ export type ScaleToken = (typeof scaleTokens)[number];
68
+ export type ChartToken = (typeof chartTokens)[number];
69
+ export type HeatToken = (typeof heatTokens)[number];
70
+ export type SyntaxToken = (typeof syntaxTokens)[number];
71
+ export type Token = ColorToken | SeriesToken | ScaleToken | ChartToken | HeatToken | SyntaxToken | ThemeParameter | ElevationToken | RadiusToken | TypeToken | MotionToken | LayerToken;
58
72
  /** The custom property a token is read from: `token('accent')` is
59
73
  * `'--accent'`. Spelled out here so that no caller builds the string itself
60
74
  * and gets the prefix subtly wrong. */
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,EACd,KAAK,KAAK,GACX,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,eAAO,MAAM,WAAW,qQA0Bd,CAAA;AAEV;;;;4EAI4E;AAC5E,eAAO,MAAM,YAAY,2GASf,CAAA;AAEV;kDACkD;AAClD,eAAO,MAAM,WAAW,sGAQd,CAAA;AAEV;4CAC4C;AAC5C,eAAO,MAAM,WAAW,uCAAwC,CAAA;AAEhE;;;;mEAImE;AACnE,eAAO,MAAM,UAAU,6DAA8D,CAAA;AAErF;oEACoE;AACpE,eAAO,MAAM,eAAe,kGAOlB,CAAA;AAEV;yDACyD;AACzD,eAAO,MAAM,eAAe,0DAA2D,CAAA;AAEvF;8DAC8D;AAC9D,eAAO,MAAM,YAAY,0GAQf,CAAA;AAEV;iCACiC;AACjC,eAAO,MAAM,UAAU,gOAeb,CAAA;AAEV;;0CAE0C;AAC1C,eAAO,MAAM,YAAY,0FAMf,CAAA;AAEV;;qEAEqE;AACrE,eAAO,MAAM,WAAW,0GASd,CAAA;AAEV;;;yDAGyD;AACzD,eAAO,MAAM,SAAS,snCAYZ,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,KAAK,GACb,UAAU,GACV,cAAc,GACd,cAAc,GACd,WAAW,GACX,SAAS,GACT,WAAW,GACX,UAAU,CAAA;AAEd;;uCAEuC;AACvC,wBAAgB,KAAK,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAEzC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,EACd,KAAK,KAAK,GACX,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,eAAO,MAAM,WAAW,qQA0Bd,CAAA;AAEV;;;;4EAI4E;AAC5E,eAAO,MAAM,YAAY,2GASf,CAAA;AAEV;kDACkD;AAClD,eAAO,MAAM,WAAW,sGAQd,CAAA;AAEV;4CAC4C;AAC5C,eAAO,MAAM,WAAW,uCAAwC,CAAA;AAEhE;;;;mEAImE;AACnE,eAAO,MAAM,UAAU,6DAA8D,CAAA;AAErF;;;;;;;oDAOoD;AACpD,eAAO,MAAM,YAAY,oJASf,CAAA;AAEV;oEACoE;AACpE,eAAO,MAAM,eAAe,kGAOlB,CAAA;AAEV;yDACyD;AACzD,eAAO,MAAM,eAAe,0DAA2D,CAAA;AAEvF;8DAC8D;AAC9D,eAAO,MAAM,YAAY,0GAQf,CAAA;AAEV;iCACiC;AACjC,eAAO,MAAM,UAAU,gOAeb,CAAA;AAEV;;0CAE0C;AAC1C,eAAO,MAAM,YAAY,0FAMf,CAAA;AAEV;;qEAEqE;AACrE,eAAO,MAAM,WAAW,0GASd,CAAA;AAEV;;;yDAGyD;AACzD,eAAO,MAAM,SAAS,+vCAaZ,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAKrD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvD,MAAM,MAAM,KAAK,GACb,UAAU,GACV,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,GACd,WAAW,GACX,SAAS,GACT,WAAW,GACX,UAAU,CAAA;AAEd;;uCAEuC;AACvC,wBAAgB,KAAK,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAEzC"}
package/dist/index.js CHANGED
@@ -81,6 +81,24 @@ export const chartTokens = ['chart-grid', 'chart-axis'];
81
81
  * `scaleTokens`. The faintest step stays distinct from an empty cell, or the
82
82
  * grid claims a day was worked at zero when nobody reported it. */
83
83
  export const heatTokens = ['heat-1', 'heat-2', 'heat-3', 'heat-4', 'heat-5'];
84
+ /** Syntax: the eight kinds of thing in a piece of code that are worth telling
85
+ * apart in every language. Fixed like the series - `if` should not be magenta
86
+ * in one product and cobalt in another - but measured against a different
87
+ * threshold: these are read as text, so every slot clears 4.5:1 against the
88
+ * surface code sits on, where a series colour only has to clear 3:1 as a
89
+ * filled mark. They are also the one palette here not held to the
90
+ * colour-blind floor, because syntax colour restates what the text already
91
+ * says and CodeBlock's default draws none of it. */
92
+ export const syntaxTokens = [
93
+ 'syntax-keyword',
94
+ 'syntax-string',
95
+ 'syntax-number',
96
+ 'syntax-comment',
97
+ 'syntax-name',
98
+ 'syntax-type',
99
+ 'syntax-punctuation',
100
+ 'syntax-meta',
101
+ ];
84
102
  /** Tokens a product overrides to make the theme its own: the accent from the
85
103
  * brand-line registry, and how much of it bleeds into the greys. */
86
104
  export const themeParameters = [
@@ -156,6 +174,7 @@ export const allTokens = [
156
174
  ...scaleTokens,
157
175
  ...chartTokens,
158
176
  ...heatTokens,
177
+ ...syntaxTokens,
159
178
  ...themeParameters,
160
179
  ...elevationTokens,
161
180
  ...radiusTokens,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}