tyrell-components 1.0.0-TC22 → 1.0.0-TC23

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 (9) hide show
  1. package/css/tyrell-brand.css +359 -213
  2. package/dist/tyrell-brand.css +359 -213
  3. package/dist/tyrell.js +1 -1
  4. package/lib/styles/button.d.ts +1 -1
  5. package/lib/styles/button.d.ts.map +1 -1
  6. package/lib/styles/button.js +1 -1
  7. package/lib/version.d.ts +1 -1
  8. package/lib/version.js +1 -1
  9. package/package.json +1 -1
package/css/tyrell-brand.css CHANGED
@@ -12,79 +12,122 @@
12
12
  * --ty-brand-chroma: 0.13;
13
13
  * }
14
14
  *
15
- * Primary, secondary, neutral, surfaces, inputs, solid buttons all retint.
16
- * Success / danger / warning stay semantic (green / red / amber) — override
17
- * their *-hue/*-chroma seeds if you want them to follow the brand too.
15
+ * =====================================================================
16
+ * THE FORMULA
17
+ * =====================================================================
18
+ *
19
+ * Every color in the library is one formula on five axes:
20
+ *
21
+ * oklch(
22
+ * L = L-curve[shade] × flavor-l-factor ← Tier 3 × Tier 5
23
+ * C = flavor-chroma × saturation-curve[shade] ← Tier 2 × Tier 4
24
+ * H = flavor-hue ← Tier 2
25
+ * )
26
+ *
27
+ * Pick a flavor (primary / secondary / success / warning / danger /
28
+ * neutral). Pick a shade (strong / bold / base / soft / faint). That's
29
+ * the cell; the formula gives you its color.
30
+ *
31
+ * FLAVOR axis — which semantic role (carries its own hue, chroma,
32
+ * l-factor seeds)
33
+ * SHADE axis — 5 emphasis stops shared across flavors
34
+ * (strong / bold / base / soft / faint)
35
+ * HUE axis — what color family (0°–360°)
36
+ * CHROMA axis — how saturated (0 = grey, ~0.4 = max vivid)
37
+ * L axis — how dark or light (0 = black, 1 = white)
38
+ * Light mode: low L = more emphasis.
39
+ * Dark mode: high L = more emphasis (curve flips).
40
+ *
41
+ * Worked example — `--ty-color-warning-bold` in LIGHT mode:
18
42
  *
19
- * Three layers of knobs you can override at :root (or html.dark for
20
- * per-mode tuning):
43
+ * L = 0.46 × 1 = 0.46 ← l-bold × warning-l-factor
44
+ * C = 0.26 × 1.00 = 0.26 ← warning-chroma × c-bold-mult
45
+ * H = 75° ← warning-hue
46
+ * → oklch(0.46 0.26 75) (a punchy amber for +1 emphasis text)
21
47
  *
22
- * 1. SEEDS — per-flavor hue + chroma.
23
- * --ty-brand-hue, --ty-brand-chroma
24
- * --ty-secondary-hue, --ty-secondary-chroma (default: brand + 60°)
25
- * --ty-success-hue, --ty-success-chroma (default: 145°)
26
- * --ty-danger-hue, --ty-danger-chroma (default: 25°)
27
- * --ty-warning-hue, --ty-warning-chroma (default: 75°)
28
- * --ty-neutral-hue, --ty-neutral-chroma (default: brand-hue, 0.005)
48
+ * Want warning a notch darker without touching anything else? Set
49
+ * `--ty-warning-l-factor: 0.85` and the new L becomes 0.46 × 0.85 =
50
+ * 0.39. Every warning shade shifts in step; primary / success / danger
51
+ * are untouched.
29
52
  *
30
- * 2. L-CURVE — lightness stops shared by every flavor.
31
- * --ty-l-strong, --ty-l-bold, --ty-l-base, --ty-l-soft, --ty-l-faint
32
- * --ty-l-bg-base, --ty-l-bg-bold, --ty-l-bg-soft
33
- * Defaults in `:root` are tuned for light mode (lower L = more
34
- * emphasis). The `html.dark` block redefines them with inverted
35
- * values. Override either block to compress / expand the ladder.
53
+ * =====================================================================
54
+ * FILE LAYOUT
55
+ * =====================================================================
36
56
  *
37
- * 3. SATURATION CURVE — chroma multipliers per shade.
38
- * --ty-c-strong-mult, --ty-c-bold-mult, --ty-c-base-mult,
39
- * --ty-c-soft-mult, --ty-c-faint-mult
40
- * --ty-c-bg-base-mult, --ty-c-bg-bold-mult, --ty-c-bg-soft-mult
41
- * Multiplied against the flavor chroma seed. Bump --ty-c-bold-mult
42
- * to 1.2 to make `+`-emphasis text more saturated; drop
43
- * --ty-c-faint-mult to 0.2 for whisper-quiet placeholders.
57
+ * SECTION 1 — KNOBS (~lines 80–225)
58
+ * The variables you might want to override. Five tiers from drop-in
59
+ * rebrand (Tier 1) to surgical per-flavor tweak (Tier 5).
60
+ *
61
+ * SECTION 2 — IMPLEMENTATION
62
+ * The oklch() expressions that wire the knobs through to the actual
63
+ * color tokens. Rarely needs editing — Section 1 is the contract.
44
64
  *
45
65
  * Browser support: OKLCH is in every evergreen browser since mid-2023.
46
66
  *
47
67
  * ===================================================================== */
48
68
 
69
+ /* =====================================================================
70
+ * SECTION 1 — KNOBS
71
+ * =====================================================================
72
+ *
73
+ * Five tiers, ordered by how often you'd touch them. Override any of
74
+ * these in your own `:root` (or `html.dark` for per-mode tuning) —
75
+ * your declaration wins by source order.
76
+ *
77
+ * Tier 1 — SEEDS brand-hue + chroma. Rebrand in 2 lines.
78
+ * Tier 2 — PER-FLAVOR ANCHORS each flavor's hue + chroma.
79
+ * Tier 3 — L-CURVE 5 lightness stops for the emphasis ramp.
80
+ * Tier 4 — SATURATION CURVE per-shade chroma multipliers.
81
+ * Tier 5 — PER-FLAVOR L-FACTOR per-flavor lightness multiplier — push
82
+ * one flavor up or down without touching
83
+ * the others. Default 1.
84
+ * ===================================================================== */
85
+
49
86
  :root {
50
87
  /* ----------------------------------------------------------------
51
- * SEEDS
88
+ * Tier 1 — SEEDS
89
+ * Brand-hue + chroma drive primary, neutral, surfaces, inputs,
90
+ * solid buttons. One slider rebrands the page.
52
91
  * --------------------------------------------------------------*/
53
92
 
54
93
  --ty-brand-hue: 230;
55
94
  --ty-brand-chroma: 0.13;
56
95
 
57
- /* Every flavor's chroma tracks --ty-brand-chroma by default, at a
58
- * proportion that preserves the relative saturation hierarchy (danger
59
- * punchier than primary, neutral near-grey). Drag --ty-brand-chroma to
60
- * 0 → everything goes greyscale; push to 0.30 → everything goes vibrant.
61
- *
62
- * Pin any flavor independently by setting --ty-{flavor}-chroma to a
63
- * literal number (e.g. --ty-success-chroma: 0.14;). The multiplier
64
- * relationship breaks for that one flavor only. */
65
-
66
- /* Secondary rotates from brand by an exposed offset. Defaults to +60°
96
+ /* Secondary rotates from brand by an exposed offset. Default +60°
67
97
  * (sibling accent). Try 30° for a close sibling, 120° for triadic,
68
- * 180° for complement. Set --ty-secondary-hue to a literal number to
69
- * detach completely. */
98
+ * 180° for complement. Set --ty-secondary-hue to a literal number
99
+ * to detach completely. */
70
100
  --ty-secondary-offset: 60;
101
+
102
+ /* ----------------------------------------------------------------
103
+ * Tier 2 — PER-FLAVOR ANCHORS
104
+ * Semantic colors (success/warning/danger/neutral) have their own
105
+ * hue + chroma seeds so they keep meaning across brand changes.
106
+ * Override any individually:
107
+ * --ty-success-hue: 160; (more teal)
108
+ * --ty-warning-chroma: 0.2; (more vivid)
109
+ * --------------------------------------------------------------*/
110
+
71
111
  --ty-secondary-hue: calc(var(--ty-brand-hue) + var(--ty-secondary-offset));
72
112
  --ty-secondary-chroma: var(--ty-brand-chroma);
73
113
 
74
114
  --ty-success-hue: 145;
75
115
  --ty-success-chroma: calc(var(--ty-brand-chroma) * 1.08);
76
116
 
117
+ --ty-warning-hue: 75;
118
+ --ty-warning-chroma: calc(var(--ty-brand-chroma) * 2);
119
+
77
120
  --ty-danger-hue: 25;
78
121
  --ty-danger-chroma: calc(var(--ty-brand-chroma) * 1.31);
79
122
 
80
- --ty-warning-hue: 75;
81
- --ty-warning-chroma: calc(var(--ty-brand-chroma) * 1.15);
82
-
83
123
  --ty-neutral-hue: var(--ty-brand-hue);
84
124
  --ty-neutral-chroma: calc(var(--ty-brand-chroma) * 0.04);
85
125
 
86
126
  /* ----------------------------------------------------------------
87
- * L-CURVE — light mode. Lower L = more emphasis.
127
+ * Tier 3 — L-CURVE (light mode)
128
+ * 5 lightness stops per flavor for the emphasis ramp.
129
+ * Lower L = darker = more emphasis in light mode.
130
+ * Plus 3 bg L stops for the soft-tint backgrounds.
88
131
  * --------------------------------------------------------------*/
89
132
 
90
133
  --ty-l-strong: 0.38; /* ++ max emphasis */
@@ -98,8 +141,10 @@
98
141
  --ty-l-bg-soft: 0.98;
99
142
 
100
143
  /* ----------------------------------------------------------------
101
- * SATURATION CURVE — per-shade chroma multipliers.
102
- * Each shade's chroma = flavor-chroma × multiplier.
144
+ * Tier 4 — SATURATION CURVE
145
+ * Per-shade chroma multipliers. Each shade's chroma =
146
+ * flavor-chroma × multiplier. Drops near the extremes so
147
+ * near-white and near-black can hold their tint.
103
148
  * --------------------------------------------------------------*/
104
149
 
105
150
  --ty-c-strong-mult: 0.77;
@@ -112,80 +157,164 @@
112
157
  --ty-c-bg-bold-mult: 0.38;
113
158
  --ty-c-bg-soft-mult: 0.08;
114
159
 
115
- /* ================================================================
116
- * LIGHT MODE — derived tokens. The math is the same for every
117
- * flavor; only the seed (hue + chroma) differs.
118
- * ================================================================ */
160
+ /* ----------------------------------------------------------------
161
+ * Tier 5 — PER-FLAVOR L-FACTOR
162
+ * Multiplies the L-curve values for that flavor only. Default 1 =
163
+ * no change. Useful when one flavor's brand-default sits too close
164
+ * to brand-hue on the wheel and the buttons blend.
165
+ *
166
+ * Example: brand-hue: 47° (gold). Warning sits at 75° (amber).
167
+ * Both render as similar warm browns at brand-chroma. Drop warning
168
+ * a notch and it darkens enough to stand apart:
169
+ * --ty-warning-l-factor: 0.85;
170
+ *
171
+ * NOTE: the L-curve flips between light and dark mode, so a factor
172
+ * < 1 darkens in light mode but DIMS in dark mode. If you want
173
+ * symmetric "more emphatic" in both modes, set the factor here for
174
+ * light AND set its inverse (1 / factor, roughly) in `html.dark`.
175
+ * --------------------------------------------------------------*/
176
+
177
+ --ty-primary-l-factor: 1;
178
+ --ty-secondary-l-factor: 1;
179
+ --ty-success-l-factor: 1;
180
+ --ty-warning-l-factor: 1.15;
181
+ --ty-danger-l-factor: 1;
182
+ --ty-neutral-l-factor: 1;
183
+ }
184
+
185
+ /* Dark mode overrides for the L-curve and saturation curve. Tier 1 + 2
186
+ * seeds and Tier 5 L-factors carry through unchanged from :root. */
187
+ html.dark,
188
+ html[data-theme="dark"] {
189
+ /* Tier 3 dark — inverted curve. Higher L = lighter text = more
190
+ * emphasis on a dark background. */
191
+ --ty-l-strong: 0.86;
192
+ --ty-l-bold: 0.74;
193
+ --ty-l-base: 0.62;
194
+ --ty-l-soft: 0.46;
195
+ --ty-l-faint: 0.3;
196
+
197
+ --ty-l-bg-base: 0.22;
198
+ --ty-l-bg-bold: 0.26;
199
+ --ty-l-bg-soft: 0.19;
200
+
201
+ /* Tier 4 dark — dim shades hold more chroma so they don't grey out;
202
+ * strong shades trim chroma so bright tones don't over-pop. */
203
+ --ty-c-strong-mult: 0.77;
204
+ --ty-c-bold-mult: 1;
205
+ --ty-c-base-mult: 0.92;
206
+ --ty-c-soft-mult: 0.77;
207
+ --ty-c-faint-mult: 0.5;
208
+
209
+ --ty-c-bg-base-mult: 0.38;
210
+ --ty-c-bg-bold-mult: 0.54;
211
+ --ty-c-bg-soft-mult: 0.23;
212
+ }
213
+
214
+ /* =====================================================================
215
+ * SECTION 2 — IMPLEMENTATION
216
+ * =====================================================================
217
+ *
218
+ * The oklch() expressions that turn Section 1's knobs into the actual
219
+ * --ty-color-*, --ty-bg-*, --ty-border-*, --ty-surface-*, --ty-input-*,
220
+ * and --ty-solid-* tokens that components read.
221
+ *
222
+ * Pattern for each flavor's 5-shade fg ramp + 3-shade bg ramp:
223
+ *
224
+ * --ty-color-{flavor}-{shade}: oklch(
225
+ * calc(var(--ty-l-{shade}) * var(--ty-{flavor}-l-factor)) ← L
226
+ * calc(var(--ty-{flavor}-chroma) * var(--ty-c-{shade}-mult)) ← C
227
+ * var(--ty-{flavor}-hue) ← H
228
+ * );
229
+ *
230
+ * Computed tokens are declared in BOTH `:root` and `html.dark` blocks
231
+ * because tyrell.css ships hardcoded dark-mode hexes at html.dark
232
+ * specificity (0,1,1); our brand-layer `:root` (0,1,0) would lose
233
+ * source-order otherwise. Same math both blocks — just different L/C
234
+ * inputs from Tier 3/4.
235
+ * ===================================================================== */
236
+
237
+ :root {
238
+ /* ----------------------------------------------------------------
239
+ * Flavor color ramps (fg + bg + border)
240
+ * --------------------------------------------------------------*/
119
241
 
120
242
  /* Primary */
121
243
  --ty-color-primary-strong: oklch(
122
- var(--ty-l-strong) calc(var(--ty-brand-chroma) * var(--ty-c-strong-mult))
123
- var(--ty-brand-hue)
244
+ calc(var(--ty-l-strong) * var(--ty-primary-l-factor))
245
+ calc(var(--ty-brand-chroma) * var(--ty-c-strong-mult)) var(--ty-brand-hue)
124
246
  );
125
247
  --ty-color-primary-bold: oklch(
126
- var(--ty-l-bold) calc(var(--ty-brand-chroma) * var(--ty-c-bold-mult))
127
- var(--ty-brand-hue)
248
+ calc(var(--ty-l-bold) * var(--ty-primary-l-factor))
249
+ calc(var(--ty-brand-chroma) * var(--ty-c-bold-mult)) var(--ty-brand-hue)
128
250
  );
129
251
  --ty-color-primary: oklch(
130
- var(--ty-l-base) calc(var(--ty-brand-chroma) * var(--ty-c-base-mult))
131
- var(--ty-brand-hue)
252
+ calc(var(--ty-l-base) * var(--ty-primary-l-factor))
253
+ calc(var(--ty-brand-chroma) * var(--ty-c-base-mult)) var(--ty-brand-hue)
132
254
  );
133
255
  --ty-color-primary-soft: oklch(
134
- var(--ty-l-soft) calc(var(--ty-brand-chroma) * var(--ty-c-soft-mult))
135
- var(--ty-brand-hue)
256
+ calc(var(--ty-l-soft) * var(--ty-primary-l-factor))
257
+ calc(var(--ty-brand-chroma) * var(--ty-c-soft-mult)) var(--ty-brand-hue)
136
258
  );
137
259
  --ty-color-primary-faint: oklch(
138
- var(--ty-l-faint) calc(var(--ty-brand-chroma) * var(--ty-c-faint-mult))
139
- var(--ty-brand-hue)
260
+ calc(var(--ty-l-faint) * var(--ty-primary-l-factor))
261
+ calc(var(--ty-brand-chroma) * var(--ty-c-faint-mult)) var(--ty-brand-hue)
140
262
  );
141
263
  --ty-bg-primary: oklch(
142
- var(--ty-l-bg-base) calc(var(--ty-brand-chroma) * var(--ty-c-bg-base-mult))
264
+ calc(var(--ty-l-bg-base) * var(--ty-primary-l-factor))
265
+ calc(var(--ty-brand-chroma) * var(--ty-c-bg-base-mult))
143
266
  var(--ty-brand-hue)
144
267
  );
145
268
  --ty-bg-primary-bold: oklch(
146
- var(--ty-l-bg-bold) calc(var(--ty-brand-chroma) * var(--ty-c-bg-bold-mult))
269
+ calc(var(--ty-l-bg-bold) * var(--ty-primary-l-factor))
270
+ calc(var(--ty-brand-chroma) * var(--ty-c-bg-bold-mult))
147
271
  var(--ty-brand-hue)
148
272
  );
149
273
  --ty-bg-primary-soft: oklch(
150
- var(--ty-l-bg-soft) calc(var(--ty-brand-chroma) * var(--ty-c-bg-soft-mult))
274
+ calc(var(--ty-l-bg-soft) * var(--ty-primary-l-factor))
275
+ calc(var(--ty-brand-chroma) * var(--ty-c-bg-soft-mult))
151
276
  var(--ty-brand-hue)
152
277
  );
153
278
  --ty-border-primary: var(--ty-color-primary-soft);
154
279
 
155
280
  /* Secondary */
156
281
  --ty-color-secondary-strong: oklch(
157
- var(--ty-l-strong)
282
+ calc(var(--ty-l-strong) * var(--ty-secondary-l-factor))
158
283
  calc(var(--ty-secondary-chroma) * var(--ty-c-strong-mult))
159
284
  var(--ty-secondary-hue)
160
285
  );
161
286
  --ty-color-secondary-bold: oklch(
162
- var(--ty-l-bold) calc(var(--ty-secondary-chroma) * var(--ty-c-bold-mult))
287
+ calc(var(--ty-l-bold) * var(--ty-secondary-l-factor))
288
+ calc(var(--ty-secondary-chroma) * var(--ty-c-bold-mult))
163
289
  var(--ty-secondary-hue)
164
290
  );
165
291
  --ty-color-secondary: oklch(
166
- var(--ty-l-base) calc(var(--ty-secondary-chroma) * var(--ty-c-base-mult))
292
+ calc(var(--ty-l-base) * var(--ty-secondary-l-factor))
293
+ calc(var(--ty-secondary-chroma) * var(--ty-c-base-mult))
167
294
  var(--ty-secondary-hue)
168
295
  );
169
296
  --ty-color-secondary-soft: oklch(
170
- var(--ty-l-soft) calc(var(--ty-secondary-chroma) * var(--ty-c-soft-mult))
297
+ calc(var(--ty-l-soft) * var(--ty-secondary-l-factor))
298
+ calc(var(--ty-secondary-chroma) * var(--ty-c-soft-mult))
171
299
  var(--ty-secondary-hue)
172
300
  );
173
301
  --ty-color-secondary-faint: oklch(
174
- var(--ty-l-faint) calc(var(--ty-secondary-chroma) * var(--ty-c-faint-mult))
302
+ calc(var(--ty-l-faint) * var(--ty-secondary-l-factor))
303
+ calc(var(--ty-secondary-chroma) * var(--ty-c-faint-mult))
175
304
  var(--ty-secondary-hue)
176
305
  );
177
306
  --ty-bg-secondary: oklch(
178
- var(--ty-l-bg-base)
307
+ calc(var(--ty-l-bg-base) * var(--ty-secondary-l-factor))
179
308
  calc(var(--ty-secondary-chroma) * var(--ty-c-bg-base-mult))
180
309
  var(--ty-secondary-hue)
181
310
  );
182
311
  --ty-bg-secondary-bold: oklch(
183
- var(--ty-l-bg-bold)
312
+ calc(var(--ty-l-bg-bold) * var(--ty-secondary-l-factor))
184
313
  calc(var(--ty-secondary-chroma) * var(--ty-c-bg-bold-mult))
185
314
  var(--ty-secondary-hue)
186
315
  );
187
316
  --ty-bg-secondary-soft: oklch(
188
- var(--ty-l-bg-soft)
317
+ calc(var(--ty-l-bg-soft) * var(--ty-secondary-l-factor))
189
318
  calc(var(--ty-secondary-chroma) * var(--ty-c-bg-soft-mult))
190
319
  var(--ty-secondary-hue)
191
320
  );
@@ -193,37 +322,42 @@
193
322
 
194
323
  /* Success */
195
324
  --ty-color-success-strong: oklch(
196
- var(--ty-l-strong) calc(var(--ty-success-chroma) * var(--ty-c-strong-mult))
325
+ calc(var(--ty-l-strong) * var(--ty-success-l-factor))
326
+ calc(var(--ty-success-chroma) * var(--ty-c-strong-mult))
197
327
  var(--ty-success-hue)
198
328
  );
199
329
  --ty-color-success-bold: oklch(
200
- var(--ty-l-bold) calc(var(--ty-success-chroma) * var(--ty-c-bold-mult))
330
+ calc(var(--ty-l-bold) * var(--ty-success-l-factor))
331
+ calc(var(--ty-success-chroma) * var(--ty-c-bold-mult))
201
332
  var(--ty-success-hue)
202
333
  );
203
334
  --ty-color-success: oklch(
204
- var(--ty-l-base) calc(var(--ty-success-chroma) * var(--ty-c-base-mult))
335
+ calc(var(--ty-l-base) * var(--ty-success-l-factor))
336
+ calc(var(--ty-success-chroma) * var(--ty-c-base-mult))
205
337
  var(--ty-success-hue)
206
338
  );
207
339
  --ty-color-success-soft: oklch(
208
- var(--ty-l-soft) calc(var(--ty-success-chroma) * var(--ty-c-soft-mult))
340
+ calc(var(--ty-l-soft) * var(--ty-success-l-factor))
341
+ calc(var(--ty-success-chroma) * var(--ty-c-soft-mult))
209
342
  var(--ty-success-hue)
210
343
  );
211
344
  --ty-color-success-faint: oklch(
212
- var(--ty-l-faint) calc(var(--ty-success-chroma) * var(--ty-c-faint-mult))
345
+ calc(var(--ty-l-faint) * var(--ty-success-l-factor))
346
+ calc(var(--ty-success-chroma) * var(--ty-c-faint-mult))
213
347
  var(--ty-success-hue)
214
348
  );
215
349
  --ty-bg-success: oklch(
216
- var(--ty-l-bg-base)
350
+ calc(var(--ty-l-bg-base) * var(--ty-success-l-factor))
217
351
  calc(var(--ty-success-chroma) * var(--ty-c-bg-base-mult))
218
352
  var(--ty-success-hue)
219
353
  );
220
354
  --ty-bg-success-bold: oklch(
221
- var(--ty-l-bg-bold)
355
+ calc(var(--ty-l-bg-bold) * var(--ty-success-l-factor))
222
356
  calc(var(--ty-success-chroma) * var(--ty-c-bg-bold-mult))
223
357
  var(--ty-success-hue)
224
358
  );
225
359
  --ty-bg-success-soft: oklch(
226
- var(--ty-l-bg-soft)
360
+ calc(var(--ty-l-bg-soft) * var(--ty-success-l-factor))
227
361
  calc(var(--ty-success-chroma) * var(--ty-c-bg-soft-mult))
228
362
  var(--ty-success-hue)
229
363
  );
@@ -231,72 +365,82 @@
231
365
 
232
366
  /* Danger */
233
367
  --ty-color-danger-strong: oklch(
234
- var(--ty-l-strong) calc(var(--ty-danger-chroma) * var(--ty-c-strong-mult))
368
+ calc(var(--ty-l-strong) * var(--ty-danger-l-factor))
369
+ calc(var(--ty-danger-chroma) * var(--ty-c-strong-mult))
235
370
  var(--ty-danger-hue)
236
371
  );
237
372
  --ty-color-danger-bold: oklch(
238
- var(--ty-l-bold) calc(var(--ty-danger-chroma) * var(--ty-c-bold-mult))
239
- var(--ty-danger-hue)
373
+ calc(var(--ty-l-bold) * var(--ty-danger-l-factor))
374
+ calc(var(--ty-danger-chroma) * var(--ty-c-bold-mult)) var(--ty-danger-hue)
240
375
  );
241
376
  --ty-color-danger: oklch(
242
- var(--ty-l-base) calc(var(--ty-danger-chroma) * var(--ty-c-base-mult))
243
- var(--ty-danger-hue)
377
+ calc(var(--ty-l-base) * var(--ty-danger-l-factor))
378
+ calc(var(--ty-danger-chroma) * var(--ty-c-base-mult)) var(--ty-danger-hue)
244
379
  );
245
380
  --ty-color-danger-soft: oklch(
246
- var(--ty-l-soft) calc(var(--ty-danger-chroma) * var(--ty-c-soft-mult))
247
- var(--ty-danger-hue)
381
+ calc(var(--ty-l-soft) * var(--ty-danger-l-factor))
382
+ calc(var(--ty-danger-chroma) * var(--ty-c-soft-mult)) var(--ty-danger-hue)
248
383
  );
249
384
  --ty-color-danger-faint: oklch(
250
- var(--ty-l-faint) calc(var(--ty-danger-chroma) * var(--ty-c-faint-mult))
385
+ calc(var(--ty-l-faint) * var(--ty-danger-l-factor))
386
+ calc(var(--ty-danger-chroma) * var(--ty-c-faint-mult))
251
387
  var(--ty-danger-hue)
252
388
  );
253
389
  --ty-bg-danger: oklch(
254
- var(--ty-l-bg-base) calc(var(--ty-danger-chroma) * var(--ty-c-bg-base-mult))
390
+ calc(var(--ty-l-bg-base) * var(--ty-danger-l-factor))
391
+ calc(var(--ty-danger-chroma) * var(--ty-c-bg-base-mult))
255
392
  var(--ty-danger-hue)
256
393
  );
257
394
  --ty-bg-danger-bold: oklch(
258
- var(--ty-l-bg-bold) calc(var(--ty-danger-chroma) * var(--ty-c-bg-bold-mult))
395
+ calc(var(--ty-l-bg-bold) * var(--ty-danger-l-factor))
396
+ calc(var(--ty-danger-chroma) * var(--ty-c-bg-bold-mult))
259
397
  var(--ty-danger-hue)
260
398
  );
261
399
  --ty-bg-danger-soft: oklch(
262
- var(--ty-l-bg-soft) calc(var(--ty-danger-chroma) * var(--ty-c-bg-soft-mult))
400
+ calc(var(--ty-l-bg-soft) * var(--ty-danger-l-factor))
401
+ calc(var(--ty-danger-chroma) * var(--ty-c-bg-soft-mult))
263
402
  var(--ty-danger-hue)
264
403
  );
265
404
  --ty-border-danger: var(--ty-color-danger-soft);
266
405
 
267
406
  /* Warning */
268
407
  --ty-color-warning-strong: oklch(
269
- var(--ty-l-strong) calc(var(--ty-warning-chroma) * var(--ty-c-strong-mult))
408
+ calc(var(--ty-l-strong) * var(--ty-warning-l-factor))
409
+ calc(var(--ty-warning-chroma) * var(--ty-c-strong-mult))
270
410
  var(--ty-warning-hue)
271
411
  );
272
412
  --ty-color-warning-bold: oklch(
273
- var(--ty-l-bold) calc(var(--ty-warning-chroma) * var(--ty-c-bold-mult))
413
+ calc(var(--ty-l-bold) * var(--ty-warning-l-factor))
414
+ calc(var(--ty-warning-chroma) * var(--ty-c-bold-mult))
274
415
  var(--ty-warning-hue)
275
416
  );
276
417
  --ty-color-warning: oklch(
277
- var(--ty-l-base) calc(var(--ty-warning-chroma) * var(--ty-c-base-mult))
418
+ calc(var(--ty-l-base) * var(--ty-warning-l-factor))
419
+ calc(var(--ty-warning-chroma) * var(--ty-c-base-mult))
278
420
  var(--ty-warning-hue)
279
421
  );
280
422
  --ty-color-warning-soft: oklch(
281
- var(--ty-l-soft) calc(var(--ty-warning-chroma) * var(--ty-c-soft-mult))
423
+ calc(var(--ty-l-soft) * var(--ty-warning-l-factor))
424
+ calc(var(--ty-warning-chroma) * var(--ty-c-soft-mult))
282
425
  var(--ty-warning-hue)
283
426
  );
284
427
  --ty-color-warning-faint: oklch(
285
- var(--ty-l-faint) calc(var(--ty-warning-chroma) * var(--ty-c-faint-mult))
428
+ calc(var(--ty-l-faint) * var(--ty-warning-l-factor))
429
+ calc(var(--ty-warning-chroma) * var(--ty-c-faint-mult))
286
430
  var(--ty-warning-hue)
287
431
  );
288
432
  --ty-bg-warning: oklch(
289
- var(--ty-l-bg-base)
433
+ calc(var(--ty-l-bg-base) * var(--ty-warning-l-factor))
290
434
  calc(var(--ty-warning-chroma) * var(--ty-c-bg-base-mult))
291
435
  var(--ty-warning-hue)
292
436
  );
293
437
  --ty-bg-warning-bold: oklch(
294
- var(--ty-l-bg-bold)
438
+ calc(var(--ty-l-bg-bold) * var(--ty-warning-l-factor))
295
439
  calc(var(--ty-warning-chroma) * var(--ty-c-bg-bold-mult))
296
440
  var(--ty-warning-hue)
297
441
  );
298
442
  --ty-bg-warning-soft: oklch(
299
- var(--ty-l-bg-soft)
443
+ calc(var(--ty-l-bg-soft) * var(--ty-warning-l-factor))
300
444
  calc(var(--ty-warning-chroma) * var(--ty-c-bg-soft-mult))
301
445
  var(--ty-warning-hue)
302
446
  );
@@ -304,37 +448,42 @@
304
448
 
305
449
  /* Neutral — same L curve, near-zero chroma so the grey scale stays grey. */
306
450
  --ty-color-neutral-strong: oklch(
307
- var(--ty-l-strong) calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
451
+ calc(var(--ty-l-strong) * var(--ty-neutral-l-factor))
452
+ calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
308
453
  var(--ty-neutral-hue)
309
454
  );
310
455
  --ty-color-neutral-bold: oklch(
311
- var(--ty-l-bold) calc(var(--ty-neutral-chroma) * var(--ty-c-bold-mult))
456
+ calc(var(--ty-l-bold) * var(--ty-neutral-l-factor))
457
+ calc(var(--ty-neutral-chroma) * var(--ty-c-bold-mult))
312
458
  var(--ty-neutral-hue)
313
459
  );
314
460
  --ty-color-neutral: oklch(
315
- var(--ty-l-base) calc(var(--ty-neutral-chroma) * var(--ty-c-base-mult))
461
+ calc(var(--ty-l-base) * var(--ty-neutral-l-factor))
462
+ calc(var(--ty-neutral-chroma) * var(--ty-c-base-mult))
316
463
  var(--ty-neutral-hue)
317
464
  );
318
465
  --ty-color-neutral-soft: oklch(
319
- var(--ty-l-soft) calc(var(--ty-neutral-chroma) * var(--ty-c-soft-mult))
466
+ calc(var(--ty-l-soft) * var(--ty-neutral-l-factor))
467
+ calc(var(--ty-neutral-chroma) * var(--ty-c-soft-mult))
320
468
  var(--ty-neutral-hue)
321
469
  );
322
470
  --ty-color-neutral-faint: oklch(
323
- var(--ty-l-faint) calc(var(--ty-neutral-chroma) * var(--ty-c-faint-mult))
471
+ calc(var(--ty-l-faint) * var(--ty-neutral-l-factor))
472
+ calc(var(--ty-neutral-chroma) * var(--ty-c-faint-mult))
324
473
  var(--ty-neutral-hue)
325
474
  );
326
475
  --ty-bg-neutral: oklch(
327
- var(--ty-l-bg-base)
476
+ calc(var(--ty-l-bg-base) * var(--ty-neutral-l-factor))
328
477
  calc(var(--ty-neutral-chroma) * var(--ty-c-bg-base-mult))
329
478
  var(--ty-neutral-hue)
330
479
  );
331
480
  --ty-bg-neutral-bold: oklch(
332
- var(--ty-l-bg-bold)
481
+ calc(var(--ty-l-bg-bold) * var(--ty-neutral-l-factor))
333
482
  calc(var(--ty-neutral-chroma) * var(--ty-c-bg-bold-mult))
334
483
  var(--ty-neutral-hue)
335
484
  );
336
485
  --ty-bg-neutral-soft: oklch(
337
- var(--ty-l-bg-soft)
486
+ calc(var(--ty-l-bg-soft) * var(--ty-neutral-l-factor))
338
487
  calc(var(--ty-neutral-chroma) * var(--ty-c-bg-soft-mult))
339
488
  var(--ty-neutral-hue)
340
489
  );
@@ -345,21 +494,27 @@
345
494
  0.99 calc(var(--ty-neutral-chroma) * 0.4) var(--ty-neutral-hue)
346
495
  );
347
496
 
348
- /* Global neutral borders — read off the neutral color ramp. */
497
+ /* ----------------------------------------------------------------
498
+ * Global neutral borders — read off the neutral color ramp.
499
+ * --------------------------------------------------------------*/
349
500
  --ty-border-strong: var(--ty-color-neutral-bold);
350
501
  --ty-border: var(--ty-color-neutral-soft);
351
502
  --ty-border-bold: var(--ty-color-neutral-soft);
352
503
  --ty-border-soft: var(--ty-color-neutral-faint);
353
504
  --ty-border-faint: var(--ty-color-neutral-faint);
354
505
 
355
- /* Surfaces — canvas tinted slightly toward brand for warmth. */
506
+ /* ----------------------------------------------------------------
507
+ * Surfaces — canvas tinted slightly toward brand for warmth.
508
+ * --------------------------------------------------------------*/
356
509
  --ty-surface-canvas: oklch(0.985 0.005 var(--ty-brand-hue));
357
510
  --ty-surface-content: oklch(1 0 0);
358
511
  --ty-surface-elevated: oklch(1 0 0);
359
512
  --ty-surface-floating: oklch(1 0 0);
360
513
  --ty-surface-input: oklch(1 0 0);
361
514
 
362
- /* Inputs — tied to neutral ramp so form controls retint with brand. */
515
+ /* ----------------------------------------------------------------
516
+ * Inputs — tied to neutral ramp so form controls retint with brand.
517
+ * --------------------------------------------------------------*/
363
518
  --ty-input-bg: var(--ty-surface-input);
364
519
  --ty-input-color: var(--ty-color-neutral-strong);
365
520
  --ty-input-border: var(--ty-color-neutral-soft);
@@ -375,7 +530,9 @@
375
530
  transparent
376
531
  );
377
532
 
378
- /* Solid buttons — re-route through --ty-color-*. */
533
+ /* ----------------------------------------------------------------
534
+ * Solid buttons — re-route through --ty-color-*.
535
+ * --------------------------------------------------------------*/
379
536
  --ty-solid-primary: var(--ty-color-primary);
380
537
  --ty-solid-primary-strong: var(--ty-color-primary-bold);
381
538
  --ty-solid-primary-soft: var(--ty-color-primary-soft);
@@ -401,14 +558,8 @@
401
558
  --ty-solid-warning-soft: var(--ty-color-warning-soft);
402
559
  --ty-solid-warning-fg: white;
403
560
 
404
- /* Solid neutral routes to neutral-strong rather than neutral-base.
405
- * Neutral-base (L_base) reads as a washy mid-grey on white surfaces;
406
- * neutral-strong gives the dark-grey "default action" weight that
407
- * design systems typically use for neutral buttons. The "strong"
408
- * solid variant clamps higher emphasis (same shade, kept for the
409
- * solid-* API shape); "soft" softens to neutral-bold for inactive
410
- * states. */
411
-
561
+ /* Solid neutral routes to a darker shade than neutral-base. The "soft"
562
+ * solid-neutral softens to a mid-grey for inactive states. */
412
563
  --ty-solid-neutral-soft: oklch(
413
564
  0.6 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
414
565
  var(--ty-neutral-hue)
@@ -417,7 +568,6 @@
417
568
  0.4 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
418
569
  var(--ty-neutral-hue)
419
570
  );
420
-
421
571
  --ty-solid-neutral-strong: oklch(
422
572
  0.2 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
423
573
  var(--ty-neutral-hue)
@@ -425,110 +575,90 @@
425
575
  }
426
576
 
427
577
  /* =====================================================================
428
- * DARK MODE — L-curve and saturation-curve overridden. Same flavor
429
- * seeds drive both modes; only the L and chroma multipliers change.
578
+ * SECTION 2 DARK — same computations re-declared so html.dark (0,1,1)
579
+ * matches tyrell.css's hardcoded dark-mode hexes at source-order
580
+ * specificity. The math is identical to the :root block above; only
581
+ * the L/C inputs differ (from html.dark's Tier 3/4 overrides).
430
582
  * ===================================================================== */
431
583
 
432
584
  html.dark,
433
585
  html[data-theme="dark"] {
434
- --ty-l-strong: 0.86; /* ++ max emphasis in dark = brightest */
435
- --ty-l-bold: 0.74;
436
- --ty-l-base: 0.62;
437
- --ty-l-soft: 0.46;
438
- --ty-l-faint: 0.3; /* -- min emphasis = darkest */
439
-
440
- --ty-l-bg-base: 0.22;
441
- --ty-l-bg-bold: 0.26;
442
- --ty-l-bg-soft: 0.19;
443
-
444
- /* Saturation curve — dark pushes faint chroma up so dim shades don't
445
- * collapse into grey, and trims strong so bright tones don't over-pop. */
446
- --ty-c-strong-mult: 0.77;
447
- --ty-c-bold-mult: 1;
448
- --ty-c-base-mult: 0.92;
449
- --ty-c-soft-mult: 0.77;
450
- --ty-c-faint-mult: 0.5;
451
-
452
- --ty-c-bg-base-mult: 0.38;
453
- --ty-c-bg-bold-mult: 0.54;
454
- --ty-c-bg-soft-mult: 0.23;
455
-
456
- /* Color tokens re-declared here so we match tyrell.css's `html.dark` block
457
- * at the same selector specificity (0,1,1). Without these, tyrell.css's
458
- * hardcoded dark-mode hexes out-rank the brand-layer ':root' definitions
459
- * and the brand-hue slider does nothing in dark mode. The math is the
460
- * same as the light block — just uses the dark L-curve / chroma curve
461
- * defined above. */
462
-
463
586
  /* Primary */
464
587
  --ty-color-primary-strong: oklch(
465
- var(--ty-l-strong) calc(var(--ty-brand-chroma) * var(--ty-c-strong-mult))
466
- var(--ty-brand-hue)
588
+ calc(var(--ty-l-strong) * var(--ty-primary-l-factor))
589
+ calc(var(--ty-brand-chroma) * var(--ty-c-strong-mult)) var(--ty-brand-hue)
467
590
  );
468
591
  --ty-color-primary-bold: oklch(
469
- var(--ty-l-bold) calc(var(--ty-brand-chroma) * var(--ty-c-bold-mult))
470
- var(--ty-brand-hue)
592
+ calc(var(--ty-l-bold) * var(--ty-primary-l-factor))
593
+ calc(var(--ty-brand-chroma) * var(--ty-c-bold-mult)) var(--ty-brand-hue)
471
594
  );
472
595
  --ty-color-primary: oklch(
473
- var(--ty-l-base) calc(var(--ty-brand-chroma) * var(--ty-c-base-mult))
474
- var(--ty-brand-hue)
596
+ calc(var(--ty-l-base) * var(--ty-primary-l-factor))
597
+ calc(var(--ty-brand-chroma) * var(--ty-c-base-mult)) var(--ty-brand-hue)
475
598
  );
476
599
  --ty-color-primary-soft: oklch(
477
- var(--ty-l-soft) calc(var(--ty-brand-chroma) * var(--ty-c-soft-mult))
478
- var(--ty-brand-hue)
600
+ calc(var(--ty-l-soft) * var(--ty-primary-l-factor))
601
+ calc(var(--ty-brand-chroma) * var(--ty-c-soft-mult)) var(--ty-brand-hue)
479
602
  );
480
603
  --ty-color-primary-faint: oklch(
481
- var(--ty-l-faint) calc(var(--ty-brand-chroma) * var(--ty-c-faint-mult))
482
- var(--ty-brand-hue)
604
+ calc(var(--ty-l-faint) * var(--ty-primary-l-factor))
605
+ calc(var(--ty-brand-chroma) * var(--ty-c-faint-mult)) var(--ty-brand-hue)
483
606
  );
484
607
  --ty-bg-primary: oklch(
485
- var(--ty-l-bg-base) calc(var(--ty-brand-chroma) * var(--ty-c-bg-base-mult))
608
+ calc(var(--ty-l-bg-base) * var(--ty-primary-l-factor))
609
+ calc(var(--ty-brand-chroma) * var(--ty-c-bg-base-mult))
486
610
  var(--ty-brand-hue)
487
611
  );
488
612
  --ty-bg-primary-bold: oklch(
489
- var(--ty-l-bg-bold) calc(var(--ty-brand-chroma) * var(--ty-c-bg-bold-mult))
613
+ calc(var(--ty-l-bg-bold) * var(--ty-primary-l-factor))
614
+ calc(var(--ty-brand-chroma) * var(--ty-c-bg-bold-mult))
490
615
  var(--ty-brand-hue)
491
616
  );
492
617
  --ty-bg-primary-soft: oklch(
493
- var(--ty-l-bg-soft) calc(var(--ty-brand-chroma) * var(--ty-c-bg-soft-mult))
618
+ calc(var(--ty-l-bg-soft) * var(--ty-primary-l-factor))
619
+ calc(var(--ty-brand-chroma) * var(--ty-c-bg-soft-mult))
494
620
  var(--ty-brand-hue)
495
621
  );
496
622
  --ty-border-primary: var(--ty-color-primary-soft);
497
623
 
498
624
  /* Secondary */
499
625
  --ty-color-secondary-strong: oklch(
500
- var(--ty-l-strong)
626
+ calc(var(--ty-l-strong) * var(--ty-secondary-l-factor))
501
627
  calc(var(--ty-secondary-chroma) * var(--ty-c-strong-mult))
502
628
  var(--ty-secondary-hue)
503
629
  );
504
630
  --ty-color-secondary-bold: oklch(
505
- var(--ty-l-bold) calc(var(--ty-secondary-chroma) * var(--ty-c-bold-mult))
631
+ calc(var(--ty-l-bold) * var(--ty-secondary-l-factor))
632
+ calc(var(--ty-secondary-chroma) * var(--ty-c-bold-mult))
506
633
  var(--ty-secondary-hue)
507
634
  );
508
635
  --ty-color-secondary: oklch(
509
- var(--ty-l-base) calc(var(--ty-secondary-chroma) * var(--ty-c-base-mult))
636
+ calc(var(--ty-l-base) * var(--ty-secondary-l-factor))
637
+ calc(var(--ty-secondary-chroma) * var(--ty-c-base-mult))
510
638
  var(--ty-secondary-hue)
511
639
  );
512
640
  --ty-color-secondary-soft: oklch(
513
- var(--ty-l-soft) calc(var(--ty-secondary-chroma) * var(--ty-c-soft-mult))
641
+ calc(var(--ty-l-soft) * var(--ty-secondary-l-factor))
642
+ calc(var(--ty-secondary-chroma) * var(--ty-c-soft-mult))
514
643
  var(--ty-secondary-hue)
515
644
  );
516
645
  --ty-color-secondary-faint: oklch(
517
- var(--ty-l-faint) calc(var(--ty-secondary-chroma) * var(--ty-c-faint-mult))
646
+ calc(var(--ty-l-faint) * var(--ty-secondary-l-factor))
647
+ calc(var(--ty-secondary-chroma) * var(--ty-c-faint-mult))
518
648
  var(--ty-secondary-hue)
519
649
  );
520
650
  --ty-bg-secondary: oklch(
521
- var(--ty-l-bg-base)
651
+ calc(var(--ty-l-bg-base) * var(--ty-secondary-l-factor))
522
652
  calc(var(--ty-secondary-chroma) * var(--ty-c-bg-base-mult))
523
653
  var(--ty-secondary-hue)
524
654
  );
525
655
  --ty-bg-secondary-bold: oklch(
526
- var(--ty-l-bg-bold)
656
+ calc(var(--ty-l-bg-bold) * var(--ty-secondary-l-factor))
527
657
  calc(var(--ty-secondary-chroma) * var(--ty-c-bg-bold-mult))
528
658
  var(--ty-secondary-hue)
529
659
  );
530
660
  --ty-bg-secondary-soft: oklch(
531
- var(--ty-l-bg-soft)
661
+ calc(var(--ty-l-bg-soft) * var(--ty-secondary-l-factor))
532
662
  calc(var(--ty-secondary-chroma) * var(--ty-c-bg-soft-mult))
533
663
  var(--ty-secondary-hue)
534
664
  );
@@ -536,37 +666,42 @@ html[data-theme="dark"] {
536
666
 
537
667
  /* Success */
538
668
  --ty-color-success-strong: oklch(
539
- var(--ty-l-strong) calc(var(--ty-success-chroma) * var(--ty-c-strong-mult))
669
+ calc(var(--ty-l-strong) * var(--ty-success-l-factor))
670
+ calc(var(--ty-success-chroma) * var(--ty-c-strong-mult))
540
671
  var(--ty-success-hue)
541
672
  );
542
673
  --ty-color-success-bold: oklch(
543
- var(--ty-l-bold) calc(var(--ty-success-chroma) * var(--ty-c-bold-mult))
674
+ calc(var(--ty-l-bold) * var(--ty-success-l-factor))
675
+ calc(var(--ty-success-chroma) * var(--ty-c-bold-mult))
544
676
  var(--ty-success-hue)
545
677
  );
546
678
  --ty-color-success: oklch(
547
- var(--ty-l-base) calc(var(--ty-success-chroma) * var(--ty-c-base-mult))
679
+ calc(var(--ty-l-base) * var(--ty-success-l-factor))
680
+ calc(var(--ty-success-chroma) * var(--ty-c-base-mult))
548
681
  var(--ty-success-hue)
549
682
  );
550
683
  --ty-color-success-soft: oklch(
551
- var(--ty-l-soft) calc(var(--ty-success-chroma) * var(--ty-c-soft-mult))
684
+ calc(var(--ty-l-soft) * var(--ty-success-l-factor))
685
+ calc(var(--ty-success-chroma) * var(--ty-c-soft-mult))
552
686
  var(--ty-success-hue)
553
687
  );
554
688
  --ty-color-success-faint: oklch(
555
- var(--ty-l-faint) calc(var(--ty-success-chroma) * var(--ty-c-faint-mult))
689
+ calc(var(--ty-l-faint) * var(--ty-success-l-factor))
690
+ calc(var(--ty-success-chroma) * var(--ty-c-faint-mult))
556
691
  var(--ty-success-hue)
557
692
  );
558
693
  --ty-bg-success: oklch(
559
- var(--ty-l-bg-base)
694
+ calc(var(--ty-l-bg-base) * var(--ty-success-l-factor))
560
695
  calc(var(--ty-success-chroma) * var(--ty-c-bg-base-mult))
561
696
  var(--ty-success-hue)
562
697
  );
563
698
  --ty-bg-success-bold: oklch(
564
- var(--ty-l-bg-bold)
699
+ calc(var(--ty-l-bg-bold) * var(--ty-success-l-factor))
565
700
  calc(var(--ty-success-chroma) * var(--ty-c-bg-bold-mult))
566
701
  var(--ty-success-hue)
567
702
  );
568
703
  --ty-bg-success-soft: oklch(
569
- var(--ty-l-bg-soft)
704
+ calc(var(--ty-l-bg-soft) * var(--ty-success-l-factor))
570
705
  calc(var(--ty-success-chroma) * var(--ty-c-bg-soft-mult))
571
706
  var(--ty-success-hue)
572
707
  );
@@ -574,72 +709,82 @@ html[data-theme="dark"] {
574
709
 
575
710
  /* Danger */
576
711
  --ty-color-danger-strong: oklch(
577
- var(--ty-l-strong) calc(var(--ty-danger-chroma) * var(--ty-c-strong-mult))
712
+ calc(var(--ty-l-strong) * var(--ty-danger-l-factor))
713
+ calc(var(--ty-danger-chroma) * var(--ty-c-strong-mult))
578
714
  var(--ty-danger-hue)
579
715
  );
580
716
  --ty-color-danger-bold: oklch(
581
- var(--ty-l-bold) calc(var(--ty-danger-chroma) * var(--ty-c-bold-mult))
582
- var(--ty-danger-hue)
717
+ calc(var(--ty-l-bold) * var(--ty-danger-l-factor))
718
+ calc(var(--ty-danger-chroma) * var(--ty-c-bold-mult)) var(--ty-danger-hue)
583
719
  );
584
720
  --ty-color-danger: oklch(
585
- var(--ty-l-base) calc(var(--ty-danger-chroma) * var(--ty-c-base-mult))
586
- var(--ty-danger-hue)
721
+ calc(var(--ty-l-base) * var(--ty-danger-l-factor))
722
+ calc(var(--ty-danger-chroma) * var(--ty-c-base-mult)) var(--ty-danger-hue)
587
723
  );
588
724
  --ty-color-danger-soft: oklch(
589
- var(--ty-l-soft) calc(var(--ty-danger-chroma) * var(--ty-c-soft-mult))
590
- var(--ty-danger-hue)
725
+ calc(var(--ty-l-soft) * var(--ty-danger-l-factor))
726
+ calc(var(--ty-danger-chroma) * var(--ty-c-soft-mult)) var(--ty-danger-hue)
591
727
  );
592
728
  --ty-color-danger-faint: oklch(
593
- var(--ty-l-faint) calc(var(--ty-danger-chroma) * var(--ty-c-faint-mult))
729
+ calc(var(--ty-l-faint) * var(--ty-danger-l-factor))
730
+ calc(var(--ty-danger-chroma) * var(--ty-c-faint-mult))
594
731
  var(--ty-danger-hue)
595
732
  );
596
733
  --ty-bg-danger: oklch(
597
- var(--ty-l-bg-base) calc(var(--ty-danger-chroma) * var(--ty-c-bg-base-mult))
734
+ calc(var(--ty-l-bg-base) * var(--ty-danger-l-factor))
735
+ calc(var(--ty-danger-chroma) * var(--ty-c-bg-base-mult))
598
736
  var(--ty-danger-hue)
599
737
  );
600
738
  --ty-bg-danger-bold: oklch(
601
- var(--ty-l-bg-bold) calc(var(--ty-danger-chroma) * var(--ty-c-bg-bold-mult))
739
+ calc(var(--ty-l-bg-bold) * var(--ty-danger-l-factor))
740
+ calc(var(--ty-danger-chroma) * var(--ty-c-bg-bold-mult))
602
741
  var(--ty-danger-hue)
603
742
  );
604
743
  --ty-bg-danger-soft: oklch(
605
- var(--ty-l-bg-soft) calc(var(--ty-danger-chroma) * var(--ty-c-bg-soft-mult))
744
+ calc(var(--ty-l-bg-soft) * var(--ty-danger-l-factor))
745
+ calc(var(--ty-danger-chroma) * var(--ty-c-bg-soft-mult))
606
746
  var(--ty-danger-hue)
607
747
  );
608
748
  --ty-border-danger: var(--ty-color-danger-soft);
609
749
 
610
750
  /* Warning */
611
751
  --ty-color-warning-strong: oklch(
612
- var(--ty-l-strong) calc(var(--ty-warning-chroma) * var(--ty-c-strong-mult))
752
+ calc(var(--ty-l-strong) * var(--ty-warning-l-factor))
753
+ calc(var(--ty-warning-chroma) * var(--ty-c-strong-mult))
613
754
  var(--ty-warning-hue)
614
755
  );
615
756
  --ty-color-warning-bold: oklch(
616
- var(--ty-l-bold) calc(var(--ty-warning-chroma) * var(--ty-c-bold-mult))
757
+ calc(var(--ty-l-bold) * var(--ty-warning-l-factor))
758
+ calc(var(--ty-warning-chroma) * var(--ty-c-bold-mult))
617
759
  var(--ty-warning-hue)
618
760
  );
619
761
  --ty-color-warning: oklch(
620
- var(--ty-l-base) calc(var(--ty-warning-chroma) * var(--ty-c-base-mult))
762
+ calc(var(--ty-l-base) * var(--ty-warning-l-factor))
763
+ calc(var(--ty-warning-chroma) * var(--ty-c-base-mult))
621
764
  var(--ty-warning-hue)
622
765
  );
623
766
  --ty-color-warning-soft: oklch(
624
- var(--ty-l-soft) calc(var(--ty-warning-chroma) * var(--ty-c-soft-mult))
767
+ calc(var(--ty-l-soft) * var(--ty-warning-l-factor))
768
+ calc(var(--ty-warning-chroma) * var(--ty-c-soft-mult))
625
769
  var(--ty-warning-hue)
626
770
  );
627
771
  --ty-color-warning-faint: oklch(
628
- var(--ty-l-faint) calc(var(--ty-warning-chroma) * var(--ty-c-faint-mult))
772
+ calc(var(--ty-l-faint) * var(--ty-warning-l-factor))
773
+ calc(var(--ty-warning-chroma) * var(--ty-c-faint-mult))
629
774
  var(--ty-warning-hue)
630
775
  );
631
776
  --ty-bg-warning: oklch(
632
- var(--ty-l-bg-base)
777
+ calc(var(--ty-l-bg-base) * var(--ty-warning-l-factor))
633
778
  calc(var(--ty-warning-chroma) * var(--ty-c-bg-base-mult))
634
779
  var(--ty-warning-hue)
635
780
  );
636
781
  --ty-bg-warning-bold: oklch(
637
- var(--ty-l-bg-bold)
782
+ calc(var(--ty-l-bg-bold) * var(--ty-warning-l-factor))
638
783
  calc(var(--ty-warning-chroma) * var(--ty-c-bg-bold-mult))
639
784
  var(--ty-warning-hue)
640
785
  );
641
786
  --ty-bg-warning-soft: oklch(
642
- var(--ty-l-bg-soft)
787
+ calc(var(--ty-l-bg-soft) * var(--ty-warning-l-factor))
643
788
  calc(var(--ty-warning-chroma) * var(--ty-c-bg-soft-mult))
644
789
  var(--ty-warning-hue)
645
790
  );
@@ -647,37 +792,42 @@ html[data-theme="dark"] {
647
792
 
648
793
  /* Neutral */
649
794
  --ty-color-neutral-strong: oklch(
650
- var(--ty-l-strong) calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
795
+ calc(var(--ty-l-strong) * var(--ty-neutral-l-factor))
796
+ calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
651
797
  var(--ty-neutral-hue)
652
798
  );
653
799
  --ty-color-neutral-bold: oklch(
654
- var(--ty-l-bold) calc(var(--ty-neutral-chroma) * var(--ty-c-bold-mult))
800
+ calc(var(--ty-l-bold) * var(--ty-neutral-l-factor))
801
+ calc(var(--ty-neutral-chroma) * var(--ty-c-bold-mult))
655
802
  var(--ty-neutral-hue)
656
803
  );
657
804
  --ty-color-neutral: oklch(
658
- var(--ty-l-base) calc(var(--ty-neutral-chroma) * var(--ty-c-base-mult))
805
+ calc(var(--ty-l-base) * var(--ty-neutral-l-factor))
806
+ calc(var(--ty-neutral-chroma) * var(--ty-c-base-mult))
659
807
  var(--ty-neutral-hue)
660
808
  );
661
809
  --ty-color-neutral-soft: oklch(
662
- var(--ty-l-soft) calc(var(--ty-neutral-chroma) * var(--ty-c-soft-mult))
810
+ calc(var(--ty-l-soft) * var(--ty-neutral-l-factor))
811
+ calc(var(--ty-neutral-chroma) * var(--ty-c-soft-mult))
663
812
  var(--ty-neutral-hue)
664
813
  );
665
814
  --ty-color-neutral-faint: oklch(
666
- var(--ty-l-faint) calc(var(--ty-neutral-chroma) * var(--ty-c-faint-mult))
815
+ calc(var(--ty-l-faint) * var(--ty-neutral-l-factor))
816
+ calc(var(--ty-neutral-chroma) * var(--ty-c-faint-mult))
667
817
  var(--ty-neutral-hue)
668
818
  );
669
819
  --ty-bg-neutral: oklch(
670
- var(--ty-l-bg-base)
820
+ calc(var(--ty-l-bg-base) * var(--ty-neutral-l-factor))
671
821
  calc(var(--ty-neutral-chroma) * var(--ty-c-bg-base-mult))
672
822
  var(--ty-neutral-hue)
673
823
  );
674
824
  --ty-bg-neutral-bold: oklch(
675
- var(--ty-l-bg-bold)
825
+ calc(var(--ty-l-bg-bold) * var(--ty-neutral-l-factor))
676
826
  calc(var(--ty-neutral-chroma) * var(--ty-c-bg-bold-mult))
677
827
  var(--ty-neutral-hue)
678
828
  );
679
829
  --ty-bg-neutral-soft: oklch(
680
- var(--ty-l-bg-soft)
830
+ calc(var(--ty-l-bg-soft) * var(--ty-neutral-l-factor))
681
831
  calc(var(--ty-neutral-chroma) * var(--ty-c-bg-soft-mult))
682
832
  var(--ty-neutral-hue)
683
833
  );
@@ -702,9 +852,7 @@ html[data-theme="dark"] {
702
852
  --ty-surface-floating: oklch(0.22 0.015 var(--ty-brand-hue));
703
853
  --ty-surface-input: oklch(0.18 0.012 var(--ty-brand-hue));
704
854
 
705
- /* Inputs — re-declared so tyrell.css's hardcoded dark values don't
706
- * out-rank our brand-derived ones (same selector specificity, source
707
- * order wins). */
855
+ /* Inputs — re-declared at html.dark specificity. */
708
856
  --ty-input-bg: var(--ty-surface-input);
709
857
  --ty-input-color: var(--ty-color-neutral-strong);
710
858
  --ty-input-border: var(--ty-color-neutral-faint);
@@ -720,7 +868,7 @@ html[data-theme="dark"] {
720
868
  transparent
721
869
  );
722
870
 
723
- /* Solid buttons — same reason. */
871
+ /* Solid buttons */
724
872
  --ty-solid-primary: var(--ty-color-primary);
725
873
  --ty-solid-primary-strong: var(--ty-color-primary-bold);
726
874
  --ty-solid-primary-soft: var(--ty-color-primary-soft);
@@ -746,10 +894,9 @@ html[data-theme="dark"] {
746
894
  --ty-solid-warning-soft: var(--ty-color-warning-soft);
747
895
  --ty-solid-warning-fg: white;
748
896
 
749
- /* Solid neutral — see comment in the :root block. In dark mode the
750
- * "dark grey" position lives at the OTHER end of the ramp (faint),
751
- * because the L-curve inverts. Both modes get "a darker shade than
752
- * the page surface" for a punchy default action. */
897
+ /* Solid neutral — in dark mode, "dark grey" lives at the other end
898
+ * of the ramp. Both modes get a shade darker than the page surface
899
+ * for a punchy default action. */
753
900
  --ty-solid-neutral-soft: oklch(
754
901
  0.2 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
755
902
  var(--ty-neutral-hue)
@@ -758,7 +905,6 @@ html[data-theme="dark"] {
758
905
  0.3 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
759
906
  var(--ty-neutral-hue)
760
907
  );
761
-
762
908
  --ty-solid-neutral-strong: oklch(
763
909
  0.4 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
764
910
  var(--ty-neutral-hue)