@tenphi/cookbook 0.32.0 → 0.33.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.
- package/docs/customization-rules.md +7 -5
- package/docs/migration.md +52 -26
- package/docs/theme-and-components.md +32 -15
- package/docs/upstream/glaze/README.md +46 -26
- package/docs/upstream/glaze/docs/contrast.mdx +751 -0
- package/docs/upstream/glaze/docs/exporting.mdx +634 -0
- package/docs/upstream/glaze/docs/getting-started.mdx +489 -0
- package/docs/upstream/glaze/docs/hdr.mdx +523 -0
- package/docs/upstream/glaze/docs/methodology.mdx +922 -0
- package/docs/upstream/glaze/docs/migration.md +477 -286
- package/docs/upstream/glaze/docs/mixes.mdx +348 -0
- package/docs/upstream/glaze/docs/okhst.mdx +679 -0
- package/docs/upstream/glaze/docs/reference/color-definitions.md +552 -0
- package/docs/upstream/glaze/docs/reference/color-tokens.md +420 -0
- package/docs/upstream/glaze/docs/reference/configuration.md +527 -0
- package/docs/upstream/glaze/docs/reference/contrast.md +277 -0
- package/docs/upstream/glaze/docs/reference/index.md +225 -0
- package/docs/upstream/glaze/docs/reference/output.md +713 -0
- package/docs/upstream/glaze/docs/reference/palette.md +434 -0
- package/docs/upstream/glaze/docs/reference/theme.md +331 -0
- package/docs/upstream/glaze/docs/reference/utilities.md +646 -0
- package/docs/upstream/glaze/docs/schemes.mdx +635 -0
- package/docs/upstream/glaze/docs/shadows-and-glows.mdx +519 -0
- package/docs/upstream/manifest.json +2 -2
- package/package.json +3 -3
- package/docs/upstream/glaze/docs/api.md +0 -2021
- package/docs/upstream/glaze/docs/methodology.md +0 -686
- package/docs/upstream/glaze/docs/okhst.md +0 -207
|
@@ -109,9 +109,9 @@ imports, configuration, and rendering setup when adapting them.
|
|
|
109
109
|
[style properties](./upstream/tasty/docs/styles.md): syntax and property reference.
|
|
110
110
|
* [Tasty methodology](./upstream/tasty/docs/methodology.md) and
|
|
111
111
|
[configuration](./upstream/tasty/docs/configuration.md): component design and shared settings.
|
|
112
|
-
* [Glaze methodology](./upstream/glaze/docs/methodology.
|
|
112
|
+
* [Glaze methodology](./upstream/glaze/docs/methodology.mdx): semantic palettes
|
|
113
113
|
and contrast relationships.
|
|
114
|
-
* [Glaze API](./upstream/glaze/docs/
|
|
114
|
+
* [Glaze API reference](./upstream/glaze/docs/reference/index.md): color inputs, schemes, and contrast solving.
|
|
115
115
|
|
|
116
116
|
## Documentation in the installed package
|
|
117
117
|
|
|
@@ -123,9 +123,11 @@ references. These match the dependencies used to build that Cookbook release;
|
|
|
123
123
|
consumer dependency overrides can change the installed runtime independently.
|
|
124
124
|
|
|
125
125
|
In the packaged copies, links to available upstream reference pages point to
|
|
126
|
-
these local snapshots. The Markdown references work offline.
|
|
127
|
-
|
|
128
|
-
|
|
126
|
+
these local snapshots. The Markdown references work offline. Glaze's guides
|
|
127
|
+
are MDX: their prose, code, and tables read offline, but their live examples
|
|
128
|
+
render only on the Glaze website. Links to source code and artwork absent from
|
|
129
|
+
the npm packages point to their upstream release and still need internet
|
|
130
|
+
access. The published website keeps its online links.
|
|
129
131
|
|
|
130
132
|
Start at `node_modules/@tenphi/cookbook/docs/customization-rules.md`. When the
|
|
131
133
|
package manager uses a different layout, resolve the exported documentation
|
package/docs/migration.md
CHANGED
|
@@ -4,7 +4,6 @@ description: Version-specific changes, runtime upgrades, and documentation-sourc
|
|
|
4
4
|
sidebar:
|
|
5
5
|
order: 9
|
|
6
6
|
---
|
|
7
|
-
|
|
8
7
|
Upgrade the Cookbook runtime with your package manager, then apply the notes
|
|
9
8
|
for every version range you cross, starting with the oldest.
|
|
10
9
|
|
|
@@ -25,8 +24,7 @@ npm run preview
|
|
|
25
24
|
For pnpm use `pnpm add`; for Yarn use `yarn add`. Commit the package manifest and
|
|
26
25
|
package-manager lockfile together. Keep Astro inside Cookbook's declared peer
|
|
27
26
|
range. Review the preview with your custom styles, plugins, fonts, languages,
|
|
28
|
-
and versions before deploying. After deployment, run `cookbook check-build
|
|
29
|
-
--url https://docs.example.com/` against that exact build output.
|
|
27
|
+
and versions before deploying. After deployment, run `cookbook check-build --url https://docs.example.com/` against that exact build output.
|
|
30
28
|
|
|
31
29
|
The creator starts new projects; rerunning it over an existing project is not
|
|
32
30
|
an upgrade path. Generated sites include `.agents/skills/upgrade-cookbook/`
|
|
@@ -41,6 +39,34 @@ upgrade the site's Cookbook runtime or package-manager dependencies. Commit the
|
|
|
41
39
|
documentation lock separately when intentionally updating imported content.
|
|
42
40
|
Local Markdown needs no lock update.
|
|
43
41
|
|
|
42
|
+
## 0.32.x to 0.33
|
|
43
|
+
|
|
44
|
+
Cookbook now generates themes with Glaze 3. Generated colors can move slightly;
|
|
45
|
+
check custom palettes in every appearance. See the
|
|
46
|
+
[Glaze 3 upgrade notes](./upstream/glaze/docs/migration.md#upgrading-glaze).
|
|
47
|
+
|
|
48
|
+
* **Shadows.** A shadow's `intensity` is now an exact tone step, and `fg` is
|
|
49
|
+
the element casting the shadow rather than a contrast reference. The built-in
|
|
50
|
+
`shadow` role steps 8 tones in light and dark and is transparent in high
|
|
51
|
+
contrast. In the default contrast mode, light shadows look as before and dark
|
|
52
|
+
ones are noticeably stronger, since 2.x stepped only about 3 tones on a dark
|
|
53
|
+
page. A numeric `theme.contrastLevel` now fades the light shadow toward its
|
|
54
|
+
high-contrast value instead of strengthening it. Re-tune custom `shadow`
|
|
55
|
+
roles: drop `fg: "text"` and set `intensity` to the number of tones you want,
|
|
56
|
+
with `0` in high contrast for a shadow on the page.
|
|
57
|
+
* **Unreachable steps.** A step can't pass black, and the default dark page
|
|
58
|
+
sits about 9 tones above it. Glaze paints a step that doesn't fit at full
|
|
59
|
+
strength and logs a "cannot reach" warning. On the default surface, the
|
|
60
|
+
built-in shadow does this with a `darkTone` dark end below about 14
|
|
61
|
+
(including `false`) or a numeric `theme.contrastLevel` from about 25 to 99.
|
|
62
|
+
* **Shadow tuning.** `saturationFactor`, `maxSaturation`, `lightnessFactor`,
|
|
63
|
+
`lightnessBounds`, `minGapTarget`, `alphaMax`, and `bgHueBlend` are gone and
|
|
64
|
+
fail validation, in `theme.glaze.shadowTuning` and in a role's own `tuning`.
|
|
65
|
+
The new fields are `objectInfluence`, `tint`, `reach`, and `hueBleed`. There
|
|
66
|
+
is no opacity cap: lower `intensity` for a lighter shadow.
|
|
67
|
+
* **Glows.** Palette roles accept Glaze `glow` declarations, which lighten
|
|
68
|
+
`bg` by an exact tone step. Tune each glow with its own `tuning`.
|
|
69
|
+
|
|
44
70
|
## Upcoming custom-element naming
|
|
45
71
|
|
|
46
72
|
All Cookbook-owned custom elements now use the `cookbook-*` prefix, including
|
|
@@ -66,11 +92,11 @@ Cookbook now uses Tasty 3.14 and the Tasty ESLint plugin 1.12. Built-in themes
|
|
|
66
92
|
need no configuration migration. Review custom styles for these changes from
|
|
67
93
|
Tasty 3.12:
|
|
68
94
|
|
|
69
|
-
|
|
95
|
+
* Color opacity suffixes such as `#accent-text.5` now emit `color-mix()`. If the
|
|
70
96
|
palette color is already translucent, the suffix multiplies its alpha rather
|
|
71
97
|
than replacing it. For `#accent-text.$fade`, set `$fade` to a number such as
|
|
72
98
|
`".5"`, rather than a percentage such as `"50%"`.
|
|
73
|
-
|
|
99
|
+
* `false` now omits spacing, size, and `outlineOffset` declarations. Use an
|
|
74
100
|
explicit value such as `"0"` or `"auto"` if a custom style relied on the old
|
|
75
101
|
implicit default. `transition: "none"` now correctly disables transitions,
|
|
76
102
|
including the built-in reduced-motion states.
|
|
@@ -145,19 +171,19 @@ A package page still shows an edit link when its own frontmatter sets
|
|
|
145
171
|
These releases need no configuration changes, but they can affect custom
|
|
146
172
|
scripts, hard-coded links, and apps that share the reader's appearance:
|
|
147
173
|
|
|
148
|
-
|
|
174
|
+
* **Client navigation (0.24):** internal links swap pages without a full
|
|
149
175
|
reload. Bundled scripts are not rerun after a client navigation, so attach
|
|
150
176
|
custom browser behavior through custom-element lifecycle callbacks or
|
|
151
177
|
initialize it on `astro:page-load`. See
|
|
152
178
|
[client navigation](./site-navigation.md#client-navigation).
|
|
153
|
-
|
|
179
|
+
* **Prefetching (0.25):** Astro's hover and focus prefetching is enabled by
|
|
154
180
|
default. Set `prefetch: false` in the Astro configuration to turn it off;
|
|
155
181
|
explicit Astro `prefetch` settings are preserved.
|
|
156
|
-
|
|
182
|
+
* **Page URLs (0.25.1):** page URLs follow Astro's `trailingSlash` and
|
|
157
183
|
`build.format`. With the default directory output, internal links, canonicals,
|
|
158
184
|
and `llms.txt` use a trailing slash, such as `/guide/`. See
|
|
159
185
|
[deployment](./deployment.md#public-url-and-base-path).
|
|
160
|
-
|
|
186
|
+
* **Appearance storage (0.25.4):** the reader's color scheme and contrast are
|
|
161
187
|
stored together in one `cookbook-appearance` entry. A scheme saved under the
|
|
162
188
|
previous `cookbook-theme` key is still read and moves to the new entry on the
|
|
163
189
|
next change. See [reader appearance](./theme-and-components.md#reader-appearance).
|
|
@@ -311,41 +337,41 @@ choices are ignored; visitors who relied on one can select their scheme again.
|
|
|
311
337
|
|
|
312
338
|
These changes were introduced in 0.18:
|
|
313
339
|
|
|
314
|
-
|
|
340
|
+
* **Google fonts:** family-name shorthand loads preset weights and italics and
|
|
315
341
|
self-hosts the files. The initial build requires network access. Preserve the
|
|
316
342
|
Astro font cache for offline rebuilds, use local files for checked-in assets,
|
|
317
343
|
or select `theme.fontLoading.google: "remote"` for CDN delivery. Weights set
|
|
318
344
|
through CSS variables that cannot be resolved from presets require explicit
|
|
319
345
|
`weights`. See [fonts](./fonts-and-typography.md#change-font-families).
|
|
320
|
-
|
|
346
|
+
* **Colors:** body tone 0 and heading tone 4 remain the reading defaults.
|
|
321
347
|
The default logo uses fixed Glaze colors (`logo-surface` and `logo-mark`), so
|
|
322
348
|
its book stays light in dark mode. Customize these independently of accents.
|
|
323
349
|
Additional semantic-pair checks may reject custom colors that previously
|
|
324
350
|
passed. Follow the named pair and mode in the diagnostic; see
|
|
325
351
|
[contrast troubleshooting](./troubleshooting.md#contrast-failures).
|
|
326
|
-
|
|
352
|
+
* **Header controls:** round controls use `$header-control-radius`, independently
|
|
327
353
|
of `$radius`. Set the new token to your preferred radius to keep your previous
|
|
328
354
|
header shape.
|
|
329
|
-
|
|
355
|
+
* **Drafts:** production builds retain draft pages at direct URLs and mark them
|
|
330
356
|
`noindex`. They are omitted from generated navigation, search, sitemaps, and
|
|
331
357
|
agent indexes. A draft is public to anyone with the URL; use host access
|
|
332
358
|
controls for private previews.
|
|
333
|
-
|
|
359
|
+
* **Plugins:** custom metadata is available to route middleware and through
|
|
334
360
|
Cookbook's content API. Plugins that need Astro's synthetic content files or
|
|
335
361
|
inject their own CSS require adaptation. See the tested
|
|
336
362
|
[extension guide](./plugins.md).
|
|
337
|
-
|
|
363
|
+
* **Styles:** rendered inline styles are rejected. Move custom styling to Tasty
|
|
338
364
|
and registered theme style trees. Keep these components server-rendered;
|
|
339
365
|
browser scripts and `client:*` islands cannot import Cookbook styling, Tasty,
|
|
340
366
|
or Glaze. Attach interaction scripts to the static markup. Isolated,
|
|
341
367
|
sandboxed `Preview` content is the
|
|
342
368
|
documented exception. The new surface inventory is in
|
|
343
369
|
[Component styles](./component-styles.md).
|
|
344
|
-
|
|
370
|
+
* **Page text:** the footer offers copy/download Markdown by default. Set
|
|
345
371
|
`site.seo.copyPage: false` to disable the controls and generated page files.
|
|
346
372
|
Configure static host headers if raw Markdown must be excluded from indexing;
|
|
347
373
|
see [deployment](./deployment.md).
|
|
348
|
-
|
|
374
|
+
* **Validation:** existing projects can add
|
|
349
375
|
`"validate": "cookbook doctor && astro build && cookbook check-build"`
|
|
350
376
|
to their scripts. `doctor` is explicitly a preflight; successful MDX compilation
|
|
351
377
|
and deployment require the later checks.
|
|
@@ -377,29 +403,29 @@ The Appearance panel combines the color scheme and contrast controls in
|
|
|
377
403
|
The shared-configuration and source-identity changes shipped in **0.14.0**.
|
|
378
404
|
Apply these steps if your project still uses the earlier contracts:
|
|
379
405
|
|
|
380
|
-
|
|
406
|
+
* Move generated inline documentation configuration to `docs.config.ts` and use
|
|
381
407
|
`cookbook()` in Astro. Existing explicit `cookbook({ config })` remains valid,
|
|
382
408
|
but CLI commands read the shared configuration file.
|
|
383
|
-
|
|
409
|
+
* For nested Astro apps, put `root: "../.."` in `docs.config.ts`; paths resolve
|
|
384
410
|
relative to that file. Individual sources may now specify `root` and `id`.
|
|
385
|
-
|
|
411
|
+
* Run `cookbook update` after changing a requested npm specifier. A lock for
|
|
386
412
|
another range or tag is no longer accepted by package name alone.
|
|
387
|
-
|
|
413
|
+
* `rawHtml: "sanitize"` preserves safe HTML and removes executable markup and
|
|
388
414
|
presentational attributes. Use `"strip"` for the former removal behavior;
|
|
389
415
|
removal now emits a diagnostic. `"reject"` still fails validation.
|
|
390
|
-
|
|
416
|
+
* Unrecognized page frontmatter is kept in graph entry `metadata`. Use
|
|
391
417
|
`content.frontmatter: "reject"` for the former strict behavior. Cookbook's
|
|
392
418
|
recognized fields retain their validation.
|
|
393
|
-
|
|
419
|
+
* `slug` is now relative to the source mount, including when it starts with `/`.
|
|
394
420
|
Use a separate source mount for an unrelated public route.
|
|
395
|
-
|
|
421
|
+
* Repeated files in separate source declarations create separate entries.
|
|
396
422
|
Give mounts stable IDs and use `source:<id>/<source-path>` for explicit links.
|
|
397
423
|
`entryBySource(path)` returns `undefined` for an ambiguous path; pass a source
|
|
398
424
|
ID as its second argument. Graph entry IDs include the source ID.
|
|
399
|
-
|
|
425
|
+
* Unknown names in `theme.styles` are errors. Register user-authored component
|
|
400
426
|
styles in `theme.customStyles`. Built-in component names and sub-elements
|
|
401
427
|
provide strict editor checking; style objects still contain only overrides.
|
|
402
|
-
|
|
428
|
+
* `Tabs` now expects `Tab` children with accessible labels. It provides keyboard
|
|
403
429
|
navigation and panels; use an ordinary custom component for a grouping layout.
|
|
404
430
|
|
|
405
431
|
See [authoring](./authoring.mdx) for component usage and
|
|
@@ -177,11 +177,12 @@ The names `current`, `constructor`, and `prototype` are reserved.
|
|
|
177
177
|
Declaring a built-in name intentionally overrides that role; use a project
|
|
178
178
|
prefix for additional roles to avoid future naming collisions.
|
|
179
179
|
|
|
180
|
-
When a status role such as `info` uses a mix or
|
|
181
|
-
`info-text` defaults to neutral, contrast-corrected text. Override
|
|
182
|
-
explicitly for a colored label; the
|
|
183
|
-
A shadow status also uses a neutral derived surface, because Glaze does
|
|
184
|
-
a shadow to be a mix target. Override the surface separately
|
|
180
|
+
When a status role such as `info` uses a mix, shadow, or glow definition, its
|
|
181
|
+
derived `info-text` defaults to neutral, contrast-corrected text. Override
|
|
182
|
+
`info-text` explicitly for a colored label; the dependency graph stays intact.
|
|
183
|
+
A shadow or glow status also uses a neutral derived surface, because Glaze does
|
|
184
|
+
not allow a shadow or glow to be a mix target. Override the surface separately
|
|
185
|
+
when needed.
|
|
185
186
|
|
|
186
187
|
### Configure Glaze adaptation
|
|
187
188
|
|
|
@@ -199,20 +200,36 @@ theme: {
|
|
|
199
200
|
"accent-surface-subtle": {
|
|
200
201
|
type: "mix", base: "surface", target: "accent-surface", value: [12, 20],
|
|
201
202
|
},
|
|
202
|
-
shadow: {
|
|
203
|
-
type: "shadow", bg: "surface", fg: "text", intensity: [12, 24],
|
|
204
|
-
tuning: { alphaMax: 0.3 },
|
|
205
|
-
},
|
|
203
|
+
shadow: { type: "shadow", bg: "surface", intensity: [6, 0] },
|
|
206
204
|
},
|
|
207
205
|
},
|
|
208
206
|
```
|
|
209
207
|
|
|
210
|
-
Palette roles accept Glaze's regular, mix, and
|
|
211
|
-
shadow references use the same graph as other roles. Native Glaze
|
|
212
|
-
still apply, including the requirement for shadow
|
|
213
|
-
to reference
|
|
214
|
-
|
|
215
|
-
|
|
208
|
+
Palette roles accept Glaze's regular, mix, shadow, and glow declarations. Mix,
|
|
209
|
+
shadow, and glow references use the same graph as other roles. Native Glaze
|
|
210
|
+
restrictions still apply, including the requirement for shadow and glow
|
|
211
|
+
backgrounds and foregrounds to reference colors that are neither shadows nor
|
|
212
|
+
glows.
|
|
213
|
+
|
|
214
|
+
Without `fg`, a shadow's `intensity` is the exact number of tones the page
|
|
215
|
+
darkens under it (a glow's, how many it lightens), with an optional
|
|
216
|
+
high-contrast value. `fg` names the element that casts the shadow, not a
|
|
217
|
+
contrast reference, and scales the step by that element's tone;
|
|
218
|
+
`tuning: { objectInfluence: 0 }` turns this off. A step can't pass black: the
|
|
219
|
+
default dark page sits about 9 tones above it, and the default dark
|
|
220
|
+
high-contrast page is black, so give a shadow on the page `0` as its
|
|
221
|
+
high-contrast value. A step that doesn't fit paints at full strength, and Glaze
|
|
222
|
+
logs a "cannot reach" warning.
|
|
223
|
+
|
|
224
|
+
The built-in `shadow` role steps 8 tones in light and dark, and is transparent
|
|
225
|
+
in high contrast, where borders carry the edges. On the default surface, a
|
|
226
|
+
`darkTone` whose dark end is below about 14 (including `false`), or a numeric
|
|
227
|
+
`theme.contrastLevel` from about 25 to 99, leaves the dark page too close to
|
|
228
|
+
black for the step, so the built-in shadow reaches full strength and Glaze
|
|
229
|
+
warns. `shadowTuning` exposes Glaze's `objectInfluence`, `tint`, `reach`, and
|
|
230
|
+
`hueBleed` for every shadow; a role's own `tuning` takes precedence, and a glow
|
|
231
|
+
takes only its own `tuning`. See
|
|
232
|
+
[Glaze shadows and glows](./upstream/glaze/docs/shadows-and-glows.mdx).
|
|
216
233
|
|
|
217
234
|
### Built-in palette inventory
|
|
218
235
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img src="https://raw.githubusercontent.com/tenphi/glaze/
|
|
2
|
+
<img src="https://raw.githubusercontent.com/tenphi/glaze/v3.0.0/assets/glaze.svg" width="128" height="128" alt="Glaze logo">
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<h1 align="center">Glaze</h1>
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
|
-
OKHST
|
|
8
|
+
<a href="https://github.com/tenphi/okhst">OKHST</a>-based color theme generator with WCAG and APCA contrast solving
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
11
|
<p align="center">
|
|
@@ -25,12 +25,13 @@ contrast floor.
|
|
|
25
25
|
|
|
26
26
|
* **OKHST color space** — OKHSL with a contrast-shaped **tone** axis. Equal
|
|
27
27
|
steps give equal WCAG contrast for neutrals and a useful approximation for
|
|
28
|
-
chromatic colors. See [
|
|
28
|
+
chromatic colors. See [Tone and OKHST](docs/okhst.mdx) and the
|
|
29
29
|
[full OKHST specification](https://github.com/tenphi/okhst).
|
|
30
30
|
* **WCAG 2 + APCA contrast solving** — automatic tone adjustment to meet a WCAG ratio or APCA Lc floor
|
|
31
31
|
* **Unified dark mode** — one tone space for light, dark, and high-contrast; dark is a single `100 − t` inversion, no fitted curve
|
|
32
32
|
* **Mix colors** — blend two colors with OKHSL or sRGB interpolation, opaque or transparent, with optional contrast solving
|
|
33
|
-
* **
|
|
33
|
+
* **Shadows and glows** — translucent overlays whose opacity is solved per surface, so `intensity` is an exact tone step wherever the surface has room for it (a step past black or white is pinned and warns), with object-aware strength
|
|
34
|
+
* **HDR glows** — set `glowTuning.headroom` and a glow whose step passes white also gets an exact HDR value: extended sRGB `color(srgb …)` with channels past 1, plus a base and an exposure in DTCG for native apps, exported when you turn on `modes.hdr`. See [HDR glows](docs/hdr.mdx).
|
|
34
35
|
* **Light + Dark + High-Contrast** — all schemes from one definition
|
|
35
36
|
* **Manual contrast level** — put your normal palette on a `0–100` slider between itself and the high-contrast one; every level in between is solved, not approximated, and the high-contrast tier stays available on top
|
|
36
37
|
* **Per-color hue override** — absolute or relative hue shifts within a theme
|
|
@@ -43,7 +44,7 @@ contrast floor.
|
|
|
43
44
|
* **Import/Export** — serialize and restore themes, color tokens, and entire palettes as JSON
|
|
44
45
|
* **Create from hex/RGB** — start from an existing brand color
|
|
45
46
|
* **Zero dependencies** — pure math, runs anywhere (Node.js, browser, edge)
|
|
46
|
-
* **
|
|
47
|
+
* **ESM + CJS** — dual-format package
|
|
47
48
|
* **TypeScript-first** — full type definitions included
|
|
48
49
|
|
|
49
50
|
## Installation
|
|
@@ -69,62 +70,69 @@ glaze.configure({
|
|
|
69
70
|
modes: { dark: true, highContrast: true },
|
|
70
71
|
});
|
|
71
72
|
|
|
72
|
-
const
|
|
73
|
+
const theme = glaze(280, 80);
|
|
73
74
|
|
|
74
|
-
|
|
75
|
+
theme.colors({
|
|
75
76
|
surface: { tone: 97, saturation: 0.15 },
|
|
76
77
|
'surface-text': {
|
|
77
78
|
base: 'surface',
|
|
78
79
|
tone: '-1',
|
|
80
|
+
saturation: 0.4,
|
|
79
81
|
contrast: { apca: ['content', 'body'] },
|
|
80
82
|
},
|
|
81
83
|
border: {
|
|
82
84
|
base: 'surface',
|
|
83
85
|
tone: ['-8', '-16'],
|
|
86
|
+
saturation: 0.2,
|
|
84
87
|
inherit: false,
|
|
85
88
|
},
|
|
86
|
-
'accent-surface': { tone:
|
|
87
|
-
'accent-surface
|
|
88
|
-
base: 'accent-surface',
|
|
89
|
-
tone: '
|
|
89
|
+
'accent-surface-text': { tone: 100, mode: 'fixed' },
|
|
90
|
+
'accent-surface': {
|
|
91
|
+
base: 'accent-surface-text',
|
|
92
|
+
tone: '-1',
|
|
90
93
|
contrast: 'AA',
|
|
91
94
|
mode: 'fixed',
|
|
92
95
|
},
|
|
93
96
|
});
|
|
94
97
|
|
|
95
|
-
const
|
|
96
|
-
const palette = glaze.palette({ default:
|
|
98
|
+
const danger = theme.extend({ hue: 23 });
|
|
99
|
+
const palette = glaze.palette({ default: theme, danger });
|
|
97
100
|
|
|
98
101
|
const tokens = palette.tokens({
|
|
99
102
|
prefix: { default: '', danger: 'danger-' },
|
|
100
103
|
});
|
|
101
104
|
// → {
|
|
102
105
|
// light: { surface: 'oklch(...)', 'danger-surface': 'oklch(...)', ... },
|
|
103
|
-
// dark: {
|
|
106
|
+
// dark: { ... },
|
|
104
107
|
// lightContrast: { ... },
|
|
105
108
|
// darkContrast: { ... },
|
|
106
109
|
// }
|
|
107
110
|
```
|
|
108
111
|
|
|
112
|
+
The accent fill is solved against its white label, not the reverse: the fill
|
|
113
|
+
darkens until the pair meets `'AA'`, or `'AAA'` in high contrast, where a bare
|
|
114
|
+
`'AA'` rises a tier.
|
|
115
|
+
|
|
109
116
|
## Concepts at a glance
|
|
110
117
|
|
|
111
118
|
1. **A theme has one hue/saturation seed.** Create status themes with
|
|
112
119
|
`extend()` so they inherit the same relationships while changing hue.
|
|
113
|
-
2. **A color is a root or a
|
|
120
|
+
2. **A color is a root or a dependent.** Roots use an absolute `tone` or
|
|
114
121
|
`'max'`/`'min'`. Dependent colors name a `base` and may use a signed
|
|
115
122
|
**tone delta** such as `'-8'` plus a `contrast` floor.
|
|
116
123
|
3. **Tone is an authoring axis, not a contrast guarantee.** Equal tone deltas
|
|
117
124
|
are exact WCAG steps for neutrals. Chromatic colors can drift in rendered
|
|
118
125
|
luminance, so Glaze measures contrast floors against the resolved colors.
|
|
119
126
|
4. **`contrast` is a floor.** A bare number or preset means WCAG;
|
|
120
|
-
`{ wcag }` and `{ apca }` select the metric explicitly. The solver
|
|
121
|
-
the requested tone whenever it already
|
|
127
|
+
`{ wcag }` and `{ apca }` select the metric explicitly. The solver keeps
|
|
128
|
+
the requested tone whenever it already clears the floor with a small
|
|
129
|
+
margin (1% over a WCAG ratio, 0.5 Lc over an APCA target).
|
|
122
130
|
5. **Each color chooses its dark adaptation.** `mode: 'auto'` uses dark tone
|
|
123
131
|
inversion (`100 - t`), `fixed` keeps the authored side of the tone scale,
|
|
124
132
|
and `static` skips scheme adaptation.
|
|
125
133
|
6. **Tone windows bound ordinary schemes.** `lightTone` and `darkTone`
|
|
126
|
-
configure the light
|
|
127
|
-
range. Values that accept `[normal, highContrast]` pairs can tighten
|
|
134
|
+
configure the light and dark tone windows. High-contrast variants use the
|
|
135
|
+
full range. Values that accept `[normal, highContrast]` pairs can tighten
|
|
128
136
|
deliberately in HC.
|
|
129
137
|
|
|
130
138
|
In Glaze, a **scheme variant** is one of `light`, `dark`, `lightContrast`, or
|
|
@@ -143,13 +151,25 @@ In Glaze, a **scheme variant** is one of `light`, `dark`, `lightContrast`, or
|
|
|
143
151
|
|
|
144
152
|
## Documentation
|
|
145
153
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
*
|
|
151
|
-
|
|
152
|
-
|
|
154
|
+
The full documentation, with live examples that follow your light / dark and
|
|
155
|
+
contrast preferences, is at [glaze.tenphi.me](./README.md). The
|
|
156
|
+
same pages live in [`docs/`](https://github.com/tenphi/glaze/blob/v3.0.0/docs):
|
|
157
|
+
|
|
158
|
+
* [Getting started](docs/getting-started.mdx) — install, build a first theme,
|
|
159
|
+
and export it.
|
|
160
|
+
* Concepts: [light, dark, and high contrast](docs/schemes.mdx),
|
|
161
|
+
[contrast solving](docs/contrast.mdx),
|
|
162
|
+
[shadows and glows](docs/shadows-and-glows.mdx),
|
|
163
|
+
[mixes and transparency](docs/mixes.mdx), and the color model under them,
|
|
164
|
+
[tone and OKHST](docs/okhst.mdx).
|
|
165
|
+
* Guides: [designing a palette](docs/methodology.mdx),
|
|
166
|
+
[exporting and integration](docs/exporting.mdx), and
|
|
167
|
+
[migration and upgrading](docs/migration.md) (including Glaze 2 → 3).
|
|
168
|
+
* The [API reference](docs/reference/index.md) for every method, option, and
|
|
169
|
+
type.
|
|
170
|
+
* Explore the tone axis in the
|
|
171
|
+
[ramp explorer](./docs/okhst.mdx#ramp-explorer), or read the
|
|
172
|
+
[full OKHST specification](https://github.com/tenphi/okhst) for its math.
|
|
153
173
|
* [`AGENTS.md`](https://github.com/tenphi/glaze/blob/main/AGENTS.md) — source-tree orientation for contributors.
|
|
154
174
|
|
|
155
175
|
## License
|