create-bestax 3.3.2 → 3.3.3
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/package.json
CHANGED
|
@@ -96,9 +96,10 @@ and numeric shades `--bulma-<c>-00` … `--bulma-<c>-95`.
|
|
|
96
96
|
| `--bulma-size-small` / `-normal` / `-medium` / `-large` | 0.75 / 1 / 1.25 / 1.5rem | via `bulmaVars` |
|
|
97
97
|
| `--bulma-weight-light/normal/medium/semibold/bold/extrabold` | 300 / 400 / 500 / 600 / 700 / 800 | via `bulmaVars` |
|
|
98
98
|
|
|
99
|
-
## Extras component variables
|
|
99
|
+
## Extras component variables
|
|
100
100
|
|
|
101
|
-
|
|
101
|
+
Every "Beyond Bulma" extra registers its own `--bulma-<component>-*` variables. They are
|
|
102
|
+
registered on the component's **own selector** (`.avatar`, `.dialog`, `.tooltip`, … —
|
|
102
103
|
`.bestax-avatar` etc. with the prefixed CSS flavor), not on `:root`. A value set on a wrapping
|
|
103
104
|
ancestor — including `Theme`'s `bulmaVars` on a wrapping `Theme` — is only _inherited_ and
|
|
104
105
|
always loses to the component-level declaration, so it will NOT take effect. Working overrides
|
|
@@ -108,6 +109,8 @@ target the component's own element instead: redeclare on the component's own cla
|
|
|
108
109
|
(`.avatar.big-avatar { --bulma-avatar-size: 3.5rem; }`), or set it via the component's `style`
|
|
109
110
|
prop. Several default to core theme vars above, so they already flow through a custom theme.
|
|
110
111
|
|
|
112
|
+
### Avatar / Avatars / Badge
|
|
113
|
+
|
|
111
114
|
| Variable | Default |
|
|
112
115
|
| ----------------------------------------------------------------- | -------------------------------- |
|
|
113
116
|
| `--bulma-avatar-size` | `48px` |
|
|
@@ -123,6 +126,238 @@ prop. Several default to core theme vars above, so they already flow through a c
|
|
|
123
126
|
| `--bulma-badge-dot-size` | `0.65em` |
|
|
124
127
|
| `--bulma-badge-inset-circle` / `--bulma-badge-animation-duration` | `12%` / `1.4s` |
|
|
125
128
|
|
|
129
|
+
The remaining extras register the variables below — names only; each default lives in the
|
|
130
|
+
component's SCSS partial under `bulma-ui/src/scss/` as a `$<name> !default` variable. The same
|
|
131
|
+
own-selector override rule applies.
|
|
132
|
+
|
|
133
|
+
### Autocomplete
|
|
134
|
+
|
|
135
|
+
`--bulma-autocomplete-border-color`, `--bulma-autocomplete-border-hover-color`,
|
|
136
|
+
`--bulma-autocomplete-dropdown-background`, `--bulma-autocomplete-dropdown-offset`,
|
|
137
|
+
`--bulma-autocomplete-dropdown-padding-y`, `--bulma-autocomplete-dropdown-radius`,
|
|
138
|
+
`--bulma-autocomplete-dropdown-shadow`, `--bulma-autocomplete-dropdown-z-index`,
|
|
139
|
+
`--bulma-autocomplete-empty-color`, `--bulma-autocomplete-header-footer-color`,
|
|
140
|
+
`--bulma-autocomplete-header-footer-padding`, `--bulma-autocomplete-header-footer-size`,
|
|
141
|
+
`--bulma-autocomplete-icon-hover-color`, `--bulma-autocomplete-item-color`,
|
|
142
|
+
`--bulma-autocomplete-item-disabled-color`, `--bulma-autocomplete-item-disabled-opacity`,
|
|
143
|
+
`--bulma-autocomplete-item-hover-background`, `--bulma-autocomplete-item-hover-color`,
|
|
144
|
+
`--bulma-autocomplete-item-large-padding`, `--bulma-autocomplete-item-medium-padding`,
|
|
145
|
+
`--bulma-autocomplete-item-padding`, `--bulma-autocomplete-item-small-padding`,
|
|
146
|
+
`--bulma-autocomplete-loader-active-color`, `--bulma-autocomplete-loader-border-color`,
|
|
147
|
+
`--bulma-autocomplete-loader-duration`, `--bulma-autocomplete-scrollbar-thumb`,
|
|
148
|
+
`--bulma-autocomplete-scrollbar-thumb-hover`, `--bulma-autocomplete-scrollbar-track`,
|
|
149
|
+
`--bulma-autocomplete-scrollbar-width`
|
|
150
|
+
|
|
151
|
+
### Carousel
|
|
152
|
+
|
|
153
|
+
`--bulma-carousel-arrow-background`, `--bulma-carousel-arrow-background-hover`,
|
|
154
|
+
`--bulma-carousel-arrow-color`, `--bulma-carousel-arrow-disabled-opacity`,
|
|
155
|
+
`--bulma-carousel-arrow-icon-size`, `--bulma-carousel-arrow-icon-size-mobile`,
|
|
156
|
+
`--bulma-carousel-arrow-offset`, `--bulma-carousel-arrow-offset-mobile`,
|
|
157
|
+
`--bulma-carousel-arrow-radius`, `--bulma-carousel-arrow-size`,
|
|
158
|
+
`--bulma-carousel-arrow-size-mobile`, `--bulma-carousel-fade-duration`,
|
|
159
|
+
`--bulma-carousel-indicator-background`, `--bulma-carousel-indicator-background-active`,
|
|
160
|
+
`--bulma-carousel-indicator-background-hover`, `--bulma-carousel-indicator-bar-height`,
|
|
161
|
+
`--bulma-carousel-indicator-bar-height-mobile`, `--bulma-carousel-indicator-bar-width`,
|
|
162
|
+
`--bulma-carousel-indicator-bar-width-mobile`, `--bulma-carousel-indicator-circle-size`,
|
|
163
|
+
`--bulma-carousel-indicator-gap`, `--bulma-carousel-indicator-gap-mobile`,
|
|
164
|
+
`--bulma-carousel-indicator-line-height`, `--bulma-carousel-indicator-line-height-mobile`,
|
|
165
|
+
`--bulma-carousel-indicator-line-radius`, `--bulma-carousel-indicator-line-width`,
|
|
166
|
+
`--bulma-carousel-indicator-line-width-mobile`, `--bulma-carousel-indicator-size`,
|
|
167
|
+
`--bulma-carousel-indicator-size-mobile`, `--bulma-carousel-overlay-arrow-background`,
|
|
168
|
+
`--bulma-carousel-overlay-arrow-background-hover`, `--bulma-carousel-overlay-arrow-color`,
|
|
169
|
+
`--bulma-carousel-overlay-indicator-background`,
|
|
170
|
+
`--bulma-carousel-overlay-indicator-background-active`,
|
|
171
|
+
`--bulma-carousel-overlay-indicator-background-hover`, `--bulma-carousel-transition-duration`
|
|
172
|
+
|
|
173
|
+
### Checkbox
|
|
174
|
+
|
|
175
|
+
`--bulma-checkbox-active-color`, `--bulma-checkbox-background`, `--bulma-checkbox-border-color`,
|
|
176
|
+
`--bulma-checkbox-border-width`, `--bulma-checkbox-check-color`,
|
|
177
|
+
`--bulma-checkbox-focus-shadow-size`, `--bulma-checkbox-indeterminate-color`,
|
|
178
|
+
`--bulma-checkbox-label-gap`, `--bulma-checkbox-radius`, `--bulma-checkbox-size`,
|
|
179
|
+
`--bulma-checkbox-transition-duration`
|
|
180
|
+
|
|
181
|
+
### Collapse
|
|
182
|
+
|
|
183
|
+
`--bulma-collapse-border-color`, `--bulma-collapse-group-gap`, `--bulma-collapse-header-weight`,
|
|
184
|
+
`--bulma-collapse-margin-bottom`, `--bulma-collapse-radius`,
|
|
185
|
+
`--bulma-collapse-trigger-icon-margin`, `--bulma-collapse-trigger-icon-size`
|
|
186
|
+
|
|
187
|
+
### DateInput
|
|
188
|
+
|
|
189
|
+
`--bulma-dateinput-cell-color`, `--bulma-dateinput-cell-disabled-color`,
|
|
190
|
+
`--bulma-dateinput-cell-hover-bg`, `--bulma-dateinput-cell-other-month-color`,
|
|
191
|
+
`--bulma-dateinput-cell-radius`, `--bulma-dateinput-cell-selected-bg`,
|
|
192
|
+
`--bulma-dateinput-cell-selected-color`, `--bulma-dateinput-cell-size`,
|
|
193
|
+
`--bulma-dateinput-cell-today-color`, `--bulma-dateinput-day-name-color`,
|
|
194
|
+
`--bulma-dateinput-day-name-size`, `--bulma-dateinput-header-padding`,
|
|
195
|
+
`--bulma-dateinput-min-width`, `--bulma-dateinput-nav-button-size`
|
|
196
|
+
|
|
197
|
+
### DateTimeInput
|
|
198
|
+
|
|
199
|
+
`--bulma-datetimeinput-gap`, `--bulma-datetimeinput-time-card-background`,
|
|
200
|
+
`--bulma-datetimeinput-time-card-border-color`, `--bulma-datetimeinput-time-card-padding`,
|
|
201
|
+
`--bulma-datetimeinput-time-card-radius`, `--bulma-datetimeinput-time-card-shadow`,
|
|
202
|
+
`--bulma-datetimeinput-time-overlay-background`, `--bulma-datetimeinput-time-overlay-blur`
|
|
203
|
+
|
|
204
|
+
### Dialog
|
|
205
|
+
|
|
206
|
+
`--bulma-dialog-animation-duration`, `--bulma-dialog-background`, `--bulma-dialog-body-color`,
|
|
207
|
+
`--bulma-dialog-body-line-height`, `--bulma-dialog-body-padding`, `--bulma-dialog-border-color`,
|
|
208
|
+
`--bulma-dialog-footer-gap`, `--bulma-dialog-footer-padding`, `--bulma-dialog-header-padding`,
|
|
209
|
+
`--bulma-dialog-icon-margin`, `--bulma-dialog-icon-size`, `--bulma-dialog-max-width`,
|
|
210
|
+
`--bulma-dialog-radius`, `--bulma-dialog-shadow`, `--bulma-dialog-title-color`,
|
|
211
|
+
`--bulma-dialog-title-size`, `--bulma-dialog-title-weight`, `--bulma-dialog-width`
|
|
212
|
+
|
|
213
|
+
### LinkButton
|
|
214
|
+
|
|
215
|
+
`--bulma-link-button-ghost-color`, `--bulma-link-button-ghost-hover-color`,
|
|
216
|
+
`--bulma-link-button-transition-duration`, `--bulma-link-button-underline-offset`
|
|
217
|
+
|
|
218
|
+
### Loading
|
|
219
|
+
|
|
220
|
+
`--bulma-loading-animation-duration`, `--bulma-loading-cancel-background`,
|
|
221
|
+
`--bulma-loading-cancel-border-color`, `--bulma-loading-cancel-color`,
|
|
222
|
+
`--bulma-loading-cancel-hover-border-color`, `--bulma-loading-cancel-hover-color`,
|
|
223
|
+
`--bulma-loading-cancel-radius`, `--bulma-loading-cancel-size`, `--bulma-loading-content-gap`,
|
|
224
|
+
`--bulma-loading-icon-border-width`, `--bulma-loading-icon-border-width-large`,
|
|
225
|
+
`--bulma-loading-icon-border-width-medium`, `--bulma-loading-icon-border-width-small`,
|
|
226
|
+
`--bulma-loading-icon-size`, `--bulma-loading-icon-size-large`,
|
|
227
|
+
`--bulma-loading-icon-size-medium`, `--bulma-loading-icon-size-small`,
|
|
228
|
+
`--bulma-loading-icon-spin-color`, `--bulma-loading-overlay-background`,
|
|
229
|
+
`--bulma-loading-overlay-fullpage-opacity`, `--bulma-loading-overlay-opacity`,
|
|
230
|
+
`--bulma-loading-overlay-opacity-dark`, `--bulma-loading-overlay-opacity-light`,
|
|
231
|
+
`--bulma-loading-overlay-opacity-opaque`, `--bulma-loading-text-color`,
|
|
232
|
+
`--bulma-loading-text-size`
|
|
233
|
+
|
|
234
|
+
### Numberinput
|
|
235
|
+
|
|
236
|
+
`--bulma-numberinput-disabled-opacity`, `--bulma-numberinput-rounded-button-size`,
|
|
237
|
+
`--bulma-numberinput-stepper-border-color`, `--bulma-numberinput-stepper-button-color`,
|
|
238
|
+
`--bulma-numberinput-stepper-button-hover-bg`, `--bulma-numberinput-stepper-button-hover-color`,
|
|
239
|
+
`--bulma-numberinput-stepper-width`
|
|
240
|
+
|
|
241
|
+
### Picker popover (DateInput / TimeInput / DateTimeInput)
|
|
242
|
+
|
|
243
|
+
`--bulma-picker-popover-animation-duration`, `--bulma-picker-popover-background`,
|
|
244
|
+
`--bulma-picker-popover-border-color`, `--bulma-picker-popover-offset`,
|
|
245
|
+
`--bulma-picker-popover-padding`, `--bulma-picker-popover-radius`,
|
|
246
|
+
`--bulma-picker-popover-shadow`, `--bulma-picker-popover-z-index`,
|
|
247
|
+
`--bulma-picker-trigger-color`, `--bulma-picker-trigger-hover-color`,
|
|
248
|
+
`--bulma-picker-trigger-width`
|
|
249
|
+
|
|
250
|
+
### Radio
|
|
251
|
+
|
|
252
|
+
`--bulma-radio-active-color`, `--bulma-radio-background`, `--bulma-radio-border-color`,
|
|
253
|
+
`--bulma-radio-border-width`, `--bulma-radio-dot-color`, `--bulma-radio-focus-shadow-size`,
|
|
254
|
+
`--bulma-radio-label-gap`, `--bulma-radio-size`, `--bulma-radio-transition-duration`
|
|
255
|
+
|
|
256
|
+
### Rate
|
|
257
|
+
|
|
258
|
+
`--bulma-rate-color-active`, `--bulma-rate-color-hover`, `--bulma-rate-color-inactive`,
|
|
259
|
+
`--bulma-rate-disabled-opacity`, `--bulma-rate-font-icon-size`,
|
|
260
|
+
`--bulma-rate-font-icon-size-large`, `--bulma-rate-font-icon-size-medium`,
|
|
261
|
+
`--bulma-rate-font-icon-size-small`, `--bulma-rate-gap`, `--bulma-rate-icon-size`,
|
|
262
|
+
`--bulma-rate-icon-size-large`, `--bulma-rate-icon-size-medium`, `--bulma-rate-icon-size-small`,
|
|
263
|
+
`--bulma-rate-pop-scale`, `--bulma-rate-score-color`, `--bulma-rate-score-weight`,
|
|
264
|
+
`--bulma-rate-spaced-gap`, `--bulma-rate-text-color`, `--bulma-rate-text-size`,
|
|
265
|
+
`--bulma-rate-transition-duration`
|
|
266
|
+
|
|
267
|
+
### Reveal
|
|
268
|
+
|
|
269
|
+
`--bulma-reveal-duration`, `--bulma-reveal-easing`, `--bulma-reveal-flip-angle`,
|
|
270
|
+
`--bulma-reveal-offset`, `--bulma-reveal-offset-large`, `--bulma-reveal-scale`
|
|
271
|
+
|
|
272
|
+
### Sidebar
|
|
273
|
+
|
|
274
|
+
`--bulma-sidebar-background`, `--bulma-sidebar-close-color`,
|
|
275
|
+
`--bulma-sidebar-close-hover-background`, `--bulma-sidebar-close-line-width`,
|
|
276
|
+
`--bulma-sidebar-close-radius`, `--bulma-sidebar-close-size`, `--bulma-sidebar-content-padding`,
|
|
277
|
+
`--bulma-sidebar-footer-border-color`, `--bulma-sidebar-footer-margin-top`,
|
|
278
|
+
`--bulma-sidebar-footer-padding`, `--bulma-sidebar-header-border-color`,
|
|
279
|
+
`--bulma-sidebar-header-margin-bottom`, `--bulma-sidebar-header-padding`,
|
|
280
|
+
`--bulma-sidebar-menu-item-active-background`, `--bulma-sidebar-menu-item-active-color`,
|
|
281
|
+
`--bulma-sidebar-menu-item-hover-background`, `--bulma-sidebar-menu-item-padding`,
|
|
282
|
+
`--bulma-sidebar-menu-item-radius`, `--bulma-sidebar-overlay-background`,
|
|
283
|
+
`--bulma-sidebar-scrollbar-color`, `--bulma-sidebar-scrollbar-color-hover`,
|
|
284
|
+
`--bulma-sidebar-scrollbar-width`, `--bulma-sidebar-shadow`,
|
|
285
|
+
`--bulma-sidebar-static-border-color`, `--bulma-sidebar-title-color`,
|
|
286
|
+
`--bulma-sidebar-title-size`, `--bulma-sidebar-title-weight`,
|
|
287
|
+
`--bulma-sidebar-transition-duration`, `--bulma-sidebar-width`
|
|
288
|
+
|
|
289
|
+
### Slider
|
|
290
|
+
|
|
291
|
+
`--bulma-slider-disabled-opacity`, `--bulma-slider-fill-color`,
|
|
292
|
+
`--bulma-slider-output-background`, `--bulma-slider-output-color`,
|
|
293
|
+
`--bulma-slider-output-font-size`, `--bulma-slider-output-font-weight`, `--bulma-slider-radius`,
|
|
294
|
+
`--bulma-slider-thumb-border`, `--bulma-slider-thumb-color`, `--bulma-slider-thumb-shadow`,
|
|
295
|
+
`--bulma-slider-thumb-size`, `--bulma-slider-thumb-size-large`,
|
|
296
|
+
`--bulma-slider-thumb-size-medium`, `--bulma-slider-thumb-size-small`,
|
|
297
|
+
`--bulma-slider-tick-color`, `--bulma-slider-tick-height`, `--bulma-slider-tick-label-color`,
|
|
298
|
+
`--bulma-slider-tick-label-font-size`, `--bulma-slider-tick-opacity`,
|
|
299
|
+
`--bulma-slider-tick-width`, `--bulma-slider-track-color`, `--bulma-slider-track-height`,
|
|
300
|
+
`--bulma-slider-track-height-large`, `--bulma-slider-track-height-medium`,
|
|
301
|
+
`--bulma-slider-track-height-small`, `--bulma-slider-transition-duration`,
|
|
302
|
+
`--bulma-slider-vertical-height`
|
|
303
|
+
|
|
304
|
+
### Steps
|
|
305
|
+
|
|
306
|
+
`--bulma-steps-animation-duration`, `--bulma-steps-content-margin-top`,
|
|
307
|
+
`--bulma-steps-default-color`, `--bulma-steps-divider-height`, `--bulma-steps-marker-background`,
|
|
308
|
+
`--bulma-steps-marker-font-size`, `--bulma-steps-marker-font-weight`,
|
|
309
|
+
`--bulma-steps-marker-size`, `--bulma-steps-marker-size-large`,
|
|
310
|
+
`--bulma-steps-marker-size-medium`, `--bulma-steps-marker-size-small`,
|
|
311
|
+
`--bulma-steps-navigation-margin-top`, `--bulma-steps-title-active-color`,
|
|
312
|
+
`--bulma-steps-title-active-weight`, `--bulma-steps-title-color`, `--bulma-steps-title-size`,
|
|
313
|
+
`--bulma-steps-title-weight`, `--bulma-steps-vertical-content-margin-left`,
|
|
314
|
+
`--bulma-steps-vertical-padding`
|
|
315
|
+
|
|
316
|
+
### Switch
|
|
317
|
+
|
|
318
|
+
`--bulma-switch-active-color`, `--bulma-switch-background`, `--bulma-switch-border-width`,
|
|
319
|
+
`--bulma-switch-circle-color`, `--bulma-switch-circle-shadow`, `--bulma-switch-focus-shadow`,
|
|
320
|
+
`--bulma-switch-height`, `--bulma-switch-label-gap`, `--bulma-switch-padding`,
|
|
321
|
+
`--bulma-switch-radius`, `--bulma-switch-thin-circle-size`, `--bulma-switch-thin-height`,
|
|
322
|
+
`--bulma-switch-transition-duration`, `--bulma-switch-width`
|
|
323
|
+
|
|
324
|
+
### Tabs
|
|
325
|
+
|
|
326
|
+
`--bulma-tabs-content-padding`, `--bulma-tabs-vertical-border-color`,
|
|
327
|
+
`--bulma-tabs-vertical-border-width`, `--bulma-tabs-vertical-min-width`
|
|
328
|
+
|
|
329
|
+
### Taginput
|
|
330
|
+
|
|
331
|
+
`--bulma-taginput-background`, `--bulma-taginput-border-color`, `--bulma-taginput-border-radius`,
|
|
332
|
+
`--bulma-taginput-dropdown-max-height`, `--bulma-taginput-height`, `--bulma-taginput-min-height`,
|
|
333
|
+
`--bulma-taginput-padding`, `--bulma-taginput-tag-gap`, `--bulma-taginput-transition-duration`
|
|
334
|
+
|
|
335
|
+
### TimeInput
|
|
336
|
+
|
|
337
|
+
`--bulma-timeinput-footer-padding`, `--bulma-timeinput-separator-color`,
|
|
338
|
+
`--bulma-timeinput-separator-size`, `--bulma-timeinput-wheel-bg`,
|
|
339
|
+
`--bulma-timeinput-wheel-color`, `--bulma-timeinput-wheel-dim-color`,
|
|
340
|
+
`--bulma-timeinput-wheel-gap`, `--bulma-timeinput-wheel-hover-bg`,
|
|
341
|
+
`--bulma-timeinput-wheel-item-height`, `--bulma-timeinput-wheel-mask`,
|
|
342
|
+
`--bulma-timeinput-wheel-radius`, `--bulma-timeinput-wheel-selected-bg`,
|
|
343
|
+
`--bulma-timeinput-wheel-selected-color`, `--bulma-timeinput-wheel-width`
|
|
344
|
+
|
|
345
|
+
### Toast
|
|
346
|
+
|
|
347
|
+
`--bulma-toast-action-hover-opacity`, `--bulma-toast-action-radius`,
|
|
348
|
+
`--bulma-toast-action-weight`, `--bulma-toast-animation-duration`, `--bulma-toast-background`,
|
|
349
|
+
`--bulma-toast-color`, `--bulma-toast-gap`, `--bulma-toast-max-width`,
|
|
350
|
+
`--bulma-toast-message-size`, `--bulma-toast-min-width`, `--bulma-toast-padding`,
|
|
351
|
+
`--bulma-toast-radius`, `--bulma-toast-shadow`
|
|
352
|
+
|
|
353
|
+
### Tooltip
|
|
354
|
+
|
|
355
|
+
`--bulma-tooltip-arrow-margin`, `--bulma-tooltip-arrow-size`, `--bulma-tooltip-background`,
|
|
356
|
+
`--bulma-tooltip-color`, `--bulma-tooltip-dashed-color`, `--bulma-tooltip-font-size`,
|
|
357
|
+
`--bulma-tooltip-font-weight`, `--bulma-tooltip-line-height`, `--bulma-tooltip-max-width`,
|
|
358
|
+
`--bulma-tooltip-multiline-width`, `--bulma-tooltip-padding`, `--bulma-tooltip-radius`,
|
|
359
|
+
`--bulma-tooltip-z-index`
|
|
360
|
+
|
|
126
361
|
## Dark mode (`Theme colorMode`)
|
|
127
362
|
|
|
128
363
|
Drive the light/dark scheme with the `Theme` component's **`colorMode`** prop —
|
|
@@ -28,18 +28,43 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
|
|
|
28
28
|
|
|
29
29
|
## Component `color` / `size` props (verbatim unions)
|
|
30
30
|
|
|
31
|
-
| Component
|
|
32
|
-
|
|
|
33
|
-
| `Button`
|
|
34
|
-
| `Notification`
|
|
35
|
-
| `Tag`
|
|
36
|
-
| `Box`
|
|
37
|
-
| `Message`
|
|
38
|
-
| `Input`
|
|
39
|
-
| `Avatar`
|
|
40
|
-
| `Badge`
|
|
41
|
-
| `Title`
|
|
42
|
-
| `SubTitle`
|
|
31
|
+
| Component | `color` accepts | `size` accepts | Notes |
|
|
32
|
+
| ------------------ | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
|
|
33
|
+
| `Button` | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black \| text \| ghost` | `small \| normal \| medium \| large` | adds `text`, `ghost`; also `isLight`, `isOutlined`, `isInverted`, `isRounded` |
|
|
34
|
+
| `Notification` | the 17 `validColors` | — | also `isLight` |
|
|
35
|
+
| `Tag` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `normal \| medium \| large` | also `isRounded`, `isDelete`, `isHoverable` |
|
|
36
|
+
| `Box` | `primary \| link \| info \| success \| warning \| danger` | — | the 6 only; also `hasShadow` |
|
|
37
|
+
| `Message` | `primary \| link \| info \| success \| warning \| danger` | — | the 6 only |
|
|
38
|
+
| `Input` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isRounded`, `isStatic` |
|
|
39
|
+
| `Avatar` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `16x16 \| 24x24 \| 32x32 \| 48x48 \| 64x64 \| 96x96 \| 128x128 \| number` | initials/icon background (auto-derived from `name` when unset); also `shape` |
|
|
40
|
+
| `Badge` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | pill background; default `danger` |
|
|
41
|
+
| `Title` | — (no `color`; use `textColor`) | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | also `isSpaced` |
|
|
42
|
+
| `SubTitle` | — (no `color`; use `textColor`) | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | — |
|
|
43
|
+
| `Autocomplete` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
44
|
+
| `Checkbox` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | the 6 only |
|
|
45
|
+
| `DateInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded` |
|
|
46
|
+
| `DateTimeInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded` |
|
|
47
|
+
| `File` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isBoxed`, `isFullwidth` |
|
|
48
|
+
| `Hero` | the 17 `validColors` | `small \| medium \| large \| fullheight \| fullheight-with-navbar` | section background |
|
|
49
|
+
| `LinkButton` | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black` | — | button-styled link; emits `link-button-<color>` |
|
|
50
|
+
| `Loading` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | spinner color; default light grey |
|
|
51
|
+
| `Navbar` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | — |
|
|
52
|
+
| `Numberinput` | `primary \| link \| info \| success \| warning \| danger \| light \| dark` | `small \| medium \| large` | also `inputColor` (the 6) for the inner input |
|
|
53
|
+
| `Pagination` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | — |
|
|
54
|
+
| `Panel` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | — |
|
|
55
|
+
| `Progress` | the 17 `validColors` | `small \| medium \| large` | — |
|
|
56
|
+
| `Radio` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | the 6 only |
|
|
57
|
+
| `Rate` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
58
|
+
| `Select` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isRounded` |
|
|
59
|
+
| `Slider` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded`, `isCircle` |
|
|
60
|
+
| `Steps` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
61
|
+
| `Switch` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | also `isRounded`, `isThin`, `isOutlined` |
|
|
62
|
+
| `Tabs` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | — |
|
|
63
|
+
| `Taginput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `tagColor` (the 6 + `dark \| light`) for the tags |
|
|
64
|
+
| `TextArea` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isRounded`, `isStatic` |
|
|
65
|
+
| `TimeInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | — |
|
|
66
|
+
| `Tooltip` | `primary \| link \| info \| success \| warning \| danger \| dark \| light` | `small \| medium \| large` | — |
|
|
67
|
+
| `Tr` / `Td` / `Th` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | table row/cell background |
|
|
43
68
|
|
|
44
69
|
The 6 brand colors (`primary, link, info, success, warning, danger`) are the ones a custom theme
|
|
45
70
|
recolors via the HSL trios (see `css-variables.md`). The greyscale and `white`/`light`/`dark`
|