@guildofgleks/ui 21.2.2 → 21.2.4
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 +24 -12
- package/fesm2022/guildofgleks-ui.mjs +730 -112
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/theme.css +978 -943
- package/src/styles/utilities.css +69 -33
- package/types/guildofgleks-ui.d.ts +356 -22
package/src/styles/theme.css
CHANGED
|
@@ -1,943 +1,978 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @guildofgleks/ui — baseline theme
|
|
3
|
-
*
|
|
4
|
-
* Every token the components read, with a working default, so the library renders
|
|
5
|
-
* correctly from a single import and a consumer can override only what they care about.
|
|
6
|
-
*
|
|
7
|
-
* ── The three layers ─────────────────────────────────────────────────────────────
|
|
8
|
-
* 1. Foundation — palette, type scale, spacing, motion, focus. Restyles everything.
|
|
9
|
-
* 2. Component — `--gog-<block>-*`. Every colour, font, border, radius, shadow,
|
|
10
|
-
* padding and duration each component paints with lives here, so a
|
|
11
|
-
* theme can restyle one component without touching its stylesheet.
|
|
12
|
-
* 3. Instance — a handful of deliberately UNDECLARED tokens (`--gog-btn-bg`,
|
|
13
|
-
* `--gog-btn-padding`, `--gog-tag-bg`, …) that variant/size classes
|
|
14
|
-
* fall back through. Left unset on purpose: a value declared here
|
|
15
|
-
* would out-cascade the variant classes and pin every button to one
|
|
16
|
-
* look. Set them on an element to override a single instance.
|
|
17
|
-
*
|
|
18
|
-
* No component stylesheet declares a `--gog-*` default of its own — everything a
|
|
19
|
-
* component paints resolves to a token below.
|
|
20
|
-
*
|
|
21
|
-
* ── Why there are two blocks, and which one to add a token to ────────────────────
|
|
22
|
-
* A custom property's `var()` references are substituted on the element that *declares*
|
|
23
|
-
* it, not where it is read. So `--gog-btn-primary-bg: var(--gog-accent-color)` declared on
|
|
24
|
-
* `:root` freezes to the root palette: a `data-theme` scope further down the tree could
|
|
25
|
-
* change `--gog-accent-color` and buttons inside it would not follow.
|
|
26
|
-
*
|
|
27
|
-
* `:root` — literals only (and the light palette default). Values that
|
|
28
|
-
* reference nothing, so resolving them once at the root is right.
|
|
29
|
-
* `:root, [data-theme]` — every token whose value reads another token. Re-declared on
|
|
30
|
-
* each theme scope so it re-derives from that scope's palette
|
|
31
|
-
* and metrics. **A new token that contains `var(` goes here.**
|
|
32
|
-
*
|
|
33
|
-
* ── Adding a theme ───────────────────────────────────────────────────────────────
|
|
34
|
-
* Declare a palette against the attribute value; the derived layer re-resolves for you:
|
|
35
|
-
*
|
|
36
|
-
* :root[data-theme='mine'], [data-theme='mine'] { --gog-accent-color: #ff4edb; }
|
|
37
|
-
*
|
|
38
|
-
* Listing both selectors makes the theme work at the root *and* on any subtree, so a
|
|
39
|
-
* single page can show several themes side by side.
|
|
40
|
-
*/
|
|
41
|
-
|
|
42
|
-
:root {
|
|
43
|
-
/* ── Typography ───────────────────────────────────────────────────────────────
|
|
44
|
-
Generic stacks on purpose: a UI library should not force a webfont download on
|
|
45
|
-
its consumers. Point these at your own families to restyle all text at once.
|
|
46
|
-
`styles/fonts.css` is an optional import that wires up the showcase's families. */
|
|
47
|
-
--gog-font-heading: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
48
|
-
--gog-font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
49
|
-
--gog-font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
|
|
50
|
-
|
|
51
|
-
--gog-text-xs: 0.75rem;
|
|
52
|
-
--gog-text-sm: 0.875rem;
|
|
53
|
-
--gog-text-md: 1rem;
|
|
54
|
-
--gog-text-lg: 1.125rem;
|
|
55
|
-
--gog-text-xl: 1.5rem;
|
|
56
|
-
--gog-text-2xl: 2rem;
|
|
57
|
-
--gog-text-3xl: 3rem;
|
|
58
|
-
|
|
59
|
-
/* ── Spacing & geometry ─────────────────────────────────────────────────────── */
|
|
60
|
-
--gog-space-xs: 4px;
|
|
61
|
-
--gog-space-sm: 8px;
|
|
62
|
-
--gog-space-md: 16px;
|
|
63
|
-
--gog-space-lg: 24px;
|
|
64
|
-
--gog-space-2xl: 48px;
|
|
65
|
-
|
|
66
|
-
--gog-radius: 8px;
|
|
67
|
-
--gog-panel-border-width: 1px;
|
|
68
|
-
--gog-panel-border-style: solid;
|
|
69
|
-
|
|
70
|
-
/* ── Motion ──────────────────────────────────────────────────────────────────
|
|
71
|
-
Every component transition/animation is expressed in these. Set them to 0s to
|
|
72
|
-
flatten all motion theme-wide (components also honour prefers-reduced-motion). */
|
|
73
|
-
--gog-duration-fast: 0.12s;
|
|
74
|
-
--gog-duration-base: 0.15s;
|
|
75
|
-
--gog-duration-slow: 0.2s;
|
|
76
|
-
--gog-easing: ease;
|
|
77
|
-
|
|
78
|
-
/* ── Focus & disabled ───────────────────────────────────────────────────────── */
|
|
79
|
-
--gog-focus-ring-width: 3px;
|
|
80
|
-
--gog-focus-ring-offset: 2px;
|
|
81
|
-
--gog-disabled-opacity: 0.4;
|
|
82
|
-
|
|
83
|
-
/* ── Control metrics ─────────────────────────────────────────────────────────
|
|
84
|
-
Five-tier scale: xsm/slg bookend the original sm/md/lg (restored below to
|
|
85
|
-
their pre-compaction numbers) as new extremes for extra-tight or extra-roomy
|
|
86
|
-
layouts. */
|
|
87
|
-
--gog-control-padding-y: 10px;
|
|
88
|
-
--gog-control-padding-x: 14px;
|
|
89
|
-
--gog-control-icon-offset: 10px;
|
|
90
|
-
--gog-control-border-width: 2px;
|
|
91
|
-
--gog-control-border-style: solid;
|
|
92
|
-
|
|
93
|
-
--gog-control-checkbox-padding: 6px;
|
|
94
|
-
--gog-control-checkbox-box-size-xsm: 12px;
|
|
95
|
-
--gog-control-checkbox-box-size-sm: 18px;
|
|
96
|
-
--gog-control-checkbox-box-size-md: 24px;
|
|
97
|
-
--gog-control-checkbox-box-size-lg: 32px;
|
|
98
|
-
--gog-control-checkbox-box-size-slg: 40px;
|
|
99
|
-
--gog-control-checkbox-label-size-xsm: 0.6875rem;
|
|
100
|
-
--gog-control-checkbox-label-size-sm: 0.8125rem;
|
|
101
|
-
--gog-control-checkbox-label-size-md: 0.9375rem;
|
|
102
|
-
--gog-control-checkbox-label-size-lg: 1.0625rem;
|
|
103
|
-
--gog-control-checkbox-label-size-slg: 1.1875rem;
|
|
104
|
-
--gog-control-checkbox-icon-size-xsm: 10px;
|
|
105
|
-
--gog-control-checkbox-icon-size-sm: 12px;
|
|
106
|
-
--gog-control-checkbox-icon-size-md: 14px;
|
|
107
|
-
--gog-control-checkbox-icon-size-lg: 18px;
|
|
108
|
-
--gog-control-checkbox-icon-size-slg: 22px;
|
|
109
|
-
|
|
110
|
-
/* ── Button sizing ─────────────────────────────────────────────────────────── */
|
|
111
|
-
--gog-btn-xsm-padding: 0.25rem 0.5rem;
|
|
112
|
-
--gog-btn-sm-padding: 0.5rem 0.875rem;
|
|
113
|
-
--gog-btn-md-padding: 0.75rem 1.25rem;
|
|
114
|
-
--gog-btn-lg-padding: 1rem 1.5rem;
|
|
115
|
-
--gog-btn-slg-padding: 1.25rem 1.75rem;
|
|
116
|
-
--gog-btn-xsm-font-size: 0.75rem;
|
|
117
|
-
--gog-btn-sm-font-size: 0.875rem;
|
|
118
|
-
--gog-btn-md-font-size: 1rem;
|
|
119
|
-
--gog-btn-lg-font-size: 1.125rem;
|
|
120
|
-
--gog-btn-slg-font-size: 1.25rem;
|
|
121
|
-
|
|
122
|
-
/* ── Field sizing (input / select / multiselect share one scale) ───────────── */
|
|
123
|
-
--gog-field-xsm-padding-y: 4px;
|
|
124
|
-
--gog-field-xsm-padding-x: 8px;
|
|
125
|
-
--gog-field-xsm-icon-offset: 6px;
|
|
126
|
-
--gog-field-xsm-icon-inset: 24px;
|
|
127
|
-
|
|
128
|
-
--gog-field-sm-padding-y: 6px;
|
|
129
|
-
--gog-field-sm-padding-x: 10px;
|
|
130
|
-
--gog-field-sm-icon-offset: 8px;
|
|
131
|
-
--gog-field-sm-icon-inset: 30px;
|
|
132
|
-
|
|
133
|
-
--gog-field-md-icon-inset: 36px;
|
|
134
|
-
|
|
135
|
-
--gog-field-lg-padding-y: 14px;
|
|
136
|
-
--gog-field-lg-padding-x: 18px;
|
|
137
|
-
--gog-field-lg-icon-offset: 14px;
|
|
138
|
-
--gog-field-lg-icon-inset: 44px;
|
|
139
|
-
|
|
140
|
-
--gog-field-slg-padding-y: 18px;
|
|
141
|
-
--gog-field-slg-padding-x: 22px;
|
|
142
|
-
--gog-field-slg-font-size: 1.25rem;
|
|
143
|
-
--gog-field-slg-icon-offset: 18px;
|
|
144
|
-
--gog-field-slg-icon-inset: 52px;
|
|
145
|
-
|
|
146
|
-
/* ── Icon & spinner ───────────────────────────────────────────────────────── */
|
|
147
|
-
--gog-icon-size: 1.2em;
|
|
148
|
-
--gog-icon-stroke-width: 2;
|
|
149
|
-
--gog-spinner-size-xsm: 12px;
|
|
150
|
-
--gog-spinner-size-sm: 18px;
|
|
151
|
-
--gog-spinner-size-md: 48px;
|
|
152
|
-
--gog-spinner-size-lg: 96px;
|
|
153
|
-
--gog-spinner-size-slg: 144px;
|
|
154
|
-
--gog-spinner-rune-size: 20px;
|
|
155
|
-
|
|
156
|
-
/* ── Toast stack ──────────────────────────────────────────────────────────── */
|
|
157
|
-
--gog-toast-min-width: 280px;
|
|
158
|
-
--gog-toast-max-width: 400px;
|
|
159
|
-
--gog-toast-gap: 10px;
|
|
160
|
-
--gog-toast-stack-padding: 16px;
|
|
161
|
-
--gog-toast-z-index: 9999;
|
|
162
|
-
--gog-toast-enter-distance: 110%;
|
|
163
|
-
--gog-toast-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
|
|
164
|
-
|
|
165
|
-
/* ── Overlay stacking ───────────────────────────────────────────────────────
|
|
166
|
-
Baseline for dropdown panels. gog-dialog re-declares this on its own panel so
|
|
167
|
-
dropdowns opened inside a dialog stack above it. */
|
|
168
|
-
--gog-dropdown-z: 300;
|
|
169
|
-
--gog-spinner-overlay-z: 8000;
|
|
170
|
-
|
|
171
|
-
/* ── Light palette (also the no-data-theme default) ───────────────────────── */
|
|
172
|
-
color-scheme: light;
|
|
173
|
-
|
|
174
|
-
--gog-
|
|
175
|
-
--gog-
|
|
176
|
-
--gog-
|
|
177
|
-
--gog-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
--gog-
|
|
181
|
-
--gog-accent-color: #
|
|
182
|
-
--gog-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
--gog-
|
|
186
|
-
--gog-
|
|
187
|
-
--gog-
|
|
188
|
-
--gog-
|
|
189
|
-
--gog-
|
|
190
|
-
--gog-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
:
|
|
195
|
-
|
|
196
|
-
color
|
|
197
|
-
|
|
198
|
-
/*
|
|
199
|
-
--gog-
|
|
200
|
-
--gog-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
/*
|
|
210
|
-
--gog-
|
|
211
|
-
--gog-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
--gog-
|
|
215
|
-
--gog-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
--gog-
|
|
220
|
-
--gog-
|
|
221
|
-
--gog-
|
|
222
|
-
|
|
223
|
-
--gog-
|
|
224
|
-
--gog-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
:
|
|
228
|
-
|
|
229
|
-
color
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
--gog-
|
|
234
|
-
--gog-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
--gog-
|
|
244
|
-
--gog-
|
|
245
|
-
--gog-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
--gog-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
--gog-
|
|
254
|
-
--gog-
|
|
255
|
-
|
|
256
|
-
--gog-
|
|
257
|
-
--gog-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
/*
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
*/
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
--gog-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
--gog-accordion-
|
|
298
|
-
--gog-accordion-body-
|
|
299
|
-
--gog-accordion-
|
|
300
|
-
--gog-accordion-
|
|
301
|
-
--gog-accordion-
|
|
302
|
-
--gog-accordion-
|
|
303
|
-
--gog-accordion-
|
|
304
|
-
--gog-accordion-
|
|
305
|
-
--gog-accordion-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
--gog-accordion-
|
|
309
|
-
--gog-accordion-
|
|
310
|
-
--gog-accordion-header-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
--gog-accordion-body-
|
|
314
|
-
--gog-accordion-
|
|
315
|
-
--gog-accordion-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
--gog-accordion-
|
|
319
|
-
--gog-accordion-
|
|
320
|
-
--gog-accordion-
|
|
321
|
-
/*
|
|
322
|
-
|
|
323
|
-
--gog-accordion-
|
|
324
|
-
|
|
325
|
-
--gog-accordion-xsm-
|
|
326
|
-
--gog-accordion-xsm-
|
|
327
|
-
--gog-accordion-xsm-
|
|
328
|
-
--gog-accordion-xsm-
|
|
329
|
-
--gog-accordion-xsm-
|
|
330
|
-
--gog-accordion-xsm-body-
|
|
331
|
-
--gog-accordion-xsm-
|
|
332
|
-
--gog-accordion-xsm-
|
|
333
|
-
|
|
334
|
-
--gog-accordion-
|
|
335
|
-
--gog-accordion-
|
|
336
|
-
|
|
337
|
-
--gog-accordion-sm-
|
|
338
|
-
--gog-accordion-sm-
|
|
339
|
-
--gog-accordion-sm-
|
|
340
|
-
--gog-accordion-sm-
|
|
341
|
-
--gog-accordion-sm-
|
|
342
|
-
--gog-accordion-sm-body-
|
|
343
|
-
--gog-accordion-sm-
|
|
344
|
-
--gog-accordion-sm-
|
|
345
|
-
|
|
346
|
-
--gog-accordion-
|
|
347
|
-
--gog-accordion-
|
|
348
|
-
|
|
349
|
-
--gog-accordion-md-
|
|
350
|
-
--gog-accordion-md-
|
|
351
|
-
--gog-accordion-md-
|
|
352
|
-
--gog-accordion-md-
|
|
353
|
-
--gog-accordion-md-
|
|
354
|
-
--gog-accordion-md-body-
|
|
355
|
-
--gog-accordion-md-
|
|
356
|
-
--gog-accordion-md-
|
|
357
|
-
|
|
358
|
-
--gog-accordion-
|
|
359
|
-
--gog-accordion-
|
|
360
|
-
|
|
361
|
-
--gog-accordion-lg-
|
|
362
|
-
--gog-accordion-lg-
|
|
363
|
-
--gog-accordion-lg-
|
|
364
|
-
--gog-accordion-lg-
|
|
365
|
-
--gog-accordion-lg-
|
|
366
|
-
--gog-accordion-lg-body-
|
|
367
|
-
--gog-accordion-lg-
|
|
368
|
-
--gog-accordion-lg-
|
|
369
|
-
|
|
370
|
-
--gog-accordion-
|
|
371
|
-
--gog-accordion-
|
|
372
|
-
|
|
373
|
-
--gog-accordion-slg-
|
|
374
|
-
--gog-accordion-slg-
|
|
375
|
-
--gog-accordion-slg-
|
|
376
|
-
--gog-accordion-slg-
|
|
377
|
-
--gog-accordion-slg-
|
|
378
|
-
--gog-accordion-slg-body-
|
|
379
|
-
--gog-accordion-slg-
|
|
380
|
-
--gog-accordion-slg-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
--gog-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
--gog-
|
|
394
|
-
--gog-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
--gog-btn-
|
|
402
|
-
--gog-btn-
|
|
403
|
-
|
|
404
|
-
--gog-btn-
|
|
405
|
-
--gog-btn-
|
|
406
|
-
--gog-btn-
|
|
407
|
-
--gog-btn-
|
|
408
|
-
--gog-btn-
|
|
409
|
-
--gog-btn-
|
|
410
|
-
--gog-btn-
|
|
411
|
-
|
|
412
|
-
--gog-btn-
|
|
413
|
-
|
|
414
|
-
--gog-btn-
|
|
415
|
-
--gog-btn-
|
|
416
|
-
--gog-btn-
|
|
417
|
-
|
|
418
|
-
--gog-btn-
|
|
419
|
-
--gog-btn-
|
|
420
|
-
--gog-btn-
|
|
421
|
-
--gog-btn-
|
|
422
|
-
|
|
423
|
-
--gog-btn-
|
|
424
|
-
--gog-btn-
|
|
425
|
-
|
|
426
|
-
--gog-btn-
|
|
427
|
-
|
|
428
|
-
--gog-btn-
|
|
429
|
-
--gog-btn-
|
|
430
|
-
--gog-btn-
|
|
431
|
-
|
|
432
|
-
--gog-btn-
|
|
433
|
-
--gog-btn-
|
|
434
|
-
--gog-btn-
|
|
435
|
-
--gog-btn-
|
|
436
|
-
|
|
437
|
-
--gog-btn-
|
|
438
|
-
--gog-btn-
|
|
439
|
-
--gog-btn-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
--gog-
|
|
445
|
-
|
|
446
|
-
--gog-
|
|
447
|
-
--gog-
|
|
448
|
-
--gog-
|
|
449
|
-
--gog-
|
|
450
|
-
--gog-
|
|
451
|
-
--gog-
|
|
452
|
-
--gog-
|
|
453
|
-
--gog-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
--gog-checkbox-
|
|
459
|
-
--gog-checkbox-
|
|
460
|
-
--gog-checkbox-
|
|
461
|
-
--gog-checkbox-
|
|
462
|
-
--gog-checkbox-
|
|
463
|
-
--gog-checkbox-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
--gog-
|
|
470
|
-
--gog-
|
|
471
|
-
--gog-
|
|
472
|
-
--gog-
|
|
473
|
-
--gog-
|
|
474
|
-
--gog-
|
|
475
|
-
--gog-
|
|
476
|
-
--gog-
|
|
477
|
-
--gog-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
--gog-chip-
|
|
484
|
-
--gog-chip-
|
|
485
|
-
--gog-chip-
|
|
486
|
-
--gog-chip-
|
|
487
|
-
--gog-chip-
|
|
488
|
-
|
|
489
|
-
--gog-chip-
|
|
490
|
-
--gog-chip-
|
|
491
|
-
--gog-chip-
|
|
492
|
-
--gog-chip-
|
|
493
|
-
--gog-chip-
|
|
494
|
-
--gog-chip-
|
|
495
|
-
--gog-chip-
|
|
496
|
-
|
|
497
|
-
--gog-chip-
|
|
498
|
-
--gog-chip-
|
|
499
|
-
--gog-chip-
|
|
500
|
-
--gog-chip-
|
|
501
|
-
--gog-chip-
|
|
502
|
-
|
|
503
|
-
--gog-chip-
|
|
504
|
-
|
|
505
|
-
--gog-chip-
|
|
506
|
-
--gog-chip-
|
|
507
|
-
--gog-chip-
|
|
508
|
-
--gog-chip-
|
|
509
|
-
--gog-chip-
|
|
510
|
-
|
|
511
|
-
--gog-chip-
|
|
512
|
-
|
|
513
|
-
--gog-chip-
|
|
514
|
-
--gog-chip-
|
|
515
|
-
--gog-chip-
|
|
516
|
-
--gog-chip-
|
|
517
|
-
--gog-chip-
|
|
518
|
-
|
|
519
|
-
--gog-chip-
|
|
520
|
-
|
|
521
|
-
--gog-chip-
|
|
522
|
-
--gog-chip-
|
|
523
|
-
--gog-chip-
|
|
524
|
-
--gog-chip-
|
|
525
|
-
--gog-chip-
|
|
526
|
-
|
|
527
|
-
--gog-chip-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
--gog-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
--gog-
|
|
534
|
-
|
|
535
|
-
--gog-
|
|
536
|
-
--gog-
|
|
537
|
-
--gog-
|
|
538
|
-
--gog-
|
|
539
|
-
--gog-
|
|
540
|
-
--gog-
|
|
541
|
-
--gog-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
--gog-dialog-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
--gog-dialog-
|
|
548
|
-
--gog-dialog-
|
|
549
|
-
--gog-dialog-
|
|
550
|
-
--gog-dialog-
|
|
551
|
-
--gog-dialog-
|
|
552
|
-
--gog-dialog-
|
|
553
|
-
--gog-dialog-
|
|
554
|
-
--gog-dialog-
|
|
555
|
-
--gog-dialog-
|
|
556
|
-
--gog-dialog-
|
|
557
|
-
--gog-dialog-
|
|
558
|
-
--gog-dialog-
|
|
559
|
-
--gog-dialog-
|
|
560
|
-
--gog-dialog-
|
|
561
|
-
--gog-dialog-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
--gog-
|
|
565
|
-
--gog-
|
|
566
|
-
--gog-
|
|
567
|
-
--gog-
|
|
568
|
-
--gog-
|
|
569
|
-
--gog-
|
|
570
|
-
--gog-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
--gog-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
--gog-
|
|
579
|
-
--gog-
|
|
580
|
-
--gog-
|
|
581
|
-
--gog-
|
|
582
|
-
--gog-
|
|
583
|
-
--gog-
|
|
584
|
-
--gog-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
--gog-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
--gog-input-
|
|
591
|
-
--gog-input-
|
|
592
|
-
--gog-input-
|
|
593
|
-
--gog-input-
|
|
594
|
-
--gog-input-
|
|
595
|
-
--gog-input-
|
|
596
|
-
--gog-input-
|
|
597
|
-
--gog-input-
|
|
598
|
-
--gog-input-
|
|
599
|
-
--gog-input-
|
|
600
|
-
--gog-input-
|
|
601
|
-
--gog-input-
|
|
602
|
-
--gog-input-
|
|
603
|
-
--gog-input-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
--gog-
|
|
607
|
-
--gog-
|
|
608
|
-
--gog-
|
|
609
|
-
--gog-
|
|
610
|
-
--gog-
|
|
611
|
-
--gog-
|
|
612
|
-
--gog-
|
|
613
|
-
--gog-
|
|
614
|
-
--gog-
|
|
615
|
-
--gog-
|
|
616
|
-
--gog-
|
|
617
|
-
--gog-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
--gog-ms-
|
|
621
|
-
--gog-ms-
|
|
622
|
-
--gog-ms-
|
|
623
|
-
--gog-ms-
|
|
624
|
-
--gog-ms-
|
|
625
|
-
--gog-ms-
|
|
626
|
-
--gog-ms-
|
|
627
|
-
--gog-ms-
|
|
628
|
-
--gog-ms-
|
|
629
|
-
--gog-ms-
|
|
630
|
-
--gog-ms-
|
|
631
|
-
--gog-ms-border-
|
|
632
|
-
--gog-ms-
|
|
633
|
-
--gog-ms-
|
|
634
|
-
--gog-ms-
|
|
635
|
-
--gog-ms-
|
|
636
|
-
--gog-ms-
|
|
637
|
-
--gog-ms-
|
|
638
|
-
--gog-ms-
|
|
639
|
-
--gog-ms-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
--gog-ms-
|
|
643
|
-
--gog-ms-
|
|
644
|
-
--gog-ms-
|
|
645
|
-
--gog-ms-
|
|
646
|
-
--gog-ms-
|
|
647
|
-
--gog-ms-
|
|
648
|
-
--gog-ms-
|
|
649
|
-
--gog-ms-
|
|
650
|
-
--gog-ms-
|
|
651
|
-
--gog-ms-
|
|
652
|
-
--gog-ms-
|
|
653
|
-
--gog-ms-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
--gog-ms-
|
|
657
|
-
|
|
658
|
-
--gog-ms-
|
|
659
|
-
--gog-ms-
|
|
660
|
-
--gog-ms-
|
|
661
|
-
--gog-ms-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
--gog-
|
|
665
|
-
--gog-
|
|
666
|
-
--gog-
|
|
667
|
-
--gog-
|
|
668
|
-
--gog-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
--gog-
|
|
673
|
-
--gog-
|
|
674
|
-
--gog-
|
|
675
|
-
--gog-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
--gog-
|
|
679
|
-
--gog-
|
|
680
|
-
--gog-
|
|
681
|
-
--gog-
|
|
682
|
-
--gog-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
--gog-
|
|
686
|
-
--gog-
|
|
687
|
-
--gog-
|
|
688
|
-
--gog-
|
|
689
|
-
--gog-
|
|
690
|
-
--gog-
|
|
691
|
-
--gog-
|
|
692
|
-
--gog-
|
|
693
|
-
--gog-
|
|
694
|
-
--gog-
|
|
695
|
-
--gog-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
--gog-
|
|
700
|
-
--gog-
|
|
701
|
-
--gog-
|
|
702
|
-
--gog-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
--gog-select-
|
|
706
|
-
--gog-select-
|
|
707
|
-
--gog-select-
|
|
708
|
-
|
|
709
|
-
--gog-select-
|
|
710
|
-
--gog-select-
|
|
711
|
-
--gog-select-
|
|
712
|
-
--gog-select-
|
|
713
|
-
--gog-select-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
--gog-
|
|
717
|
-
--gog-
|
|
718
|
-
--gog-
|
|
719
|
-
--gog-
|
|
720
|
-
--gog-
|
|
721
|
-
--gog-
|
|
722
|
-
--gog-
|
|
723
|
-
--gog-
|
|
724
|
-
--gog-
|
|
725
|
-
--gog-
|
|
726
|
-
--gog-
|
|
727
|
-
--gog-
|
|
728
|
-
--gog-
|
|
729
|
-
--gog-
|
|
730
|
-
--gog-
|
|
731
|
-
--gog-
|
|
732
|
-
--gog-
|
|
733
|
-
--gog-
|
|
734
|
-
--gog-
|
|
735
|
-
--gog-
|
|
736
|
-
--gog-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
--gog-
|
|
740
|
-
--gog-
|
|
741
|
-
|
|
742
|
-
/*
|
|
743
|
-
--gog-
|
|
744
|
-
--gog-
|
|
745
|
-
--gog-
|
|
746
|
-
--gog-
|
|
747
|
-
--gog-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
--gog-
|
|
751
|
-
--gog-
|
|
752
|
-
--gog-
|
|
753
|
-
--gog-
|
|
754
|
-
--gog-
|
|
755
|
-
--gog-
|
|
756
|
-
--gog-
|
|
757
|
-
--gog-
|
|
758
|
-
--gog-
|
|
759
|
-
--gog-
|
|
760
|
-
--gog-
|
|
761
|
-
--gog-
|
|
762
|
-
--gog-
|
|
763
|
-
--gog-
|
|
764
|
-
--gog-
|
|
765
|
-
--gog-
|
|
766
|
-
--gog-
|
|
767
|
-
--gog-
|
|
768
|
-
--gog-
|
|
769
|
-
--gog-
|
|
770
|
-
--gog-
|
|
771
|
-
--gog-
|
|
772
|
-
--gog-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
--gog-
|
|
778
|
-
--gog-
|
|
779
|
-
--gog-
|
|
780
|
-
--gog-
|
|
781
|
-
--gog-
|
|
782
|
-
--gog-
|
|
783
|
-
--gog-
|
|
784
|
-
--gog-
|
|
785
|
-
--gog-
|
|
786
|
-
--gog-
|
|
787
|
-
--gog-
|
|
788
|
-
--gog-
|
|
789
|
-
--gog-
|
|
790
|
-
--gog-
|
|
791
|
-
--gog-
|
|
792
|
-
--gog-
|
|
793
|
-
--gog-
|
|
794
|
-
--gog-
|
|
795
|
-
--gog-
|
|
796
|
-
--gog-
|
|
797
|
-
--gog-
|
|
798
|
-
--gog-
|
|
799
|
-
--gog-
|
|
800
|
-
--gog-
|
|
801
|
-
--gog-
|
|
802
|
-
--gog-
|
|
803
|
-
--gog-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
--gog-
|
|
807
|
-
--gog-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
--gog-
|
|
811
|
-
--gog-
|
|
812
|
-
--gog-
|
|
813
|
-
--gog-
|
|
814
|
-
--gog-
|
|
815
|
-
--gog-
|
|
816
|
-
--gog-
|
|
817
|
-
--gog-
|
|
818
|
-
--gog-
|
|
819
|
-
--gog-
|
|
820
|
-
--gog-
|
|
821
|
-
--gog-
|
|
822
|
-
--gog-
|
|
823
|
-
--gog-
|
|
824
|
-
--gog-
|
|
825
|
-
--gog-
|
|
826
|
-
--gog-
|
|
827
|
-
--gog-
|
|
828
|
-
--gog-
|
|
829
|
-
--gog-
|
|
830
|
-
--gog-
|
|
831
|
-
--gog-
|
|
832
|
-
--gog-
|
|
833
|
-
--gog-
|
|
834
|
-
--gog-
|
|
835
|
-
--gog-
|
|
836
|
-
--gog-
|
|
837
|
-
--gog-
|
|
838
|
-
--gog-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
--gog-table-
|
|
842
|
-
--gog-table-
|
|
843
|
-
--gog-table-
|
|
844
|
-
--gog-table-
|
|
845
|
-
--gog-table-
|
|
846
|
-
--gog-table-
|
|
847
|
-
--gog-table-
|
|
848
|
-
--gog-table-
|
|
849
|
-
--gog-table-
|
|
850
|
-
--gog-table-
|
|
851
|
-
--gog-table-
|
|
852
|
-
--gog-table-
|
|
853
|
-
--gog-table-
|
|
854
|
-
--gog-table-
|
|
855
|
-
--gog-table-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
--gog-
|
|
861
|
-
--gog-
|
|
862
|
-
--gog-
|
|
863
|
-
--gog-
|
|
864
|
-
--gog-
|
|
865
|
-
--gog-
|
|
866
|
-
--gog-
|
|
867
|
-
--gog-
|
|
868
|
-
--gog-
|
|
869
|
-
--gog-
|
|
870
|
-
--gog-
|
|
871
|
-
--gog-
|
|
872
|
-
--gog-
|
|
873
|
-
--gog-
|
|
874
|
-
--gog-
|
|
875
|
-
--gog-
|
|
876
|
-
--gog-
|
|
877
|
-
|
|
878
|
-
--gog-
|
|
879
|
-
--gog-
|
|
880
|
-
--gog-
|
|
881
|
-
--gog-
|
|
882
|
-
--gog-
|
|
883
|
-
|
|
884
|
-
--gog-
|
|
885
|
-
--gog-
|
|
886
|
-
--gog-
|
|
887
|
-
--gog-
|
|
888
|
-
--gog-
|
|
889
|
-
|
|
890
|
-
--gog-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
--gog-tag-
|
|
897
|
-
--gog-tag-
|
|
898
|
-
--gog-tag-
|
|
899
|
-
--gog-tag-
|
|
900
|
-
--gog-tag-
|
|
901
|
-
|
|
902
|
-
--gog-tag-
|
|
903
|
-
--gog-tag-
|
|
904
|
-
--gog-tag-
|
|
905
|
-
--gog-tag-
|
|
906
|
-
--gog-tag-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
--gog-
|
|
910
|
-
--gog-
|
|
911
|
-
--gog-
|
|
912
|
-
|
|
913
|
-
--gog-
|
|
914
|
-
--gog-
|
|
915
|
-
--gog-
|
|
916
|
-
--gog-
|
|
917
|
-
--gog-
|
|
918
|
-
|
|
919
|
-
--gog-
|
|
920
|
-
--gog-
|
|
921
|
-
--gog-
|
|
922
|
-
--gog-
|
|
923
|
-
--gog-
|
|
924
|
-
|
|
925
|
-
--gog-
|
|
926
|
-
--gog-
|
|
927
|
-
--gog-
|
|
928
|
-
--gog-
|
|
929
|
-
--gog-
|
|
930
|
-
|
|
931
|
-
--gog-
|
|
932
|
-
--gog-
|
|
933
|
-
--gog-
|
|
934
|
-
--gog-
|
|
935
|
-
--gog-
|
|
936
|
-
|
|
937
|
-
--gog-
|
|
938
|
-
--gog-
|
|
939
|
-
--gog-
|
|
940
|
-
--gog-
|
|
941
|
-
--gog-
|
|
942
|
-
|
|
943
|
-
|
|
1
|
+
/*
|
|
2
|
+
* @guildofgleks/ui — baseline theme
|
|
3
|
+
*
|
|
4
|
+
* Every token the components read, with a working default, so the library renders
|
|
5
|
+
* correctly from a single import and a consumer can override only what they care about.
|
|
6
|
+
*
|
|
7
|
+
* ── The three layers ─────────────────────────────────────────────────────────────
|
|
8
|
+
* 1. Foundation — palette, type scale, spacing, motion, focus. Restyles everything.
|
|
9
|
+
* 2. Component — `--gog-<block>-*`. Every colour, font, border, radius, shadow,
|
|
10
|
+
* padding and duration each component paints with lives here, so a
|
|
11
|
+
* theme can restyle one component without touching its stylesheet.
|
|
12
|
+
* 3. Instance — a handful of deliberately UNDECLARED tokens (`--gog-btn-bg`,
|
|
13
|
+
* `--gog-btn-padding`, `--gog-tag-bg`, …) that variant/size classes
|
|
14
|
+
* fall back through. Left unset on purpose: a value declared here
|
|
15
|
+
* would out-cascade the variant classes and pin every button to one
|
|
16
|
+
* look. Set them on an element to override a single instance.
|
|
17
|
+
*
|
|
18
|
+
* No component stylesheet declares a `--gog-*` default of its own — everything a
|
|
19
|
+
* component paints resolves to a token below.
|
|
20
|
+
*
|
|
21
|
+
* ── Why there are two blocks, and which one to add a token to ────────────────────
|
|
22
|
+
* A custom property's `var()` references are substituted on the element that *declares*
|
|
23
|
+
* it, not where it is read. So `--gog-btn-primary-bg: var(--gog-accent-color)` declared on
|
|
24
|
+
* `:root` freezes to the root palette: a `data-theme` scope further down the tree could
|
|
25
|
+
* change `--gog-accent-color` and buttons inside it would not follow.
|
|
26
|
+
*
|
|
27
|
+
* `:root` — literals only (and the light palette default). Values that
|
|
28
|
+
* reference nothing, so resolving them once at the root is right.
|
|
29
|
+
* `:root, [data-theme]` — every token whose value reads another token. Re-declared on
|
|
30
|
+
* each theme scope so it re-derives from that scope's palette
|
|
31
|
+
* and metrics. **A new token that contains `var(` goes here.**
|
|
32
|
+
*
|
|
33
|
+
* ── Adding a theme ───────────────────────────────────────────────────────────────
|
|
34
|
+
* Declare a palette against the attribute value; the derived layer re-resolves for you:
|
|
35
|
+
*
|
|
36
|
+
* :root[data-theme='mine'], [data-theme='mine'] { --gog-accent-color: #ff4edb; }
|
|
37
|
+
*
|
|
38
|
+
* Listing both selectors makes the theme work at the root *and* on any subtree, so a
|
|
39
|
+
* single page can show several themes side by side.
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
:root {
|
|
43
|
+
/* ── Typography ───────────────────────────────────────────────────────────────
|
|
44
|
+
Generic stacks on purpose: a UI library should not force a webfont download on
|
|
45
|
+
its consumers. Point these at your own families to restyle all text at once.
|
|
46
|
+
`styles/fonts.css` is an optional import that wires up the showcase's families. */
|
|
47
|
+
--gog-font-heading: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
48
|
+
--gog-font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
49
|
+
--gog-font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
|
|
50
|
+
|
|
51
|
+
--gog-text-xs: 0.75rem;
|
|
52
|
+
--gog-text-sm: 0.875rem;
|
|
53
|
+
--gog-text-md: 1rem;
|
|
54
|
+
--gog-text-lg: 1.125rem;
|
|
55
|
+
--gog-text-xl: 1.5rem;
|
|
56
|
+
--gog-text-2xl: 2rem;
|
|
57
|
+
--gog-text-3xl: 3rem;
|
|
58
|
+
|
|
59
|
+
/* ── Spacing & geometry ─────────────────────────────────────────────────────── */
|
|
60
|
+
--gog-space-xs: 4px;
|
|
61
|
+
--gog-space-sm: 8px;
|
|
62
|
+
--gog-space-md: 16px;
|
|
63
|
+
--gog-space-lg: 24px;
|
|
64
|
+
--gog-space-2xl: 48px;
|
|
65
|
+
|
|
66
|
+
--gog-radius: 8px;
|
|
67
|
+
--gog-panel-border-width: 1px;
|
|
68
|
+
--gog-panel-border-style: solid;
|
|
69
|
+
|
|
70
|
+
/* ── Motion ──────────────────────────────────────────────────────────────────
|
|
71
|
+
Every component transition/animation is expressed in these. Set them to 0s to
|
|
72
|
+
flatten all motion theme-wide (components also honour prefers-reduced-motion). */
|
|
73
|
+
--gog-duration-fast: 0.12s;
|
|
74
|
+
--gog-duration-base: 0.15s;
|
|
75
|
+
--gog-duration-slow: 0.2s;
|
|
76
|
+
--gog-easing: ease;
|
|
77
|
+
|
|
78
|
+
/* ── Focus & disabled ───────────────────────────────────────────────────────── */
|
|
79
|
+
--gog-focus-ring-width: 3px;
|
|
80
|
+
--gog-focus-ring-offset: 2px;
|
|
81
|
+
--gog-disabled-opacity: 0.4;
|
|
82
|
+
|
|
83
|
+
/* ── Control metrics ─────────────────────────────────────────────────────────
|
|
84
|
+
Five-tier scale: xsm/slg bookend the original sm/md/lg (restored below to
|
|
85
|
+
their pre-compaction numbers) as new extremes for extra-tight or extra-roomy
|
|
86
|
+
layouts. */
|
|
87
|
+
--gog-control-padding-y: 10px;
|
|
88
|
+
--gog-control-padding-x: 14px;
|
|
89
|
+
--gog-control-icon-offset: 10px;
|
|
90
|
+
--gog-control-border-width: 2px;
|
|
91
|
+
--gog-control-border-style: solid;
|
|
92
|
+
|
|
93
|
+
--gog-control-checkbox-padding: 6px;
|
|
94
|
+
--gog-control-checkbox-box-size-xsm: 12px;
|
|
95
|
+
--gog-control-checkbox-box-size-sm: 18px;
|
|
96
|
+
--gog-control-checkbox-box-size-md: 24px;
|
|
97
|
+
--gog-control-checkbox-box-size-lg: 32px;
|
|
98
|
+
--gog-control-checkbox-box-size-slg: 40px;
|
|
99
|
+
--gog-control-checkbox-label-size-xsm: 0.6875rem;
|
|
100
|
+
--gog-control-checkbox-label-size-sm: 0.8125rem;
|
|
101
|
+
--gog-control-checkbox-label-size-md: 0.9375rem;
|
|
102
|
+
--gog-control-checkbox-label-size-lg: 1.0625rem;
|
|
103
|
+
--gog-control-checkbox-label-size-slg: 1.1875rem;
|
|
104
|
+
--gog-control-checkbox-icon-size-xsm: 10px;
|
|
105
|
+
--gog-control-checkbox-icon-size-sm: 12px;
|
|
106
|
+
--gog-control-checkbox-icon-size-md: 14px;
|
|
107
|
+
--gog-control-checkbox-icon-size-lg: 18px;
|
|
108
|
+
--gog-control-checkbox-icon-size-slg: 22px;
|
|
109
|
+
|
|
110
|
+
/* ── Button sizing ─────────────────────────────────────────────────────────── */
|
|
111
|
+
--gog-btn-xsm-padding: 0.25rem 0.5rem;
|
|
112
|
+
--gog-btn-sm-padding: 0.5rem 0.875rem;
|
|
113
|
+
--gog-btn-md-padding: 0.75rem 1.25rem;
|
|
114
|
+
--gog-btn-lg-padding: 1rem 1.5rem;
|
|
115
|
+
--gog-btn-slg-padding: 1.25rem 1.75rem;
|
|
116
|
+
--gog-btn-xsm-font-size: 0.75rem;
|
|
117
|
+
--gog-btn-sm-font-size: 0.875rem;
|
|
118
|
+
--gog-btn-md-font-size: 1rem;
|
|
119
|
+
--gog-btn-lg-font-size: 1.125rem;
|
|
120
|
+
--gog-btn-slg-font-size: 1.25rem;
|
|
121
|
+
|
|
122
|
+
/* ── Field sizing (input / select / multiselect share one scale) ───────────── */
|
|
123
|
+
--gog-field-xsm-padding-y: 4px;
|
|
124
|
+
--gog-field-xsm-padding-x: 8px;
|
|
125
|
+
--gog-field-xsm-icon-offset: 6px;
|
|
126
|
+
--gog-field-xsm-icon-inset: 24px;
|
|
127
|
+
|
|
128
|
+
--gog-field-sm-padding-y: 6px;
|
|
129
|
+
--gog-field-sm-padding-x: 10px;
|
|
130
|
+
--gog-field-sm-icon-offset: 8px;
|
|
131
|
+
--gog-field-sm-icon-inset: 30px;
|
|
132
|
+
|
|
133
|
+
--gog-field-md-icon-inset: 36px;
|
|
134
|
+
|
|
135
|
+
--gog-field-lg-padding-y: 14px;
|
|
136
|
+
--gog-field-lg-padding-x: 18px;
|
|
137
|
+
--gog-field-lg-icon-offset: 14px;
|
|
138
|
+
--gog-field-lg-icon-inset: 44px;
|
|
139
|
+
|
|
140
|
+
--gog-field-slg-padding-y: 18px;
|
|
141
|
+
--gog-field-slg-padding-x: 22px;
|
|
142
|
+
--gog-field-slg-font-size: 1.25rem;
|
|
143
|
+
--gog-field-slg-icon-offset: 18px;
|
|
144
|
+
--gog-field-slg-icon-inset: 52px;
|
|
145
|
+
|
|
146
|
+
/* ── Icon & spinner ───────────────────────────────────────────────────────── */
|
|
147
|
+
--gog-icon-size: 1.2em;
|
|
148
|
+
--gog-icon-stroke-width: 2;
|
|
149
|
+
--gog-spinner-size-xsm: 12px;
|
|
150
|
+
--gog-spinner-size-sm: 18px;
|
|
151
|
+
--gog-spinner-size-md: 48px;
|
|
152
|
+
--gog-spinner-size-lg: 96px;
|
|
153
|
+
--gog-spinner-size-slg: 144px;
|
|
154
|
+
--gog-spinner-rune-size: 20px;
|
|
155
|
+
|
|
156
|
+
/* ── Toast stack ──────────────────────────────────────────────────────────── */
|
|
157
|
+
--gog-toast-min-width: 280px;
|
|
158
|
+
--gog-toast-max-width: 400px;
|
|
159
|
+
--gog-toast-gap: 10px;
|
|
160
|
+
--gog-toast-stack-padding: 16px;
|
|
161
|
+
--gog-toast-z-index: 9999;
|
|
162
|
+
--gog-toast-enter-distance: 110%;
|
|
163
|
+
--gog-toast-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
|
|
164
|
+
|
|
165
|
+
/* ── Overlay stacking ───────────────────────────────────────────────────────
|
|
166
|
+
Baseline for dropdown panels. gog-dialog re-declares this on its own panel so
|
|
167
|
+
dropdowns opened inside a dialog stack above it. */
|
|
168
|
+
--gog-dropdown-z: 300;
|
|
169
|
+
--gog-spinner-overlay-z: 8000;
|
|
170
|
+
|
|
171
|
+
/* ── Light palette (also the no-data-theme default) ───────────────────────── */
|
|
172
|
+
color-scheme: light;
|
|
173
|
+
/* Фоновые и поверхностные тона */
|
|
174
|
+
--gog-background-color: #f7f3eb; /* Тёплый пергаментный фон страницы */
|
|
175
|
+
--gog-surface-color: #ffffff; /* КИСЛО-БЕЛЫЙ ПЕРГАМЕНТ карточек (создает контраст со слоем 1!) */
|
|
176
|
+
--gog-hover-color: #f0e7d7; /* Состояние наведения (мягкий воск) */
|
|
177
|
+
--gog-border-color: #d8c7ad; /* Состаренная латунная рамка */
|
|
178
|
+
|
|
179
|
+
/* Типографика (Старинные дубовые чернила) */
|
|
180
|
+
--gog-text-color: #17120c; /* Глубокие чернила (высокий контраст WCAG AAA) */
|
|
181
|
+
--gog-accent-text-color: #ffffff;
|
|
182
|
+
--gog-muted-text-color: #63503c; /* Приглушенные печные чернила */
|
|
183
|
+
|
|
184
|
+
/* Бренд и акценты (Гильдейское Сусальное Золото) */
|
|
185
|
+
--gog-primary-color: #17120c;
|
|
186
|
+
--gog-accent-color: #9e6f00; /* Насыщенный благородный золотисто-бронзовый */
|
|
187
|
+
--gog-accent-bright: #c88e00; /* Яркий отблеск золота */
|
|
188
|
+
--gog-accent-dim: #735100; /* Темная бронза */
|
|
189
|
+
--gog-accent-pale: #f8f1df; /* Светлая подложка под золото */
|
|
190
|
+
--gog-secondary-color: #6b5328;
|
|
191
|
+
|
|
192
|
+
/* Гармонизированная алхимическая семантика */
|
|
193
|
+
--gog-success-color: #216e4e; /* Изумруд */
|
|
194
|
+
--gog-danger-color: #a7232b; /* Рубин */
|
|
195
|
+
--gog-warning-color: #c45100; /* Тёмный янтарь */
|
|
196
|
+
--gog-info-color: #2b5c8f; /* Лазурит */
|
|
197
|
+
|
|
198
|
+
/* Объёмная мягкая тень старой кожи */
|
|
199
|
+
--gog-panel-shadow: 0 4px 20px rgba(23, 18, 12, 0.08), 0 1px 3px rgba(23, 18, 12, 0.04);
|
|
200
|
+
--gog-spinner-overlay-bg: rgba(247, 243, 235, 0.85);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
:root[data-theme='light'],
|
|
204
|
+
[data-theme='light'] {
|
|
205
|
+
color-scheme: light;
|
|
206
|
+
|
|
207
|
+
/* Фоновые и поверхностные тона */
|
|
208
|
+
--gog-background-color: #f7f3eb; /* Тёплый пергаментный фон страницы */
|
|
209
|
+
--gog-surface-color: #ffffff; /* КИСЛО-БЕЛЫЙ ПЕРГАМЕНТ карточек (создает контраст со слоем 1!) */
|
|
210
|
+
--gog-hover-color: #f0e7d7; /* Состояние наведения (мягкий воск) */
|
|
211
|
+
--gog-border-color: #d8c7ad; /* Состаренная латунная рамка */
|
|
212
|
+
|
|
213
|
+
/* Типографика (Старинные дубовые чернила) */
|
|
214
|
+
--gog-text-color: #17120c; /* Глубокие чернила (высокий контраст WCAG AAA) */
|
|
215
|
+
--gog-accent-text-color: #ffffff;
|
|
216
|
+
--gog-muted-text-color: #63503c; /* Приглушенные печные чернила */
|
|
217
|
+
|
|
218
|
+
/* Бренд и акценты (Гильдейское Сусальное Золото) */
|
|
219
|
+
--gog-primary-color: #17120c;
|
|
220
|
+
--gog-accent-color: #9e6f00; /* Насыщенный благородный золотисто-бронзовый */
|
|
221
|
+
--gog-accent-bright: #c88e00; /* Яркий отблеск золота */
|
|
222
|
+
--gog-accent-dim: #735100; /* Темная бронза */
|
|
223
|
+
--gog-accent-pale: #f8f1df; /* Светлая подложка под золото */
|
|
224
|
+
--gog-secondary-color: #6b5328;
|
|
225
|
+
|
|
226
|
+
/* Гармонизированная алхимическая семантика */
|
|
227
|
+
--gog-success-color: #216e4e; /* Изумруд */
|
|
228
|
+
--gog-danger-color: #a7232b; /* Рубин */
|
|
229
|
+
--gog-warning-color: #c45100; /* Тёмный янтарь */
|
|
230
|
+
--gog-info-color: #2b5c8f; /* Лазурит */
|
|
231
|
+
|
|
232
|
+
/* Объёмная мягкая тень старой кожи */
|
|
233
|
+
--gog-panel-shadow: 0 4px 20px rgba(23, 18, 12, 0.08), 0 1px 3px rgba(23, 18, 12, 0.04);
|
|
234
|
+
--gog-spinner-overlay-bg: rgba(247, 243, 235, 0.85);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
:root[data-theme='dark'],
|
|
238
|
+
[data-theme='dark'] {
|
|
239
|
+
color-scheme: dark;
|
|
240
|
+
|
|
241
|
+
/* Фоновые и поверхностные тона */
|
|
242
|
+
--gog-background-color: #0d0b08; /* Глубокий кузнечный обсидиан */
|
|
243
|
+
--gog-surface-color: #16120e; /* Тёмное обожженное железо (карточки) */
|
|
244
|
+
--gog-hover-color: #241d17; /* Наведение на элементы */
|
|
245
|
+
--gog-border-color: #3d3122; /* Состаренная чеканенная бронза */
|
|
246
|
+
|
|
247
|
+
/* Типографика (Светящаяся Слоновая Кость) */
|
|
248
|
+
--gog-text-color: #f3ebd8; /* Мягкий светящийся пергамент */
|
|
249
|
+
--gog-accent-text-color: #0d0b08;
|
|
250
|
+
--gog-muted-text-color: #9e8d76; /* Приглушенная бронза */
|
|
251
|
+
|
|
252
|
+
/* Бренд и акценты (Светящееся Золото Алхимии) */
|
|
253
|
+
--gog-primary-color: #f3ebd8;
|
|
254
|
+
--gog-accent-color: #fbbf24; /* Плазменный янтарь */
|
|
255
|
+
--gog-accent-bright: #fde047; /* Яркий золотой луч */
|
|
256
|
+
--gog-accent-dim: #b48310; /* Приглушенное золото */
|
|
257
|
+
--gog-accent-pale: #2b210c; /* Тёмный золотой отсвет */
|
|
258
|
+
--gog-secondary-color: #d4a373;
|
|
259
|
+
|
|
260
|
+
/* Семантика */
|
|
261
|
+
--gog-success-color: #34d399; /* Светящийся изумруд */
|
|
262
|
+
--gog-danger-color: #f87171; /* Светящийся рубин */
|
|
263
|
+
--gog-warning-color: #fbbf24; /* Янтарь */
|
|
264
|
+
--gog-info-color: #38bdf8; /* Сапфир */
|
|
265
|
+
|
|
266
|
+
--gog-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--gog-border-color);
|
|
267
|
+
--gog-spinner-overlay-bg: rgba(13, 11, 8, 0.85);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/*
|
|
271
|
+
* ── Derived layer ───────────────────────────────────────────────────────────────
|
|
272
|
+
* Re-declared on every theme scope so each one re-derives from its own palette and
|
|
273
|
+
* metrics. Everything here reads another token; nothing here is a bare literal.
|
|
274
|
+
*/
|
|
275
|
+
:root,
|
|
276
|
+
[data-theme] {
|
|
277
|
+
/* ── Derived foundation tokens ───────────────────────────────────────────────
|
|
278
|
+
Split out of the literal block above because they read other tokens: they have
|
|
279
|
+
to re-resolve inside each theme scope. */
|
|
280
|
+
--gog-panel-radius: calc(var(--gog-radius) + 8px);
|
|
281
|
+
--gog-field-xsm-font-size: var(--gog-text-xs);
|
|
282
|
+
--gog-field-sm-font-size: var(--gog-text-sm);
|
|
283
|
+
--gog-field-md-padding-y: var(--gog-control-padding-y);
|
|
284
|
+
--gog-field-md-padding-x: var(--gog-control-padding-x);
|
|
285
|
+
--gog-field-md-font-size: var(--gog-text-md);
|
|
286
|
+
--gog-field-md-icon-offset: var(--gog-control-icon-offset);
|
|
287
|
+
--gog-field-lg-font-size: var(--gog-text-lg);
|
|
288
|
+
|
|
289
|
+
/* ══════════════════════════════════════════════════════════════════════════════
|
|
290
|
+
COMPONENT TOKENS
|
|
291
|
+
Everything below is what an individual component paints with. Override a block
|
|
292
|
+
to restyle just that component; the values themselves all derive from the
|
|
293
|
+
foundation tokens above, so a palette swap carries through for free.
|
|
294
|
+
══════════════════════════════════════════════════════════════════════════════ */
|
|
295
|
+
|
|
296
|
+
/* ── Accordion ─────────────────────────────────────────────────────────────── */
|
|
297
|
+
--gog-accordion-font-family: var(--gog-font-heading);
|
|
298
|
+
--gog-accordion-body-font-family: var(--gog-font-body);
|
|
299
|
+
--gog-accordion-border-color: var(--gog-accent-dim);
|
|
300
|
+
--gog-accordion-border-width: var(--gog-control-border-width);
|
|
301
|
+
--gog-accordion-border-style: var(--gog-control-border-style);
|
|
302
|
+
--gog-accordion-text-color: var(--gog-text-color);
|
|
303
|
+
--gog-accordion-accent-color: var(--gog-accent-color);
|
|
304
|
+
--gog-accordion-hover-bg: color-mix(in srgb, var(--gog-accent-dim) 10%, transparent);
|
|
305
|
+
--gog-accordion-hover-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
|
|
306
|
+
--gog-accordion-focus-ring-width: var(--gog-focus-ring-width);
|
|
307
|
+
--gog-accordion-body-color: var(--gog-text-color);
|
|
308
|
+
--gog-accordion-body-line-height: 1.6;
|
|
309
|
+
--gog-accordion-header-text-transform: uppercase;
|
|
310
|
+
--gog-accordion-header-gap: 12px;
|
|
311
|
+
--gog-accordion-disabled-opacity: 0.5;
|
|
312
|
+
--gog-accordion-transition-duration: var(--gog-duration-base);
|
|
313
|
+
--gog-accordion-body-transition-duration: var(--gog-duration-slow);
|
|
314
|
+
--gog-accordion-chevron-transition-duration: var(--gog-duration-slow);
|
|
315
|
+
--gog-accordion-body-lift: -2px;
|
|
316
|
+
/* Flat by default — corner rounding is a look, not a given; consumers who want it
|
|
317
|
+
opt in per-instance or theme-wide by overriding these two. */
|
|
318
|
+
--gog-accordion-radius: 0px;
|
|
319
|
+
--gog-accordion-body-radius: 0px;
|
|
320
|
+
--gog-accordion-header-bg: transparent;
|
|
321
|
+
/* A subtle black wash over whatever sits behind the accordion, so the body always
|
|
322
|
+
reads slightly darker than the header regardless of the surrounding surface color. */
|
|
323
|
+
--gog-accordion-body-bg: color-mix(in srgb, black 6%, transparent);
|
|
324
|
+
/* Per-size metrics. `lg` is the default size. */
|
|
325
|
+
--gog-accordion-xsm-padding-y: 4px;
|
|
326
|
+
--gog-accordion-xsm-padding-x: 8px;
|
|
327
|
+
--gog-accordion-xsm-font-size: var(--gog-text-xs);
|
|
328
|
+
--gog-accordion-xsm-letter-spacing: 0.2px;
|
|
329
|
+
--gog-accordion-xsm-content-gap: 2px;
|
|
330
|
+
--gog-accordion-xsm-body-font-size: var(--gog-text-xs);
|
|
331
|
+
--gog-accordion-xsm-body-line-height: 1.5;
|
|
332
|
+
--gog-accordion-xsm-body-padding-top: 4px;
|
|
333
|
+
--gog-accordion-xsm-body-padding-bottom: 6px;
|
|
334
|
+
--gog-accordion-xsm-chevron-size: 11px;
|
|
335
|
+
--gog-accordion-xsm-chevron-font-size: 10px;
|
|
336
|
+
|
|
337
|
+
--gog-accordion-sm-padding-y: 6px;
|
|
338
|
+
--gog-accordion-sm-padding-x: 10px;
|
|
339
|
+
--gog-accordion-sm-font-size: var(--gog-text-xs);
|
|
340
|
+
--gog-accordion-sm-letter-spacing: 0.4px;
|
|
341
|
+
--gog-accordion-sm-content-gap: 2px;
|
|
342
|
+
--gog-accordion-sm-body-font-size: var(--gog-text-xs);
|
|
343
|
+
--gog-accordion-sm-body-line-height: var(--gog-accordion-body-line-height);
|
|
344
|
+
--gog-accordion-sm-body-padding-top: 6px;
|
|
345
|
+
--gog-accordion-sm-body-padding-bottom: 8px;
|
|
346
|
+
--gog-accordion-sm-chevron-size: 13px;
|
|
347
|
+
--gog-accordion-sm-chevron-font-size: 12px;
|
|
348
|
+
|
|
349
|
+
--gog-accordion-md-padding-y: 10px;
|
|
350
|
+
--gog-accordion-md-padding-x: 14px;
|
|
351
|
+
--gog-accordion-md-font-size: var(--gog-text-xs);
|
|
352
|
+
--gog-accordion-md-letter-spacing: 0.8px;
|
|
353
|
+
--gog-accordion-md-content-gap: 2px;
|
|
354
|
+
--gog-accordion-md-body-font-size: var(--gog-text-sm);
|
|
355
|
+
--gog-accordion-md-body-line-height: var(--gog-accordion-body-line-height);
|
|
356
|
+
--gog-accordion-md-body-padding-top: 8px;
|
|
357
|
+
--gog-accordion-md-body-padding-bottom: 12px;
|
|
358
|
+
--gog-accordion-md-chevron-size: 15px;
|
|
359
|
+
--gog-accordion-md-chevron-font-size: 14px;
|
|
360
|
+
|
|
361
|
+
--gog-accordion-lg-padding-y: 14px;
|
|
362
|
+
--gog-accordion-lg-padding-x: 16px;
|
|
363
|
+
--gog-accordion-lg-font-size: var(--gog-text-sm);
|
|
364
|
+
--gog-accordion-lg-letter-spacing: 0.8px;
|
|
365
|
+
--gog-accordion-lg-content-gap: 4px;
|
|
366
|
+
--gog-accordion-lg-body-font-size: var(--gog-text-md);
|
|
367
|
+
--gog-accordion-lg-body-line-height: var(--gog-accordion-body-line-height);
|
|
368
|
+
--gog-accordion-lg-body-padding-top: 12px;
|
|
369
|
+
--gog-accordion-lg-body-padding-bottom: 16px;
|
|
370
|
+
--gog-accordion-lg-chevron-size: 18px;
|
|
371
|
+
--gog-accordion-lg-chevron-font-size: 16px;
|
|
372
|
+
|
|
373
|
+
--gog-accordion-slg-padding-y: 18px;
|
|
374
|
+
--gog-accordion-slg-padding-x: 18px;
|
|
375
|
+
--gog-accordion-slg-font-size: var(--gog-text-md);
|
|
376
|
+
--gog-accordion-slg-letter-spacing: 0.8px;
|
|
377
|
+
--gog-accordion-slg-content-gap: 4px;
|
|
378
|
+
--gog-accordion-slg-body-font-size: var(--gog-text-lg);
|
|
379
|
+
--gog-accordion-slg-body-line-height: var(--gog-accordion-body-line-height);
|
|
380
|
+
--gog-accordion-slg-body-padding-top: 16px;
|
|
381
|
+
--gog-accordion-slg-body-padding-bottom: 20px;
|
|
382
|
+
--gog-accordion-slg-chevron-size: 20px;
|
|
383
|
+
--gog-accordion-slg-chevron-font-size: 18px;
|
|
384
|
+
|
|
385
|
+
/* ── Collapsible ───────────────────────────────────────────────────────────
|
|
386
|
+
No portal, no owned markup — see utilities.css for the actual `.gog-collapsible__*`
|
|
387
|
+
rules (they style content this component's consumer projects, which sits outside
|
|
388
|
+
`gog-collapsible`'s own view and can't be reached by its scoped stylesheet). */
|
|
389
|
+
--gog-collapsible-transition-duration: var(--gog-duration-slow);
|
|
390
|
+
/* Generous fixed cap rather than a measured height: the CSS-only max-height transition
|
|
391
|
+
trades exact timing for arbitrary content (any number of children) without JS. Override
|
|
392
|
+
per-instance if a particular panel's content can exceed this. */
|
|
393
|
+
--gog-collapsible-max-height: 480px;
|
|
394
|
+
--gog-collapsible-disabled-opacity: var(--gog-disabled-opacity);
|
|
395
|
+
|
|
396
|
+
/* ── Button ────────────────────────────────────────────────────────────────
|
|
397
|
+
`--gog-btn-bg`, `--gog-btn-color`, `--gog-btn-border`, `--gog-btn-shadow`,
|
|
398
|
+
`--gog-btn-hover-bg`, `--gog-btn-hover-shadow`, `--gog-btn-padding` and
|
|
399
|
+
`--gog-btn-font-size` are intentionally NOT declared — they are the per-instance
|
|
400
|
+
escape hatch the variant/size classes fall back through. */
|
|
401
|
+
--gog-btn-font-family: var(--gog-font-heading);
|
|
402
|
+
--gog-btn-font-weight: 900;
|
|
403
|
+
--gog-btn-letter-spacing: 1px;
|
|
404
|
+
--gog-btn-text-transform: uppercase;
|
|
405
|
+
--gog-btn-line-height: 1;
|
|
406
|
+
--gog-btn-gap: var(--gog-space-sm);
|
|
407
|
+
--gog-btn-radius: var(--gog-radius);
|
|
408
|
+
--gog-btn-border-width: var(--gog-control-border-width);
|
|
409
|
+
--gog-btn-border-style: var(--gog-control-border-style);
|
|
410
|
+
--gog-btn-transition-duration: var(--gog-duration-base);
|
|
411
|
+
--gog-btn-focus-ring-width: var(--gog-focus-ring-width);
|
|
412
|
+
--gog-btn-focus-ring-offset: 3px;
|
|
413
|
+
--gog-btn-active-scale: 0.97;
|
|
414
|
+
--gog-btn-disabled-opacity: var(--gog-disabled-opacity);
|
|
415
|
+
--gog-btn-loading-opacity: 0.7;
|
|
416
|
+
--gog-btn-spinner-max-size: 70%;
|
|
417
|
+
|
|
418
|
+
--gog-btn-primary-bg: var(--gog-accent-color);
|
|
419
|
+
--gog-btn-primary-color: var(--gog-accent-text-color, var(--gog-primary-color));
|
|
420
|
+
--gog-btn-primary-border: transparent;
|
|
421
|
+
--gog-btn-primary-shadow: none;
|
|
422
|
+
--gog-btn-primary-hover-bg: var(--gog-accent-bright);
|
|
423
|
+
--gog-btn-primary-hover-color: var(--gog-btn-primary-color);
|
|
424
|
+
--gog-btn-primary-hover-shadow: 0 0 16px
|
|
425
|
+
color-mix(in srgb, var(--gog-accent-bright) 45%, transparent);
|
|
426
|
+
--gog-btn-primary-spinner-color: var(--gog-text-color);
|
|
427
|
+
|
|
428
|
+
--gog-btn-secondary-bg: var(--gog-secondary-color);
|
|
429
|
+
--gog-btn-secondary-color: var(--gog-accent-text-color, var(--gog-primary-color));
|
|
430
|
+
--gog-btn-secondary-border: transparent;
|
|
431
|
+
--gog-btn-secondary-shadow: none;
|
|
432
|
+
--gog-btn-secondary-hover-bg: var(--gog-accent-color);
|
|
433
|
+
--gog-btn-secondary-hover-color: var(--gog-btn-secondary-color);
|
|
434
|
+
--gog-btn-secondary-hover-shadow: none;
|
|
435
|
+
--gog-btn-secondary-spinner-color: var(--gog-text-color);
|
|
436
|
+
|
|
437
|
+
--gog-btn-outline-bg: transparent;
|
|
438
|
+
--gog-btn-outline-color: var(--gog-accent-color);
|
|
439
|
+
--gog-btn-outline-border: var(--gog-accent-color);
|
|
440
|
+
--gog-btn-outline-shadow: none;
|
|
441
|
+
--gog-btn-outline-hover-bg: var(--gog-accent-color);
|
|
442
|
+
--gog-btn-outline-hover-color: var(--gog-primary-color);
|
|
443
|
+
--gog-btn-outline-hover-shadow: none;
|
|
444
|
+
--gog-btn-outline-spinner-color: var(--gog-accent-color);
|
|
445
|
+
|
|
446
|
+
--gog-btn-ghost-bg: transparent;
|
|
447
|
+
--gog-btn-ghost-color: var(--gog-accent-color);
|
|
448
|
+
--gog-btn-ghost-border: transparent;
|
|
449
|
+
--gog-btn-ghost-shadow: none;
|
|
450
|
+
--gog-btn-ghost-hover-bg: color-mix(in srgb, var(--gog-accent-color) 12%, transparent);
|
|
451
|
+
--gog-btn-ghost-hover-color: var(--gog-btn-ghost-color);
|
|
452
|
+
--gog-btn-ghost-hover-shadow: none;
|
|
453
|
+
--gog-btn-ghost-spinner-color: var(--gog-accent-color);
|
|
454
|
+
|
|
455
|
+
/* ── Checkbox ──────────────────────────────────────────────────────────────
|
|
456
|
+
Box/label/icon size and padding come from the `--gog-control-checkbox-*` scale;
|
|
457
|
+
checkbox.component.ts maps the `size` input onto the host. */
|
|
458
|
+
--gog-checkbox-font-family: var(--gog-font-body);
|
|
459
|
+
--gog-checkbox-gap: 10px;
|
|
460
|
+
--gog-checkbox-radius: var(--gog-radius);
|
|
461
|
+
--gog-checkbox-border-width: var(--gog-control-border-width);
|
|
462
|
+
--gog-checkbox-border-style: var(--gog-control-border-style);
|
|
463
|
+
--gog-checkbox-border-color: var(--gog-accent-dim);
|
|
464
|
+
--gog-checkbox-bg: var(--gog-surface-color);
|
|
465
|
+
--gog-checkbox-checked-bg: var(--gog-accent-color);
|
|
466
|
+
--gog-checkbox-checked-border: var(--gog-accent-color);
|
|
467
|
+
--gog-checkbox-icon-color: var(--gog-accent-text-color, var(--gog-primary-color));
|
|
468
|
+
--gog-checkbox-label-color: var(--gog-muted-text-color);
|
|
469
|
+
--gog-checkbox-label-line-height: 1.3;
|
|
470
|
+
--gog-checkbox-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
|
|
471
|
+
--gog-checkbox-focus-ring-width: var(--gog-focus-ring-width);
|
|
472
|
+
--gog-checkbox-focus-ring-offset: var(--gog-focus-ring-offset);
|
|
473
|
+
--gog-checkbox-disabled-opacity: var(--gog-disabled-opacity);
|
|
474
|
+
--gog-checkbox-transition-duration: var(--gog-duration-base);
|
|
475
|
+
--gog-checkbox-dash-width-ratio: 0.45;
|
|
476
|
+
--gog-checkbox-dash-height: 2px;
|
|
477
|
+
--gog-checkbox-dash-radius: 999px;
|
|
478
|
+
|
|
479
|
+
/* ── Chip ──────────────────────────────────────────────────────────────────
|
|
480
|
+
`--gog-chip-*` size tokens below are the per-size scale; the unsuffixed
|
|
481
|
+
`--gog-chip-font-size`/`-padding-*`/`-gap`/`-avatar-size`/`-icon-size`/
|
|
482
|
+
`-remove-size` are left undeclared as the per-instance escape hatch. */
|
|
483
|
+
--gog-chip-font-family: inherit;
|
|
484
|
+
--gog-chip-bg: color-mix(in srgb, var(--gog-surface-color) 88%, var(--gog-hover-color));
|
|
485
|
+
--gog-chip-hover-bg: color-mix(in srgb, var(--gog-hover-color) 45%, var(--gog-surface-color));
|
|
486
|
+
--gog-chip-border: var(--gog-border-color);
|
|
487
|
+
--gog-chip-border-width: 1px;
|
|
488
|
+
--gog-chip-border-style: solid;
|
|
489
|
+
--gog-chip-color: var(--gog-text-color);
|
|
490
|
+
--gog-chip-font-weight: 500;
|
|
491
|
+
--gog-chip-line-height: 1.2;
|
|
492
|
+
--gog-chip-radius: max(var(--gog-radius), 2px);
|
|
493
|
+
--gog-chip-pill-radius: 9999px;
|
|
494
|
+
--gog-chip-remove-color: var(--gog-muted-text-color);
|
|
495
|
+
--gog-chip-remove-hover-color: var(--gog-text-color);
|
|
496
|
+
--gog-chip-remove-scale: 1.1;
|
|
497
|
+
--gog-chip-avatar-inset-ratio: 0.9;
|
|
498
|
+
--gog-chip-remove-inset-ratio: 0.85;
|
|
499
|
+
--gog-chip-disabled-opacity: 0.55;
|
|
500
|
+
--gog-chip-focus-ring-width: 2px;
|
|
501
|
+
--gog-chip-focus-ring-offset: var(--gog-focus-ring-offset);
|
|
502
|
+
|
|
503
|
+
--gog-chip-xsm-font-size: 0.6875rem;
|
|
504
|
+
--gog-chip-xsm-padding-block: 0.225rem;
|
|
505
|
+
--gog-chip-xsm-padding-inline: 0.375rem;
|
|
506
|
+
--gog-chip-xsm-gap: 0.275rem;
|
|
507
|
+
--gog-chip-xsm-avatar-size: 0.875rem;
|
|
508
|
+
--gog-chip-xsm-icon-size: 0.6875rem;
|
|
509
|
+
--gog-chip-xsm-remove-size: 0.75rem;
|
|
510
|
+
|
|
511
|
+
--gog-chip-sm-font-size: 0.75rem;
|
|
512
|
+
--gog-chip-sm-padding-block: 0.3rem;
|
|
513
|
+
--gog-chip-sm-padding-inline: 0.5rem;
|
|
514
|
+
--gog-chip-sm-gap: 0.375rem;
|
|
515
|
+
--gog-chip-sm-avatar-size: 1rem;
|
|
516
|
+
--gog-chip-sm-icon-size: 0.75rem;
|
|
517
|
+
--gog-chip-sm-remove-size: 0.875rem;
|
|
518
|
+
|
|
519
|
+
--gog-chip-md-font-size: 0.875rem;
|
|
520
|
+
--gog-chip-md-padding-block: 0.45rem;
|
|
521
|
+
--gog-chip-md-padding-inline: 0.75rem;
|
|
522
|
+
--gog-chip-md-gap: 0.5rem;
|
|
523
|
+
--gog-chip-md-avatar-size: 1.25rem;
|
|
524
|
+
--gog-chip-md-icon-size: 0.875rem;
|
|
525
|
+
--gog-chip-md-remove-size: 1rem;
|
|
526
|
+
|
|
527
|
+
--gog-chip-lg-font-size: 1rem;
|
|
528
|
+
--gog-chip-lg-padding-block: 0.6rem;
|
|
529
|
+
--gog-chip-lg-padding-inline: 0.875rem;
|
|
530
|
+
--gog-chip-lg-gap: 0.625rem;
|
|
531
|
+
--gog-chip-lg-avatar-size: 1.5rem;
|
|
532
|
+
--gog-chip-lg-icon-size: 1rem;
|
|
533
|
+
--gog-chip-lg-remove-size: 1.125rem;
|
|
534
|
+
|
|
535
|
+
--gog-chip-slg-font-size: 1.125rem;
|
|
536
|
+
--gog-chip-slg-padding-block: 0.75rem;
|
|
537
|
+
--gog-chip-slg-padding-inline: 1rem;
|
|
538
|
+
--gog-chip-slg-gap: 0.75rem;
|
|
539
|
+
--gog-chip-slg-avatar-size: 1.75rem;
|
|
540
|
+
--gog-chip-slg-icon-size: 1.125rem;
|
|
541
|
+
--gog-chip-slg-remove-size: 1.25rem;
|
|
542
|
+
|
|
543
|
+
/* ── Dialog ────────────────────────────────────────────────────────────────── */
|
|
544
|
+
--gog-dialog-font-family: var(--gog-font-heading);
|
|
545
|
+
/* Deliberately a flat value rather than a palette derivation: the scrim has to read
|
|
546
|
+
the same over any page content. Restate it per theme if a lighter wash suits. */
|
|
547
|
+
--gog-dialog-backdrop-bg: rgba(10, 8, 3, 0.72);
|
|
548
|
+
--gog-dialog-backdrop-blur: 2px;
|
|
549
|
+
--gog-dialog-backdrop-padding: var(--gog-space-lg);
|
|
550
|
+
--gog-dialog-backdrop-fade-duration: var(--gog-duration-base);
|
|
551
|
+
--gog-dialog-enter-duration: var(--gog-duration-slow);
|
|
552
|
+
--gog-dialog-enter-distance: -12px;
|
|
553
|
+
--gog-dialog-bg: var(--gog-surface-color);
|
|
554
|
+
--gog-dialog-color: var(--gog-text-color);
|
|
555
|
+
--gog-dialog-border: var(--gog-border-color);
|
|
556
|
+
--gog-dialog-border-width: var(--gog-panel-border-width);
|
|
557
|
+
--gog-dialog-border-style: var(--gog-panel-border-style);
|
|
558
|
+
--gog-dialog-radius: var(--gog-radius);
|
|
559
|
+
--gog-dialog-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
|
|
560
|
+
--gog-dialog-min-width: 320px;
|
|
561
|
+
--gog-dialog-max-height: 90vh;
|
|
562
|
+
--gog-dialog-header-padding: 16px 20px 14px;
|
|
563
|
+
--gog-dialog-header-gap: 12px;
|
|
564
|
+
--gog-dialog-header-border-color: var(--gog-border-color);
|
|
565
|
+
--gog-dialog-body-padding: 20px;
|
|
566
|
+
--gog-dialog-body-max-height: calc(var(--gog-dialog-max-height) - 60px);
|
|
567
|
+
--gog-dialog-close-size: 2rem;
|
|
568
|
+
--gog-dialog-close-font-size: 0.875rem;
|
|
569
|
+
--gog-dialog-close-color: var(--gog-muted-text-color);
|
|
570
|
+
--gog-dialog-close-hover-color: var(--gog-text-color);
|
|
571
|
+
--gog-dialog-close-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
|
|
572
|
+
--gog-dialog-close-hover-border: var(--gog-border-color);
|
|
573
|
+
--gog-dialog-close-focus-ring: var(--gog-accent-color);
|
|
574
|
+
--gog-dialog-close-focus-ring-width: var(--gog-focus-ring-width);
|
|
575
|
+
--gog-dialog-close-focus-ring-offset: var(--gog-focus-ring-offset);
|
|
576
|
+
|
|
577
|
+
/* Confirmation dialog */
|
|
578
|
+
--gog-confirm-gap: 12px;
|
|
579
|
+
--gog-confirm-min-width: 320px;
|
|
580
|
+
--gog-confirm-max-width: 440px;
|
|
581
|
+
--gog-confirm-color: var(--gog-text-color);
|
|
582
|
+
--gog-confirm-description-color: var(--gog-muted-text-color);
|
|
583
|
+
--gog-confirm-actions-gap: var(--gog-space-sm);
|
|
584
|
+
--gog-confirm-actions-offset: var(--gog-space-sm);
|
|
585
|
+
|
|
586
|
+
/* ── Icon ──────────────────────────────────────────────────────────────────── */
|
|
587
|
+
--gog-icon-fallback-size: 1em;
|
|
588
|
+
|
|
589
|
+
/* ── Input field ───────────────────────────────────────────────────────────── */
|
|
590
|
+
--gog-input-font-family: var(--gog-font-body);
|
|
591
|
+
--gog-input-label-font-family: var(--gog-font-heading);
|
|
592
|
+
--gog-input-gap: 4px;
|
|
593
|
+
--gog-input-label-color: var(--gog-accent-color);
|
|
594
|
+
--gog-input-label-font-size: var(--gog-text-sm);
|
|
595
|
+
--gog-input-label-letter-spacing: 1px;
|
|
596
|
+
--gog-input-label-text-transform: uppercase;
|
|
597
|
+
--gog-input-field-bg: var(--gog-surface-color);
|
|
598
|
+
--gog-input-field-border: var(--gog-accent-dim);
|
|
599
|
+
--gog-input-field-border-width: var(--gog-control-border-width);
|
|
600
|
+
--gog-input-field-border-style: var(--gog-control-border-style);
|
|
601
|
+
--gog-input-radius: var(--gog-radius);
|
|
602
|
+
--gog-input-field-color: var(--gog-text-color);
|
|
603
|
+
--gog-input-placeholder-color: var(--gog-muted-text-color);
|
|
604
|
+
--gog-input-focus-border: var(--gog-accent-color);
|
|
605
|
+
--gog-input-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
|
|
606
|
+
--gog-input-focus-glow: 0 0 8px var(--gog-input-focus-ring);
|
|
607
|
+
--gog-input-focus-ring-width: var(--gog-focus-ring-width);
|
|
608
|
+
--gog-input-focus-ring-offset: var(--gog-focus-ring-offset);
|
|
609
|
+
--gog-input-error-color: var(--gog-danger-color);
|
|
610
|
+
--gog-input-error-font-size: var(--gog-text-xs);
|
|
611
|
+
--gog-input-error-offset: 2px;
|
|
612
|
+
--gog-input-icon-color: var(--gog-muted-text-color);
|
|
613
|
+
--gog-input-icon-hover-color: var(--gog-accent-color);
|
|
614
|
+
--gog-input-icon-action-radius: 4px;
|
|
615
|
+
--gog-input-icon-focus-ring-width: 2px;
|
|
616
|
+
--gog-input-disabled-opacity: var(--gog-disabled-opacity);
|
|
617
|
+
--gog-input-transition-duration: var(--gog-duration-base);
|
|
618
|
+
|
|
619
|
+
/* ── Multiselect ───────────────────────────────────────────────────────────── */
|
|
620
|
+
--gog-ms-font-family: var(--gog-font-body);
|
|
621
|
+
--gog-ms-label-font-family: var(--gog-font-heading);
|
|
622
|
+
--gog-ms-gap: 4px;
|
|
623
|
+
--gog-ms-option-gap: 4px;
|
|
624
|
+
--gog-ms-options-padding: 4px;
|
|
625
|
+
--gog-ms-label-color: var(--gog-accent-color);
|
|
626
|
+
--gog-ms-label-font-size: var(--gog-text-sm);
|
|
627
|
+
--gog-ms-label-letter-spacing: 1px;
|
|
628
|
+
--gog-ms-label-text-transform: uppercase;
|
|
629
|
+
--gog-ms-field-bg: var(--gog-surface-color);
|
|
630
|
+
--gog-ms-field-border: var(--gog-accent-dim);
|
|
631
|
+
--gog-ms-field-border-width: var(--gog-control-border-width);
|
|
632
|
+
--gog-ms-field-border-style: var(--gog-control-border-style);
|
|
633
|
+
--gog-ms-radius: var(--gog-radius);
|
|
634
|
+
--gog-ms-field-color: var(--gog-text-color);
|
|
635
|
+
--gog-ms-value-color: var(--gog-text-color);
|
|
636
|
+
--gog-ms-placeholder-color: var(--gog-muted-text-color);
|
|
637
|
+
--gog-ms-focus-border: var(--gog-accent-color);
|
|
638
|
+
--gog-ms-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
|
|
639
|
+
--gog-ms-focus-glow: 0 0 8px var(--gog-ms-focus-ring);
|
|
640
|
+
--gog-ms-focus-ring-width: var(--gog-focus-ring-width);
|
|
641
|
+
--gog-ms-focus-ring-offset: var(--gog-focus-ring-offset);
|
|
642
|
+
--gog-ms-error-color: var(--gog-danger-color);
|
|
643
|
+
--gog-ms-error-font-size: var(--gog-text-xs);
|
|
644
|
+
--gog-ms-error-offset: 2px;
|
|
645
|
+
--gog-ms-border-color: var(--gog-accent-color);
|
|
646
|
+
--gog-ms-panel-bg: var(--gog-surface-color);
|
|
647
|
+
--gog-ms-panel-border: var(--gog-accent-color);
|
|
648
|
+
--gog-ms-panel-shadow: var(--gog-panel-shadow);
|
|
649
|
+
--gog-ms-panel-max-height: 260px;
|
|
650
|
+
--gog-ms-panel-offset: 2px;
|
|
651
|
+
--gog-ms-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
|
|
652
|
+
--gog-ms-option-color: var(--gog-text-color);
|
|
653
|
+
--gog-ms-option-gap-inline: 10px;
|
|
654
|
+
/* Estimated row height fed into the panel's up/down placement math; not itself a real
|
|
655
|
+
layout property, so it has no effect unless the JS reads it. */
|
|
656
|
+
--gog-ms-option-height: 40px;
|
|
657
|
+
--gog-ms-option-radius: calc(var(--gog-radius) - 2px);
|
|
658
|
+
--gog-ms-option-disabled-opacity: 0.5;
|
|
659
|
+
--gog-ms-option-transition-duration: var(--gog-duration-fast);
|
|
660
|
+
--gog-ms-checkbox-border: var(--gog-accent-dim);
|
|
661
|
+
--gog-ms-checkbox-bg: var(--gog-background-color);
|
|
662
|
+
--gog-ms-checkbox-checked-bg: var(--gog-accent-color);
|
|
663
|
+
--gog-ms-checkbox-checked-color: var(--gog-primary-color);
|
|
664
|
+
--gog-ms-controls-gap: 4px;
|
|
665
|
+
--gog-ms-controls-padding: 6px 10px;
|
|
666
|
+
--gog-ms-actions-gap: 6px;
|
|
667
|
+
--gog-ms-clear-radius: 2px;
|
|
668
|
+
--gog-ms-disabled-opacity: var(--gog-disabled-opacity);
|
|
669
|
+
--gog-ms-transition-duration: var(--gog-duration-base);
|
|
670
|
+
--gog-ms-arrow-transition-duration: var(--gog-duration-slow);
|
|
671
|
+
/* Icon geometry, expressed as a ratio of the control's font size. */
|
|
672
|
+
--gog-ms-clear-icon-ratio: 0.7;
|
|
673
|
+
--gog-ms-arrow-icon-ratio: 0.875;
|
|
674
|
+
--gog-ms-mark-size-ratio: 1.2375;
|
|
675
|
+
--gog-ms-mark-icon-ratio: 1.125;
|
|
676
|
+
|
|
677
|
+
/* ── Paginator ─────────────────────────────────────────────────────────────── */
|
|
678
|
+
--gog-paginator-gap: 4px;
|
|
679
|
+
--gog-paginator-ellipsis-color: var(--gog-muted-text-color);
|
|
680
|
+
--gog-paginator-ellipsis-font-size: var(--gog-text-sm);
|
|
681
|
+
--gog-paginator-ellipsis-font-family: var(--gog-font-body);
|
|
682
|
+
--gog-paginator-ellipsis-min-width: 32px;
|
|
683
|
+
|
|
684
|
+
/* ── Scroll ────────────────────────────────────────────────────────────────── */
|
|
685
|
+
--gog-scroll-track-bg: transparent;
|
|
686
|
+
--gog-scroll-track-radius: var(--gog-radius);
|
|
687
|
+
--gog-scroll-thumb-bg: var(--gog-accent-dim);
|
|
688
|
+
--gog-scroll-thumb-hover-bg: var(--gog-accent-color);
|
|
689
|
+
--gog-scroll-thumb-active-bg: var(--gog-accent-bright);
|
|
690
|
+
--gog-scroll-thumb-radius: var(--gog-radius);
|
|
691
|
+
--gog-scroll-thumb-inset: 2px;
|
|
692
|
+
--gog-scroll-corner-bg: transparent;
|
|
693
|
+
--gog-scroll-fade-duration: var(--gog-duration-base);
|
|
694
|
+
--gog-scroll-focus-ring: var(--gog-accent-color);
|
|
695
|
+
--gog-scroll-focus-ring-width: var(--gog-focus-ring-width);
|
|
696
|
+
/* Per-size pair for the two-tier `--gog-scroll-track-width`/`-thumb-min-size` chains
|
|
697
|
+
that scroll.component.scss's `.gog-scroll--thin` modifier switches between. `normal`
|
|
698
|
+
is the unmarked default, mirroring --gog-table-lg-*. */
|
|
699
|
+
--gog-scroll-normal-track-width: 10px;
|
|
700
|
+
--gog-scroll-thin-track-width: 6px;
|
|
701
|
+
--gog-scroll-normal-thumb-min-size: 32px;
|
|
702
|
+
--gog-scroll-thin-thumb-min-size: 24px;
|
|
703
|
+
|
|
704
|
+
/* ── Select ────────────────────────────────────────────────────────────────── */
|
|
705
|
+
--gog-select-font-family: var(--gog-font-body);
|
|
706
|
+
--gog-select-label-font-family: var(--gog-font-heading);
|
|
707
|
+
--gog-select-gap: 4px;
|
|
708
|
+
--gog-select-label-color: var(--gog-accent-color);
|
|
709
|
+
--gog-select-label-font-size: var(--gog-text-sm);
|
|
710
|
+
--gog-select-label-letter-spacing: 1px;
|
|
711
|
+
--gog-select-label-text-transform: uppercase;
|
|
712
|
+
--gog-select-field-bg: var(--gog-surface-color);
|
|
713
|
+
--gog-select-field-border: var(--gog-accent-dim);
|
|
714
|
+
--gog-select-field-border-width: var(--gog-control-border-width);
|
|
715
|
+
--gog-select-field-border-style: var(--gog-control-border-style);
|
|
716
|
+
--gog-select-radius: var(--gog-radius);
|
|
717
|
+
--gog-select-field-color: var(--gog-text-color);
|
|
718
|
+
--gog-select-placeholder-color: var(--gog-muted-text-color);
|
|
719
|
+
--gog-select-focus-border: var(--gog-accent-color);
|
|
720
|
+
--gog-select-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
|
|
721
|
+
--gog-select-focus-glow: 0 0 8px var(--gog-select-focus-ring);
|
|
722
|
+
--gog-select-focus-ring-width: var(--gog-focus-ring-width);
|
|
723
|
+
--gog-select-focus-ring-offset: var(--gog-focus-ring-offset);
|
|
724
|
+
--gog-select-error-color: var(--gog-danger-color);
|
|
725
|
+
--gog-select-error-font-size: var(--gog-text-xs);
|
|
726
|
+
--gog-select-chevron-color: var(--gog-accent-color);
|
|
727
|
+
--gog-select-chevron-inset: 40px;
|
|
728
|
+
--gog-select-control-gap: 12px;
|
|
729
|
+
--gog-select-panel-bg: var(--gog-surface-color);
|
|
730
|
+
--gog-select-panel-shadow: var(--gog-panel-shadow);
|
|
731
|
+
--gog-select-panel-max-height: 260px;
|
|
732
|
+
--gog-select-panel-offset: 2px;
|
|
733
|
+
--gog-select-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
|
|
734
|
+
--gog-select-option-selected-color: var(--gog-accent-color);
|
|
735
|
+
--gog-select-option-color: var(--gog-text-color);
|
|
736
|
+
--gog-select-option-gap: 10px;
|
|
737
|
+
/* Estimated row height fed into the panel's up/down placement math; not itself a real
|
|
738
|
+
layout property, so it has no effect unless the JS reads it. */
|
|
739
|
+
--gog-select-option-height: 40px;
|
|
740
|
+
--gog-select-option-disabled-opacity: 0.5;
|
|
741
|
+
--gog-select-option-transition-duration: var(--gog-duration-fast);
|
|
742
|
+
/* Icon geometry, expressed as a ratio of the control's font size. */
|
|
743
|
+
--gog-select-chevron-icon-ratio: 0.875;
|
|
744
|
+
--gog-select-mark-size-ratio: 1.125;
|
|
745
|
+
--gog-select-mark-icon-ratio: 0.875;
|
|
746
|
+
--gog-select-disabled-opacity: var(--gog-disabled-opacity);
|
|
747
|
+
--gog-select-transition-duration: var(--gog-duration-base);
|
|
748
|
+
|
|
749
|
+
/* ── Skeleton ─────────────────────────────────────────────────────────────── */
|
|
750
|
+
--gog-skeleton-base: color-mix(in srgb, var(--gog-border-color) 40%, var(--gog-surface-color));
|
|
751
|
+
--gog-skeleton-shine: color-mix(in srgb, var(--gog-skeleton-base), white 35%);
|
|
752
|
+
--gog-skeleton-radius: var(--gog-radius);
|
|
753
|
+
--gog-skeleton-square-radius: 0px;
|
|
754
|
+
--gog-skeleton-line-radius: calc(var(--gog-skeleton-radius) / 2);
|
|
755
|
+
--gog-skeleton-line-gap: var(--gog-space-sm);
|
|
756
|
+
--gog-skeleton-short-line-width: 60%;
|
|
757
|
+
--gog-skeleton-pulse-duration: 1.6s;
|
|
758
|
+
--gog-skeleton-pulse-min-opacity: 0.5;
|
|
759
|
+
--gog-skeleton-wave-duration: 1.6s;
|
|
760
|
+
--gog-skeleton-line-height-xsm: 8px;
|
|
761
|
+
--gog-skeleton-line-height-sm: 10px;
|
|
762
|
+
--gog-skeleton-line-height-md: 14px;
|
|
763
|
+
--gog-skeleton-line-height-lg: 18px;
|
|
764
|
+
--gog-skeleton-line-height-slg: 24px;
|
|
765
|
+
--gog-skeleton-circle-size-xsm: 24px;
|
|
766
|
+
--gog-skeleton-circle-size-sm: 32px;
|
|
767
|
+
--gog-skeleton-circle-size-md: 48px;
|
|
768
|
+
--gog-skeleton-circle-size-lg: 64px;
|
|
769
|
+
--gog-skeleton-circle-size-slg: 96px;
|
|
770
|
+
--gog-skeleton-rect-height-xsm: 40px;
|
|
771
|
+
--gog-skeleton-rect-height-sm: 64px;
|
|
772
|
+
--gog-skeleton-rect-height-md: 120px;
|
|
773
|
+
--gog-skeleton-rect-height-lg: 200px;
|
|
774
|
+
--gog-skeleton-rect-height-slg: 320px;
|
|
775
|
+
|
|
776
|
+
/* ── Slider ───────────────────────────────────────────────────────────────── */
|
|
777
|
+
--gog-slider-auto-width: 240px;
|
|
778
|
+
--gog-slider-label-font-family: var(--gog-font-heading);
|
|
779
|
+
--gog-slider-value-font-family: var(--gog-font-mono);
|
|
780
|
+
--gog-slider-error-font-family: var(--gog-font-body);
|
|
781
|
+
--gog-slider-gap: 6px;
|
|
782
|
+
--gog-slider-label-color: var(--gog-accent-color);
|
|
783
|
+
--gog-slider-label-font-size: var(--gog-text-sm);
|
|
784
|
+
--gog-slider-label-letter-spacing: 1px;
|
|
785
|
+
--gog-slider-label-text-transform: uppercase;
|
|
786
|
+
--gog-slider-value-color: var(--gog-accent-color);
|
|
787
|
+
--gog-slider-value-font-size: var(--gog-text-sm);
|
|
788
|
+
--gog-slider-value-min-width: 40px;
|
|
789
|
+
--gog-slider-track-height: 4px;
|
|
790
|
+
--gog-slider-track-area-height: 20px;
|
|
791
|
+
--gog-slider-track-radius: 0px;
|
|
792
|
+
--gog-slider-track-bg: var(--gog-accent-dim);
|
|
793
|
+
--gog-slider-fill-bg: var(--gog-accent-color);
|
|
794
|
+
--gog-slider-thumb-size: 16px;
|
|
795
|
+
--gog-slider-thumb-bg: var(--gog-accent-color);
|
|
796
|
+
--gog-slider-thumb-border: var(--gog-background-color);
|
|
797
|
+
--gog-slider-thumb-border-width: 2px;
|
|
798
|
+
--gog-slider-thumb-radius: 50%;
|
|
799
|
+
--gog-slider-thumb-shadow: color-mix(in srgb, var(--gog-accent-bright) 40%, transparent);
|
|
800
|
+
--gog-slider-thumb-glow-size: 6px;
|
|
801
|
+
--gog-slider-focus-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
|
|
802
|
+
--gog-slider-focus-ring-width: var(--gog-focus-ring-width);
|
|
803
|
+
--gog-slider-range-color: var(--gog-muted-text-color);
|
|
804
|
+
--gog-slider-range-font-size: var(--gog-text-xs);
|
|
805
|
+
--gog-slider-error-color: var(--gog-danger-color);
|
|
806
|
+
--gog-slider-error-font-size: var(--gog-text-xs);
|
|
807
|
+
--gog-slider-disabled-opacity: var(--gog-disabled-opacity);
|
|
808
|
+
|
|
809
|
+
/* ── Spinner ──────────────────────────────────────────────────────────────── */
|
|
810
|
+
--gog-spinner-rune-font-family: var(--gog-font-heading);
|
|
811
|
+
--gog-spinner-track-color: var(--gog-accent-dim);
|
|
812
|
+
--gog-spinner-arc-outer-color: var(--gog-accent-color);
|
|
813
|
+
--gog-spinner-arc-inner-color: var(--gog-accent-bright);
|
|
814
|
+
--gog-spinner-diamond-color: var(--gog-accent-bright);
|
|
815
|
+
--gog-spinner-rune-color: var(--gog-accent-bright);
|
|
816
|
+
--gog-spinner-glow-color: var(--gog-accent-color);
|
|
817
|
+
--gog-spinner-track-opacity: 0.35;
|
|
818
|
+
--gog-spinner-arc-inner-opacity: 0.75;
|
|
819
|
+
--gog-spinner-diamond-opacity: 0.85;
|
|
820
|
+
--gog-spinner-arc-outer-pulse-opacity: 0.8;
|
|
821
|
+
--gog-spinner-arc-inner-pulse-opacity: 0.45;
|
|
822
|
+
--gog-spinner-rune-pulse-opacity: 0.4;
|
|
823
|
+
--gog-spinner-arc-outer-dash: 100 63;
|
|
824
|
+
--gog-spinner-arc-inner-dash: 35 78;
|
|
825
|
+
--gog-spinner-arc-inner-stroke-compact: 1;
|
|
826
|
+
--gog-spinner-spin-duration: 1.4s;
|
|
827
|
+
--gog-spinner-spin-slow-duration: 2s;
|
|
828
|
+
--gog-spinner-ticks-duration: 6s;
|
|
829
|
+
--gog-spinner-pulse-duration: 2.8s;
|
|
830
|
+
--gog-spinner-ring-duration: 1s;
|
|
831
|
+
--gog-spinner-ring-padding: 16%;
|
|
832
|
+
--gog-spinner-arc-outer-glow: 5px;
|
|
833
|
+
--gog-spinner-arc-inner-glow: 4px;
|
|
834
|
+
--gog-spinner-diamond-glow: 3px;
|
|
835
|
+
--gog-spinner-rune-glow: 6px;
|
|
836
|
+
--gog-spinner-ring-glow: 5px;
|
|
837
|
+
--gog-spinner-overlay-blur: 3px;
|
|
838
|
+
--gog-spinner-overlay-fade-duration: var(--gog-duration-slow);
|
|
839
|
+
|
|
840
|
+
/* ── Table ────────────────────────────────────────────────────────────────── */
|
|
841
|
+
--gog-table-font-family: var(--gog-font-body);
|
|
842
|
+
--gog-table-header-font-family: var(--gog-font-heading);
|
|
843
|
+
--gog-table-numeric-font-family: var(--gog-font-mono);
|
|
844
|
+
--gog-table-gap: 12px;
|
|
845
|
+
--gog-table-border-color: var(--gog-accent-dim);
|
|
846
|
+
--gog-table-border-width: 2px;
|
|
847
|
+
--gog-table-border-style: solid;
|
|
848
|
+
--gog-table-row-border-width: 1px;
|
|
849
|
+
--gog-table-surface: var(--gog-surface-color);
|
|
850
|
+
--gog-table-text-color: var(--gog-text-color);
|
|
851
|
+
--gog-table-accent-color: var(--gog-accent-color);
|
|
852
|
+
--gog-table-accent-bright: var(--gog-accent-bright);
|
|
853
|
+
--gog-table-hover-bg: var(--gog-accent-pale);
|
|
854
|
+
--gog-table-muted-color: var(--gog-muted-text-color);
|
|
855
|
+
--gog-table-focus-ring: var(--gog-accent-color);
|
|
856
|
+
--gog-table-focus-ring-width: var(--gog-focus-ring-width);
|
|
857
|
+
--gog-table-header-letter-spacing: 1px;
|
|
858
|
+
--gog-table-header-text-transform: uppercase;
|
|
859
|
+
--gog-table-num-col-width: 48px;
|
|
860
|
+
--gog-table-th-inner-gap: 6px;
|
|
861
|
+
--gog-table-sort-icon-size: 0.9em;
|
|
862
|
+
--gog-table-sort-icon-width: 1.1em;
|
|
863
|
+
--gog-table-sort-icon-opacity: 0.6;
|
|
864
|
+
--gog-table-empty-padding: 24px 14px;
|
|
865
|
+
--gog-table-empty-font-size: var(--gog-text-md);
|
|
866
|
+
--gog-table-loading-padding: 32px 14px;
|
|
867
|
+
--gog-table-loading-opacity: 0.5;
|
|
868
|
+
--gog-table-row-transition-duration: var(--gog-duration-fast);
|
|
869
|
+
--gog-table-footer-gap: var(--gog-space-sm);
|
|
870
|
+
--gog-table-footer-min-height: 32px;
|
|
871
|
+
--gog-table-total-font-size: var(--gog-text-xs);
|
|
872
|
+
--gog-table-total-letter-spacing: 0.5px;
|
|
873
|
+
--gog-table-total-text-transform: uppercase;
|
|
874
|
+
--gog-table-num-font-size: var(--gog-text-xs);
|
|
875
|
+
--gog-table-padding-h: 14px;
|
|
876
|
+
--gog-table-xsm-padding-v: 2px;
|
|
877
|
+
--gog-table-xsm-th-font-size: var(--gog-text-xs);
|
|
878
|
+
--gog-table-xsm-td-font-size: var(--gog-text-xs);
|
|
879
|
+
--gog-table-sm-padding-v: 3px;
|
|
880
|
+
--gog-table-sm-th-font-size: var(--gog-text-xs);
|
|
881
|
+
--gog-table-sm-td-font-size: var(--gog-text-xs);
|
|
882
|
+
--gog-table-md-padding-v: 6px;
|
|
883
|
+
--gog-table-md-th-font-size: var(--gog-text-xs);
|
|
884
|
+
--gog-table-md-td-font-size: var(--gog-text-sm);
|
|
885
|
+
--gog-table-lg-padding-v: 10px;
|
|
886
|
+
--gog-table-lg-th-font-size: var(--gog-text-sm);
|
|
887
|
+
--gog-table-lg-td-font-size: var(--gog-text-md);
|
|
888
|
+
--gog-table-slg-padding-v: 14px;
|
|
889
|
+
--gog-table-slg-th-font-size: var(--gog-text-md);
|
|
890
|
+
--gog-table-slg-td-font-size: var(--gog-text-lg);
|
|
891
|
+
|
|
892
|
+
/* ── Tag ──────────────────────────────────────────────────────────────────
|
|
893
|
+
Like the button, the unsuffixed `--gog-tag-bg`/`-border`/`-color`/`-font-size`
|
|
894
|
+
and friends stay undeclared so variant and size classes can fall through them. */
|
|
895
|
+
--gog-tag-font-family: inherit;
|
|
896
|
+
--gog-tag-default-color: var(--gog-info-color, var(--gog-muted-text-color));
|
|
897
|
+
--gog-tag-success-color: var(--gog-success-color);
|
|
898
|
+
--gog-tag-danger-color: var(--gog-danger-color);
|
|
899
|
+
--gog-tag-warning-color: var(--gog-warning-color);
|
|
900
|
+
--gog-tag-info-color: var(--gog-info-color);
|
|
901
|
+
--gog-tag-bg-mix: 10%;
|
|
902
|
+
--gog-tag-color-mix: 82%;
|
|
903
|
+
--gog-tag-bg-base: var(--gog-surface-color);
|
|
904
|
+
--gog-tag-color-base: black;
|
|
905
|
+
--gog-tag-border-width: 1px;
|
|
906
|
+
--gog-tag-border-style: solid;
|
|
907
|
+
--gog-tag-inner-border-width: 1px;
|
|
908
|
+
--gog-tag-font-weight: 600;
|
|
909
|
+
--gog-tag-line-height: 1;
|
|
910
|
+
--gog-tag-radius: max(var(--gog-radius), 2px);
|
|
911
|
+
--gog-tag-pill-radius: 9999px;
|
|
912
|
+
|
|
913
|
+
--gog-tag-xsm-font-size: 0.6875rem;
|
|
914
|
+
--gog-tag-xsm-padding-block: 0.1875rem;
|
|
915
|
+
--gog-tag-xsm-padding-inline: 0.375rem;
|
|
916
|
+
--gog-tag-xsm-gap: 0.1875rem;
|
|
917
|
+
--gog-tag-xsm-icon-size: 0.6875rem;
|
|
918
|
+
|
|
919
|
+
--gog-tag-sm-font-size: 0.75rem;
|
|
920
|
+
--gog-tag-sm-padding-block: 0.25rem;
|
|
921
|
+
--gog-tag-sm-padding-inline: 0.5rem;
|
|
922
|
+
--gog-tag-sm-gap: 0.25rem;
|
|
923
|
+
--gog-tag-sm-icon-size: 0.75rem;
|
|
924
|
+
|
|
925
|
+
--gog-tag-md-font-size: 0.875rem;
|
|
926
|
+
--gog-tag-md-padding-block: 0.375rem;
|
|
927
|
+
--gog-tag-md-padding-inline: 0.75rem;
|
|
928
|
+
--gog-tag-md-gap: 0.375rem;
|
|
929
|
+
--gog-tag-md-icon-size: 0.875rem;
|
|
930
|
+
|
|
931
|
+
--gog-tag-lg-font-size: 1rem;
|
|
932
|
+
--gog-tag-lg-padding-block: 0.5rem;
|
|
933
|
+
--gog-tag-lg-padding-inline: 0.875rem;
|
|
934
|
+
--gog-tag-lg-gap: 0.5rem;
|
|
935
|
+
--gog-tag-lg-icon-size: 1rem;
|
|
936
|
+
|
|
937
|
+
--gog-tag-slg-font-size: 1.125rem;
|
|
938
|
+
--gog-tag-slg-padding-block: 0.625rem;
|
|
939
|
+
--gog-tag-slg-padding-inline: 1rem;
|
|
940
|
+
--gog-tag-slg-gap: 0.625rem;
|
|
941
|
+
--gog-tag-slg-icon-size: 1.125rem;
|
|
942
|
+
|
|
943
|
+
/* ── Toast ────────────────────────────────────────────────────────────────── */
|
|
944
|
+
--gog-toast-font-family: var(--gog-font-body);
|
|
945
|
+
--gog-toast-bg: var(--gog-surface-color);
|
|
946
|
+
--gog-toast-color: var(--gog-text-color);
|
|
947
|
+
--gog-toast-border: var(--gog-accent-color);
|
|
948
|
+
--gog-toast-icon-color: var(--gog-accent-color);
|
|
949
|
+
--gog-toast-success-color: var(--gog-success-color);
|
|
950
|
+
--gog-toast-error-color: var(--gog-danger-color);
|
|
951
|
+
--gog-toast-warning-color: var(--gog-accent-bright);
|
|
952
|
+
--gog-toast-info-color: var(--gog-accent-color);
|
|
953
|
+
--gog-toast-accent-width: 4px;
|
|
954
|
+
--gog-toast-padding: 12px 14px;
|
|
955
|
+
--gog-toast-radius: 0px;
|
|
956
|
+
--gog-toast-content-gap: 10px;
|
|
957
|
+
--gog-toast-main-gap: var(--gog-space-sm);
|
|
958
|
+
--gog-toast-actions-gap: 6px;
|
|
959
|
+
--gog-toast-message-font-size: var(--gog-text-sm);
|
|
960
|
+
--gog-toast-message-line-height: 1.5;
|
|
961
|
+
--gog-toast-icon-size: 1rem;
|
|
962
|
+
--gog-toast-icon-line-height: 1.4;
|
|
963
|
+
--gog-toast-action-padding: 0.25rem 0.5rem;
|
|
964
|
+
--gog-toast-action-font-size: 0.75rem;
|
|
965
|
+
--gog-toast-close-padding: 0.125rem 0.25rem;
|
|
966
|
+
--gog-toast-close-font-size: 0.75rem;
|
|
967
|
+
--gog-toast-progress-height: 3px;
|
|
968
|
+
--gog-toast-progress-opacity: 30%;
|
|
969
|
+
--gog-toast-transition-duration: 0.25s;
|
|
970
|
+
--gog-toast-base-z: 100;
|
|
971
|
+
/* Card-stack geometry */
|
|
972
|
+
--gog-toast-stack-peek: 14px;
|
|
973
|
+
--gog-toast-stack-scale-step: 0.06;
|
|
974
|
+
--gog-toast-stack-expanded-gap: 84px;
|
|
975
|
+
--gog-toast-stack-min-opacity: 0.4;
|
|
976
|
+
--gog-toast-stack-opacity-step: 0.18;
|
|
977
|
+
--gog-toast-stack-max-depth: 6;
|
|
978
|
+
}
|