@guildofgleks/ui 21.2.4 → 21.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +320 -204
  2. package/fesm2022/guildofgleks-ui.mjs +6829 -1676
  3. package/fesm2022/guildofgleks-ui.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/src/styles/presets/one-dark.css +48 -0
  6. package/src/styles/presets/one-light.css +47 -0
  7. package/src/styles/presets/slate.css +55 -0
  8. package/src/styles/theme.css +1643 -978
  9. package/src/styles/utilities.css +170 -69
  10. package/types/guildofgleks-ui.d.ts +2287 -324
package/src/styles/theme.css CHANGED
@@ -1,978 +1,1643 @@
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
- }
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
+ /* ── Float label geometry (input / textarea / select / multiselect) ─────────
147
+ One scale for every field that can float its label. Each control reads these
148
+ through its own `--gog-<block>-float-label-*` token in the derived layer below,
149
+ so setting a value here retunes all of them at once while a single control can
150
+ still be tuned on its own. `reserve` is the headroom added inside the field for
151
+ the 'in'/'on' variants; `in-top` is where the label lands once floated for 'in';
152
+ `over-gap`/`over-reserve` are the gap above the border and the space permanently
153
+ kept clear for the 'over' variant. */
154
+ --gog-field-float-label-reserve: 14px;
155
+ --gog-field-float-label-in-top: 6px;
156
+ --gog-field-float-label-over-gap: 8px;
157
+ --gog-field-float-label-over-reserve: 1.4em;
158
+
159
+ /* ── Icon & spinner ───────────────────────────────────────────────────────── */
160
+ --gog-icon-size: 1.2em;
161
+ --gog-icon-stroke-width: 2;
162
+ --gog-spinner-size-xsm: 12px;
163
+ --gog-spinner-size-sm: 18px;
164
+ --gog-spinner-size-md: 48px;
165
+ --gog-spinner-size-lg: 96px;
166
+ --gog-spinner-size-slg: 144px;
167
+ --gog-spinner-rune-size: 20px;
168
+
169
+ /* ── Toast stack ──────────────────────────────────────────────────────────── */
170
+ --gog-toast-min-width: 280px;
171
+ --gog-toast-max-width: 400px;
172
+ --gog-toast-gap: 10px;
173
+ --gog-toast-stack-padding: 16px;
174
+ --gog-toast-z-index: 9999;
175
+ --gog-toast-enter-distance: 110%;
176
+ --gog-toast-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
177
+
178
+ /* ── Overlay stacking ───────────────────────────────────────────────────────
179
+ Baseline for dropdown panels. gog-dialog re-declares this on its own panel so
180
+ dropdowns opened inside a dialog stack above it. */
181
+ --gog-dropdown-z: 300;
182
+ --gog-spinner-overlay-z: 8000;
183
+
184
+ /* ── Light palette (also the no-data-theme default) ───────────────────────── */
185
+ color-scheme: light;
186
+ /* Фоновые и поверхностные тона */
187
+ --gog-background-color: #f7f3eb; /* Тёплый пергаментный фон страницы */
188
+ --gog-surface-color: #ffffff; /* КИСЛО-БЕЛЫЙ ПЕРГАМЕНТ карточек (создает контраст со слоем 1!) */
189
+ --gog-hover-color: #f0e7d7; /* Состояние наведения (мягкий воск) */
190
+ --gog-border-color: #d8c7ad; /* Состаренная латунная рамка */
191
+
192
+ /* Типографика (Старинные дубовые чернила) */
193
+ --gog-text-color: #17120c; /* Глубокие чернила (высокий контраст WCAG AAA) */
194
+ --gog-accent-text-color: #ffffff;
195
+ --gog-muted-text-color: #63503c; /* Приглушенные печные чернила */
196
+
197
+ /* Бренд и акценты (Гильдейское Сусальное Золото) */
198
+ --gog-primary-color: #17120c;
199
+ --gog-accent-color: #9e6f00; /* Насыщенный благородный золотисто-бронзовый */
200
+ --gog-accent-bright: #c88e00; /* Яркий отблеск золота */
201
+ --gog-accent-dim: #735100; /* Темная бронза */
202
+ --gog-accent-pale: #f8f1df; /* Светлая подложка под золото */
203
+ --gog-secondary-color: #6b5328;
204
+
205
+ /* Гармонизированная алхимическая семантика */
206
+ --gog-success-color: #216e4e; /* Изумруд */
207
+ --gog-danger-color: #a7232b; /* Рубин */
208
+ --gog-warning-color: #c45100; /* Тёмный янтарь */
209
+ --gog-info-color: #2b5c8f; /* Лазурит */
210
+
211
+ /* Объёмная мягкая тень старой кожи */
212
+ --gog-panel-shadow: 0 4px 20px rgba(23, 18, 12, 0.08), 0 1px 3px rgba(23, 18, 12, 0.04);
213
+ --gog-spinner-overlay-bg: rgba(247, 243, 235, 0.85);
214
+ }
215
+
216
+ :root[data-theme='light'],
217
+ [data-theme='light'] {
218
+ color-scheme: light;
219
+
220
+ /* Фоновые и поверхностные тона */
221
+ --gog-background-color: #f7f3eb; /* Тёплый пергаментный фон страницы */
222
+ --gog-surface-color: #ffffff; /* КИСЛО-БЕЛЫЙ ПЕРГАМЕНТ карточек (создает контраст со слоем 1!) */
223
+ --gog-hover-color: #f0e7d7; /* Состояние наведения (мягкий воск) */
224
+ --gog-border-color: #d8c7ad; /* Состаренная латунная рамка */
225
+
226
+ /* Типографика (Старинные дубовые чернила) */
227
+ --gog-text-color: #17120c; /* Глубокие чернила (высокий контраст WCAG AAA) */
228
+ --gog-accent-text-color: #ffffff;
229
+ --gog-muted-text-color: #63503c; /* Приглушенные печные чернила */
230
+
231
+ /* Бренд и акценты (Гильдейское Сусальное Золото) */
232
+ --gog-primary-color: #17120c;
233
+ --gog-accent-color: #9e6f00; /* Насыщенный благородный золотисто-бронзовый */
234
+ --gog-accent-bright: #c88e00; /* Яркий отблеск золота */
235
+ --gog-accent-dim: #735100; /* Темная бронза */
236
+ --gog-accent-pale: #f8f1df; /* Светлая подложка под золото */
237
+ --gog-secondary-color: #6b5328;
238
+
239
+ /* Гармонизированная алхимическая семантика */
240
+ --gog-success-color: #216e4e; /* Изумруд */
241
+ --gog-danger-color: #a7232b; /* Рубин */
242
+ --gog-warning-color: #c45100; /* Тёмный янтарь */
243
+ --gog-info-color: #2b5c8f; /* Лазурит */
244
+
245
+ /* Объёмная мягкая тень старой кожи */
246
+ --gog-panel-shadow: 0 4px 20px rgba(23, 18, 12, 0.08), 0 1px 3px rgba(23, 18, 12, 0.04);
247
+ --gog-spinner-overlay-bg: rgba(247, 243, 235, 0.85);
248
+ }
249
+
250
+ :root[data-theme='dark'],
251
+ [data-theme='dark'] {
252
+ color-scheme: dark;
253
+
254
+ /* Фоновые и поверхностные тона */
255
+ --gog-background-color: #0d0b08; /* Глубокий кузнечный обсидиан */
256
+ --gog-surface-color: #16120e; /* Тёмное обожженное железо (карточки) */
257
+ --gog-hover-color: #241d17; /* Наведение на элементы */
258
+ --gog-border-color: #3d3122; /* Состаренная чеканенная бронза */
259
+
260
+ /* Типографика (Светящаяся Слоновая Кость) */
261
+ --gog-text-color: #f3ebd8; /* Мягкий светящийся пергамент */
262
+ --gog-accent-text-color: #0d0b08;
263
+ --gog-muted-text-color: #9e8d76; /* Приглушенная бронза */
264
+
265
+ /* Бренд и акценты (Светящееся Золото Алхимии) */
266
+ --gog-primary-color: #f3ebd8;
267
+ --gog-accent-color: #fbbf24; /* Плазменный янтарь */
268
+ --gog-accent-bright: #fde047; /* Яркий золотой луч */
269
+ --gog-accent-dim: #b48310; /* Приглушенное золото */
270
+ --gog-accent-pale: #2b210c; /* Тёмный золотой отсвет */
271
+ --gog-secondary-color: #d4a373;
272
+
273
+ /* Семантика */
274
+ --gog-success-color: #34d399; /* Светящийся изумруд */
275
+ --gog-danger-color: #f87171; /* Светящийся рубин */
276
+ --gog-warning-color: #fbbf24; /* Янтарь */
277
+ --gog-info-color: #38bdf8; /* Сапфир */
278
+
279
+ --gog-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--gog-border-color);
280
+ --gog-spinner-overlay-bg: rgba(13, 11, 8, 0.85);
281
+ }
282
+
283
+ /*
284
+ * ── Derived layer ───────────────────────────────────────────────────────────────
285
+ * Re-declared on every theme scope so each one re-derives from its own palette and
286
+ * metrics. Everything here reads another token; nothing here is a bare literal.
287
+ */
288
+ :root,
289
+ [data-theme] {
290
+ /* ── Derived foundation tokens ───────────────────────────────────────────────
291
+ Split out of the literal block above because they read other tokens: they have
292
+ to re-resolve inside each theme scope. */
293
+ --gog-panel-radius: calc(var(--gog-radius) + 8px);
294
+ --gog-field-xsm-font-size: var(--gog-text-xs);
295
+ --gog-field-sm-font-size: var(--gog-text-sm);
296
+ --gog-field-md-padding-y: var(--gog-control-padding-y);
297
+ --gog-field-md-padding-x: var(--gog-control-padding-x);
298
+ --gog-field-md-font-size: var(--gog-text-md);
299
+ --gog-field-md-icon-offset: var(--gog-control-icon-offset);
300
+ --gog-field-lg-font-size: var(--gog-text-lg);
301
+
302
+ /* ══════════════════════════════════════════════════════════════════════════════
303
+ COMPONENT TOKENS
304
+ Everything below is what an individual component paints with. Override a block
305
+ to restyle just that component; the values themselves all derive from the
306
+ foundation tokens above, so a palette swap carries through for free.
307
+ ══════════════════════════════════════════════════════════════════════════════ */
308
+
309
+ /* ── Accordion ─────────────────────────────────────────────────────────────── */
310
+ --gog-accordion-font-family: var(--gog-font-heading);
311
+ --gog-accordion-body-font-family: var(--gog-font-body);
312
+ --gog-accordion-border-color: var(--gog-accent-dim);
313
+ --gog-accordion-border-width: var(--gog-control-border-width);
314
+ --gog-accordion-border-style: var(--gog-control-border-style);
315
+ --gog-accordion-text-color: var(--gog-text-color);
316
+ --gog-accordion-accent-color: var(--gog-accent-color);
317
+ --gog-accordion-hover-bg: color-mix(in srgb, var(--gog-accent-dim) 10%, transparent);
318
+ --gog-accordion-hover-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
319
+ --gog-accordion-focus-ring-width: var(--gog-focus-ring-width);
320
+ --gog-accordion-body-color: var(--gog-text-color);
321
+ --gog-accordion-body-line-height: 1.6;
322
+ --gog-accordion-header-text-transform: uppercase;
323
+ --gog-accordion-header-gap: 12px;
324
+ --gog-accordion-disabled-opacity: 0.5;
325
+ --gog-accordion-transition-duration: var(--gog-duration-base);
326
+ --gog-accordion-body-transition-duration: var(--gog-duration-slow);
327
+ --gog-accordion-chevron-transition-duration: var(--gog-duration-slow);
328
+ --gog-accordion-body-lift: -2px;
329
+ /* Flat by default — corner rounding is a look, not a given; consumers who want it
330
+ opt in per-instance or theme-wide by overriding these two. */
331
+ --gog-accordion-radius: 0px;
332
+ --gog-accordion-body-radius: 0px;
333
+ --gog-accordion-header-bg: transparent;
334
+ /* A subtle black wash over whatever sits behind the accordion, so the body always
335
+ reads slightly darker than the header regardless of the surrounding surface color. */
336
+ --gog-accordion-body-bg: color-mix(in srgb, black 6%, transparent);
337
+ /* Per-size metrics. `lg` is the default size. */
338
+ --gog-accordion-xsm-padding-y: 4px;
339
+ --gog-accordion-xsm-padding-x: 8px;
340
+ --gog-accordion-xsm-font-size: var(--gog-text-xs);
341
+ --gog-accordion-xsm-letter-spacing: 0.2px;
342
+ --gog-accordion-xsm-content-gap: 2px;
343
+ --gog-accordion-xsm-body-font-size: var(--gog-text-xs);
344
+ --gog-accordion-xsm-body-line-height: 1.5;
345
+ --gog-accordion-xsm-body-padding-top: 4px;
346
+ --gog-accordion-xsm-body-padding-bottom: 6px;
347
+ --gog-accordion-xsm-chevron-size: 11px;
348
+ --gog-accordion-xsm-chevron-font-size: 10px;
349
+
350
+ --gog-accordion-sm-padding-y: 6px;
351
+ --gog-accordion-sm-padding-x: 10px;
352
+ --gog-accordion-sm-font-size: var(--gog-text-xs);
353
+ --gog-accordion-sm-letter-spacing: 0.4px;
354
+ --gog-accordion-sm-content-gap: 2px;
355
+ --gog-accordion-sm-body-font-size: var(--gog-text-xs);
356
+ --gog-accordion-sm-body-line-height: var(--gog-accordion-body-line-height);
357
+ --gog-accordion-sm-body-padding-top: 6px;
358
+ --gog-accordion-sm-body-padding-bottom: 8px;
359
+ --gog-accordion-sm-chevron-size: 13px;
360
+ --gog-accordion-sm-chevron-font-size: 12px;
361
+
362
+ --gog-accordion-md-padding-y: 10px;
363
+ --gog-accordion-md-padding-x: 14px;
364
+ --gog-accordion-md-font-size: var(--gog-text-xs);
365
+ --gog-accordion-md-letter-spacing: 0.8px;
366
+ --gog-accordion-md-content-gap: 2px;
367
+ --gog-accordion-md-body-font-size: var(--gog-text-sm);
368
+ --gog-accordion-md-body-line-height: var(--gog-accordion-body-line-height);
369
+ --gog-accordion-md-body-padding-top: 8px;
370
+ --gog-accordion-md-body-padding-bottom: 12px;
371
+ --gog-accordion-md-chevron-size: 15px;
372
+ --gog-accordion-md-chevron-font-size: 14px;
373
+
374
+ --gog-accordion-lg-padding-y: 14px;
375
+ --gog-accordion-lg-padding-x: 16px;
376
+ --gog-accordion-lg-font-size: var(--gog-text-sm);
377
+ --gog-accordion-lg-letter-spacing: 0.8px;
378
+ --gog-accordion-lg-content-gap: 4px;
379
+ --gog-accordion-lg-body-font-size: var(--gog-text-md);
380
+ --gog-accordion-lg-body-line-height: var(--gog-accordion-body-line-height);
381
+ --gog-accordion-lg-body-padding-top: 12px;
382
+ --gog-accordion-lg-body-padding-bottom: 16px;
383
+ --gog-accordion-lg-chevron-size: 18px;
384
+ --gog-accordion-lg-chevron-font-size: 16px;
385
+
386
+ --gog-accordion-slg-padding-y: 18px;
387
+ --gog-accordion-slg-padding-x: 18px;
388
+ --gog-accordion-slg-font-size: var(--gog-text-md);
389
+ --gog-accordion-slg-letter-spacing: 0.8px;
390
+ --gog-accordion-slg-content-gap: 4px;
391
+ --gog-accordion-slg-body-font-size: var(--gog-text-lg);
392
+ --gog-accordion-slg-body-line-height: var(--gog-accordion-body-line-height);
393
+ --gog-accordion-slg-body-padding-top: 16px;
394
+ --gog-accordion-slg-body-padding-bottom: 20px;
395
+ --gog-accordion-slg-chevron-size: 20px;
396
+ --gog-accordion-slg-chevron-font-size: 18px;
397
+
398
+ /* ── Collapsible ───────────────────────────────────────────────────────────
399
+ No portal, no owned markup — see utilities.css for the actual `.gog-collapsible__*`
400
+ rules (they style content this component's consumer projects, which sits outside
401
+ `gog-collapsible`'s own view and can't be reached by its scoped stylesheet). */
402
+ --gog-collapsible-transition-duration: var(--gog-duration-slow);
403
+ /* Generous fixed cap rather than a measured height: the CSS-only max-height transition
404
+ trades exact timing for arbitrary content (any number of children) without JS. Override
405
+ per-instance if a particular panel's content can exceed this. */
406
+ --gog-collapsible-max-height: 480px;
407
+ --gog-collapsible-disabled-opacity: var(--gog-disabled-opacity);
408
+
409
+ /* ── Button ────────────────────────────────────────────────────────────────
410
+ `--gog-btn-bg`, `--gog-btn-color`, `--gog-btn-border`, `--gog-btn-shadow`,
411
+ `--gog-btn-hover-bg`, `--gog-btn-hover-shadow`, `--gog-btn-padding` and
412
+ `--gog-btn-font-size` are intentionally NOT declared — they are the per-instance
413
+ escape hatch the variant/size classes fall back through. */
414
+ --gog-btn-font-family: var(--gog-font-heading);
415
+ --gog-btn-font-weight: 900;
416
+ --gog-btn-letter-spacing: 1px;
417
+ --gog-btn-text-transform: uppercase;
418
+ --gog-btn-line-height: 1;
419
+ --gog-btn-gap: var(--gog-space-sm);
420
+ --gog-btn-radius: var(--gog-radius);
421
+ --gog-btn-border-width: var(--gog-control-border-width);
422
+ --gog-btn-border-style: var(--gog-control-border-style);
423
+ --gog-btn-transition-duration: var(--gog-duration-base);
424
+ --gog-btn-focus-ring-width: var(--gog-focus-ring-width);
425
+ --gog-btn-focus-ring-offset: 3px;
426
+ --gog-btn-active-scale: 0.97;
427
+ --gog-btn-disabled-opacity: var(--gog-disabled-opacity);
428
+ --gog-btn-loading-opacity: 0.7;
429
+ --gog-btn-spinner-max-size: 70%;
430
+
431
+ --gog-btn-primary-bg: var(--gog-accent-color);
432
+ --gog-btn-primary-color: var(--gog-accent-text-color, var(--gog-primary-color));
433
+ --gog-btn-primary-border: transparent;
434
+ --gog-btn-primary-shadow: none;
435
+ --gog-btn-primary-hover-bg: var(--gog-accent-bright);
436
+ --gog-btn-primary-hover-color: var(--gog-btn-primary-color);
437
+ --gog-btn-primary-hover-shadow: 0 0 16px
438
+ color-mix(in srgb, var(--gog-accent-bright) 45%, transparent);
439
+ --gog-btn-primary-spinner-color: var(--gog-text-color);
440
+
441
+ --gog-btn-secondary-bg: var(--gog-secondary-color);
442
+ --gog-btn-secondary-color: var(--gog-accent-text-color, var(--gog-primary-color));
443
+ --gog-btn-secondary-border: transparent;
444
+ --gog-btn-secondary-shadow: none;
445
+ --gog-btn-secondary-hover-bg: var(--gog-accent-color);
446
+ --gog-btn-secondary-hover-color: var(--gog-btn-secondary-color);
447
+ --gog-btn-secondary-hover-shadow: none;
448
+ --gog-btn-secondary-spinner-color: var(--gog-text-color);
449
+
450
+ --gog-btn-outline-bg: transparent;
451
+ --gog-btn-outline-color: var(--gog-accent-color);
452
+ --gog-btn-outline-border: var(--gog-accent-color);
453
+ --gog-btn-outline-shadow: none;
454
+ --gog-btn-outline-hover-bg: var(--gog-accent-color);
455
+ --gog-btn-outline-hover-color: var(--gog-primary-color);
456
+ --gog-btn-outline-hover-shadow: none;
457
+ --gog-btn-outline-spinner-color: var(--gog-accent-color);
458
+
459
+ --gog-btn-ghost-bg: transparent;
460
+ --gog-btn-ghost-color: var(--gog-accent-color);
461
+ --gog-btn-ghost-border: transparent;
462
+ --gog-btn-ghost-shadow: none;
463
+ --gog-btn-ghost-hover-bg: color-mix(in srgb, var(--gog-accent-color) 12%, transparent);
464
+ --gog-btn-ghost-hover-color: var(--gog-btn-ghost-color);
465
+ --gog-btn-ghost-hover-shadow: none;
466
+ --gog-btn-ghost-spinner-color: var(--gog-accent-color);
467
+
468
+ /* ── Button toggle group ───────────────────────────────────────────────────
469
+ `--gog-button-toggle-bg`, `-color`, `-padding` and `-font-size` are intentionally NOT
470
+ declared — they are the per-instance escape hatch the size classes fall back through.
471
+ Padding/font-size reuse the `--gog-btn-<size>-*` scale so a toggle group and a
472
+ `<gog-button>` at the same `size` line up in a toolbar. */
473
+ --gog-button-toggle-font-family: var(--gog-font-heading);
474
+ --gog-button-toggle-font-weight: 700;
475
+ --gog-button-toggle-letter-spacing: 0.5px;
476
+ --gog-button-toggle-text-transform: uppercase;
477
+ --gog-button-toggle-line-height: 1;
478
+ --gog-button-toggle-gap: var(--gog-space-sm);
479
+ --gog-button-toggle-icon-size: 1.1em;
480
+ --gog-button-toggle-radius: var(--gog-radius);
481
+ --gog-button-toggle-border-width: var(--gog-control-border-width);
482
+ --gog-button-toggle-border-style: var(--gog-control-border-style);
483
+ --gog-button-toggle-border-color: var(--gog-border-color);
484
+ --gog-button-toggle-rest-bg: transparent;
485
+ --gog-button-toggle-rest-color: var(--gog-text-color);
486
+ --gog-button-toggle-hover-bg: var(--gog-hover-color);
487
+ --gog-button-toggle-hover-color: var(--gog-text-color);
488
+ --gog-button-toggle-selected-bg: var(--gog-accent-color);
489
+ --gog-button-toggle-selected-color: var(--gog-accent-text-color, var(--gog-primary-color));
490
+ --gog-button-toggle-selected-border-color: var(--gog-accent-color);
491
+ --gog-button-toggle-separated-gap: var(--gog-space-sm);
492
+ --gog-button-toggle-transition-duration: var(--gog-duration-base);
493
+ --gog-button-toggle-disabled-opacity: var(--gog-disabled-opacity);
494
+ --gog-button-toggle-focus-ring-width: var(--gog-focus-ring-width);
495
+ --gog-button-toggle-focus-ring-offset: 2px;
496
+ --gog-button-toggle-focus-ring-color: var(--gog-accent-color);
497
+
498
+ /* ── Calendar (the month grid inside gog-datepicker, and gog-calendar on its own) ── */
499
+ --gog-calendar-font-family: var(--gog-font-body);
500
+ --gog-calendar-color: var(--gog-text-color);
501
+ --gog-calendar-padding: 12px;
502
+ --gog-calendar-header-gap: 4px;
503
+ --gog-calendar-header-margin: 8px;
504
+ --gog-calendar-months-gap: 16px;
505
+ --gog-calendar-title-color: var(--gog-text-color);
506
+ --gog-calendar-title-font-weight: 700;
507
+ --gog-calendar-nav-size: 28px;
508
+ --gog-calendar-nav-radius: 6px;
509
+ --gog-calendar-nav-bg: transparent;
510
+ --gog-calendar-nav-color: var(--gog-muted-text-color);
511
+ --gog-calendar-nav-hover-bg: var(--gog-hover-color);
512
+ --gog-calendar-nav-hover-color: var(--gog-text-color);
513
+ --gog-calendar-nav-icon-size: 0.8rem;
514
+ /* Pulls the two chevrons of a year step together so they read as one control. */
515
+ --gog-calendar-nav-icon-overlap: -0.35em;
516
+ --gog-calendar-weekday-padding: 4px 0;
517
+ --gog-calendar-weekday-color: var(--gog-muted-text-color);
518
+ --gog-calendar-weekday-font-size: var(--gog-text-xs);
519
+ --gog-calendar-weekday-font-weight: 600;
520
+ --gog-calendar-weekday-text-transform: uppercase;
521
+ --gog-calendar-day-radius: 6px;
522
+ --gog-calendar-day-border-width: 1px;
523
+ --gog-calendar-day-border-style: solid;
524
+ --gog-calendar-day-rest-bg: transparent;
525
+ --gog-calendar-day-rest-color: var(--gog-text-color);
526
+ --gog-calendar-day-hover-bg: var(--gog-hover-color);
527
+ --gog-calendar-day-outside-color: var(--gog-muted-text-color);
528
+ --gog-calendar-today-border-color: var(--gog-accent-color);
529
+ --gog-calendar-today-font-weight: 700;
530
+ --gog-calendar-selected-bg: var(--gog-accent-color);
531
+ --gog-calendar-selected-color: var(--gog-accent-text-color, var(--gog-primary-color));
532
+ --gog-calendar-selected-font-weight: 700;
533
+ /* The wash between the two ends of a range: same hue, low enough to read as a band rather
534
+ than as a second selection. */
535
+ --gog-calendar-range-bg: color-mix(in srgb, var(--gog-accent-color) 16%, transparent);
536
+ --gog-calendar-range-color: var(--gog-text-color);
537
+ --gog-calendar-disabled-opacity: var(--gog-disabled-opacity);
538
+ --gog-calendar-transition-duration: var(--gog-duration-fast);
539
+ --gog-calendar-focus-ring-width: var(--gog-focus-ring-width);
540
+ --gog-calendar-focus-ring-offset: -2px;
541
+ --gog-calendar-focus-ring-color: var(--gog-accent-color);
542
+ --gog-calendar-divider-width: 1px;
543
+ --gog-calendar-divider-style: solid;
544
+ --gog-calendar-divider-color: var(--gog-border-color);
545
+ --gog-calendar-time-gap: 6px;
546
+ --gog-calendar-time-margin: 10px;
547
+ --gog-calendar-time-input-width: 3.5rem;
548
+ --gog-calendar-time-input-padding: 4px 6px;
549
+ --gog-calendar-time-input-bg: var(--gog-background-color);
550
+ --gog-calendar-action-padding: 4px 10px;
551
+ --gog-calendar-footer-gap: 8px;
552
+ --gog-calendar-xsm-font-size: var(--gog-text-xs);
553
+ --gog-calendar-xsm-day-size: 24px;
554
+ --gog-calendar-sm-font-size: var(--gog-text-sm);
555
+ --gog-calendar-sm-day-size: 28px;
556
+ --gog-calendar-md-font-size: var(--gog-text-sm);
557
+ --gog-calendar-md-day-size: 34px;
558
+ --gog-calendar-lg-font-size: var(--gog-text-md);
559
+ --gog-calendar-lg-day-size: 40px;
560
+ --gog-calendar-slg-font-size: var(--gog-text-lg);
561
+ --gog-calendar-slg-day-size: 46px;
562
+
563
+ /* ── Checkbox ──────────────────────────────────────────────────────────────
564
+ Box/label/icon size and padding come from the `--gog-control-checkbox-*` scale;
565
+ checkbox.component.ts maps the `size` input onto the host. */
566
+ --gog-checkbox-font-family: var(--gog-font-body);
567
+ --gog-checkbox-gap: 10px;
568
+ --gog-checkbox-radius: var(--gog-radius);
569
+ --gog-checkbox-border-width: var(--gog-control-border-width);
570
+ --gog-checkbox-border-style: var(--gog-control-border-style);
571
+ --gog-checkbox-border-color: var(--gog-accent-dim);
572
+ --gog-checkbox-bg: var(--gog-surface-color);
573
+ --gog-checkbox-checked-bg: var(--gog-accent-color);
574
+ --gog-checkbox-checked-border: var(--gog-accent-color);
575
+ --gog-checkbox-icon-color: var(--gog-accent-text-color, var(--gog-primary-color));
576
+ --gog-checkbox-label-color: var(--gog-muted-text-color);
577
+ --gog-checkbox-label-line-height: 1.3;
578
+ --gog-checkbox-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
579
+ --gog-checkbox-focus-ring-width: var(--gog-focus-ring-width);
580
+ --gog-checkbox-focus-ring-offset: var(--gog-focus-ring-offset);
581
+ --gog-checkbox-disabled-opacity: var(--gog-disabled-opacity);
582
+ --gog-checkbox-transition-duration: var(--gog-duration-base);
583
+ --gog-checkbox-dash-width-ratio: 0.45;
584
+ --gog-checkbox-dash-height: 2px;
585
+ --gog-checkbox-dash-radius: 999px;
586
+
587
+ /* ── Radio group ───────────────────────────────────────────────────────────
588
+ Box/label size reuse the `--gog-control-checkbox-*` scale (see Checkbox above);
589
+ radio-group.component.ts maps the `size` input onto the host the same way. */
590
+ --gog-radio-font-family: var(--gog-font-body);
591
+ --gog-radio-group-gap: 10px;
592
+ --gog-radio-group-label-size: var(--gog-text-sm);
593
+ --gog-radio-group-label-color: var(--gog-muted-text-color);
594
+ --gog-radio-group-option-gap: 8px;
595
+ --gog-radio-group-option-gap-horizontal: 20px;
596
+ --gog-radio-gap: 10px;
597
+ --gog-radio-border-width: var(--gog-control-border-width);
598
+ --gog-radio-border-style: var(--gog-control-border-style);
599
+ --gog-radio-border-color: var(--gog-accent-dim);
600
+ --gog-radio-bg: var(--gog-surface-color);
601
+ --gog-radio-checked-bg: var(--gog-surface-color);
602
+ --gog-radio-checked-border: var(--gog-accent-color);
603
+ --gog-radio-dot-color: var(--gog-accent-color);
604
+ --gog-radio-dot-size-ratio: 0.45;
605
+ --gog-radio-label-color: var(--gog-muted-text-color);
606
+ --gog-radio-label-line-height: 1.3;
607
+ --gog-radio-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
608
+ --gog-radio-focus-ring-width: var(--gog-focus-ring-width);
609
+ --gog-radio-focus-ring-offset: var(--gog-focus-ring-offset);
610
+ --gog-radio-disabled-opacity: var(--gog-disabled-opacity);
611
+ --gog-radio-transition-duration: var(--gog-duration-base);
612
+ --gog-radio-error-font-size: var(--gog-text-xs);
613
+ --gog-radio-error-color: var(--gog-danger-color);
614
+
615
+ /* ── Chip ──────────────────────────────────────────────────────────────────
616
+ `--gog-chip-*` size tokens below are the per-size scale; the unsuffixed
617
+ `--gog-chip-font-size`/`-padding-*`/`-gap`/`-avatar-size`/`-icon-size`/
618
+ `-remove-size` are left undeclared as the per-instance escape hatch. */
619
+ --gog-chip-font-family: inherit;
620
+ --gog-chip-bg: color-mix(in srgb, var(--gog-surface-color) 88%, var(--gog-hover-color));
621
+ --gog-chip-hover-bg: color-mix(in srgb, var(--gog-hover-color) 45%, var(--gog-surface-color));
622
+ --gog-chip-border: var(--gog-border-color);
623
+ --gog-chip-border-width: 1px;
624
+ --gog-chip-border-style: solid;
625
+ --gog-chip-color: var(--gog-text-color);
626
+ --gog-chip-font-weight: 500;
627
+ --gog-chip-line-height: 1.2;
628
+ --gog-chip-radius: max(var(--gog-radius), 2px);
629
+ --gog-chip-pill-radius: 9999px;
630
+ --gog-chip-remove-color: var(--gog-muted-text-color);
631
+ --gog-chip-remove-hover-color: var(--gog-text-color);
632
+ --gog-chip-remove-scale: 1.1;
633
+ --gog-chip-avatar-inset-ratio: 0.9;
634
+ --gog-chip-remove-inset-ratio: 0.85;
635
+ --gog-chip-disabled-opacity: 0.55;
636
+ --gog-chip-focus-ring-width: 2px;
637
+ --gog-chip-focus-ring-offset: var(--gog-focus-ring-offset);
638
+
639
+ --gog-chip-xsm-font-size: 0.6875rem;
640
+ --gog-chip-xsm-padding-block: 0.225rem;
641
+ --gog-chip-xsm-padding-inline: 0.375rem;
642
+ --gog-chip-xsm-gap: 0.275rem;
643
+ --gog-chip-xsm-avatar-size: 0.875rem;
644
+ --gog-chip-xsm-icon-size: 0.6875rem;
645
+ --gog-chip-xsm-remove-size: 0.75rem;
646
+
647
+ --gog-chip-sm-font-size: 0.75rem;
648
+ --gog-chip-sm-padding-block: 0.3rem;
649
+ --gog-chip-sm-padding-inline: 0.5rem;
650
+ --gog-chip-sm-gap: 0.375rem;
651
+ --gog-chip-sm-avatar-size: 1rem;
652
+ --gog-chip-sm-icon-size: 0.75rem;
653
+ --gog-chip-sm-remove-size: 0.875rem;
654
+
655
+ --gog-chip-md-font-size: 0.875rem;
656
+ --gog-chip-md-padding-block: 0.45rem;
657
+ --gog-chip-md-padding-inline: 0.75rem;
658
+ --gog-chip-md-gap: 0.5rem;
659
+ --gog-chip-md-avatar-size: 1.25rem;
660
+ --gog-chip-md-icon-size: 0.875rem;
661
+ --gog-chip-md-remove-size: 1rem;
662
+
663
+ --gog-chip-lg-font-size: 1rem;
664
+ --gog-chip-lg-padding-block: 0.6rem;
665
+ --gog-chip-lg-padding-inline: 0.875rem;
666
+ --gog-chip-lg-gap: 0.625rem;
667
+ --gog-chip-lg-avatar-size: 1.5rem;
668
+ --gog-chip-lg-icon-size: 1rem;
669
+ --gog-chip-lg-remove-size: 1.125rem;
670
+
671
+ --gog-chip-slg-font-size: 1.125rem;
672
+ --gog-chip-slg-padding-block: 0.75rem;
673
+ --gog-chip-slg-padding-inline: 1rem;
674
+ --gog-chip-slg-gap: 0.75rem;
675
+ --gog-chip-slg-avatar-size: 1.75rem;
676
+ --gog-chip-slg-icon-size: 1.125rem;
677
+ --gog-chip-slg-remove-size: 1.25rem;
678
+
679
+ /* ── Dialog ────────────────────────────────────────────────────────────────── */
680
+ --gog-dialog-font-family: var(--gog-font-heading);
681
+ /* Deliberately a flat value rather than a palette derivation: the scrim has to read
682
+ the same over any page content. Restate it per theme if a lighter wash suits. */
683
+ --gog-dialog-backdrop-bg: rgba(10, 8, 3, 0.72);
684
+ --gog-dialog-backdrop-blur: 2px;
685
+ --gog-dialog-backdrop-padding: var(--gog-space-lg);
686
+ --gog-dialog-backdrop-fade-duration: var(--gog-duration-base);
687
+ --gog-dialog-enter-duration: var(--gog-duration-slow);
688
+ --gog-dialog-enter-distance: -12px;
689
+ --gog-dialog-bg: var(--gog-surface-color);
690
+ --gog-dialog-color: var(--gog-text-color);
691
+ --gog-dialog-border: var(--gog-border-color);
692
+ --gog-dialog-border-width: var(--gog-panel-border-width);
693
+ --gog-dialog-border-style: var(--gog-panel-border-style);
694
+ --gog-dialog-radius: var(--gog-radius);
695
+ --gog-dialog-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
696
+ --gog-dialog-min-width: 320px;
697
+ --gog-dialog-max-height: 90vh;
698
+ --gog-dialog-header-padding: 16px 20px 14px;
699
+ --gog-dialog-header-gap: 12px;
700
+ --gog-dialog-header-border-color: var(--gog-border-color);
701
+ --gog-dialog-body-padding: 20px;
702
+ --gog-dialog-body-max-height: calc(var(--gog-dialog-max-height) - 60px);
703
+ --gog-dialog-close-size: 2rem;
704
+ --gog-dialog-close-font-size: 0.875rem;
705
+ --gog-dialog-close-color: var(--gog-muted-text-color);
706
+ --gog-dialog-close-hover-color: var(--gog-text-color);
707
+ --gog-dialog-close-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
708
+ --gog-dialog-close-hover-border: var(--gog-border-color);
709
+ --gog-dialog-close-focus-ring: var(--gog-accent-color);
710
+ --gog-dialog-close-focus-ring-width: var(--gog-focus-ring-width);
711
+ --gog-dialog-close-focus-ring-offset: var(--gog-focus-ring-offset);
712
+
713
+ /* Confirmation dialog */
714
+ --gog-confirm-gap: 12px;
715
+ --gog-confirm-min-width: 320px;
716
+ --gog-confirm-max-width: 440px;
717
+ --gog-confirm-color: var(--gog-text-color);
718
+ --gog-confirm-description-color: var(--gog-muted-text-color);
719
+ --gog-confirm-actions-gap: var(--gog-space-sm);
720
+ --gog-confirm-actions-offset: var(--gog-space-sm);
721
+
722
+ /* ── Autocomplete ──────────────────────────────────────────────────────────
723
+ A combobox whose trigger is a real text input. Padding/font-size reuse the shared
724
+ `--gog-field-<size>-*` scale, so it lines up with `gog-inputfield` and `gog-select` in a
725
+ form. `--gog-autocomplete-bg`, `-color`, `-font-size`, `-padding-x` and `-padding-y` are
726
+ intentionally NOT declared — they are the per-instance escape hatch the size classes fall
727
+ back through. */
728
+ --gog-autocomplete-font-family: var(--gog-font-body);
729
+ --gog-autocomplete-label-font-family: var(--gog-font-heading);
730
+ --gog-autocomplete-gap: 4px;
731
+ --gog-autocomplete-label-color: var(--gog-accent-color);
732
+ --gog-autocomplete-label-font-size: var(--gog-text-sm);
733
+ --gog-autocomplete-label-font-weight: 600;
734
+ --gog-autocomplete-label-letter-spacing: 1px;
735
+ --gog-autocomplete-label-text-transform: uppercase;
736
+ --gog-autocomplete-field-bg: var(--gog-surface-color);
737
+ --gog-autocomplete-text-color: var(--gog-text-color);
738
+ --gog-autocomplete-placeholder-color: var(--gog-muted-text-color);
739
+ --gog-autocomplete-border-width: var(--gog-control-border-width);
740
+ --gog-autocomplete-border-style: var(--gog-control-border-style);
741
+ --gog-autocomplete-border-color: var(--gog-accent-dim);
742
+ --gog-autocomplete-hover-border-color: var(--gog-accent-color);
743
+ --gog-autocomplete-radius: var(--gog-radius);
744
+ --gog-autocomplete-line-height: 1.4;
745
+ --gog-autocomplete-transition-duration: var(--gog-duration-base);
746
+ --gog-autocomplete-disabled-opacity: var(--gog-disabled-opacity);
747
+ --gog-autocomplete-focus-ring-width: var(--gog-focus-ring-width);
748
+ --gog-autocomplete-focus-ring-offset: var(--gog-focus-ring-offset);
749
+ --gog-autocomplete-focus-ring-color: var(--gog-accent-color);
750
+ --gog-autocomplete-error-color: var(--gog-danger-color);
751
+ --gog-autocomplete-error-border-color: var(--gog-danger-color);
752
+ --gog-autocomplete-error-font-family: var(--gog-font-body);
753
+ --gog-autocomplete-error-font-size: var(--gog-text-xs);
754
+ /* Floor for an auto-width field, so [fullWidth]="false" cannot collapse it to its chrome. */
755
+ --gog-autocomplete-min-width: 120px;
756
+ /* Trailing chrome: spinner and clear button, clear outermost — the arrangement the other
757
+ dropdowns settled on, so all of them line up in a form. */
758
+ --gog-autocomplete-actions-inset: var(--gog-control-icon-offset);
759
+ --gog-autocomplete-actions-gap: 6px;
760
+ /* Right padding on the input, reserving room for the actions above. */
761
+ --gog-autocomplete-actions-reserve: 40px;
762
+ --gog-autocomplete-clear-color: var(--gog-autocomplete-placeholder-color);
763
+ --gog-autocomplete-clear-hover-color: var(--gog-autocomplete-label-color);
764
+ --gog-autocomplete-clear-icon-ratio: 0.7;
765
+ --gog-autocomplete-spinner-size: 0.875rem;
766
+ /* Panel */
767
+ --gog-autocomplete-panel-bg: var(--gog-surface-color);
768
+ --gog-autocomplete-panel-shadow: var(--gog-panel-shadow);
769
+ --gog-autocomplete-panel-border-width: var(--gog-panel-border-width);
770
+ --gog-autocomplete-panel-border-style: var(--gog-panel-border-style);
771
+ --gog-autocomplete-panel-border-color: var(--gog-border-color);
772
+ --gog-autocomplete-panel-radius: var(--gog-radius);
773
+ --gog-autocomplete-panel-gap: 2px;
774
+ --gog-autocomplete-panel-max-height: 260px;
775
+ /* Ceiling for a content-sized panel, so one very long option cannot span the viewport. */
776
+ --gog-autocomplete-panel-max-width: 420px;
777
+ --gog-autocomplete-options-padding: 4px;
778
+ --gog-autocomplete-option-padding: 8px 10px;
779
+ --gog-autocomplete-option-radius: 4px;
780
+ --gog-autocomplete-option-gap: 10px;
781
+ --gog-autocomplete-option-color: var(--gog-text-color);
782
+ --gog-autocomplete-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
783
+ --gog-autocomplete-option-hover-color: var(--gog-text-color);
784
+ --gog-autocomplete-option-selected-bg: color-mix(
785
+ in srgb,
786
+ var(--gog-accent-color) 16%,
787
+ transparent
788
+ );
789
+ --gog-autocomplete-option-selected-color: var(--gog-accent-color);
790
+ /* Estimated row height fed into the panel's up/down placement math; not itself a real
791
+ layout property, so it has no effect unless the JS reads it. */
792
+ --gog-autocomplete-option-height: 36px;
793
+ --gog-autocomplete-empty-color: var(--gog-autocomplete-placeholder-color);
794
+ --gog-autocomplete-empty-font-size: var(--gog-text-sm);
795
+ --gog-autocomplete-float-label-reserve: var(--gog-field-float-label-reserve);
796
+ --gog-autocomplete-float-label-in-top: var(--gog-field-float-label-in-top);
797
+ --gog-autocomplete-float-label-over-gap: var(--gog-field-float-label-over-gap);
798
+ --gog-autocomplete-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
799
+
800
+ /* ── Badge (the `gogBadge` directive; its classes live in utilities.css) ───── */
801
+ --gog-badge-font-family: var(--gog-font-body);
802
+ --gog-badge-font-size: var(--gog-text-xs);
803
+ --gog-badge-font-weight: 600;
804
+ --gog-badge-line-height: 1;
805
+ /* Min-width *and* height: a one-digit badge stays a circle, a three-digit one grows
806
+ sideways only. */
807
+ --gog-badge-size: 1.25rem;
808
+ --gog-badge-dot-size: 0.5rem;
809
+ --gog-badge-padding-inline: 5px;
810
+ --gog-badge-radius: 999px;
811
+ /* How far the badge hangs outside its host's corner. */
812
+ --gog-badge-offset: 6px;
813
+ --gog-badge-border-width: 0;
814
+ --gog-badge-border-style: solid;
815
+ --gog-badge-border-color: transparent;
816
+ /* Above the host's own chrome but below any overlay panel (--gog-dropdown-z is 300). */
817
+ --gog-badge-z: 1;
818
+ /* `--gog-accent-text-color` is the palette's "text on a filled surface" colour and flips
819
+ with the theme, which is why a red badge reads white on light and near-black on dark. */
820
+ --gog-badge-success-bg: var(--gog-success-color);
821
+ --gog-badge-success-color: var(--gog-accent-text-color, var(--gog-primary-color));
822
+ --gog-badge-danger-bg: var(--gog-danger-color);
823
+ --gog-badge-danger-color: var(--gog-accent-text-color, var(--gog-primary-color));
824
+ --gog-badge-warning-bg: var(--gog-warning-color);
825
+ --gog-badge-warning-color: var(--gog-accent-text-color, var(--gog-primary-color));
826
+ --gog-badge-info-bg: var(--gog-info-color);
827
+ --gog-badge-info-color: var(--gog-accent-text-color, var(--gog-primary-color));
828
+
829
+ /* ── Datepicker (the field; the grid inside it is themed by --gog-calendar-*) ───
830
+ `--gog-datepicker-bg`, `-color`, `-font-size`, `-padding-x` and `-padding-y` are
831
+ intentionally NOT declared — they are the per-instance escape hatch the size classes fall
832
+ back through. */
833
+ --gog-datepicker-font-family: var(--gog-font-body);
834
+ --gog-datepicker-label-font-family: var(--gog-font-heading);
835
+ --gog-datepicker-gap: 4px;
836
+ --gog-datepicker-label-color: var(--gog-accent-color);
837
+ --gog-datepicker-label-font-size: var(--gog-text-sm);
838
+ --gog-datepicker-label-letter-spacing: 1px;
839
+ --gog-datepicker-label-text-transform: uppercase;
840
+ --gog-datepicker-field-bg: var(--gog-surface-color);
841
+ --gog-datepicker-text-color: var(--gog-text-color);
842
+ --gog-datepicker-placeholder-color: var(--gog-muted-text-color);
843
+ --gog-datepicker-border-width: var(--gog-control-border-width);
844
+ --gog-datepicker-border-style: var(--gog-control-border-style);
845
+ --gog-datepicker-border-color: var(--gog-accent-dim);
846
+ --gog-datepicker-hover-border-color: var(--gog-accent-color);
847
+ --gog-datepicker-radius: var(--gog-radius);
848
+ --gog-datepicker-line-height: 1.4;
849
+ --gog-datepicker-transition-duration: var(--gog-duration-base);
850
+ --gog-datepicker-disabled-opacity: var(--gog-disabled-opacity);
851
+ --gog-datepicker-focus-ring-width: var(--gog-focus-ring-width);
852
+ --gog-datepicker-focus-ring-offset: var(--gog-focus-ring-offset);
853
+ --gog-datepicker-focus-ring-color: var(--gog-accent-color);
854
+ --gog-datepicker-error-color: var(--gog-danger-color);
855
+ --gog-datepicker-error-border-color: var(--gog-danger-color);
856
+ --gog-datepicker-error-font-family: var(--gog-font-body);
857
+ --gog-datepicker-error-font-size: var(--gog-text-xs);
858
+ --gog-datepicker-min-width: 150px;
859
+ --gog-datepicker-actions-inset: var(--gog-control-icon-offset);
860
+ --gog-datepicker-actions-gap: 6px;
861
+ /* Right padding on the input, reserving room for the calendar and clear buttons. */
862
+ --gog-datepicker-actions-reserve: 40px;
863
+ --gog-datepicker-icon-color: var(--gog-accent-color);
864
+ --gog-datepicker-icon-hover-color: var(--gog-accent-bright);
865
+ --gog-datepicker-toggle-icon-size: 1rem;
866
+ --gog-datepicker-clear-color: var(--gog-datepicker-placeholder-color);
867
+ --gog-datepicker-clear-icon-ratio: 0.7;
868
+ --gog-datepicker-panel-bg: var(--gog-surface-color);
869
+ --gog-datepicker-panel-shadow: var(--gog-panel-shadow);
870
+ --gog-datepicker-panel-border-width: var(--gog-panel-border-width);
871
+ --gog-datepicker-panel-border-style: var(--gog-panel-border-style);
872
+ --gog-datepicker-panel-border-color: var(--gog-border-color);
873
+ --gog-datepicker-panel-radius: var(--gog-radius);
874
+ --gog-datepicker-panel-gap: 2px;
875
+ --gog-datepicker-float-label-reserve: var(--gog-field-float-label-reserve);
876
+ --gog-datepicker-float-label-in-top: var(--gog-field-float-label-in-top);
877
+ --gog-datepicker-float-label-over-gap: var(--gog-field-float-label-over-gap);
878
+ --gog-datepicker-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
879
+
880
+ /* ── Divider ───────────────────────────────────────────────────────────────── */
881
+ --gog-divider-line-color: var(--gog-border-color);
882
+ --gog-divider-line-thickness: 1px;
883
+ /* The variant classes map onto these, so a theme can decide what "dashed" looks like
884
+ rather than the value being frozen into the component's stylesheet. */
885
+ --gog-divider-solid-style: solid;
886
+ --gog-divider-dashed-style: dashed;
887
+ --gog-divider-dotted-style: dotted;
888
+ --gog-divider-block-spacing: var(--gog-space-md);
889
+ --gog-divider-inline-spacing: var(--gog-space-md);
890
+ --gog-divider-inset-size: var(--gog-space-lg);
891
+ /* Floor for a vertical divider with nothing to stretch to — e.g. between two inline
892
+ buttons. In a flex/grid row it stretches to the row instead. */
893
+ --gog-divider-vertical-length: 1.5em;
894
+ --gog-divider-label-gap: var(--gog-space-sm);
895
+ --gog-divider-label-color: var(--gog-muted-text-color);
896
+ --gog-divider-label-font-family: var(--gog-font-body);
897
+ --gog-divider-label-font-size: var(--gog-text-sm);
898
+ --gog-divider-label-font-weight: 500;
899
+ --gog-divider-label-line-height: 1.4;
900
+
901
+ /* ── Icon ──────────────────────────────────────────────────────────────────── */
902
+ --gog-icon-fallback-size: 1em;
903
+
904
+ /* ── Input field ───────────────────────────────────────────────────────────── */
905
+ --gog-input-font-family: var(--gog-font-body);
906
+ --gog-input-label-font-family: var(--gog-font-heading);
907
+ --gog-input-gap: 4px;
908
+ --gog-input-label-color: var(--gog-accent-color);
909
+ --gog-input-label-font-size: var(--gog-text-sm);
910
+ --gog-input-label-letter-spacing: 1px;
911
+ --gog-input-label-text-transform: uppercase;
912
+ --gog-input-field-bg: var(--gog-surface-color);
913
+ --gog-input-field-border: var(--gog-accent-dim);
914
+ --gog-input-field-border-width: var(--gog-control-border-width);
915
+ --gog-input-field-border-style: var(--gog-control-border-style);
916
+ --gog-input-radius: var(--gog-radius);
917
+ --gog-input-field-color: var(--gog-text-color);
918
+ --gog-input-placeholder-color: var(--gog-muted-text-color);
919
+ --gog-input-focus-border: var(--gog-accent-color);
920
+ --gog-input-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
921
+ --gog-input-focus-glow: 0 0 8px var(--gog-input-focus-ring);
922
+ --gog-input-focus-ring-width: var(--gog-focus-ring-width);
923
+ --gog-input-focus-ring-offset: var(--gog-focus-ring-offset);
924
+ --gog-input-error-color: var(--gog-danger-color);
925
+ --gog-input-error-font-size: var(--gog-text-xs);
926
+ --gog-input-error-offset: 2px;
927
+ --gog-input-icon-color: var(--gog-muted-text-color);
928
+ --gog-input-icon-hover-color: var(--gog-accent-color);
929
+ --gog-input-icon-action-radius: 4px;
930
+ --gog-input-icon-focus-ring-width: 2px;
931
+ --gog-input-disabled-opacity: var(--gog-disabled-opacity);
932
+ --gog-input-transition-duration: var(--gog-duration-base);
933
+ /* Float label — also used by gog-textarea, which shares the --gog-input-* block. */
934
+ /* Clear button — only rendered once the field has text, see `clearable`. */
935
+ --gog-input-clear-radius: 2px;
936
+ --gog-input-clear-icon-ratio: 0.7;
937
+ /*
938
+ The textarea's clear button gets a full-size glyph. The 0.7 ratio above suits the dense
939
+ single-line trigger of a dropdown; on a large multi-line box it reads as a speck.
940
+ */
941
+ --gog-textarea-clear-icon-ratio: 1;
942
+ --gog-input-clear-inset: 8px;
943
+ --gog-input-float-label-reserve: var(--gog-field-float-label-reserve);
944
+ --gog-input-float-label-in-top: var(--gog-field-float-label-in-top);
945
+ --gog-input-float-label-over-gap: var(--gog-field-float-label-over-gap);
946
+ --gog-input-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
947
+
948
+ /* ── Multiselect ─────────────────────────────────────────────────────────────
949
+ Each token is declared twice on purpose: the `--gog-ms-*` name is the pre-21.3.0
950
+ spelling and stays the *declared* one so an existing override of it still feeds the
951
+ component, while `--gog-multiselect-*` — what the stylesheet actually reads — derives
952
+ from it. Overriding either name works for the whole 21.3.0/21.4.0 window.
953
+ @deprecated since 21.3.0 (2026-08-07) — use `--gog-multiselect-*`. Removed in 21.5.0. */
954
+ --gog-ms-font-family: var(--gog-font-body);
955
+ --gog-multiselect-font-family: var(--gog-ms-font-family);
956
+ --gog-ms-label-font-family: var(--gog-font-heading);
957
+ --gog-multiselect-label-font-family: var(--gog-ms-label-font-family);
958
+ --gog-ms-gap: 4px;
959
+ --gog-multiselect-gap: var(--gog-ms-gap);
960
+ --gog-ms-option-gap: 4px;
961
+ --gog-multiselect-option-gap: var(--gog-ms-option-gap);
962
+ --gog-ms-options-padding: 4px;
963
+ --gog-multiselect-options-padding: var(--gog-ms-options-padding);
964
+ --gog-ms-label-color: var(--gog-accent-color);
965
+ --gog-multiselect-label-color: var(--gog-ms-label-color);
966
+ --gog-ms-label-font-size: var(--gog-text-sm);
967
+ --gog-multiselect-label-font-size: var(--gog-ms-label-font-size);
968
+ --gog-ms-label-letter-spacing: 1px;
969
+ --gog-multiselect-label-letter-spacing: var(--gog-ms-label-letter-spacing);
970
+ --gog-ms-label-text-transform: uppercase;
971
+ --gog-multiselect-label-text-transform: var(--gog-ms-label-text-transform);
972
+ --gog-ms-field-bg: var(--gog-surface-color);
973
+ --gog-multiselect-field-bg: var(--gog-ms-field-bg);
974
+ --gog-ms-field-border: var(--gog-accent-dim);
975
+ --gog-multiselect-field-border: var(--gog-ms-field-border);
976
+ --gog-ms-field-border-width: var(--gog-control-border-width);
977
+ --gog-multiselect-field-border-width: var(--gog-ms-field-border-width);
978
+ --gog-ms-field-border-style: var(--gog-control-border-style);
979
+ --gog-multiselect-field-border-style: var(--gog-ms-field-border-style);
980
+ --gog-ms-radius: var(--gog-radius);
981
+ --gog-multiselect-radius: var(--gog-ms-radius);
982
+ --gog-ms-field-color: var(--gog-text-color);
983
+ --gog-multiselect-field-color: var(--gog-ms-field-color);
984
+ --gog-ms-value-color: var(--gog-text-color);
985
+ --gog-multiselect-value-color: var(--gog-ms-value-color);
986
+ --gog-ms-placeholder-color: var(--gog-muted-text-color);
987
+ --gog-multiselect-placeholder-color: var(--gog-ms-placeholder-color);
988
+ --gog-ms-focus-border: var(--gog-accent-color);
989
+ --gog-multiselect-focus-border: var(--gog-ms-focus-border);
990
+ --gog-ms-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
991
+ --gog-multiselect-focus-ring: var(--gog-ms-focus-ring);
992
+ --gog-ms-focus-glow: 0 0 8px var(--gog-ms-focus-ring);
993
+ --gog-multiselect-focus-glow: var(--gog-ms-focus-glow);
994
+ --gog-ms-focus-ring-width: var(--gog-focus-ring-width);
995
+ --gog-multiselect-focus-ring-width: var(--gog-ms-focus-ring-width);
996
+ --gog-ms-focus-ring-offset: var(--gog-focus-ring-offset);
997
+ --gog-multiselect-focus-ring-offset: var(--gog-ms-focus-ring-offset);
998
+ --gog-ms-error-color: var(--gog-danger-color);
999
+ --gog-multiselect-error-color: var(--gog-ms-error-color);
1000
+ --gog-ms-error-font-size: var(--gog-text-xs);
1001
+ --gog-multiselect-error-font-size: var(--gog-ms-error-font-size);
1002
+ --gog-ms-error-offset: 2px;
1003
+ --gog-multiselect-error-offset: var(--gog-ms-error-offset);
1004
+ --gog-ms-border-color: var(--gog-accent-color);
1005
+ --gog-multiselect-border-color: var(--gog-ms-border-color);
1006
+ --gog-ms-panel-bg: var(--gog-surface-color);
1007
+ --gog-multiselect-panel-bg: var(--gog-ms-panel-bg);
1008
+ --gog-ms-panel-border: var(--gog-accent-color);
1009
+ --gog-multiselect-panel-border: var(--gog-ms-panel-border);
1010
+ --gog-ms-panel-shadow: var(--gog-panel-shadow);
1011
+ --gog-multiselect-panel-shadow: var(--gog-ms-panel-shadow);
1012
+ --gog-ms-panel-max-height: 260px;
1013
+ --gog-multiselect-panel-max-height: var(--gog-ms-panel-max-height);
1014
+ --gog-ms-panel-offset: 2px;
1015
+ --gog-multiselect-panel-offset: var(--gog-ms-panel-offset);
1016
+ --gog-ms-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
1017
+ --gog-multiselect-option-hover-bg: var(--gog-ms-option-hover-bg);
1018
+ --gog-ms-option-color: var(--gog-text-color);
1019
+ --gog-multiselect-option-color: var(--gog-ms-option-color);
1020
+ --gog-ms-option-gap-inline: 10px;
1021
+ --gog-multiselect-option-gap-inline: var(--gog-ms-option-gap-inline);
1022
+ /* Estimated row height fed into the panel's up/down placement math; not itself a real
1023
+ layout property, so it has no effect unless the JS reads it. */
1024
+ --gog-ms-option-height: 40px;
1025
+ --gog-multiselect-option-height: var(--gog-ms-option-height);
1026
+ --gog-ms-option-radius: calc(var(--gog-radius) - 2px);
1027
+ --gog-multiselect-option-radius: var(--gog-ms-option-radius);
1028
+ --gog-ms-option-disabled-opacity: 0.5;
1029
+ --gog-multiselect-option-disabled-opacity: var(--gog-ms-option-disabled-opacity);
1030
+ --gog-ms-option-transition-duration: var(--gog-duration-fast);
1031
+ --gog-multiselect-option-transition-duration: var(--gog-ms-option-transition-duration);
1032
+ --gog-ms-checkbox-border: var(--gog-accent-dim);
1033
+ --gog-multiselect-checkbox-border: var(--gog-ms-checkbox-border);
1034
+ --gog-ms-checkbox-bg: var(--gog-background-color);
1035
+ --gog-multiselect-checkbox-bg: var(--gog-ms-checkbox-bg);
1036
+ --gog-ms-checkbox-checked-bg: var(--gog-accent-color);
1037
+ --gog-multiselect-checkbox-checked-bg: var(--gog-ms-checkbox-checked-bg);
1038
+ --gog-ms-checkbox-checked-color: var(--gog-primary-color);
1039
+ --gog-multiselect-checkbox-checked-color: var(--gog-ms-checkbox-checked-color);
1040
+ --gog-ms-controls-gap: 4px;
1041
+ --gog-multiselect-controls-gap: var(--gog-ms-controls-gap);
1042
+ --gog-ms-controls-padding: 6px 10px;
1043
+ --gog-multiselect-controls-padding: var(--gog-ms-controls-padding);
1044
+ --gog-ms-actions-gap: 6px;
1045
+ --gog-multiselect-actions-gap: var(--gog-ms-actions-gap);
1046
+ --gog-ms-filter-padding: 6px;
1047
+ --gog-multiselect-filter-padding: var(--gog-ms-filter-padding);
1048
+ --gog-ms-filter-input-padding-y: 6px;
1049
+ --gog-multiselect-filter-input-padding-y: var(--gog-ms-filter-input-padding-y);
1050
+ --gog-ms-filter-input-padding-x: 8px;
1051
+ --gog-multiselect-filter-input-padding-x: var(--gog-ms-filter-input-padding-x);
1052
+ --gog-ms-filter-input-bg: var(--gog-background-color);
1053
+ --gog-multiselect-filter-input-bg: var(--gog-ms-filter-input-bg);
1054
+ --gog-ms-filter-input-color: var(--gog-multiselect-control-color);
1055
+ --gog-multiselect-filter-input-color: var(--gog-ms-filter-input-color);
1056
+ --gog-ms-filter-input-border: var(--gog-multiselect-control-border);
1057
+ --gog-multiselect-filter-input-border: var(--gog-ms-filter-input-border);
1058
+ --gog-ms-filter-input-radius: var(--gog-radius);
1059
+ --gog-multiselect-filter-input-radius: var(--gog-ms-filter-input-radius);
1060
+ --gog-ms-filter-border-width: var(--gog-panel-border-width);
1061
+ --gog-multiselect-filter-border-width: var(--gog-ms-filter-border-width);
1062
+ --gog-ms-filter-border-style: var(--gog-panel-border-style);
1063
+ --gog-multiselect-filter-border-style: var(--gog-ms-filter-border-style);
1064
+ --gog-ms-filter-border-color: var(--gog-border-color);
1065
+ --gog-multiselect-filter-border-color: var(--gog-ms-filter-border-color);
1066
+ --gog-ms-filter-empty-padding: 10px;
1067
+ --gog-multiselect-filter-empty-padding: var(--gog-ms-filter-empty-padding);
1068
+ --gog-ms-filter-empty-color: var(--gog-multiselect-placeholder-color);
1069
+ --gog-multiselect-filter-empty-color: var(--gog-ms-filter-empty-color);
1070
+ /* Matches --gog-select-chevron-inset; see the note there. */
1071
+ /* "+N" badge shown when the selection does not fit on one line. */
1072
+ --gog-ms-overflow-color: var(--gog-multiselect-placeholder-color);
1073
+ --gog-multiselect-overflow-color: var(--gog-ms-overflow-color);
1074
+ --gog-ms-overflow-font-size: var(--gog-text-sm);
1075
+ --gog-multiselect-overflow-font-size: var(--gog-ms-overflow-font-size);
1076
+ --gog-ms-overflow-gap: 6px;
1077
+ --gog-multiselect-overflow-gap: var(--gog-ms-overflow-gap);
1078
+ --gog-ms-min-width: 120px;
1079
+ --gog-multiselect-min-width: var(--gog-ms-min-width);
1080
+ --gog-ms-panel-max-width: 420px;
1081
+ --gog-multiselect-panel-max-width: var(--gog-ms-panel-max-width);
1082
+ --gog-ms-actions-inset: var(--gog-control-icon-offset);
1083
+ --gog-multiselect-actions-inset: var(--gog-ms-actions-inset);
1084
+ --gog-ms-clear-radius: 2px;
1085
+ --gog-multiselect-clear-radius: var(--gog-ms-clear-radius);
1086
+ --gog-ms-disabled-opacity: var(--gog-disabled-opacity);
1087
+ --gog-multiselect-disabled-opacity: var(--gog-ms-disabled-opacity);
1088
+ --gog-ms-transition-duration: var(--gog-duration-base);
1089
+ --gog-multiselect-transition-duration: var(--gog-ms-transition-duration);
1090
+ --gog-ms-float-label-reserve: var(--gog-field-float-label-reserve);
1091
+ --gog-multiselect-float-label-reserve: var(--gog-ms-float-label-reserve);
1092
+ --gog-ms-float-label-in-top: var(--gog-field-float-label-in-top);
1093
+ --gog-multiselect-float-label-in-top: var(--gog-ms-float-label-in-top);
1094
+ --gog-ms-float-label-over-gap: var(--gog-field-float-label-over-gap);
1095
+ --gog-multiselect-float-label-over-gap: var(--gog-ms-float-label-over-gap);
1096
+ --gog-ms-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
1097
+ --gog-multiselect-float-label-over-reserve: var(--gog-ms-float-label-over-reserve);
1098
+ --gog-ms-arrow-transition-duration: var(--gog-duration-slow);
1099
+ --gog-multiselect-arrow-transition-duration: var(--gog-ms-arrow-transition-duration);
1100
+ /* Icon geometry, expressed as a ratio of the control's font size. */
1101
+ --gog-ms-clear-icon-ratio: 0.7;
1102
+ --gog-multiselect-clear-icon-ratio: var(--gog-ms-clear-icon-ratio);
1103
+ --gog-ms-arrow-icon-ratio: 0.875;
1104
+ --gog-multiselect-arrow-icon-ratio: var(--gog-ms-arrow-icon-ratio);
1105
+ --gog-ms-mark-size-ratio: 1.2375;
1106
+ --gog-multiselect-mark-size-ratio: var(--gog-ms-mark-size-ratio);
1107
+ --gog-ms-mark-icon-ratio: 1.125;
1108
+ --gog-multiselect-mark-icon-ratio: var(--gog-ms-mark-icon-ratio);
1109
+
1110
+ /* ── Paginator ─────────────────────────────────────────────────────────────── */
1111
+ --gog-paginator-gap: 4px;
1112
+ --gog-paginator-ellipsis-color: var(--gog-muted-text-color);
1113
+ --gog-paginator-ellipsis-font-size: var(--gog-text-sm);
1114
+ --gog-paginator-ellipsis-font-family: var(--gog-font-body);
1115
+ --gog-paginator-ellipsis-min-width: 32px;
1116
+
1117
+ /* ── Progressbar ──────────────────────────────────────────────────────────── */
1118
+ --gog-progressbar-track-base-bg: color-mix(
1119
+ in srgb,
1120
+ var(--gog-text-color) 20%,
1121
+ var(--gog-border-color)
1122
+ );
1123
+ --gog-progressbar-radius: 999px;
1124
+ --gog-progressbar-transition-duration: var(--gog-duration-slow);
1125
+ --gog-progressbar-xsm-height: 2px;
1126
+ --gog-progressbar-sm-height: 4px;
1127
+ --gog-progressbar-md-height: 6px;
1128
+ --gog-progressbar-lg-height: 10px;
1129
+ --gog-progressbar-slg-height: 14px;
1130
+ --gog-progressbar-value-gap: var(--gog-space-sm);
1131
+ --gog-progressbar-value-min-width: 3ch;
1132
+ --gog-progressbar-value-color: var(--gog-muted-text-color);
1133
+ --gog-progressbar-value-font-family: var(--gog-font-body);
1134
+ --gog-progressbar-value-font-size: var(--gog-text-sm);
1135
+ --gog-progressbar-indeterminate-duration: 1.6s;
1136
+ --gog-progressbar-indeterminate-easing: cubic-bezier(0.65, 0.05, 0.36, 1);
1137
+ /* The reduced-motion stand-in for the indeterminate animation. */
1138
+ --gog-progressbar-stripe-size: 6px;
1139
+ --gog-progressbar-stripe-color: color-mix(in srgb, var(--gog-surface-color) 45%, transparent);
1140
+ /* The buffer tier is the same hue at low opacity, so it reads as "ahead of the fill"
1141
+ rather than as a second, competing colour. */
1142
+ --gog-progressbar-accent-bg: var(--gog-accent-color);
1143
+ --gog-progressbar-accent-buffer-bg: color-mix(in srgb, var(--gog-accent-color) 35%, transparent);
1144
+ --gog-progressbar-success-bg: var(--gog-success-color);
1145
+ --gog-progressbar-success-buffer-bg: color-mix(
1146
+ in srgb,
1147
+ var(--gog-success-color) 35%,
1148
+ transparent
1149
+ );
1150
+ --gog-progressbar-danger-bg: var(--gog-danger-color);
1151
+ --gog-progressbar-danger-buffer-bg: color-mix(in srgb, var(--gog-danger-color) 35%, transparent);
1152
+ --gog-progressbar-warning-bg: var(--gog-warning-color);
1153
+ --gog-progressbar-warning-buffer-bg: color-mix(
1154
+ in srgb,
1155
+ var(--gog-warning-color) 35%,
1156
+ transparent
1157
+ );
1158
+ --gog-progressbar-info-bg: var(--gog-info-color);
1159
+ --gog-progressbar-info-buffer-bg: color-mix(in srgb, var(--gog-info-color) 35%, transparent);
1160
+
1161
+ /* ── Scroll ────────────────────────────────────────────────────────────────── */
1162
+ --gog-scroll-track-bg: transparent;
1163
+ --gog-scroll-track-radius: var(--gog-radius);
1164
+ --gog-scroll-thumb-bg: var(--gog-accent-dim);
1165
+ --gog-scroll-thumb-hover-bg: var(--gog-accent-color);
1166
+ --gog-scroll-thumb-active-bg: var(--gog-accent-bright);
1167
+ --gog-scroll-thumb-radius: var(--gog-radius);
1168
+ --gog-scroll-thumb-inset: 2px;
1169
+ --gog-scroll-corner-bg: transparent;
1170
+ --gog-scroll-fade-duration: var(--gog-duration-base);
1171
+ --gog-scroll-focus-ring: var(--gog-accent-color);
1172
+ --gog-scroll-focus-ring-width: var(--gog-focus-ring-width);
1173
+ /* Per-size pair for the two-tier `--gog-scroll-track-width`/`-thumb-min-size` chains
1174
+ that scroll.component.scss's `.gog-scroll--thin` modifier switches between. `normal`
1175
+ is the unmarked default, mirroring --gog-table-lg-*. */
1176
+ --gog-scroll-normal-track-width: 10px;
1177
+ --gog-scroll-thin-track-width: 6px;
1178
+ --gog-scroll-normal-thumb-min-size: 32px;
1179
+ --gog-scroll-thin-thumb-min-size: 24px;
1180
+
1181
+ /* ── Select ────────────────────────────────────────────────────────────────── */
1182
+ --gog-select-font-family: var(--gog-font-body);
1183
+ --gog-select-label-font-family: var(--gog-font-heading);
1184
+ --gog-select-gap: 4px;
1185
+ --gog-select-label-color: var(--gog-accent-color);
1186
+ --gog-select-label-font-size: var(--gog-text-sm);
1187
+ --gog-select-label-letter-spacing: 1px;
1188
+ --gog-select-label-text-transform: uppercase;
1189
+ --gog-select-field-bg: var(--gog-surface-color);
1190
+ --gog-select-field-border: var(--gog-accent-dim);
1191
+ --gog-select-field-border-width: var(--gog-control-border-width);
1192
+ --gog-select-field-border-style: var(--gog-control-border-style);
1193
+ --gog-select-radius: var(--gog-radius);
1194
+ --gog-select-field-color: var(--gog-text-color);
1195
+ --gog-select-placeholder-color: var(--gog-muted-text-color);
1196
+ --gog-select-focus-border: var(--gog-accent-color);
1197
+ --gog-select-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
1198
+ --gog-select-focus-glow: 0 0 8px var(--gog-select-focus-ring);
1199
+ --gog-select-focus-ring-width: var(--gog-focus-ring-width);
1200
+ --gog-select-focus-ring-offset: var(--gog-focus-ring-offset);
1201
+ --gog-select-error-color: var(--gog-danger-color);
1202
+ --gog-select-error-font-size: var(--gog-text-xs);
1203
+ --gog-select-chevron-color: var(--gog-accent-color);
1204
+ /*
1205
+ Distance from the trigger's right edge to the trailing chrome, matching the leading icon
1206
+ inset on gog-inputfield so a select, a multiselect and an input line up in one form. It is
1207
+ applied as the trigger's `padding-right`, and the chevron sits inside that padding — so this
1208
+ is the gap itself, not the gap plus the chevron. It used to be 40px, which double-counted
1209
+ and put the chevron 42px from the edge.
1210
+ */
1211
+ --gog-select-chevron-inset: var(--gog-control-icon-offset);
1212
+ /* Floor for an auto-width trigger, so [fullWidth]="false" cannot collapse it to the chevron. */
1213
+ --gog-select-min-width: 120px;
1214
+ /* Ceiling for a content-sized panel, so one very long option cannot span the viewport. */
1215
+ --gog-select-panel-max-width: 420px;
1216
+ /* Filter box — only rendered when `filter` is on. */
1217
+ --gog-select-filter-padding: 6px;
1218
+ --gog-select-filter-input-padding-y: 6px;
1219
+ --gog-select-filter-input-padding-x: 8px;
1220
+ --gog-select-filter-input-bg: var(--gog-background-color);
1221
+ --gog-select-filter-input-color: var(--gog-select-control-color);
1222
+ --gog-select-filter-input-border: var(--gog-select-control-border);
1223
+ --gog-select-filter-input-radius: var(--gog-radius);
1224
+ --gog-select-filter-border-width: var(--gog-panel-border-width);
1225
+ --gog-select-filter-border-style: var(--gog-panel-border-style);
1226
+ --gog-select-filter-border-color: var(--gog-select-option-border-color, var(--gog-border-color));
1227
+ --gog-select-filter-empty-padding: 10px;
1228
+ --gog-select-filter-empty-color: var(--gog-select-placeholder-color);
1229
+ /* Clear button — only rendered once a value is selected, see `clearable`. */
1230
+ --gog-select-clear-radius: 2px;
1231
+ --gog-select-clear-icon-ratio: 0.7;
1232
+ --gog-select-clear-gap: 6px;
1233
+ --gog-select-clear-color: var(--gog-select-placeholder-color);
1234
+ --gog-select-clear-hover-color: var(--gog-select-label-color);
1235
+ --gog-select-control-gap: 12px;
1236
+ --gog-select-panel-bg: var(--gog-surface-color);
1237
+ --gog-select-panel-shadow: var(--gog-panel-shadow);
1238
+ --gog-select-panel-max-height: 260px;
1239
+ --gog-select-panel-offset: 2px;
1240
+ --gog-select-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
1241
+ --gog-select-option-selected-color: var(--gog-accent-color);
1242
+ --gog-select-option-color: var(--gog-text-color);
1243
+ --gog-select-option-gap: 10px;
1244
+ /* Estimated row height fed into the panel's up/down placement math; not itself a real
1245
+ layout property, so it has no effect unless the JS reads it. */
1246
+ --gog-select-option-height: 40px;
1247
+ --gog-select-option-disabled-opacity: 0.5;
1248
+ --gog-select-option-transition-duration: var(--gog-duration-fast);
1249
+ /* Icon geometry, expressed as a ratio of the control's font size. */
1250
+ --gog-select-chevron-icon-ratio: 0.875;
1251
+ --gog-select-mark-size-ratio: 1.125;
1252
+ --gog-select-mark-icon-ratio: 0.875;
1253
+ --gog-select-disabled-opacity: var(--gog-disabled-opacity);
1254
+ --gog-select-transition-duration: var(--gog-duration-base);
1255
+ --gog-select-float-label-reserve: var(--gog-field-float-label-reserve);
1256
+ --gog-select-float-label-in-top: var(--gog-field-float-label-in-top);
1257
+ --gog-select-float-label-over-gap: var(--gog-field-float-label-over-gap);
1258
+ --gog-select-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
1259
+
1260
+ /* ── Skeleton ─────────────────────────────────────────────────────────────── */
1261
+ --gog-skeleton-base: color-mix(in srgb, var(--gog-border-color) 40%, var(--gog-surface-color));
1262
+ --gog-skeleton-shine: color-mix(in srgb, var(--gog-skeleton-base), white 35%);
1263
+ --gog-skeleton-radius: var(--gog-radius);
1264
+ --gog-skeleton-square-radius: 0px;
1265
+ --gog-skeleton-line-radius: calc(var(--gog-skeleton-radius) / 2);
1266
+ --gog-skeleton-line-gap: var(--gog-space-sm);
1267
+ --gog-skeleton-short-line-width: 60%;
1268
+ --gog-skeleton-pulse-duration: 1.6s;
1269
+ --gog-skeleton-pulse-min-opacity: 0.5;
1270
+ --gog-skeleton-wave-duration: 1.6s;
1271
+ --gog-skeleton-line-height-xsm: 8px;
1272
+ --gog-skeleton-line-height-sm: 10px;
1273
+ --gog-skeleton-line-height-md: 14px;
1274
+ --gog-skeleton-line-height-lg: 18px;
1275
+ --gog-skeleton-line-height-slg: 24px;
1276
+ --gog-skeleton-circle-size-xsm: 24px;
1277
+ --gog-skeleton-circle-size-sm: 32px;
1278
+ --gog-skeleton-circle-size-md: 48px;
1279
+ --gog-skeleton-circle-size-lg: 64px;
1280
+ --gog-skeleton-circle-size-slg: 96px;
1281
+ --gog-skeleton-rect-height-xsm: 40px;
1282
+ --gog-skeleton-rect-height-sm: 64px;
1283
+ --gog-skeleton-rect-height-md: 120px;
1284
+ --gog-skeleton-rect-height-lg: 200px;
1285
+ --gog-skeleton-rect-height-slg: 320px;
1286
+
1287
+ /* ── Slider ───────────────────────────────────────────────────────────────── */
1288
+ --gog-slider-auto-width: 240px;
1289
+ /* Length (height) of a vertical slider's track — the counterpart to
1290
+ --gog-slider-auto-width, which only sizes the horizontal case. */
1291
+ --gog-slider-vertical-length: 160px;
1292
+ --gog-slider-label-font-family: var(--gog-font-heading);
1293
+ --gog-slider-value-font-family: var(--gog-font-mono);
1294
+ --gog-slider-error-font-family: var(--gog-font-body);
1295
+ --gog-slider-gap: 6px;
1296
+ --gog-slider-label-color: var(--gog-accent-color);
1297
+ --gog-slider-label-font-size: var(--gog-text-sm);
1298
+ --gog-slider-label-letter-spacing: 1px;
1299
+ --gog-slider-label-text-transform: uppercase;
1300
+ --gog-slider-value-color: var(--gog-accent-color);
1301
+ --gog-slider-value-font-size: var(--gog-text-sm);
1302
+ --gog-slider-value-min-width: 40px;
1303
+ --gog-slider-track-height: 4px;
1304
+ --gog-slider-track-area-height: 20px;
1305
+ --gog-slider-track-radius: 0px;
1306
+ /*
1307
+ * Deliberately NOT an accent-* token: --gog-accent-dim sits on the same hue ramp as
1308
+ * --gog-slider-fill-bg (--gog-accent-color), so at a 4px track height the two used to
1309
+ * read as one blob rather than "recessed groove + accent fill" — same problem in both
1310
+ * themes, since the whole accent ramp is one hue. Mixing --gog-text-color into
1311
+ * --gog-border-color instead gives a desaturated, theme-adaptive groove: it darkens
1312
+ * toward black in the light theme (text-color is near-black there) and lightens toward
1313
+ * parchment in the dark theme (text-color is near-white there), landing at a neutral
1314
+ * warm gray in both — always visibly distinct from the saturated accent fill, and always
1315
+ * legible against its own theme's surface.
1316
+ */
1317
+ --gog-slider-track-bg: color-mix(in srgb, var(--gog-text-color) 30%, var(--gog-border-color));
1318
+ --gog-slider-track-border-width: 1px;
1319
+ --gog-slider-track-border-style: solid;
1320
+ /* Transparent by default — same opt-in convention as --gog-btn-primary-border: the
1321
+ width/style are always in the box model, but invisible until a theme sets a color. */
1322
+ --gog-slider-track-border-color: transparent;
1323
+ /* Bound via `background` (not `background-color`) in slider.component.scss, so this
1324
+ also accepts a gradient (e.g. `linear-gradient(...)`) for the fill style, not just a
1325
+ solid color. */
1326
+ --gog-slider-fill-bg: var(--gog-accent-color);
1327
+ --gog-slider-thumb-size: 16px;
1328
+ --gog-slider-thumb-bg: var(--gog-accent-color);
1329
+ --gog-slider-thumb-border: var(--gog-background-color);
1330
+ --gog-slider-thumb-border-width: 2px;
1331
+ --gog-slider-thumb-radius: 50%;
1332
+ --gog-slider-thumb-shadow: color-mix(in srgb, var(--gog-accent-bright) 40%, transparent);
1333
+ --gog-slider-thumb-glow-size: 6px;
1334
+ --gog-slider-focus-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
1335
+ --gog-slider-focus-ring-width: var(--gog-focus-ring-width);
1336
+ --gog-slider-range-color: var(--gog-muted-text-color);
1337
+ --gog-slider-range-font-size: var(--gog-text-xs);
1338
+ --gog-slider-error-color: var(--gog-danger-color);
1339
+ --gog-slider-error-font-size: var(--gog-text-xs);
1340
+ --gog-slider-disabled-opacity: var(--gog-disabled-opacity);
1341
+
1342
+ /* ── Spinner ──────────────────────────────────────────────────────────────── */
1343
+ --gog-spinner-rune-font-family: var(--gog-font-heading);
1344
+ --gog-spinner-track-color: var(--gog-accent-dim);
1345
+ --gog-spinner-arc-outer-color: var(--gog-accent-color);
1346
+ --gog-spinner-arc-inner-color: var(--gog-accent-bright);
1347
+ --gog-spinner-diamond-color: var(--gog-accent-bright);
1348
+ --gog-spinner-rune-color: var(--gog-accent-bright);
1349
+ --gog-spinner-glow-color: var(--gog-accent-color);
1350
+ --gog-spinner-track-opacity: 0.35;
1351
+ --gog-spinner-arc-inner-opacity: 0.75;
1352
+ --gog-spinner-diamond-opacity: 0.85;
1353
+ --gog-spinner-arc-outer-pulse-opacity: 0.8;
1354
+ --gog-spinner-arc-inner-pulse-opacity: 0.45;
1355
+ --gog-spinner-rune-pulse-opacity: 0.4;
1356
+ --gog-spinner-arc-outer-dash: 100 63;
1357
+ --gog-spinner-arc-inner-dash: 35 78;
1358
+ --gog-spinner-arc-inner-stroke-compact: 1;
1359
+ --gog-spinner-spin-duration: 1.4s;
1360
+ --gog-spinner-spin-slow-duration: 2s;
1361
+ --gog-spinner-ticks-duration: 6s;
1362
+ --gog-spinner-pulse-duration: 2.8s;
1363
+ --gog-spinner-ring-duration: 1s;
1364
+ --gog-spinner-ring-padding: 16%;
1365
+ --gog-spinner-arc-outer-glow: 5px;
1366
+ --gog-spinner-arc-inner-glow: 4px;
1367
+ --gog-spinner-diamond-glow: 3px;
1368
+ --gog-spinner-rune-glow: 6px;
1369
+ --gog-spinner-ring-glow: 5px;
1370
+ --gog-spinner-overlay-blur: 3px;
1371
+ --gog-spinner-overlay-fade-duration: var(--gog-duration-slow);
1372
+
1373
+ /* ── Table ────────────────────────────────────────────────────────────────── */
1374
+ --gog-table-font-family: var(--gog-font-body);
1375
+ --gog-table-header-font-family: var(--gog-font-heading);
1376
+ --gog-table-numeric-font-family: var(--gog-font-mono);
1377
+ --gog-table-gap: 12px;
1378
+ --gog-table-border-color: var(--gog-accent-dim);
1379
+ --gog-table-border-width: 2px;
1380
+ --gog-table-border-style: solid;
1381
+ --gog-table-row-border-width: 1px;
1382
+ --gog-table-surface: var(--gog-surface-color);
1383
+ --gog-table-text-color: var(--gog-text-color);
1384
+ --gog-table-accent-color: var(--gog-accent-color);
1385
+ --gog-table-accent-bright: var(--gog-accent-bright);
1386
+ --gog-table-hover-bg: var(--gog-accent-pale);
1387
+ --gog-table-muted-color: var(--gog-muted-text-color);
1388
+ --gog-table-focus-ring: var(--gog-accent-color);
1389
+ --gog-table-focus-ring-width: var(--gog-focus-ring-width);
1390
+ --gog-table-header-letter-spacing: 1px;
1391
+ --gog-table-header-text-transform: uppercase;
1392
+ --gog-table-num-col-width: 48px;
1393
+ --gog-table-th-inner-gap: 6px;
1394
+ --gog-table-sort-icon-size: 0.9em;
1395
+ --gog-table-sort-icon-width: 1.1em;
1396
+ --gog-table-sort-icon-opacity: 0.6;
1397
+ --gog-table-empty-padding: 24px 14px;
1398
+ --gog-table-empty-font-size: var(--gog-text-md);
1399
+ --gog-table-loading-padding: 32px 14px;
1400
+ --gog-table-loading-opacity: 0.5;
1401
+ --gog-table-row-transition-duration: var(--gog-duration-fast);
1402
+ --gog-table-footer-gap: var(--gog-space-sm);
1403
+ --gog-table-footer-min-height: 32px;
1404
+ --gog-table-total-font-size: var(--gog-text-xs);
1405
+ --gog-table-total-letter-spacing: 0.5px;
1406
+ --gog-table-total-text-transform: uppercase;
1407
+ --gog-table-num-font-size: var(--gog-text-xs);
1408
+ --gog-table-padding-h: 14px;
1409
+ --gog-table-xsm-padding-v: 2px;
1410
+ --gog-table-xsm-th-font-size: var(--gog-text-xs);
1411
+ --gog-table-xsm-td-font-size: var(--gog-text-xs);
1412
+ --gog-table-sm-padding-v: 3px;
1413
+ --gog-table-sm-th-font-size: var(--gog-text-xs);
1414
+ --gog-table-sm-td-font-size: var(--gog-text-xs);
1415
+ --gog-table-md-padding-v: 6px;
1416
+ --gog-table-md-th-font-size: var(--gog-text-xs);
1417
+ --gog-table-md-td-font-size: var(--gog-text-sm);
1418
+ --gog-table-lg-padding-v: 10px;
1419
+ --gog-table-lg-th-font-size: var(--gog-text-sm);
1420
+ --gog-table-lg-td-font-size: var(--gog-text-md);
1421
+ --gog-table-slg-padding-v: 14px;
1422
+ --gog-table-slg-th-font-size: var(--gog-text-md);
1423
+ --gog-table-slg-td-font-size: var(--gog-text-lg);
1424
+
1425
+ /* ── Tabs ──────────────────────────────────────────────────────────────────
1426
+ `--gog-tabs-tab-bg`, `-tab-color`, `-tab-padding` and `-tab-font-size` are intentionally
1427
+ NOT declared — they are the per-instance escape hatch the size classes fall back through.
1428
+ `--gog-tabs-indicator-offset` / `-length` are written as inline styles from the measured
1429
+ header geometry, so they are not declared either. */
1430
+ --gog-tabs-font-family: var(--gog-font-heading);
1431
+ --gog-tabs-font-weight: 700;
1432
+ --gog-tabs-letter-spacing: 0.4px;
1433
+ --gog-tabs-text-transform: none;
1434
+ --gog-tabs-line-height: 1.2;
1435
+ --gog-tabs-gap: 0px;
1436
+ --gog-tabs-tab-gap: var(--gog-space-sm);
1437
+ --gog-tabs-icon-size: 1.1em;
1438
+ --gog-tabs-rest-bg: transparent;
1439
+ --gog-tabs-rest-color: var(--gog-muted-text-color);
1440
+ --gog-tabs-hover-color: var(--gog-text-color);
1441
+ --gog-tabs-active-color: var(--gog-accent-color);
1442
+ --gog-tabs-header-border-width: 1px;
1443
+ --gog-tabs-header-border-style: solid;
1444
+ --gog-tabs-header-border-color: var(--gog-border-color);
1445
+ --gog-tabs-indicator-color: var(--gog-accent-color);
1446
+ --gog-tabs-indicator-thickness: 2px;
1447
+ --gog-tabs-indicator-radius: 999px;
1448
+ --gog-tabs-transition-duration: var(--gog-duration-base);
1449
+ --gog-tabs-disabled-opacity: var(--gog-disabled-opacity);
1450
+ --gog-tabs-focus-ring-width: var(--gog-focus-ring-width);
1451
+ --gog-tabs-focus-ring-offset: -2px;
1452
+ --gog-tabs-focus-ring-color: var(--gog-accent-color);
1453
+ --gog-tabs-panel-padding: var(--gog-space-md);
1454
+ --gog-tabs-panel-color: var(--gog-text-color);
1455
+ --gog-tabs-xsm-padding: 0.375rem 0.625rem;
1456
+ --gog-tabs-xsm-font-size: var(--gog-text-xs);
1457
+ --gog-tabs-sm-padding: 0.5rem 0.875rem;
1458
+ --gog-tabs-sm-font-size: var(--gog-text-sm);
1459
+ --gog-tabs-md-padding: 0.75rem 1.125rem;
1460
+ --gog-tabs-md-font-size: var(--gog-text-md);
1461
+ --gog-tabs-lg-padding: 1rem 1.5rem;
1462
+ --gog-tabs-lg-font-size: var(--gog-text-lg);
1463
+ --gog-tabs-slg-padding: 1.25rem 1.75rem;
1464
+ --gog-tabs-slg-font-size: var(--gog-text-xl);
1465
+
1466
+ /* ── Tag ──────────────────────────────────────────────────────────────────
1467
+ Like the button, the unsuffixed `--gog-tag-bg`/`-border`/`-color`/`-font-size`
1468
+ and friends stay undeclared so variant and size classes can fall through them. */
1469
+ --gog-tag-font-family: inherit;
1470
+ --gog-tag-default-color: var(--gog-info-color, var(--gog-muted-text-color));
1471
+ --gog-tag-success-color: var(--gog-success-color);
1472
+ --gog-tag-danger-color: var(--gog-danger-color);
1473
+ --gog-tag-warning-color: var(--gog-warning-color);
1474
+ --gog-tag-info-color: var(--gog-info-color);
1475
+ --gog-tag-bg-mix: 10%;
1476
+ --gog-tag-color-mix: 82%;
1477
+ --gog-tag-bg-base: var(--gog-surface-color);
1478
+ --gog-tag-color-base: black;
1479
+ --gog-tag-border-width: 1px;
1480
+ --gog-tag-border-style: solid;
1481
+ --gog-tag-inner-border-width: 1px;
1482
+ --gog-tag-font-weight: 600;
1483
+ --gog-tag-line-height: 1;
1484
+ --gog-tag-radius: max(var(--gog-radius), 2px);
1485
+ --gog-tag-pill-radius: 9999px;
1486
+
1487
+ --gog-tag-xsm-font-size: 0.6875rem;
1488
+ --gog-tag-xsm-padding-block: 0.1875rem;
1489
+ --gog-tag-xsm-padding-inline: 0.375rem;
1490
+ --gog-tag-xsm-gap: 0.1875rem;
1491
+ --gog-tag-xsm-icon-size: 0.6875rem;
1492
+
1493
+ --gog-tag-sm-font-size: 0.75rem;
1494
+ --gog-tag-sm-padding-block: 0.25rem;
1495
+ --gog-tag-sm-padding-inline: 0.5rem;
1496
+ --gog-tag-sm-gap: 0.25rem;
1497
+ --gog-tag-sm-icon-size: 0.75rem;
1498
+
1499
+ --gog-tag-md-font-size: 0.875rem;
1500
+ --gog-tag-md-padding-block: 0.375rem;
1501
+ --gog-tag-md-padding-inline: 0.75rem;
1502
+ --gog-tag-md-gap: 0.375rem;
1503
+ --gog-tag-md-icon-size: 0.875rem;
1504
+
1505
+ --gog-tag-lg-font-size: 1rem;
1506
+ --gog-tag-lg-padding-block: 0.5rem;
1507
+ --gog-tag-lg-padding-inline: 0.875rem;
1508
+ --gog-tag-lg-gap: 0.5rem;
1509
+ --gog-tag-lg-icon-size: 1rem;
1510
+
1511
+ --gog-tag-slg-font-size: 1.125rem;
1512
+ --gog-tag-slg-padding-block: 0.625rem;
1513
+ --gog-tag-slg-padding-inline: 1rem;
1514
+ --gog-tag-slg-gap: 0.625rem;
1515
+ --gog-tag-slg-icon-size: 1.125rem;
1516
+
1517
+ /* ── Toast ────────────────────────────────────────────────────────────────── */
1518
+ --gog-toast-font-family: var(--gog-font-body);
1519
+ --gog-toast-bg: var(--gog-surface-color);
1520
+ --gog-toast-color: var(--gog-text-color);
1521
+ --gog-toast-border: var(--gog-accent-color);
1522
+ --gog-toast-icon-color: var(--gog-accent-color);
1523
+ --gog-toast-success-color: var(--gog-success-color);
1524
+ --gog-toast-error-color: var(--gog-danger-color);
1525
+ --gog-toast-warning-color: var(--gog-accent-bright);
1526
+ --gog-toast-info-color: var(--gog-accent-color);
1527
+ --gog-toast-accent-width: 4px;
1528
+ --gog-toast-padding: 12px 14px;
1529
+ --gog-toast-radius: 0px;
1530
+ --gog-toast-content-gap: 10px;
1531
+ --gog-toast-main-gap: var(--gog-space-sm);
1532
+ --gog-toast-actions-gap: 6px;
1533
+ --gog-toast-message-font-size: var(--gog-text-sm);
1534
+ --gog-toast-message-line-height: 1.5;
1535
+ --gog-toast-icon-size: 1rem;
1536
+ --gog-toast-icon-line-height: 1.4;
1537
+ --gog-toast-action-padding: 0.25rem 0.5rem;
1538
+ --gog-toast-action-font-size: 0.75rem;
1539
+ --gog-toast-close-padding: 0.125rem 0.25rem;
1540
+ --gog-toast-close-font-size: 0.75rem;
1541
+ --gog-toast-progress-height: 3px;
1542
+ --gog-toast-progress-opacity: 30%;
1543
+ --gog-toast-transition-duration: 0.25s;
1544
+ --gog-toast-base-z: 100;
1545
+ /* Card-stack geometry */
1546
+ --gog-toast-stack-peek: 14px;
1547
+ --gog-toast-stack-scale-step: 0.06;
1548
+ --gog-toast-stack-expanded-gap: 84px;
1549
+ --gog-toast-stack-min-opacity: 0.4;
1550
+ --gog-toast-stack-opacity-step: 0.18;
1551
+ --gog-toast-stack-max-depth: 6;
1552
+
1553
+ /* ── Toggle ───────────────────────────────────────────────────────────────────
1554
+ A switch, not a checkbox: it announces as "switch, on". The outer label size reuses
1555
+ the `--gog-control-checkbox-*` scale so a toggle and a checkbox in the same form read
1556
+ at the same weight; the track/thumb geometry is its own, since a switch is wider than
1557
+ it is tall. */
1558
+ --gog-toggle-font-family: var(--gog-font-body);
1559
+ --gog-toggle-gap: var(--gog-space-sm);
1560
+ --gog-toggle-radius: 999px;
1561
+ --gog-toggle-border-width: 1px;
1562
+ --gog-toggle-border-style: solid;
1563
+ --gog-toggle-border-color: var(--gog-border-color);
1564
+ --gog-toggle-on-border-color: var(--gog-accent-color);
1565
+ --gog-toggle-track-off-bg: color-mix(in srgb, var(--gog-text-color) 18%, transparent);
1566
+ --gog-toggle-track-on-bg: var(--gog-accent-color);
1567
+ --gog-toggle-thumb-off-bg: var(--gog-surface-color);
1568
+ --gog-toggle-thumb-on-bg: var(--gog-accent-text-color, var(--gog-primary-color));
1569
+ --gog-toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
1570
+ --gog-toggle-thumb-inset: 2px;
1571
+ --gog-toggle-transition-duration: var(--gog-duration-base);
1572
+ --gog-toggle-disabled-opacity: var(--gog-disabled-opacity);
1573
+ --gog-toggle-label-color: var(--gog-text-color);
1574
+ --gog-toggle-label-line-height: 1.4;
1575
+ --gog-toggle-focus-ring-width: var(--gog-focus-ring-width);
1576
+ --gog-toggle-focus-ring-offset: var(--gog-focus-ring-offset);
1577
+ --gog-toggle-focus-ring-color: var(--gog-accent-color);
1578
+ /* In-track on/off wording */
1579
+ --gog-toggle-state-color: var(--gog-accent-text-color, var(--gog-primary-color));
1580
+ --gog-toggle-state-font-weight: 600;
1581
+ --gog-toggle-state-letter-spacing: 0.04em;
1582
+ --gog-toggle-state-padding-inline: 4px;
1583
+ --gog-toggle-state-offset: 6px;
1584
+ /* Gap between the wording and the thumb parked at the opposite end. The clearance itself
1585
+ (thumb size + this) is computed in the component stylesheet, not here: a `var(` to a
1586
+ size-class token is substituted where it is *declared*, so doing that calc on :root would
1587
+ freeze it to the md thumb and stop it scaling with `size`. */
1588
+ --gog-toggle-state-thumb-gap: 6px;
1589
+ --gog-toggle-xsm-track-width: 24px;
1590
+ --gog-toggle-xsm-track-height: 14px;
1591
+ --gog-toggle-xsm-thumb-size: 10px;
1592
+ --gog-toggle-xsm-label-size: var(--gog-control-checkbox-label-size-xsm);
1593
+ --gog-toggle-xsm-state-font-size: 0.5rem;
1594
+ --gog-toggle-sm-track-width: 32px;
1595
+ --gog-toggle-sm-track-height: 18px;
1596
+ --gog-toggle-sm-thumb-size: 14px;
1597
+ --gog-toggle-sm-label-size: var(--gog-control-checkbox-label-size-sm);
1598
+ --gog-toggle-sm-state-font-size: 0.5625rem;
1599
+ --gog-toggle-md-track-width: 44px;
1600
+ --gog-toggle-md-track-height: 24px;
1601
+ --gog-toggle-md-thumb-size: 18px;
1602
+ --gog-toggle-md-label-size: var(--gog-control-checkbox-label-size-md);
1603
+ --gog-toggle-md-state-font-size: 0.625rem;
1604
+ --gog-toggle-lg-track-width: 56px;
1605
+ --gog-toggle-lg-track-height: 32px;
1606
+ --gog-toggle-lg-thumb-size: 26px;
1607
+ --gog-toggle-lg-label-size: var(--gog-control-checkbox-label-size-lg);
1608
+ --gog-toggle-lg-state-font-size: 0.75rem;
1609
+ --gog-toggle-slg-track-width: 68px;
1610
+ --gog-toggle-slg-track-height: 40px;
1611
+ --gog-toggle-slg-thumb-size: 34px;
1612
+ --gog-toggle-slg-label-size: var(--gog-control-checkbox-label-size-slg);
1613
+ --gog-toggle-slg-state-font-size: 0.8125rem;
1614
+
1615
+ /* ── Tooltip ──────────────────────────────────────────────────────────────── */
1616
+ --gog-tooltip-font-family: var(--gog-font-body);
1617
+ --gog-tooltip-font-size: var(--gog-text-xs);
1618
+ --gog-tooltip-line-height: 1.4;
1619
+ --gog-tooltip-padding: 6px 10px;
1620
+ --gog-tooltip-radius: var(--gog-radius);
1621
+ --gog-tooltip-max-width: 280px;
1622
+ /* Caps the gog-scroll wrapping the bubble's content — see tooltip-bubble.component.html.
1623
+ A cap, not a fixed height: shorter content stays exactly as tall as it needs to be, this
1624
+ only stops something unusually long (a multi-paragraph TemplateRef) from growing to
1625
+ cover most of the viewport. */
1626
+ --gog-tooltip-max-height: 220px;
1627
+ /* Same "floating panel" recipe as gog-dialog's panel and gog-select's dropdown — a
1628
+ surface-colored box with a plain (not accent) border and the shared panel shadow —
1629
+ rather than an inverted dark/light bubble, so it reads as part of this site instead of
1630
+ a generic dark tooltip dropped on top of it. */
1631
+ --gog-tooltip-bg: var(--gog-surface-color);
1632
+ --gog-tooltip-color: var(--gog-text-color);
1633
+ --gog-tooltip-border-width: var(--gog-panel-border-width);
1634
+ --gog-tooltip-border-style: var(--gog-panel-border-style);
1635
+ --gog-tooltip-border-color: var(--gog-border-color);
1636
+ --gog-tooltip-shadow: var(--gog-panel-shadow);
1637
+ --gog-tooltip-arrow-size: 5px;
1638
+ /* Space kept between the trigger and the bubble. Read by the directive itself (not just
1639
+ CSS) to feed the placement math — see `readPxToken` in `tooltip.directive.ts`. */
1640
+ --gog-tooltip-gap: 8px;
1641
+ --gog-tooltip-z: 400;
1642
+ --gog-tooltip-transition-duration: var(--gog-duration-fast);
1643
+ }