@guildofgleks/ui 21.2.4 → 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 +139 -23
- package/fesm2022/guildofgleks-ui.mjs +7042 -1707
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +2 -2
- package/src/styles/index.css +17 -17
- package/src/styles/presets/one-dark.css +48 -0
- package/src/styles/presets/one-light.css +47 -0
- package/src/styles/presets/slate.css +55 -0
- package/src/styles/theme.css +723 -40
- package/src/styles/utilities.css +170 -69
- package/types/guildofgleks-ui.d.ts +2429 -336
package/README.md
CHANGED
|
@@ -87,19 +87,55 @@ border, radius, shadow, spacing or duration of its own. There are three layers:
|
|
|
87
87
|
Override these to restyle everything at once; the component tokens all derive from them,
|
|
88
88
|
so a palette swap carries through without touching anything else.
|
|
89
89
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
|
102
|
-
|
|
|
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 -->
|
|
103
139
|
|
|
104
140
|
**2. Component tokens** — `--gog-<block>-*`, one block per component in `theme.css`, for
|
|
105
141
|
restyling a single component theme-wide. They cover every painted property, including
|
|
@@ -116,13 +152,13 @@ each component's font family, so a theme can decide that e.g. buttons use the bo
|
|
|
116
152
|
}
|
|
117
153
|
```
|
|
118
154
|
|
|
119
|
-
**3. Instance tokens** — a small set left deliberately
|
|
155
|
+
**3. Instance tokens** — a small set left deliberately _undeclared_ so that setting them
|
|
120
156
|
anywhere always wins over the variant/size classes. This is the per-instance escape
|
|
121
157
|
hatch:
|
|
122
158
|
|
|
123
159
|
```css
|
|
124
160
|
.my-form gog-button {
|
|
125
|
-
--gog-btn-bg: rebeccapurple;
|
|
161
|
+
--gog-btn-bg: rebeccapurple; /* beats .gog-btn--primary, unlike a declared token */
|
|
126
162
|
}
|
|
127
163
|
```
|
|
128
164
|
|
|
@@ -130,8 +166,20 @@ They are `--gog-btn-{bg,color,border,shadow,hover-bg,hover-color,hover-shadow,pa
|
|
|
130
166
|
`--gog-tag-{accent,bg,border,color,font-size,gap,padding-block,padding-inline,icon-size}`,
|
|
131
167
|
`--gog-chip-{font-size,gap,padding-block,padding-inline,avatar-size,icon-size,remove-size}`,
|
|
132
168
|
the per-size field hooks (`--gog-input-padding-y`, `--gog-select-control-font`,
|
|
133
|
-
`--gog-ms-font-size`, `--gog-table-td-padding-v`, `--gog-accordion-padding-y`, …)
|
|
134
|
-
`--gog-spinner-color
|
|
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.
|
|
135
183
|
|
|
136
184
|
### Light and dark
|
|
137
185
|
|
|
@@ -159,17 +207,37 @@ component without listing any of them:
|
|
|
159
207
|
}
|
|
160
208
|
```
|
|
161
209
|
|
|
162
|
-
The second selector is what lets a theme apply to a
|
|
210
|
+
The second selector is what lets a theme apply to a _subtree_ rather than the whole page
|
|
163
211
|
— put `data-theme="cyberpunk"` on any element and everything inside it re-derives from
|
|
164
212
|
that palette, so one page can show several themes side by side (see the showcase's Theme
|
|
165
213
|
lab). That works because `theme.css` re-declares its derived layer on `:root, [data-theme]`:
|
|
166
|
-
a custom property's `var()` references are substituted where the property is
|
|
214
|
+
a custom property's `var()` references are substituted where the property is _declared_,
|
|
167
215
|
so a derived token declared only on `:root` would freeze to the root palette.
|
|
168
216
|
|
|
169
217
|
Corollary worth knowing when writing your own themes: **anything you declare that reads
|
|
170
218
|
another token must sit on the theme scope itself**, not on `:root`, or it will not follow
|
|
171
219
|
a nested theme.
|
|
172
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
|
+
|
|
173
241
|
### Optional font preset
|
|
174
242
|
|
|
175
243
|
`styles/index.css` intentionally leaves fonts alone — generic system stacks, no webfont
|
|
@@ -179,9 +247,11 @@ Google Fonts) add `@guildofgleks/ui/styles/fonts.css` as well.
|
|
|
179
247
|
## Components
|
|
180
248
|
|
|
181
249
|
`gog-accordion`, `gog-button`, `gog-checkbox`, `gog-chip`, `gog-collapsible`, `gog-dialog`,
|
|
182
|
-
`gog-icon`, `gog-inputfield`, `gog-multiselect`, `gog-paginator`, `gog-
|
|
183
|
-
`gog-
|
|
184
|
-
`gog-textarea`, `gog-toast`.
|
|
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`.
|
|
185
255
|
|
|
186
256
|
Services: `DialogService`, `ToastService`, `ThemeService`.
|
|
187
257
|
|
|
@@ -191,6 +261,44 @@ panel via `gogCollapsibleContent`; `[(open)]` is two-way bindable. Useful for an
|
|
|
191
261
|
that needs an inline expanding region without the overlay behavior of `gog-select`/
|
|
192
262
|
`gog-multiselect` — e.g. a collapsible group of links in a nav sidebar.
|
|
193
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
|
+
|
|
194
302
|
`gog-checkbox`, `gog-inputfield`, `gog-select`, `gog-multiselect`, `gog-slider` and
|
|
195
303
|
`gog-textarea` implement `ControlValueAccessor` and are built for Reactive Forms — use
|
|
196
304
|
`[formControl]` or `formControlName`. The library itself never imports `FormsModule` or
|
|
@@ -199,6 +307,14 @@ supported usage path. With a form control attached, the error message appears on
|
|
|
199
307
|
control is both touched and invalid; without one it shows for as long as `errorMessage`
|
|
200
308
|
is non-empty, and the consumer decides when to clear it.
|
|
201
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
|
+
|
|
202
318
|
## License
|
|
203
319
|
|
|
204
|
-
|
|
320
|
+
Apache-2.0 © Roman Malitskyi
|