@telepath-computer/television 0.1.64 → 0.1.66
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.
|
Binary file
|
|
@@ -0,0 +1,670 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Canonical artifact stylesheet — the curated subset of the design system
|
|
3
|
+
* artifacts inherit at /canonical/v1/styles.css.
|
|
4
|
+
*
|
|
5
|
+
* Includes design-system primitives (reset, fonts, tokens, theme) plus
|
|
6
|
+
* bare-tag styling (elements). Excludes app-chrome layers (materials and
|
|
7
|
+
* components) since artifacts shouldn't render with panel/dropdown/modal
|
|
8
|
+
* surfaces.
|
|
9
|
+
*
|
|
10
|
+
* Source of truth for what's in v1. Edits here change what artifacts
|
|
11
|
+
* inherit; gaps that surface during real authoring (lists, blockquote,
|
|
12
|
+
* table, hr) get added to elements.css since they apply to bare tags.
|
|
13
|
+
*/
|
|
14
|
+
*,
|
|
15
|
+
*::before,
|
|
16
|
+
*::after {
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
html,
|
|
21
|
+
body {
|
|
22
|
+
margin: 0;
|
|
23
|
+
padding: 0;
|
|
24
|
+
width: 100%;
|
|
25
|
+
height: 100%;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h1,
|
|
29
|
+
h2,
|
|
30
|
+
h3,
|
|
31
|
+
h4,
|
|
32
|
+
h5,
|
|
33
|
+
h6,
|
|
34
|
+
p,
|
|
35
|
+
ul,
|
|
36
|
+
ol,
|
|
37
|
+
blockquote,
|
|
38
|
+
pre,
|
|
39
|
+
hr {
|
|
40
|
+
margin: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
button,
|
|
44
|
+
input,
|
|
45
|
+
textarea,
|
|
46
|
+
select {
|
|
47
|
+
font: inherit;
|
|
48
|
+
color: inherit;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@font-face {
|
|
52
|
+
font-family: "Hind";
|
|
53
|
+
src: url(/canonical/v1/fonts/Hind-Variable.woff2) format("woff2-variations");
|
|
54
|
+
font-weight: 300 700;
|
|
55
|
+
font-style: normal;
|
|
56
|
+
font-display: swap;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
:root {
|
|
61
|
+
/* Fonts */
|
|
62
|
+
--font-sans:
|
|
63
|
+
"Hind", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
|
|
64
|
+
sans-serif;
|
|
65
|
+
--font-brand: var(--font-sans);
|
|
66
|
+
--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
|
|
67
|
+
--font-weight-body: 500;
|
|
68
|
+
|
|
69
|
+
/* Type scale */
|
|
70
|
+
--text-base: 13.5px;
|
|
71
|
+
--text-scale: 1.125;
|
|
72
|
+
--text-sm: round(calc(var(--text-base) / var(--text-scale)), 1px);
|
|
73
|
+
--text-lg: round(calc(var(--text-base) * var(--text-scale)), 1px);
|
|
74
|
+
--text-xl: round(calc(var(--text-lg) * var(--text-scale)), 1px);
|
|
75
|
+
--leading-base: 1.5;
|
|
76
|
+
|
|
77
|
+
/* Spacing */
|
|
78
|
+
--space-2: 2px;
|
|
79
|
+
--space-4: 4px;
|
|
80
|
+
--space-6: 6px;
|
|
81
|
+
--space-8: 8px;
|
|
82
|
+
--space-12: 12px;
|
|
83
|
+
--space-16: 16px;
|
|
84
|
+
--space-20: 20px;
|
|
85
|
+
--space-24: 24px;
|
|
86
|
+
--space-32: 32px;
|
|
87
|
+
--space-48: 48px;
|
|
88
|
+
--space-64: 64px;
|
|
89
|
+
|
|
90
|
+
/* Radius — pixel-named tokens. Token name = the rounded-rect value
|
|
91
|
+
(what you'd intuitively dial in). Squircle-supporting browsers bump
|
|
92
|
+
each step ~25% to keep corner roundness perceptually equivalent
|
|
93
|
+
(squircles look "tighter" than rounded rects at the same numeric
|
|
94
|
+
radius). The `corner-shape: squircle` flip lives in elements.css —
|
|
95
|
+
applied via `*` so any element with a radius gets squircled corners
|
|
96
|
+
automatically. The `--radius-4` and `--radius-full` ends don't bump:
|
|
97
|
+
too small to perceive a difference, too large for it to matter. */
|
|
98
|
+
--radius-4: 4px;
|
|
99
|
+
--radius-8: 8px;
|
|
100
|
+
--radius-12: 12px;
|
|
101
|
+
--radius-16: 16px;
|
|
102
|
+
--radius-24: 24px;
|
|
103
|
+
--radius-full: 9999px;
|
|
104
|
+
|
|
105
|
+
/* Shadows */
|
|
106
|
+
--shadow-hairline: 0 0 0 0.5px var(--color-border);
|
|
107
|
+
/* Soft 2-layer drop shadow shared by buttons, dropdown triggers, and
|
|
108
|
+
other controls that aren't surfaces. Surface elevation lives on
|
|
109
|
+
[level=...] in materials.css. */
|
|
110
|
+
--shadow-control:
|
|
111
|
+
0 1px 1px rgb(0 0 0 / 0.04),
|
|
112
|
+
0 2px 6px rgb(0 0 0 / 0.06);
|
|
113
|
+
|
|
114
|
+
/* Alpha scale — raw percentage values, no base color baked in.
|
|
115
|
+
Callers mix at the use site:
|
|
116
|
+
color-mix(in srgb, <base> var(--alpha-700), transparent)
|
|
117
|
+
One scale serves every base (black, white, currentColor, a brand
|
|
118
|
+
color, a fixed neutral). Steps follow the Tailwind 50/100/.../950
|
|
119
|
+
grid. */
|
|
120
|
+
--alpha-50: 4%;
|
|
121
|
+
--alpha-100: 8%;
|
|
122
|
+
--alpha-200: 15%;
|
|
123
|
+
--alpha-300: 22%;
|
|
124
|
+
--alpha-400: 30%;
|
|
125
|
+
--alpha-500: 40%;
|
|
126
|
+
--alpha-600: 50%;
|
|
127
|
+
--alpha-700: 65%;
|
|
128
|
+
--alpha-800: 80%;
|
|
129
|
+
--alpha-900: 90%;
|
|
130
|
+
--alpha-950: 95%;
|
|
131
|
+
|
|
132
|
+
/* Tint scale on the inherited text color — auto-flips with context.
|
|
133
|
+
Useful when you want a faded version of whatever the surrounding
|
|
134
|
+
foreground color is (label text, separator alphas, recessed
|
|
135
|
+
button/input bgs on a known surface). */
|
|
136
|
+
--tint-50: color-mix(in srgb, currentColor var(--alpha-50), transparent);
|
|
137
|
+
--tint-100: color-mix(in srgb, currentColor var(--alpha-100), transparent);
|
|
138
|
+
--tint-200: color-mix(in srgb, currentColor var(--alpha-200), transparent);
|
|
139
|
+
--tint-300: color-mix(in srgb, currentColor var(--alpha-300), transparent);
|
|
140
|
+
--tint-400: color-mix(in srgb, currentColor var(--alpha-400), transparent);
|
|
141
|
+
--tint-500: color-mix(in srgb, currentColor var(--alpha-500), transparent);
|
|
142
|
+
--tint-600: color-mix(in srgb, currentColor var(--alpha-600), transparent);
|
|
143
|
+
--tint-700: color-mix(in srgb, currentColor var(--alpha-700), transparent);
|
|
144
|
+
--tint-800: color-mix(in srgb, currentColor var(--alpha-800), transparent);
|
|
145
|
+
--tint-900: color-mix(in srgb, currentColor var(--alpha-900), transparent);
|
|
146
|
+
--tint-950: color-mix(in srgb, currentColor var(--alpha-950), transparent);
|
|
147
|
+
|
|
148
|
+
/* Semantic overlay tokens — chromeless overlay hover/active fills
|
|
149
|
+
(ghost button, dropdown item, breadcrumb). Defaults to a black-base
|
|
150
|
+
mix for light surfaces; `[tone="dark"]` in materials.css repoints
|
|
151
|
+
these to white-base mixes at one step deeper (8% black ≈ 15% white
|
|
152
|
+
in perceived intensity). */
|
|
153
|
+
--color-overlay-hover: color-mix(in srgb, var(--black) var(--alpha-100), transparent);
|
|
154
|
+
--color-overlay-active: color-mix(in srgb, var(--black) var(--alpha-300), transparent);
|
|
155
|
+
|
|
156
|
+
/* Frosted-glass backdrop filter, shared across translucent surfaces. */
|
|
157
|
+
--backdrop-blur-glass: blur(20px) saturate(1.4);
|
|
158
|
+
|
|
159
|
+
/* Palette */
|
|
160
|
+
--black: #000000;
|
|
161
|
+
--white: #ffffff;
|
|
162
|
+
|
|
163
|
+
--neutral-50: oklch(0.985 0 0);
|
|
164
|
+
--neutral-100: oklch(0.97 0 0);
|
|
165
|
+
--neutral-200: oklch(0.923 0 0);
|
|
166
|
+
--neutral-300: oklch(0.869 0 0);
|
|
167
|
+
--neutral-350: oklch(0.79 0 0);
|
|
168
|
+
--neutral-400: oklch(0.709 0 0);
|
|
169
|
+
--neutral-500: oklch(0.553 0 0);
|
|
170
|
+
--neutral-600: oklch(0.444 0 0);
|
|
171
|
+
--neutral-700: oklch(0.374 0 0);
|
|
172
|
+
--neutral-800: oklch(0.268 0 0);
|
|
173
|
+
--neutral-900: oklch(0.216 0 0);
|
|
174
|
+
--neutral-950: oklch(0.147 0 0);
|
|
175
|
+
|
|
176
|
+
--red-50: oklch(0.969 0.015 12.422);
|
|
177
|
+
--red-100: oklch(0.941 0.03 12.58);
|
|
178
|
+
--red-200: oklch(0.892 0.058 10.001);
|
|
179
|
+
--red-300: oklch(0.81 0.117 11.638);
|
|
180
|
+
--red-400: oklch(0.712 0.194 13.428);
|
|
181
|
+
--red-500: oklch(0.645 0.246 16.439);
|
|
182
|
+
--red-600: oklch(0.586 0.253 17.585);
|
|
183
|
+
--red-700: oklch(0.514 0.222 16.935);
|
|
184
|
+
--red-800: oklch(0.455 0.188 13.697);
|
|
185
|
+
--red-900: oklch(0.41 0.159 10.272);
|
|
186
|
+
--red-950: oklch(0.271 0.105 12.094);
|
|
187
|
+
|
|
188
|
+
--orange-50: oklch(0.98 0.016 73.684);
|
|
189
|
+
--orange-100: oklch(0.954 0.038 75.164);
|
|
190
|
+
--orange-200: oklch(0.901 0.076 70.697);
|
|
191
|
+
--orange-300: oklch(0.837 0.128 66.29);
|
|
192
|
+
--orange-400: oklch(0.75 0.183 55.934);
|
|
193
|
+
--orange-500: oklch(0.705 0.213 47.604);
|
|
194
|
+
--orange-600: oklch(0.646 0.222 41.116);
|
|
195
|
+
--orange-700: oklch(0.553 0.195 38.402);
|
|
196
|
+
--orange-800: oklch(0.47 0.157 37.304);
|
|
197
|
+
--orange-900: oklch(0.408 0.123 38.172);
|
|
198
|
+
--orange-950: oklch(0.266 0.079 36.259);
|
|
199
|
+
|
|
200
|
+
--yellow-50: oklch(0.987 0.026 102.212);
|
|
201
|
+
--yellow-100: oklch(0.973 0.071 103.193);
|
|
202
|
+
--yellow-200: oklch(0.945 0.129 101.54);
|
|
203
|
+
--yellow-300: oklch(0.905 0.182 98.111);
|
|
204
|
+
--yellow-400: oklch(0.852 0.199 91.936);
|
|
205
|
+
--yellow-500: oklch(0.795 0.184 86.047);
|
|
206
|
+
--yellow-600: oklch(0.681 0.162 75.834);
|
|
207
|
+
--yellow-700: oklch(0.554 0.135 66.442);
|
|
208
|
+
--yellow-800: oklch(0.476 0.114 61.907);
|
|
209
|
+
--yellow-900: oklch(0.421 0.095 57.708);
|
|
210
|
+
--yellow-950: oklch(0.286 0.066 53.813);
|
|
211
|
+
|
|
212
|
+
--green-50: oklch(0.979 0.021 166.113);
|
|
213
|
+
--green-100: oklch(0.95 0.052 163.051);
|
|
214
|
+
--green-200: oklch(0.905 0.093 164.15);
|
|
215
|
+
--green-300: oklch(0.845 0.143 164.978);
|
|
216
|
+
--green-400: oklch(0.765 0.177 163.223);
|
|
217
|
+
--green-500: oklch(0.696 0.17 162.48);
|
|
218
|
+
--green-600: oklch(0.596 0.145 163.225);
|
|
219
|
+
--green-700: oklch(0.508 0.118 165.612);
|
|
220
|
+
--green-800: oklch(0.432 0.095 166.913);
|
|
221
|
+
--green-900: oklch(0.378 0.077 168.94);
|
|
222
|
+
--green-950: oklch(0.262 0.051 172.552);
|
|
223
|
+
|
|
224
|
+
--blue-50: oklch(0.97 0.014 254.604);
|
|
225
|
+
--blue-100: oklch(0.932 0.032 255.585);
|
|
226
|
+
--blue-200: oklch(0.882 0.059 254.128);
|
|
227
|
+
--blue-300: oklch(0.809 0.105 251.813);
|
|
228
|
+
--blue-400: oklch(0.707 0.165 254.624);
|
|
229
|
+
--blue-500: oklch(0.623 0.214 259.815);
|
|
230
|
+
--blue-600: oklch(0.546 0.245 262.881);
|
|
231
|
+
--blue-700: oklch(0.488 0.243 264.376);
|
|
232
|
+
--blue-800: oklch(0.424 0.199 265.638);
|
|
233
|
+
--blue-900: oklch(0.379 0.146 265.522);
|
|
234
|
+
--blue-950: oklch(0.282 0.091 267.935);
|
|
235
|
+
|
|
236
|
+
--purple-50: oklch(0.969 0.016 293.756);
|
|
237
|
+
--purple-100: oklch(0.943 0.029 294.588);
|
|
238
|
+
--purple-200: oklch(0.894 0.057 293.283);
|
|
239
|
+
--purple-300: oklch(0.811 0.111 293.571);
|
|
240
|
+
--purple-400: oklch(0.702 0.183 293.541);
|
|
241
|
+
--purple-500: oklch(0.606 0.25 292.717);
|
|
242
|
+
--purple-600: oklch(0.541 0.281 293.009);
|
|
243
|
+
--purple-700: oklch(0.491 0.27 292.581);
|
|
244
|
+
--purple-800: oklch(0.432 0.232 292.759);
|
|
245
|
+
--purple-900: oklch(0.38 0.189 293.745);
|
|
246
|
+
--purple-950: oklch(0.283 0.141 291.089);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* Squircle compensation — bump radii ~25% so corners read at the same
|
|
250
|
+
perceived roundness as the rounded-rect equivalents on browsers that
|
|
251
|
+
don't yet support `corner-shape: squircle`. The universal corner-shape
|
|
252
|
+
flip lives in elements.css. */
|
|
253
|
+
@supports (corner-shape: squircle) {
|
|
254
|
+
:root {
|
|
255
|
+
--radius-8: 10px;
|
|
256
|
+
--radius-12: 15px;
|
|
257
|
+
--radius-16: 20px;
|
|
258
|
+
--radius-24: 30px;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/* Font switcher — set data-font on <html> to swap --font-sans. */
|
|
263
|
+
|
|
264
|
+
:root[data-font="system"] {
|
|
265
|
+
--font-sans:
|
|
266
|
+
-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
:root {
|
|
272
|
+
--color-bg: var(--neutral-50);
|
|
273
|
+
--color-bg-muted: var(--neutral-100);
|
|
274
|
+
--color-surface: var(--white);
|
|
275
|
+
--color-surface-muted: var(--neutral-100);
|
|
276
|
+
--color-interactive: var(--neutral-200);
|
|
277
|
+
--color-interactive-hover: var(--neutral-300);
|
|
278
|
+
|
|
279
|
+
/* Borders use alpha so the same hairline reads on light, dark, or
|
|
280
|
+
image bgs without needing a tone-aware swap. */
|
|
281
|
+
--color-border: rgba(0, 0, 0, 0.10);
|
|
282
|
+
--color-border-muted: rgba(0, 0, 0, 0.06);
|
|
283
|
+
|
|
284
|
+
--color-text: var(--neutral-900);
|
|
285
|
+
--color-text-muted: var(--neutral-500);
|
|
286
|
+
--color-link: inherit;
|
|
287
|
+
--color-focus-ring: var(--neutral-500);
|
|
288
|
+
--color-overlay-backdrop: rgb(0 0 0 / 0.5);
|
|
289
|
+
--color-highlight: rgb(255 255 255 / 0.5);
|
|
290
|
+
--color-primary: var(--blue-500);
|
|
291
|
+
--color-danger: var(--red-600);
|
|
292
|
+
|
|
293
|
+
color-scheme: light;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
body {
|
|
300
|
+
font-family: var(--font-sans);
|
|
301
|
+
font-size: var(--text-base);
|
|
302
|
+
font-weight: var(--font-weight-body);
|
|
303
|
+
line-height: var(--leading-base);
|
|
304
|
+
letter-spacing: 0.015em;
|
|
305
|
+
color: var(--color-text);
|
|
306
|
+
background: var(--color-bg);
|
|
307
|
+
-webkit-font-smoothing: antialiased;
|
|
308
|
+
-moz-osx-font-smoothing: grayscale;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
a {
|
|
312
|
+
color: var(--color-link);
|
|
313
|
+
text-underline-offset: 0.15em;
|
|
314
|
+
text-decoration-thickness: 0.08em;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
h1,
|
|
318
|
+
h2,
|
|
319
|
+
h3,
|
|
320
|
+
h4,
|
|
321
|
+
h5,
|
|
322
|
+
h6 {
|
|
323
|
+
font-weight: 600;
|
|
324
|
+
color: inherit;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
code {
|
|
328
|
+
font-family: var(--font-mono);
|
|
329
|
+
font-size: 0.9em;
|
|
330
|
+
background: var(--color-bg-muted);
|
|
331
|
+
padding: var(--space-2) var(--space-4);
|
|
332
|
+
border-radius: var(--radius-4);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
pre {
|
|
336
|
+
font-family: var(--font-mono);
|
|
337
|
+
background: var(--color-bg-muted);
|
|
338
|
+
padding: var(--space-12);
|
|
339
|
+
border-radius: var(--radius-8);
|
|
340
|
+
overflow-x: auto;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
pre code {
|
|
344
|
+
background: none;
|
|
345
|
+
padding: 0;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
blockquote {
|
|
349
|
+
padding-left: var(--space-16);
|
|
350
|
+
border-left: 3px solid var(--color-border);
|
|
351
|
+
color: var(--color-text-muted);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
hr {
|
|
355
|
+
border: none;
|
|
356
|
+
border-top: 1px solid var(--color-border);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
table {
|
|
360
|
+
border-collapse: collapse;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
th,
|
|
364
|
+
td {
|
|
365
|
+
padding: var(--space-8) var(--space-12);
|
|
366
|
+
border: 1px solid var(--color-border);
|
|
367
|
+
text-align: left;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
th {
|
|
371
|
+
background: var(--color-bg-muted);
|
|
372
|
+
font-weight: 600;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
/* Recessed text input — same geometry as a button at rest, sunken via a
|
|
376
|
+
subtle tint and no drop shadow. Focus deepens the tint one step (more
|
|
377
|
+
recessed) and adds a primary-blue ring as the focus signal. Text
|
|
378
|
+
inherits its color from the surrounding context so the input reads on
|
|
379
|
+
either light or dark surfaces. */
|
|
380
|
+
input,
|
|
381
|
+
textarea {
|
|
382
|
+
padding: 6px 10px;
|
|
383
|
+
border: 0.5px solid var(--tint-300);
|
|
384
|
+
border-radius: var(--radius-12);
|
|
385
|
+
background: var(--tint-100);
|
|
386
|
+
color: inherit;
|
|
387
|
+
font: inherit;
|
|
388
|
+
transition:
|
|
389
|
+
background 120ms ease,
|
|
390
|
+
border-color 120ms ease,
|
|
391
|
+
box-shadow 120ms ease;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
textarea {
|
|
395
|
+
resize: none;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
input::placeholder,
|
|
399
|
+
textarea::placeholder {
|
|
400
|
+
color: var(--tint-500);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
input:focus,
|
|
404
|
+
textarea:focus {
|
|
405
|
+
background: color-mix(in srgb, var(--white) var(--alpha-300), transparent);
|
|
406
|
+
border-color: var(--color-primary);
|
|
407
|
+
outline: none;
|
|
408
|
+
box-shadow: 0 0 0 1.5px var(--color-primary);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/* Stacked label + control. Label text is smaller and lighter than body
|
|
412
|
+
copy, sits flush with the control. Use as
|
|
413
|
+
<label class="field"><span>Name</span><input /></label>. */
|
|
414
|
+
label.field {
|
|
415
|
+
display: grid;
|
|
416
|
+
gap: 4px;
|
|
417
|
+
font-size: 13px;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
label.field > span {
|
|
421
|
+
font-size: 11.5px;
|
|
422
|
+
font-weight: 450;
|
|
423
|
+
color: var(--tint-800);
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
/* Universal squircle corners. `corner-shape: squircle` only affects
|
|
427
|
+
elements that already declare a non-zero `border-radius`, so applying
|
|
428
|
+
to `*` is effectively a no-op everywhere except where corners exist.
|
|
429
|
+
Token values in tokens.css bump ~25% inside the same @supports block
|
|
430
|
+
to compensate for the perceived tightness difference. */
|
|
431
|
+
@supports (corner-shape: squircle) {
|
|
432
|
+
* {
|
|
433
|
+
corner-shape: squircle;
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
button {
|
|
438
|
+
display: inline-flex;
|
|
439
|
+
align-items: center;
|
|
440
|
+
justify-content: center;
|
|
441
|
+
gap: var(--space-6);
|
|
442
|
+
padding: 4px 14px;
|
|
443
|
+
border: 0.5px solid var(--tint-200);
|
|
444
|
+
border-radius: var(--radius-12);
|
|
445
|
+
background: var(--color-surface);
|
|
446
|
+
color: inherit;
|
|
447
|
+
font: inherit;
|
|
448
|
+
cursor: default;
|
|
449
|
+
box-shadow: var(--shadow-control);
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
button:hover:not(:disabled) {
|
|
453
|
+
background: color-mix(in srgb, var(--color-surface) 96%, black);
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
button:active:not(:disabled) {
|
|
457
|
+
background: color-mix(in srgb, var(--color-surface) 88%, black);
|
|
458
|
+
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
button:focus-visible {
|
|
462
|
+
outline: 2px solid var(--color-focus-ring);
|
|
463
|
+
outline-offset: 2px;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
button[variant="primary"] {
|
|
467
|
+
background: var(--color-primary);
|
|
468
|
+
border-color: rgb(0 0 0 / 0.18);
|
|
469
|
+
color: var(--white);
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
button[variant="primary"]:hover:not(:disabled) {
|
|
473
|
+
background: color-mix(in srgb, var(--color-primary) 92%, black);
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
button[variant="primary"]:active:not(:disabled) {
|
|
477
|
+
background: color-mix(in srgb, var(--color-primary) 82%, black);
|
|
478
|
+
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
button[variant="danger"] {
|
|
482
|
+
background: var(--color-danger);
|
|
483
|
+
border-color: rgb(0 0 0 / 0.18);
|
|
484
|
+
color: var(--white);
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
button[variant="danger"]:hover:not(:disabled) {
|
|
488
|
+
background: color-mix(in srgb, var(--color-danger) 92%, black);
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
button[variant="danger"]:active:not(:disabled) {
|
|
492
|
+
background: color-mix(in srgb, var(--color-danger) 82%, black);
|
|
493
|
+
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
button[variant="ghost"] {
|
|
497
|
+
background: transparent;
|
|
498
|
+
border-color: transparent;
|
|
499
|
+
color: inherit;
|
|
500
|
+
box-shadow: none;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
/* Ghost is a chromeless overlay — at rest it's invisible and relies on
|
|
504
|
+
the surface behind it. The overlay tokens cascade through `tone="dark"`
|
|
505
|
+
(set on the button itself by the auto-tone watcher in
|
|
506
|
+
`elements/button.ts`, or inherited from a tone-sampled ancestor), so
|
|
507
|
+
one rule covers light + dark backdrops. */
|
|
508
|
+
button[variant="ghost"]:hover:not(:disabled) {
|
|
509
|
+
background: var(--color-overlay-hover);
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
button[variant="ghost"]:active:not(:disabled) {
|
|
513
|
+
background: var(--color-overlay-active);
|
|
514
|
+
box-shadow: none;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
/* Pinned-active state for ghost triggers — used while a dropdown
|
|
518
|
+
`[aria-expanded="true"]` is open against this button (set automatically
|
|
519
|
+
by `dropdown-menu`) or while a consumer manually pins `[data-active]`
|
|
520
|
+
(e.g. anchored popover). Either form overrides hover so the button
|
|
521
|
+
stays visibly active even as the cursor moves over it. */
|
|
522
|
+
button[variant="ghost"][data-active]:not(:disabled),
|
|
523
|
+
button[variant="ghost"][data-active]:hover:not(:disabled),
|
|
524
|
+
button[variant="ghost"][aria-expanded="true"]:not(:disabled),
|
|
525
|
+
button[variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
|
|
526
|
+
background: var(--color-overlay-active);
|
|
527
|
+
box-shadow: none;
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
button:disabled {
|
|
531
|
+
background: var(--tint-300);
|
|
532
|
+
border-color: transparent;
|
|
533
|
+
color: var(--tint-700);
|
|
534
|
+
box-shadow: none;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
/* Default-variant button on a dark surface — drop the chromed light fill,
|
|
538
|
+
pick up a brighter white-tint than inputs (15% vs 8%) to read as raised
|
|
539
|
+
rather than recessed, and replace the ineffective black drop shadow
|
|
540
|
+
with a top-edge inset highlight (macOS NSButton-on-dark convention). */
|
|
541
|
+
[tone="dark"] button:not([variant]):not(:disabled) {
|
|
542
|
+
background: var(--tint-200);
|
|
543
|
+
border-color: var(--tint-300);
|
|
544
|
+
box-shadow: inset 0 0.5px 0 var(--tint-300);
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
[tone="dark"] button:not([variant]):hover:not(:disabled) {
|
|
548
|
+
background: var(--tint-300);
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
[tone="dark"] button:not([variant]):active:not(:disabled) {
|
|
552
|
+
background: var(--tint-400);
|
|
553
|
+
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.20);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
/* Explicit light-tone button rules — restore the chromed white-card
|
|
557
|
+
styling when a `tone="light"` ancestor sits inside a `tone="dark"`
|
|
558
|
+
one (e.g. a paper popover anchored inside dark chrome). Same
|
|
559
|
+
specificity as the dark-tone rules above; source order makes the
|
|
560
|
+
closer light-tone scope win for slotted descendants. */
|
|
561
|
+
[tone="light"] button:not([variant]):not(:disabled) {
|
|
562
|
+
background: var(--color-surface);
|
|
563
|
+
border-color: var(--tint-200);
|
|
564
|
+
box-shadow: var(--shadow-control);
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
[tone="light"] button:not([variant]):hover:not(:disabled) {
|
|
568
|
+
background: color-mix(in srgb, var(--color-surface) 96%, black);
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
[tone="light"] button:not([variant]):active:not(:disabled) {
|
|
572
|
+
background: color-mix(in srgb, var(--color-surface) 88%, black);
|
|
573
|
+
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
button[size="sm"] {
|
|
577
|
+
min-height: 24px;
|
|
578
|
+
padding: var(--space-2) var(--space-8);
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
button[size="md"] {
|
|
582
|
+
min-height: 32px;
|
|
583
|
+
padding: var(--space-6) var(--space-12);
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
/* Square icon-only buttons. Sizing only — chrome is determined by the
|
|
587
|
+
variant (default = chromed pill, ghost = chromeless overlay). The
|
|
588
|
+
square footprint and zero padding stop a 24px SVG from being padded
|
|
589
|
+
out by the text-button defaults. */
|
|
590
|
+
button[icon-only] {
|
|
591
|
+
width: 24px;
|
|
592
|
+
height: 24px;
|
|
593
|
+
min-height: 0;
|
|
594
|
+
padding: 0;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
[data-ui-icon] {
|
|
598
|
+
display: inline-block;
|
|
599
|
+
vertical-align: middle;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
/* Prose — opt-in typography for document content */
|
|
603
|
+
|
|
604
|
+
.prose {
|
|
605
|
+
line-height: var(--leading-base);
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
.prose h1 {
|
|
609
|
+
font-size: var(--text-xl);
|
|
610
|
+
margin-bottom: var(--space-8);
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.prose h2 {
|
|
614
|
+
font-size: var(--text-lg);
|
|
615
|
+
margin-top: var(--space-24);
|
|
616
|
+
margin-bottom: var(--space-8);
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.prose h3,
|
|
620
|
+
.prose h4,
|
|
621
|
+
.prose h5,
|
|
622
|
+
.prose h6 {
|
|
623
|
+
font-size: var(--text-base);
|
|
624
|
+
margin-top: var(--space-24);
|
|
625
|
+
margin-bottom: var(--space-8);
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
.prose p {
|
|
629
|
+
margin: var(--space-12) 0;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.prose ul,
|
|
633
|
+
.prose ol {
|
|
634
|
+
padding-left: var(--space-24);
|
|
635
|
+
margin: var(--space-12) 0;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.prose blockquote {
|
|
639
|
+
margin: var(--space-12) 0;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
.prose pre {
|
|
643
|
+
margin: var(--space-12) 0;
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
.prose hr {
|
|
647
|
+
margin: var(--space-24) 0;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
.prose table {
|
|
651
|
+
width: 100%;
|
|
652
|
+
margin: var(--space-12) 0;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
.prose img {
|
|
656
|
+
max-width: 100%;
|
|
657
|
+
height: auto;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
.prose > :first-child {
|
|
661
|
+
margin-top: 0;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
.prose > :last-child {
|
|
665
|
+
margin-bottom: 0;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
|
|
669
|
+
|
|
670
|
+
|