@tenphi/glaze 0.0.0-snapshot.d38eee5 → 0.0.0-snapshot.d79cac8

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/okhst.mdx ADDED
@@ -0,0 +1,680 @@
1
+ ---
2
+ title: Tone and OKHST
3
+ description: The contrast-uniform tone axis Glaze authors every color on, its math and guarantees, and how a tone becomes a rendered color in each scheme.
4
+ ---
5
+
6
+ import Example from '../docs-site/components/Example.astro';
7
+ import ToneRamp from '../docs-site/components/ToneRamp.tsx';
8
+ import ToneDrift from '../docs-site/components/okhst/ToneDrift.tsx';
9
+ import SchemeRamp from '../docs-site/components/okhst/SchemeRamp.tsx';
10
+ import ToneLadder from '../docs-site/components/okhst/ToneLadder.tsx';
11
+ import FloorCompare from '../docs-site/components/okhst/FloorCompare.tsx';
12
+
13
+ Glaze places every color in [OKHST](https://github.com/tenphi/okhst): OKHSL's
14
+ hue and saturation, with the lightness axis replaced by **tone** — a 0–100
15
+ axis shaped so that equal tone steps give equal WCAG contrast. This page is the
16
+ reference for the color model as Glaze applies it: the transfer math, what tone
17
+ does and does not guarantee, and how an authored tone becomes a rendered color
18
+ in each scheme. The [OKHST repository](https://github.com/tenphi/okhst) is the
19
+ canonical specification of the color space itself: transfer functions,
20
+ derivation, and invariants.
21
+
22
+ To build a palette on this model, continue to
23
+ [Designing a palette](./methodology.mdx). Every option and utility named here is
24
+ listed in the [API reference](./reference/index.md).
25
+
26
+ ## OKHSL with a tone axis
27
+
28
+ OKHST keeps OKHSL's hue (`h`, 0–360) and saturation (`s`) verbatim and swaps
29
+ the third coordinate:
30
+
31
+ | Space | Coordinates | Third coordinate |
32
+ | ----- | ----------- | ----------------------------------------------------- |
33
+ | OKHSL | `h, s, l` | `l`: perceptual lightness (toe-adjusted OKLab `L`) |
34
+ | OKHST | `h, s, t` | `t`: tone, a normalized logarithm of luminance |
35
+
36
+ You author tone on a 0–100 scale (`tone: 97`). Resolved variants and the
37
+ `{ h, s, t }` input object carry it on 0–1, like saturation (hue stays 0–360).
38
+
39
+ OKHSL lightness is perceptually even, but equal lightness steps produce uneven
40
+ contrast: the ratio between neighbors changes along the axis. Tone is shaped so
41
+ equal steps produce equal WCAG contrast. Two things follow: a ramp authored in
42
+ tone is a contrast-even ladder for free, and dark-mode inversion is a single
43
+ subtraction (`100 - t`) instead of a fitted curve.
44
+
45
+ ### Equal tone steps, equal contrast
46
+
47
+ <ToneRamp
48
+ saturation={0}
49
+ caption="Eleven neutral steps, evenly spaced in tone. The row underneath is the WCAG ratio between neighbors: 1.36:1 at every step."
50
+ />
51
+
52
+ <ToneRamp
53
+ saturation={0}
54
+ axis="lightness"
55
+ caption="The same eleven steps evenly spaced in OKHSL lightness. They look even, but the ratio between neighbors runs from 1.16:1 at the dark end up to 1.46:1 and back down to 1.29:1."
56
+ />
57
+
58
+ ## The tone transfer
59
+
60
+ For a gray (`s = 0`) at OKHSL lightness `l`, luminance has a closed form through
61
+ the OKHSL toe and the OKLab cube:
62
+
63
+ ```text
64
+ Y = toeInv(l)^3 // OKLab L = toeInv(l), cubed
65
+ l = toe(cbrt(Y)) // exact inverse
66
+ ```
67
+
68
+ Tone is a normalized natural logarithm of `Y`, offset by a small `eps`:
69
+
70
+ ```text
71
+ D = ln(1 + eps) - ln(eps)
72
+
73
+ toneFromY(Y, eps) = 100 * (ln(Y + eps) - ln(eps)) / D
74
+ yFromTone(T, eps) = exp(T / 100 * D + ln(eps)) - eps
75
+ ```
76
+
77
+ `toTone(l)` and `fromTone(t)` compose these with the gray luminance above, so
78
+ they convert between OKHSL lightness (0–1) and tone (0–100) directly. The two
79
+ directions are exact analytic inverses: a round trip is lossless to
80
+ floating-point precision. `toneFromY(0)` is 0 and `toneFromY(1)` is 100 for any
81
+ `eps`, so tone is always a clean 0–100 scale.
82
+
83
+ ### Why `eps` is 0.05
84
+
85
+ WCAG 2 contrast is `(Y_hi + 0.05) / (Y_lo + 0.05)`. With `eps = 0.05`, tone is a
86
+ normalized `ln(Y + 0.05)`, so a fixed tone difference is a fixed ratio of
87
+ `Y + 0.05` — a fixed WCAG contrast — wherever it sits on the scale. Since
88
+ `ln(1.05) - ln(0.05) = ln(21)`:
89
+
90
+ ```text
91
+ ratio(T2, T1) = (Y2 + 0.05) / (Y1 + 0.05)
92
+ = exp((T2 - T1) / 100 * ln(21))
93
+ = 21 ^ ((T2 - T1) / 100)
94
+ ```
95
+
96
+ The whole scale is 21:1, black to white, and every 10 tones multiply contrast by
97
+ `21 ^ 0.1`, about 1.36. For neutrals:
98
+
99
+ | Tone | Contrast vs. black |
100
+ | ---: | -----------------: |
101
+ | 10 | 1.36:1 |
102
+ | 20 | 1.84:1 |
103
+ | 30 | 2.49:1 |
104
+ | 40 | 3.38:1 |
105
+ | 50 | 4.58:1 |
106
+ | 60 | 6.21:1 |
107
+ | 70 | 8.42:1 |
108
+ | 80 | 11.42:1 |
109
+ | 90 | 15.49:1 |
110
+ | 100 | 21:1 |
111
+
112
+ Inverted, the tone distance between two neutrals for a target ratio `R` is
113
+ `100 * ln(R) / ln(21)`:
114
+
115
+ | Ratio | Tone distance |
116
+ | ---------------------- | ------------: |
117
+ | 3:1 (`'AA-large'`) | 36.08 |
118
+ | 4.5:1 (`'AA'`) | 49.40 |
119
+ | 7:1 (`'AAA'`) | 63.92 |
120
+
121
+ These distances are exact for neutrals only;
122
+ [Same tone, same lightness](#same-tone-same-lightness) explains why.
123
+
124
+ ### Tone above 100
125
+
126
+ The transfer has no ceiling: `toneFromY` keeps counting past SDR white
127
+ (`Y = 1`), so tone runs on past 100.
128
+
129
+ | Luminance `Y` | Stops above white | Tone |
130
+ | ------------: | ----------------: | -----: |
131
+ | 1 | 0 | 100 |
132
+ | 2 | 1 | 121.98 |
133
+ | 4 | 2 | 144.34 |
134
+
135
+ Each stop, a doubling of `Y`, adds about 22 tones. The scale is still a
136
+ logarithm of `Y + 0.05`, so equal tone steps past 100 are still equal ratios of
137
+ `Y + 0.05`: 12 tones past white (`Y` 1.4631, tone 112) is the same ratio as a
138
+ 12-tone step anywhere else. Contrast does not carry over. WCAG and APCA are
139
+ defined only up to SDR white, so a tone past 100 has no contrast meaning, and
140
+ the contrast solver never searches there.
141
+
142
+ [HDR glows](./shadows-and-glows.mdx#hdr-glows) are the only place Glaze goes
143
+ past 100. A glow whose step would cross white, given `headroom` above 0, can
144
+ carry an HDR value next to its SDR one: an opaque base plus an exposure in
145
+ stops that lands it on the tone past 100, as far as the headroom allows. A
146
+ resolved variant's own `t` stays within 0–1.
147
+
148
+ ## Same tone, same lightness
149
+
150
+ `okhstToOkhsl({ h, s, t })` passes `h` and `s` through unchanged and sets
151
+ `l = fromTone(100 * t)`. `fromTone` depends on the tone (and `eps`) alone, and OKHSL's
152
+ `l → L` map has no hue or saturation term: `h` and `s` enter only the chroma
153
+ math. That gives OKHST its core invariant:
154
+
155
+ > A given tone yields the same OKHSL lightness for every hue and saturation.
156
+
157
+ OKHST inherits OKHSL's gamut and reversibility exactly: every `(h, s, t)` is
158
+ realizable and round-trips.
159
+
160
+ ### Uniform in lightness, not luminance
161
+
162
+ The invariant is about lightness. Equal tone gives equal WCAG and APCA contrast
163
+ only for grays: a saturated red and a saturated green at the same tone share an
164
+ OKHSL lightness but differ in real luminance `Y`, because hue, saturation, and
165
+ gamut mapping all change the final sRGB values. This **chromatic drift** is the
166
+ one approximation in the model.
167
+
168
+ <ToneDrift
169
+ rows={[
170
+ { hue: 0, saturation: 0, label: 'Neutral' },
171
+ { hue: 25, saturation: 100 },
172
+ { hue: 25, saturation: 50 },
173
+ { hue: 110, saturation: 100 },
174
+ { hue: 150, saturation: 100 },
175
+ { hue: 300, saturation: 100 },
176
+ ]}
177
+ caption="Each column is drawn at the authored tone above it. The label in each cell is its measured tone: the tone of the gray with the same luminance. Neutrals match exactly; chromatic colors drift, and less so at lower saturation."
178
+ />
179
+
180
+ At full saturation, the rows above read up to 5.6 tones darker than their tone
181
+ (hue 300, purple) and 4.1 darker (hue 25, red), up to 2.7 tones lighter
182
+ (hue 150, green), and within a tone for yellow (hue 110). Across all hues the
183
+ extremes are 5.6 tones darker, near hue 300, and 2.9 lighter, near hue 143.
184
+ Drift shrinks with saturation: hue 25 at tone 50 reads 3.9 tones dark at full
185
+ saturation and 1.6 at half.
186
+
187
+ That splits the work between two tools:
188
+
189
+ - Use **tone deltas** for visual spacing within ramps and between related UI
190
+ colors. The spacing stays even and ordered for every hue.
191
+ - Use **`contrast`** when a rendered color must meet a measured WCAG or APCA
192
+ floor. The solver is the one deliberate exception to the invariant: it moves a
193
+ color's tone per hue and saturation until the measured floor is met. See
194
+ [Contrast floors](#contrast-floors-and-verification).
195
+
196
+ ## Tone windows
197
+
198
+ Each scheme renders authored tone into a **tone window**, configured by
199
+ `lightTone` and `darkTone`:
200
+
201
+ ```ts
202
+ import { glaze } from '@tenphi/glaze';
203
+
204
+ glaze.configure({
205
+ lightTone: [10, 100],
206
+ darkTone: [15, 95],
207
+ });
208
+ ```
209
+
210
+ The window's `lo` and `hi` are **OKHSL-lightness** boundaries (0–100). Glaze
211
+ converts them to tone, positions the authored tone linearly in that tone
212
+ interval, converts the result back to lightness with the window's `eps`, and
213
+ stores it as canonical tone:
214
+
215
+ ```text
216
+ loT = toTone(lo / 100, eps)
217
+ hiT = toTone(hi / 100, eps)
218
+ l = fromTone(loT + (T / 100) * (hiT - loT), eps)
219
+ t = toTone(l) / 100 // canonical tone (0–1), REF_EPS
220
+ ```
221
+
222
+ A window takes three forms:
223
+
224
+ | Form | Meaning |
225
+ | ----------------- | ------------------------------------------------------------------------------- |
226
+ | `[lo, hi]` | Boundaries at the reference `eps`. The common form. |
227
+ | `{ lo, hi, eps }` | Boundaries plus a render curvature for this scheme. Advanced. |
228
+ | `false` | The full range `[0, 100]` at the reference `eps`: no boundaries, same tone curve. |
229
+
230
+ Endpoints clamp to 0–100. A value that is none of the three forms (`null`
231
+ included), a window with `lo` above `hi` or a non-finite endpoint, and an `eps`
232
+ outside `(0, 1e6]` all throw instead of quietly inverting or breaking the
233
+ scale. The `eps` cap is numerical: the transfer divides by
234
+ `ln(1 + eps) - ln(eps)`, which loses precision as `eps` grows and cancels to 0
235
+ (`NaN` tones) from about 1e15, while past about 1e3 the curve is already linear
236
+ in luminance. The rules are in
237
+ [Configuration](./reference/configuration.md#tone-windows).
238
+
239
+ ### Calibrated defaults
240
+
241
+ | | `lightTone` | `darkTone` |
242
+ | ---------- | ----------: | ---------: |
243
+ | `lo` | 10 | 15 |
244
+ | `hi` | 100 | 95 |
245
+ | `eps` | 0.05 | 0.05 |
246
+ | Tone range | 4.95–100 | 9.25–95.9 |
247
+
248
+ The floors keep mapped tones off pure black in both schemes (OKHSL lightness 10
249
+ in light, 15 in dark), and the dark ceiling keeps them short of white at
250
+ lightness 95. `eps` is pinned to the reference 0.05 so the axis stays
251
+ WCAG-uniform inside the window. Because the remap is linear in tone, it scales
252
+ distances between absolute tones uniformly: about 95% of the authored distance
253
+ in light and 86.6% in dark.
254
+
255
+ <SchemeRamp
256
+ caption="Authored tones 0 to 100 (mode 'auto') resolved in every scheme. Each label is the tone Glaze stores. Light compresses into 4.95–100; dark inverts, then compresses into 9.25–95.9; high contrast uses the full range."
257
+ />
258
+
259
+ ### High contrast uses the full range
260
+
261
+ High-contrast variants run the same math with the window forced to the full
262
+ range `[0, 100]`, keeping the window's `eps`. There is no separate high-contrast
263
+ curve and no fitted dark curve.
264
+
265
+ ### Manual contrast level
266
+
267
+ A [manual contrast level](./reference/contrast.md#manual-contrast-level) generalizes that bypass
268
+ continuously. With `contrastLevel: L` and `f = L / 100`, each boundary moves
269
+ toward the full range instead of jumping to it:
270
+
271
+ ```text
272
+ lo(f) = lo + (0 - lo) * f
273
+ hi(f) = hi + (100 - hi) * f
274
+ ```
275
+
276
+ The light default walks `[10, 100] → [0, 100]` and the dark default
277
+ `[15, 95] → [0, 100]`; at level 50 they are `[5, 100]` (tone 1.63–100) and
278
+ `[7.5, 97.5]` (tone 3.15–97.97). The render `eps` is not interpolated, and a
279
+ `false` window is already the full range, so it is level-invariant.
280
+
281
+ The continuous form applies to the normal variants only. High-contrast variants
282
+ are already at the full range, so the level does not widen them further: the
283
+ bypass is what keeps the high-contrast tier independent of the level. The level
284
+ itself is covered in
285
+ [Light, dark, and high contrast](./schemes.mdx#manual-contrast-level).
286
+
287
+ ## Reference and render epsilon
288
+
289
+ Two `eps` values play separate roles:
290
+
291
+ - **Reference eps** — `REF_EPS = 0.05`, fixed. It defines the OKHST color
292
+ space and Glaze's canonical tone. `okhst()` input, `{ h, s, t }` input, the
293
+ stored `ResolvedColorVariant.t`, tone deltas, and the contrast solver all use
294
+ it, which keeps tone comparable between schemes.
295
+ - **Render eps** — the `eps` of an object tone window. A per-scheme curvature
296
+ control that only changes how authored tone maps through that scheme's
297
+ window. It defaults to the reference value, so by default the two coincide.
298
+
299
+ When a window's `eps` differs from the reference, Glaze maps with it to land a
300
+ final OKHSL lightness, then stores `toTone(l, REF_EPS)`, so deltas and contrast
301
+ calculations stay on the reference scale. For example,
302
+ `lightTone: { lo: 10, hi: 100, eps: 0.2 }` stores authored tone 50 at 63.89
303
+ instead of 52.47: mid tones bend lighter. Most palettes should keep the default.
304
+
305
+ ## The scheme pipeline
306
+
307
+ A regular color's tone goes through one pipeline per scheme:
308
+
309
+ ```text
310
+ authored tone T (0–100)
311
+ -> adaptation mode
312
+ auto + dark invert: T' = 100 - T
313
+ light / fixed keep: T' = T
314
+ static identity; skip the window
315
+ -> remap into the scheme's tone window (full range for high contrast)
316
+ -> render curvature (window eps) -> OKHSL lightness l
317
+ -> store canonical tone t = toTone(l, REF_EPS) / 100
318
+ // variant { h, s, t, alpha }, t on 0–1
319
+ -> at the rendering edge only:
320
+ fromTone(100 * t) -> l -> sRGB / luminance
321
+ optional: a contrast floor searches tone and overrides t
322
+ ```
323
+
324
+ ### Adaptation modes
325
+
326
+ The first step is the color's `mode`. Use `auto` for surfaces and foregrounds
327
+ that should trade places between light and dark, `fixed` for brand fills and
328
+ inverse surfaces that should stay on the same side of the scale, and `static`
329
+ for colors that must not adapt.
330
+ [Light, dark, and high contrast](./schemes.mdx#adaptation-modes) has the full
331
+ table and shows each mode side by side.
332
+
333
+ **Dark tone inversion is not `autoFlip`.** Inversion is ordinary scheme
334
+ adaptation, controlled by `mode`. `autoFlip` solves a different, local problem:
335
+ it may mirror a tone delta that overshoots `[0, 100]` to the other side of its
336
+ base, or let the contrast solver try the opposite side of a base.
337
+
338
+ ### Hue and saturation pass through
339
+
340
+ Tone is the only channel OKHST adapts across schemes; `h` and `s` are authoring
341
+ inputs that pass through the tone transfer untouched. The one automatic
342
+ adjustment is `darkDesaturation`, which dark schemes apply to every color except
343
+ `static` ones. A theme, or a single color, can seed a different hue and
344
+ saturation for the dark schemes with `darkHue` / `darkSaturation`; those pick the
345
+ `h` and `s` that enter the pipeline and never change how tone is transferred.
346
+ An authored dark saturation replaces the `darkDesaturation` step instead of
347
+ stacking with it: a color's own `darkSaturation` always does, and the theme's
348
+ seed does for every color that reads it. A `from` color with no `saturation` of
349
+ its own starts from the literal's saturation rather than the seed, so it keeps
350
+ the step. `static` colors ignore all of it. The rules are in
351
+ [Light, dark, and high contrast](./schemes.mdx#dark-seed) and
352
+ [Color definitions](./reference/color-definitions.md#dark-seed-darkhue--darksaturation).
353
+
354
+ ## Tone values
355
+
356
+ A color's `tone` takes one of three kinds of value. The full syntax, including
357
+ `[normal, highContrast]` pairs, is in
358
+ [Color definitions](./reference/color-definitions.md#tone-values).
359
+
360
+ ```ts
361
+ import { glaze } from '@tenphi/glaze';
362
+
363
+ const theme = glaze(280, 30);
364
+
365
+ theme.colors({
366
+ surface: { tone: 97 }, // absolute
367
+ border: { base: 'surface', tone: '-8' }, // tone delta
368
+ deep: { tone: 'min' }, // extreme
369
+ ink: { base: 'surface', tone: 'min' }, // extreme anchored to a base
370
+ });
371
+ ```
372
+
373
+ ### Absolute tone
374
+
375
+ A number places a color on the 0–100 scale independently of every other color.
376
+ Each scheme maps it through the pipeline above, so the stored tone is not the
377
+ authored one: `surface: { tone: 97 }` is stored as 97.15 in light and, inverted
378
+ to 3 and mapped into the dark window, as 11.85 in dark. A dependent color (one
379
+ with a `base`) can still take an absolute tone; it is then mapped on its own and
380
+ the base only matters to a `contrast` floor.
381
+
382
+ ### Tone deltas
383
+
384
+ A signed string is a **tone delta**: the signed difference between a dependent
385
+ color and its base.
386
+
387
+ ```ts
388
+ border: { base: 'surface', tone: '-8' }
389
+ ```
390
+
391
+ How the delta travels depends on the dependent color's `mode`:
392
+
393
+ - **`fixed` and `static` in every scheme, and `auto` in the light schemes:**
394
+ the delta is applied to the base's resolved tone in that scheme, sign
395
+ preserved. It is an exact tone step, so for neutrals it is an exact contrast
396
+ step.
397
+ - **`auto` in the dark schemes:** the delta is added to the base's **anchor**
398
+ — where the base sits on the authored scale, the tone its own dark variant is
399
+ the inversion of — and the result is inverted and mapped through the dark
400
+ window like an absolute tone. Order and direction carry over — text that
401
+ sits below its surface in light sits above it in dark.
402
+
403
+ The anchor depends on how the base got its tone, and the same rules hold in
404
+ both dark passes:
405
+
406
+ - An `auto` base placed by a tone (a number, a `from` color, an extreme with
407
+ no base) anchors at its authored tone, and an `auto` tone delta at its base's
408
+ anchor plus the delta, so a chain steps evenly. An `auto` color with no
409
+ `tone` or `contrast` of its own anchors at its base's anchor.
410
+ - Any other base, whose dark tone is not the inversion of an authored one — a
411
+ `fixed` or `static` color, an `auto` contrast-solved color, an `auto` extreme
412
+ on a base, a mix — anchors at its own dark tone read back through the dark
413
+ window (the window remap run backwards, then un-inverted), so a dependent
414
+ follows where the base lands in dark.
415
+
416
+ On every base, the step is then the dark window's scale times the delta at the
417
+ reference dark `eps`, 86.6% of the authored delta at the default windows. A
418
+ tone-50 base steps `'+4'` to −3.5 and `'-4'` to +3.5, and a `'-4'` hover on an
419
+ AAA-solved button steps +3.5 too. A custom dark `eps` bends the dark window's
420
+ curve, so a dark delta lands where the same authored tone would instead of at a
421
+ fixed scale. In dark high contrast the window is the full range, so at the
422
+ reference dark `eps` the step is exact, only mirrored, wherever it fits on the
423
+ scale (limits below). The anchor is the authored position, not the base's light
424
+ high-contrast tone, so a custom light `eps`, which moves that tone (lighter
425
+ above the reference 0.05, darker below), doesn't change the step away from the
426
+ ends.
427
+
428
+ Order carries over only when the base inverts too. An `auto` delta on a
429
+ `fixed` or `static` base inverts on its own while the base does not (it keeps
430
+ its side, or, as a `fixed` delta, rides its own base into dark), so it mirrors
431
+ to the other side of the base in dark: a `'+30'` label on a `fixed` tone-52
432
+ fill sits 30 tones above it in light and 26.0 below it in dark. Make such a
433
+ dependent `fixed` as well when it should keep its side.
434
+
435
+ If `base + delta` overshoots `[0, 100]`, `autoFlip` (on by default) mirrors the
436
+ delta to the other side of the base; if the mirror overshoots too, or `autoFlip`
437
+ is off, the delta clamps on its authored side. Under `auto` the flip is decided
438
+ on the light tones, and dark mirrors the side light took. Dark then steps on
439
+ the authored scale, which adds two limits there:
440
+
441
+ - A step that fits from the base's light tone can still run past 0 or 100
442
+ from the anchor. In dark it then stops at the dark window's edge. The light
443
+ window lifts authored tone 0 to 4.95, so an `auto` base placed by a tone
444
+ meets this at the bottom: `'-4'` steps about +1.7 on a tone-2 base and not
445
+ at all on a tone-0 one. A base anchored at its own dark tone can meet it at
446
+ either end. In `glaze(280, 40)`, `contrast: 12` text on a tone-97 surface
447
+ sits at 15.6 in light but anchors at 2.7, so a `'-4'` hover on it steps
448
+ +2.3 in dark, not +3.5.
449
+ - An anchor past the dark window — a base a contrast floor or an extreme pushed
450
+ beyond its edge, or a `fixed` delta riding its base there — is stepped from
451
+ where it sits. A step back toward the window moves by the full scaled delta;
452
+ one further out stops at the window edge or the base, whichever is further
453
+ out.
454
+
455
+ High contrast's windows are the full range, and at the reference light `eps`
456
+ the light one is the identity, so an `auto` base placed by a tone flips the
457
+ same way in both high-contrast schemes and its step fits. The first limit
458
+ still applies there under a custom light `eps`, and to a base anchored at its
459
+ own dark tone.
460
+
461
+ ### Extremes: `'max'` and `'min'`
462
+
463
+ `'max'` is author tone 100 and `'min'` is author tone 0. They select the
464
+ corresponding end of the scheme without a magic number.
465
+
466
+ - **Without a base,** an extreme flows through the pipeline like any absolute
467
+ tone: it lands on the window edge and, under `auto`, inverts in dark — `'min'`
468
+ is the darkest color in light and the lightest in dark. Use `fixed` to keep the
469
+ same end without inverting, or `static` to pin one tone everywhere.
470
+ - **With a base,** the dark scheme takes a different path. The windows are
471
+ asymmetric, so running the extreme through the dark window would squeeze the
472
+ span between it and its base and cost contrast. Instead Glaze measures the
473
+ tone shift the light scheme produced between the base and the extreme, then
474
+ replays it against the base's resolved dark tone: mirrored under `auto` (both
475
+ ends invert), same-signed under `fixed`. Only `[0, 100]` clamping applies, so
476
+ the color may render past the dark window's edge — on purpose, since you asked
477
+ for the extreme. When the shift does not fit, the color pins at tone 100 or 0.
478
+ `static` colors are unaffected. High-contrast variants follow the same rule,
479
+ but their window is already the full range, so the replay matches the plain
480
+ mapping unless the base itself sits asymmetrically across schemes. With a
481
+ `contrast` floor, an anchored extreme's starting tone is not clamped back
482
+ into the scheme window.
483
+
484
+ ```ts
485
+ const neutral = glaze(0, 0);
486
+
487
+ neutral.colors({
488
+ bg: { tone: 60 },
489
+ fg: { base: 'bg', tone: 'max' },
490
+ });
491
+ // light: bg 62.0, fg 100.0 (shift +38.0, 3.18:1)
492
+ // dark: bg 43.9, fg 5.9 (shift -38.0, 3.18:1)
493
+ ```
494
+
495
+ A root `tone: 'max'` in the same theme lands at the dark window's edge,
496
+ tone 9.25, and drops to 2.87:1 against `bg` in dark.
497
+
498
+ ### All three, light to dark
499
+
500
+ <Example
501
+ hue={280}
502
+ saturation={30}
503
+ colors={{
504
+ surface: { tone: 97 },
505
+ border: { base: 'surface', tone: '-8' },
506
+ text: { base: 'surface', tone: '-60' },
507
+ deep: { tone: 'min' },
508
+ ink: { base: 'surface', tone: 'min' },
509
+ }}
510
+ visual="none"
511
+ />
512
+
513
+ <ToneLadder
514
+ hue={280}
515
+ saturation={30}
516
+ colors={{
517
+ surface: { tone: 97 },
518
+ border: { base: 'surface', tone: '-8' },
519
+ text: { base: 'surface', tone: '-60' },
520
+ deep: { tone: 'min' },
521
+ ink: { base: 'surface', tone: 'min' },
522
+ }}
523
+ base="surface"
524
+ schemes={['light', 'dark', 'lightContrast', 'darkContrast']}
525
+ caption="Each chip shows the stored tone, the tone difference from surface, and the measured WCAG ratio against it. In dark, the deltas shrink with the window (−8 becomes +6.9, −60 becomes +52.0), deep stops at the window edge, and ink replays its full light span past it, clamped at 100. In high contrast the window is the full range and the deltas are exact."
526
+ />
527
+
528
+ The `text` color above has no contrast floor, so its ratio follows its tone
529
+ step: 6.29:1 in light and 4.85:1 in dark. Add `contrast` when the measured
530
+ ratio matters.
531
+
532
+ ## Contrast floors and verification
533
+
534
+ Tone is the contrast solver's search axis because it is contrast-uniform: the
535
+ search converges quickly and WCAG gets a closed-form first probe. But Glaze
536
+ never assumes a chromatic color has the luminance of the gray at its tone. It
537
+ measures the real color.
538
+
539
+ `contrast` takes one spec with a pluggable metric: a WCAG ratio (a bare number,
540
+ a preset such as `'AA'`, or `{ wcag }`) or an APCA Lc target (`{ apca }`).
541
+ Forms, presets, roles, and high-contrast escalation are covered in
542
+ [Contrast solving](./contrast.mdx) and
543
+ [Contrast and high contrast](./reference/contrast.md).
544
+
545
+ ### How a floor is solved
546
+
547
+ For a color with `base` and `contrast`, in each scheme Glaze:
548
+
549
+ 1. resolves the base and the color's preferred tone for that scheme, clamped
550
+ into the scheme's tone window (anchored extremes excepted);
551
+ 2. measures the requested WCAG ratio or APCA Lc at the preferred tone, using the
552
+ color's real hue and saturation — if it already clears the floor with a
553
+ small margin (×1.01 for a WCAG ratio, +0.5 Lc for APCA, to absorb rounding
554
+ in the output formats), the tone is kept (`contrast` is a floor, not a
555
+ target); a preferred tone that clears the floor but not the margin is also
556
+ kept, and counts as met, when no searched side meets the floor (white text
557
+ at tone 100 has nowhere further to go);
558
+ 3. otherwise searches tone. For WCAG the search first measures the gray tone
559
+ whose luminance hits the ratio exactly — `Y = R * (Y_base + 0.05) - 0.05`
560
+ on the lighter side, `(Y_base + 0.05) / R - 0.05` on the darker — which
561
+ only narrows where the binary search against the measured chromatic
562
+ luminance looks, so a chromatic color still lands on its own crossing. For
563
+ APCA it binary-searches against the Lc target directly. The search covers
564
+ the full 0–100 range, so a demanding floor can push a color past the
565
+ window, and it aims for the same margin past the target;
566
+ 4. warns when the target is physically unreachable in the scheme.
567
+
568
+ ```ts
569
+ import { glaze } from '@tenphi/glaze';
570
+
571
+ const theme = glaze(150, 90);
572
+
573
+ theme.colors({
574
+ surface: { tone: 97, saturation: 0 },
575
+ // 49.4 tones below the surface: exactly 4.5:1 for a neutral
576
+ 'step-text': { base: 'surface', tone: '-49.4' },
577
+ // Same starting tone, but the solver measures the real color
578
+ 'floor-text': { base: 'surface', tone: '-49.4', contrast: 'AA' },
579
+ });
580
+ ```
581
+
582
+ <FloorCompare
583
+ hues={[25, 110, 150, 265, 320]}
584
+ caption="Light scheme. Each row is one hue at the neutral AA distance below a neutral surface, without and with contrast: 'AA'. Hues that read lighter than their tone fall short and are moved darker; hues that read darker already pass and keep their tone. The neutral is nudged just past 4.5:1 by the search overshoot."
585
+ />
586
+
587
+ ### APCA
588
+
589
+ `apcaContrast(yText, yBg)` implements APCA-W3 0.1.9 (simplified SAPC): a
590
+ soft clamp for low luminances and separate exponents for normal and reverse
591
+ polarity, returning a signed Lc whose magnitude the solver compares with the
592
+ target. Its inputs are APCA **screen luminances** over the gamma-encoded sRGB
593
+ channels, not WCAG relative luminance:
594
+
595
+ ```text
596
+ Ys = 0.2126 * R^2.4 + 0.7152 * G^2.4 + 0.0722 * B^2.4
597
+ ```
598
+
599
+ The soft-clamp constants are calibrated against `Ys`, so the solver feeds APCA
600
+ that basis. The function it uses is exported as
601
+ [`apcaLuminanceFromLinearRgb`](./reference/utilities.md#luminance-and-contrast),
602
+ so `apcaContrast` over its output reproduces the solver's own Lc. The
603
+ implementation omits APCA's font-size lookup that maps an Lc to
604
+ a usable text size.
605
+
606
+ ### The drift check
607
+
608
+ After all four scheme passes, Glaze verifies every color that has a `base` and
609
+ a `contrast` floor. It re-measures the color against its base in each scheme, in
610
+ the floor's own metric (APCA screen luminance for APCA, WCAG luminance for
611
+ WCAG) and with each variant's own `pastel` flag, and emits a `console.warn` when
612
+ the result drifts below the target by more than a small slack: 2% of a WCAG
613
+ ratio, or 1.5 Lc. It skips a scheme where the solver couldn't reach the floor,
614
+ which already has the solver's "cannot meet" warning with the same measured
615
+ value, and an achromatic color (saturation 0), whose luminance is exactly its
616
+ tone's. Because the solver already measures the real chromatic color, a floor
617
+ it meets passes this check, so in practice the advisory stays silent; it
618
+ remains as a safety net for the chromatic approximation. Warnings are
619
+ deduplicated through a 256-key session cache that starts over when full. Both
620
+ warnings are listed in [Configuration](./reference/configuration.md#warnings).
621
+
622
+ ## Input and output
623
+
624
+ Glaze parses OKHST wherever it takes a color value — `glaze.color()`, a color
625
+ definition's `from`, and the `bg` / `fg` of the standalone `glaze.shadow()` /
626
+ `glaze.glow()`:
627
+
628
+ ```ts
629
+ import { glaze } from '@tenphi/glaze';
630
+
631
+ glaze.color('okhst(152 95% 70%)');
632
+ glaze.color({ h: 152, s: 0.95, t: 0.7 });
633
+ ```
634
+
635
+ Both value forms reproduce the color exactly in the light scheme. The
636
+ structured form `glaze.color({ hue: 152, saturation: 95, tone: 70 })` is
637
+ different: its `tone` is an authored tone on the 0–100 scale, mapped through the
638
+ light window like a theme color, so it renders at tone 71.48. See
639
+ [Color tokens](./reference/color-tokens.md#glazecolorinput).
640
+
641
+ There is no native CSS `okhst()` function, so native exports use `oklch`,
642
+ `rgb`, or `hsl`. [Tasty](https://tasty.style) can consume Glaze's custom
643
+ serialization, so `tasty()` accepts `format: 'okhst'`, as does `glaze.format()`
644
+ for a single variant. `tokens()`, `json()`, `css()`, and `tailwind()` throw and
645
+ name a native format instead; the DTCG exports pick a color space of their own.
646
+
647
+ ```ts
648
+ const theme = glaze(280, 30);
649
+
650
+ theme.colors({ surface: { tone: 97 } });
651
+ theme.tasty({ format: 'okhst' });
652
+ // {
653
+ // '#surface': {
654
+ // '': 'okhst(280 30% 97.15%)',
655
+ // '@media(prefers-color-scheme: dark)': 'okhst(280 27% 11.85%)',
656
+ // },
657
+ // }
658
+ ```
659
+
660
+ The color formats are listed in
661
+ [Output formats](./reference/output.md#color-formats); `toTone`, `fromTone`,
662
+ `toneFromY`, `yFromTone`, `okhstToOkhsl`, `okhslToOkhst`, `variantToOkhsl`, and
663
+ `REF_EPS` are exported for your own math (see
664
+ [Utilities](./reference/utilities.md#okhst-tone-utilities)).
665
+
666
+ ## Bringing existing colors into Glaze
667
+
668
+ When you move raw CSS colors or design tokens into Glaze, preserve the source
669
+ colors first: `glaze.fromHex()` and `glaze.fromRgb()` seed a theme from a
670
+ color, `glaze.color()` takes any color value, and a color definition's `from`
671
+ places a literal color inside a theme. Then replace one-off values with root
672
+ tones, tone deltas, and contrast floors as the relationships become clear.
673
+
674
+ To carry an OKHSL lightness `L` (0–100) over as a tone, convert it with
675
+ `toTone(L / 100)`; the two are not the same number. That tone is still an
676
+ authored tone, so the light window remaps it and it renders slightly lighter:
677
+ `L` 20 becomes tone 14.36 and renders at lightness 23.8. To keep a source color
678
+ exact in light, place it with `from`, which skips the light window, or turn the
679
+ window off with `lightTone: false`. The full workflow is in
680
+ [Migration and upgrading](./migration.md#migrating-from-an-existing-color-system).