tyrell-components 1.0.0-TC22 → 1.0.0-TC24

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 (16) hide show
  1. package/css/tyrell-brand.css +519 -275
  2. package/css/tyrell-simple.css +257 -0
  3. package/css/tyrell.css +30 -16
  4. package/dist/tyrell-brand.css +519 -275
  5. package/dist/tyrell.css +30 -16
  6. package/dist/tyrell.js +1 -1
  7. package/lib/styles/button.d.ts +5 -2
  8. package/lib/styles/button.d.ts.map +1 -1
  9. package/lib/styles/button.js +36 -72
  10. package/lib/styles/button.js.map +1 -1
  11. package/lib/styles/tag.d.ts +1 -1
  12. package/lib/styles/tag.d.ts.map +1 -1
  13. package/lib/styles/tag.js +5 -5
  14. package/lib/version.d.ts +1 -1
  15. package/lib/version.js +1 -1
  16. package/package.json +1 -1
package/css/tyrell-simple.css ADDED
@@ -0,0 +1,257 @@
1
+ /* =====================================================================
2
+ * tyrell-simple.css — the lightweight color-mix theme engine for Tyrell
3
+ * =====================================================================
4
+ *
5
+ * EXPERIMENTAL, opt-in. The SIMPLE counterpart to tyrell-brand.css (the
6
+ * complex OKLCH engine). Same job — fill the color-token contract — with
7
+ * far fewer moving parts. Load it INSTEAD of tyrell-brand.css:
8
+ *
9
+ * <link rel="stylesheet" href=".../tyrell.css"> <!-- structure + default colors -->
10
+ * <link rel="stylesheet" href=".../tyrell-simple.css"> <!-- overrides colors -->
11
+ *
12
+ * THE WHOLE MODEL
13
+ * ---------------
14
+ * Every color is one expression:
15
+ * color-mix(in oklch, <ink>, var(--ty-bg) STOP%)
16
+ * - --ty-bg the page/background pole
17
+ * - --ty-ink-{role} the saturated emphasis pole for each role
18
+ * - STOP how far toward the background (shared, see below)
19
+ *
20
+ * Inputs are ~7 anchors per theme (page bg + 6 inks). Everything else is
21
+ * derived ONCE in :root. Dark mode only re-points those anchors — the
22
+ * whole palette falls out. No second curve, no sign-flips, no duplication.
23
+ *
24
+ * Rebrand: change the 6 inks. Retune contrast: change the STOP percentages.
25
+ *
26
+ * Needs oklch() + color-mix() + relative color (oklch(from …)) for solids:
27
+ * Chrome 119 / Safari 16.4 / Firefox 128 (mid-2024).
28
+ * ===================================================================== */
29
+
30
+ :root {
31
+ /* ---- shared emphasis stops (% toward --ty-bg). One curve, both themes. ---- */
32
+ --ty-s-strong: 0%;
33
+ --ty-s-bold: 16%;
34
+ --ty-s-base: 32%;
35
+ --ty-s-soft: 56%;
36
+ --ty-s-faint: 78%;
37
+ /* background tints: mostly bg, a breath of ink */
38
+ --ty-bgs-bold: 82%;
39
+ --ty-bgs-base: 88%;
40
+ --ty-bgs-soft: 94%;
41
+
42
+ /* ====================== ANCHORS (light) ====================== */
43
+ --ty-bg: oklch(0.99 0.003 250); /* page pole */
44
+ --ty-ink-primary: oklch(0.55 0.15 250);
45
+ --ty-ink-secondary: oklch(0.55 0.16 300);
46
+ --ty-ink-success: oklch(0.55 0.13 150);
47
+ --ty-ink-danger: oklch(0.55 0.17 25);
48
+ --ty-ink-warning: oklch(0.68 0.15 75);
49
+ --ty-ink-neutral: oklch(0.30 0.012 250);
50
+
51
+ /* ====================== DERIVED — everything below references anchors ===== */
52
+
53
+ /* ---- flavor color ramps ---- */
54
+ --ty-color-primary-strong: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-strong));
55
+ --ty-color-primary-bold: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-bold));
56
+ --ty-color-primary: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-base));
57
+ --ty-color-primary-soft: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-soft));
58
+ --ty-color-primary-faint: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-faint));
59
+
60
+ --ty-color-secondary-strong: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-strong));
61
+ --ty-color-secondary-bold: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-bold));
62
+ --ty-color-secondary: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-base));
63
+ --ty-color-secondary-soft: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-soft));
64
+ --ty-color-secondary-faint: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-faint));
65
+
66
+ --ty-color-success-strong: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-strong));
67
+ --ty-color-success-bold: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-bold));
68
+ --ty-color-success: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-base));
69
+ --ty-color-success-soft: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-soft));
70
+ --ty-color-success-faint: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-faint));
71
+
72
+ --ty-color-danger-strong: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-strong));
73
+ --ty-color-danger-bold: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-bold));
74
+ --ty-color-danger: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-base));
75
+ --ty-color-danger-soft: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-soft));
76
+ --ty-color-danger-faint: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-faint));
77
+
78
+ --ty-color-warning-strong: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-strong));
79
+ --ty-color-warning-bold: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-bold));
80
+ --ty-color-warning: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-base));
81
+ --ty-color-warning-soft: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-soft));
82
+ --ty-color-warning-faint: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-faint));
83
+
84
+ --ty-color-neutral-strong: var(--ty-ink-neutral);
85
+ --ty-color-neutral-bold: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 8%);
86
+ --ty-color-neutral: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 18%);
87
+ --ty-color-neutral-soft: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 45%);
88
+ --ty-color-neutral-faint: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 70%);
89
+
90
+ /* ---- text hierarchy (neutral ink → bg) ---- */
91
+ --ty-text-strong: var(--ty-ink-neutral);
92
+ --ty-text-bold: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 8%);
93
+ --ty-text: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 16%);
94
+ --ty-text-soft: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 40%);
95
+ --ty-text-faint: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 60%);
96
+
97
+ /* ---- soft background tints per flavor ---- */
98
+ --ty-bg-primary-bold: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-bgs-bold));
99
+ --ty-bg-primary: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-bgs-base));
100
+ --ty-bg-primary-soft: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-bgs-soft));
101
+
102
+ --ty-bg-secondary-bold: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-bgs-bold));
103
+ --ty-bg-secondary: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-bgs-base));
104
+ --ty-bg-secondary-soft: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-bgs-soft));
105
+
106
+ --ty-bg-success-bold: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-bgs-bold));
107
+ --ty-bg-success: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-bgs-base));
108
+ --ty-bg-success-soft: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-bgs-soft));
109
+
110
+ --ty-bg-danger-bold: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-bgs-bold));
111
+ --ty-bg-danger: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-bgs-base));
112
+ --ty-bg-danger-soft: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-bgs-soft));
113
+
114
+ --ty-bg-warning-bold: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-bgs-bold));
115
+ --ty-bg-warning: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-bgs-base));
116
+ --ty-bg-warning-soft: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-bgs-soft));
117
+
118
+ --ty-bg-neutral-bold: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) var(--ty-bgs-bold));
119
+ --ty-bg-neutral: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) var(--ty-bgs-base));
120
+ --ty-bg-neutral-soft: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) var(--ty-bgs-soft));
121
+
122
+ /* ---- generic bg / elevation ---- */
123
+ --ty-bg-faint: var(--ty-bg);
124
+ --ty-bg-soft: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 4%);
125
+ --ty-bg-bold: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 8%);
126
+ --ty-bg-strong: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 16%);
127
+ --ty-focus-ring-gap: var(--ty-bg);
128
+
129
+ /* ---- surfaces (elevate toward white in both themes) ---- */
130
+ --ty-surface-canvas: var(--ty-bg);
131
+ --ty-surface-content: color-mix(in oklab, var(--ty-bg), white 25%);
132
+ --ty-surface-elevated: color-mix(in oklab, var(--ty-bg), white 45%);
133
+ --ty-surface-floating: color-mix(in oklab, var(--ty-bg), white 60%);
134
+ --ty-surface-input: color-mix(in oklab, var(--ty-bg), white 30%);
135
+
136
+ /* ---- borders ---- */
137
+ --ty-border-strong: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 40%);
138
+ --ty-border-bold: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 22%);
139
+ --ty-border: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 14%);
140
+ --ty-border-soft: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 8%);
141
+ --ty-border-faint: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 4%);
142
+
143
+ --ty-border-primary: var(--ty-color-primary-soft);
144
+ --ty-border-secondary: var(--ty-color-secondary-soft);
145
+ --ty-border-success: var(--ty-color-success-soft);
146
+ --ty-border-danger: var(--ty-color-danger-soft);
147
+ --ty-border-warning: var(--ty-color-warning-soft);
148
+ --ty-border-neutral: var(--ty-color-neutral);
149
+
150
+ --ty-elevated-border: var(--ty-border);
151
+ --ty-floating-border: var(--ty-border);
152
+ --ty-content-border: var(--ty-border);
153
+ --ty-canvas-border: transparent;
154
+
155
+ /* ---- scrollbar (neutral ink → transparent; auto-flips) ---- */
156
+ --ty-scrollbar-thumb: color-mix(in srgb, var(--ty-ink-neutral) 35%, transparent);
157
+ --ty-scrollbar-thumb-hover: color-mix(in srgb, var(--ty-ink-neutral) 50%, transparent);
158
+ --ty-scrollbar-thumb-active: color-mix(in srgb, var(--ty-ink-neutral) 60%, transparent);
159
+ --ty-scrollbar-track: transparent;
160
+ --ty-scrollbar-track-hover: color-mix(in srgb, var(--ty-ink-neutral) 8%, transparent);
161
+
162
+ /* ---- modal ---- */
163
+ --ty-modal-bg: var(--ty-surface-floating);
164
+ --ty-modal-color: var(--ty-text);
165
+ --ty-modal-border: var(--ty-border);
166
+ --ty-modal-backdrop: color-mix(in oklab, black 50%, transparent);
167
+ --ty-modal-shadow: var(--ty-shadow-xl);
168
+
169
+ /* ---- inputs ---- */
170
+ --ty-input-bg: var(--ty-surface-input);
171
+ --ty-input-color: var(--ty-text);
172
+ --ty-input-border: var(--ty-border-bold);
173
+ --ty-input-border-hover: var(--ty-border-strong);
174
+ --ty-input-border-focus: var(--ty-color-primary);
175
+ --ty-input-shadow-focus: color-mix(in srgb, var(--ty-color-primary) 12%, transparent);
176
+ --ty-input-placeholder: var(--ty-text-faint);
177
+ --ty-input-disabled-bg: var(--ty-bg-soft);
178
+ --ty-input-disabled-border: var(--ty-border);
179
+ --ty-input-disabled-color: var(--ty-text-faint);
180
+ --ty-label-color: var(--ty-text-soft);
181
+ --ty-input-success-border: var(--ty-color-success);
182
+ --ty-input-danger-border: var(--ty-color-danger);
183
+ --ty-input-warning-border: var(--ty-color-warning);
184
+
185
+ /* ====================== SOLID ====================== */
186
+ /* base fill = flavor ink; states via OKLCH L offsets (same axes as the
187
+ other engines). theme dim/desaturate via the dark block re-points ink. */
188
+ --ty-solid-hover-l: -0.04;
189
+ --ty-solid-active-l: -0.08;
190
+ --ty-solid-strong-l: -0.06;
191
+ --ty-solid-soft-l: 0.1;
192
+ /* solid fill lightness — PINNED, not the text ink (which flips light on dark).
193
+ Keeps fills a saturated mid so white fg stays legible in both themes. */
194
+ --ty-solid-base-l: 0.55;
195
+
196
+ --ty-solid-primary: oklch(from var(--ty-ink-primary) var(--ty-solid-base-l) c h);
197
+ --ty-solid-secondary: oklch(from var(--ty-ink-secondary) var(--ty-solid-base-l) c h);
198
+ --ty-solid-success: oklch(from var(--ty-ink-success) var(--ty-solid-base-l) c h);
199
+ --ty-solid-danger: oklch(from var(--ty-ink-danger) var(--ty-solid-base-l) c h);
200
+ --ty-solid-warning: oklch(from var(--ty-ink-warning) var(--ty-solid-base-l) c h);
201
+ --ty-solid-neutral: oklch(from var(--ty-ink-neutral) 0.4 c h);
202
+
203
+ --ty-solid-primary-fg: white;
204
+ --ty-solid-secondary-fg: white;
205
+ --ty-solid-success-fg: white;
206
+ --ty-solid-danger-fg: white;
207
+ --ty-solid-warning-fg: white;
208
+ --ty-solid-neutral-fg: white;
209
+
210
+ --ty-solid-primary-hover: oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-hover-l)) c h);
211
+ --ty-solid-primary-active: oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-active-l)) c h);
212
+ --ty-solid-primary-strong: oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-strong-l)) c h);
213
+ --ty-solid-primary-soft: oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-soft-l)) c h);
214
+
215
+ --ty-solid-secondary-hover: oklch(from var(--ty-solid-secondary) calc(l + var(--ty-solid-hover-l)) c h);
216
+ --ty-solid-secondary-active: oklch(from var(--ty-solid-secondary) calc(l + var(--ty-solid-active-l)) c h);
217
+ --ty-solid-secondary-strong: oklch(from var(--ty-solid-secondary) calc(l + var(--ty-solid-strong-l)) c h);
218
+ --ty-solid-secondary-soft: oklch(from var(--ty-solid-secondary) calc(l + var(--ty-solid-soft-l)) c h);
219
+
220
+ --ty-solid-success-hover: oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-hover-l)) c h);
221
+ --ty-solid-success-active: oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-active-l)) c h);
222
+ --ty-solid-success-strong: oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-strong-l)) c h);
223
+ --ty-solid-success-soft: oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-soft-l)) c h);
224
+
225
+ --ty-solid-danger-hover: oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-hover-l)) c h);
226
+ --ty-solid-danger-active: oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-active-l)) c h);
227
+ --ty-solid-danger-strong: oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-strong-l)) c h);
228
+ --ty-solid-danger-soft: oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-soft-l)) c h);
229
+
230
+ --ty-solid-warning-hover: oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-hover-l)) c h);
231
+ --ty-solid-warning-active: oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-active-l)) c h);
232
+ --ty-solid-warning-strong: oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-strong-l)) c h);
233
+ --ty-solid-warning-soft: oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-soft-l)) c h);
234
+
235
+ --ty-solid-neutral-hover: oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-hover-l)) c h);
236
+ --ty-solid-neutral-active: oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-active-l)) c h);
237
+ --ty-solid-neutral-strong: oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-strong-l)) c h);
238
+ --ty-solid-neutral-soft: oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-soft-l)) c h);
239
+ }
240
+
241
+ /* =====================================================================
242
+ * DARK — re-point the anchors ONLY. The whole palette above re-derives.
243
+ * Inks go lighter (emphasis inverts); page goes dark.
244
+ * ===================================================================== */
245
+ html.dark,
246
+ html[data-theme="dark"] {
247
+ --ty-bg: oklch(0.16 0.012 250);
248
+ --ty-ink-primary: oklch(0.80 0.12 250);
249
+ --ty-ink-secondary: oklch(0.80 0.13 300);
250
+ --ty-ink-success: oklch(0.80 0.11 150);
251
+ --ty-ink-danger: oklch(0.78 0.14 25);
252
+ --ty-ink-warning: oklch(0.84 0.13 75);
253
+ --ty-ink-neutral: oklch(0.88 0.008 250);
254
+
255
+ /* solids: dim the pinned fill slightly against the dark canvas */
256
+ --ty-solid-base-l: 0.50;
257
+ }
package/css/tyrell.css CHANGED
@@ -352,50 +352,58 @@ COMPONENT TOKENS
352
352
  --ty-input-warning-border: var(--ty-color-warning);
353
353
 
354
354
  /* =================================================================
355
- SOLID BUTTON FILLS — saturated brand backgrounds for appearance="solid"
356
- Each flavor defines:
357
- --ty-solid-{flavor} base saturated fill
358
- --ty-solid-{flavor}-strong stronger fill (for solid+ tone)
359
- --ty-solid-{flavor}-soft softer fill (for solid- tone)
360
- --ty-solid-{flavor}-fg paired text color (default white)
361
- Strong/soft default to var(--ty-color-{flavor}-strong/-soft) so they
362
- inherit from the existing color hierarchy. Override per flavor if needed.
355
+ SOLID BUTTON FILLS — plain default values (the contract). The smart
356
+ per-state derivation (hover/active/tone via OKLCH) lives in the theme
357
+ engines (tyrell-brand.css / tyrell-simple.css), not here. hover/active
358
+ alias to -strong as a simple default; a theme overrides them.
363
359
  ================================================================= */
364
360
 
365
361
  /* Primary */
366
362
  --ty-solid-primary: #4076b9;
367
363
  --ty-solid-primary-strong: var(--ty-color-primary-bold);
368
364
  --ty-solid-primary-soft: #7ea7d9;
365
+ --ty-solid-primary-hover: var(--ty-solid-primary-strong);
366
+ --ty-solid-primary-active: var(--ty-solid-primary-strong);
369
367
  --ty-solid-primary-fg: white;
370
368
 
371
369
  /* Secondary */
372
370
  --ty-solid-secondary: #7e67b4;
373
371
  --ty-solid-secondary-strong: #7d58d1;
374
372
  --ty-solid-secondary-soft: #9f8ec5;
373
+ --ty-solid-secondary-hover: var(--ty-solid-secondary-strong);
374
+ --ty-solid-secondary-active: var(--ty-solid-secondary-strong);
375
375
  --ty-solid-secondary-fg: white;
376
376
 
377
377
  /* Success */
378
378
  --ty-solid-success: #3bb68d;
379
379
  --ty-solid-success-strong: #27956e;
380
380
  --ty-solid-success-soft: #69b99e;
381
+ --ty-solid-success-hover: var(--ty-solid-success-strong);
382
+ --ty-solid-success-active: var(--ty-solid-success-strong);
381
383
  --ty-solid-success-fg: white;
382
384
 
383
385
  /* Danger */
384
386
  --ty-solid-danger: #df5b5b;
385
387
  --ty-solid-danger-strong: #cc3e3e;
386
388
  --ty-solid-danger-soft: #d57a7a;
389
+ --ty-solid-danger-hover: var(--ty-solid-danger-strong);
390
+ --ty-solid-danger-active: var(--ty-solid-danger-strong);
387
391
  --ty-solid-danger-fg: white;
388
392
 
389
393
  /* Warning */
390
394
  --ty-solid-warning: #e1a644;
391
395
  --ty-solid-warning-strong: #f59e0b;
392
396
  --ty-solid-warning-soft: #fbc56d;
397
+ --ty-solid-warning-hover: var(--ty-solid-warning-strong);
398
+ --ty-solid-warning-active: var(--ty-solid-warning-strong);
393
399
  --ty-solid-warning-fg: white;
394
400
 
395
401
  /* Neutral */
396
402
  --ty-solid-neutral: #414141;
397
403
  --ty-solid-neutral-strong: #000000;
398
404
  --ty-solid-neutral-soft: #6e6e6e;
405
+ --ty-solid-neutral-hover: var(--ty-solid-neutral-strong);
406
+ --ty-solid-neutral-active: var(--ty-solid-neutral-strong);
399
407
  --ty-solid-neutral-fg: white;
400
408
 
401
409
  /* =================================================================
@@ -695,42 +703,48 @@ Emphasis logic inverts: lighter = more emphasis
695
703
  0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
696
704
  --ty-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
697
705
 
698
- /* Solid button fills for dark mode — strong/soft/fg chain through automatically.
699
- Note: --ty-color-{flavor}-strong is light-toned in dark mode (emphasis
700
- inverts), so solid+ buttons will have a light bg with white text — low
701
- contrast for some flavors. Override per flavor via --ty-solid-{flavor}-fg
702
- if a specific brand needs darker text. */
706
+ /* Solid button fills — plain dark defaults. hover/active alias -strong;
707
+ theme engines override with smart per-state derivation. */
703
708
  --ty-solid-primary: #3e536c;
704
709
  --ty-solid-primary-strong: #426084;
705
710
  --ty-solid-primary-soft: #343f4c;
711
+ --ty-solid-primary-hover: var(--ty-solid-primary-strong);
712
+ --ty-solid-primary-active: var(--ty-solid-primary-strong);
706
713
  --ty-solid-primary-fg: white;
707
714
 
708
715
  --ty-solid-secondary: #7e67b4;
709
716
  --ty-solid-secondary-strong: #8269bc;
710
717
  --ty-solid-secondary-soft: #52466a;
718
+ --ty-solid-secondary-hover: var(--ty-solid-secondary-strong);
719
+ --ty-solid-secondary-active: var(--ty-solid-secondary-strong);
711
720
  --ty-solid-secondary-fg: white;
712
721
 
713
- /* Success */
714
722
  --ty-solid-success: #3bb68d;
715
723
  --ty-solid-success-strong: #459679;
716
724
  --ty-solid-success-soft: #285748;
725
+ --ty-solid-success-hover: var(--ty-solid-success-strong);
726
+ --ty-solid-success-active: var(--ty-solid-success-strong);
717
727
  --ty-solid-success-fg: white;
718
728
 
719
- /* Danger */
720
729
  --ty-solid-danger: #df5b5b;
721
730
  --ty-solid-danger-strong: #cc3e3e;
722
731
  --ty-solid-danger-soft: #875656;
732
+ --ty-solid-danger-hover: var(--ty-solid-danger-strong);
733
+ --ty-solid-danger-active: var(--ty-solid-danger-strong);
723
734
  --ty-solid-danger-fg: white;
724
735
 
725
- /* Warning */
726
736
  --ty-solid-warning: #e1a644;
727
737
  --ty-solid-warning-strong: #f59e0b;
728
738
  --ty-solid-warning-soft: #8b6334;
739
+ --ty-solid-warning-hover: var(--ty-solid-warning-strong);
740
+ --ty-solid-warning-active: var(--ty-solid-warning-strong);
729
741
  --ty-solid-warning-fg: white;
730
742
 
731
743
  --ty-solid-neutral: #414141;
732
744
  --ty-solid-neutral-strong: #4c4c4c;
733
745
  --ty-solid-neutral-soft: #2a2a2a;
746
+ --ty-solid-neutral-hover: var(--ty-solid-neutral-strong);
747
+ --ty-solid-neutral-active: var(--ty-solid-neutral-strong);
734
748
  --ty-solid-neutral-fg: white;
735
749
 
736
750
  /* Input component tokens - dark mode */