create-bestax 3.3.2 → 3.4.0
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/dist/constants.d.ts.map +1 -1
- package/dist/constants.js +1 -0
- package/package.json +1 -1
- package/templates/skills/bestax-optimize/SKILL.md +131 -0
- package/templates/skills/bestax-optimize/references/modular-build.md +173 -0
- package/templates/skills/bestax-theming/references/css-variables.md +237 -2
- package/templates/skills/bestax-theming/references/themeable-components.md +37 -12
package/dist/constants.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,EAG/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kBAAkB,CAAC;AACpD,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,kBAAkB,QAAsB,CAAC;AAEtD,eAAO,MAAM,QAAQ;;;;;;;wCAaQ,MAAM;uCAEP,MAAM;sCACP,MAAM;4CAEA,MAAM;;;;;CAM7B,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAOV,CAAC;AAOX,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK9D,CAAC;AAKF,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,GACpB,aAAa,MAAM,EACnB,8BAA8B,eAAe,KAC5C,
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,EAG/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kBAAkB,CAAC;AACpD,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,kBAAkB,QAAsB,CAAC;AAEtD,eAAO,MAAM,QAAQ;;;;;;;wCAaQ,MAAM;uCAEP,MAAM;sCACP,MAAM;4CAEA,MAAM;;;;;CAM7B,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAOV,CAAC;AAOX,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK9D,CAAC;AAKF,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,GACpB,aAAa,MAAM,EACnB,8BAA8B,eAAe,KAC5C,MAgEF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,EAAE,WAAW,EA6CvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,EA4CtC,CAAC"}
|
package/dist/constants.js
CHANGED
|
@@ -93,6 +93,7 @@ automatically when the task matches:
|
|
|
93
93
|
- **bestax-theming** — colors, branding, and dark mode via the \`Theme\` component (\`colorMode\`).
|
|
94
94
|
- **bestax-layout-scaffold** — scaffold full pages (app shell, landing, centered, card grid).
|
|
95
95
|
- **bestax-icons** — icons via \`Icon\`/\`IconText\`: library setup, name formats, variants, a11y.
|
|
96
|
+
- **bestax-optimize** — shrink the built CSS: measure raw+gzip, then flavor switch or a modular Sass build.
|
|
96
97
|
|
|
97
98
|
Prefer the library's components and these skills over hand-written Bulma markup or custom CSS.
|
|
98
99
|
|
package/package.json
CHANGED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: bestax-optimize
|
|
3
|
+
description: Reduce the built CSS size of an app using @allxsmith/bestax-bulma — measure raw and gzip size, then apply the cheapest lever that fits (lighter prebuilt CSS flavor, hand-rolled modular Sass build, import and icon-asset hygiene). Use when the CSS bundle looks too big, a size budget or Lighthouse audit flags stylesheet weight, switching bestax.css to a versions/*.css flavor, or setting up a modular @use Bulma/Sass build.
|
|
4
|
+
license: MIT
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Optimizing CSS size with @allxsmith/bestax-bulma
|
|
8
|
+
|
|
9
|
+
The JS side is tree-shakable (the **entire** library is ~49 KB min+gzip). The stylesheet is
|
|
10
|
+
not: a prebuilt flavor ships all of Bulma + the bestax extras regardless of which components
|
|
11
|
+
the app renders. Judge stylesheet weight by the **gzipped** transfer size — never the raw
|
|
12
|
+
`dist/` number.
|
|
13
|
+
|
|
14
|
+
## Always measure first
|
|
15
|
+
|
|
16
|
+
Run the production build, then measure the built CSS — raw and gzip:
|
|
17
|
+
|
|
18
|
+
```sh
|
|
19
|
+
npm run build
|
|
20
|
+
wc -c dist/assets/*.css # raw bytes (what Vite reports)
|
|
21
|
+
gzip -c dist/assets/*.css | wc -c # transfer bytes (what users download)
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Re-measure after **every** step below and report the before/after delta (raw + gzip). Never
|
|
25
|
+
claim a saving without a number.
|
|
26
|
+
|
|
27
|
+
⚠️ **~800 KB raw is ~82 KB over the wire.** Seeing ~800 KB of CSS in `dist/` is expected
|
|
28
|
+
with the default flavor, not a build misconfiguration — servers and CDNs gzip/brotli by
|
|
29
|
+
default. If the gzip number is already within the app's budget, say so and stop: "your CSS is
|
|
30
|
+
already fine" is a valid, honest outcome.
|
|
31
|
+
|
|
32
|
+
## Decision flow
|
|
33
|
+
|
|
34
|
+
Cheapest first. Use only the library's own shipped CSS builds and SCSS sources — do not add
|
|
35
|
+
third-party build plugins (no CSS purgers/post-processors).
|
|
36
|
+
|
|
37
|
+
1. **Flavor switch** — one-line import change, minutes (up to ~15 KB gzip).
|
|
38
|
+
2. **Modular Sass build** — small `@use` file, the biggest honest win.
|
|
39
|
+
3. **Import & icon-asset hygiene** — minor; JS and icon fonts, not the Bulma CSS.
|
|
40
|
+
|
|
41
|
+
## Lever 1 — lighter prebuilt flavor
|
|
42
|
+
|
|
43
|
+
Swap the single CSS import (in `src/main.tsx` / `src/main.jsx`) between the shipped flavors.
|
|
44
|
+
Measured sizes drift slightly between releases — hence measure:
|
|
45
|
+
|
|
46
|
+
| Flavor | Import | Raw | Gzip |
|
|
47
|
+
| ------------ | -------------------------------------------------------------------- | -----: | -----: |
|
|
48
|
+
| complete | `import '@allxsmith/bestax-bulma/bestax.css';` | ~800KB | ~82 KB |
|
|
49
|
+
| no-dark-mode | `import '@allxsmith/bestax-bulma/versions/bestax-no-dark-mode.css';` | ~680KB | ~70 KB |
|
|
50
|
+
| no-helpers | `import '@allxsmith/bestax-bulma/versions/bestax-no-helpers.css';` | ~595KB | ~67 KB |
|
|
51
|
+
|
|
52
|
+
Prefixed variants (`versions/bestax-prefixed.css` ~875 KB/~84 KB,
|
|
53
|
+
`versions/bestax-no-helpers-prefixed.css` ~655 KB/~69 KB) exist for CSS-collision
|
|
54
|
+
**compatibility, not size** — a prefixed flavor must pair with
|
|
55
|
+
`<ConfigProvider classPrefix="bestax-">` at the app root, and switching a non-prefixed app to
|
|
56
|
+
one is never a size optimization.
|
|
57
|
+
|
|
58
|
+
- `no-dark-mode` (~12 KB gzip saved) — only when the app pins a single color scheme (a fixed
|
|
59
|
+
`Theme colorMode` / `data-theme`).
|
|
60
|
+
- `no-helpers` (~15 KB gzip saved) — **hard gate below**.
|
|
61
|
+
|
|
62
|
+
⚠️ **The `no-helpers` gate: check for helper props first.** That flavor drops every class the
|
|
63
|
+
helper props compile to — components still render, but the props silently do nothing. Before
|
|
64
|
+
recommending it, grep the app's source for helper props on bestax components:
|
|
65
|
+
|
|
66
|
+
- spacing: `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`, `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`
|
|
67
|
+
- color: `color`, `backgroundColor` (+ `colorShade`/`backgroundColorShade`), `textColor`, `bgColor`
|
|
68
|
+
- typography: `textSize`, `textAlign`, `textTransform`, `textWeight`, `fontFamily`
|
|
69
|
+
- display/visibility: `display`, `visibility` (+ `displayMobile`…`visibilityFullhd` viewport variants)
|
|
70
|
+
- flexbox: `flexDirection`, `flexWrap`, `justifyContent`, `alignContent`, `alignItems`, `alignSelf`, `flexGrow`, `flexShrink`
|
|
71
|
+
- misc: `float`, `overflow`, `overlay`, `interaction`, `cursor`, `radius`, `shadow`, `skeleton`, `clearfix`, `relative`, `fullHeight`
|
|
72
|
+
|
|
73
|
+
…and for raw Bulma helper classes in `className` strings (`is-*`, `has-*`, `m*-*`, `p*-*`,
|
|
74
|
+
`is-size-*`, `is-hidden*`, `is-flex*`). **Any hit → do not use `no-helpers`**; fall back to
|
|
75
|
+
`no-dark-mode` or Lever 2. The bestax extras helpers (`is-cursor-*`, sizing) are dropped too.
|
|
76
|
+
|
|
77
|
+
## Lever 2 — modular Sass build
|
|
78
|
+
|
|
79
|
+
Compile only the Bulma modules + bestax extras partials the app actually uses. Needs the
|
|
80
|
+
`sass` compiler as a dev dependency (Bulma's own build tool — Vite compiles `.scss` natively):
|
|
81
|
+
|
|
82
|
+
```sh
|
|
83
|
+
npm install -D sass
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Create `src/styles.scss` — base + themes always come first:
|
|
87
|
+
|
|
88
|
+
```scss
|
|
89
|
+
// Configure shared variables FIRST (before anything loads utilities) —
|
|
90
|
+
// the prebuilt flavors set this brand primary; omit it and buttons revert
|
|
91
|
+
// to Bulma's default turquoise:
|
|
92
|
+
@use 'bulma/sass/utilities' with (
|
|
93
|
+
$primary: #1e6b99
|
|
94
|
+
);
|
|
95
|
+
|
|
96
|
+
// Required base: reset + CSS variable definitions
|
|
97
|
+
@use 'bulma/sass/base';
|
|
98
|
+
@use 'bulma/sass/themes';
|
|
99
|
+
|
|
100
|
+
// One line per stock Bulma component the app imports…
|
|
101
|
+
@use 'bulma/sass/elements/button';
|
|
102
|
+
@use 'bulma/sass/components/navbar';
|
|
103
|
+
// …and per bestax extras component:
|
|
104
|
+
@use '@allxsmith/bestax-bulma/scss/components/dialog';
|
|
105
|
+
// Helper categories only if the app uses those helper props:
|
|
106
|
+
@use 'bulma/sass/helpers/spacing';
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Then replace the prebuilt CSS import in `src/main.tsx` with `import './styles.scss';`,
|
|
110
|
+
build, and measure. Derive the `@use` list from the components the app imports from
|
|
111
|
+
`@allxsmith/bestax-bulma` — the full component→partial mapping, the authoritative extras
|
|
112
|
+
partial inventory, and a worked example are in `references/modular-build.md`.
|
|
113
|
+
|
|
114
|
+
## Lever 3 — import & icon-asset hygiene (minor)
|
|
115
|
+
|
|
116
|
+
- **Named imports.** `import * as Bestax from '@allxsmith/bestax-bulma'` defeats tree
|
|
117
|
+
shaking. Convert to named imports (`import { Button, Card } from …`) — a JS-side saving
|
|
118
|
+
(whole library ≈ 49 KB min+gzip), so report it honestly as minor.
|
|
119
|
+
- **Unused icon libraries.** Scaffolded apps may carry an icon library the app never uses:
|
|
120
|
+
icon-font packages in `package.json` (`@fortawesome/fontawesome-free`, `@mdi/font`,
|
|
121
|
+
`material-icons`, `material-symbols`) with their CSS imports in `src/main.*`, or Ionicons
|
|
122
|
+
CDN `<script>` tags in `index.html`. Icon fonts often outweigh Bulma itself — if no
|
|
123
|
+
`<Icon>` uses that library, delete the dependency/import/script. Pure win, no tooling.
|
|
124
|
+
|
|
125
|
+
## References
|
|
126
|
+
|
|
127
|
+
- `references/modular-build.md` — full Lever 2 procedure: component→partial mapping, the
|
|
128
|
+
authoritative extras partial inventory, helper categories, and a worked `styles.scss`.
|
|
129
|
+
- Docs: [Optimizing CSS Size](https://bestax.io/docs/guides/getting-started/optimizing-css) ·
|
|
130
|
+
[Modular — Option C](https://bestax.io/docs/guides/getting-started/modular#option-c--hand-rolled-modular-scss-advanced) ·
|
|
131
|
+
[CSS Variations](https://bestax.io/docs/guides/getting-started/variations#file-size-comparison)
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
# Modular Sass build — component→partial mapping and procedure
|
|
2
|
+
|
|
3
|
+
Build a stylesheet containing only what the app uses, from the library's own SCSS sources.
|
|
4
|
+
This is the "Option C" pattern from the
|
|
5
|
+
[Modular guide](https://bestax.io/docs/guides/getting-started/modular#option-c--hand-rolled-modular-scss-advanced).
|
|
6
|
+
|
|
7
|
+
## Prerequisites
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install -D sass
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
`sass` is Bulma's own compiler, dev-only. Vite compiles `.scss` out of the box — no plugin.
|
|
14
|
+
`bulma` is already present as a dependency of `@allxsmith/bestax-bulma`, and the library
|
|
15
|
+
publishes its SCSS sources (`src/scss` ships in the npm package, exposed via the
|
|
16
|
+
`@allxsmith/bestax-bulma/scss/*` export).
|
|
17
|
+
|
|
18
|
+
## The required base — always first
|
|
19
|
+
|
|
20
|
+
```scss
|
|
21
|
+
// Configure shared variables FIRST — a Sass module can only be configured on
|
|
22
|
+
// its first load, and every Bulma module loads utilities internally. The
|
|
23
|
+
// prebuilt bestax flavors set this brand primary; omit it and is-primary
|
|
24
|
+
// reverts to Bulma's default turquoise (verified failure mode).
|
|
25
|
+
@use 'bulma/sass/utilities' with (
|
|
26
|
+
$primary: #1e6b99
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
// Required: reset + CSS variable definitions
|
|
30
|
+
@use 'bulma/sass/base';
|
|
31
|
+
@use 'bulma/sass/themes';
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
- `base` — minireset, generic element styles, keyframes.
|
|
35
|
+
- `themes` — registers the `--bulma-*` custom properties (colors, radii, schemes) and
|
|
36
|
+
light/dark setup. Without it, components render unstyled-looking because every color
|
|
37
|
+
resolves to nothing.
|
|
38
|
+
- Exception: `bulma/sass/grid/columns` and `bulma/sass/grid/grid` register their own CSS
|
|
39
|
+
vars and can technically stand alone — include base + themes anyway; it is the safe
|
|
40
|
+
default.
|
|
41
|
+
|
|
42
|
+
## Component → partial mapping
|
|
43
|
+
|
|
44
|
+
**Rule:** stock Bulma components map to `bulma/sass/<category>/<lowercased-name>`; bestax
|
|
45
|
+
extras map to `@allxsmith/bestax-bulma/scss/<category>/<lowercased-name>`. Components that
|
|
46
|
+
are pure stock Bulma (Button, Box, Card, Navbar, Modal, Hero, …) have **no** extras partial —
|
|
47
|
+
Bulma's own module is all they need.
|
|
48
|
+
|
|
49
|
+
Stock Bulma examples:
|
|
50
|
+
|
|
51
|
+
```scss
|
|
52
|
+
@use 'bulma/sass/elements/button'; // Button, Buttons
|
|
53
|
+
@use 'bulma/sass/elements/box'; // Box
|
|
54
|
+
@use 'bulma/sass/elements/notification'; // Notification
|
|
55
|
+
@use 'bulma/sass/elements/title'; // Title, SubTitle
|
|
56
|
+
@use 'bulma/sass/form/input'; // Input
|
|
57
|
+
@use 'bulma/sass/form/select'; // Select
|
|
58
|
+
@use 'bulma/sass/components/card'; // Card
|
|
59
|
+
@use 'bulma/sass/components/modal'; // Modal
|
|
60
|
+
@use 'bulma/sass/components/navbar'; // Navbar
|
|
61
|
+
@use 'bulma/sass/grid/columns'; // Columns, Column
|
|
62
|
+
@use 'bulma/sass/grid/grid'; // Grid, Cell
|
|
63
|
+
@use 'bulma/sass/layout/container'; // Container
|
|
64
|
+
@use 'bulma/sass/layout/section'; // Section
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Authoritative bestax extras inventory
|
|
68
|
+
|
|
69
|
+
Every extras partial that exists (from the library's `src/scss/**/_index.scss` — this list
|
|
70
|
+
is **more complete** than the docs page's Option C example, which omits several):
|
|
71
|
+
|
|
72
|
+
**Components** (`@allxsmith/bestax-bulma/scss/components/<name>`):
|
|
73
|
+
`loading`, `collapse`, `tooltip`, `steps`, `sidebar`, `toast`, `dialog`, `carousel`, `tabs`,
|
|
74
|
+
`reveal`, `avatar`, `avatars`, `badge`
|
|
75
|
+
|
|
76
|
+
**Form** (`@allxsmith/bestax-bulma/scss/form/<name>`):
|
|
77
|
+
`checkbox`, `radio`, `switch`, `slider`, `numberinput`, `rate`, `autocomplete`, `taginput`,
|
|
78
|
+
`picker-popover`, `dateinput`, `timeinput`, `datetimeinput`
|
|
79
|
+
|
|
80
|
+
**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `linkbutton`
|
|
81
|
+
|
|
82
|
+
**Helpers** (`@allxsmith/bestax-bulma/scss/helpers/<name>`): `cursor`, `sizing`
|
|
83
|
+
|
|
84
|
+
Notes:
|
|
85
|
+
|
|
86
|
+
- The extras partial name is the component name lowercased (`Dialog` →
|
|
87
|
+
`scss/components/dialog`; `NumberInput` → `scss/form/numberinput`).
|
|
88
|
+
- Extras `Tabs` **extends** stock Bulma tabs (vertical variant) — an app using `Tabs` needs
|
|
89
|
+
both `bulma/sass/components/tabs` and `@allxsmith/bestax-bulma/scss/components/tabs`.
|
|
90
|
+
- `DateInput`/`TimeInput`/`DateTimeInput` also need `picker-popover`.
|
|
91
|
+
- Stock-Bulma form controls still need their Bulma module (`bulma/sass/form/…`); the extras
|
|
92
|
+
form partials above style only the bestax-specific behavior.
|
|
93
|
+
- Bulma component modules pull their own internal sub-elements — e.g.
|
|
94
|
+
`elements/notification` styles its `delete` close button itself (verified). No extra
|
|
95
|
+
`@use` lines are needed for pieces rendered _inside_ a component you've already included.
|
|
96
|
+
|
|
97
|
+
## Bulma helper categories
|
|
98
|
+
|
|
99
|
+
Include a helper module **only if the app's helper props (or `className` strings) need it**:
|
|
100
|
+
|
|
101
|
+
⚠️ The `display` prop (`display="flex"`, `is-flex`, `is-block`, …) lives in **`visibility`**,
|
|
102
|
+
not `flexbox` — `flexbox` holds only the alignment props. Verified failure mode: omit
|
|
103
|
+
`visibility` and every `display="flex"` silently renders `block`.
|
|
104
|
+
|
|
105
|
+
```scss
|
|
106
|
+
@use 'bulma/sass/helpers/spacing'; // m*/p* props
|
|
107
|
+
@use 'bulma/sass/helpers/color'; // color/backgroundColor props, has-text-*/has-background-*
|
|
108
|
+
@use 'bulma/sass/helpers/typography'; // textSize/textAlign/textTransform/textWeight/fontFamily
|
|
109
|
+
@use 'bulma/sass/helpers/visibility'; // display/visibility props incl. display="flex" (is-flex/is-block/is-hidden*)
|
|
110
|
+
@use 'bulma/sass/helpers/flexbox'; // flex* alignment props (justifyContent/alignItems/flexGrow…) — NOT display="flex"
|
|
111
|
+
@use 'bulma/sass/helpers/other'; // overlay/interaction/radius/shadow/clearfix/relative…
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Procedure
|
|
115
|
+
|
|
116
|
+
1. **Inventory** — list every component the app imports from `@allxsmith/bestax-bulma`
|
|
117
|
+
(grep the import statements; remember re-exports through local files).
|
|
118
|
+
2. **Map** — one `@use` line per component via the rule above; add the helper categories the
|
|
119
|
+
app's helper props require; dedupe.
|
|
120
|
+
3. **Write `src/styles.scss`** — the `utilities` config first, then base + themes, then the
|
|
121
|
+
mapped lines.
|
|
122
|
+
4. **Swap the import** — in `src/main.tsx`/`src/main.jsx`, replace the prebuilt CSS import
|
|
123
|
+
(`bestax.css` or `versions/*.css`) with `import './styles.scss';`.
|
|
124
|
+
5. **Build and measure** — raw + gzip, compare against the prebuilt baseline, report the
|
|
125
|
+
delta.
|
|
126
|
+
6. **Verify visually** — open the app; a missing partial shows up as an unstyled component,
|
|
127
|
+
an omitted helper module as ignored spacing/color props. Add the missing `@use` line —
|
|
128
|
+
never paper over it with custom CSS.
|
|
129
|
+
|
|
130
|
+
## Worked example — the create-bestax starter app
|
|
131
|
+
|
|
132
|
+
The `npm create bestax` starter renders `Container`, `Section`, `Columns`/`Column`, `Image`,
|
|
133
|
+
`Title`/`SubTitle`, `Box`, `Card`, `Buttons`/`Button`, and `Notification` — all stock Bulma,
|
|
134
|
+
no bestax extras. Its helper props are `display`/`justifyContent` (visibility + flexbox),
|
|
135
|
+
`textAlign` (typography), and `textColor` (color); it uses no spacing props. That inventory
|
|
136
|
+
compiles to the following — verified pixel-equivalent to the prebuilt `complete` flavor in
|
|
137
|
+
headless Chromium (light and dark), at 453 KB raw / 40 KB gzip vs 813 KB / 83 KB:
|
|
138
|
+
|
|
139
|
+
```scss
|
|
140
|
+
// src/styles.scss
|
|
141
|
+
@use 'bulma/sass/utilities' with (
|
|
142
|
+
$primary: #1e6b99
|
|
143
|
+
);
|
|
144
|
+
|
|
145
|
+
@use 'bulma/sass/base';
|
|
146
|
+
@use 'bulma/sass/themes';
|
|
147
|
+
|
|
148
|
+
@use 'bulma/sass/elements/box';
|
|
149
|
+
@use 'bulma/sass/elements/button'; // Button + Buttons
|
|
150
|
+
@use 'bulma/sass/elements/image';
|
|
151
|
+
@use 'bulma/sass/elements/notification';
|
|
152
|
+
@use 'bulma/sass/elements/title'; // Title + SubTitle
|
|
153
|
+
@use 'bulma/sass/components/card';
|
|
154
|
+
@use 'bulma/sass/grid/columns';
|
|
155
|
+
@use 'bulma/sass/layout/container';
|
|
156
|
+
@use 'bulma/sass/layout/section';
|
|
157
|
+
|
|
158
|
+
@use 'bulma/sass/helpers/visibility'; // display="flex"
|
|
159
|
+
@use 'bulma/sass/helpers/flexbox'; // justifyContent/flexGrow/flexShrink
|
|
160
|
+
@use 'bulma/sass/helpers/typography'; // textAlign
|
|
161
|
+
@use 'bulma/sass/helpers/color'; // textColor
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
```tsx
|
|
165
|
+
// src/main.tsx — before
|
|
166
|
+
import '@allxsmith/bestax-bulma/bestax.css';
|
|
167
|
+
// after
|
|
168
|
+
import './styles.scss';
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
A custom class prefix is `$class-prefix` in the same `with (…)` block as `$primary`, paired
|
|
172
|
+
with `<ConfigProvider classPrefix="my-">` at the app root (the library's own
|
|
173
|
+
`src/scss/versions/*.scss` flavor builds use exactly this mechanism).
|
|
@@ -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`
|