bestax-theming
Installation
SKILL.md
Theming @allxsmith/bestax-bulma
@allxsmith/bestax-bulma wraps Bulma 1.x, which is themed through --bulma-* CSS custom
properties. Theme an app by overriding the right variables — no component re-styling required.
Approach
Recolor a brand color by overriding its hue/saturation/lightness trio — Bulma derives every
shade, light/dark, and invert variant from --bulma-<color>-h / -s / -l. Override the trio and
the whole palette follows.
Choose an override path:
Themecomponent (runtime, preferred). Exported from the package. Pass named HSL props (primaryH,primaryS,primaryL, …) and/orbulmaVars={{ '--bulma-*': '…' }}for everything else. AddisRootto inject the variables globally at:root(once, at the app root); omit it to scope the variables to the wrapped subtree.- Plain CSS. Set
:root { --bulma-primary-h: …; }(or any selector) directly. - Build-time Sass.
@use 'bulma/sass' with ($primary: #1e6b99)when compiling Bulma's Sass.