@guildofgleks/ui 21.5.2 → 21.6.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.
Files changed (15) hide show
  1. package/AGENTS.md +221 -29
  2. package/CHANGELOG.md +232 -1
  3. package/README.md +31 -5
  4. package/TOKENS.md +3 -0
  5. package/fesm2022/guildofgleks-ui.mjs +963 -76
  6. package/fesm2022/guildofgleks-ui.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/styles/button.css +19 -2
  9. package/styles/index.css +5 -0
  10. package/styles/menu.css +13 -3
  11. package/styles/ripple.css +94 -0
  12. package/styles/surfaces.css +151 -0
  13. package/styles/theme.css +132 -0
  14. package/styles/utilities.css +37 -1
  15. package/types/guildofgleks-ui.d.ts +377 -16
package/README.md CHANGED
@@ -59,6 +59,10 @@ use — without it they render unstyled.
59
59
  ]
60
60
  ```
61
61
 
62
+ It brings its own `box-sizing: border-box`, scoped to the elements the library renders, so the
63
+ components size correctly whether or not your app has a global reset — since 21.6.0. Your own
64
+ reset is untouched either way, and a single class of specificity means your own styles still win.
65
+
62
66
  **2. Import components where you use them** — each is standalone:
63
67
 
64
68
  ```ts
@@ -145,6 +149,13 @@ variant and size classes:
145
149
  > text-field block that both `gog-inputfield` and `gog-textarea` render (`.gog-input__field`), not
146
150
  > the `gog-inputfield` component — the two are meant to restyle together from one token set, so
147
151
  > there is no `--gog-inputfield-*` and there will not be one.
152
+ >
153
+ > And one prefix that means two things on purpose: **`--gog-panel-*`**. Four of them —
154
+ > `--gog-panel-radius`, `--gog-panel-shadow`, `--gog-panel-border-width`,
155
+ > `--gog-panel-border-style` — are the _foundation_ surface tier that dialogs, dropdown panels and
156
+ > tooltips read, and the `gog-panel` component reads them too rather than owning a fourth copy of
157
+ > "what a raised surface looks like here". Change one and every raised surface follows, which is
158
+ > the intent; the rest of `--gog-panel-*` belongs to the component alone.
148
159
 
149
160
  Every group and token name is in **[`TOKENS.md`](./TOKENS.md)**, generated from `theme.css` so it
150
161
  cannot drift, and available at runtime as `GOG_TOKEN_GROUPS`.
@@ -190,14 +201,20 @@ provideGogConfig({
190
201
  control: { size: 'sm', errorDisplay: 'auto', clearable: true },
191
202
  dropdown: { appendToBody: true },
192
203
  datepicker: { locale: 'de-DE', format: 'dd.MM.yyyy' },
204
+ ripple: { enabled: true }, // press feedback on every interactive surface at once
193
205
  labels: { clear: 'Очистить', selectAll: 'Выбрать все' }, // translate the library once
194
206
  });
195
207
  ```
196
208
 
197
209
  Keys: `control`, `dropdown`, `floatLabel`, `datepicker`, `autocomplete`, `inputfield`, `textarea`,
198
- `tooltip`, `scroll`, `button`, `paginator`, `toast`, `theme`, `labels`. An instance's own input
199
- always wins, and providing the config again lower in the injector tree layers onto the parent
200
- rather than replacing it.
210
+ `tooltip`, `scroll`, `button`, `ripple`, `paginator`, `toast`, `theme`, `labels`. An instance's own
211
+ input always wins, and providing the config again lower in the injector tree layers onto the
212
+ parent rather than replacing it.
213
+
214
+ `ripple` is the one visual default that is not a token, and the exception is deliberate:
215
+ `--gog-ripple-opacity: 0` would hide the wash but still pay for the DOM node, the listeners and
216
+ the animation frames, so a real off has to reach the TypeScript. It is **off by default**, and
217
+ every rippling component takes a `ripple` input that beats it in both directions.
201
218
 
202
219
  Icons work the same way — 41 Lucide glyphs ship with the package, and your own register by name:
203
220
 
@@ -239,13 +256,14 @@ dropdowns, always for the menu.
239
256
  | Form controls | `gog-inputfield`, `gog-textarea`, `gog-select`, `gog-multiselect`, `gog-autocomplete`, `gog-checkbox`, `gog-radio-group`, `gog-toggle`, `gog-slider`, `gog-datepicker`, `gog-calendar`, `gog-button-toggle-group` |
240
257
  | Actions | `gog-button`, `gog-chip` |
241
258
  | Data | `gog-table` (+ `gog-column`), `gog-paginator`, `gog-tag` |
242
- | Layout & disclosure | `gog-accordion`, `gog-tabs` (+ `gog-tab`), `gog-collapsible`, `gog-divider`, `gog-scroll` |
259
+ | Layout & disclosure | `gog-accordion`, `gog-tabs` (+ `gog-tab`), `gog-collapsible`, `gog-card`, `gog-panel`, `gog-divider`, `gog-scroll` |
243
260
  | Overlays | `gog-dialog`, `gog-confirmation-dialog`, `gog-toast` (+ `gog-toast-container`), `gog-menu` (+ `gogMenuTrigger` / `gogMenuItem`) |
244
261
  | Feedback | `gog-spinner`, `gog-spinner-overlay`, `gog-progressbar`, `gog-skeleton` |
245
262
  | Content | `gog-icon` |
246
263
 
247
264
  **Directives:** `gogButton` (a link that looks like a button), `gogTooltip`, `gogBadge`,
248
- `gogCollapsibleTrigger`, `gogCollapsibleContent`.
265
+ `gogRipple` (a press wash on any element), `gogCollapsibleTrigger`, `gogCollapsibleContent`,
266
+ `gogCardLink` (a link the whole card activates).
249
267
  **Services:** `DialogService`, `ToastService`, `ThemeService`.
250
268
 
251
269
  Seventeen more directives go on markup you own rather than configuring a component through an
@@ -266,6 +284,14 @@ A few things worth knowing before you reach for a workaround:
266
284
  They also generate their own `id`, so labels and error messages are wired up without `inputId`.
267
285
  - **`gog-collapsible` is headless** — no markup of its own. Project any element as the trigger and
268
286
  any element as the panel.
287
+ - **A clickable `gog-card` has no `interactive` input.** Put `gogCardLink` on the `<a>` the card is
288
+ about — usually the one in its heading — and the whole surface activates that link, keyboard,
289
+ middle-click and `routerLink` included. Same reasoning as `gog-button` above: the element stays
290
+ yours. Anything else focusable in the card keeps receiving its own clicks.
291
+ - **`gog-panel` shares the `--gog-panel-*` prefix with the foundation surface tier.**
292
+ `--gog-panel-radius`, `--gog-panel-shadow` and the border pair are the tokens dialogs and
293
+ dropdown panels already read, so a theme's idea of a raised surface reaches the component for
294
+ free. Its own family (background, padding, heading, toggle, footer) sits alongside them.
269
295
  - **`[(ngModel)]` is untested.** The library never imports `FormsModule`; use Reactive Forms.
270
296
 
271
297
  ## Documentation
package/TOKENS.md CHANGED
@@ -34,6 +34,7 @@ so a theme editor or docs page can enumerate the real tokens instead of copying
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` |
35
35
  | Button toggle group | `--gog-button-toggle-border-color`, `--gog-button-toggle-border-style`, `--gog-button-toggle-border-width`, `--gog-button-toggle-disabled-opacity`, `--gog-button-toggle-focus-ring-color`, `--gog-button-toggle-focus-ring-offset`, `--gog-button-toggle-focus-ring-width`, `--gog-button-toggle-font-family`, `--gog-button-toggle-font-weight`, `--gog-button-toggle-gap`, `--gog-button-toggle-hover-bg`, `--gog-button-toggle-hover-color`, `--gog-button-toggle-icon-size`, `--gog-button-toggle-letter-spacing`, `--gog-button-toggle-line-height`, `--gog-button-toggle-radius`, `--gog-button-toggle-rest-bg`, `--gog-button-toggle-rest-color`, `--gog-button-toggle-selected-bg`, `--gog-button-toggle-selected-border-color`, `--gog-button-toggle-selected-color`, `--gog-button-toggle-separated-gap`, `--gog-button-toggle-text-transform`, `--gog-button-toggle-transition-duration` |
36
36
  | Calendar (the month grid inside gog-datepicker, and gog-calendar on its own) | `--gog-calendar-action-padding`, `--gog-calendar-color`, `--gog-calendar-day-border-style`, `--gog-calendar-day-border-width`, `--gog-calendar-day-hover-bg`, `--gog-calendar-day-outside-color`, `--gog-calendar-day-radius`, `--gog-calendar-day-rest-bg`, `--gog-calendar-day-rest-color`, `--gog-calendar-disabled-opacity`, `--gog-calendar-divider-color`, `--gog-calendar-divider-style`, `--gog-calendar-divider-width`, `--gog-calendar-focus-ring-color`, `--gog-calendar-focus-ring-offset`, `--gog-calendar-focus-ring-width`, `--gog-calendar-font-family`, `--gog-calendar-footer-gap`, `--gog-calendar-header-gap`, `--gog-calendar-header-margin`, `--gog-calendar-lg-day-size`, `--gog-calendar-lg-font-size`, `--gog-calendar-max-width`, `--gog-calendar-md-day-size`, `--gog-calendar-md-font-size`, `--gog-calendar-months-gap`, `--gog-calendar-nav-bg`, `--gog-calendar-nav-color`, `--gog-calendar-nav-hover-bg`, `--gog-calendar-nav-hover-color`, `--gog-calendar-nav-icon-overlap`, `--gog-calendar-nav-icon-size`, `--gog-calendar-nav-radius`, `--gog-calendar-nav-size`, `--gog-calendar-padding`, `--gog-calendar-range-bg`, `--gog-calendar-range-color`, `--gog-calendar-selected-bg`, `--gog-calendar-selected-color`, `--gog-calendar-selected-font-weight`, `--gog-calendar-slg-day-size`, `--gog-calendar-slg-font-size`, `--gog-calendar-sm-day-size`, `--gog-calendar-sm-font-size`, `--gog-calendar-time-gap`, `--gog-calendar-time-input-bg`, `--gog-calendar-time-input-padding`, `--gog-calendar-time-input-width`, `--gog-calendar-time-margin`, `--gog-calendar-title-color`, `--gog-calendar-title-font-weight`, `--gog-calendar-today-border-color`, `--gog-calendar-today-font-weight`, `--gog-calendar-transition-duration`, `--gog-calendar-weekday-color`, `--gog-calendar-weekday-font-size`, `--gog-calendar-weekday-font-weight`, `--gog-calendar-weekday-padding`, `--gog-calendar-weekday-text-transform`, `--gog-calendar-xsm-day-size`, `--gog-calendar-xsm-font-size` |
37
+ | Card | `--gog-card-border-style`, `--gog-card-border-width`, `--gog-card-color`, `--gog-card-disabled-opacity`, `--gog-card-elevated-bg`, `--gog-card-elevated-border-color`, `--gog-card-elevated-shadow`, `--gog-card-filled-bg`, `--gog-card-filled-border-color`, `--gog-card-filled-shadow`, `--gog-card-focus-ring`, `--gog-card-focus-ring-offset`, `--gog-card-focus-ring-width`, `--gog-card-font-family`, `--gog-card-footer-border-color`, `--gog-card-footer-gap`, `--gog-card-footer-padding-top`, `--gog-card-heading-color`, `--gog-card-heading-font-family`, `--gog-card-heading-font-size`, `--gog-card-heading-font-weight`, `--gog-card-heading-line-height`, `--gog-card-hover-border-color`, `--gog-card-hover-shadow`, `--gog-card-lg-gap`, `--gog-card-lg-padding-x`, `--gog-card-lg-padding-y`, `--gog-card-md-gap`, `--gog-card-md-padding-x`, `--gog-card-md-padding-y`, `--gog-card-outlined-bg`, `--gog-card-outlined-border-color`, `--gog-card-outlined-shadow`, `--gog-card-radius`, `--gog-card-slg-gap`, `--gog-card-slg-padding-x`, `--gog-card-slg-padding-y`, `--gog-card-sm-gap`, `--gog-card-sm-padding-x`, `--gog-card-sm-padding-y`, `--gog-card-transition-duration`, `--gog-card-xsm-gap`, `--gog-card-xsm-padding-x`, `--gog-card-xsm-padding-y` |
37
38
  | Checkbox | `--gog-checkbox-bg`, `--gog-checkbox-border-color`, `--gog-checkbox-border-style`, `--gog-checkbox-border-width`, `--gog-checkbox-checked-bg`, `--gog-checkbox-checked-border`, `--gog-checkbox-dash-height`, `--gog-checkbox-dash-radius`, `--gog-checkbox-dash-width-ratio`, `--gog-checkbox-disabled-opacity`, `--gog-checkbox-focus-ring`, `--gog-checkbox-focus-ring-offset`, `--gog-checkbox-focus-ring-width`, `--gog-checkbox-font-family`, `--gog-checkbox-gap`, `--gog-checkbox-icon-color`, `--gog-checkbox-label-color`, `--gog-checkbox-label-line-height`, `--gog-checkbox-radius`, `--gog-checkbox-transition-duration` |
38
39
  | Radio group | `--gog-radio-bg`, `--gog-radio-border-color`, `--gog-radio-border-style`, `--gog-radio-border-width`, `--gog-radio-checked-bg`, `--gog-radio-checked-border`, `--gog-radio-disabled-opacity`, `--gog-radio-dot-color`, `--gog-radio-dot-size-ratio`, `--gog-radio-error-color`, `--gog-radio-error-font-size`, `--gog-radio-focus-ring`, `--gog-radio-focus-ring-offset`, `--gog-radio-focus-ring-width`, `--gog-radio-font-family`, `--gog-radio-gap`, `--gog-radio-group-gap`, `--gog-radio-group-label-color`, `--gog-radio-group-label-size`, `--gog-radio-group-option-gap`, `--gog-radio-group-option-gap-horizontal`, `--gog-radio-label-color`, `--gog-radio-label-line-height`, `--gog-radio-transition-duration` |
39
40
  | Chip | `--gog-chip-avatar-inset-ratio`, `--gog-chip-bg`, `--gog-chip-border`, `--gog-chip-border-style`, `--gog-chip-border-width`, `--gog-chip-color`, `--gog-chip-disabled-opacity`, `--gog-chip-focus-ring-offset`, `--gog-chip-focus-ring-width`, `--gog-chip-font-family`, `--gog-chip-font-weight`, `--gog-chip-hover-bg`, `--gog-chip-lg-avatar-size`, `--gog-chip-lg-font-size`, `--gog-chip-lg-gap`, `--gog-chip-lg-icon-size`, `--gog-chip-lg-padding-block`, `--gog-chip-lg-padding-inline`, `--gog-chip-lg-remove-size`, `--gog-chip-line-height`, `--gog-chip-md-avatar-size`, `--gog-chip-md-font-size`, `--gog-chip-md-gap`, `--gog-chip-md-icon-size`, `--gog-chip-md-padding-block`, `--gog-chip-md-padding-inline`, `--gog-chip-md-remove-size`, `--gog-chip-pill-radius`, `--gog-chip-radius`, `--gog-chip-remove-color`, `--gog-chip-remove-hover-color`, `--gog-chip-remove-inset-ratio`, `--gog-chip-remove-scale`, `--gog-chip-slg-avatar-size`, `--gog-chip-slg-font-size`, `--gog-chip-slg-gap`, `--gog-chip-slg-icon-size`, `--gog-chip-slg-padding-block`, `--gog-chip-slg-padding-inline`, `--gog-chip-slg-remove-size`, `--gog-chip-sm-avatar-size`, `--gog-chip-sm-font-size`, `--gog-chip-sm-gap`, `--gog-chip-sm-icon-size`, `--gog-chip-sm-padding-block`, `--gog-chip-sm-padding-inline`, `--gog-chip-sm-remove-size`, `--gog-chip-xsm-avatar-size`, `--gog-chip-xsm-font-size`, `--gog-chip-xsm-gap`, `--gog-chip-xsm-icon-size`, `--gog-chip-xsm-padding-block`, `--gog-chip-xsm-padding-inline`, `--gog-chip-xsm-remove-size` |
@@ -47,7 +48,9 @@ so a theme editor or docs page can enumerate the real tokens instead of copying
47
48
  | Multiselect | `--gog-multiselect-actions-gap`, `--gog-multiselect-actions-inset`, `--gog-multiselect-arrow-icon-ratio`, `--gog-multiselect-arrow-transition-duration`, `--gog-multiselect-border-color`, `--gog-multiselect-checkbox-bg`, `--gog-multiselect-checkbox-border`, `--gog-multiselect-checkbox-checked-bg`, `--gog-multiselect-checkbox-checked-color`, `--gog-multiselect-clear-icon-ratio`, `--gog-multiselect-clear-radius`, `--gog-multiselect-controls-gap`, `--gog-multiselect-controls-padding`, `--gog-multiselect-disabled-opacity`, `--gog-multiselect-error-color`, `--gog-multiselect-error-font-size`, `--gog-multiselect-error-offset`, `--gog-multiselect-field-bg`, `--gog-multiselect-field-border`, `--gog-multiselect-field-border-style`, `--gog-multiselect-field-border-width`, `--gog-multiselect-field-color`, `--gog-multiselect-filter-border-color`, `--gog-multiselect-filter-border-style`, `--gog-multiselect-filter-border-width`, `--gog-multiselect-filter-empty-color`, `--gog-multiselect-filter-empty-padding`, `--gog-multiselect-filter-input-bg`, `--gog-multiselect-filter-input-border`, `--gog-multiselect-filter-input-color`, `--gog-multiselect-filter-input-padding-x`, `--gog-multiselect-filter-input-padding-y`, `--gog-multiselect-filter-input-radius`, `--gog-multiselect-filter-padding`, `--gog-multiselect-float-label-in-top`, `--gog-multiselect-float-label-over-gap`, `--gog-multiselect-float-label-over-reserve`, `--gog-multiselect-float-label-reserve`, `--gog-multiselect-focus-border`, `--gog-multiselect-focus-glow`, `--gog-multiselect-focus-ring`, `--gog-multiselect-focus-ring-offset`, `--gog-multiselect-focus-ring-width`, `--gog-multiselect-font-family`, `--gog-multiselect-gap`, `--gog-multiselect-label-color`, `--gog-multiselect-label-font-family`, `--gog-multiselect-label-font-size`, `--gog-multiselect-label-letter-spacing`, `--gog-multiselect-label-text-transform`, `--gog-multiselect-mark-icon-ratio`, `--gog-multiselect-mark-size-ratio`, `--gog-multiselect-min-width`, `--gog-multiselect-option-color`, `--gog-multiselect-option-disabled-opacity`, `--gog-multiselect-option-gap`, `--gog-multiselect-option-gap-inline`, `--gog-multiselect-option-height`, `--gog-multiselect-option-hover-bg`, `--gog-multiselect-option-radius`, `--gog-multiselect-option-transition-duration`, `--gog-multiselect-options-padding`, `--gog-multiselect-overflow-color`, `--gog-multiselect-overflow-font-size`, `--gog-multiselect-overflow-gap`, `--gog-multiselect-panel-bg`, `--gog-multiselect-panel-border`, `--gog-multiselect-panel-max-height`, `--gog-multiselect-panel-max-width`, `--gog-multiselect-panel-offset`, `--gog-multiselect-panel-shadow`, `--gog-multiselect-placeholder-color`, `--gog-multiselect-radius`, `--gog-multiselect-transition-duration`, `--gog-multiselect-value-color` |
48
49
  | Menu | `--gog-menu-bg`, `--gog-menu-border-color`, `--gog-menu-border-style`, `--gog-menu-border-width`, `--gog-menu-focus-ring`, `--gog-menu-focus-ring-width`, `--gog-menu-font-family`, `--gog-menu-gap`, `--gog-menu-item-color`, `--gog-menu-item-disabled-color`, `--gog-menu-item-disabled-opacity`, `--gog-menu-item-font-size`, `--gog-menu-item-gap`, `--gog-menu-item-hover-bg`, `--gog-menu-item-hover-color`, `--gog-menu-item-icon-size`, `--gog-menu-item-line-height`, `--gog-menu-item-padding`, `--gog-menu-item-radius`, `--gog-menu-max-height`, `--gog-menu-max-width`, `--gog-menu-min-width`, `--gog-menu-offset`, `--gog-menu-padding`, `--gog-menu-radius`, `--gog-menu-shadow`, `--gog-menu-transition-duration`, `--gog-menu-z` |
49
50
  | Paginator | `--gog-paginator-ellipsis-color`, `--gog-paginator-ellipsis-font-family`, `--gog-paginator-ellipsis-font-size`, `--gog-paginator-ellipsis-min-width`, `--gog-paginator-gap`, `--gog-paginator-page-size-min-width` |
51
+ | Panel | `--gog-panel-chevron-size`, `--gog-panel-color`, `--gog-panel-disabled-opacity`, `--gog-panel-elevated-bg`, `--gog-panel-elevated-border-color`, `--gog-panel-filled-bg`, `--gog-panel-filled-border-color`, `--gog-panel-filled-shadow`, `--gog-panel-focus-ring`, `--gog-panel-focus-ring-offset`, `--gog-panel-focus-ring-width`, `--gog-panel-font-family`, `--gog-panel-footer-border-color`, `--gog-panel-footer-gap`, `--gog-panel-footer-padding-top`, `--gog-panel-header-gap`, `--gog-panel-heading-color`, `--gog-panel-heading-font-family`, `--gog-panel-heading-font-size`, `--gog-panel-heading-font-weight`, `--gog-panel-heading-line-height`, `--gog-panel-lg-gap`, `--gog-panel-lg-padding-x`, `--gog-panel-lg-padding-y`, `--gog-panel-md-gap`, `--gog-panel-md-padding-x`, `--gog-panel-md-padding-y`, `--gog-panel-outlined-bg`, `--gog-panel-outlined-border-color`, `--gog-panel-outlined-shadow`, `--gog-panel-slg-gap`, `--gog-panel-slg-padding-x`, `--gog-panel-slg-padding-y`, `--gog-panel-sm-gap`, `--gog-panel-sm-padding-x`, `--gog-panel-sm-padding-y`, `--gog-panel-toggle-color`, `--gog-panel-toggle-hover-bg`, `--gog-panel-toggle-radius`, `--gog-panel-toggle-size`, `--gog-panel-transition-duration`, `--gog-panel-xsm-gap`, `--gog-panel-xsm-padding-x`, `--gog-panel-xsm-padding-y` |
50
52
  | Progressbar | `--gog-progressbar-accent-bg`, `--gog-progressbar-accent-buffer-bg`, `--gog-progressbar-danger-bg`, `--gog-progressbar-danger-buffer-bg`, `--gog-progressbar-indeterminate-duration`, `--gog-progressbar-indeterminate-easing`, `--gog-progressbar-info-bg`, `--gog-progressbar-info-buffer-bg`, `--gog-progressbar-lg-height`, `--gog-progressbar-md-height`, `--gog-progressbar-radius`, `--gog-progressbar-slg-height`, `--gog-progressbar-sm-height`, `--gog-progressbar-stripe-color`, `--gog-progressbar-stripe-size`, `--gog-progressbar-success-bg`, `--gog-progressbar-success-buffer-bg`, `--gog-progressbar-track-base-bg`, `--gog-progressbar-transition-duration`, `--gog-progressbar-value-color`, `--gog-progressbar-value-font-family`, `--gog-progressbar-value-font-size`, `--gog-progressbar-value-gap`, `--gog-progressbar-value-min-width`, `--gog-progressbar-warning-bg`, `--gog-progressbar-warning-buffer-bg`, `--gog-progressbar-xsm-height` |
53
+ | Ripple (the `gogRipple` directive; its classes live in ripple.css) | `--gog-ripple-color`, `--gog-ripple-easing`, `--gog-ripple-enter-duration`, `--gog-ripple-exit-duration`, `--gog-ripple-opacity` |
51
54
  | Scroll | `--gog-scroll-corner-bg`, `--gog-scroll-fade-duration`, `--gog-scroll-focus-ring`, `--gog-scroll-focus-ring-width`, `--gog-scroll-normal-thumb-hit-padding`, `--gog-scroll-normal-thumb-min-size`, `--gog-scroll-normal-track-width`, `--gog-scroll-thin-thumb-hit-padding`, `--gog-scroll-thin-thumb-min-size`, `--gog-scroll-thin-track-width`, `--gog-scroll-thumb-active-bg`, `--gog-scroll-thumb-bg`, `--gog-scroll-thumb-hover-bg`, `--gog-scroll-thumb-inset`, `--gog-scroll-thumb-radius`, `--gog-scroll-track-bg`, `--gog-scroll-track-radius` |
52
55
  | Select | `--gog-select-chevron-color`, `--gog-select-chevron-icon-ratio`, `--gog-select-chevron-inset`, `--gog-select-clear-color`, `--gog-select-clear-gap`, `--gog-select-clear-hover-color`, `--gog-select-clear-icon-ratio`, `--gog-select-clear-radius`, `--gog-select-control-gap`, `--gog-select-disabled-opacity`, `--gog-select-error-color`, `--gog-select-error-font-size`, `--gog-select-field-bg`, `--gog-select-field-border`, `--gog-select-field-border-style`, `--gog-select-field-border-width`, `--gog-select-field-color`, `--gog-select-filter-border-color`, `--gog-select-filter-border-style`, `--gog-select-filter-border-width`, `--gog-select-filter-empty-color`, `--gog-select-filter-empty-padding`, `--gog-select-filter-input-bg`, `--gog-select-filter-input-border`, `--gog-select-filter-input-color`, `--gog-select-filter-input-padding-x`, `--gog-select-filter-input-padding-y`, `--gog-select-filter-input-radius`, `--gog-select-filter-padding`, `--gog-select-float-label-in-top`, `--gog-select-float-label-over-gap`, `--gog-select-float-label-over-reserve`, `--gog-select-float-label-reserve`, `--gog-select-focus-border`, `--gog-select-focus-glow`, `--gog-select-focus-ring`, `--gog-select-focus-ring-offset`, `--gog-select-focus-ring-width`, `--gog-select-font-family`, `--gog-select-gap`, `--gog-select-label-color`, `--gog-select-label-font-family`, `--gog-select-label-font-size`, `--gog-select-label-letter-spacing`, `--gog-select-label-text-transform`, `--gog-select-mark-icon-ratio`, `--gog-select-mark-size-ratio`, `--gog-select-min-width`, `--gog-select-option-color`, `--gog-select-option-disabled-opacity`, `--gog-select-option-gap`, `--gog-select-option-height`, `--gog-select-option-hover-bg`, `--gog-select-option-selected-color`, `--gog-select-option-transition-duration`, `--gog-select-panel-bg`, `--gog-select-panel-max-height`, `--gog-select-panel-max-width`, `--gog-select-panel-offset`, `--gog-select-panel-shadow`, `--gog-select-placeholder-color`, `--gog-select-radius`, `--gog-select-transition-duration` |
53
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` |