@guildofgleks/ui 21.3.0 → 21.3.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/LICENSE +201 -21
- package/README.md +320 -320
- package/fesm2022/guildofgleks-ui.mjs +226 -44
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +2 -2
- package/src/styles/index.css +17 -17
- package/src/styles/theme.css +1661 -1643
- package/types/guildofgleks-ui.d.ts +137 -7
package/README.md
CHANGED
|
@@ -1,320 +1,320 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
A lightweight Angular 21 component library. No CDK, no Material — the only runtime
|
|
8
|
-
dependencies are `@angular/core`, `@angular/common` and `@angular/forms`.
|
|
9
|
-
|
|
10
|
-
**Tags:** angular, angular21, components, ui-library, design-system, signals, standalone, accessible
|
|
11
|
-
|
|
12
|
-
## Features
|
|
13
|
-
|
|
14
|
-
- 18 standalone components — accordion, button, checkbox, chip, collapsible, dialog,
|
|
15
|
-
icon, inputfield, multiselect, paginator, select, skeleton, slider, spinner, table,
|
|
16
|
-
tag, textarea, toast — plus `DialogService`, `ToastService` and `ThemeService`.
|
|
17
|
-
- Signal-based API throughout: `input()` / `output()` / `model()`, `OnPush` change
|
|
18
|
-
detection, no NgModules.
|
|
19
|
-
- No CDK, no Material — a small dependency footprint on top of `@angular/core`,
|
|
20
|
-
`@angular/common` and `@angular/forms`.
|
|
21
|
-
- Full theming through CSS custom properties: restyle any component, swap the whole
|
|
22
|
-
palette, or ship light/dark and custom themes at runtime via a `data-theme` attribute.
|
|
23
|
-
- `ControlValueAccessor` on every form control (checkbox, inputfield, select,
|
|
24
|
-
multiselect, slider, textarea) — built and tested against Reactive Forms (`formControl` /
|
|
25
|
-
`formControlName`). The library does not use `ngModel`/`FormsModule` anywhere itself,
|
|
26
|
-
and template-driven usage via `[(ngModel)]` is untested — CVA makes it likely to work,
|
|
27
|
-
but it isn't a supported or verified path.
|
|
28
|
-
- Accessible by default: keyboard navigation, ARIA attributes, WCAG AA contrast.
|
|
29
|
-
|
|
30
|
-
## Install
|
|
31
|
-
|
|
32
|
-
npm:
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
npm install @guildofgleks/ui
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
yarn:
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
yarn add @guildofgleks/ui
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Setup
|
|
45
|
-
|
|
46
|
-
Add the stylesheet once. It carries the baseline theme (every token the components
|
|
47
|
-
read) plus the utility classes the component templates use, so without it components
|
|
48
|
-
render unstyled.
|
|
49
|
-
|
|
50
|
-
```jsonc
|
|
51
|
-
// angular.json → projects.<app>.architect.build.options
|
|
52
|
-
"styles": [
|
|
53
|
-
"node_modules/@guildofgleks/ui/styles/index.css",
|
|
54
|
-
"src/styles.scss" // your own styles, after the baseline so they win
|
|
55
|
-
]
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
Then import a component where you need it:
|
|
59
|
-
|
|
60
|
-
```ts
|
|
61
|
-
import { Component } from '@angular/core';
|
|
62
|
-
import { ButtonComponent, SelectComponent } from '@guildofgleks/ui';
|
|
63
|
-
|
|
64
|
-
@Component({
|
|
65
|
-
selector: 'app-example',
|
|
66
|
-
imports: [ButtonComponent, SelectComponent],
|
|
67
|
-
template: `
|
|
68
|
-
<gog-select label="Region" [options]="regions" [(value)]="region" />
|
|
69
|
-
<gog-button (gogClick)="save()">Save</gog-button>
|
|
70
|
-
`,
|
|
71
|
-
})
|
|
72
|
-
export class ExampleComponent {
|
|
73
|
-
/* … */
|
|
74
|
-
}
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
Outputs are prefixed with `gog` (`gogClick`, `gogToggle`) so they never collide with
|
|
78
|
-
native DOM events. Inputs keep their natural names.
|
|
79
|
-
|
|
80
|
-
## Theming
|
|
81
|
-
|
|
82
|
-
Everything is themed through CSS custom properties, and **every value the components
|
|
83
|
-
paint with lives in `styles/theme.css`** — no component stylesheet holds a colour, font,
|
|
84
|
-
border, radius, shadow, spacing or duration of its own. There are three layers:
|
|
85
|
-
|
|
86
|
-
**1. Foundation tokens** — the palette, type scale, spacing, motion and control metrics.
|
|
87
|
-
Override these to restyle everything at once; the component tokens all derive from them,
|
|
88
|
-
so a palette swap carries through without touching anything else.
|
|
89
|
-
|
|
90
|
-
<!-- tokens:start -->
|
|
91
|
-
<!-- GENERATED by scripts/generate-tokens.mjs from src/styles/theme.css — do not edit by hand. -->
|
|
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 -->
|
|
139
|
-
|
|
140
|
-
**2. Component tokens** — `--gog-<block>-*`, one block per component in `theme.css`, for
|
|
141
|
-
restyling a single component theme-wide. They cover every painted property, including
|
|
142
|
-
per-variant and per-size values (`--gog-btn-ghost-hover-bg`, `--gog-tag-lg-padding-block`,
|
|
143
|
-
`--gog-accordion-sm-chevron-size`, `--gog-skeleton-shine`, `--gog-paginator-gap`, …), plus
|
|
144
|
-
each component's font family, so a theme can decide that e.g. buttons use the body face:
|
|
145
|
-
|
|
146
|
-
```css
|
|
147
|
-
:root[data-theme='mine'] {
|
|
148
|
-
--gog-btn-font-family: var(--gog-font-body);
|
|
149
|
-
--gog-btn-font-weight: 600;
|
|
150
|
-
--gog-btn-ghost-hover-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
|
|
151
|
-
--gog-table-hover-bg: var(--gog-hover-color);
|
|
152
|
-
}
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
**3. Instance tokens** — a small set left deliberately _undeclared_ so that setting them
|
|
156
|
-
anywhere always wins over the variant/size classes. This is the per-instance escape
|
|
157
|
-
hatch:
|
|
158
|
-
|
|
159
|
-
```css
|
|
160
|
-
.my-form gog-button {
|
|
161
|
-
--gog-btn-bg: rebeccapurple; /* beats .gog-btn--primary, unlike a declared token */
|
|
162
|
-
}
|
|
163
|
-
```
|
|
164
|
-
|
|
165
|
-
They are `--gog-btn-{bg,color,border,shadow,hover-bg,hover-color,hover-shadow,padding,font-size,spinner-color}`,
|
|
166
|
-
`--gog-tag-{accent,bg,border,color,font-size,gap,padding-block,padding-inline,icon-size}`,
|
|
167
|
-
`--gog-chip-{font-size,gap,padding-block,padding-inline,avatar-size,icon-size,remove-size}`,
|
|
168
|
-
the per-size field hooks (`--gog-input-padding-y`, `--gog-select-control-font`,
|
|
169
|
-
`--gog-ms-font-size`, `--gog-table-td-padding-v`, `--gog-accordion-padding-y`, …),
|
|
170
|
-
`--gog-spinner-color`, and `--gog-{input,select,ms}-float-label-on-bg` (the patch masking the
|
|
171
|
-
border behind an `'on'` label).
|
|
172
|
-
|
|
173
|
-
The full list is the `INSTANCE_TOKENS` set in `scripts/check-tokens.mjs`, which is verified
|
|
174
|
-
against the stylesheets on every CI run — an instance token that gets declared anywhere, or
|
|
175
|
-
stops being read, fails the build. That check also enforces the other half of the contract:
|
|
176
|
-
**no component stylesheet carries a default in a `var()` fallback**, so every value a
|
|
177
|
-
component paints with really is discoverable in `theme.css`.
|
|
178
|
-
|
|
179
|
-
The float label's _geometry_ is not instance-layer — it is themeable per component
|
|
180
|
-
(`--gog-{input,select,ms}-float-label-{reserve,in-top,over-gap,over-reserve}`), and all three
|
|
181
|
-
derive from the shared `--gog-field-float-label-*` scale above, so one declaration retunes
|
|
182
|
-
every field at once while a single control can still be overridden on its own.
|
|
183
|
-
|
|
184
|
-
### Light and dark
|
|
185
|
-
|
|
186
|
-
The theme is selected with a `data-theme` attribute on `:root`, and `ThemeService`
|
|
187
|
-
manages it:
|
|
188
|
-
|
|
189
|
-
```ts
|
|
190
|
-
private readonly theme = inject(ThemeService);
|
|
191
|
-
this.theme.toggleTheme(); // light ⇄ dark
|
|
192
|
-
this.theme.setTheme('cyberpunk'); // any custom theme name
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
To add a theme, copy a palette block from `styles/theme.css` and change the attribute
|
|
196
|
-
value. A theme only needs to declare what it actually changes — the component tokens are
|
|
197
|
-
re-derived from whatever palette is in scope, so a swapped `--gog-accent-color` reaches every
|
|
198
|
-
component without listing any of them:
|
|
199
|
-
|
|
200
|
-
```css
|
|
201
|
-
:root[data-theme='cyberpunk'],
|
|
202
|
-
[data-theme='cyberpunk'] {
|
|
203
|
-
color-scheme: dark;
|
|
204
|
-
--gog-background-color: #050816;
|
|
205
|
-
--gog-accent-color: #ff4edb;
|
|
206
|
-
--gog-radius: 22px;
|
|
207
|
-
}
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
The second selector is what lets a theme apply to a _subtree_ rather than the whole page
|
|
211
|
-
— put `data-theme="cyberpunk"` on any element and everything inside it re-derives from
|
|
212
|
-
that palette, so one page can show several themes side by side (see the showcase's Theme
|
|
213
|
-
lab). That works because `theme.css` re-declares its derived layer on `:root, [data-theme]`:
|
|
214
|
-
a custom property's `var()` references are substituted where the property is _declared_,
|
|
215
|
-
so a derived token declared only on `:root` would freeze to the root palette.
|
|
216
|
-
|
|
217
|
-
Corollary worth knowing when writing your own themes: **anything you declare that reads
|
|
218
|
-
another token must sit on the theme scope itself**, not on `:root`, or it will not follow
|
|
219
|
-
a nested theme.
|
|
220
|
-
|
|
221
|
-
### Presets
|
|
222
|
-
|
|
223
|
-
`theme.css` ships `light` and `dark`. `slate` is a third, importable separately — a
|
|
224
|
-
palette-only theme in a cool/indigo register:
|
|
225
|
-
|
|
226
|
-
```css
|
|
227
|
-
@import '@guildofgleks/ui/styles/index.css';
|
|
228
|
-
@import '@guildofgleks/ui/styles/presets/slate.css';
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
```html
|
|
232
|
-
<html data-theme="slate"></html>
|
|
233
|
-
```
|
|
234
|
-
|
|
235
|
-
It is worth reading as the worked example of the contract above: it declares **only palette
|
|
236
|
-
tokens** — no `--gog-btn-*`, no `--gog-table-*` — and still restyles every component, because
|
|
237
|
-
the derived layer re-resolves against whatever palette is in scope. If a theme of yours needs to
|
|
238
|
-
list component tokens, that usually means the derived layer is missing something rather than
|
|
239
|
-
that the theme needs to be longer.
|
|
240
|
-
|
|
241
|
-
### Optional font preset
|
|
242
|
-
|
|
243
|
-
`styles/index.css` intentionally leaves fonts alone — generic system stacks, no webfont
|
|
244
|
-
download. For the showcase's typography (Cinzel / Inter / JetBrains Mono, pulled from
|
|
245
|
-
Google Fonts) add `@guildofgleks/ui/styles/fonts.css` as well.
|
|
246
|
-
|
|
247
|
-
## Components
|
|
248
|
-
|
|
249
|
-
`gog-accordion`, `gog-button`, `gog-checkbox`, `gog-chip`, `gog-collapsible`, `gog-dialog`,
|
|
250
|
-
`gog-icon`, `gog-inputfield`, `gog-multiselect`, `gog-paginator`, `gog-radio-group`,
|
|
251
|
-
`gog-scroll`, `gog-select`, `gog-skeleton`, `gog-slider`, `gog-spinner`, `gog-spinner-overlay`,
|
|
252
|
-
`gog-table`, `gog-tag`, `gog-textarea`, `gog-toast`.
|
|
253
|
-
|
|
254
|
-
Directives: `gogCollapsibleTrigger`, `gogCollapsibleContent`, `gogTooltip`.
|
|
255
|
-
|
|
256
|
-
Services: `DialogService`, `ToastService`, `ThemeService`.
|
|
257
|
-
|
|
258
|
-
`gog-collapsible` is a headless expand/collapse primitive — no owned markup, no portal.
|
|
259
|
-
Project any element as the trigger via `gogCollapsibleTrigger` and any element as the
|
|
260
|
-
panel via `gogCollapsibleContent`; `[(open)]` is two-way bindable. Useful for anything
|
|
261
|
-
that needs an inline expanding region without the overlay behavior of `gog-select`/
|
|
262
|
-
`gog-multiselect` — e.g. a collapsible group of links in a nav sidebar.
|
|
263
|
-
|
|
264
|
-
### Options come from your own objects
|
|
265
|
-
|
|
266
|
-
`gog-select` and `gog-multiselect` do not require a `{ id, name }` shape. `optionLabel`,
|
|
267
|
-
`optionValue` and `optionDisabled` each take a property path — dot-paths included — or a
|
|
268
|
-
function:
|
|
269
|
-
|
|
270
|
-
```html
|
|
271
|
-
<gog-select
|
|
272
|
-
[options]="members"
|
|
273
|
-
optionLabel="profile.fullName"
|
|
274
|
-
optionValue="uuid"
|
|
275
|
-
optionDisabled="suspended"
|
|
276
|
-
[(value)]="memberId"
|
|
277
|
-
/>
|
|
278
|
-
```
|
|
279
|
-
|
|
280
|
-
Set `[optionValue]="null"` and the control emits the option object itself, so a selection round-trips
|
|
281
|
-
without a lookup table:
|
|
282
|
-
|
|
283
|
-
```html
|
|
284
|
-
<gog-select [options]="members" [optionLabel]="nameOf" [optionValue]="null" [(value)]="member">
|
|
285
|
-
<ng-template gogDropdownOption let-m let-label="label">
|
|
286
|
-
{{ label }} — {{ $any(m).profile.role }}
|
|
287
|
-
</ng-template>
|
|
288
|
-
</gog-select>
|
|
289
|
-
```
|
|
290
|
-
|
|
291
|
-
The defaults are `'name'` / `'id'` / `'disabled'`, which is what `GogDropdownOption` describes —
|
|
292
|
-
so code written against that shape keeps working unchanged.
|
|
293
|
-
|
|
294
|
-
`gogTooltip` is a hover/focus tooltip directive, not a component — drop it on any element,
|
|
295
|
-
a `gog-*` component's own host tag or a plain native one
|
|
296
|
-
(`<button gogTooltip="Save changes">`, `<gog-chip [gogTooltip]="hint">`). Content is a
|
|
297
|
-
string or a `TemplateRef`; `gogTooltipPosition` (`'auto'` default, or an explicit side),
|
|
298
|
-
`gogTooltipShowDelay` (`300`ms default), `gogTooltipHideDelay` (`100`ms default) and
|
|
299
|
-
`gogTooltipDisabled` inputs, the first three also configurable app-wide via
|
|
300
|
-
`GOG_CONFIG.tooltip`.
|
|
301
|
-
|
|
302
|
-
`gog-checkbox`, `gog-inputfield`, `gog-select`, `gog-multiselect`, `gog-slider` and
|
|
303
|
-
`gog-textarea` implement `ControlValueAccessor` and are built for Reactive Forms — use
|
|
304
|
-
`[formControl]` or `formControlName`. The library itself never imports `FormsModule` or
|
|
305
|
-
uses `ngModel`; `[(ngModel)]` is not tested against these components and isn't a
|
|
306
|
-
supported usage path. With a form control attached, the error message appears once the
|
|
307
|
-
control is both touched and invalid; without one it shows for as long as `errorMessage`
|
|
308
|
-
is non-empty, and the consumer decides when to clear it.
|
|
309
|
-
|
|
310
|
-
`gog-inputfield`, `gog-select`, `gog-multiselect` and `gog-textarea` all accept a
|
|
311
|
-
`floatLabel` input — `'in'` (floats up but stays inside the border), `'on'` (floats to sit
|
|
312
|
-
centered on the top border line) or `'over'` (floats fully above the field, outside the
|
|
313
|
-
border) — plus `floatLabelShowPlaceholder` to reveal the field's own `placeholder` once the
|
|
314
|
-
label has floated out of the way (it stays hidden the whole time otherwise, since the
|
|
315
|
-
resting label already sits where it would). Both default to off/`false` and are settable
|
|
316
|
-
per instance or app-wide via `GOG_CONFIG.floatLabel`.
|
|
317
|
-
|
|
318
|
-
## License
|
|
319
|
-
|
|
320
|
-
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
A lightweight Angular 21 component library. No CDK, no Material — the only runtime
|
|
8
|
+
dependencies are `@angular/core`, `@angular/common` and `@angular/forms`.
|
|
9
|
+
|
|
10
|
+
**Tags:** angular, angular21, components, ui-library, design-system, signals, standalone, accessible
|
|
11
|
+
|
|
12
|
+
## Features
|
|
13
|
+
|
|
14
|
+
- 18 standalone components — accordion, button, checkbox, chip, collapsible, dialog,
|
|
15
|
+
icon, inputfield, multiselect, paginator, select, skeleton, slider, spinner, table,
|
|
16
|
+
tag, textarea, toast — plus `DialogService`, `ToastService` and `ThemeService`.
|
|
17
|
+
- Signal-based API throughout: `input()` / `output()` / `model()`, `OnPush` change
|
|
18
|
+
detection, no NgModules.
|
|
19
|
+
- No CDK, no Material — a small dependency footprint on top of `@angular/core`,
|
|
20
|
+
`@angular/common` and `@angular/forms`.
|
|
21
|
+
- Full theming through CSS custom properties: restyle any component, swap the whole
|
|
22
|
+
palette, or ship light/dark and custom themes at runtime via a `data-theme` attribute.
|
|
23
|
+
- `ControlValueAccessor` on every form control (checkbox, inputfield, select,
|
|
24
|
+
multiselect, slider, textarea) — built and tested against Reactive Forms (`formControl` /
|
|
25
|
+
`formControlName`). The library does not use `ngModel`/`FormsModule` anywhere itself,
|
|
26
|
+
and template-driven usage via `[(ngModel)]` is untested — CVA makes it likely to work,
|
|
27
|
+
but it isn't a supported or verified path.
|
|
28
|
+
- Accessible by default: keyboard navigation, ARIA attributes, WCAG AA contrast.
|
|
29
|
+
|
|
30
|
+
## Install
|
|
31
|
+
|
|
32
|
+
npm:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install @guildofgleks/ui
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
yarn:
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
yarn add @guildofgleks/ui
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Setup
|
|
45
|
+
|
|
46
|
+
Add the stylesheet once. It carries the baseline theme (every token the components
|
|
47
|
+
read) plus the utility classes the component templates use, so without it components
|
|
48
|
+
render unstyled.
|
|
49
|
+
|
|
50
|
+
```jsonc
|
|
51
|
+
// angular.json → projects.<app>.architect.build.options
|
|
52
|
+
"styles": [
|
|
53
|
+
"node_modules/@guildofgleks/ui/styles/index.css",
|
|
54
|
+
"src/styles.scss" // your own styles, after the baseline so they win
|
|
55
|
+
]
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Then import a component where you need it:
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
import { Component } from '@angular/core';
|
|
62
|
+
import { ButtonComponent, SelectComponent } from '@guildofgleks/ui';
|
|
63
|
+
|
|
64
|
+
@Component({
|
|
65
|
+
selector: 'app-example',
|
|
66
|
+
imports: [ButtonComponent, SelectComponent],
|
|
67
|
+
template: `
|
|
68
|
+
<gog-select label="Region" [options]="regions" [(value)]="region" />
|
|
69
|
+
<gog-button (gogClick)="save()">Save</gog-button>
|
|
70
|
+
`,
|
|
71
|
+
})
|
|
72
|
+
export class ExampleComponent {
|
|
73
|
+
/* … */
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
Outputs are prefixed with `gog` (`gogClick`, `gogToggle`) so they never collide with
|
|
78
|
+
native DOM events. Inputs keep their natural names.
|
|
79
|
+
|
|
80
|
+
## Theming
|
|
81
|
+
|
|
82
|
+
Everything is themed through CSS custom properties, and **every value the components
|
|
83
|
+
paint with lives in `styles/theme.css`** — no component stylesheet holds a colour, font,
|
|
84
|
+
border, radius, shadow, spacing or duration of its own. There are three layers:
|
|
85
|
+
|
|
86
|
+
**1. Foundation tokens** — the palette, type scale, spacing, motion and control metrics.
|
|
87
|
+
Override these to restyle everything at once; the component tokens all derive from them,
|
|
88
|
+
so a palette swap carries through without touching anything else.
|
|
89
|
+
|
|
90
|
+
<!-- tokens:start -->
|
|
91
|
+
<!-- GENERATED by scripts/generate-tokens.mjs from src/styles/theme.css — do not edit by hand. -->
|
|
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 -->
|
|
139
|
+
|
|
140
|
+
**2. Component tokens** — `--gog-<block>-*`, one block per component in `theme.css`, for
|
|
141
|
+
restyling a single component theme-wide. They cover every painted property, including
|
|
142
|
+
per-variant and per-size values (`--gog-btn-ghost-hover-bg`, `--gog-tag-lg-padding-block`,
|
|
143
|
+
`--gog-accordion-sm-chevron-size`, `--gog-skeleton-shine`, `--gog-paginator-gap`, …), plus
|
|
144
|
+
each component's font family, so a theme can decide that e.g. buttons use the body face:
|
|
145
|
+
|
|
146
|
+
```css
|
|
147
|
+
:root[data-theme='mine'] {
|
|
148
|
+
--gog-btn-font-family: var(--gog-font-body);
|
|
149
|
+
--gog-btn-font-weight: 600;
|
|
150
|
+
--gog-btn-ghost-hover-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
|
|
151
|
+
--gog-table-hover-bg: var(--gog-hover-color);
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
**3. Instance tokens** — a small set left deliberately _undeclared_ so that setting them
|
|
156
|
+
anywhere always wins over the variant/size classes. This is the per-instance escape
|
|
157
|
+
hatch:
|
|
158
|
+
|
|
159
|
+
```css
|
|
160
|
+
.my-form gog-button {
|
|
161
|
+
--gog-btn-bg: rebeccapurple; /* beats .gog-btn--primary, unlike a declared token */
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
They are `--gog-btn-{bg,color,border,shadow,hover-bg,hover-color,hover-shadow,padding,font-size,spinner-color}`,
|
|
166
|
+
`--gog-tag-{accent,bg,border,color,font-size,gap,padding-block,padding-inline,icon-size}`,
|
|
167
|
+
`--gog-chip-{font-size,gap,padding-block,padding-inline,avatar-size,icon-size,remove-size}`,
|
|
168
|
+
the per-size field hooks (`--gog-input-padding-y`, `--gog-select-control-font`,
|
|
169
|
+
`--gog-ms-font-size`, `--gog-table-td-padding-v`, `--gog-accordion-padding-y`, …),
|
|
170
|
+
`--gog-spinner-color`, and `--gog-{input,select,ms}-float-label-on-bg` (the patch masking the
|
|
171
|
+
border behind an `'on'` label).
|
|
172
|
+
|
|
173
|
+
The full list is the `INSTANCE_TOKENS` set in `scripts/check-tokens.mjs`, which is verified
|
|
174
|
+
against the stylesheets on every CI run — an instance token that gets declared anywhere, or
|
|
175
|
+
stops being read, fails the build. That check also enforces the other half of the contract:
|
|
176
|
+
**no component stylesheet carries a default in a `var()` fallback**, so every value a
|
|
177
|
+
component paints with really is discoverable in `theme.css`.
|
|
178
|
+
|
|
179
|
+
The float label's _geometry_ is not instance-layer — it is themeable per component
|
|
180
|
+
(`--gog-{input,select,ms}-float-label-{reserve,in-top,over-gap,over-reserve}`), and all three
|
|
181
|
+
derive from the shared `--gog-field-float-label-*` scale above, so one declaration retunes
|
|
182
|
+
every field at once while a single control can still be overridden on its own.
|
|
183
|
+
|
|
184
|
+
### Light and dark
|
|
185
|
+
|
|
186
|
+
The theme is selected with a `data-theme` attribute on `:root`, and `ThemeService`
|
|
187
|
+
manages it:
|
|
188
|
+
|
|
189
|
+
```ts
|
|
190
|
+
private readonly theme = inject(ThemeService);
|
|
191
|
+
this.theme.toggleTheme(); // light ⇄ dark
|
|
192
|
+
this.theme.setTheme('cyberpunk'); // any custom theme name
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
To add a theme, copy a palette block from `styles/theme.css` and change the attribute
|
|
196
|
+
value. A theme only needs to declare what it actually changes — the component tokens are
|
|
197
|
+
re-derived from whatever palette is in scope, so a swapped `--gog-accent-color` reaches every
|
|
198
|
+
component without listing any of them:
|
|
199
|
+
|
|
200
|
+
```css
|
|
201
|
+
:root[data-theme='cyberpunk'],
|
|
202
|
+
[data-theme='cyberpunk'] {
|
|
203
|
+
color-scheme: dark;
|
|
204
|
+
--gog-background-color: #050816;
|
|
205
|
+
--gog-accent-color: #ff4edb;
|
|
206
|
+
--gog-radius: 22px;
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
The second selector is what lets a theme apply to a _subtree_ rather than the whole page
|
|
211
|
+
— put `data-theme="cyberpunk"` on any element and everything inside it re-derives from
|
|
212
|
+
that palette, so one page can show several themes side by side (see the showcase's Theme
|
|
213
|
+
lab). That works because `theme.css` re-declares its derived layer on `:root, [data-theme]`:
|
|
214
|
+
a custom property's `var()` references are substituted where the property is _declared_,
|
|
215
|
+
so a derived token declared only on `:root` would freeze to the root palette.
|
|
216
|
+
|
|
217
|
+
Corollary worth knowing when writing your own themes: **anything you declare that reads
|
|
218
|
+
another token must sit on the theme scope itself**, not on `:root`, or it will not follow
|
|
219
|
+
a nested theme.
|
|
220
|
+
|
|
221
|
+
### Presets
|
|
222
|
+
|
|
223
|
+
`theme.css` ships `light` and `dark`. `slate` is a third, importable separately — a
|
|
224
|
+
palette-only theme in a cool/indigo register:
|
|
225
|
+
|
|
226
|
+
```css
|
|
227
|
+
@import '@guildofgleks/ui/styles/index.css';
|
|
228
|
+
@import '@guildofgleks/ui/styles/presets/slate.css';
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
```html
|
|
232
|
+
<html data-theme="slate"></html>
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
It is worth reading as the worked example of the contract above: it declares **only palette
|
|
236
|
+
tokens** — no `--gog-btn-*`, no `--gog-table-*` — and still restyles every component, because
|
|
237
|
+
the derived layer re-resolves against whatever palette is in scope. If a theme of yours needs to
|
|
238
|
+
list component tokens, that usually means the derived layer is missing something rather than
|
|
239
|
+
that the theme needs to be longer.
|
|
240
|
+
|
|
241
|
+
### Optional font preset
|
|
242
|
+
|
|
243
|
+
`styles/index.css` intentionally leaves fonts alone — generic system stacks, no webfont
|
|
244
|
+
download. For the showcase's typography (Cinzel / Inter / JetBrains Mono, pulled from
|
|
245
|
+
Google Fonts) add `@guildofgleks/ui/styles/fonts.css` as well.
|
|
246
|
+
|
|
247
|
+
## Components
|
|
248
|
+
|
|
249
|
+
`gog-accordion`, `gog-button`, `gog-checkbox`, `gog-chip`, `gog-collapsible`, `gog-dialog`,
|
|
250
|
+
`gog-icon`, `gog-inputfield`, `gog-multiselect`, `gog-paginator`, `gog-radio-group`,
|
|
251
|
+
`gog-scroll`, `gog-select`, `gog-skeleton`, `gog-slider`, `gog-spinner`, `gog-spinner-overlay`,
|
|
252
|
+
`gog-table`, `gog-tag`, `gog-textarea`, `gog-toast`.
|
|
253
|
+
|
|
254
|
+
Directives: `gogCollapsibleTrigger`, `gogCollapsibleContent`, `gogTooltip`.
|
|
255
|
+
|
|
256
|
+
Services: `DialogService`, `ToastService`, `ThemeService`.
|
|
257
|
+
|
|
258
|
+
`gog-collapsible` is a headless expand/collapse primitive — no owned markup, no portal.
|
|
259
|
+
Project any element as the trigger via `gogCollapsibleTrigger` and any element as the
|
|
260
|
+
panel via `gogCollapsibleContent`; `[(open)]` is two-way bindable. Useful for anything
|
|
261
|
+
that needs an inline expanding region without the overlay behavior of `gog-select`/
|
|
262
|
+
`gog-multiselect` — e.g. a collapsible group of links in a nav sidebar.
|
|
263
|
+
|
|
264
|
+
### Options come from your own objects
|
|
265
|
+
|
|
266
|
+
`gog-select` and `gog-multiselect` do not require a `{ id, name }` shape. `optionLabel`,
|
|
267
|
+
`optionValue` and `optionDisabled` each take a property path — dot-paths included — or a
|
|
268
|
+
function:
|
|
269
|
+
|
|
270
|
+
```html
|
|
271
|
+
<gog-select
|
|
272
|
+
[options]="members"
|
|
273
|
+
optionLabel="profile.fullName"
|
|
274
|
+
optionValue="uuid"
|
|
275
|
+
optionDisabled="suspended"
|
|
276
|
+
[(value)]="memberId"
|
|
277
|
+
/>
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
Set `[optionValue]="null"` and the control emits the option object itself, so a selection round-trips
|
|
281
|
+
without a lookup table:
|
|
282
|
+
|
|
283
|
+
```html
|
|
284
|
+
<gog-select [options]="members" [optionLabel]="nameOf" [optionValue]="null" [(value)]="member">
|
|
285
|
+
<ng-template gogDropdownOption let-m let-label="label">
|
|
286
|
+
{{ label }} — {{ $any(m).profile.role }}
|
|
287
|
+
</ng-template>
|
|
288
|
+
</gog-select>
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
The defaults are `'name'` / `'id'` / `'disabled'`, which is what `GogDropdownOption` describes —
|
|
292
|
+
so code written against that shape keeps working unchanged.
|
|
293
|
+
|
|
294
|
+
`gogTooltip` is a hover/focus tooltip directive, not a component — drop it on any element,
|
|
295
|
+
a `gog-*` component's own host tag or a plain native one
|
|
296
|
+
(`<button gogTooltip="Save changes">`, `<gog-chip [gogTooltip]="hint">`). Content is a
|
|
297
|
+
string or a `TemplateRef`; `gogTooltipPosition` (`'auto'` default, or an explicit side),
|
|
298
|
+
`gogTooltipShowDelay` (`300`ms default), `gogTooltipHideDelay` (`100`ms default) and
|
|
299
|
+
`gogTooltipDisabled` inputs, the first three also configurable app-wide via
|
|
300
|
+
`GOG_CONFIG.tooltip`.
|
|
301
|
+
|
|
302
|
+
`gog-checkbox`, `gog-inputfield`, `gog-select`, `gog-multiselect`, `gog-slider` and
|
|
303
|
+
`gog-textarea` implement `ControlValueAccessor` and are built for Reactive Forms — use
|
|
304
|
+
`[formControl]` or `formControlName`. The library itself never imports `FormsModule` or
|
|
305
|
+
uses `ngModel`; `[(ngModel)]` is not tested against these components and isn't a
|
|
306
|
+
supported usage path. With a form control attached, the error message appears once the
|
|
307
|
+
control is both touched and invalid; without one it shows for as long as `errorMessage`
|
|
308
|
+
is non-empty, and the consumer decides when to clear it.
|
|
309
|
+
|
|
310
|
+
`gog-inputfield`, `gog-select`, `gog-multiselect` and `gog-textarea` all accept a
|
|
311
|
+
`floatLabel` input — `'in'` (floats up but stays inside the border), `'on'` (floats to sit
|
|
312
|
+
centered on the top border line) or `'over'` (floats fully above the field, outside the
|
|
313
|
+
border) — plus `floatLabelShowPlaceholder` to reveal the field's own `placeholder` once the
|
|
314
|
+
label has floated out of the way (it stays hidden the whole time otherwise, since the
|
|
315
|
+
resting label already sits where it would). Both default to off/`false` and are settable
|
|
316
|
+
per instance or app-wide via `GOG_CONFIG.floatLabel`.
|
|
317
|
+
|
|
318
|
+
## License
|
|
319
|
+
|
|
320
|
+
Apache-2.0 © Roman Malitskyi
|