create-bestax 4.2.16 → 4.2.18
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/README.md +13 -5
- package/dist/cli.d.ts.map +1 -1
- package/dist/cli.js +1 -1
- package/dist/constants.d.ts +2 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/constants.js +7 -2
- package/dist/display.d.ts +9 -0
- package/dist/display.d.ts.map +1 -1
- package/dist/display.js +19 -1
- package/dist/file-system.d.ts +16 -3
- package/dist/file-system.d.ts.map +1 -1
- package/dist/file-system.js +41 -5
- package/dist/project-creator.d.ts +16 -1
- package/dist/project-creator.d.ts.map +1 -1
- package/dist/project-creator.js +35 -6
- package/dist/prompts.d.ts +1 -0
- package/dist/prompts.d.ts.map +1 -1
- package/dist/prompts.js +3 -2
- package/dist/validators.d.ts +8 -0
- package/dist/validators.d.ts.map +1 -1
- package/dist/validators.js +18 -1
- package/package.json +7 -7
- package/templates/skills/bestax-custom-component/SKILL.md +36 -1
- package/templates/skills/bestax-custom-component/references/api.md +36 -14
- package/templates/skills/bestax-custom-component/references/component-catalog.md +10 -2
- package/templates/skills/bestax-custom-component/references/library-contributor.md +4 -1
- package/templates/skills/bestax-form/SKILL.md +46 -30
- package/templates/skills/bestax-form/references/api.md +15 -10
- package/templates/skills/bestax-form/references/patterns.md +11 -6
- package/templates/skills/bestax-icons/SKILL.md +8 -1
- package/templates/skills/bestax-icons/references/icon-libraries.md +35 -2
- package/templates/skills/bestax-layout-scaffold/SKILL.md +54 -4
- package/templates/skills/bestax-layout-scaffold/references/archetypes.md +57 -0
- package/templates/skills/bestax-layout-scaffold/references/layout-components.md +3 -3
- package/templates/skills/bestax-migrate/SKILL.md +23 -2
- package/templates/skills/bestax-migrate/references/bloomer/prop-map.md +34 -8
- package/templates/skills/bestax-migrate/references/bloomer/unmappables.md +18 -0
- package/templates/skills/bestax-migrate/references/bulma-classes/component-map.md +9 -4
- package/templates/skills/bestax-migrate/references/bulma-classes/prop-map.md +1 -1
- package/templates/skills/bestax-migrate/references/bulma-classes/unmappables.md +317 -4
- package/templates/skills/bestax-migrate/references/css-migration.md +5 -1
- package/templates/skills/bestax-migrate/references/rbx/prop-map.md +31 -7
- package/templates/skills/bestax-migrate/references/rbx/unmappables.md +41 -14
- package/templates/skills/bestax-migrate/references/react-bulma-components/component-map.md +3 -3
- package/templates/skills/bestax-migrate/references/react-bulma-components/prop-map.md +22 -0
- package/templates/skills/bestax-migrate/references/react-bulma-components/unmappables.md +33 -8
- package/templates/skills/bestax-optimize/SKILL.md +2 -0
- package/templates/skills/bestax-optimize/references/modular-build.md +23 -12
- package/templates/skills/bestax-theming/SKILL.md +4 -1
- package/templates/skills/bestax-theming/references/css-variables.md +130 -2
- package/templates/skills/bestax-theming/references/themeable-components.md +8 -2
- package/templates/vite-ts/package.json +1 -0
- package/templates/vite-ts/tsconfig.app.json +10 -9
- package/templates/vite-ts/tsconfig.node.json +15 -5
- package/templates/vite-ts/src/vite-env.d.ts +0 -1
|
@@ -26,7 +26,11 @@ choice below applies.
|
|
|
26
26
|
**Visual note**: `bestax.css` ships with `$primary` set to bestax blue (`#1e6b99`),
|
|
27
27
|
not Bulma's stock turquoise — `is-primary` surfaces (hero, navbar, buttons) change
|
|
28
28
|
color. Keep the stock Bulma look with `--css bulma`, or set your own brand color via
|
|
29
|
-
`--bulma-primary-*` CSS variables / a Sass build.
|
|
29
|
+
`--bulma-primary-*` CSS variables / a Sass build. Set `--bulma-primary-invert-l` along with
|
|
30
|
+
`--bulma-primary-h`, `--bulma-primary-s` and `--bulma-primary-l`: it is the lightness of the
|
|
31
|
+
text on a primary surface, and bestax's build fixes it for its dark blue, so a light primary set
|
|
32
|
+
through the other three alone keeps white labels. To get stock Bulma's turquoise back on top of
|
|
33
|
+
`bestax.css`, copy those four from Bulma's own `bulma/css/bulma.css`.
|
|
30
34
|
|
|
31
35
|
- **SCSS files**: Bulma 0.9's `@import 'bulma/bulma.sass'` (plus preceding
|
|
32
36
|
`$var: value !default;` overrides) became Bulma v1 module syntax, with simple literal
|
|
@@ -118,6 +118,29 @@ wrong:
|
|
|
118
118
|
Note that this one does change the rendered element: rbx's `forwardRefAs` rendered the tag you
|
|
119
119
|
gave it, so that really was a `<span>`, and the TODO exists to tell you the element moved.
|
|
120
120
|
|
|
121
|
+
## Title sizes
|
|
122
|
+
|
|
123
|
+
rbx's `Title` rendered an `<h1>` at every size, subtitle or not, or the element `as` named.
|
|
124
|
+
bestax's `Title` and `SubTitle` render the heading their `size` names unless `as="p"`, so the
|
|
125
|
+
codemod keeps the element rbx rendered:
|
|
126
|
+
|
|
127
|
+
| rbx | bestax-bulma | renders |
|
|
128
|
+
| ---------------------------------- | ------------------------------ | ------- |
|
|
129
|
+
| `<Title size={4}>` | `<Title textSize="4">` | `<h1>` |
|
|
130
|
+
| `<Title size={1}>` | `<Title size={1}>` | `<h1>` |
|
|
131
|
+
| `<Title subtitle size={6}>` | `<SubTitle textSize="6">` | `<h1>` |
|
|
132
|
+
| `<Title as="h2" size={5}>` | `<Title as="h2" textSize="5">` | `<h2>` |
|
|
133
|
+
| `<Title as="p" subtitle size={5}>` | `<SubTitle as="p" size={5}>` | `<p>` |
|
|
134
|
+
|
|
135
|
+
`size` stays only where it renders the same element: a `<p>`, or the heading the size names.
|
|
136
|
+
Everywhere else the size moves to the `textSize` helper, and so does a 7, which bestax's `size`
|
|
137
|
+
does not take. The helper sets the same font size through Bulma's `is-size-4` class rather than the
|
|
138
|
+
title's own `is-4`, so a rule of your own that targets `.title.is-4` needs the new class too.
|
|
139
|
+
`is-size-4` is also `!important`, so a font size your own CSS gives the title, such as
|
|
140
|
+
`.hero .title`, now loses to it where it used to beat `is-4`. Beside a spread, which may carry
|
|
141
|
+
`as`, a size moves even where it names the default `<h1>`. A literal outside 1 to 7 keeps `size`
|
|
142
|
+
and gets a `prop:size` TODO.
|
|
143
|
+
|
|
121
144
|
## `href` follows `as`
|
|
122
145
|
|
|
123
146
|
bestax gives an element the attributes of the tag `as` names, so `href` exists only where that
|
|
@@ -156,13 +179,14 @@ becomes.
|
|
|
156
179
|
Beside a `ref` the element already has, a rename leaves `innerRef` in place with a `prop:innerRef`
|
|
157
180
|
TODO rather than write a second `ref`; keep whichever one you meant.
|
|
158
181
|
|
|
159
|
-
An existing `ref` is passed through untouched — which is safe only where the bestax target
|
|
160
|
-
|
|
161
|
-
`
|
|
162
|
-
`Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
|
|
163
|
-
`Navbar.Link`, `
|
|
164
|
-
|
|
165
|
-
|
|
182
|
+
An existing `ref` is passed through untouched — which is safe only where the bestax target forwards
|
|
183
|
+
one. rbx forwards a ref on every component; bestax does so on the form controls, plus `Avatar`,
|
|
184
|
+
`Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`,
|
|
185
|
+
`Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
|
|
186
|
+
`Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Timeline`,
|
|
187
|
+
`Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item`. "The form controls" there
|
|
188
|
+
means the inputs themselves: the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios`
|
|
189
|
+
wrappers around them forward nothing, and `Field` is a target this codemod emits.
|
|
166
190
|
|
|
167
191
|
Carry a `ref` onto anything else — `Card`, `Box`, `Section`, `Message`, `Tabs` and most of the
|
|
168
192
|
catalogue — and it is unsupported, but the two React majors fail differently. React 18 drops
|
|
@@ -171,22 +171,49 @@ converted — bestax has its own unrelated `responsive` prop (`'mobile' | 'narro
|
|
|
171
171
|
half-emptied rbx object behind would be a type error rather than a leftover. The TODO names
|
|
172
172
|
which breakpoints did not carry.
|
|
173
173
|
|
|
174
|
+
## A size bestax doesn't take (`prop:size`)
|
|
175
|
+
|
|
176
|
+
`Button.Group`, `Tag.Group` and `Message` sizes carry over as written when bestax's `Buttons`,
|
|
177
|
+
`Tags` or `Message` takes the value. Any other value, or one the codemod can't read, stays as
|
|
178
|
+
written with a TODO that lists the sizes that component takes: use one of them, or drop the
|
|
179
|
+
prop.
|
|
180
|
+
|
|
181
|
+
A dynamic `Image.Container` size gets the same rule, since the codemod can't turn it into
|
|
182
|
+
bestax's `NxN` form. Set `size` on the migrated `<Image>` by hand.
|
|
183
|
+
|
|
184
|
+
## `prop:size` on `Title`: a size the codemod cannot carry
|
|
185
|
+
|
|
186
|
+
rbx's `Title` rendered an `<h1>` at every size, subtitle or not. bestax's `Title` and `SubTitle`
|
|
187
|
+
render the heading their `size` names unless `as="p"`, so a literal size moves to `textSize` to
|
|
188
|
+
keep the level (see "Title sizes" in the prop map). A dynamic one cannot move, because
|
|
189
|
+
`textSize` takes a string, so it stays `size`. Pass it to `textSize` yourself:
|
|
190
|
+
|
|
191
|
+
```jsx
|
|
192
|
+
<Title size={compact ? 5 : 4}>Report</Title>
|
|
193
|
+
<Title textSize={compact ? '5' : '4'}>Report</Title>
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
A literal outside 1 to 7 has no Bulma class, and bestax renders none for it either: drop it, or set
|
|
197
|
+
a `textSize` from `'1'` to `'7'`.
|
|
198
|
+
|
|
199
|
+
The same TODO marks a `Title` that sets `size` and `textSize` both: drop `size` and let
|
|
200
|
+
`textSize` set the font size.
|
|
201
|
+
|
|
174
202
|
## Props with no counterpart
|
|
175
203
|
|
|
176
|
-
| TODO
|
|
177
|
-
|
|
|
178
|
-
| `prop:closeOnBlur` on `Modal`
|
|
179
|
-
| `prop:selected`, `prop:text` on `Button`
|
|
180
|
-
| `prop:
|
|
181
|
-
| `prop:
|
|
182
|
-
| `
|
|
183
|
-
| `
|
|
184
|
-
| `prop:
|
|
185
|
-
| `prop:
|
|
186
|
-
| `prop:document` on `
|
|
187
|
-
| `
|
|
188
|
-
| `
|
|
189
|
-
| `tooltipResponsive` | bestax's `Tooltip` has one `position` for all viewports |
|
|
204
|
+
| TODO | What to do |
|
|
205
|
+
| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
206
|
+
| `prop:closeOnBlur` on `Modal` | the migrated compound form renders `Modal.Background` as you wrote it; wire its `onClick` to your `onClose` |
|
|
207
|
+
| `prop:selected`, `prop:text` on `Button` | `className="is-selected"`; for `is-text` use `color="ghost"` or a link |
|
|
208
|
+
| `prop:gradient` on `Hero` | Bulma v1 removed `is-bold` gradients; use `bgColor` or a custom class |
|
|
209
|
+
| `prop:color`, `prop:vertical` on `Divider` | bestax's `Divider` takes only `bgColor` and renders an `<hr>` |
|
|
210
|
+
| `component:Divider` (a labelled divider) | rbx rendered `<Divider>OR</Divider>`'s children as a centred label via `data-content`; bestax's `Divider` is a bare `<hr>` and takes no children -- React rejects children on a void element at runtime. Put the label in surrounding markup, or drop it |
|
|
211
|
+
| `prop:direction` on `PageLoader` | no directional variant; drop it or add a class |
|
|
212
|
+
| `prop:managed` | bestax components are uncontrolled; drive the `Modal` with `active` and `onClose` |
|
|
213
|
+
| `prop:document` on `Modal` | bestax portals via `portal`, but it takes `true`, a selector or an element rather than a `Document` — see [Modal: what carries over](#modal-what-carries-over) |
|
|
214
|
+
| `prop:document` on `Navbar` | bestax's `Navbar` has no `document` prop; drop it |
|
|
215
|
+
| `badgeOutlined`, `badgeRounded`, `badgeSize` | bestax's `Badge` has no outline, pill or size variant |
|
|
216
|
+
| `tooltipResponsive` | bestax's `Tooltip` has one `position` for all viewports |
|
|
190
217
|
|
|
191
218
|
## Modal: what carries over
|
|
192
219
|
|
|
@@ -20,7 +20,7 @@ codemod converts it; **Flagged** = it leaves a `TODO(bestax-migrate)` comment (s
|
|
|
20
20
|
| `Element` | — | Flagged: no generic element; use a semantic component + helper props |
|
|
21
21
|
| `Footer` | `Footer` | Auto |
|
|
22
22
|
| `Form.*` | flat imports | See Form table below |
|
|
23
|
-
| `Heading` | `Title` / `SubTitle` / `<p class="heading">` | Auto for literal `subtitle`/`heading` (by value, not presence — `subtitle={false}` is `Title`); dynamic value flagged
|
|
23
|
+
| `Heading` | `Title` / `SubTitle` / `<p class="heading">` | Auto for literal `subtitle`/`heading` (by value, not presence — `subtitle={false}` is `Title`); dynamic value flagged; `size` may become `textSize` |
|
|
24
24
|
| `Hero` | `Hero` | Auto; `hasNavbar`→`fullheightWithNavbar`; `halfheight`/`gradient` flagged |
|
|
25
25
|
| `Icon` | `Icon` | `<i class="fas fa-x">` children → `name`/`library`/`variant` props; else flagged |
|
|
26
26
|
| `Image` | `Image` | Auto; numeric `size={128}` → `size="128x128"`, `rounded`→`isRounded` |
|
|
@@ -28,7 +28,7 @@ codemod converts it; **Flagged** = it leaves a `TODO(bestax-migrate)` comment (s
|
|
|
28
28
|
| `Loader` | plain `<div className="loader">` | Auto (Bulma v1 still ships the class); swap in bestax's `Loader` by hand for its progressbar role and accessible name |
|
|
29
29
|
| `Media` | `Media` | Auto |
|
|
30
30
|
| `Menu` | `Menu` | Auto |
|
|
31
|
-
| `Message` | `Message` | Auto; `size` flagged
|
|
31
|
+
| `Message` | `Message` | Auto; unknown or dynamic `size` flagged |
|
|
32
32
|
| `Modal` | `Modal` | `show`→`active`, `closeOnEsc`→`closeOnEscape`; `closeOnBlur`/`showClose` flagged (compound form renders neither) |
|
|
33
33
|
| `Navbar` | `Navbar` | Auto; see dropdown note below |
|
|
34
34
|
| `Notification` | `Notification` | Auto; `light`→`isLight` |
|
|
@@ -46,7 +46,7 @@ codemod converts it; **Flagged** = it leaves a `TODO(bestax-migrate)` comment (s
|
|
|
46
46
|
| RBC | bestax |
|
|
47
47
|
| ----------------------------------------------------------- | ------------------------------------------------------------------------ |
|
|
48
48
|
| `Breadcrumb.Item` | plain `<li><a href=…>` (`active` → `is-active`) |
|
|
49
|
-
| `Button.Group` | `Buttons` (`align="right"`→`isRight`)
|
|
49
|
+
| `Button.Group` | `Buttons` (`align="right"`→`isRight`); unknown or dynamic `size` flagged |
|
|
50
50
|
| `Card.Header` / `.Title` / `.Icon` | `Card.Header` / `.Header.Title` / `.Header.Icon` |
|
|
51
51
|
| `Card.Image` | `Card.Image` wrapping an inner `<Image>` |
|
|
52
52
|
| `Card.Content` | `Card.Content` |
|
|
@@ -46,6 +46,28 @@ href="/x">`) keeps the element and drops the `href`, with a `prop:href` TODO. RB
|
|
|
46
46
|
`<Button href="/x">` with no `renderAs` goes the same way: bestax's `Button` renders a
|
|
47
47
|
`<button>`. Set `as="a"` to make it a link.
|
|
48
48
|
|
|
49
|
+
## `Heading` sizes
|
|
50
|
+
|
|
51
|
+
RBC's `Heading` rendered an `<h1>` at every size, subtitle or not, or the element `renderAs`
|
|
52
|
+
named. bestax's `Title` and `SubTitle` render the heading their `size` names unless `as="p"`, so
|
|
53
|
+
the codemod keeps the element RBC rendered:
|
|
54
|
+
|
|
55
|
+
| RBC | bestax-bulma | renders |
|
|
56
|
+
| ------------------------------------------ | ------------------------------ | ------- |
|
|
57
|
+
| `<Heading size={4}>` | `<Title textSize="4">` | `<h1>` |
|
|
58
|
+
| `<Heading size={1}>` | `<Title size="1">` | `<h1>` |
|
|
59
|
+
| `<Heading subtitle size={6}>` | `<SubTitle textSize="6">` | `<h1>` |
|
|
60
|
+
| `<Heading renderAs="h2" size={5}>` | `<Title as="h2" textSize="5">` | `<h2>` |
|
|
61
|
+
| `<Heading renderAs="p" subtitle size={5}>` | `<SubTitle as="p" size="5">` | `<p>` |
|
|
62
|
+
|
|
63
|
+
`size` stays only where it renders the same element: a `<p>`, or the heading the size names.
|
|
64
|
+
Everywhere else the size moves to the `textSize` helper, and so does a 7, which bestax's `size`
|
|
65
|
+
does not take. The helper sets the same font size through Bulma's `is-size-4` class rather than the
|
|
66
|
+
title's own `is-4`, so a rule of your own that targets `.title.is-4` needs the new class too.
|
|
67
|
+
`is-size-4` is also `!important`, so a font size your own CSS gives the title, such as
|
|
68
|
+
`.hero .title`, now loses to it where it used to beat `is-4`. A literal outside 1 to 7 keeps `size`
|
|
69
|
+
and gets a `prop:size` TODO.
|
|
70
|
+
|
|
49
71
|
## Boolean modifier convention
|
|
50
72
|
|
|
51
73
|
RBC uses bare booleans (`loading`, `outlined`, `rounded`, `fullwidth`); bestax prefixes
|
|
@@ -129,22 +129,47 @@ bestax `Button` colors are the semantic set + `text`/`ghost`. For shades use
|
|
|
129
129
|
`bgColor`/`textColor` (they accept the full palette incl. shades), and replace
|
|
130
130
|
`isSelected` with `className="is-selected"` inside grouped buttons.
|
|
131
131
|
|
|
132
|
-
## `colorVariant` / Hero `gradient` / Hero `halfheight`
|
|
132
|
+
## `colorVariant` / Hero `gradient` / Hero `halfheight` (`prop:size`)
|
|
133
133
|
|
|
134
134
|
- `colorVariant="light"` → `isLight` where supported (Button, Notification), otherwise a
|
|
135
135
|
shade: `bgColor="primary-90"`.
|
|
136
136
|
- Bulma v1 removed `is-bold` hero gradients — delete `gradient` or restyle with CSS.
|
|
137
137
|
- `halfheight` has no bestax size; use `size="medium"` or a CSS height.
|
|
138
138
|
|
|
139
|
+
## A size bestax doesn't take (`prop:size` on `Button.Group` and `Message`)
|
|
140
|
+
|
|
141
|
+
`Button.Group` and `Message` sizes carry over as written when bestax's `Buttons` or `Message`
|
|
142
|
+
takes the value. Any other value, or one the codemod can't read, stays as written with a TODO
|
|
143
|
+
that lists the sizes that component takes: use one of them, or drop the prop.
|
|
144
|
+
|
|
145
|
+
## `prop:size` on `Heading`: a size the codemod cannot carry
|
|
146
|
+
|
|
147
|
+
RBC's `Heading` rendered an `<h1>` at every size, subtitle or not. bestax's `Title` and
|
|
148
|
+
`SubTitle` render the heading their `size` names unless `as="p"`, so a literal size moves to
|
|
149
|
+
`textSize` to keep the level (see "`Heading` sizes" in the prop map). A dynamic one cannot move,
|
|
150
|
+
because `textSize` takes a string, so it stays `size`. Pass it to `textSize` yourself:
|
|
151
|
+
|
|
152
|
+
```jsx
|
|
153
|
+
<Heading size={compact ? 5 : 4}>Report</Heading>
|
|
154
|
+
<Title textSize={compact ? '5' : '4'}>Report</Title>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
A literal outside 1 to 7 has no Bulma class, and bestax renders none for it either: drop it, or set
|
|
158
|
+
a `textSize` from `'1'` to `'7'`.
|
|
159
|
+
|
|
160
|
+
The same TODO marks a `Heading` that sets `size` and `textSize` both: drop `size` and let
|
|
161
|
+
`textSize` set the font size.
|
|
162
|
+
|
|
139
163
|
## `domRef`
|
|
140
164
|
|
|
141
|
-
bestax components don't take `domRef`, but many forward a plain `ref` — the form controls,
|
|
142
|
-
|
|
143
|
-
`LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
|
|
144
|
-
`Navbar.Item`, `Navbar.Link`, `
|
|
145
|
-
`
|
|
146
|
-
|
|
147
|
-
|
|
165
|
+
bestax components don't take `domRef`, but many forward a plain `ref` — the form controls, plus
|
|
166
|
+
`Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`,
|
|
167
|
+
`Kbd.Group`, `Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
|
|
168
|
+
`Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`,
|
|
169
|
+
`Sidebar`, `Timeline`, `Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item`. On
|
|
170
|
+
those, rename `domRef` to `ref` and it works; do not restructure the markup. "The form controls"
|
|
171
|
+
means the inputs themselves: the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios`
|
|
172
|
+
wrappers around them forward nothing, and `Field` is a target this codemod emits.
|
|
148
173
|
|
|
149
174
|
Everywhere else the rename is not enough, and the two React majors differ: React 18 drops the
|
|
150
175
|
ref and logs "Function components cannot be given refs", while React 19 passes it through as
|
|
@@ -126,6 +126,8 @@ partial inventory, and a worked example are in `references/modular-build.md`.
|
|
|
126
126
|
`material-icons`, `material-symbols`) with their CSS imports in `src/main.*`, or Ionicons
|
|
127
127
|
CDN `<script>` tags in `index.html`. Icon fonts often outweigh Bulma itself — if no
|
|
128
128
|
`<Icon>` uses that library, delete the dependency/import/script. Pure win, no tooling.
|
|
129
|
+
When the app does render Material Symbols, its font can be made smaller instead of
|
|
130
|
+
removed: see [Making the font smaller](https://bestax.io/docs/guides/getting-started/alternative-icons#making-the-font-smaller).
|
|
129
131
|
|
|
130
132
|
## References
|
|
131
133
|
|
|
@@ -73,15 +73,16 @@ Every extras partial that exists (from the library's `src/scss/**/_index.scss`
|
|
|
73
73
|
is **more complete** than the docs page's Option C example, which omits several):
|
|
74
74
|
|
|
75
75
|
**Components** (`@allxsmith/bestax-bulma/scss/components/<name>`):
|
|
76
|
-
`loading`, `collapse`, `tooltip`, `popover`, `
|
|
77
|
-
`tabs`, `reveal`, `avatar`, `avatars`, `badge`
|
|
76
|
+
`loading`, `collapse`, `tooltip`, `popover`, `hovercard`, `contextmenu`, `steps`, `sidebar`,
|
|
77
|
+
`toast`, `dialog`, `carousel`, `tabs`, `reveal`, `avatar`, `avatars`, `badge`, `emptystate`,
|
|
78
|
+
`timeline`, `treeview`
|
|
78
79
|
|
|
79
80
|
**Form** (`@allxsmith/bestax-bulma/scss/form/<name>`):
|
|
80
81
|
`checkbox`, `radio`, `switch`, `slider`, `numberinput`, `rate`, `autocomplete`, `taginput`,
|
|
81
82
|
`picker-popover`, `dateinput`, `timeinput`, `datetimeinput`, `daterangeinput`
|
|
82
83
|
|
|
83
|
-
**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `linkbutton`, `loader`,
|
|
84
|
-
`progress`, `skeleton`
|
|
84
|
+
**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `kbd`, `linkbutton`, `loader`,
|
|
85
|
+
`notification`, `progress`, `skeleton`
|
|
85
86
|
|
|
86
87
|
**Helpers** (`@allxsmith/bestax-bulma/scss/helpers/<name>`): `cursor`, `sizing`
|
|
87
88
|
|
|
@@ -96,15 +97,22 @@ Notes:
|
|
|
96
97
|
`picker-popover` too.
|
|
97
98
|
- `Popover.Close` renders a Bulma button, so an app using it needs `bulma/sass/elements/button`
|
|
98
99
|
next to `scss/components/popover`.
|
|
100
|
+
- `ContextMenu`'s menu is Bulma's dropdown markup, so an app using it needs
|
|
101
|
+
`bulma/sass/components/dropdown` next to `scss/components/contextmenu`.
|
|
99
102
|
- `Loader` is stock Bulma styled by `bulma/sass/elements/loader`, and the `isLoading`
|
|
100
103
|
spinners on `Button`, `Control` and `Select` are Bulma's too. The `loader` extras partial
|
|
101
|
-
stops all of them under `prefers-reduced-motion: reduce
|
|
102
|
-
|
|
104
|
+
stops all of them under `prefers-reduced-motion: reduce` and keeps each ring open in forced
|
|
105
|
+
colors (Windows' contrast themes), so include it next to the Bulma modules in any build that
|
|
106
|
+
shows one. Its rules are `!important`, so the order of the two
|
|
103
107
|
`@use` lines does not matter.
|
|
104
108
|
- `Progress` and the skeletons are stock Bulma too (`bulma/sass/elements/progress`,
|
|
105
109
|
`bulma/sass/base/skeleton`). The `progress` and `skeleton` extras partials stop the
|
|
106
110
|
indeterminate bar's sweep and the skeleton pulse (`Skeleton`, the `skeleton` prop,
|
|
107
111
|
`hasSkeleton`) under `prefers-reduced-motion: reduce`, the same way and in either order.
|
|
112
|
+
- `Notification` is stock Bulma too (`bulma/sass/elements/notification`). The `notification`
|
|
113
|
+
extras partial pads the end of one with a close button (`hasDelete`, or a `Delete` passed in)
|
|
114
|
+
so its text clears the button, so include it next to the Bulma module in any build that shows
|
|
115
|
+
a dismissible notification. It doesn't depend on the order of the two `@use` lines either.
|
|
108
116
|
- Stock-Bulma form controls still need their Bulma module (`bulma/sass/form/…`); the extras
|
|
109
117
|
form partials above style only the bestax-specific behavior.
|
|
110
118
|
- Bulma component modules pull their own internal sub-elements — e.g.
|
|
@@ -154,12 +162,13 @@ not `flexbox` — `flexbox` holds only the alignment props. Verified failure mod
|
|
|
154
162
|
|
|
155
163
|
The `npm create bestax` starter renders `Container`, `Section`, `Columns`/`Column`, `Image`,
|
|
156
164
|
`Title`/`SubTitle`, `Box`, `Card`, `Buttons`/`Button`, and `Notification` with its close
|
|
157
|
-
button: all stock Bulma,
|
|
158
|
-
`flexGrow` (flexbox), and `textAlign` (typography);
|
|
159
|
-
inventory compiles to the following, verified
|
|
160
|
-
flavor in headless Chromium (light and dark, phone
|
|
161
|
-
274 KB raw / 30 KB gzip vs 819 KB / 84 KB.
|
|
162
|
-
needs `bulma/sass/elements/icon` for its
|
|
165
|
+
button: all stock Bulma, plus the `notification` extras partial for that close button. Its
|
|
166
|
+
helper props are `display` (visibility), `flexGrow` (flexbox), and `textAlign` (typography);
|
|
167
|
+
it uses no spacing or color props. That inventory compiles to the following, verified
|
|
168
|
+
pixel-equivalent to the prebuilt `complete` flavor in headless Chromium (light and dark, phone
|
|
169
|
+
and desktop width, notification open), at 274 KB raw / 30 KB gzip vs 819 KB / 84 KB.
|
|
170
|
+
Scaffolded with an icon library, the starter also needs `bulma/sass/elements/icon` for its
|
|
171
|
+
`IconText` card titles:
|
|
163
172
|
|
|
164
173
|
```scss
|
|
165
174
|
// src/styles.scss
|
|
@@ -184,6 +193,8 @@ needs `bulma/sass/elements/icon` for its `IconText` card titles:
|
|
|
184
193
|
@use 'bulma/sass/helpers/visibility'; // display="flex"
|
|
185
194
|
@use 'bulma/sass/helpers/flexbox'; // flexGrow
|
|
186
195
|
@use 'bulma/sass/helpers/typography'; // textAlign
|
|
196
|
+
|
|
197
|
+
@use '@allxsmith/bestax-bulma/scss/elements/notification'; // text clears the close button
|
|
187
198
|
```
|
|
188
199
|
|
|
189
200
|
```tsx
|
|
@@ -20,7 +20,10 @@ Choose an override path:
|
|
|
20
20
|
- **`Theme` component (runtime, preferred).** Exported from the package. Pass named HSL props
|
|
21
21
|
(`primaryH`, `primaryS`, `primaryL`, …) and/or `bulmaVars={{ '--bulma-*': '…' }}` for everything
|
|
22
22
|
else. Add `isRoot` to inject the variables globally at `:root` (once, at the app root); omit it to
|
|
23
|
-
scope the variables to the wrapped subtree.
|
|
23
|
+
scope the variables to the wrapped subtree. A `Theme` only reaches variables the component
|
|
24
|
+
inherits: Bulma declares component variables such as `--bulma-card-radius` on the component's
|
|
25
|
+
own element, so a `Theme` value for one never applies (it warns in development). Set those on
|
|
26
|
+
the component with `className` or `style` instead (see `references/css-variables.md`).
|
|
24
27
|
- **Plain CSS.** Set `:root { --bulma-primary-h: …; }` (or any selector) directly.
|
|
25
28
|
- **Build-time Sass.** `@use 'bulma/sass' with ($primary: #1e6b99)` when compiling Bulma's Sass.
|
|
26
29
|
|
|
@@ -13,7 +13,9 @@ theming means overriding the right `--bulma-*` values.
|
|
|
13
13
|
- `isRoot` → injects the variables globally at `:root` (use once, at the app root).
|
|
14
14
|
- without `isRoot` → wraps children in a `<div>` and scopes the variables to that subtree.
|
|
15
15
|
- Named props set the color/scheme HSL channels and common values (see "Theme props" below).
|
|
16
|
-
- `bulmaVars` sets any other variable, keyed by its real `--bulma-*` name
|
|
16
|
+
- `bulmaVars` sets any other variable, keyed by its real `--bulma-*` name. It only changes
|
|
17
|
+
variables the component inherits, though: see "Component variables" below for the ones Bulma
|
|
18
|
+
declares on the component itself.
|
|
17
19
|
|
|
18
20
|
```tsx
|
|
19
21
|
<Theme
|
|
@@ -101,6 +103,29 @@ and numeric shades `--bulma-<c>-00` … `--bulma-<c>-95`.
|
|
|
101
103
|
| `--bulma-size-small` / `-normal` / `-medium` / `-large` | 0.75 / 1 / 1.25 / 1.5rem | via `bulmaVars` |
|
|
102
104
|
| `--bulma-weight-light/normal/medium/semibold/bold/extrabold` | 300 / 400 / 500 / 600 / 700 / 800 | via `bulmaVars` |
|
|
103
105
|
|
|
106
|
+
## Component variables: set them on the component, not on `Theme`
|
|
107
|
+
|
|
108
|
+
A custom property set on an ancestor only reaches an element that declares no value of its own.
|
|
109
|
+
Bulma declares the scheme, color, typography, radius and spacing tokens on `:root`, so `Theme`
|
|
110
|
+
(scoped or `isRoot`) and plain `:root` CSS both work for them. Some of those Bulma also declares
|
|
111
|
+
again on one component, which keeps its own value while everything else takes yours; that
|
|
112
|
+
component's API page lists the variable as declared on it, and `Theme` doesn't warn about these.
|
|
113
|
+
To change that one component too, set the variable on it as described below.
|
|
114
|
+
|
|
115
|
+
Bulma's per-component variables (`--bulma-card-radius`, `--bulma-tag-h`,
|
|
116
|
+
`--bulma-delete-dimensions`, …) are declared on the component's own element instead (`.card`,
|
|
117
|
+
`.tag`, `.delete`), so a value set on any ancestor, including `Theme`'s `bulmaVars`, always loses
|
|
118
|
+
and nothing changes. `bulmaVars` still accepts those keys, and `Theme` logs a development warning
|
|
119
|
+
naming them.
|
|
120
|
+
|
|
121
|
+
Set a component variable on the component itself: in your CSS on its own class, loaded after
|
|
122
|
+
the library styles (mind the class prefix), e.g. `.card { --bulma-card-radius: 1.5rem; }`, on a
|
|
123
|
+
class you pass through `className`, or with the component's `style` prop. A size or color
|
|
124
|
+
modifier can declare the variable again on a more specific selector (`.delete.is-small`), which a
|
|
125
|
+
lone class loses to and `style` does not. Each component's API page lists its variables under
|
|
126
|
+
**CSS & Sass Variables** and says where Bulma declares them; the extras below follow the same
|
|
127
|
+
rule.
|
|
128
|
+
|
|
104
129
|
## Shadow — override the upstream token, not the derived one
|
|
105
130
|
|
|
106
131
|
`--bulma-shadow` (plus its `--bulma-shadow-h`/`-s`/`-l` channels) is a real Bulma variable that
|
|
@@ -145,7 +170,9 @@ lone class or the `style` prop cannot outrank:
|
|
|
145
170
|
styles with a selector that matches or exceeds the compound:
|
|
146
171
|
`.button.link-button { --bulma-link-button-ghost-color: … }`.
|
|
147
172
|
- **Constituent elements** — Tooltip's variables (all but `--bulma-tooltip-dashed-color`)
|
|
148
|
-
are declared on `.tooltip-content`, Popover's on its panel, `.popover-content`,
|
|
173
|
+
are declared on `.tooltip-content`, Popover's on its panel, `.popover-content`, HoverCard's
|
|
174
|
+
on its card, `.hover-card-content`, ContextMenu's on the box its menu hangs from,
|
|
175
|
+
`.context-menu-content`, and Sidebar's
|
|
149
176
|
`--bulma-sidebar-overlay-background` on `.sidebar-background`. Values set via `className` or
|
|
150
177
|
`style` land on the component root and are only inherited by the constituent, so they lose to
|
|
151
178
|
its own declaration — target the declaring element in your CSS:
|
|
@@ -231,6 +258,18 @@ items of a `Collapses` group, which reads it with a 0.5rem fallback and declares
|
|
|
231
258
|
so set it on the group or on any ancestor, `:root` included. (`Theme`'s `bulmaVars` does not
|
|
232
259
|
list it, so set it in your CSS or through a `style` prop.)
|
|
233
260
|
|
|
261
|
+
### ContextMenu
|
|
262
|
+
|
|
263
|
+
Both are declared on the box the menu hangs from, `.context-menu-content`, which is portaled away
|
|
264
|
+
from the trigger. See the constituent-element exception above.
|
|
265
|
+
|
|
266
|
+
`--bulma-context-menu-max-height`, `--bulma-context-menu-z-index`
|
|
267
|
+
|
|
268
|
+
The menu inside that box is Bulma's dropdown markup, and the box is a `.dropdown` too, so the
|
|
269
|
+
`--bulma-dropdown-*` variables theme it. Bulma declares them on `.dropdown`, so a context menu
|
|
270
|
+
takes a value set on the box: `.dropdown.context-menu-content { --bulma-dropdown-content-radius: … }`
|
|
271
|
+
changes context menus and leaves `Dropdown` alone.
|
|
272
|
+
|
|
234
273
|
### DateInput
|
|
235
274
|
|
|
236
275
|
`--bulma-dateinput-cell-color`, `--bulma-dateinput-cell-disabled-color`,
|
|
@@ -272,6 +311,40 @@ The field around the two inputs. Its calendar is the `DateInput` one, with the v
|
|
|
272
311
|
`--bulma-dialog-radius`, `--bulma-dialog-shadow`, `--bulma-dialog-title-color`,
|
|
273
312
|
`--bulma-dialog-title-size`, `--bulma-dialog-title-weight`, `--bulma-dialog-width`
|
|
274
313
|
|
|
314
|
+
### EmptyState
|
|
315
|
+
|
|
316
|
+
Declared on the root, `.empty-state`. Each size class (`.is-small`, `.is-medium`, `.is-large`)
|
|
317
|
+
sets its own gap, padding, indicator and icon sizes, and title and description sizes, so retune a
|
|
318
|
+
size on that class. The color classes and `.is-filled` set the indicator's background and color
|
|
319
|
+
from Bulma's scheme tokens, so the circle follows dark mode with no override. The description is
|
|
320
|
+
`currentColor`, so it reads on whatever surface holds it.
|
|
321
|
+
|
|
322
|
+
`--bulma-empty-state-description-color`, `--bulma-empty-state-description-max-width`,
|
|
323
|
+
`--bulma-empty-state-description-size`, `--bulma-empty-state-gap`, `--bulma-empty-state-icon-size`,
|
|
324
|
+
`--bulma-empty-state-indicator-background`, `--bulma-empty-state-indicator-color`,
|
|
325
|
+
`--bulma-empty-state-indicator-radius`, `--bulma-empty-state-indicator-size`,
|
|
326
|
+
`--bulma-empty-state-padding`, `--bulma-empty-state-title-size`
|
|
327
|
+
|
|
328
|
+
### HoverCard
|
|
329
|
+
|
|
330
|
+
All are declared on the card, `.hover-card-content`, so a card rendered with `appendToBody` keeps
|
|
331
|
+
them. See the constituent-element exception above.
|
|
332
|
+
|
|
333
|
+
`--bulma-hover-card-animation-duration`, `--bulma-hover-card-background`,
|
|
334
|
+
`--bulma-hover-card-border-color`, `--bulma-hover-card-color`, `--bulma-hover-card-max-width`,
|
|
335
|
+
`--bulma-hover-card-min-width`, `--bulma-hover-card-offset`, `--bulma-hover-card-padding`,
|
|
336
|
+
`--bulma-hover-card-radius`, `--bulma-hover-card-shadow`, `--bulma-hover-card-z-index`
|
|
337
|
+
|
|
338
|
+
### Kbd
|
|
339
|
+
|
|
340
|
+
Declared on each key, `.kbd`. The border color and the fill default to `color-mix()` of
|
|
341
|
+
`currentColor` with `transparent`, so a key follows its text in dark mode, in a filled button and
|
|
342
|
+
in a tooltip without an override of its own. The sizes are in `em`, so `textSize` scales them.
|
|
343
|
+
|
|
344
|
+
`--bulma-kbd-background`, `--bulma-kbd-border-bottom-width`, `--bulma-kbd-border-color`,
|
|
345
|
+
`--bulma-kbd-border-width`, `--bulma-kbd-color`, `--bulma-kbd-family`, `--bulma-kbd-padding`,
|
|
346
|
+
`--bulma-kbd-radius`, `--bulma-kbd-size`, `--bulma-kbd-weight`
|
|
347
|
+
|
|
275
348
|
### LinkButton
|
|
276
349
|
|
|
277
350
|
Declared on the compound `.button.link-button` — see the compound-selector exception above.
|
|
@@ -295,6 +368,14 @@ Declared on the compound `.button.link-button` — see the compound-selector exc
|
|
|
295
368
|
`--bulma-loading-overlay-opacity-opaque`, `--bulma-loading-text-color`,
|
|
296
369
|
`--bulma-loading-text-size`
|
|
297
370
|
|
|
371
|
+
### Notification
|
|
372
|
+
|
|
373
|
+
`--bulma-notification-delete-padding-inline-end` is the end padding of a notification with a close
|
|
374
|
+
button, which keeps the text clear of the button. It applies with `hasDelete`, and to a `Delete`
|
|
375
|
+
passed as a direct child in browsers that support `:has()`. It is the padding for a default-size
|
|
376
|
+
button: a `Delete` passed in with a `size` gets it plus or minus the difference between the two
|
|
377
|
+
sizes. Bulma's own `--bulma-notification-*` variables set the rest.
|
|
378
|
+
|
|
298
379
|
### Numberinput
|
|
299
380
|
|
|
300
381
|
`--bulma-numberinput-disabled-opacity`, `--bulma-numberinput-rounded-button-size`,
|
|
@@ -421,6 +502,28 @@ them. See the constituent-element exception above.
|
|
|
421
502
|
`--bulma-timeinput-wheel-item-height` is registered but has no effect: the component sets each
|
|
422
503
|
wheel item's height inline.
|
|
423
504
|
|
|
505
|
+
### Timeline
|
|
506
|
+
|
|
507
|
+
Declared on the root, `.timeline`. The states and the color classes set
|
|
508
|
+
`--bulma-timeline-marker-color` for each marker, and the layouts set
|
|
509
|
+
`--bulma-timeline-rail-center`, so retheme the markers through `--bulma-timeline-neutral-color`
|
|
510
|
+
and `--bulma-timeline-active-color` rather than those two. `--bulma-timeline-marker-background`
|
|
511
|
+
fills the upcoming rings and the pending loader, and a reached icon marker's tint is mixed into
|
|
512
|
+
it. It's the page's color by default, so it hides the line behind them. A record's icon circles
|
|
513
|
+
take `--bulma-timeline-marker-icon-background`, which the color classes set. Every size is in
|
|
514
|
+
`em`, so `textSize` scales them all.
|
|
515
|
+
|
|
516
|
+
`--bulma-timeline-active-color`, `--bulma-timeline-content-gap`, `--bulma-timeline-dot-size`,
|
|
517
|
+
`--bulma-timeline-gap`, `--bulma-timeline-halo-offset`, `--bulma-timeline-line-color`,
|
|
518
|
+
`--bulma-timeline-line-width`, `--bulma-timeline-marker-background`,
|
|
519
|
+
`--bulma-timeline-marker-color`, `--bulma-timeline-marker-icon-background`,
|
|
520
|
+
`--bulma-timeline-marker-icon-color`, `--bulma-timeline-marker-size`,
|
|
521
|
+
`--bulma-timeline-neutral-color`, `--bulma-timeline-pending-duration`,
|
|
522
|
+
`--bulma-timeline-pending-size`,
|
|
523
|
+
`--bulma-timeline-rail-center`, `--bulma-timeline-rail-size`, `--bulma-timeline-rail-size-icon`,
|
|
524
|
+
`--bulma-timeline-time-color`, `--bulma-timeline-time-size`, `--bulma-timeline-title-color`,
|
|
525
|
+
`--bulma-timeline-title-weight`
|
|
526
|
+
|
|
424
527
|
### Toast
|
|
425
528
|
|
|
426
529
|
`--bulma-toast-action-hover-opacity`, `--bulma-toast-action-radius`,
|
|
@@ -434,12 +537,37 @@ wheel item's height inline.
|
|
|
434
537
|
All but `--bulma-tooltip-dashed-color` are declared on `.tooltip-content` — see the
|
|
435
538
|
constituent-element exception above.
|
|
436
539
|
|
|
540
|
+
Raising `--bulma-tooltip-arrow-size` or `--bulma-tooltip-arrow-margin` widens the gap between the
|
|
541
|
+
trigger and the tooltip past what the pointer can cross on its own, so give the tooltip a
|
|
542
|
+
`closeDelay` long enough to cross it.
|
|
543
|
+
|
|
437
544
|
`--bulma-tooltip-arrow-margin`, `--bulma-tooltip-arrow-size`, `--bulma-tooltip-background`,
|
|
438
545
|
`--bulma-tooltip-color`, `--bulma-tooltip-dashed-color`, `--bulma-tooltip-font-size`,
|
|
439
546
|
`--bulma-tooltip-font-weight`, `--bulma-tooltip-line-height`, `--bulma-tooltip-max-width`,
|
|
440
547
|
`--bulma-tooltip-multiline-width`, `--bulma-tooltip-padding`, `--bulma-tooltip-radius`,
|
|
441
548
|
`--bulma-tooltip-z-index`
|
|
442
549
|
|
|
550
|
+
### TreeView
|
|
551
|
+
|
|
552
|
+
Declared on the root, `.tree-view`. A tree looks like Bulma's menu, but the menu's variables
|
|
553
|
+
don't reach it: `--bulma-menu-*` is registered on `.menu` alone, so retheme a tree through these.
|
|
554
|
+
Each default is the base token the matching menu variable defaults to (`scheme-h`, `text-l`,
|
|
555
|
+
`link-l`, `radius-small`, `border` and so on), so a theme's base tokens move the tree and the menu
|
|
556
|
+
together. A selected row swaps in the `item-selected-*` values on its own row, and a row's hover
|
|
557
|
+
and press tints change `--bulma-tree-view-item-background-l-delta` there. A checkbox tree's boxes
|
|
558
|
+
are `Checkbox`'s, themed through `--bulma-checkbox-*`.
|
|
559
|
+
|
|
560
|
+
`--bulma-tree-view-gap`, `--bulma-tree-view-group-border`, `--bulma-tree-view-group-margin`,
|
|
561
|
+
`--bulma-tree-view-group-padding`, `--bulma-tree-view-item-active-background-l-delta`,
|
|
562
|
+
`--bulma-tree-view-item-background-l`, `--bulma-tree-view-item-background-l-delta`,
|
|
563
|
+
`--bulma-tree-view-item-color-l`, `--bulma-tree-view-item-disabled-color`,
|
|
564
|
+
`--bulma-tree-view-item-h`, `--bulma-tree-view-item-hover-background-l-delta`,
|
|
565
|
+
`--bulma-tree-view-item-padding`, `--bulma-tree-view-item-radius`, `--bulma-tree-view-item-s`,
|
|
566
|
+
`--bulma-tree-view-item-selected-background-l`, `--bulma-tree-view-item-selected-color-l`,
|
|
567
|
+
`--bulma-tree-view-item-selected-h`, `--bulma-tree-view-item-selected-s`,
|
|
568
|
+
`--bulma-tree-view-line-height`, `--bulma-tree-view-toggle-color`,
|
|
569
|
+
`--bulma-tree-view-toggle-duration`, `--bulma-tree-view-toggle-size`
|
|
570
|
+
|
|
443
571
|
## Dark mode (`Theme colorMode`)
|
|
444
572
|
|
|
445
573
|
Drive the light/dark scheme with the `Theme` component's **`colorMode`** prop —
|
|
@@ -56,15 +56,17 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
|
|
|
56
56
|
| `Input` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isRounded`, `isStatic` |
|
|
57
57
|
| `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` |
|
|
58
58
|
| `Badge` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | pill background; default `danger` |
|
|
59
|
-
| `Title` | — (no `color`; use `textColor`) | `1`–`6` (string or number) | also `isSpaced`
|
|
60
|
-
| `SubTitle` | — (no `color`; use `textColor`) | `1`–`6` (string or number) |
|
|
59
|
+
| `Title` | — (no `color`; use `textColor`) | `1`–`6` (string or number) | also `isSpaced`; `size` also sets the heading level unless `as="p"`: pair `as` with `textSize` instead |
|
|
60
|
+
| `SubTitle` | — (no `color`; use `textColor`) | `1`–`6` (string or number) | `size` also sets the heading level unless `as="p"` (an `<h1>` with neither): pair `as` with `textSize` instead |
|
|
61
61
|
| `Autocomplete` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
62
62
|
| `Checkbox` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | the 6 only |
|
|
63
63
|
| `DateInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded` |
|
|
64
64
|
| `DateRangeInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded`; `color` also fills the calendar range |
|
|
65
65
|
| `DateTimeInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded` |
|
|
66
|
+
| `EmptyState` | `primary \| link \| info \| success \| warning \| danger` (the indicator circle and its icon only, never the text) | `small \| normal \| medium \| large` | also `variant`: `light` (default) \| `filled`; neutral with no `color`; tint text with `textColor`; `--bulma-empty-state-*` |
|
|
66
67
|
| `File` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isBoxed`, `isFullwidth` |
|
|
67
68
|
| `Hero` | every `validColors` member + `inherit`/`current` (the `-bis`/`-ter` shades, the greys, `inherit` and `current` deprecated: no CSS, dev-warn, removed next major — see ⚠️) | `small \| medium \| large \| fullheight \| fullheight-with-navbar` | section background |
|
|
69
|
+
| `Kbd` | — (no `color`: the edge and fill are mixed from the text color, so `textColor` tints them; `bgColor` replaces the fill, so pair it with a `textColor`) | — (sized in `em` from the text around it; size it with `textSize`) | one keycap look, no `variant`; `Kbd.Group` takes `textColor` too; retheme through `--bulma-kbd-*` |
|
|
68
70
|
| `LinkButton` | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black` | — | button-styled link; emits `link-button-<color>` — **no `isLight`/`isOutlined`/`isInverted`** |
|
|
69
71
|
| `Loader` | — (no color props: the ring is drawn in `--bulma-border`) | — (the ring is `1em`; size it with `textSize`) | for a colored spinner over a region, use `Loading` |
|
|
70
72
|
| `Loading` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | spinner color; default light grey |
|
|
@@ -75,6 +77,7 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
|
|
|
75
77
|
| `Progress` | every `validColors` member (the `-bis`/`-ter` shades and the greys deprecated: no CSS, dev-warn, removed next major — see ⚠️) | `small \| medium \| large` | — |
|
|
76
78
|
| `Radio` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | the 6 only |
|
|
77
79
|
| `Rate` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
80
|
+
| `SegmentedControl` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | fills only the checked segment (default `link`); `size` is the row's `are-<size>`; segments take no `color` or `size` |
|
|
78
81
|
| `Select` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isRounded` |
|
|
79
82
|
| `Slider` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded`, `isCircle` |
|
|
80
83
|
| `Steps` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
@@ -83,7 +86,10 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
|
|
|
83
86
|
| `Taginput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `tagColor` (the 6 + `dark \| light`) for the tags |
|
|
84
87
|
| `TextArea` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | — |
|
|
85
88
|
| `TimeInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | — |
|
|
89
|
+
| `Timeline` | `primary \| link \| info \| success \| warning \| danger` (the markers and the progress, never the text) | no `size` (sized in `em`; size it with `textSize`) | `Timeline.Item` takes `color` too, over the root's; neutral with no `color`, and progress in `link`; retheme through `--bulma-timeline-*` |
|
|
90
|
+
| `ToggleButton` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | fills only while pressed (default `link`); **no `isLight`/`isOutlined`/`isInverted`/`textColor`/`bgColor`** |
|
|
86
91
|
| `Tooltip` | `primary \| link \| info \| success \| warning \| danger \| dark \| light` | `small \| medium \| large` | — |
|
|
92
|
+
| `TreeView` | only the text helper, which doesn't reach the rows: each row sets its own text color, so retheme them through `--bulma-tree-view-*` | `small \| medium \| large` | the menu's sizes; its variables copy the menu's defaults, and `--bulma-menu-*` doesn't reach it; the boxes are `Checkbox`'s |
|
|
87
93
|
| `Tr` / `Td` / `Th` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | cell background; cells take `textAlign`/`textWeight`/`textSize` directly |
|
|
88
94
|
|
|
89
95
|
The 6 brand colors (`primary, link, info, success, warning, danger`) are the ones a custom theme
|