tyrell-components 1.0.0-TC41 → 1.0.0-TC43
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 +1 -0
- package/css/tyrell-colors-static.css +316 -0
- package/css/tyrell-theme.css +116 -76
- package/css/tyrell.css +54 -333
- package/dist/tyrell-colors-static.css +316 -0
- package/dist/tyrell-theme.css +116 -76
- package/dist/tyrell.css +54 -333
- package/dist/tyrell.js +1 -1
- package/lib/styles/button.d.ts +35 -5
- package/lib/styles/button.d.ts.map +1 -1
- package/lib/styles/button.js +170 -38
- package/lib/styles/button.js.map +1 -1
- package/lib/styles/select-base.d.ts.map +1 -1
- package/lib/styles/select-base.js +18 -4
- package/lib/styles/select-base.js.map +1 -1
- package/lib/styles/select.d.ts +1 -1
- package/lib/styles/select.d.ts.map +1 -1
- package/lib/styles/select.js +1 -0
- package/lib/styles/select.js.map +1 -1
- package/lib/styles/tag.d.ts.map +1 -1
- package/lib/styles/tag.js +4 -1
- package/lib/styles/tag.js.map +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
/* =================================================================
|
|
2
|
+
Tyrell Static Colors — hardcoded fallback color tokens
|
|
3
|
+
|
|
4
|
+
Every --ty-color-*, --ty-bg-{flavor}-*, --ty-border-*, --ty-surface-*,
|
|
5
|
+
--ty-text-*, --ty-input-{color-related}-* and --ty-solid-* token tyrell.css
|
|
6
|
+
used to hardcode directly, now split out here. Load this file alongside
|
|
7
|
+
tyrell.css if you want static, no-theme-engine colors.
|
|
8
|
+
|
|
9
|
+
If you want dynamic theming (custom seeds, live theme switching, per-flavor
|
|
10
|
+
tuning), load tyrell-theme.css INSTEAD — it defines the same token names via
|
|
11
|
+
oklch() formulas and, loaded after tyrell.css, wins by source order. Loading
|
|
12
|
+
both is harmless (tyrell-theme.css always wins) but redundant.
|
|
13
|
+
================================================================= */
|
|
14
|
+
|
|
15
|
+
html {
|
|
16
|
+
/* Primary */
|
|
17
|
+
--ty-color-primary-strong: #163793;
|
|
18
|
+
--ty-color-primary-bold: #304c9f;
|
|
19
|
+
--ty-color-primary: #466bce;
|
|
20
|
+
--ty-color-primary-soft: #60a5fa;
|
|
21
|
+
--ty-color-primary-faint: #93c5fd;
|
|
22
|
+
|
|
23
|
+
/* Success */
|
|
24
|
+
--ty-color-success-strong: #177858;
|
|
25
|
+
--ty-color-success-bold: #3e9779;
|
|
26
|
+
--ty-color-success: #3eaa86;
|
|
27
|
+
--ty-color-success-soft: #64b399;
|
|
28
|
+
--ty-color-success-faint: #7fd4b2;
|
|
29
|
+
|
|
30
|
+
/* Danger */
|
|
31
|
+
--ty-color-danger-strong: #b91c1c;
|
|
32
|
+
--ty-color-danger-bold: #dc2626;
|
|
33
|
+
--ty-color-danger: #ef4444;
|
|
34
|
+
--ty-color-danger-soft: #f87171;
|
|
35
|
+
--ty-color-danger-faint: #fca5a5;
|
|
36
|
+
|
|
37
|
+
/* Warning */
|
|
38
|
+
--ty-color-warning-strong: #e86400;
|
|
39
|
+
--ty-color-warning-bold: #ee7f00;
|
|
40
|
+
--ty-color-warning: #f59e0b;
|
|
41
|
+
--ty-color-warning-soft: #fbbf24;
|
|
42
|
+
--ty-color-warning-faint: #fcd34d;
|
|
43
|
+
|
|
44
|
+
/* Neutral */
|
|
45
|
+
--ty-color-neutral-strong: #000000;
|
|
46
|
+
--ty-color-neutral-bold: #000000;
|
|
47
|
+
--ty-color-neutral: #111827;
|
|
48
|
+
--ty-color-neutral-soft: #374151;
|
|
49
|
+
--ty-color-neutral-faint: #9ca3af;
|
|
50
|
+
|
|
51
|
+
/* Semantic backgrounds */
|
|
52
|
+
--ty-bg-primary: #e3eefc;
|
|
53
|
+
--ty-bg-primary-bold: #d5e4f8;
|
|
54
|
+
--ty-bg-primary-soft: #eff6ff;
|
|
55
|
+
--ty-bg-success: #d1fae5;
|
|
56
|
+
--ty-bg-success-bold: #a7f3d0;
|
|
57
|
+
--ty-bg-success-soft: #ecfdf5;
|
|
58
|
+
--ty-bg-danger: #fee2e2;
|
|
59
|
+
--ty-bg-danger-bold: #fecaca;
|
|
60
|
+
--ty-bg-danger-soft: #fef2f2;
|
|
61
|
+
--ty-bg-warning: #fef3c7;
|
|
62
|
+
--ty-bg-warning-bold: #fde68a;
|
|
63
|
+
--ty-bg-warning-soft: #fffbeb;
|
|
64
|
+
--ty-bg-neutral: #e0e0e0;
|
|
65
|
+
--ty-bg-neutral-bold: #cecece;
|
|
66
|
+
--ty-bg-neutral-soft: #ededed;
|
|
67
|
+
|
|
68
|
+
/* Borders */
|
|
69
|
+
--ty-border: #e5e7eb;
|
|
70
|
+
--ty-border-bold: #d1d5db;
|
|
71
|
+
--ty-border-strong: #6b7280;
|
|
72
|
+
--ty-border-soft: #f3f4f6;
|
|
73
|
+
--ty-border-faint: #fafafa;
|
|
74
|
+
|
|
75
|
+
/* Semantic borders */
|
|
76
|
+
--ty-border-primary: var(--ty-color-primary);
|
|
77
|
+
--ty-border-success: var(--ty-color-success);
|
|
78
|
+
--ty-border-danger: var(--ty-color-danger);
|
|
79
|
+
--ty-border-warning: var(--ty-color-warning);
|
|
80
|
+
--ty-border-neutral: var(--ty-color-neutral);
|
|
81
|
+
|
|
82
|
+
/* Surfaces */
|
|
83
|
+
--ty-surface-canvas: #fcfcfc;
|
|
84
|
+
--ty-surface-content: #ffffff;
|
|
85
|
+
--ty-surface-elevated: #ffffff;
|
|
86
|
+
--ty-surface-floating: #ffffff;
|
|
87
|
+
--ty-surface-input: #ffffff;
|
|
88
|
+
|
|
89
|
+
/* Surface borders */
|
|
90
|
+
--ty-elevated-border: #e5e7eb;
|
|
91
|
+
--ty-floating-border: #e5e7eb;
|
|
92
|
+
--ty-content-border: #e5e7eb;
|
|
93
|
+
|
|
94
|
+
/* Text hierarchy */
|
|
95
|
+
--ty-text: #111827;
|
|
96
|
+
--ty-text-bold: #000000;
|
|
97
|
+
--ty-text-strong: #000000;
|
|
98
|
+
--ty-text-soft: #374151;
|
|
99
|
+
--ty-text-faint: #9ca3af;
|
|
100
|
+
|
|
101
|
+
/* Input component tokens */
|
|
102
|
+
--ty-input-bg: #ffffff;
|
|
103
|
+
--ty-input-color: #111827;
|
|
104
|
+
--ty-input-border: #e5e7eb;
|
|
105
|
+
--ty-input-border-hover: #d1d5db;
|
|
106
|
+
--ty-input-border-focus: var(--ty-color-primary);
|
|
107
|
+
--ty-input-shadow-focus: rgba(59, 130, 246, 0.1);
|
|
108
|
+
--ty-input-placeholder: #9ca3af;
|
|
109
|
+
--ty-input-disabled-bg: #f9fafb;
|
|
110
|
+
--ty-input-disabled-border: #e5e7eb;
|
|
111
|
+
--ty-input-disabled-color: #9ca3af;
|
|
112
|
+
|
|
113
|
+
/* Input semantic state borders */
|
|
114
|
+
--ty-input-success-border: var(--ty-color-success-soft);
|
|
115
|
+
--ty-input-danger-border: var(--ty-color-danger-soft);
|
|
116
|
+
--ty-input-warning-border: var(--ty-color-warning-soft);
|
|
117
|
+
|
|
118
|
+
/* Solid button fills — Primary */
|
|
119
|
+
--ty-solid-primary: #4076b9;
|
|
120
|
+
--ty-solid-primary-strong: var(--ty-color-primary-bold);
|
|
121
|
+
--ty-solid-primary-soft: #7ea7d9;
|
|
122
|
+
--ty-solid-primary-hover: var(--ty-solid-primary-strong);
|
|
123
|
+
--ty-solid-primary-active: var(--ty-solid-primary-strong);
|
|
124
|
+
--ty-solid-primary-fg: white;
|
|
125
|
+
--ty-solid-primary-strong-fg: white;
|
|
126
|
+
--ty-solid-primary-soft-fg: black;
|
|
127
|
+
|
|
128
|
+
/* Solid button fills — Success */
|
|
129
|
+
--ty-solid-success: #3bb68d;
|
|
130
|
+
--ty-solid-success-strong: #27956e;
|
|
131
|
+
--ty-solid-success-soft: #69b99e;
|
|
132
|
+
--ty-solid-success-hover: var(--ty-solid-success-strong);
|
|
133
|
+
--ty-solid-success-active: var(--ty-solid-success-strong);
|
|
134
|
+
--ty-solid-success-fg: black;
|
|
135
|
+
--ty-solid-success-strong-fg: black;
|
|
136
|
+
--ty-solid-success-soft-fg: black;
|
|
137
|
+
|
|
138
|
+
/* Solid button fills — Danger */
|
|
139
|
+
--ty-solid-danger: #df5b5b;
|
|
140
|
+
--ty-solid-danger-strong: #cc3e3e;
|
|
141
|
+
--ty-solid-danger-soft: #d57a7a;
|
|
142
|
+
--ty-solid-danger-hover: var(--ty-solid-danger-strong);
|
|
143
|
+
--ty-solid-danger-active: var(--ty-solid-danger-strong);
|
|
144
|
+
--ty-solid-danger-fg: black;
|
|
145
|
+
--ty-solid-danger-strong-fg: white;
|
|
146
|
+
--ty-solid-danger-soft-fg: black;
|
|
147
|
+
|
|
148
|
+
/* Solid button fills — Warning */
|
|
149
|
+
--ty-solid-warning: #e1a644;
|
|
150
|
+
--ty-solid-warning-strong: #f59e0b;
|
|
151
|
+
--ty-solid-warning-soft: #fbc56d;
|
|
152
|
+
--ty-solid-warning-hover: var(--ty-solid-warning-strong);
|
|
153
|
+
--ty-solid-warning-active: var(--ty-solid-warning-strong);
|
|
154
|
+
--ty-solid-warning-fg: black;
|
|
155
|
+
--ty-solid-warning-strong-fg: black;
|
|
156
|
+
--ty-solid-warning-soft-fg: black;
|
|
157
|
+
|
|
158
|
+
/* Solid button fills — Neutral */
|
|
159
|
+
--ty-solid-neutral: #414141;
|
|
160
|
+
--ty-solid-neutral-strong: #000000;
|
|
161
|
+
--ty-solid-neutral-soft: #6e6e6e;
|
|
162
|
+
--ty-solid-neutral-hover: var(--ty-solid-neutral-strong);
|
|
163
|
+
--ty-solid-neutral-active: var(--ty-solid-neutral-strong);
|
|
164
|
+
--ty-solid-neutral-fg: white;
|
|
165
|
+
--ty-solid-neutral-strong-fg: white;
|
|
166
|
+
--ty-solid-neutral-soft-fg: white;
|
|
167
|
+
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* =================================================================
|
|
171
|
+
DARK THEME OVERRIDES
|
|
172
|
+
================================================================= */
|
|
173
|
+
|
|
174
|
+
html.dark,
|
|
175
|
+
html[data-theme="dark"] {
|
|
176
|
+
/* Primary */
|
|
177
|
+
--ty-color-primary-strong: #9cbde5;
|
|
178
|
+
--ty-color-primary-bold: #6c9bd5;
|
|
179
|
+
--ty-color-primary: #4976ae;
|
|
180
|
+
--ty-color-primary-soft: #4b698b;
|
|
181
|
+
--ty-color-primary-faint: #445b77;
|
|
182
|
+
|
|
183
|
+
/* Success */
|
|
184
|
+
--ty-color-success-strong: #c2f0df;
|
|
185
|
+
--ty-color-success-bold: #6ee7b7;
|
|
186
|
+
--ty-color-success: #3aba8b;
|
|
187
|
+
--ty-color-success-soft: #459679;
|
|
188
|
+
--ty-color-success-faint: #1b795c;
|
|
189
|
+
|
|
190
|
+
/* Danger */
|
|
191
|
+
--ty-color-danger-strong: #ffabab;
|
|
192
|
+
--ty-color-danger-bold: #e58787;
|
|
193
|
+
--ty-color-danger: #d06f6f;
|
|
194
|
+
--ty-color-danger-soft: #b06666;
|
|
195
|
+
--ty-color-danger-faint: #aa6e6e;
|
|
196
|
+
|
|
197
|
+
/* Warning */
|
|
198
|
+
--ty-color-warning-strong: #fde68a;
|
|
199
|
+
--ty-color-warning-bold: #fcd34d;
|
|
200
|
+
--ty-color-warning: #fbbf24;
|
|
201
|
+
--ty-color-warning-soft: #f59e0b;
|
|
202
|
+
--ty-color-warning-faint: #a06726;
|
|
203
|
+
|
|
204
|
+
/* Neutral */
|
|
205
|
+
--ty-color-neutral-strong: #ffffff;
|
|
206
|
+
--ty-color-neutral-bold: #f9fafb;
|
|
207
|
+
--ty-color-neutral: #d6d6d6;
|
|
208
|
+
--ty-color-neutral-soft: #696969;
|
|
209
|
+
--ty-color-neutral-faint: #474747;
|
|
210
|
+
|
|
211
|
+
/* Semantic backgrounds */
|
|
212
|
+
--ty-bg-primary: #394159;
|
|
213
|
+
--ty-bg-primary-bold: #43517a;
|
|
214
|
+
--ty-bg-primary-soft: #323a4f;
|
|
215
|
+
--ty-bg-success: #3a4442;
|
|
216
|
+
--ty-bg-success-bold: #405752;
|
|
217
|
+
--ty-bg-success-soft: #2f3b38;
|
|
218
|
+
--ty-bg-danger: #522828;
|
|
219
|
+
--ty-bg-danger-bold: #853535;
|
|
220
|
+
--ty-bg-danger-soft: #483c3c;
|
|
221
|
+
--ty-bg-warning: #694555;
|
|
222
|
+
--ty-bg-warning-bold: #743953;
|
|
223
|
+
--ty-bg-warning-soft: #45333b;
|
|
224
|
+
--ty-bg-neutral: #323232;
|
|
225
|
+
--ty-bg-neutral-bold: #414141;
|
|
226
|
+
--ty-bg-neutral-soft: #242424;
|
|
227
|
+
|
|
228
|
+
/* Borders */
|
|
229
|
+
--ty-border: #3e3e3e;
|
|
230
|
+
--ty-border-bold: #666666;
|
|
231
|
+
--ty-border-strong: #8c8c8c;
|
|
232
|
+
--ty-border-soft: #1f2937;
|
|
233
|
+
--ty-border-faint: #030712;
|
|
234
|
+
|
|
235
|
+
/* Surfaces */
|
|
236
|
+
--ty-surface-canvas: black;
|
|
237
|
+
--ty-surface-content: #1a1a1a;
|
|
238
|
+
--ty-surface-elevated: #282828;
|
|
239
|
+
--ty-surface-floating: #343434;
|
|
240
|
+
--ty-surface-input: #1f2937;
|
|
241
|
+
|
|
242
|
+
/* Surface borders */
|
|
243
|
+
--ty-elevated-border: #414141;
|
|
244
|
+
--ty-floating-border: #494949;
|
|
245
|
+
--ty-content-border: #030712;
|
|
246
|
+
|
|
247
|
+
/* Text hierarchy */
|
|
248
|
+
--ty-text: #d6d6d6;
|
|
249
|
+
--ty-text-bold: #f9fafb;
|
|
250
|
+
--ty-text-strong: #ffffff;
|
|
251
|
+
--ty-text-soft: #7f8590;
|
|
252
|
+
--ty-text-faint: #555a63;
|
|
253
|
+
|
|
254
|
+
/* Input component tokens */
|
|
255
|
+
--ty-input-bg: #1b1b1b;
|
|
256
|
+
--ty-input-color: #f9fafb;
|
|
257
|
+
--ty-input-border: #3a3a3a;
|
|
258
|
+
--ty-input-border-hover: #505050;
|
|
259
|
+
--ty-input-border-focus: var(--ty-color-primary);
|
|
260
|
+
--ty-input-shadow-focus: rgba(96, 165, 250, 0.1);
|
|
261
|
+
--ty-input-placeholder: #717171;
|
|
262
|
+
--ty-input-disabled-bg: #282828;
|
|
263
|
+
--ty-input-disabled-border: #2e2e2e;
|
|
264
|
+
--ty-input-disabled-color: #717171;
|
|
265
|
+
|
|
266
|
+
/* Solid button fills — Primary */
|
|
267
|
+
--ty-solid-primary: #3e536c;
|
|
268
|
+
--ty-solid-primary-strong: #426084;
|
|
269
|
+
--ty-solid-primary-soft: #343f4c;
|
|
270
|
+
--ty-solid-primary-hover: var(--ty-solid-primary-strong);
|
|
271
|
+
--ty-solid-primary-active: var(--ty-solid-primary-strong);
|
|
272
|
+
--ty-solid-primary-fg: white;
|
|
273
|
+
--ty-solid-primary-strong-fg: white;
|
|
274
|
+
--ty-solid-primary-soft-fg: white;
|
|
275
|
+
|
|
276
|
+
/* Solid button fills — Success */
|
|
277
|
+
--ty-solid-success: #3bb68d;
|
|
278
|
+
--ty-solid-success-strong: #459679;
|
|
279
|
+
--ty-solid-success-soft: #285748;
|
|
280
|
+
--ty-solid-success-hover: var(--ty-solid-success-strong);
|
|
281
|
+
--ty-solid-success-active: var(--ty-solid-success-strong);
|
|
282
|
+
--ty-solid-success-fg: black;
|
|
283
|
+
--ty-solid-success-strong-fg: black;
|
|
284
|
+
--ty-solid-success-soft-fg: white;
|
|
285
|
+
|
|
286
|
+
/* Solid button fills — Danger */
|
|
287
|
+
--ty-solid-danger: #df5b5b;
|
|
288
|
+
--ty-solid-danger-strong: #cc3e3e;
|
|
289
|
+
--ty-solid-danger-soft: #875656;
|
|
290
|
+
--ty-solid-danger-hover: var(--ty-solid-danger-strong);
|
|
291
|
+
--ty-solid-danger-active: var(--ty-solid-danger-strong);
|
|
292
|
+
--ty-solid-danger-fg: black;
|
|
293
|
+
--ty-solid-danger-strong-fg: white;
|
|
294
|
+
--ty-solid-danger-soft-fg: white;
|
|
295
|
+
|
|
296
|
+
/* Solid button fills — Warning */
|
|
297
|
+
--ty-solid-warning: #e1a644;
|
|
298
|
+
--ty-solid-warning-strong: #f59e0b;
|
|
299
|
+
--ty-solid-warning-soft: #8b6334;
|
|
300
|
+
--ty-solid-warning-hover: var(--ty-solid-warning-strong);
|
|
301
|
+
--ty-solid-warning-active: var(--ty-solid-warning-strong);
|
|
302
|
+
--ty-solid-warning-fg: black;
|
|
303
|
+
--ty-solid-warning-strong-fg: black;
|
|
304
|
+
--ty-solid-warning-soft-fg: white;
|
|
305
|
+
|
|
306
|
+
/* Solid button fills — Neutral */
|
|
307
|
+
--ty-solid-neutral: #414141;
|
|
308
|
+
--ty-solid-neutral-strong: #f5f5f5;
|
|
309
|
+
--ty-solid-neutral-soft: #2a2a2a;
|
|
310
|
+
--ty-solid-neutral-hover: #4c4c4c;
|
|
311
|
+
--ty-solid-neutral-active: #4c4c4c;
|
|
312
|
+
--ty-solid-neutral-fg: white;
|
|
313
|
+
--ty-solid-neutral-strong-fg: black;
|
|
314
|
+
--ty-solid-neutral-soft-fg: white;
|
|
315
|
+
|
|
316
|
+
}
|
package/css/tyrell-theme.css
CHANGED
|
@@ -108,7 +108,6 @@
|
|
|
108
108
|
* Bump to ~0.005 (light) / ~0.012 (dark) to warm surfaces toward brand. */
|
|
109
109
|
--ty-surface-chroma: 0;
|
|
110
110
|
|
|
111
|
-
|
|
112
111
|
/* ----------------------------------------------------------------
|
|
113
112
|
* Tier 2 — PER-FLAVOR ANCHORS
|
|
114
113
|
* Semantic colors (success/warning/danger/neutral) have their own
|
|
@@ -118,7 +117,6 @@
|
|
|
118
117
|
* --ty-warning-chroma: 0.2; (more vivid)
|
|
119
118
|
* --------------------------------------------------------------*/
|
|
120
119
|
|
|
121
|
-
|
|
122
120
|
--ty-success-hue: 145;
|
|
123
121
|
--ty-success-chroma: calc(var(--ty-brand-chroma) * 1.08);
|
|
124
122
|
|
|
@@ -192,6 +190,11 @@
|
|
|
192
190
|
--ty-l-surface-input: 1;
|
|
193
191
|
|
|
194
192
|
--ty-l-solid-neutral: 0.4; /* the neutral "ink" fill — dark in BOTH modes */
|
|
193
|
+
/* neutral+ is FULL-CONTRAST ink — near-black on light, near-white on dark
|
|
194
|
+
(mode block below) — not "anchor + shared offset" like other tones: the
|
|
195
|
+
max-emphasis monochrome button is an absolute, not a nudge. Matches the
|
|
196
|
+
static tyrell.css light value (#000) that predates this dial. */
|
|
197
|
+
--ty-l-solid-neutral-strong: 0.15;
|
|
195
198
|
--ty-l-bg-neutral-strong: 0.25; /* opposes the mode: dark bg on light page */
|
|
196
199
|
--ty-l-bg-neutral-faint: 0.99; /* follows the mode */
|
|
197
200
|
--ty-c-bg-neutral-faint-mult: 0.4;
|
|
@@ -264,6 +267,17 @@
|
|
|
264
267
|
--ty-solid-l: 0; /* lightness offset — negative dims */
|
|
265
268
|
--ty-solid-c: 1; /* chroma multiplier — <1 desaturates */
|
|
266
269
|
--ty-solid-h: 0; /* hue offset (deg) */
|
|
270
|
+
|
|
271
|
+
/* Axis C — per-flavor solid anchor lift (added to the base fill's L,
|
|
272
|
+
* tones/hover/active then derive from the lifted anchor). The solid
|
|
273
|
+
* ladder's "darker = stronger" is FALSE for the yellow family: darkened
|
|
274
|
+
* hue-75 is brown, so warning's whole ladder shifts UP instead — soft
|
|
275
|
+
* 0.82 pale amber, base 0.72 vivid orange, strong 0.66 deep orange, all
|
|
276
|
+
* black-text (Material treats amber the same way). Other flavors: 0. */
|
|
277
|
+
--ty-primary-solid-l: 0;
|
|
278
|
+
--ty-success-solid-l: 0;
|
|
279
|
+
--ty-warning-solid-l: 0.1;
|
|
280
|
+
--ty-danger-solid-l: 0;
|
|
267
281
|
}
|
|
268
282
|
|
|
269
283
|
/* Dark mode overrides for the L-curve and saturation curve. Tier 1 + 2
|
|
@@ -310,7 +324,8 @@ html[data-theme="dark"],
|
|
|
310
324
|
--ty-l-surface-floating: 0.22;
|
|
311
325
|
--ty-l-surface-input: 0.18;
|
|
312
326
|
|
|
313
|
-
--ty-l-solid-neutral: 0.
|
|
327
|
+
--ty-l-solid-neutral: 0.18;
|
|
328
|
+
--ty-l-solid-neutral-strong: 0.88; /* inverted ink: white button, black text */
|
|
314
329
|
--ty-l-bg-neutral-strong: 0.95;
|
|
315
330
|
--ty-l-bg-neutral-faint: 0.15;
|
|
316
331
|
--ty-c-bg-neutral-faint-mult: 2;
|
|
@@ -335,14 +350,21 @@ html[data-theme="dark"],
|
|
|
335
350
|
/* Tier 6 dark — interaction offsets flip sign (press LIGHTENS on dark),
|
|
336
351
|
* and the per-theme adjust dims + desaturates the fills against the
|
|
337
352
|
* dark canvas. (Computed solid tokens are declared once at html:root.) */
|
|
338
|
-
|
|
339
|
-
|
|
353
|
+
/* Bigger than light mode's 0.04/0.08: small L deltas at the dark end of
|
|
354
|
+
* an emissive screen read much weaker than the same delta mid-scale, so
|
|
355
|
+
* dark hover needs more push to be felt at all. */
|
|
356
|
+
--ty-solid-hover-l: 0.07; /* :hover */
|
|
357
|
+
--ty-solid-active-l: 0.11; /* :active */
|
|
340
358
|
--ty-solid-strong-l: 0.06; /* tone+ */
|
|
341
359
|
--ty-solid-soft-l: -0.1; /* tone- */
|
|
342
360
|
|
|
343
361
|
--ty-solid-l: -0.2; /* dim against dark canvas */
|
|
344
362
|
--ty-solid-c: 0.7; /* desaturate against dark canvas */
|
|
345
363
|
--ty-solid-h: 0; /* hue offset */
|
|
364
|
+
|
|
365
|
+
/* Axis C — dark warning fills are already dim enough not to brown out
|
|
366
|
+
* (and browns read intentional on dark); no lift needed. */
|
|
367
|
+
--ty-warning-solid-l: 0;
|
|
346
368
|
}
|
|
347
369
|
|
|
348
370
|
/* =====================================================================
|
|
@@ -756,19 +778,23 @@ html:root,
|
|
|
756
778
|
[data-ty-theme] {
|
|
757
779
|
/* base fill per flavor (= flavor color, theme-adjusted by Axis B) */
|
|
758
780
|
--ty-solid-primary: oklch(
|
|
759
|
-
from var(--ty-color-primary)
|
|
781
|
+
from var(--ty-color-primary)
|
|
782
|
+
calc(l + var(--ty-solid-l) + var(--ty-primary-solid-l, 0))
|
|
760
783
|
calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
|
|
761
784
|
);
|
|
762
785
|
--ty-solid-success: oklch(
|
|
763
|
-
from var(--ty-color-success)
|
|
786
|
+
from var(--ty-color-success)
|
|
787
|
+
calc(l + var(--ty-solid-l) + var(--ty-success-solid-l, 0))
|
|
764
788
|
calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
|
|
765
789
|
);
|
|
766
790
|
--ty-solid-danger: oklch(
|
|
767
|
-
from var(--ty-color-danger)
|
|
791
|
+
from var(--ty-color-danger)
|
|
792
|
+
calc(l + var(--ty-solid-l) + var(--ty-danger-solid-l, 0))
|
|
768
793
|
calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
|
|
769
794
|
);
|
|
770
795
|
--ty-solid-warning: oklch(
|
|
771
|
-
from var(--ty-color-warning)
|
|
796
|
+
from var(--ty-color-warning)
|
|
797
|
+
calc(l + var(--ty-solid-l) + var(--ty-warning-solid-l, 0))
|
|
772
798
|
calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
|
|
773
799
|
);
|
|
774
800
|
/* neutral is a deliberate dark grey fill, not the neutral text color */
|
|
@@ -814,7 +840,6 @@ html:root,
|
|
|
814
840
|
clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
|
|
815
841
|
);
|
|
816
842
|
|
|
817
|
-
|
|
818
843
|
--ty-solid-success-fg: oklch(
|
|
819
844
|
from var(--ty-solid-success)
|
|
820
845
|
clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
|
|
@@ -881,7 +906,6 @@ html:root,
|
|
|
881
906
|
from var(--ty-solid-primary) calc(l + var(--ty-solid-soft-l)) c h
|
|
882
907
|
);
|
|
883
908
|
|
|
884
|
-
|
|
885
909
|
--ty-solid-success-hover: oklch(
|
|
886
910
|
from var(--ty-solid-success) calc(l + var(--ty-solid-hover-l)) c h
|
|
887
911
|
);
|
|
@@ -927,15 +951,17 @@ html:root,
|
|
|
927
951
|
--ty-solid-neutral-active: oklch(
|
|
928
952
|
from var(--ty-solid-neutral) calc(l + var(--ty-solid-active-l)) c h
|
|
929
953
|
);
|
|
954
|
+
/* neutral+ reads its own absolute L dial, not anchor + shared offset —
|
|
955
|
+
it's the full-contrast ink endpoint (see --ty-l-solid-neutral-strong). */
|
|
930
956
|
--ty-solid-neutral-strong: oklch(
|
|
931
|
-
from var(--ty-
|
|
957
|
+
from var(--ty-neutral-seed-resolved) var(--ty-l-solid-neutral-strong)
|
|
958
|
+
calc(c * var(--ty-c-strong-mult)) h
|
|
932
959
|
);
|
|
933
960
|
--ty-solid-neutral-soft: oklch(
|
|
934
961
|
from var(--ty-solid-neutral) calc(l + var(--ty-solid-soft-l)) c h
|
|
935
962
|
);
|
|
936
963
|
}
|
|
937
964
|
|
|
938
|
-
|
|
939
965
|
/* =====================================================================
|
|
940
966
|
* SECTION 3 — THEME TRANSITIONS
|
|
941
967
|
* =====================================================================
|
|
@@ -1148,6 +1174,11 @@ html:root,
|
|
|
1148
1174
|
inherits: true;
|
|
1149
1175
|
initial-value: 0.4;
|
|
1150
1176
|
}
|
|
1177
|
+
@property --ty-l-solid-neutral-strong {
|
|
1178
|
+
syntax: "<number>";
|
|
1179
|
+
inherits: true;
|
|
1180
|
+
initial-value: 0.15;
|
|
1181
|
+
}
|
|
1151
1182
|
@property --ty-l-bg-neutral-strong {
|
|
1152
1183
|
syntax: "<number>";
|
|
1153
1184
|
inherits: true;
|
|
@@ -1228,6 +1259,55 @@ html:root,
|
|
|
1228
1259
|
inherits: true;
|
|
1229
1260
|
initial-value: 1;
|
|
1230
1261
|
}
|
|
1262
|
+
/* Typography + button-depth dials (defined in tyrell.css, mode-flipped
|
|
1263
|
+
there). Registered here so they interpolate on theme switch: with a
|
|
1264
|
+
variable font, text weight crossfades along with the colors, and the
|
|
1265
|
+
solid-button depth chrome (border offset) glides rather than snaps. */
|
|
1266
|
+
@property --ty-weight-action {
|
|
1267
|
+
syntax: "<number>";
|
|
1268
|
+
inherits: true;
|
|
1269
|
+
initial-value: 510;
|
|
1270
|
+
}
|
|
1271
|
+
@property --ty-weight-label {
|
|
1272
|
+
syntax: "<number>";
|
|
1273
|
+
inherits: true;
|
|
1274
|
+
initial-value: 440;
|
|
1275
|
+
}
|
|
1276
|
+
@property --ty-button-depth {
|
|
1277
|
+
syntax: "<number>";
|
|
1278
|
+
inherits: true;
|
|
1279
|
+
initial-value: 0.35;
|
|
1280
|
+
}
|
|
1281
|
+
@property --ty-button-border-l {
|
|
1282
|
+
syntax: "<number>";
|
|
1283
|
+
inherits: true;
|
|
1284
|
+
initial-value: -0.08;
|
|
1285
|
+
}
|
|
1286
|
+
@property --ty-button-border-l-neutral {
|
|
1287
|
+
syntax: "<number>";
|
|
1288
|
+
inherits: true;
|
|
1289
|
+
initial-value: -0.25;
|
|
1290
|
+
}
|
|
1291
|
+
@property --ty-primary-solid-l {
|
|
1292
|
+
syntax: "<number>";
|
|
1293
|
+
inherits: true;
|
|
1294
|
+
initial-value: 0;
|
|
1295
|
+
}
|
|
1296
|
+
@property --ty-success-solid-l {
|
|
1297
|
+
syntax: "<number>";
|
|
1298
|
+
inherits: true;
|
|
1299
|
+
initial-value: 0;
|
|
1300
|
+
}
|
|
1301
|
+
@property --ty-warning-solid-l {
|
|
1302
|
+
syntax: "<number>";
|
|
1303
|
+
inherits: true;
|
|
1304
|
+
initial-value: 0.1;
|
|
1305
|
+
}
|
|
1306
|
+
@property --ty-danger-solid-l {
|
|
1307
|
+
syntax: "<number>";
|
|
1308
|
+
inherits: true;
|
|
1309
|
+
initial-value: 0;
|
|
1310
|
+
}
|
|
1231
1311
|
@property --ty-solid-hover-l {
|
|
1232
1312
|
syntax: "<number>";
|
|
1233
1313
|
inherits: true;
|
|
@@ -1304,69 +1384,29 @@ html:root,
|
|
|
1304
1384
|
html,
|
|
1305
1385
|
[data-ty-theme] {
|
|
1306
1386
|
transition-property:
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
--ty-l-text-faint,
|
|
1331
|
-
--ty-l-border-content,
|
|
1332
|
-
--ty-l-border-elevated,
|
|
1333
|
-
--ty-l-border-floating,
|
|
1334
|
-
--ty-l-border-strong,
|
|
1335
|
-
--ty-l-border-bold,
|
|
1336
|
-
--ty-l-border,
|
|
1337
|
-
--ty-l-border-soft,
|
|
1338
|
-
--ty-l-border-faint,
|
|
1339
|
-
--ty-l-surface-canvas,
|
|
1340
|
-
--ty-l-surface-content,
|
|
1341
|
-
--ty-l-surface-elevated,
|
|
1342
|
-
--ty-l-surface-floating,
|
|
1343
|
-
--ty-l-surface-input,
|
|
1344
|
-
--ty-l-solid-neutral,
|
|
1345
|
-
--ty-l-bg-neutral-strong,
|
|
1346
|
-
--ty-l-bg-neutral-faint,
|
|
1347
|
-
--ty-c-bg-neutral-faint-mult,
|
|
1348
|
-
--ty-c-strong-mult,
|
|
1349
|
-
--ty-c-bold-mult,
|
|
1350
|
-
--ty-c-base-mult,
|
|
1351
|
-
--ty-c-soft-mult,
|
|
1352
|
-
--ty-c-faint-mult,
|
|
1353
|
-
--ty-c-bg-base-mult,
|
|
1354
|
-
--ty-c-bg-bold-mult,
|
|
1355
|
-
--ty-c-bg-soft-mult,
|
|
1356
|
-
--ty-primary-l-factor,
|
|
1357
|
-
--ty-success-l-factor,
|
|
1358
|
-
--ty-warning-l-factor,
|
|
1359
|
-
--ty-danger-l-factor,
|
|
1360
|
-
--ty-neutral-l-factor,
|
|
1361
|
-
--ty-solid-hover-l,
|
|
1362
|
-
--ty-solid-active-l,
|
|
1363
|
-
--ty-solid-strong-l,
|
|
1364
|
-
--ty-solid-soft-l,
|
|
1365
|
-
--ty-solid-l,
|
|
1366
|
-
--ty-solid-c,
|
|
1367
|
-
--ty-solid-h,
|
|
1368
|
-
--ty-solid-fg-threshold,
|
|
1369
|
-
--ty-focus-ring-alpha;
|
|
1387
|
+
--ty-brand-hue, --ty-brand-chroma, --ty-surface-chroma, --ty-success-hue,
|
|
1388
|
+
--ty-success-chroma, --ty-warning-hue, --ty-warning-chroma,
|
|
1389
|
+
--ty-danger-hue, --ty-danger-chroma, --ty-neutral-hue,
|
|
1390
|
+
--ty-neutral-chroma, --ty-l-strong, --ty-l-bold, --ty-l-base, --ty-l-soft,
|
|
1391
|
+
--ty-l-faint, --ty-l-bg-base, --ty-l-bg-bold, --ty-l-bg-soft,
|
|
1392
|
+
--ty-l-text-strong, --ty-l-text-bold, --ty-l-text-base, --ty-l-text-soft,
|
|
1393
|
+
--ty-l-text-faint, --ty-l-border-content, --ty-l-border-elevated,
|
|
1394
|
+
--ty-l-border-floating, --ty-l-border-strong, --ty-l-border-bold,
|
|
1395
|
+
--ty-l-border, --ty-l-border-soft, --ty-l-border-faint,
|
|
1396
|
+
--ty-l-surface-canvas, --ty-l-surface-content, --ty-l-surface-elevated,
|
|
1397
|
+
--ty-l-surface-floating, --ty-l-surface-input, --ty-l-solid-neutral,
|
|
1398
|
+
--ty-l-solid-neutral-strong, --ty-l-bg-neutral-strong,
|
|
1399
|
+
--ty-l-bg-neutral-faint, --ty-c-bg-neutral-faint-mult, --ty-c-strong-mult,
|
|
1400
|
+
--ty-c-bold-mult, --ty-c-base-mult, --ty-c-soft-mult, --ty-c-faint-mult,
|
|
1401
|
+
--ty-c-bg-base-mult, --ty-c-bg-bold-mult, --ty-c-bg-soft-mult,
|
|
1402
|
+
--ty-primary-l-factor, --ty-success-l-factor, --ty-warning-l-factor,
|
|
1403
|
+
--ty-danger-l-factor, --ty-neutral-l-factor, --ty-primary-solid-l,
|
|
1404
|
+
--ty-success-solid-l, --ty-warning-solid-l, --ty-danger-solid-l,
|
|
1405
|
+
--ty-solid-hover-l, --ty-solid-active-l, --ty-solid-strong-l,
|
|
1406
|
+
--ty-solid-soft-l, --ty-solid-l, --ty-solid-c, --ty-solid-h,
|
|
1407
|
+
--ty-solid-fg-threshold, --ty-focus-ring-alpha, --ty-weight-action,
|
|
1408
|
+
--ty-weight-label, --ty-button-depth, --ty-button-border-l,
|
|
1409
|
+
--ty-button-border-l-neutral;
|
|
1370
1410
|
transition-duration: var(--ty-theme-transition, 0.45s);
|
|
1371
1411
|
transition-timing-function: ease;
|
|
1372
1412
|
}
|