@guildofgleks/ui 21.3.1 → 21.3.2
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 +1149 -0
- package/README.md +134 -57
- package/TOKENS.md +63 -0
- package/fesm2022/guildofgleks-ui.mjs +665 -104
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +11 -4
- package/src/styles/theme.css +20 -0
- package/styles/fonts.css +16 -0
- package/styles/index.css +17 -0
- package/styles/presets/one-dark.css +48 -0
- package/styles/presets/one-light.css +47 -0
- package/styles/presets/slate.css +55 -0
- package/styles/theme.css +1681 -0
- package/styles/typography.css +15 -0
- package/styles/utilities.css +170 -0
- package/types/guildofgleks-ui.d.ts +512 -54
package/README.md
CHANGED
|
@@ -11,9 +11,8 @@ dependencies are `@angular/core`, `@angular/common` and `@angular/forms`.
|
|
|
11
11
|
|
|
12
12
|
## Features
|
|
13
13
|
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
tag, textarea, toast — plus `DialogService`, `ToastService` and `ThemeService`.
|
|
14
|
+
- 27 standalone components and 2 directives — see [Components](#components) for the full
|
|
15
|
+
list — plus `DialogService`, `ToastService` and `ThemeService`.
|
|
17
16
|
- Signal-based API throughout: `input()` / `output()` / `model()`, `OnPush` change
|
|
18
17
|
detection, no NgModules.
|
|
19
18
|
- No CDK, no Material — a small dependency footprint on top of `@angular/core`,
|
|
@@ -55,6 +54,9 @@ render unstyled.
|
|
|
55
54
|
]
|
|
56
55
|
```
|
|
57
56
|
|
|
57
|
+
> Up to 21.3.1 the same files shipped under `@guildofgleks/ui/src/styles/…`. That path still
|
|
58
|
+
> works and will keep working until 21.5.0 — new setups should use the shorter one above.
|
|
59
|
+
|
|
58
60
|
Then import a component where you need it:
|
|
59
61
|
|
|
60
62
|
```ts
|
|
@@ -77,6 +79,37 @@ export class ExampleComponent {
|
|
|
77
79
|
Outputs are prefixed with `gog` (`gogClick`, `gogToggle`) so they never collide with
|
|
78
80
|
native DOM events. Inputs keep their natural names.
|
|
79
81
|
|
|
82
|
+
### Services need a host element
|
|
83
|
+
|
|
84
|
+
`DialogService` and `ToastService` render into a host component you place once, rather than
|
|
85
|
+
creating a detached portal of their own. **Without the host in a template, `open()` and
|
|
86
|
+
`show()` update state and nothing appears on screen.** Put both in your root template — they
|
|
87
|
+
render nothing until something is actually open:
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
import { Component, inject } from '@angular/core';
|
|
91
|
+
import { DialogComponent, ToastContainerComponent, ToastService } from '@guildofgleks/ui';
|
|
92
|
+
|
|
93
|
+
@Component({
|
|
94
|
+
selector: 'app-root',
|
|
95
|
+
imports: [DialogComponent, ToastContainerComponent],
|
|
96
|
+
template: `
|
|
97
|
+
<router-outlet />
|
|
98
|
+
|
|
99
|
+
<gog-dialog />
|
|
100
|
+
<gog-toast-container />
|
|
101
|
+
`,
|
|
102
|
+
})
|
|
103
|
+
export class App {
|
|
104
|
+
private readonly toasts = inject(ToastService);
|
|
105
|
+
notify = () => this.toasts.show({ message: 'Saved', type: 'success' });
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
`<gog-dialog />` hosts every dialog opened through `DialogService` (they stack, so one host is
|
|
110
|
+
enough for the whole app). `<gog-toast-container />` hosts all four toast positions at once and
|
|
111
|
+
takes an optional `maxVisiblePerPosition` (default `5`).
|
|
112
|
+
|
|
80
113
|
## Theming
|
|
81
114
|
|
|
82
115
|
Everything is themed through CSS custom properties, and **every value the components
|
|
@@ -87,55 +120,9 @@ border, radius, shadow, spacing or duration of its own. There are three layers:
|
|
|
87
120
|
Override these to restyle everything at once; the component tokens all derive from them,
|
|
88
121
|
so a palette swap carries through without touching anything else.
|
|
89
122
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
| Group | Tokens |
|
|
94
|
-
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
95
|
-
| 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` |
|
|
96
|
-
| Spacing & geometry | `--gog-panel-border-style`, `--gog-panel-border-width`, `--gog-radius`, `--gog-space-2xl`, `--gog-space-lg`, `--gog-space-md`, `--gog-space-sm`, `--gog-space-xs` |
|
|
97
|
-
| Motion | `--gog-duration-base`, `--gog-duration-fast`, `--gog-duration-slow`, `--gog-easing` |
|
|
98
|
-
| Focus & disabled | `--gog-disabled-opacity`, `--gog-focus-ring-offset`, `--gog-focus-ring-width` |
|
|
99
|
-
| 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`, `--gog-control-checkbox-padding`, `--gog-control-icon-offset`, `--gog-control-padding-x`, `--gog-control-padding-y` |
|
|
100
|
-
| Button sizing | `--gog-btn-lg-font-size`, `--gog-btn-lg-padding`, `--gog-btn-md-font-size`, `--gog-btn-md-padding`, `--gog-btn-slg-font-size`, `--gog-btn-slg-padding`, `--gog-btn-sm-font-size`, `--gog-btn-sm-padding`, `--gog-btn-xsm-font-size`, `--gog-btn-xsm-padding` |
|
|
101
|
-
| Field sizing (input / select / multiselect share one scale) | `--gog-field-lg-icon-inset`, `--gog-field-lg-icon-offset`, `--gog-field-lg-padding-x`, `--gog-field-lg-padding-y`, `--gog-field-md-icon-inset`, `--gog-field-slg-font-size`, `--gog-field-slg-icon-inset`, `--gog-field-slg-icon-offset`, `--gog-field-slg-padding-x`, `--gog-field-slg-padding-y`, `--gog-field-sm-icon-inset`, `--gog-field-sm-icon-offset`, `--gog-field-sm-padding-x`, `--gog-field-sm-padding-y`, `--gog-field-xsm-icon-inset`, `--gog-field-xsm-icon-offset`, `--gog-field-xsm-padding-x`, `--gog-field-xsm-padding-y` |
|
|
102
|
-
| Float label geometry (input / textarea / select / multiselect) | `--gog-field-float-label-in-top`, `--gog-field-float-label-over-gap`, `--gog-field-float-label-over-reserve`, `--gog-field-float-label-reserve` |
|
|
103
|
-
| 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` |
|
|
104
|
-
| Toast stack | `--gog-toast-enter-distance`, `--gog-toast-gap`, `--gog-toast-max-width`, `--gog-toast-min-width`, `--gog-toast-shadow`, `--gog-toast-stack-padding`, `--gog-toast-z-index` |
|
|
105
|
-
| Overlay stacking | `--gog-dropdown-z`, `--gog-spinner-overlay-z` |
|
|
106
|
-
| 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` |
|
|
107
|
-
| 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` |
|
|
108
|
-
| 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` |
|
|
109
|
-
| Collapsible | `--gog-collapsible-disabled-opacity`, `--gog-collapsible-max-height`, `--gog-collapsible-transition-duration` |
|
|
110
|
-
| Button | `--gog-btn-active-scale`, `--gog-btn-border-style`, `--gog-btn-border-width`, `--gog-btn-disabled-opacity`, `--gog-btn-focus-ring-offset`, `--gog-btn-focus-ring-width`, `--gog-btn-font-family`, `--gog-btn-font-weight`, `--gog-btn-gap`, `--gog-btn-ghost-bg`, `--gog-btn-ghost-border`, `--gog-btn-ghost-color`, `--gog-btn-ghost-hover-bg`, `--gog-btn-ghost-hover-color`, `--gog-btn-ghost-hover-shadow`, `--gog-btn-ghost-shadow`, `--gog-btn-ghost-spinner-color`, `--gog-btn-letter-spacing`, `--gog-btn-line-height`, `--gog-btn-loading-opacity`, `--gog-btn-outline-bg`, `--gog-btn-outline-border`, `--gog-btn-outline-color`, `--gog-btn-outline-hover-bg`, `--gog-btn-outline-hover-color`, `--gog-btn-outline-hover-shadow`, `--gog-btn-outline-shadow`, `--gog-btn-outline-spinner-color`, `--gog-btn-primary-bg`, `--gog-btn-primary-border`, `--gog-btn-primary-color`, `--gog-btn-primary-hover-bg`, `--gog-btn-primary-hover-color`, `--gog-btn-primary-hover-shadow`, `--gog-btn-primary-shadow`, `--gog-btn-primary-spinner-color`, `--gog-btn-radius`, `--gog-btn-secondary-bg`, `--gog-btn-secondary-border`, `--gog-btn-secondary-color`, `--gog-btn-secondary-hover-bg`, `--gog-btn-secondary-hover-color`, `--gog-btn-secondary-hover-shadow`, `--gog-btn-secondary-shadow`, `--gog-btn-secondary-spinner-color`, `--gog-btn-spinner-max-size`, `--gog-btn-text-transform`, `--gog-btn-transition-duration` |
|
|
111
|
-
| 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` |
|
|
112
|
-
| 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-header-gap`, `--gog-calendar-header-margin`, `--gog-calendar-lg-day-size`, `--gog-calendar-lg-font-size`, `--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` |
|
|
113
|
-
| 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` |
|
|
114
|
-
| 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` |
|
|
115
|
-
| 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` |
|
|
116
|
-
| Dialog | `--gog-confirm-actions-gap`, `--gog-confirm-actions-offset`, `--gog-confirm-color`, `--gog-confirm-description-color`, `--gog-confirm-gap`, `--gog-confirm-max-width`, `--gog-confirm-min-width`, `--gog-dialog-backdrop-bg`, `--gog-dialog-backdrop-blur`, `--gog-dialog-backdrop-fade-duration`, `--gog-dialog-backdrop-padding`, `--gog-dialog-bg`, `--gog-dialog-body-max-height`, `--gog-dialog-body-padding`, `--gog-dialog-border`, `--gog-dialog-border-style`, `--gog-dialog-border-width`, `--gog-dialog-close-color`, `--gog-dialog-close-focus-ring`, `--gog-dialog-close-focus-ring-offset`, `--gog-dialog-close-focus-ring-width`, `--gog-dialog-close-font-size`, `--gog-dialog-close-hover-bg`, `--gog-dialog-close-hover-border`, `--gog-dialog-close-hover-color`, `--gog-dialog-close-size`, `--gog-dialog-color`, `--gog-dialog-enter-distance`, `--gog-dialog-enter-duration`, `--gog-dialog-font-family`, `--gog-dialog-header-border-color`, `--gog-dialog-header-gap`, `--gog-dialog-header-padding`, `--gog-dialog-max-height`, `--gog-dialog-min-width`, `--gog-dialog-radius`, `--gog-dialog-shadow` |
|
|
117
|
-
| Autocomplete | `--gog-autocomplete-actions-gap`, `--gog-autocomplete-actions-inset`, `--gog-autocomplete-actions-reserve`, `--gog-autocomplete-border-color`, `--gog-autocomplete-border-style`, `--gog-autocomplete-border-width`, `--gog-autocomplete-clear-color`, `--gog-autocomplete-clear-hover-color`, `--gog-autocomplete-clear-icon-ratio`, `--gog-autocomplete-disabled-opacity`, `--gog-autocomplete-empty-color`, `--gog-autocomplete-empty-font-size`, `--gog-autocomplete-error-border-color`, `--gog-autocomplete-error-color`, `--gog-autocomplete-error-font-family`, `--gog-autocomplete-error-font-size`, `--gog-autocomplete-field-bg`, `--gog-autocomplete-float-label-in-top`, `--gog-autocomplete-float-label-over-gap`, `--gog-autocomplete-float-label-over-reserve`, `--gog-autocomplete-float-label-reserve`, `--gog-autocomplete-focus-ring-color`, `--gog-autocomplete-focus-ring-offset`, `--gog-autocomplete-focus-ring-width`, `--gog-autocomplete-font-family`, `--gog-autocomplete-gap`, `--gog-autocomplete-hover-border-color`, `--gog-autocomplete-label-color`, `--gog-autocomplete-label-font-family`, `--gog-autocomplete-label-font-size`, `--gog-autocomplete-label-font-weight`, `--gog-autocomplete-label-letter-spacing`, `--gog-autocomplete-label-text-transform`, `--gog-autocomplete-line-height`, `--gog-autocomplete-min-width`, `--gog-autocomplete-option-color`, `--gog-autocomplete-option-gap`, `--gog-autocomplete-option-height`, `--gog-autocomplete-option-hover-bg`, `--gog-autocomplete-option-hover-color`, `--gog-autocomplete-option-padding`, `--gog-autocomplete-option-radius`, `--gog-autocomplete-option-selected-bg`, `--gog-autocomplete-option-selected-color`, `--gog-autocomplete-options-padding`, `--gog-autocomplete-panel-bg`, `--gog-autocomplete-panel-border-color`, `--gog-autocomplete-panel-border-style`, `--gog-autocomplete-panel-border-width`, `--gog-autocomplete-panel-gap`, `--gog-autocomplete-panel-max-height`, `--gog-autocomplete-panel-max-width`, `--gog-autocomplete-panel-radius`, `--gog-autocomplete-panel-shadow`, `--gog-autocomplete-placeholder-color`, `--gog-autocomplete-radius`, `--gog-autocomplete-spinner-size`, `--gog-autocomplete-text-color`, `--gog-autocomplete-transition-duration` |
|
|
118
|
-
| Badge (the `gogBadge` directive; its classes live in utilities.css) | `--gog-badge-border-color`, `--gog-badge-border-style`, `--gog-badge-border-width`, `--gog-badge-danger-bg`, `--gog-badge-danger-color`, `--gog-badge-dot-size`, `--gog-badge-font-family`, `--gog-badge-font-size`, `--gog-badge-font-weight`, `--gog-badge-info-bg`, `--gog-badge-info-color`, `--gog-badge-line-height`, `--gog-badge-offset`, `--gog-badge-padding-inline`, `--gog-badge-radius`, `--gog-badge-size`, `--gog-badge-success-bg`, `--gog-badge-success-color`, `--gog-badge-warning-bg`, `--gog-badge-warning-color`, `--gog-badge-z` |
|
|
119
|
-
| Datepicker (the field; the grid inside it is themed by --gog-calendar-*) | `--gog-datepicker-actions-gap`, `--gog-datepicker-actions-inset`, `--gog-datepicker-actions-reserve`, `--gog-datepicker-border-color`, `--gog-datepicker-border-style`, `--gog-datepicker-border-width`, `--gog-datepicker-clear-color`, `--gog-datepicker-clear-icon-ratio`, `--gog-datepicker-disabled-opacity`, `--gog-datepicker-error-border-color`, `--gog-datepicker-error-color`, `--gog-datepicker-error-font-family`, `--gog-datepicker-error-font-size`, `--gog-datepicker-field-bg`, `--gog-datepicker-float-label-in-top`, `--gog-datepicker-float-label-over-gap`, `--gog-datepicker-float-label-over-reserve`, `--gog-datepicker-float-label-reserve`, `--gog-datepicker-focus-ring-color`, `--gog-datepicker-focus-ring-offset`, `--gog-datepicker-focus-ring-width`, `--gog-datepicker-font-family`, `--gog-datepicker-gap`, `--gog-datepicker-hover-border-color`, `--gog-datepicker-icon-color`, `--gog-datepicker-icon-hover-color`, `--gog-datepicker-label-color`, `--gog-datepicker-label-font-family`, `--gog-datepicker-label-font-size`, `--gog-datepicker-label-letter-spacing`, `--gog-datepicker-label-text-transform`, `--gog-datepicker-line-height`, `--gog-datepicker-min-width`, `--gog-datepicker-panel-bg`, `--gog-datepicker-panel-border-color`, `--gog-datepicker-panel-border-style`, `--gog-datepicker-panel-border-width`, `--gog-datepicker-panel-gap`, `--gog-datepicker-panel-radius`, `--gog-datepicker-panel-shadow`, `--gog-datepicker-placeholder-color`, `--gog-datepicker-radius`, `--gog-datepicker-text-color`, `--gog-datepicker-toggle-icon-size`, `--gog-datepicker-transition-duration` |
|
|
120
|
-
| Divider | `--gog-divider-block-spacing`, `--gog-divider-dashed-style`, `--gog-divider-dotted-style`, `--gog-divider-inline-spacing`, `--gog-divider-inset-size`, `--gog-divider-label-color`, `--gog-divider-label-font-family`, `--gog-divider-label-font-size`, `--gog-divider-label-font-weight`, `--gog-divider-label-gap`, `--gog-divider-label-line-height`, `--gog-divider-line-color`, `--gog-divider-line-thickness`, `--gog-divider-solid-style`, `--gog-divider-vertical-length` |
|
|
121
|
-
| Icon | `--gog-icon-fallback-size` |
|
|
122
|
-
| Input field | `--gog-input-clear-icon-ratio`, `--gog-input-clear-inset`, `--gog-input-clear-radius`, `--gog-input-disabled-opacity`, `--gog-input-error-color`, `--gog-input-error-font-size`, `--gog-input-error-offset`, `--gog-input-field-bg`, `--gog-input-field-border`, `--gog-input-field-border-style`, `--gog-input-field-border-width`, `--gog-input-field-color`, `--gog-input-float-label-in-top`, `--gog-input-float-label-over-gap`, `--gog-input-float-label-over-reserve`, `--gog-input-float-label-reserve`, `--gog-input-focus-border`, `--gog-input-focus-glow`, `--gog-input-focus-ring`, `--gog-input-focus-ring-offset`, `--gog-input-focus-ring-width`, `--gog-input-font-family`, `--gog-input-gap`, `--gog-input-icon-action-radius`, `--gog-input-icon-color`, `--gog-input-icon-focus-ring-width`, `--gog-input-icon-hover-color`, `--gog-input-label-color`, `--gog-input-label-font-family`, `--gog-input-label-font-size`, `--gog-input-label-letter-spacing`, `--gog-input-label-text-transform`, `--gog-input-placeholder-color`, `--gog-input-radius`, `--gog-input-transition-duration`, `--gog-textarea-clear-icon-ratio` |
|
|
123
|
-
| Multiselect | `--gog-ms-actions-gap`, `--gog-ms-actions-inset`, `--gog-ms-arrow-icon-ratio`, `--gog-ms-arrow-transition-duration`, `--gog-ms-border-color`, `--gog-ms-checkbox-bg`, `--gog-ms-checkbox-border`, `--gog-ms-checkbox-checked-bg`, `--gog-ms-checkbox-checked-color`, `--gog-ms-clear-icon-ratio`, `--gog-ms-clear-radius`, `--gog-ms-controls-gap`, `--gog-ms-controls-padding`, `--gog-ms-disabled-opacity`, `--gog-ms-error-color`, `--gog-ms-error-font-size`, `--gog-ms-error-offset`, `--gog-ms-field-bg`, `--gog-ms-field-border`, `--gog-ms-field-border-style`, `--gog-ms-field-border-width`, `--gog-ms-field-color`, `--gog-ms-filter-border-color`, `--gog-ms-filter-border-style`, `--gog-ms-filter-border-width`, `--gog-ms-filter-empty-color`, `--gog-ms-filter-empty-padding`, `--gog-ms-filter-input-bg`, `--gog-ms-filter-input-border`, `--gog-ms-filter-input-color`, `--gog-ms-filter-input-padding-x`, `--gog-ms-filter-input-padding-y`, `--gog-ms-filter-input-radius`, `--gog-ms-filter-padding`, `--gog-ms-float-label-in-top`, `--gog-ms-float-label-over-gap`, `--gog-ms-float-label-over-reserve`, `--gog-ms-float-label-reserve`, `--gog-ms-focus-border`, `--gog-ms-focus-glow`, `--gog-ms-focus-ring`, `--gog-ms-focus-ring-offset`, `--gog-ms-focus-ring-width`, `--gog-ms-font-family`, `--gog-ms-gap`, `--gog-ms-label-color`, `--gog-ms-label-font-family`, `--gog-ms-label-font-size`, `--gog-ms-label-letter-spacing`, `--gog-ms-label-text-transform`, `--gog-ms-mark-icon-ratio`, `--gog-ms-mark-size-ratio`, `--gog-ms-min-width`, `--gog-ms-option-color`, `--gog-ms-option-disabled-opacity`, `--gog-ms-option-gap`, `--gog-ms-option-gap-inline`, `--gog-ms-option-height`, `--gog-ms-option-hover-bg`, `--gog-ms-option-radius`, `--gog-ms-option-transition-duration`, `--gog-ms-options-padding`, `--gog-ms-overflow-color`, `--gog-ms-overflow-font-size`, `--gog-ms-overflow-gap`, `--gog-ms-panel-bg`, `--gog-ms-panel-border`, `--gog-ms-panel-max-height`, `--gog-ms-panel-max-width`, `--gog-ms-panel-offset`, `--gog-ms-panel-shadow`, `--gog-ms-placeholder-color`, `--gog-ms-radius`, `--gog-ms-transition-duration`, `--gog-ms-value-color`, `--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` |
|
|
124
|
-
| Paginator | `--gog-paginator-ellipsis-color`, `--gog-paginator-ellipsis-font-family`, `--gog-paginator-ellipsis-font-size`, `--gog-paginator-ellipsis-min-width`, `--gog-paginator-gap` |
|
|
125
|
-
| 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` |
|
|
126
|
-
| Scroll | `--gog-scroll-corner-bg`, `--gog-scroll-fade-duration`, `--gog-scroll-focus-ring`, `--gog-scroll-focus-ring-width`, `--gog-scroll-normal-thumb-min-size`, `--gog-scroll-normal-track-width`, `--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` |
|
|
127
|
-
| 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` |
|
|
128
|
-
| 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` |
|
|
129
|
-
| 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` |
|
|
130
|
-
| 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` |
|
|
131
|
-
| 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-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` |
|
|
132
|
-
| 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` |
|
|
133
|
-
| 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` |
|
|
134
|
-
| 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` |
|
|
135
|
-
| Toggle | `--gog-toggle-border-color`, `--gog-toggle-border-style`, `--gog-toggle-border-width`, `--gog-toggle-disabled-opacity`, `--gog-toggle-focus-ring-color`, `--gog-toggle-focus-ring-offset`, `--gog-toggle-focus-ring-width`, `--gog-toggle-font-family`, `--gog-toggle-gap`, `--gog-toggle-label-color`, `--gog-toggle-label-line-height`, `--gog-toggle-lg-label-size`, `--gog-toggle-lg-state-font-size`, `--gog-toggle-lg-thumb-size`, `--gog-toggle-lg-track-height`, `--gog-toggle-lg-track-width`, `--gog-toggle-md-label-size`, `--gog-toggle-md-state-font-size`, `--gog-toggle-md-thumb-size`, `--gog-toggle-md-track-height`, `--gog-toggle-md-track-width`, `--gog-toggle-on-border-color`, `--gog-toggle-radius`, `--gog-toggle-slg-label-size`, `--gog-toggle-slg-state-font-size`, `--gog-toggle-slg-thumb-size`, `--gog-toggle-slg-track-height`, `--gog-toggle-slg-track-width`, `--gog-toggle-sm-label-size`, `--gog-toggle-sm-state-font-size`, `--gog-toggle-sm-thumb-size`, `--gog-toggle-sm-track-height`, `--gog-toggle-sm-track-width`, `--gog-toggle-state-color`, `--gog-toggle-state-font-weight`, `--gog-toggle-state-letter-spacing`, `--gog-toggle-state-offset`, `--gog-toggle-state-padding-inline`, `--gog-toggle-state-thumb-gap`, `--gog-toggle-thumb-inset`, `--gog-toggle-thumb-off-bg`, `--gog-toggle-thumb-on-bg`, `--gog-toggle-thumb-shadow`, `--gog-toggle-track-off-bg`, `--gog-toggle-track-on-bg`, `--gog-toggle-transition-duration`, `--gog-toggle-xsm-label-size`, `--gog-toggle-xsm-state-font-size`, `--gog-toggle-xsm-thumb-size`, `--gog-toggle-xsm-track-height`, `--gog-toggle-xsm-track-width` |
|
|
136
|
-
| Tooltip | `--gog-tooltip-arrow-size`, `--gog-tooltip-bg`, `--gog-tooltip-border-color`, `--gog-tooltip-border-style`, `--gog-tooltip-border-width`, `--gog-tooltip-color`, `--gog-tooltip-font-family`, `--gog-tooltip-font-size`, `--gog-tooltip-gap`, `--gog-tooltip-line-height`, `--gog-tooltip-max-height`, `--gog-tooltip-max-width`, `--gog-tooltip-padding`, `--gog-tooltip-radius`, `--gog-tooltip-shadow`, `--gog-tooltip-transition-duration`, `--gog-tooltip-z` |
|
|
137
|
-
|
|
138
|
-
<!-- tokens:end -->
|
|
123
|
+
Every group and every token name is listed in [`TOKENS.md`](./TOKENS.md) — generated from
|
|
124
|
+
`theme.css`, so it cannot drift from what the components actually read. The same catalogue is
|
|
125
|
+
available at runtime as `GOG_TOKEN_GROUPS`, typed by `GogTokenName`.
|
|
139
126
|
|
|
140
127
|
**2. Component tokens** — `--gog-<block>-*`, one block per component in `theme.css`, for
|
|
141
128
|
restyling a single component theme-wide. They cover every painted property, including
|
|
@@ -190,6 +177,16 @@ manages it:
|
|
|
190
177
|
private readonly theme = inject(ThemeService);
|
|
191
178
|
this.theme.toggleTheme(); // light ⇄ dark
|
|
192
179
|
this.theme.setTheme('cyberpunk'); // any custom theme name
|
|
180
|
+
this.theme.theme(); // read-only signal — go through the two methods above
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
Out of the box it adopts whatever `data-theme` is already on the document, or `'light'`.
|
|
184
|
+
Persisting the choice and following the OS setting are opt-in, through `GOG_CONFIG.theme`:
|
|
185
|
+
|
|
186
|
+
```ts
|
|
187
|
+
provideGogConfig({
|
|
188
|
+
theme: { storageKey: 'app-theme', followSystem: true, darkTheme: 'cyberpunk' },
|
|
189
|
+
});
|
|
193
190
|
```
|
|
194
191
|
|
|
195
192
|
To add a theme, copy a palette block from `styles/theme.css` and change the attribute
|
|
@@ -244,14 +241,79 @@ that the theme needs to be longer.
|
|
|
244
241
|
download. For the showcase's typography (Cinzel / Inter / JetBrains Mono, pulled from
|
|
245
242
|
Google Fonts) add `@guildofgleks/ui/styles/fonts.css` as well.
|
|
246
243
|
|
|
244
|
+
## Global configuration
|
|
245
|
+
|
|
246
|
+
Anything visual is a CSS token (above). For the rest — the handful of settings an app would
|
|
247
|
+
otherwise repeat on every instance — there is one provider, not an injection token per
|
|
248
|
+
component per setting:
|
|
249
|
+
|
|
250
|
+
```ts
|
|
251
|
+
// app.config.ts
|
|
252
|
+
import { provideGogConfig } from '@guildofgleks/ui';
|
|
253
|
+
|
|
254
|
+
providers: [
|
|
255
|
+
provideGogConfig({
|
|
256
|
+
control: { size: 'sm', errorDisplay: 'auto', clearable: true },
|
|
257
|
+
dropdown: { appendToBody: true },
|
|
258
|
+
datepicker: { locale: 'de-DE', format: 'dd.MM.yyyy' },
|
|
259
|
+
button: { debounce: 500 },
|
|
260
|
+
}),
|
|
261
|
+
];
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
Keys: `control`, `dropdown`, `floatLabel`, `datepicker`, `autocomplete`, `inputfield`,
|
|
265
|
+
`textarea`, `tooltip`, `scroll`, `button`, `toast`, `theme`, `labels`. Every field is optional,
|
|
266
|
+
and an instance's own input always wins over the configured value. Providing it again lower in
|
|
267
|
+
the injector tree (a route, a component) **layers onto** the parent's config one level deep
|
|
268
|
+
rather than replacing it, so a route can override one field and inherit the rest.
|
|
269
|
+
|
|
270
|
+
### Translating the library
|
|
271
|
+
|
|
272
|
+
`labels` carries every fixed string the components render themselves — the ones you never write
|
|
273
|
+
markup for. Set them once instead of on every control:
|
|
274
|
+
|
|
275
|
+
```ts
|
|
276
|
+
provideGogConfig({
|
|
277
|
+
labels: {
|
|
278
|
+
clear: 'Очистить',
|
|
279
|
+
clearSelection: 'Очистить выбор',
|
|
280
|
+
selectAll: 'Выбрать все',
|
|
281
|
+
closeDialog: 'Закрыть',
|
|
282
|
+
previousPage: 'Предыдущая страница',
|
|
283
|
+
today: 'Сегодня',
|
|
284
|
+
// interpolating labels take a function, since word order and agreement vary by language
|
|
285
|
+
page: (page, isCurrent) =>
|
|
286
|
+
isCurrent ? `Страница ${page}, текущая` : `Перейти на страницу ${page}`,
|
|
287
|
+
},
|
|
288
|
+
});
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
The full key list is on `GogGlobalConfig['labels']`. Strings that describe *one* control rather
|
|
292
|
+
than library chrome — a field's `label`, a button's `ariaLabel` — are deliberately not in here;
|
|
293
|
+
those stay per instance.
|
|
294
|
+
|
|
247
295
|
## Components
|
|
248
296
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
`gog-
|
|
252
|
-
`gog-
|
|
297
|
+
| Group | Components |
|
|
298
|
+
| --- | --- |
|
|
299
|
+
| 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` |
|
|
300
|
+
| Actions | `gog-button`, `gog-chip` |
|
|
301
|
+
| Data | `gog-table` (+ `gog-column`), `gog-paginator`, `gog-tag` |
|
|
302
|
+
| Layout & disclosure | `gog-accordion`, `gog-tabs` (+ `gog-tab`), `gog-collapsible`, `gog-divider`, `gog-scroll` |
|
|
303
|
+
| Overlays | `gog-dialog`, `gog-confirmation-dialog`, `gog-toast` (+ `gog-toast-container`) |
|
|
304
|
+
| Feedback | `gog-spinner`, `gog-spinner-overlay`, `gog-progressbar`, `gog-skeleton` |
|
|
305
|
+
| Content | `gog-icon` |
|
|
306
|
+
|
|
307
|
+
Directives: `gogTooltip`, `gogBadge`, `gogCollapsibleTrigger`, `gogCollapsibleContent`.
|
|
253
308
|
|
|
254
|
-
|
|
309
|
+
Slot directives, for replacing a component's markup rather than configuring it:
|
|
310
|
+
`gogAccordionHeader`, `gogAccordionContent`, `gogAccordionChevron`, `gogButtonToggleOption`,
|
|
311
|
+
`gogCheckboxIcon`, `gogColumnBody`, `gogColumnHeader`, `gogDropdownOption`,
|
|
312
|
+
`gogDropdownChevron`, `gogInputAddonStart`, `gogInputAddonEnd`, `gogMultiselectClearIcon`,
|
|
313
|
+
`gogTabHeader`, `gogTabContent`, `gogTagIcon`.
|
|
314
|
+
|
|
315
|
+
`gog-dialog` and `gog-toast-container` are the host elements the two services render into —
|
|
316
|
+
see [Services need a host element](#services-need-a-host-element).
|
|
255
317
|
|
|
256
318
|
Services: `DialogService`, `ToastService`, `ThemeService`.
|
|
257
319
|
|
|
@@ -299,6 +361,21 @@ string or a `TemplateRef`; `gogTooltipPosition` (`'auto'` default, or an explici
|
|
|
299
361
|
`gogTooltipDisabled` inputs, the first three also configurable app-wide via
|
|
300
362
|
`GOG_CONFIG.tooltip`.
|
|
301
363
|
|
|
364
|
+
`gog-inputfield` and `gog-textarea` forward the native attribute space of the element they
|
|
365
|
+
wrap, so nothing is out of reach because it is hidden inside a component: `readonly`,
|
|
366
|
+
`maxlength`, `minlength`, `spellcheck`, plus `pattern` and `inputMode` on the input, and the
|
|
367
|
+
`type` values that render as a text field (`text`, `password`, `email`, `number`, `search`,
|
|
368
|
+
`tel`, `url`, `date`, `time`, `datetime-local` — see `GogInputType`). `readonly` keeps the
|
|
369
|
+
value focusable and submitted but blocks edits, so the clear button and a number field's
|
|
370
|
+
stepper both stand down while it is on. `autofocus` is deliberately **not** forwarded: moving
|
|
371
|
+
focus without the user asking is disorienting for keyboard and screen-reader users, and an app
|
|
372
|
+
that genuinely needs it can focus the element itself.
|
|
373
|
+
|
|
374
|
+
Every field also generates its own `id` when you don't pass `inputId`, so the label is always
|
|
375
|
+
associated with the control and the error message is always reachable through
|
|
376
|
+
`aria-describedby`. Pass `inputId` only when something outside the component has to reference
|
|
377
|
+
the field by a known id.
|
|
378
|
+
|
|
302
379
|
`gog-checkbox`, `gog-inputfield`, `gog-select`, `gog-multiselect`, `gog-slider` and
|
|
303
380
|
`gog-textarea` implement `ControlValueAccessor` and are built for Reactive Forms — use
|
|
304
381
|
`[formControl]` or `formControlName`. The library itself never imports `FormsModule` or
|