@tenphi/glaze 0.12.0 → 0.14.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/README.md +12 -10
- package/dist/index.cjs +980 -574
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +323 -193
- package/dist/index.d.mts +323 -193
- package/dist/index.mjs +970 -574
- package/dist/index.mjs.map +1 -1
- package/docs/api.md +300 -165
- package/docs/methodology.md +64 -54
- package/docs/migration.md +81 -10
- package/docs/okhst.md +224 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,8 +20,9 @@ Glaze generates robust **light**, **dark**, and **high-contrast** color schemes
|
|
|
20
20
|
|
|
21
21
|
## Features
|
|
22
22
|
|
|
23
|
-
- **
|
|
24
|
-
- **WCAG 2 contrast solving** — automatic
|
|
23
|
+
- **OKHST color space** — OKHSL with a contrast-uniform **tone** axis (equal tone steps give equal contrast). See [`docs/okhst.md`](docs/okhst.md).
|
|
24
|
+
- **WCAG 2 + APCA contrast solving** — automatic tone adjustment to meet a WCAG ratio or APCA Lc floor
|
|
25
|
+
- **Unified dark mode** — one tone space for light, dark, and high-contrast; dark is a single `100 − t` inversion, no fitted curve
|
|
25
26
|
- **Mix colors** — blend two colors with OKHSL or sRGB interpolation, opaque or transparent, with optional contrast solving
|
|
26
27
|
- **Shadow colors** — OKHSL-native shadow computation with automatic alpha, fg/bg tinting, and per-scheme adaptation
|
|
27
28
|
- **Light + Dark + High-Contrast** — all schemes from one definition
|
|
@@ -56,11 +57,11 @@ import { glaze } from '@tenphi/glaze';
|
|
|
56
57
|
const primary = glaze(280, 80);
|
|
57
58
|
|
|
58
59
|
primary.colors({
|
|
59
|
-
surface: {
|
|
60
|
-
text: { base: 'surface',
|
|
61
|
-
border: { base: 'surface',
|
|
62
|
-
'accent-fill': {
|
|
63
|
-
'accent-text': { base: 'accent-fill',
|
|
60
|
+
surface: { tone: 97, saturation: 0.75 },
|
|
61
|
+
text: { base: 'surface', tone: '-52', contrast: 'AAA' },
|
|
62
|
+
border: { base: 'surface', tone: ['-7', '-20'], contrast: 'AA-large' },
|
|
63
|
+
'accent-fill': { tone: 52, mode: 'fixed' },
|
|
64
|
+
'accent-text': { base: 'accent-fill', tone: 'max', mode: 'fixed' },
|
|
64
65
|
'shadow-md': { type: 'shadow', bg: 'surface', fg: 'text', intensity: 10 },
|
|
65
66
|
});
|
|
66
67
|
|
|
@@ -80,9 +81,10 @@ const tokens = palette.tokens();
|
|
|
80
81
|
## Concepts at a glance
|
|
81
82
|
|
|
82
83
|
1. **Theme = one hue/saturation seed.** Status themes are siblings created via `extend()` — they inherit every color definition and only swap the seed.
|
|
83
|
-
2. **Every color is explicit.** A color is either a *root* (absolute `
|
|
84
|
-
3. **
|
|
85
|
-
4.
|
|
84
|
+
2. **Every color is explicit.** A color is either a *root* (absolute `tone`, or `'max'`/`'min'` for an extreme) or *dependent* (`base` + relative offset and/or `contrast`). No implicit roles.
|
|
85
|
+
3. **Tone is contrast-uniform.** `tone` (0–100) replaces OKHSL lightness: equal tone steps give equal WCAG contrast, so ramps are even by construction. See [`docs/okhst.md`](docs/okhst.md).
|
|
86
|
+
4. **`contrast` is a floor, not a target.** A bare number/preset is WCAG; `{ wcag }` / `{ apca }` selects the metric. The solver only shifts a color's tone when the requested position fails the requested floor.
|
|
87
|
+
5. **Light, dark, and high-contrast come from one definition.** `mode` (`auto` / `fixed` / `static`) picks how each color adapts; `tone` / `contrast` / `intensity` / `value` accept an optional `[normal, hc]` pair for explicit high-contrast tuning.
|
|
86
88
|
|
|
87
89
|
## Documentation
|
|
88
90
|
|