@guildofgleks/ui 21.6.1 → 21.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +135 -55
- package/CHANGELOG.md +229 -0
- package/README.md +81 -15
- package/TOKENS.md +9 -9
- package/fesm2022/guildofgleks-ui.mjs +188 -1322
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/button.css +11 -32
- package/styles/presets/bevel.css +82 -0
- package/styles/presets/ledger.css +66 -0
- package/styles/presets/material.css +111 -0
- package/styles/presets/one-dark.css +27 -5
- package/styles/presets/one-light.css +17 -4
- package/styles/presets/parchment.css +63 -0
- package/styles/presets/parchment.fonts.css +29 -0
- package/styles/presets/primeng.css +121 -0
- package/styles/presets/slate.css +26 -8
- package/styles/presets/terminal.css +72 -0
- package/styles/presets/terminal.fonts.css +26 -0
- package/styles/theme.css +696 -592
- package/types/guildofgleks-ui.d.ts +35 -26
package/README.md
CHANGED
|
@@ -81,6 +81,13 @@ export class ExampleComponent {}
|
|
|
81
81
|
Outputs are prefixed `gog` (`gogClick`, `gogToggle`) so they never collide with native DOM
|
|
82
82
|
events. Inputs keep their natural names.
|
|
83
83
|
|
|
84
|
+
> **Don't write `(click)` on `gog-button`.** Its click handler is bound on the `<button>` inside
|
|
85
|
+
> its own template, not on the host — a native click still bubbles up through the host element, so
|
|
86
|
+
> a `(click)` listener there fires on every press, silently bypassing `debounce`'s throttling.
|
|
87
|
+
> `(gogClick)` is the one that only emits once the debounce window has passed; use it instead. This
|
|
88
|
+
> is specific to the `gog-button` component — `[gogButton]` on your own `<a>`/`<button>` has no
|
|
89
|
+
> debounce to bypass, so your own `(click)` on it works exactly as written.
|
|
90
|
+
|
|
84
91
|
**3. If you use dialogs or toasts, place their hosts once.** `DialogService.open()` and
|
|
85
92
|
`ToastService.show()` update state but render nothing without them:
|
|
86
93
|
|
|
@@ -116,8 +123,12 @@ want for a toast.
|
|
|
116
123
|
|
|
117
124
|
Every value the components paint with lives in `styles/theme.css`, in three layers:
|
|
118
125
|
|
|
119
|
-
**Foundation** — palette, type scale, spacing, motion
|
|
120
|
-
|
|
126
|
+
**Foundation** — palette, type scale, spacing, motion, and a small _character_ layer: corner
|
|
127
|
+
rounding (`--gog-radius`), border weight (`--gog-control-border-*` for form fields,
|
|
128
|
+
`--gog-panel-border-*` for raised surfaces, `--gog-border-*` for everything smaller and inline),
|
|
129
|
+
and emphasis casing/tracking (`--gog-text-transform`, `--gog-letter-spacing`). Override these to
|
|
130
|
+
restyle everything at once; component tokens derive from them, so a palette or character change
|
|
131
|
+
carries through on its own, with nothing to re-list per component.
|
|
121
132
|
|
|
122
133
|
**Component** — `--gog-<component>-*`, one block per component, named after the component you
|
|
123
134
|
write in markup (`gog-button` → `--gog-button-*`), to restyle a single component app-wide:
|
|
@@ -139,11 +150,11 @@ variant and size classes:
|
|
|
139
150
|
}
|
|
140
151
|
```
|
|
141
152
|
|
|
142
|
-
> **Renamed in 21.5.0.** Three prefixes were abbreviated and are now spelled
|
|
143
|
-
> `--gog-btn-*` → `--gog-button-*`, `--gog-confirm-*` → `--gog-confirmation-dialog-*`, and
|
|
144
|
-
> `--gog-ms-*` → `--gog-multiselect-*` (that one since 21.3.0). **The old spellings
|
|
145
|
-
>
|
|
146
|
-
>
|
|
153
|
+
> **Renamed in 21.5.0, removed in 21.7.0.** Three prefixes were abbreviated and are now spelled
|
|
154
|
+
> out: `--gog-btn-*` → `--gog-button-*`, `--gog-confirm-*` → `--gog-confirmation-dialog-*`, and
|
|
155
|
+
> `--gog-ms-*` → `--gog-multiselect-*` (that one since 21.3.0). **The old spellings no longer
|
|
156
|
+
> resolve.** If you set one of them, rename it — a `var()` reference to a name nothing declares
|
|
157
|
+
> doesn't fail your build, it just silently stops matching anything.
|
|
147
158
|
>
|
|
148
159
|
> One prefix that looks abbreviated and is not: **`--gog-input-*`**. It names the shared
|
|
149
160
|
> text-field block that both `gog-inputfield` and `gog-textarea` render (`.gog-input__field`), not
|
|
@@ -167,7 +178,7 @@ The active theme is a `data-theme` attribute on `:root`, managed by `ThemeServic
|
|
|
167
178
|
```ts
|
|
168
179
|
private readonly theme = inject(ThemeService);
|
|
169
180
|
this.theme.toggleTheme(); // light ⇄ dark
|
|
170
|
-
this.theme.setTheme('
|
|
181
|
+
this.theme.setTheme('one-dark'); // any preset you imported, or any name you declared in CSS
|
|
171
182
|
```
|
|
172
183
|
|
|
173
184
|
Out of the box it adopts whatever `data-theme` is already on the document, or `light`.
|
|
@@ -175,19 +186,64 @@ Persisting the choice and following the OS setting are opt-in:
|
|
|
175
186
|
|
|
176
187
|
```ts
|
|
177
188
|
provideGogConfig({
|
|
178
|
-
theme: { storageKey: 'app-theme', followSystem: true, darkTheme: '
|
|
189
|
+
theme: { storageKey: 'app-theme', followSystem: true, darkTheme: 'one-dark' },
|
|
179
190
|
});
|
|
180
191
|
```
|
|
181
192
|
|
|
182
|
-
A theme only declares what it changes — the derived layer re-resolves against whatever
|
|
183
|
-
|
|
184
|
-
|
|
193
|
+
A theme only declares what it changes — the derived layer re-resolves against whatever is in
|
|
194
|
+
scope, so a theme restyles every component without listing any of them. **Eleven declarations
|
|
195
|
+
are a whole visual identity**, not a recolour:
|
|
185
196
|
|
|
186
197
|
```css
|
|
187
|
-
|
|
188
|
-
|
|
198
|
+
[data-theme='compact'] {
|
|
199
|
+
/* Palette: every colour in the library re-derives from these. */
|
|
200
|
+
--gog-background-color: #f4f6f8;
|
|
201
|
+
--gog-surface-color: #ffffff;
|
|
202
|
+
--gog-text-color: #1e293b;
|
|
203
|
+
--gog-accent-color: #4f46e5;
|
|
204
|
+
|
|
205
|
+
/* Character: every corner, border, label and gap in the library re-derives from these. */
|
|
206
|
+
--gog-radius: 2px;
|
|
207
|
+
--gog-density: 0.85; /* one number = every padding and gap at once */
|
|
208
|
+
--gog-control-border-width: 1px;
|
|
209
|
+
--gog-text-transform: none;
|
|
210
|
+
--gog-letter-spacing: normal;
|
|
211
|
+
}
|
|
189
212
|
```
|
|
190
213
|
|
|
214
|
+
The palette half has always worked this way. The **character layer** (`--gog-radius`,
|
|
215
|
+
`--gog-density`, the border and casing tokens — all since 21.7.0) is the other half: it is what
|
|
216
|
+
lets a theme change the library's _shape_ — square or generous corners, thin borders,
|
|
217
|
+
sentence-case labels, tight or roomy spacing — still without naming a single component.
|
|
218
|
+
|
|
219
|
+
Nine presets ship alongside the built-in `light` and `dark`, each at `styles/presets/<name>.css`
|
|
220
|
+
and activated by `data-theme="<name>"`. All nine set palette **and** character:
|
|
221
|
+
|
|
222
|
+
| Preset | The identity |
|
|
223
|
+
| ----------------------- | ----------------------------------------------------------------------- |
|
|
224
|
+
| `slate` | soft modern — 12px corners, hairline borders, roomier than the default |
|
|
225
|
+
| `one-dark`, `one-light` | editor chrome — 4px corners, compact, sentence case; one UI, two tones |
|
|
226
|
+
| `material`, `primeng` | Material Design 3 and PrimeNG Aura, including their shape and density |
|
|
227
|
+
| `ledger` | administrative software — square corners, hard offset shadow, no motion |
|
|
228
|
+
| `terminal` | green phosphor — monospaced throughout, square, no motion |
|
|
229
|
+
| `bevel` | the early-web desktop — raised buttons, sunken fields, grey and navy |
|
|
230
|
+
| `parchment` | ink on laid paper — old-style serif, oxblood accent, roomy |
|
|
231
|
+
|
|
232
|
+
**No preset downloads a font.** Each sets a stack that resolves to a real system face — the
|
|
233
|
+
platform's own monospace for `terminal`, Tahoma/Verdana for `bevel`, Iowan Old Style/Palatino for
|
|
234
|
+
`parchment` — so importing a preset never adds a network request. Where a webfont makes a visible
|
|
235
|
+
difference, it lives in a separate opt-in file you import _after_ the preset:
|
|
236
|
+
|
|
237
|
+
```css
|
|
238
|
+
@import '@guildofgleks/ui/styles/presets/parchment.css';
|
|
239
|
+
@import '@guildofgleks/ui/styles/presets/parchment.fonts.css'; /* optional: EB Garamond */
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
`terminal.fonts.css` (IBM Plex Mono) is the other one. `material` and `primeng` additionally set
|
|
243
|
+
a few things the character layer has no vocabulary for (a pill button, a table's header font), and
|
|
244
|
+
`bevel` sets one (a button's bevel must disagree with a field's). `AGENTS.md` has the per-preset
|
|
245
|
+
detail and the full token list.
|
|
246
|
+
|
|
191
247
|
Fonts are left alone on purpose (system stacks, no webfont download). Add
|
|
192
248
|
`@guildofgleks/ui/styles/fonts.css` for the showcase's typography.
|
|
193
249
|
|
|
@@ -202,7 +258,7 @@ provideGogConfig({
|
|
|
202
258
|
dropdown: { appendToBody: true },
|
|
203
259
|
datepicker: { locale: 'de-DE', format: 'dd.MM.yyyy' },
|
|
204
260
|
ripple: { enabled: true }, // press feedback on every interactive surface at once
|
|
205
|
-
labels: { clear: '
|
|
261
|
+
labels: { clear: 'Löschen', selectAll: 'Alle auswählen' }, // translate the library once
|
|
206
262
|
});
|
|
207
263
|
```
|
|
208
264
|
|
|
@@ -216,6 +272,16 @@ parent rather than replacing it.
|
|
|
216
272
|
the animation frames, so a real off has to reach the TypeScript. It is **off by default**, and
|
|
217
273
|
every rippling component takes a `ripple` input that beats it in both directions.
|
|
218
274
|
|
|
275
|
+
**Under `prefers-reduced-motion: reduce` the ripple does not appear at all** — suppressed
|
|
276
|
+
outright rather than shortened, in CSS and in the controller, so no node is created and no
|
|
277
|
+
listener attached. If you turned it on and see nothing, check that setting before checking your
|
|
278
|
+
config.
|
|
279
|
+
|
|
280
|
+
That is the one place motion is removed entirely, and it is deliberate: a ripple is decoration,
|
|
281
|
+
so losing it costs a user nothing. Everywhere else the rule is the opposite — **reduced motion
|
|
282
|
+
drops the animation, never the information.** A chevron still turns to show a panel is open, a
|
|
283
|
+
toggle still moves; only the tween between the two states goes away.
|
|
284
|
+
|
|
219
285
|
Icons work the same way — 41 Lucide glyphs ship with the package, and your own register by name:
|
|
220
286
|
|
|
221
287
|
```ts
|
package/TOKENS.md
CHANGED
|
@@ -17,18 +17,18 @@ so a theme editor or docs page can enumerate the real tokens instead of copying
|
|
|
17
17
|
|
|
18
18
|
| Group | Tokens |
|
|
19
19
|
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
20
|
-
| Typography | `--gog-font-body`, `--gog-font-heading`, `--gog-font-mono`, `--gog-text-2xl`, `--gog-text-3xl`, `--gog-text-lg`, `--gog-text-md`, `--gog-text-sm`, `--gog-text-xl`, `--gog-text-xs`
|
|
21
|
-
| Spacing & geometry | `--gog-
|
|
20
|
+
| Typography | `--gog-font-body`, `--gog-font-heading`, `--gog-font-mono`, `--gog-letter-spacing`, `--gog-text-2xl`, `--gog-text-3xl`, `--gog-text-lg`, `--gog-text-md`, `--gog-text-sm`, `--gog-text-transform`, `--gog-text-xl`, `--gog-text-xs` |
|
|
21
|
+
| Spacing & geometry | `--gog-border-style`, `--gog-border-width`, `--gog-density`, `--gog-panel-border-style`, `--gog-panel-border-width`, `--gog-radius` |
|
|
22
22
|
| Motion | `--gog-duration-base`, `--gog-duration-fast`, `--gog-duration-slow`, `--gog-easing` |
|
|
23
23
|
| Focus & disabled | `--gog-disabled-opacity`, `--gog-focus-ring-offset`, `--gog-focus-ring-width` |
|
|
24
|
-
| Control metrics | `--gog-control-border-style`, `--gog-control-border-width`, `--gog-control-checkbox-box-size-lg`, `--gog-control-checkbox-box-size-md`, `--gog-control-checkbox-box-size-slg`, `--gog-control-checkbox-box-size-sm`, `--gog-control-checkbox-box-size-xsm`, `--gog-control-checkbox-icon-size-lg`, `--gog-control-checkbox-icon-size-md`, `--gog-control-checkbox-icon-size-slg`, `--gog-control-checkbox-icon-size-sm`, `--gog-control-checkbox-icon-size-xsm`, `--gog-control-checkbox-label-size-lg`, `--gog-control-checkbox-label-size-md`, `--gog-control-checkbox-label-size-slg`, `--gog-control-checkbox-label-size-sm`, `--gog-control-checkbox-label-size-xsm
|
|
25
|
-
| Field sizing (input / select / multiselect share one scale) | `--gog-field-
|
|
26
|
-
| Float label geometry (input / textarea / select / multiselect) | `--gog-field-float-label-in-top`, `--gog-field-float-label-over-
|
|
24
|
+
| Control metrics | `--gog-control-border-style`, `--gog-control-border-width`, `--gog-control-checkbox-box-size-lg`, `--gog-control-checkbox-box-size-md`, `--gog-control-checkbox-box-size-slg`, `--gog-control-checkbox-box-size-sm`, `--gog-control-checkbox-box-size-xsm`, `--gog-control-checkbox-icon-size-lg`, `--gog-control-checkbox-icon-size-md`, `--gog-control-checkbox-icon-size-slg`, `--gog-control-checkbox-icon-size-sm`, `--gog-control-checkbox-icon-size-xsm`, `--gog-control-checkbox-label-size-lg`, `--gog-control-checkbox-label-size-md`, `--gog-control-checkbox-label-size-slg`, `--gog-control-checkbox-label-size-sm`, `--gog-control-checkbox-label-size-xsm` |
|
|
25
|
+
| Field sizing (input / select / multiselect share one scale) | `--gog-field-icon-glyph`, `--gog-field-icon-glyph-sm`, `--gog-field-icon-glyph-xsm`, `--gog-field-slg-font-size` |
|
|
26
|
+
| Float label geometry (input / textarea / select / multiselect) | `--gog-field-float-label-in-top`, `--gog-field-float-label-over-reserve`, `--gog-field-float-label-reserve` |
|
|
27
27
|
| Icon & spinner | `--gog-icon-size`, `--gog-icon-stroke-width`, `--gog-spinner-rune-size`, `--gog-spinner-size-lg`, `--gog-spinner-size-md`, `--gog-spinner-size-slg`, `--gog-spinner-size-sm`, `--gog-spinner-size-xsm` |
|
|
28
|
-
| Toast stack | `--gog-toast-enter-distance`, `--gog-toast-
|
|
28
|
+
| Toast stack | `--gog-toast-enter-distance`, `--gog-toast-max-width`, `--gog-toast-min-width`, `--gog-toast-shadow`, `--gog-toast-z-index` |
|
|
29
29
|
| Overlay stacking | `--gog-dropdown-z`, `--gog-spinner-overlay-z` |
|
|
30
|
-
| Light palette (also the no-data-theme default) | `--gog-accent-bright`, `--gog-accent-color`, `--gog-accent-dim`, `--gog-accent-pale`, `--gog-accent-text-color`, `--gog-background-color`, `--gog-border-color`, `--gog-danger-color`, `--gog-hover-color`, `--gog-info-color`, `--gog-muted-text-color`, `--gog-panel-shadow`, `--gog-primary-color`, `--gog-secondary-color`, `--gog-spinner-overlay-bg`, `--gog-success-color`, `--gog-surface-color`, `--gog-text-color`, `--gog-warning-color`
|
|
31
|
-
| Derived foundation tokens | `--gog-field-lg-font-size`, `--gog-field-md-font-size`, `--gog-field-md-icon-offset`, `--gog-field-md-padding-x`, `--gog-field-md-padding-y`, `--gog-field-sm-font-size`, `--gog-field-xsm-font-size`, `--gog-panel-radius`
|
|
30
|
+
| Light palette (also the no-data-theme default) | `--gog-accent-bright`, `--gog-accent-color`, `--gog-accent-dim`, `--gog-accent-pale`, `--gog-accent-text-color`, `--gog-background-color`, `--gog-border-color`, `--gog-card-elevated-shadow`, `--gog-danger-color`, `--gog-hover-color`, `--gog-info-color`, `--gog-muted-text-color`, `--gog-panel-elevated-shadow`, `--gog-panel-shadow`, `--gog-primary-color`, `--gog-secondary-color`, `--gog-spinner-overlay-bg`, `--gog-success-color`, `--gog-surface-color`, `--gog-text-color`, `--gog-warning-color` |
|
|
31
|
+
| Derived foundation tokens | `--gog-control-checkbox-padding`, `--gog-control-icon-offset`, `--gog-control-padding-x`, `--gog-control-padding-y`, `--gog-elevated-surface-color`, `--gog-field-float-label-over-gap`, `--gog-field-lg-font-size`, `--gog-field-lg-icon-inset`, `--gog-field-lg-icon-offset`, `--gog-field-lg-padding-x`, `--gog-field-lg-padding-y`, `--gog-field-md-font-size`, `--gog-field-md-icon-inset`, `--gog-field-md-icon-offset`, `--gog-field-md-padding-x`, `--gog-field-md-padding-y`, `--gog-field-slg-icon-inset`, `--gog-field-slg-icon-offset`, `--gog-field-slg-padding-x`, `--gog-field-slg-padding-y`, `--gog-field-sm-font-size`, `--gog-field-sm-icon-inset`, `--gog-field-sm-icon-offset`, `--gog-field-sm-padding-x`, `--gog-field-sm-padding-y`, `--gog-field-xsm-font-size`, `--gog-field-xsm-icon-inset`, `--gog-field-xsm-icon-offset`, `--gog-field-xsm-padding-x`, `--gog-field-xsm-padding-y`, `--gog-panel-radius`, `--gog-space-10`, `--gog-space-12`, `--gog-space-14`, `--gog-space-16`, `--gog-space-18`, `--gog-space-2`, `--gog-space-20`, `--gog-space-24`, `--gog-space-28`, `--gog-space-2xl`, `--gog-space-32`, `--gog-space-4`, `--gog-space-48`, `--gog-space-6`, `--gog-space-8`, `--gog-space-lg`, `--gog-space-md`, `--gog-space-sm`, `--gog-space-xs`, `--gog-toast-gap`, `--gog-toast-stack-padding` |
|
|
32
32
|
| Accordion | `--gog-accordion-accent-color`, `--gog-accordion-body-bg`, `--gog-accordion-body-color`, `--gog-accordion-body-font-family`, `--gog-accordion-body-lift`, `--gog-accordion-body-line-height`, `--gog-accordion-body-radius`, `--gog-accordion-body-transition-duration`, `--gog-accordion-border-color`, `--gog-accordion-border-style`, `--gog-accordion-border-width`, `--gog-accordion-chevron-transition-duration`, `--gog-accordion-disabled-opacity`, `--gog-accordion-focus-ring-width`, `--gog-accordion-font-family`, `--gog-accordion-header-bg`, `--gog-accordion-header-gap`, `--gog-accordion-header-text-transform`, `--gog-accordion-hover-bg`, `--gog-accordion-hover-ring`, `--gog-accordion-lg-body-font-size`, `--gog-accordion-lg-body-line-height`, `--gog-accordion-lg-body-padding-bottom`, `--gog-accordion-lg-body-padding-top`, `--gog-accordion-lg-chevron-font-size`, `--gog-accordion-lg-chevron-size`, `--gog-accordion-lg-content-gap`, `--gog-accordion-lg-font-size`, `--gog-accordion-lg-letter-spacing`, `--gog-accordion-lg-padding-x`, `--gog-accordion-lg-padding-y`, `--gog-accordion-md-body-font-size`, `--gog-accordion-md-body-line-height`, `--gog-accordion-md-body-padding-bottom`, `--gog-accordion-md-body-padding-top`, `--gog-accordion-md-chevron-font-size`, `--gog-accordion-md-chevron-size`, `--gog-accordion-md-content-gap`, `--gog-accordion-md-font-size`, `--gog-accordion-md-letter-spacing`, `--gog-accordion-md-padding-x`, `--gog-accordion-md-padding-y`, `--gog-accordion-radius`, `--gog-accordion-slg-body-font-size`, `--gog-accordion-slg-body-line-height`, `--gog-accordion-slg-body-padding-bottom`, `--gog-accordion-slg-body-padding-top`, `--gog-accordion-slg-chevron-font-size`, `--gog-accordion-slg-chevron-size`, `--gog-accordion-slg-content-gap`, `--gog-accordion-slg-font-size`, `--gog-accordion-slg-letter-spacing`, `--gog-accordion-slg-padding-x`, `--gog-accordion-slg-padding-y`, `--gog-accordion-sm-body-font-size`, `--gog-accordion-sm-body-line-height`, `--gog-accordion-sm-body-padding-bottom`, `--gog-accordion-sm-body-padding-top`, `--gog-accordion-sm-chevron-font-size`, `--gog-accordion-sm-chevron-size`, `--gog-accordion-sm-content-gap`, `--gog-accordion-sm-font-size`, `--gog-accordion-sm-letter-spacing`, `--gog-accordion-sm-padding-x`, `--gog-accordion-sm-padding-y`, `--gog-accordion-text-color`, `--gog-accordion-transition-duration`, `--gog-accordion-xsm-body-font-size`, `--gog-accordion-xsm-body-line-height`, `--gog-accordion-xsm-body-padding-bottom`, `--gog-accordion-xsm-body-padding-top`, `--gog-accordion-xsm-chevron-font-size`, `--gog-accordion-xsm-chevron-size`, `--gog-accordion-xsm-content-gap`, `--gog-accordion-xsm-font-size`, `--gog-accordion-xsm-letter-spacing`, `--gog-accordion-xsm-padding-x`, `--gog-accordion-xsm-padding-y` |
|
|
33
33
|
| Collapsible | `--gog-collapsible-disabled-opacity`, `--gog-collapsible-max-height`, `--gog-collapsible-transition-duration` |
|
|
34
34
|
| Button | `--gog-button-active-scale`, `--gog-button-border-style`, `--gog-button-border-width`, `--gog-button-disabled-opacity`, `--gog-button-focus-ring-offset`, `--gog-button-focus-ring-width`, `--gog-button-font-family`, `--gog-button-font-weight`, `--gog-button-gap`, `--gog-button-ghost-bg`, `--gog-button-ghost-border`, `--gog-button-ghost-color`, `--gog-button-ghost-hover-bg`, `--gog-button-ghost-hover-color`, `--gog-button-ghost-hover-shadow`, `--gog-button-ghost-shadow`, `--gog-button-ghost-spinner-color`, `--gog-button-letter-spacing`, `--gog-button-lg-font-size`, `--gog-button-lg-padding`, `--gog-button-line-height`, `--gog-button-loading-opacity`, `--gog-button-md-font-size`, `--gog-button-md-padding`, `--gog-button-outline-bg`, `--gog-button-outline-border`, `--gog-button-outline-color`, `--gog-button-outline-hover-bg`, `--gog-button-outline-hover-color`, `--gog-button-outline-hover-shadow`, `--gog-button-outline-shadow`, `--gog-button-outline-spinner-color`, `--gog-button-primary-bg`, `--gog-button-primary-border`, `--gog-button-primary-color`, `--gog-button-primary-hover-bg`, `--gog-button-primary-hover-color`, `--gog-button-primary-hover-shadow`, `--gog-button-primary-shadow`, `--gog-button-primary-spinner-color`, `--gog-button-radius`, `--gog-button-secondary-bg`, `--gog-button-secondary-border`, `--gog-button-secondary-color`, `--gog-button-secondary-hover-bg`, `--gog-button-secondary-hover-color`, `--gog-button-secondary-hover-shadow`, `--gog-button-secondary-shadow`, `--gog-button-secondary-spinner-color`, `--gog-button-slg-font-size`, `--gog-button-slg-padding`, `--gog-button-sm-font-size`, `--gog-button-sm-padding`, `--gog-button-spinner-max-size`, `--gog-button-text-transform`, `--gog-button-transition-duration`, `--gog-button-xsm-font-size`, `--gog-button-xsm-padding` |
|
|
@@ -56,7 +56,7 @@ so a theme editor or docs page can enumerate the real tokens instead of copying
|
|
|
56
56
|
| Skeleton | `--gog-skeleton-base`, `--gog-skeleton-circle-size-lg`, `--gog-skeleton-circle-size-md`, `--gog-skeleton-circle-size-slg`, `--gog-skeleton-circle-size-sm`, `--gog-skeleton-circle-size-xsm`, `--gog-skeleton-line-gap`, `--gog-skeleton-line-height-lg`, `--gog-skeleton-line-height-md`, `--gog-skeleton-line-height-slg`, `--gog-skeleton-line-height-sm`, `--gog-skeleton-line-height-xsm`, `--gog-skeleton-line-radius`, `--gog-skeleton-pulse-duration`, `--gog-skeleton-pulse-min-opacity`, `--gog-skeleton-radius`, `--gog-skeleton-rect-height-lg`, `--gog-skeleton-rect-height-md`, `--gog-skeleton-rect-height-slg`, `--gog-skeleton-rect-height-sm`, `--gog-skeleton-rect-height-xsm`, `--gog-skeleton-shine`, `--gog-skeleton-short-line-width`, `--gog-skeleton-square-radius`, `--gog-skeleton-wave-duration` |
|
|
57
57
|
| Slider | `--gog-slider-auto-width`, `--gog-slider-disabled-opacity`, `--gog-slider-error-color`, `--gog-slider-error-font-family`, `--gog-slider-error-font-size`, `--gog-slider-fill-bg`, `--gog-slider-focus-ring`, `--gog-slider-focus-ring-width`, `--gog-slider-gap`, `--gog-slider-label-color`, `--gog-slider-label-font-family`, `--gog-slider-label-font-size`, `--gog-slider-label-letter-spacing`, `--gog-slider-label-text-transform`, `--gog-slider-range-color`, `--gog-slider-range-font-size`, `--gog-slider-thumb-bg`, `--gog-slider-thumb-border`, `--gog-slider-thumb-border-width`, `--gog-slider-thumb-glow-size`, `--gog-slider-thumb-radius`, `--gog-slider-thumb-shadow`, `--gog-slider-thumb-size`, `--gog-slider-track-area-height`, `--gog-slider-track-bg`, `--gog-slider-track-border-color`, `--gog-slider-track-border-style`, `--gog-slider-track-border-width`, `--gog-slider-track-height`, `--gog-slider-track-radius`, `--gog-slider-value-color`, `--gog-slider-value-font-family`, `--gog-slider-value-font-size`, `--gog-slider-value-min-width`, `--gog-slider-vertical-length` |
|
|
58
58
|
| Spinner | `--gog-spinner-arc-inner-color`, `--gog-spinner-arc-inner-dash`, `--gog-spinner-arc-inner-glow`, `--gog-spinner-arc-inner-opacity`, `--gog-spinner-arc-inner-pulse-opacity`, `--gog-spinner-arc-inner-stroke-compact`, `--gog-spinner-arc-outer-color`, `--gog-spinner-arc-outer-dash`, `--gog-spinner-arc-outer-glow`, `--gog-spinner-arc-outer-pulse-opacity`, `--gog-spinner-diamond-color`, `--gog-spinner-diamond-glow`, `--gog-spinner-diamond-opacity`, `--gog-spinner-glow-color`, `--gog-spinner-overlay-blur`, `--gog-spinner-overlay-fade-duration`, `--gog-spinner-pulse-duration`, `--gog-spinner-ring-duration`, `--gog-spinner-ring-glow`, `--gog-spinner-ring-padding`, `--gog-spinner-rune-color`, `--gog-spinner-rune-font-family`, `--gog-spinner-rune-glow`, `--gog-spinner-rune-pulse-opacity`, `--gog-spinner-spin-duration`, `--gog-spinner-spin-slow-duration`, `--gog-spinner-ticks-duration`, `--gog-spinner-track-color`, `--gog-spinner-track-opacity` |
|
|
59
|
-
| Table | `--gog-table-accent-bright`, `--gog-table-accent-color`, `--gog-table-border-color`, `--gog-table-border-style`, `--gog-table-border-width`, `--gog-table-empty-font-size`, `--gog-table-empty-padding`, `--gog-table-focus-ring`, `--gog-table-focus-ring-width`, `--gog-table-font-family`, `--gog-table-footer-gap`, `--gog-table-footer-min-height`, `--gog-table-gap`, `--gog-table-header-font-family`, `--gog-table-header-letter-spacing`, `--gog-table-header-text-transform`, `--gog-table-hover-bg`, `--gog-table-lg-padding-v`, `--gog-table-lg-td-font-size`, `--gog-table-lg-th-font-size`, `--gog-table-loading-opacity`, `--gog-table-loading-padding`, `--gog-table-md-padding-v`, `--gog-table-md-td-font-size`, `--gog-table-md-th-font-size`, `--gog-table-muted-color`, `--gog-table-num-col-width`, `--gog-table-num-font-size`, `--gog-table-numeric-font-family`, `--gog-table-padding-h`, `--gog-table-row-border-width`, `--gog-table-row-transition-duration`, `--gog-table-select-col-width`, `--gog-table-selected-bg`, `--gog-table-slg-padding-v`, `--gog-table-slg-td-font-size`, `--gog-table-slg-th-font-size`, `--gog-table-sm-padding-v`, `--gog-table-sm-td-font-size`, `--gog-table-sm-th-font-size`, `--gog-table-sort-icon-opacity`, `--gog-table-sort-icon-size`, `--gog-table-sort-icon-width`, `--gog-table-surface`, `--gog-table-text-color`, `--gog-table-th-inner-gap`, `--gog-table-total-font-size`, `--gog-table-total-letter-spacing`, `--gog-table-total-text-transform`, `--gog-table-xsm-padding-v`, `--gog-table-xsm-td-font-size`, `--gog-table-xsm-th-font-size`
|
|
59
|
+
| Table | `--gog-table-accent-bright`, `--gog-table-accent-color`, `--gog-table-border-color`, `--gog-table-border-style`, `--gog-table-border-width`, `--gog-table-empty-font-size`, `--gog-table-empty-padding`, `--gog-table-focus-ring`, `--gog-table-focus-ring-width`, `--gog-table-font-family`, `--gog-table-footer-gap`, `--gog-table-footer-min-height`, `--gog-table-gap`, `--gog-table-header-bg`, `--gog-table-header-font-family`, `--gog-table-header-letter-spacing`, `--gog-table-header-text-transform`, `--gog-table-hover-bg`, `--gog-table-lg-padding-v`, `--gog-table-lg-td-font-size`, `--gog-table-lg-th-font-size`, `--gog-table-loading-opacity`, `--gog-table-loading-padding`, `--gog-table-md-padding-v`, `--gog-table-md-td-font-size`, `--gog-table-md-th-font-size`, `--gog-table-muted-color`, `--gog-table-num-col-width`, `--gog-table-num-font-size`, `--gog-table-numeric-font-family`, `--gog-table-padding-h`, `--gog-table-row-border-width`, `--gog-table-row-transition-duration`, `--gog-table-select-col-width`, `--gog-table-selected-bg`, `--gog-table-slg-padding-v`, `--gog-table-slg-td-font-size`, `--gog-table-slg-th-font-size`, `--gog-table-sm-padding-v`, `--gog-table-sm-td-font-size`, `--gog-table-sm-th-font-size`, `--gog-table-sort-icon-opacity`, `--gog-table-sort-icon-size`, `--gog-table-sort-icon-width`, `--gog-table-surface`, `--gog-table-text-color`, `--gog-table-th-inner-gap`, `--gog-table-total-font-size`, `--gog-table-total-letter-spacing`, `--gog-table-total-text-transform`, `--gog-table-xsm-padding-v`, `--gog-table-xsm-td-font-size`, `--gog-table-xsm-th-font-size` |
|
|
60
60
|
| Tabs | `--gog-tabs-active-color`, `--gog-tabs-disabled-opacity`, `--gog-tabs-focus-ring-color`, `--gog-tabs-focus-ring-offset`, `--gog-tabs-focus-ring-width`, `--gog-tabs-font-family`, `--gog-tabs-font-weight`, `--gog-tabs-gap`, `--gog-tabs-header-border-color`, `--gog-tabs-header-border-style`, `--gog-tabs-header-border-width`, `--gog-tabs-hover-color`, `--gog-tabs-icon-size`, `--gog-tabs-indicator-color`, `--gog-tabs-indicator-radius`, `--gog-tabs-indicator-thickness`, `--gog-tabs-letter-spacing`, `--gog-tabs-lg-font-size`, `--gog-tabs-lg-padding`, `--gog-tabs-line-height`, `--gog-tabs-md-font-size`, `--gog-tabs-md-padding`, `--gog-tabs-panel-color`, `--gog-tabs-panel-padding`, `--gog-tabs-rest-bg`, `--gog-tabs-rest-color`, `--gog-tabs-slg-font-size`, `--gog-tabs-slg-padding`, `--gog-tabs-sm-font-size`, `--gog-tabs-sm-padding`, `--gog-tabs-tab-gap`, `--gog-tabs-text-transform`, `--gog-tabs-transition-duration`, `--gog-tabs-xsm-font-size`, `--gog-tabs-xsm-padding` |
|
|
61
61
|
| Tag | `--gog-tag-bg-base`, `--gog-tag-bg-mix`, `--gog-tag-border-style`, `--gog-tag-border-width`, `--gog-tag-color-base`, `--gog-tag-color-mix`, `--gog-tag-danger-color`, `--gog-tag-default-color`, `--gog-tag-font-family`, `--gog-tag-font-weight`, `--gog-tag-info-color`, `--gog-tag-inner-border-width`, `--gog-tag-lg-font-size`, `--gog-tag-lg-gap`, `--gog-tag-lg-icon-size`, `--gog-tag-lg-padding-block`, `--gog-tag-lg-padding-inline`, `--gog-tag-line-height`, `--gog-tag-md-font-size`, `--gog-tag-md-gap`, `--gog-tag-md-icon-size`, `--gog-tag-md-padding-block`, `--gog-tag-md-padding-inline`, `--gog-tag-pill-radius`, `--gog-tag-radius`, `--gog-tag-slg-font-size`, `--gog-tag-slg-gap`, `--gog-tag-slg-icon-size`, `--gog-tag-slg-padding-block`, `--gog-tag-slg-padding-inline`, `--gog-tag-sm-font-size`, `--gog-tag-sm-gap`, `--gog-tag-sm-icon-size`, `--gog-tag-sm-padding-block`, `--gog-tag-sm-padding-inline`, `--gog-tag-success-color`, `--gog-tag-warning-color`, `--gog-tag-xsm-font-size`, `--gog-tag-xsm-gap`, `--gog-tag-xsm-icon-size`, `--gog-tag-xsm-padding-block`, `--gog-tag-xsm-padding-inline` |
|
|
62
62
|
| Toast | `--gog-toast-accent-width`, `--gog-toast-action-font-size`, `--gog-toast-action-padding`, `--gog-toast-actions-gap`, `--gog-toast-base-z`, `--gog-toast-bg`, `--gog-toast-border`, `--gog-toast-close-font-size`, `--gog-toast-close-padding`, `--gog-toast-color`, `--gog-toast-content-gap`, `--gog-toast-error-color`, `--gog-toast-font-family`, `--gog-toast-icon-color`, `--gog-toast-icon-line-height`, `--gog-toast-icon-size`, `--gog-toast-info-color`, `--gog-toast-main-gap`, `--gog-toast-message-font-size`, `--gog-toast-message-line-height`, `--gog-toast-padding`, `--gog-toast-progress-height`, `--gog-toast-progress-opacity`, `--gog-toast-radius`, `--gog-toast-stack-expanded-gap`, `--gog-toast-stack-max-depth`, `--gog-toast-stack-min-opacity`, `--gog-toast-stack-opacity-step`, `--gog-toast-stack-peek`, `--gog-toast-stack-scale-step`, `--gog-toast-success-color`, `--gog-toast-transition-duration`, `--gog-toast-warning-color` |
|