diff --git a/bestax-mcp/data/components/Theme.json b/bestax-mcp/data/components/Theme.json
index d695234bb..d9a589914 100644
--- a/bestax-mcp/data/components/Theme.json
+++ b/bestax-mcp/data/components/Theme.json
@@ -59,7 +59,7 @@
"storybook": null,
"summary": "The `Theme` component provides a powerful way to customize Bulma's appearance using CSS custom properties (CSS variables).",
"import": "import { Theme } from '@allxsmith/bestax-bulma';",
- "doc": "# Theme\n\n## Overview\n\nThe `Theme` component provides a powerful way to customize Bulma's appearance using CSS custom properties (CSS variables). It allows you to override Bulma's design tokens like colors, spacing, typography, and other visual properties either globally or locally within specific component trees. The Theme component supports both CSS variable injection via props and direct CSS variable objects.\n\n---\n\n## Import\n\n```tsx\nimport { Theme } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Usage\n\n### Basic Theme Customization\n\n```tsx\nfunction BasicThemeCustomization() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Global Theme (Root Level)\n\n```tsx\nfunction GlobalTheme() {\n return (\n \n
\n \n \n
\n \n );\n}\n```\n\n### Dark Mode\n\nThe `colorMode` prop sets Bulma's `data-theme` on ``, flipping the light/dark scheme globally.\nUse `'system'` to follow the OS preference.\n\n:::warning Single-mode designs should pin `colorMode`\n\nOmitting `colorMode` preserves whatever `data-theme` is already set — and when nothing has set\none (the usual case), the scheme follows the visitor's OS: Bulma's text colors flip on a\ndark-mode machine even if your design is light-only, breaking contrast against any fixed custom\nbackgrounds. If you support only one mode, pin it (``); if you\nsupport both, don't hardcode surface/text colors — see\n[Dark Mode & Contrast](../../guides/features/css-variables.md#dark-mode--contrast).\n\n:::\n\n```tsx\nimport { useState } from 'react';\n\nfunction App() {\n const [mode, setMode] = useState<'light' | 'dark' | 'system'>('system');\n return (\n \n \n \n \n \n );\n}\n```\n\n### Local Theme (Component Level)\n\n```tsx\nfunction LocalTheme() {\n return (\n
\n \n\n \n \n \n\n \n
\n );\n}\n```\n\n### Using CSS Variables Object\n\n```tsx\nfunction SunsetTheme() {\n const sunsetTheme = {\n '--bulma-scheme-h': '18',\n '--bulma-scheme-s': '90%',\n '--bulma-light-l': '85%',\n '--bulma-dark-l': '20%',\n '--bulma-primary-h': '25',\n '--bulma-primary-s': '85%',\n '--bulma-primary-l': '55%',\n };\n\n return (\n \n \n Sunset Theme\n \n \n \n \n );\n}\n```\n\n### Advanced CSS Variables Usage\n\nBulma derives the body font and the control radius from these variables at `:root`, so set\ntypography and radius on an `isRoot` theme.\n\n```tsx\nfunction TypographyTheme() {\n const typographyTheme = {\n '--bulma-family-primary': '\"Helvetica Neue\", sans-serif',\n '--bulma-family-code': '\"Fira Code\", monospace',\n '--bulma-size-normal': '16px',\n '--bulma-weight-bold': '700',\n };\n\n return (\n \n Custom Typography\n With custom fonts and weights\n \n );\n}\n```\n\n```tsx\nfunction RadiusTheme() {\n // `radius` is the border radius helper, as on every component, so the radius scale goes through bulmaVars\n const radii = {\n '--bulma-radius-small': '6px',\n '--bulma-radius': '12px',\n '--bulma-radius-medium': '16px',\n '--bulma-radius-large': '20px',\n };\n\n return (\n \n \n \n );\n}\n```\n\nSpacing that Bulma reads where it is used, such as the block and column gaps, works on a scoped\ntheme:\n\n```tsx\nfunction SpacingTheme() {\n const spacingTheme = {\n '--bulma-block-spacing': '2rem',\n '--bulma-column-gap': '1rem',\n };\n\n return (\n \n \n \n Wider column gap\n Wider block spacing\n \n \n Wider column gap\n \n \n \n );\n}\n```\n\n### Complete Color Scheme\n\n```tsx\nfunction ForestTheme() {\n const forestScheme = {\n schemeH: '150', // forest green hue\n schemeS: '50%',\n lightL: '80%',\n lightInvertL: '20%',\n darkL: '18%',\n darkInvertL: '85%',\n softL: '55%',\n boldL: '35%',\n primaryH: '160',\n primaryS: '60%',\n primaryL: '45%',\n linkH: '155',\n linkS: '65%',\n linkL: '40%',\n successH: '120',\n successS: '70%',\n successL: '45%',\n warningH: '45',\n warningS: '85%',\n warningL: '55%',\n dangerH: '355',\n dangerS: '75%',\n dangerL: '50%',\n hoverBackgroundLDelta: '4%',\n activeBackgroundLDelta: '8%',\n };\n\n return (\n \n \n Forest Theme\n \n \n \n \n \n \n \n );\n}\n```\n\n### Theme with Styling\n\n```tsx\nfunction StyledTheme() {\n return (\n \n Styled Theme Container\n \n \n );\n}\n```\n\n### Nested Themes\n\n```tsx\nfunction NestedThemes() {\n return (\n \n Outer Theme (Blue)\n \n\n \n Inner Theme (Green)\n \n \n\n \n \n );\n}\n```\n\n### Theme with ConfigProvider\n\n```tsx\nfunction PrefixedTheme() {\n return (\n \n \n \n \n \n );\n}\n```\n\n---\n\n## Best Practices\n\n### Global vs Local Themes\n\n- Use `isRoot={true}` for application-wide themes that should affect all components\n- Use local themes (default `isRoot={false}`) for component-specific styling or theme variations\n- Local themes inherit from parent themes and can override specific variables\n- Several `isRoot` themes can be mounted at once, such as a color theme at the app root and a\n typography theme next to it. Each adds its own variables at `:root`; where two set the same\n variable, the inner or later-mounted one wins, as with nested local themes, and unmounting one\n removes only its own variables\n\n### CSS Variable Naming\n\n- All Bulma CSS variables follow the `--bulma-*` naming convention\n- Named props exist for the scheme and color variables only (like `primaryH`); every other variable, typography and radius included, goes through `bulmaVars`\n- `bulmaVars` keys are the full variable names (`'--bulma-family-primary'`), not camelCase\n- `bulmaVars` also accepts the scheme surface variables — `--bulma-scheme-main`, `--bulma-scheme-main-bis`, `--bulma-scheme-main-ter`, `--bulma-scheme-invert`, `--bulma-scheme-invert-bis`, `--bulma-scheme-invert-ter` — so overriding `--bulma-scheme-main-bis`/`-ter` re-tints every scheme-background band (e.g., ``) at once\n- `bulmaVars` also accepts `--bulma-shadow` (plus `--bulma-shadow-h`/`-s`/`-l`) — the upstream token that `.box`, `.card`, `.dropdown`, and `.panel` derive their own shadow variables from. Those selectors re-declare their derived variable (e.g. `--bulma-box-shadow`) on themselves, so setting it from an ancestor `Theme` is only inherited and never wins; overriding `--bulma-shadow` itself is the one override that cascades. There is no individual `shadow` prop for this — `shadow` already names the unrelated `shadowless` helper class — so reach it through `bulmaVars`\n\n### Performance Considerations\n\n- Prefer setting themes at higher levels in your component tree rather than deeply nested\n- CSS variables are inherited, so child themes only need to override specific variables\n\n### Color System\n\n- Bulma uses HSL (Hue, Saturation, Lightness) for its color system\n- Hue values range from 0-360 (color wheel degrees)\n- Saturation and Lightness are typically percentages (e.g., '50%')\n- The scheme variables control the base color relationships\n\n---\n\n## API Reference\n\n### Named Props and `bulmaVars`\n\n`ThemeProps` has a named, camelCase prop for each scheme and color variable, listed under\n[CSS Variable Props](#css-variable-props). Each converts to its CSS variable by the same rule:\n\n```\npropName → --bulma-prop-name\n```\n\n- `primaryH` → `--bulma-primary-h`\n- `schemeS` → `--bulma-scheme-s`\n- `lightL` → `--bulma-light-l`\n- `hoverBackgroundLDelta` → `--bulma-hover-background-l-delta`\n\nEvery other variable (typography, radius, spacing, and the rest) has no named prop in\n`ThemeProps` and goes through `bulmaVars`, keyed by its full `--bulma-*` name. JavaScript code\nthat passes one as a camelCase prop (`familyPrimary`) may still render, but it is outside the\ntyped API, so move it to `bulmaVars`:\n\n```tsx\n\n \n\n```\n\nTwo of those names are already helper props, so they cannot double as CSS-variable props:\n\n- `radius` is the border radius helper, as on every other component, so ``\n adds `is-radiusless` to the wrapper. On a Theme it also sets `--bulma-radius` to `0`, so what\n is inside the Theme loses its radius too; under `isRoot` it writes that at `:root`, squaring\n everything on the page that takes its radius from it. The sizes (`small`, `normal`, `large`,\n `rounded`) add their `has-radius-*` class to the wrapper and set no variable, so they round\n the wrapper and leave what is inside alone; under `isRoot` there is no wrapper, so they do\n nothing and warn in development. Set any other `--bulma-radius` through\n `bulmaVars`. `` is a type error; in JavaScript it still sets\n `--bulma-radius`, which is how the prop used to behave, but that route is deprecated and logs\n a warning in development.\n- `shadow` is the `shadowless` helper. Set `--bulma-shadow` through `bulmaVars`.\n\n### Props vs bulmaVars\n\nYou can set the scheme and color variables in two ways:\n\n1. **Named Props** (recommended where one exists):\n\n ```tsx\n \n \n \n ```\n\n2. **bulmaVars Object** (for every other variable, or when you have many to set):\n\n ```tsx\n \n \n \n ```\n\n3. **Combined** (props take precedence over bulmaVars):\n ```tsx\n \n \n \n ```\n\n### TypeScript Support\n\n`bulmaVars` is typed as a partial record keyed by the union of every variable `Theme` can set.\nWrite it as an object literal and your editor autocompletes the keys and flags a misspelled or\nunsupported one as a type error. A separately declared object only has to share one valid key\nto typecheck, so a typo in it is silently dropped; annotate it with\n`satisfies ThemeProps['bulmaVars']` to keep the check:\n\n```tsx\n\n \n\n```\n\n---\n\n## See Also\n\n- [ConfigProvider](./config.md) - For class prefixing and configuration\n- [useBulmaClasses](./usebulmaclasses.md) - For applying Bulma helper classes\n- [Bulma CSS Variables Documentation](https://bulma.io/documentation/features/css-variables/) - Official Bulma CSS variables reference\n\n---\n\n## Props\n\n| Prop | Type | Description |\n| ----------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `children` | `ReactNode` | The child components to apply the theme to. |\n| `className` | `string` | Additional CSS classes for the theme wrapper. |\n| `isRoot` | `boolean` | When `true`, applies CSS variables globally at `:root` level. When `false` (default), applies variables only to the wrapper div. Several root themes compose; an inner or later-mounted one wins a variable they share. |\n| `colorMode` | `'light' \\| 'dark' \\| 'system'` | Sets Bulma's light/dark scheme by writing the `data-theme` attribute on ``. Always global (even on a scoped `Theme`). `'system'` removes the attribute so Bulma follows the OS `prefers-color-scheme`. Omit to leave the current setting untouched. |\n| `bulmaVars` | `ThemeProps['bulmaVars']` | Object mapping Bulma CSS variable names to string values (e.g., `{'--bulma-primary-h': '210'}`). Keys are limited to the variables listed below; anything else is not applied. |\n| `radius` | `'radiusless' \\| 'small' \\| 'normal' \\| 'large' \\| 'rounded'` | The border radius helper. `radiusless` adds `is-radiusless` to the wrapper div and sets `--bulma-radius` to `0`, at `:root` under `isRoot`. The sizes add their `has-radius-*` class to the wrapper and set no variable, so under `isRoot` they do nothing and warn in development. Any other string still sets `--bulma-radius`, a deprecated route that warns in development. |\n\n### CSS Variable Props\n\nThe Theme component accepts individual CSS variable props that correspond to Bulma's design tokens. These props are automatically converted to their corresponding CSS custom properties (e.g., `primaryH` → `--bulma-primary-h`).\n\n#### Scheme Variables\n\n| Prop | Type | Description | CSS Variable |\n| ------------------------ | -------- | ------------------------------------------------- | ----------------------------------- |\n| `schemeH` | `string` | Base hue for the color scheme (0-360) | `--bulma-scheme-h` |\n| `schemeS` | `string` | Base saturation for the color scheme (percentage) | `--bulma-scheme-s` |\n| `lightL` | `string` | Lightness value for light backgrounds | `--bulma-light-l` |\n| `lightInvertL` | `string` | Inverted lightness for light backgrounds | `--bulma-light-invert-l` |\n| `darkL` | `string` | Lightness value for dark backgrounds | `--bulma-dark-l` |\n| `darkInvertL` | `string` | Inverted lightness for dark backgrounds | `--bulma-dark-invert-l` |\n| `softL` | `string` | Lightness value for soft colors | `--bulma-soft-l` |\n| `boldL` | `string` | Lightness value for bold colors | `--bulma-bold-l` |\n| `softInvertL` | `string` | Inverted lightness for soft colors | `--bulma-soft-invert-l` |\n| `boldInvertL` | `string` | Inverted lightness for bold colors | `--bulma-bold-invert-l` |\n| `hoverBackgroundLDelta` | `string` | Lightness delta for hover background states | `--bulma-hover-background-l-delta` |\n| `activeBackgroundLDelta` | `string` | Lightness delta for active background states | `--bulma-active-background-l-delta` |\n| `hoverBorderLDelta` | `string` | Lightness delta for hover border states | `--bulma-hover-border-l-delta` |\n| `activeBorderLDelta` | `string` | Lightness delta for active border states | `--bulma-active-border-l-delta` |\n| `hoverColorLDelta` | `string` | Lightness delta for hover text color states | `--bulma-hover-color-l-delta` |\n| `activeColorLDelta` | `string` | Lightness delta for active text color states | `--bulma-active-color-l-delta` |\n| `hoverShadowADelta` | `string` | Alpha delta for hover shadow states | `--bulma-hover-shadow-a-delta` |\n| `activeShadowADelta` | `string` | Alpha delta for active shadow states | `--bulma-active-shadow-a-delta` |\n\n#### Color Variables\n\n| Prop | Type | Description | CSS Variable |\n| ---------- | -------- | ------------------------------------- | ------------------- |\n| `primaryH` | `string` | Primary color hue (0-360) | `--bulma-primary-h` |\n| `primaryS` | `string` | Primary color saturation (percentage) | `--bulma-primary-s` |\n| `primaryL` | `string` | Primary color lightness (percentage) | `--bulma-primary-l` |\n| `linkH` | `string` | Link color hue (0-360) | `--bulma-link-h` |\n| `linkS` | `string` | Link color saturation (percentage) | `--bulma-link-s` |\n| `linkL` | `string` | Link color lightness (percentage) | `--bulma-link-l` |\n| `infoH` | `string` | Info color hue (0-360) | `--bulma-info-h` |\n| `infoS` | `string` | Info color saturation (percentage) | `--bulma-info-s` |\n| `infoL` | `string` | Info color lightness (percentage) | `--bulma-info-l` |\n| `successH` | `string` | Success color hue (0-360) | `--bulma-success-h` |\n| `successS` | `string` | Success color saturation (percentage) | `--bulma-success-s` |\n| `successL` | `string` | Success color lightness (percentage) | `--bulma-success-l` |\n| `warningH` | `string` | Warning color hue (0-360) | `--bulma-warning-h` |\n| `warningS` | `string` | Warning color saturation (percentage) | `--bulma-warning-s` |\n| `warningL` | `string` | Warning color lightness (percentage) | `--bulma-warning-l` |\n| `dangerH` | `string` | Danger color hue (0-360) | `--bulma-danger-h` |\n| `dangerS` | `string` | Danger color saturation (percentage) | `--bulma-danger-s` |\n| `dangerL` | `string` | Danger color lightness (percentage) | `--bulma-danger-l` |\n\n#### Shadow Variables\n\nReachable only through `bulmaVars` — there is no individual prop, since `shadow` already names\nthe `BulmaOtherProps` `shadowless` helper class. As noted above, `--bulma-shadow` is the one\noverride that cascades into `.box`/`.card`/`.dropdown`/`.panel` shadows.\n\n| CSS Variable | Description |\n| ------------------ | ----------------------------------------------------------------------------------------------------- |\n| `--bulma-shadow-h` | Shadow color hue (0-360) |\n| `--bulma-shadow-s` | Shadow color saturation (percentage) |\n| `--bulma-shadow-l` | Shadow color lightness (percentage) |\n| `--bulma-shadow` | The full shadow value that `.box`/`.card`/`.dropdown`/`.panel` derive their own shadow variables from |\n\n#### Complete CSS Variables List\n\nThese are the keys `bulmaVars` accepts, in addition to the scheme, color, and shadow variables\nabove.\n\nBulma declares many per-component variables (`--bulma-card-*`, `--bulma-title-*`,\n`--bulma-box-*`, …) on the component's own selector. That declaration beats a value the\ncomponent would inherit from a `Theme` wrapper, the same way the shadow note in\n[CSS Variable Naming](#css-variable-naming) describes, so check where Bulma declares a variable\nbefore relying on a `Theme` override of it.\n\n**Scheme Surface Variables:**\n\n- `--bulma-scheme-main`, `--bulma-scheme-main-bis`, `--bulma-scheme-main-ter`\n- `--bulma-scheme-invert`, `--bulma-scheme-invert-bis`, `--bulma-scheme-invert-ter`\n\n**Typography Variables:**\n\n- `--bulma-family-primary`, `--bulma-family-secondary`, `--bulma-family-code`\n- `--bulma-size-small`, `--bulma-size-normal`, `--bulma-size-medium`, `--bulma-size-large`\n- `--bulma-weight-light`, `--bulma-weight-normal`, `--bulma-weight-medium`, `--bulma-weight-semibold`, `--bulma-weight-bold`, `--bulma-weight-extrabold`\n- `--bulma-body-background-color`, `--bulma-body-size`, `--bulma-body-min-width`, `--bulma-body-rendering`\n- `--bulma-body-family`, `--bulma-body-overflow-x`, `--bulma-body-overflow-y`, `--bulma-body-color`\n- `--bulma-body-font-size`, `--bulma-body-weight`, `--bulma-body-line-height`\n- `--bulma-code-family`, `--bulma-code-padding`, `--bulma-code-weight`, `--bulma-code-size`\n- `--bulma-small-font-size`, `--bulma-hr-background-color`, `--bulma-hr-height`, `--bulma-hr-margin`\n- `--bulma-strong-color`, `--bulma-strong-weight`, `--bulma-pre-font-size`, `--bulma-pre-padding`, `--bulma-pre-code-font-size`\n\n**Layout & Spacing Variables:**\n\n- `--bulma-block-spacing`, `--bulma-duration`, `--bulma-easing`, `--bulma-speed`\n- `--bulma-radius-small`, `--bulma-radius`, `--bulma-radius-medium`, `--bulma-radius-large`, `--bulma-radius-rounded`\n- `--bulma-arrow-color`, `--bulma-loading-color`\n- `--bulma-column-gap`, `--bulma-grid-gap`, `--bulma-grid-column-count`, `--bulma-grid-column-min`\n- `--bulma-grid-cell-column-span`, `--bulma-grid-cell-column-start`\n\n**Box Variables:**\n\n- `--bulma-box-background-color`, `--bulma-box-color`, `--bulma-box-radius`, `--bulma-box-shadow`\n- `--bulma-box-padding`, `--bulma-box-link-hover-shadow`, `--bulma-box-link-active-shadow`\n\n**Breadcrumb Variables:**\n\n- `--bulma-breadcrumb-item-color`, `--bulma-breadcrumb-item-hover-color`, `--bulma-breadcrumb-item-active-color`\n- `--bulma-breadcrumb-item-padding-vertical`, `--bulma-breadcrumb-item-padding-horizontal`\n- `--bulma-breadcrumb-item-separator-color`\n\n**Card Variables:**\n\n- `--bulma-card-color`, `--bulma-card-background-color`, `--bulma-card-shadow`, `--bulma-card-radius`\n- `--bulma-card-header-background-color`, `--bulma-card-header-color`, `--bulma-card-header-padding`\n- `--bulma-card-header-shadow`, `--bulma-card-header-weight`\n- `--bulma-card-content-background-color`, `--bulma-card-content-padding`\n- `--bulma-card-footer-background-color`, `--bulma-card-footer-border-top`, `--bulma-card-footer-padding`\n- `--bulma-card-media-margin`\n\n**Dropdown Variables:**\n\n- `--bulma-dropdown-menu-min-width`, `--bulma-dropdown-content-background-color`\n- `--bulma-dropdown-content-offset`, `--bulma-dropdown-content-padding-bottom`\n- `--bulma-dropdown-content-padding-top`, `--bulma-dropdown-content-radius`\n- `--bulma-dropdown-content-shadow`, `--bulma-dropdown-content-z`\n- `--bulma-dropdown-item-h`, `--bulma-dropdown-item-s`, `--bulma-dropdown-item-l`\n- `--bulma-dropdown-item-background-l`, `--bulma-dropdown-item-background-l-delta`\n- `--bulma-dropdown-item-hover-background-l-delta`, `--bulma-dropdown-item-active-background-l-delta`\n- `--bulma-dropdown-item-color-l`, `--bulma-dropdown-item-selected-h`\n- `--bulma-dropdown-item-selected-s`, `--bulma-dropdown-item-selected-l`\n- `--bulma-dropdown-item-selected-background-l`, `--bulma-dropdown-item-selected-color-l`\n- `--bulma-dropdown-divider-background-color`\n\n**Input Variables:**\n\n- `--bulma-input-h`, `--bulma-input-s`, `--bulma-input-l`, `--bulma-input-border-style`\n- `--bulma-input-border-l`, `--bulma-input-border-l-delta`, `--bulma-input-hover-border-l-delta`\n- `--bulma-input-active-border-l-delta`, `--bulma-input-focus-h`, `--bulma-input-focus-s`\n- `--bulma-input-focus-l`, `--bulma-input-focus-shadow-size`, `--bulma-input-focus-shadow-alpha`\n- `--bulma-input-color-l`, `--bulma-input-background-l`, `--bulma-input-background-l-delta`\n- `--bulma-input-height`, `--bulma-input-shadow`, `--bulma-input-placeholder-color`\n- `--bulma-input-disabled-color`, `--bulma-input-disabled-background-color`\n- `--bulma-input-disabled-border-color`, `--bulma-input-disabled-placeholder-color`\n- `--bulma-input-arrow`, `--bulma-input-icon-color`, `--bulma-input-icon-hover-color`\n- `--bulma-input-icon-focus-color`, `--bulma-input-radius`\n\n**Menu Variables:**\n\n- `--bulma-menu-item-h`, `--bulma-menu-item-s`, `--bulma-menu-item-l`\n- `--bulma-menu-item-background-l`, `--bulma-menu-item-background-l-delta`\n- `--bulma-menu-item-hover-background-l-delta`, `--bulma-menu-item-active-background-l-delta`\n- `--bulma-menu-item-color-l`, `--bulma-menu-item-radius`\n- `--bulma-menu-item-selected-h`, `--bulma-menu-item-selected-s`, `--bulma-menu-item-selected-l`\n- `--bulma-menu-item-selected-background-l`, `--bulma-menu-item-selected-color-l`\n- `--bulma-menu-list-border-left`, `--bulma-menu-list-line-height`, `--bulma-menu-list-link-padding`\n- `--bulma-menu-nested-list-margin`, `--bulma-menu-nested-list-padding-left`\n- `--bulma-menu-label-color`, `--bulma-menu-label-font-size`, `--bulma-menu-label-letter-spacing`\n- `--bulma-menu-label-spacing`\n\n**Message Variables:**\n\n- `--bulma-message-h`, `--bulma-message-s`, `--bulma-message-background-l`\n- `--bulma-message-border-l`, `--bulma-message-border-l-delta`, `--bulma-message-border-style`\n- `--bulma-message-border-width`, `--bulma-message-color-l`, `--bulma-message-radius`\n- `--bulma-message-header-weight`, `--bulma-message-header-padding`, `--bulma-message-header-radius`\n- `--bulma-message-header-body-border-width`, `--bulma-message-header-background-l`\n- `--bulma-message-header-color-l`, `--bulma-message-body-border-width`\n- `--bulma-message-body-color`, `--bulma-message-body-padding`, `--bulma-message-body-radius`\n- `--bulma-message-body-pre-code-background-color`\n\n**Modal Variables:**\n\n- `--bulma-modal-z`, `--bulma-modal-background-background-color`, `--bulma-modal-content-width`\n- `--bulma-modal-content-margin-mobile`, `--bulma-modal-content-spacing-mobile`\n- `--bulma-modal-content-spacing-tablet`, `--bulma-modal-close-dimensions`\n- `--bulma-modal-close-right`, `--bulma-modal-close-top`, `--bulma-modal-card-spacing`\n- `--bulma-modal-card-head-background-color`, `--bulma-modal-card-head-padding`\n- `--bulma-modal-card-head-radius`, `--bulma-modal-card-title-color`\n- `--bulma-modal-card-title-line-height`, `--bulma-modal-card-title-size`\n- `--bulma-modal-card-foot-background-color`, `--bulma-modal-card-foot-radius`\n- `--bulma-modal-card-body-background-color`, `--bulma-modal-card-body-padding`\n\n**Navbar Variables:**\n\n- `--bulma-navbar-h`, `--bulma-navbar-s`, `--bulma-navbar-l`, `--bulma-navbar-background-color`\n- `--bulma-navbar-box-shadow-size`, `--bulma-navbar-box-shadow-color`\n- `--bulma-navbar-padding-vertical`, `--bulma-navbar-padding-horizontal`\n- `--bulma-navbar-z`, `--bulma-navbar-fixed-z`, `--bulma-navbar-item-background-a`\n- `--bulma-navbar-item-background-l`, `--bulma-navbar-item-background-l-delta`\n- `--bulma-navbar-item-hover-background-l-delta`, `--bulma-navbar-item-active-background-l-delta`\n- `--bulma-navbar-item-color-l`, `--bulma-navbar-item-selected-h`\n- `--bulma-navbar-item-selected-s`, `--bulma-navbar-item-selected-l`\n- `--bulma-navbar-item-selected-background-l`, `--bulma-navbar-item-selected-color-l`\n- `--bulma-navbar-item-img-max-height`, `--bulma-navbar-burger-color`\n- `--bulma-navbar-tab-hover-background-color`, `--bulma-navbar-tab-hover-border-bottom-color`\n- `--bulma-navbar-tab-active-color`, `--bulma-navbar-tab-active-background-color`\n- `--bulma-navbar-tab-active-border-bottom-color`, `--bulma-navbar-tab-active-border-bottom-style`\n- `--bulma-navbar-tab-active-border-bottom-width`, `--bulma-navbar-dropdown-background-color`\n- `--bulma-navbar-dropdown-border-l`, `--bulma-navbar-dropdown-border-color`\n- `--bulma-navbar-dropdown-border-style`, `--bulma-navbar-dropdown-border-width`\n- `--bulma-navbar-dropdown-offset`, `--bulma-navbar-dropdown-arrow`\n- `--bulma-navbar-dropdown-radius`, `--bulma-navbar-dropdown-z`\n- `--bulma-navbar-dropdown-boxed-radius`, `--bulma-navbar-dropdown-boxed-shadow`\n- `--bulma-navbar-dropdown-item-h`, `--bulma-navbar-dropdown-item-s`\n- `--bulma-navbar-dropdown-item-l`, `--bulma-navbar-dropdown-item-background-l`\n- `--bulma-navbar-dropdown-item-color-l`, `--bulma-navbar-divider-background-l`\n- `--bulma-navbar-divider-height`, `--bulma-navbar-bottom-box-shadow-size`\n\n**Notification Variables:**\n\n- `--bulma-notification-h`, `--bulma-notification-s`, `--bulma-notification-background-l`\n- `--bulma-notification-color-l`, `--bulma-notification-code-background-color`\n- `--bulma-notification-radius`, `--bulma-notification-padding`\n\n**Pagination Variables:**\n\n- `--bulma-pagination-margin`, `--bulma-pagination-min-width`\n- `--bulma-pagination-item-h`, `--bulma-pagination-item-s`, `--bulma-pagination-item-l`\n- `--bulma-pagination-item-background-l-delta`, `--bulma-pagination-item-hover-background-l-delta`\n- `--bulma-pagination-item-active-background-l-delta`, `--bulma-pagination-item-border-style`\n- `--bulma-pagination-item-border-width`, `--bulma-pagination-item-border-l`\n- `--bulma-pagination-item-border-l-delta`, `--bulma-pagination-item-hover-border-l-delta`\n- `--bulma-pagination-item-active-border-l-delta`, `--bulma-pagination-item-focus-border-l-delta`\n- `--bulma-pagination-item-color-l`, `--bulma-pagination-item-font-size`\n- `--bulma-pagination-item-margin`, `--bulma-pagination-item-padding-left`\n- `--bulma-pagination-item-padding-right`, `--bulma-pagination-item-outer-shadow-h`\n- `--bulma-pagination-item-outer-shadow-s`, `--bulma-pagination-item-outer-shadow-l`\n- `--bulma-pagination-item-outer-shadow-a`, `--bulma-pagination-nav-padding-left`\n- `--bulma-pagination-nav-padding-right`, `--bulma-pagination-disabled-color`\n- `--bulma-pagination-disabled-background-color`, `--bulma-pagination-disabled-border-color`\n- `--bulma-pagination-current-color`, `--bulma-pagination-current-background-color`\n- `--bulma-pagination-current-border-color`, `--bulma-pagination-ellipsis-color`\n- `--bulma-pagination-shadow-inset`, `--bulma-pagination-selected-item-h`\n- `--bulma-pagination-selected-item-s`, `--bulma-pagination-selected-item-l`\n- `--bulma-pagination-selected-item-background-l`, `--bulma-pagination-selected-item-border-l`\n- `--bulma-pagination-selected-item-color-l`\n\n**Panel Variables:**\n\n- `--bulma-panel-margin`, `--bulma-panel-item-border`, `--bulma-panel-radius`, `--bulma-panel-shadow`\n- `--bulma-panel-heading-line-height`, `--bulma-panel-heading-padding`, `--bulma-panel-heading-radius`\n- `--bulma-panel-heading-size`, `--bulma-panel-heading-weight`, `--bulma-panel-tabs-font-size`\n- `--bulma-panel-tab-border-bottom-color`, `--bulma-panel-tab-border-bottom-style`\n- `--bulma-panel-tab-border-bottom-width`, `--bulma-panel-tab-active-color`\n- `--bulma-panel-list-item-color`, `--bulma-panel-list-item-hover-color`\n- `--bulma-panel-block-color`, `--bulma-panel-block-hover-background-color`\n- `--bulma-panel-block-active-border-left-color`, `--bulma-panel-block-active-color`\n- `--bulma-panel-block-active-icon-color`, `--bulma-panel-icon-color`\n\n**Progress Variables:**\n\n- `--bulma-progress-border-radius`, `--bulma-progress-bar-background-color`\n- `--bulma-progress-value-background-color`, `--bulma-progress-indeterminate-duration`\n\n**Skeleton Variables:**\n\n- `--bulma-skeleton-background`, `--bulma-skeleton-radius`, `--bulma-skeleton-block-min-height`\n- `--bulma-skeleton-lines-gap`, `--bulma-skeleton-line-height`\n\n**Table Variables:**\n\n- `--bulma-table-color`, `--bulma-table-background-color`, `--bulma-table-cell-border-color`\n- `--bulma-table-cell-border-style`, `--bulma-table-cell-border-width`, `--bulma-table-cell-padding`\n- `--bulma-table-cell-heading-color`, `--bulma-table-cell-text-align`\n- `--bulma-table-head-cell-border-width`, `--bulma-table-head-cell-color`\n- `--bulma-table-foot-cell-border-width`, `--bulma-table-foot-cell-color`\n- `--bulma-table-head-background-color`, `--bulma-table-body-background-color`\n- `--bulma-table-foot-background-color`, `--bulma-table-row-hover-background-color`\n- `--bulma-table-row-active-background-color`, `--bulma-table-row-active-color`\n- `--bulma-table-striped-row-even-background-color`, `--bulma-table-striped-row-even-hover-background-color`\n\n**Tabs Variables:**\n\n- `--bulma-tabs-border-bottom-color`, `--bulma-tabs-border-bottom-style`, `--bulma-tabs-border-bottom-width`\n- `--bulma-tabs-link-color`, `--bulma-tabs-link-hover-border-bottom-color`, `--bulma-tabs-link-hover-color`\n- `--bulma-tabs-link-active-border-bottom-color`, `--bulma-tabs-link-active-color`, `--bulma-tabs-link-padding`\n- `--bulma-tabs-boxed-link-radius`, `--bulma-tabs-boxed-link-hover-background-color`\n- `--bulma-tabs-boxed-link-hover-border-bottom-color`, `--bulma-tabs-boxed-link-active-background-color`\n- `--bulma-tabs-boxed-link-active-border-color`, `--bulma-tabs-boxed-link-active-border-bottom-color`\n- `--bulma-tabs-toggle-link-border-color`, `--bulma-tabs-toggle-link-border-style`\n- `--bulma-tabs-toggle-link-border-width`, `--bulma-tabs-toggle-link-hover-background-color`\n- `--bulma-tabs-toggle-link-hover-border-color`, `--bulma-tabs-toggle-link-radius`\n- `--bulma-tabs-toggle-link-active-background-color`, `--bulma-tabs-toggle-link-active-border-color`\n- `--bulma-tabs-toggle-link-active-color`\n\n**Tag Variables:**\n\n- `--bulma-tag-h`, `--bulma-tag-s`, `--bulma-tag-background-l`, `--bulma-tag-background-l-delta`\n- `--bulma-tag-hover-background-l-delta`, `--bulma-tag-active-background-l-delta`\n- `--bulma-tag-color-l`, `--bulma-tag-radius`, `--bulma-tag-delete-margin`\n\n**Title & Subtitle Variables:**\n\n- `--bulma-title-color`, `--bulma-title-family`, `--bulma-title-size`, `--bulma-title-weight`\n- `--bulma-title-line-height`, `--bulma-title-strong-color`, `--bulma-title-strong-weight`\n- `--bulma-title-sub-size`, `--bulma-title-sup-size`\n- `--bulma-subtitle-color`, `--bulma-subtitle-family`, `--bulma-subtitle-size`, `--bulma-subtitle-weight`\n- `--bulma-subtitle-line-height`, `--bulma-subtitle-strong-color`, `--bulma-subtitle-strong-weight`\n\n**Content Variables:**\n\n- `--bulma-content-heading-color`, `--bulma-content-heading-weight`, `--bulma-content-heading-line-height`\n- `--bulma-content-block-margin-bottom`, `--bulma-content-blockquote-background-color`\n- `--bulma-content-blockquote-border-left`, `--bulma-content-blockquote-padding`, `--bulma-content-pre-padding`\n- `--bulma-content-table-cell-border`, `--bulma-content-table-cell-border-width`\n- `--bulma-content-table-cell-padding`, `--bulma-content-table-cell-heading-color`\n- `--bulma-content-table-head-cell-border-width`, `--bulma-content-table-head-cell-color`\n- `--bulma-content-table-body-last-row-cell-border-bottom-width`\n- `--bulma-content-table-foot-cell-border-width`, `--bulma-content-table-foot-cell-color`\n\n**Control Variables:**\n\n- `--bulma-control-radius`, `--bulma-control-radius-small`, `--bulma-control-border-width`\n- `--bulma-control-height`, `--bulma-control-line-height`, `--bulma-control-padding-vertical`\n- `--bulma-control-padding-horizontal`, `--bulma-control-size`, `--bulma-control-focus-shadow-l`\n\n**Delete Variables:**\n\n- `--bulma-delete-dimensions`, `--bulma-delete-background-l`, `--bulma-delete-background-alpha`\n- `--bulma-delete-color`\n\n**File Variables:**\n\n- `--bulma-file-radius`, `--bulma-file-name-border-color`, `--bulma-file-name-border-style`\n- `--bulma-file-name-border-width`, `--bulma-file-name-max-width`\n- `--bulma-file-h`, `--bulma-file-s`, `--bulma-file-background-l`, `--bulma-file-background-l-delta`\n- `--bulma-file-hover-background-l-delta`, `--bulma-file-active-background-l-delta`\n- `--bulma-file-border-l`, `--bulma-file-border-l-delta`, `--bulma-file-hover-border-l-delta`\n- `--bulma-file-active-border-l-delta`, `--bulma-file-cta-color-l`, `--bulma-file-name-color-l`\n- `--bulma-file-color-l-delta`, `--bulma-file-hover-color-l-delta`, `--bulma-file-active-color-l-delta`\n\n**Footer Variables:**\n\n- `--bulma-footer-background-color`, `--bulma-footer-color`, `--bulma-footer-padding`\n\n**Hero Variables:**\n\n- `--bulma-hero-body-padding`, `--bulma-hero-body-padding-tablet`, `--bulma-hero-body-padding-small`\n- `--bulma-hero-body-padding-medium`, `--bulma-hero-body-padding-large`\n\n**Icon Variables:**\n\n- `--bulma-icon-dimensions`, `--bulma-icon-dimensions-small`, `--bulma-icon-dimensions-medium`\n- `--bulma-icon-dimensions-large`, `--bulma-icon-text-spacing`\n\n**Media Variables:**\n\n- `--bulma-media-border-color`, `--bulma-media-border-size`, `--bulma-media-spacing`\n- `--bulma-media-spacing-large`, `--bulma-media-content-spacing`, `--bulma-media-level-1-spacing`\n- `--bulma-media-level-1-content-spacing`, `--bulma-media-level-2-spacing`\n\n**Section Variables:**\n\n- `--bulma-section-padding`, `--bulma-section-padding-desktop`, `--bulma-section-padding-medium`\n- `--bulma-section-padding-large`\n\n**Burger Variables:**\n\n- `--bulma-burger-h`, `--bulma-burger-s`, `--bulma-burger-l`, `--bulma-burger-border-radius`\n- `--bulma-burger-gap`, `--bulma-burger-item-height`, `--bulma-burger-item-width`\n\nThe Theme component also supports all [Bulma helper class props](./usebulmaclasses.md) for styling the wrapper element.",
+ "doc": "# Theme\n\n## Overview\n\nThe `Theme` component provides a powerful way to customize Bulma's appearance using CSS custom properties (CSS variables). It allows you to override Bulma's design tokens like colors, spacing, typography, and other visual properties either globally or locally within specific component trees. The Theme component supports both CSS variable injection via props and direct CSS variable objects.\n\n---\n\n## Import\n\n```tsx\nimport { Theme } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Usage\n\n### Basic Theme Customization\n\n```tsx\nfunction BasicThemeCustomization() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Global Theme (Root Level)\n\n```tsx\nfunction GlobalTheme() {\n return (\n \n
\n \n \n
\n \n );\n}\n```\n\n### Dark Mode\n\nThe `colorMode` prop sets Bulma's `data-theme` on ``, flipping the light/dark scheme globally.\nUse `'system'` to follow the OS preference.\n\n:::warning Single-mode designs should pin `colorMode`\n\nOmitting `colorMode` preserves whatever `data-theme` is already set — and when nothing has set\none (the usual case), the scheme follows the visitor's OS: Bulma's text colors flip on a\ndark-mode machine even if your design is light-only, breaking contrast against any fixed custom\nbackgrounds. If you support only one mode, pin it (``); if you\nsupport both, don't hardcode surface/text colors — see\n[Dark Mode & Contrast](../../guides/features/css-variables.md#dark-mode--contrast).\n\n:::\n\n```tsx\nimport { useState } from 'react';\n\nfunction App() {\n const [mode, setMode] = useState<'light' | 'dark' | 'system'>('system');\n return (\n \n \n \n \n \n );\n}\n```\n\n### Local Theme (Component Level)\n\n```tsx\nfunction LocalTheme() {\n return (\n
\n \n\n \n \n \n\n \n
\n );\n}\n```\n\n### Using CSS Variables Object\n\n```tsx\nfunction SunsetTheme() {\n const sunsetTheme = {\n '--bulma-scheme-h': '18',\n '--bulma-scheme-s': '90%',\n '--bulma-light-l': '85%',\n '--bulma-dark-l': '20%',\n '--bulma-primary-h': '25',\n '--bulma-primary-s': '85%',\n '--bulma-primary-l': '55%',\n };\n\n return (\n \n \n Sunset Theme\n \n \n \n \n );\n}\n```\n\n### Advanced CSS Variables Usage\n\nBulma derives the body font and the control radius from these variables at `:root`, so set\ntypography and radius on an `isRoot` theme.\n\n```tsx\nfunction TypographyTheme() {\n const typographyTheme = {\n '--bulma-family-primary': '\"Helvetica Neue\", sans-serif',\n '--bulma-family-code': '\"Fira Code\", monospace',\n '--bulma-size-normal': '16px',\n '--bulma-weight-bold': '700',\n };\n\n return (\n \n Custom Typography\n With custom fonts and weights\n \n );\n}\n```\n\n```tsx\nfunction RadiusTheme() {\n // `radius` is the border radius helper, as on every component, so the radius scale goes through bulmaVars\n const radii = {\n '--bulma-radius-small': '6px',\n '--bulma-radius': '12px',\n '--bulma-radius-medium': '16px',\n '--bulma-radius-large': '20px',\n };\n\n return (\n \n \n \n );\n}\n```\n\nSpacing that Bulma reads where it is used, such as the block and column gaps, works on a scoped\ntheme:\n\n```tsx\nfunction SpacingTheme() {\n const spacingTheme = {\n '--bulma-block-spacing': '2rem',\n '--bulma-column-gap': '1rem',\n };\n\n return (\n \n \n \n Wider column gap\n Wider block spacing\n \n \n Wider column gap\n \n \n \n );\n}\n```\n\n### Complete Color Scheme\n\n```tsx\nfunction ForestTheme() {\n const forestScheme = {\n schemeH: '150', // forest green hue\n schemeS: '50%',\n lightL: '80%',\n lightInvertL: '20%',\n darkL: '18%',\n darkInvertL: '85%',\n softL: '55%',\n boldL: '35%',\n primaryH: '160',\n primaryS: '60%',\n primaryL: '45%',\n linkH: '155',\n linkS: '65%',\n linkL: '40%',\n successH: '120',\n successS: '70%',\n successL: '45%',\n warningH: '45',\n warningS: '85%',\n warningL: '55%',\n dangerH: '355',\n dangerS: '75%',\n dangerL: '50%',\n hoverBackgroundLDelta: '4%',\n activeBackgroundLDelta: '8%',\n };\n\n return (\n \n \n Forest Theme\n \n \n \n \n \n \n \n );\n}\n```\n\n### Theme with Styling\n\n```tsx\nfunction StyledTheme() {\n return (\n \n Styled Theme Container\n \n \n );\n}\n```\n\n### Nested Themes\n\n```tsx\nfunction NestedThemes() {\n return (\n \n Outer Theme (Blue)\n \n\n \n Inner Theme (Green)\n \n \n\n \n \n );\n}\n```\n\n### Theme with ConfigProvider\n\n```tsx\nfunction PrefixedTheme() {\n return (\n \n \n \n \n \n );\n}\n```\n\n---\n\n## Best Practices\n\n### Global vs Local Themes\n\n- Use `isRoot={true}` for application-wide themes that should affect all components\n- Use local themes (default `isRoot={false}`) for component-specific styling or theme variations\n- Local themes inherit from parent themes and can override specific variables\n- Several `isRoot` themes can be mounted at once, such as a color theme at the app root and a\n typography theme next to it. Each adds its own variables at `:root`; where two set the same\n variable, the inner or later-mounted one wins, as with nested local themes, and unmounting one\n removes only its own variables\n\n### CSS Variable Naming\n\n- All Bulma CSS variables follow the `--bulma-*` naming convention\n- Named props exist for the scheme and color variables only (like `primaryH`); every other variable, typography and radius included, goes through `bulmaVars`\n- `bulmaVars` keys are the full variable names (`'--bulma-family-primary'`), not camelCase\n- `bulmaVars` also accepts the scheme surface variables — `--bulma-scheme-main`, `--bulma-scheme-main-bis`, `--bulma-scheme-main-ter`, `--bulma-scheme-invert`, `--bulma-scheme-invert-bis`, `--bulma-scheme-invert-ter` — so overriding `--bulma-scheme-main-bis`/`-ter` re-tints every scheme-background band (e.g., ``) at once\n- `bulmaVars` also accepts `--bulma-shadow` (plus `--bulma-shadow-h`/`-s`/`-l`) — the upstream token that `.box`, `.card`, `.dropdown`, and `.panel` derive their own shadow variables from. Those selectors re-declare their derived variable (e.g. `--bulma-box-shadow`) on themselves, so setting it from an ancestor `Theme` is only inherited and never wins; overriding `--bulma-shadow` itself is the one override that cascades. There is no individual `shadow` prop for this — `shadow` already names the unrelated `shadowless` helper class — so reach it through `bulmaVars`\n\n### Performance Considerations\n\n- Prefer setting themes at higher levels in your component tree rather than deeply nested\n- CSS variables are inherited, so child themes only need to override specific variables\n\n### Color System\n\n- Bulma uses HSL (Hue, Saturation, Lightness) for its color system\n- Hue values range from 0-360 (color wheel degrees)\n- Saturation and Lightness are typically percentages (e.g., '50%')\n- The scheme variables control the base color relationships\n\n---\n\n## API Reference\n\n### Named Props and `bulmaVars`\n\n`ThemeProps` has a named, camelCase prop for each scheme and color variable, listed under\n[CSS Variable Props](#css-variable-props). Each converts to its CSS variable by the same rule:\n\n```\npropName → --bulma-prop-name\n```\n\n- `primaryH` → `--bulma-primary-h`\n- `schemeS` → `--bulma-scheme-s`\n- `lightL` → `--bulma-light-l`\n- `hoverBackgroundLDelta` → `--bulma-hover-background-l-delta`\n\nEvery other variable (typography, radius, spacing, and the rest) has no named prop in\n`ThemeProps` and goes through `bulmaVars`, keyed by its full `--bulma-*` name. JavaScript code\nthat passes one as a camelCase prop (`familyPrimary`) may still render, but it is outside the\ntyped API, so move it to `bulmaVars`:\n\n```tsx\n\n \n\n```\n\nSome of those names are already helper props, so they cannot double as CSS-variable props:\n\n- `radius` is the border radius helper, as on every other component, so ``\n adds `is-radiusless` to the wrapper. On a Theme it also sets `--bulma-radius` to `0`, so what\n is inside the Theme loses its radius too; under `isRoot` it writes that at `:root`, squaring\n everything on the page that takes its radius from it. The sizes (`small`, `normal`, `large`,\n `rounded`) add their `has-radius-*` class to the wrapper and set no variable, so they round\n the wrapper and leave what is inside alone; under `isRoot` there is no wrapper, so they do\n nothing and warn in development. Set any other `--bulma-radius` through\n `bulmaVars`. `` is a type error; in JavaScript it still sets\n `--bulma-radius`, which is how the prop used to behave, but that route is deprecated and logs\n a warning in development.\n- `shadow` is the `shadowless` helper. Set `--bulma-shadow` through `bulmaVars`.\n- `columnGap` is the column gap helper, as on every other component, so ``\n adds `is-column-gap-2` to the wrapper and sets no variable; under `isRoot` there is no wrapper,\n so it does nothing and warns in development. Set the columns gutter, `--bulma-column-gap`,\n through `bulmaVars`. Before the gap helpers, JavaScript could pass `columnGap` to set that\n variable. A string that is not a gap step (`columnGap=\"1rem\"`) still does, through a\n deprecated route that logs a warning in development, but a gap step does not:\n `columnGap=\"0\"`, which used to zero the gutters inside the Theme, now adds `is-column-gap-0`\n to the wrapper.\n\n### Props vs bulmaVars\n\nYou can set the scheme and color variables in two ways:\n\n1. **Named Props** (recommended where one exists):\n\n ```tsx\n \n \n \n ```\n\n2. **bulmaVars Object** (for every other variable, or when you have many to set):\n\n ```tsx\n \n \n \n ```\n\n3. **Combined** (props take precedence over bulmaVars):\n ```tsx\n \n \n \n ```\n\n### TypeScript Support\n\n`bulmaVars` is typed as a partial record keyed by the union of every variable `Theme` can set.\nWrite it as an object literal and your editor autocompletes the keys and flags a misspelled or\nunsupported one as a type error. A separately declared object only has to share one valid key\nto typecheck, so a typo in it is silently dropped; annotate it with\n`satisfies ThemeProps['bulmaVars']` to keep the check:\n\n```tsx\n\n \n\n```\n\n---\n\n## See Also\n\n- [ConfigProvider](./config.md) - For class prefixing and configuration\n- [useBulmaClasses](./usebulmaclasses.md) - For applying Bulma helper classes\n- [Bulma CSS Variables Documentation](https://bulma.io/documentation/features/css-variables/) - Official Bulma CSS variables reference\n\n---\n\n## Props\n\n| Prop | Type | Description |\n| ----------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `children` | `ReactNode` | The child components to apply the theme to. |\n| `className` | `string` | Additional CSS classes for the theme wrapper. |\n| `isRoot` | `boolean` | When `true`, applies CSS variables globally at `:root` level. When `false` (default), applies variables only to the wrapper div. Several root themes compose; an inner or later-mounted one wins a variable they share. |\n| `colorMode` | `'light' \\| 'dark' \\| 'system'` | Sets Bulma's light/dark scheme by writing the `data-theme` attribute on ``. Always global (even on a scoped `Theme`). `'system'` removes the attribute so Bulma follows the OS `prefers-color-scheme`. Omit to leave the current setting untouched. |\n| `bulmaVars` | `ThemeProps['bulmaVars']` | Object mapping Bulma CSS variable names to string values (e.g., `{'--bulma-primary-h': '210'}`). Keys are limited to the variables listed below; anything else is not applied. |\n| `columnGap` | [`BulmaGapStep`](./valid-values.md) | The column gap helper: a gap step adds `is-column-gap-` to the wrapper div and sets no variable, so under `isRoot` it does nothing and warns in development. Set `--bulma-column-gap` through `bulmaVars`. Any other string still sets `--bulma-column-gap`, a deprecated route that warns in development. |\n| `radius` | `'radiusless' \\| 'small' \\| 'normal' \\| 'large' \\| 'rounded'` | The border radius helper. `radiusless` adds `is-radiusless` to the wrapper div and sets `--bulma-radius` to `0`, at `:root` under `isRoot`. The sizes add their `has-radius-*` class to the wrapper and set no variable, so under `isRoot` they do nothing and warn in development. Any other string still sets `--bulma-radius`, a deprecated route that warns in development. |\n\n### CSS Variable Props\n\nThe Theme component accepts individual CSS variable props that correspond to Bulma's design tokens. These props are automatically converted to their corresponding CSS custom properties (e.g., `primaryH` → `--bulma-primary-h`).\n\n#### Scheme Variables\n\n| Prop | Type | Description | CSS Variable |\n| ------------------------ | -------- | ------------------------------------------------- | ----------------------------------- |\n| `schemeH` | `string` | Base hue for the color scheme (0-360) | `--bulma-scheme-h` |\n| `schemeS` | `string` | Base saturation for the color scheme (percentage) | `--bulma-scheme-s` |\n| `lightL` | `string` | Lightness value for light backgrounds | `--bulma-light-l` |\n| `lightInvertL` | `string` | Inverted lightness for light backgrounds | `--bulma-light-invert-l` |\n| `darkL` | `string` | Lightness value for dark backgrounds | `--bulma-dark-l` |\n| `darkInvertL` | `string` | Inverted lightness for dark backgrounds | `--bulma-dark-invert-l` |\n| `softL` | `string` | Lightness value for soft colors | `--bulma-soft-l` |\n| `boldL` | `string` | Lightness value for bold colors | `--bulma-bold-l` |\n| `softInvertL` | `string` | Inverted lightness for soft colors | `--bulma-soft-invert-l` |\n| `boldInvertL` | `string` | Inverted lightness for bold colors | `--bulma-bold-invert-l` |\n| `hoverBackgroundLDelta` | `string` | Lightness delta for hover background states | `--bulma-hover-background-l-delta` |\n| `activeBackgroundLDelta` | `string` | Lightness delta for active background states | `--bulma-active-background-l-delta` |\n| `hoverBorderLDelta` | `string` | Lightness delta for hover border states | `--bulma-hover-border-l-delta` |\n| `activeBorderLDelta` | `string` | Lightness delta for active border states | `--bulma-active-border-l-delta` |\n| `hoverColorLDelta` | `string` | Lightness delta for hover text color states | `--bulma-hover-color-l-delta` |\n| `activeColorLDelta` | `string` | Lightness delta for active text color states | `--bulma-active-color-l-delta` |\n| `hoverShadowADelta` | `string` | Alpha delta for hover shadow states | `--bulma-hover-shadow-a-delta` |\n| `activeShadowADelta` | `string` | Alpha delta for active shadow states | `--bulma-active-shadow-a-delta` |\n\n#### Color Variables\n\n| Prop | Type | Description | CSS Variable |\n| ---------- | -------- | ------------------------------------- | ------------------- |\n| `primaryH` | `string` | Primary color hue (0-360) | `--bulma-primary-h` |\n| `primaryS` | `string` | Primary color saturation (percentage) | `--bulma-primary-s` |\n| `primaryL` | `string` | Primary color lightness (percentage) | `--bulma-primary-l` |\n| `linkH` | `string` | Link color hue (0-360) | `--bulma-link-h` |\n| `linkS` | `string` | Link color saturation (percentage) | `--bulma-link-s` |\n| `linkL` | `string` | Link color lightness (percentage) | `--bulma-link-l` |\n| `infoH` | `string` | Info color hue (0-360) | `--bulma-info-h` |\n| `infoS` | `string` | Info color saturation (percentage) | `--bulma-info-s` |\n| `infoL` | `string` | Info color lightness (percentage) | `--bulma-info-l` |\n| `successH` | `string` | Success color hue (0-360) | `--bulma-success-h` |\n| `successS` | `string` | Success color saturation (percentage) | `--bulma-success-s` |\n| `successL` | `string` | Success color lightness (percentage) | `--bulma-success-l` |\n| `warningH` | `string` | Warning color hue (0-360) | `--bulma-warning-h` |\n| `warningS` | `string` | Warning color saturation (percentage) | `--bulma-warning-s` |\n| `warningL` | `string` | Warning color lightness (percentage) | `--bulma-warning-l` |\n| `dangerH` | `string` | Danger color hue (0-360) | `--bulma-danger-h` |\n| `dangerS` | `string` | Danger color saturation (percentage) | `--bulma-danger-s` |\n| `dangerL` | `string` | Danger color lightness (percentage) | `--bulma-danger-l` |\n\n#### Shadow Variables\n\nReachable only through `bulmaVars` — there is no individual prop, since `shadow` already names\nthe `BulmaOtherProps` `shadowless` helper class. As noted above, `--bulma-shadow` is the one\noverride that cascades into `.box`/`.card`/`.dropdown`/`.panel` shadows.\n\n| CSS Variable | Description |\n| ------------------ | ----------------------------------------------------------------------------------------------------- |\n| `--bulma-shadow-h` | Shadow color hue (0-360) |\n| `--bulma-shadow-s` | Shadow color saturation (percentage) |\n| `--bulma-shadow-l` | Shadow color lightness (percentage) |\n| `--bulma-shadow` | The full shadow value that `.box`/`.card`/`.dropdown`/`.panel` derive their own shadow variables from |\n\n#### Complete CSS Variables List\n\nThese are the keys `bulmaVars` accepts, in addition to the scheme, color, and shadow variables\nabove.\n\nBulma declares many per-component variables (`--bulma-card-*`, `--bulma-title-*`,\n`--bulma-box-*`, …) on the component's own selector. That declaration beats a value the\ncomponent would inherit from a `Theme` wrapper, the same way the shadow note in\n[CSS Variable Naming](#css-variable-naming) describes, so check where Bulma declares a variable\nbefore relying on a `Theme` override of it.\n\n**Scheme Surface Variables:**\n\n- `--bulma-scheme-main`, `--bulma-scheme-main-bis`, `--bulma-scheme-main-ter`\n- `--bulma-scheme-invert`, `--bulma-scheme-invert-bis`, `--bulma-scheme-invert-ter`\n\n**Typography Variables:**\n\n- `--bulma-family-primary`, `--bulma-family-secondary`, `--bulma-family-code`\n- `--bulma-size-small`, `--bulma-size-normal`, `--bulma-size-medium`, `--bulma-size-large`\n- `--bulma-weight-light`, `--bulma-weight-normal`, `--bulma-weight-medium`, `--bulma-weight-semibold`, `--bulma-weight-bold`, `--bulma-weight-extrabold`\n- `--bulma-body-background-color`, `--bulma-body-size`, `--bulma-body-min-width`, `--bulma-body-rendering`\n- `--bulma-body-family`, `--bulma-body-overflow-x`, `--bulma-body-overflow-y`, `--bulma-body-color`\n- `--bulma-body-font-size`, `--bulma-body-weight`, `--bulma-body-line-height`\n- `--bulma-code-family`, `--bulma-code-padding`, `--bulma-code-weight`, `--bulma-code-size`\n- `--bulma-small-font-size`, `--bulma-hr-background-color`, `--bulma-hr-height`, `--bulma-hr-margin`\n- `--bulma-strong-color`, `--bulma-strong-weight`, `--bulma-pre-font-size`, `--bulma-pre-padding`, `--bulma-pre-code-font-size`\n\n**Layout & Spacing Variables:**\n\n- `--bulma-block-spacing`, `--bulma-duration`, `--bulma-easing`, `--bulma-speed`\n- `--bulma-radius-small`, `--bulma-radius`, `--bulma-radius-medium`, `--bulma-radius-large`, `--bulma-radius-rounded`\n- `--bulma-arrow-color`, `--bulma-loading-color`\n- `--bulma-column-gap`, `--bulma-grid-gap`, `--bulma-grid-column-count`, `--bulma-grid-column-min`\n- `--bulma-grid-cell-column-span`, `--bulma-grid-cell-column-start`\n\n**Box Variables:**\n\n- `--bulma-box-background-color`, `--bulma-box-color`, `--bulma-box-radius`, `--bulma-box-shadow`\n- `--bulma-box-padding`, `--bulma-box-link-hover-shadow`, `--bulma-box-link-active-shadow`\n\n**Breadcrumb Variables:**\n\n- `--bulma-breadcrumb-item-color`, `--bulma-breadcrumb-item-hover-color`, `--bulma-breadcrumb-item-active-color`\n- `--bulma-breadcrumb-item-padding-vertical`, `--bulma-breadcrumb-item-padding-horizontal`\n- `--bulma-breadcrumb-item-separator-color`\n\n**Card Variables:**\n\n- `--bulma-card-color`, `--bulma-card-background-color`, `--bulma-card-shadow`, `--bulma-card-radius`\n- `--bulma-card-header-background-color`, `--bulma-card-header-color`, `--bulma-card-header-padding`\n- `--bulma-card-header-shadow`, `--bulma-card-header-weight`\n- `--bulma-card-content-background-color`, `--bulma-card-content-padding`\n- `--bulma-card-footer-background-color`, `--bulma-card-footer-border-top`, `--bulma-card-footer-padding`\n- `--bulma-card-media-margin`\n\n**Dropdown Variables:**\n\n- `--bulma-dropdown-menu-min-width`, `--bulma-dropdown-content-background-color`\n- `--bulma-dropdown-content-offset`, `--bulma-dropdown-content-padding-bottom`\n- `--bulma-dropdown-content-padding-top`, `--bulma-dropdown-content-radius`\n- `--bulma-dropdown-content-shadow`, `--bulma-dropdown-content-z`\n- `--bulma-dropdown-item-h`, `--bulma-dropdown-item-s`, `--bulma-dropdown-item-l`\n- `--bulma-dropdown-item-background-l`, `--bulma-dropdown-item-background-l-delta`\n- `--bulma-dropdown-item-hover-background-l-delta`, `--bulma-dropdown-item-active-background-l-delta`\n- `--bulma-dropdown-item-color-l`, `--bulma-dropdown-item-selected-h`\n- `--bulma-dropdown-item-selected-s`, `--bulma-dropdown-item-selected-l`\n- `--bulma-dropdown-item-selected-background-l`, `--bulma-dropdown-item-selected-color-l`\n- `--bulma-dropdown-divider-background-color`\n\n**Input Variables:**\n\n- `--bulma-input-h`, `--bulma-input-s`, `--bulma-input-l`, `--bulma-input-border-style`\n- `--bulma-input-border-l`, `--bulma-input-border-l-delta`, `--bulma-input-hover-border-l-delta`\n- `--bulma-input-active-border-l-delta`, `--bulma-input-focus-h`, `--bulma-input-focus-s`\n- `--bulma-input-focus-l`, `--bulma-input-focus-shadow-size`, `--bulma-input-focus-shadow-alpha`\n- `--bulma-input-color-l`, `--bulma-input-background-l`, `--bulma-input-background-l-delta`\n- `--bulma-input-height`, `--bulma-input-shadow`, `--bulma-input-placeholder-color`\n- `--bulma-input-disabled-color`, `--bulma-input-disabled-background-color`\n- `--bulma-input-disabled-border-color`, `--bulma-input-disabled-placeholder-color`\n- `--bulma-input-arrow`, `--bulma-input-icon-color`, `--bulma-input-icon-hover-color`\n- `--bulma-input-icon-focus-color`, `--bulma-input-radius`\n\n**Menu Variables:**\n\n- `--bulma-menu-item-h`, `--bulma-menu-item-s`, `--bulma-menu-item-l`\n- `--bulma-menu-item-background-l`, `--bulma-menu-item-background-l-delta`\n- `--bulma-menu-item-hover-background-l-delta`, `--bulma-menu-item-active-background-l-delta`\n- `--bulma-menu-item-color-l`, `--bulma-menu-item-radius`\n- `--bulma-menu-item-selected-h`, `--bulma-menu-item-selected-s`, `--bulma-menu-item-selected-l`\n- `--bulma-menu-item-selected-background-l`, `--bulma-menu-item-selected-color-l`\n- `--bulma-menu-list-border-left`, `--bulma-menu-list-line-height`, `--bulma-menu-list-link-padding`\n- `--bulma-menu-nested-list-margin`, `--bulma-menu-nested-list-padding-left`\n- `--bulma-menu-label-color`, `--bulma-menu-label-font-size`, `--bulma-menu-label-letter-spacing`\n- `--bulma-menu-label-spacing`\n\n**Message Variables:**\n\n- `--bulma-message-h`, `--bulma-message-s`, `--bulma-message-background-l`\n- `--bulma-message-border-l`, `--bulma-message-border-l-delta`, `--bulma-message-border-style`\n- `--bulma-message-border-width`, `--bulma-message-color-l`, `--bulma-message-radius`\n- `--bulma-message-header-weight`, `--bulma-message-header-padding`, `--bulma-message-header-radius`\n- `--bulma-message-header-body-border-width`, `--bulma-message-header-background-l`\n- `--bulma-message-header-color-l`, `--bulma-message-body-border-width`\n- `--bulma-message-body-color`, `--bulma-message-body-padding`, `--bulma-message-body-radius`\n- `--bulma-message-body-pre-code-background-color`\n\n**Modal Variables:**\n\n- `--bulma-modal-z`, `--bulma-modal-background-background-color`, `--bulma-modal-content-width`\n- `--bulma-modal-content-margin-mobile`, `--bulma-modal-content-spacing-mobile`\n- `--bulma-modal-content-spacing-tablet`, `--bulma-modal-close-dimensions`\n- `--bulma-modal-close-right`, `--bulma-modal-close-top`, `--bulma-modal-card-spacing`\n- `--bulma-modal-card-head-background-color`, `--bulma-modal-card-head-padding`\n- `--bulma-modal-card-head-radius`, `--bulma-modal-card-title-color`\n- `--bulma-modal-card-title-line-height`, `--bulma-modal-card-title-size`\n- `--bulma-modal-card-foot-background-color`, `--bulma-modal-card-foot-radius`\n- `--bulma-modal-card-body-background-color`, `--bulma-modal-card-body-padding`\n\n**Navbar Variables:**\n\n- `--bulma-navbar-h`, `--bulma-navbar-s`, `--bulma-navbar-l`, `--bulma-navbar-background-color`\n- `--bulma-navbar-box-shadow-size`, `--bulma-navbar-box-shadow-color`\n- `--bulma-navbar-padding-vertical`, `--bulma-navbar-padding-horizontal`\n- `--bulma-navbar-z`, `--bulma-navbar-fixed-z`, `--bulma-navbar-item-background-a`\n- `--bulma-navbar-item-background-l`, `--bulma-navbar-item-background-l-delta`\n- `--bulma-navbar-item-hover-background-l-delta`, `--bulma-navbar-item-active-background-l-delta`\n- `--bulma-navbar-item-color-l`, `--bulma-navbar-item-selected-h`\n- `--bulma-navbar-item-selected-s`, `--bulma-navbar-item-selected-l`\n- `--bulma-navbar-item-selected-background-l`, `--bulma-navbar-item-selected-color-l`\n- `--bulma-navbar-item-img-max-height`, `--bulma-navbar-burger-color`\n- `--bulma-navbar-tab-hover-background-color`, `--bulma-navbar-tab-hover-border-bottom-color`\n- `--bulma-navbar-tab-active-color`, `--bulma-navbar-tab-active-background-color`\n- `--bulma-navbar-tab-active-border-bottom-color`, `--bulma-navbar-tab-active-border-bottom-style`\n- `--bulma-navbar-tab-active-border-bottom-width`, `--bulma-navbar-dropdown-background-color`\n- `--bulma-navbar-dropdown-border-l`, `--bulma-navbar-dropdown-border-color`\n- `--bulma-navbar-dropdown-border-style`, `--bulma-navbar-dropdown-border-width`\n- `--bulma-navbar-dropdown-offset`, `--bulma-navbar-dropdown-arrow`\n- `--bulma-navbar-dropdown-radius`, `--bulma-navbar-dropdown-z`\n- `--bulma-navbar-dropdown-boxed-radius`, `--bulma-navbar-dropdown-boxed-shadow`\n- `--bulma-navbar-dropdown-item-h`, `--bulma-navbar-dropdown-item-s`\n- `--bulma-navbar-dropdown-item-l`, `--bulma-navbar-dropdown-item-background-l`\n- `--bulma-navbar-dropdown-item-color-l`, `--bulma-navbar-divider-background-l`\n- `--bulma-navbar-divider-height`, `--bulma-navbar-bottom-box-shadow-size`\n\n**Notification Variables:**\n\n- `--bulma-notification-h`, `--bulma-notification-s`, `--bulma-notification-background-l`\n- `--bulma-notification-color-l`, `--bulma-notification-code-background-color`\n- `--bulma-notification-radius`, `--bulma-notification-padding`\n\n**Pagination Variables:**\n\n- `--bulma-pagination-margin`, `--bulma-pagination-min-width`\n- `--bulma-pagination-item-h`, `--bulma-pagination-item-s`, `--bulma-pagination-item-l`\n- `--bulma-pagination-item-background-l-delta`, `--bulma-pagination-item-hover-background-l-delta`\n- `--bulma-pagination-item-active-background-l-delta`, `--bulma-pagination-item-border-style`\n- `--bulma-pagination-item-border-width`, `--bulma-pagination-item-border-l`\n- `--bulma-pagination-item-border-l-delta`, `--bulma-pagination-item-hover-border-l-delta`\n- `--bulma-pagination-item-active-border-l-delta`, `--bulma-pagination-item-focus-border-l-delta`\n- `--bulma-pagination-item-color-l`, `--bulma-pagination-item-font-size`\n- `--bulma-pagination-item-margin`, `--bulma-pagination-item-padding-left`\n- `--bulma-pagination-item-padding-right`, `--bulma-pagination-item-outer-shadow-h`\n- `--bulma-pagination-item-outer-shadow-s`, `--bulma-pagination-item-outer-shadow-l`\n- `--bulma-pagination-item-outer-shadow-a`, `--bulma-pagination-nav-padding-left`\n- `--bulma-pagination-nav-padding-right`, `--bulma-pagination-disabled-color`\n- `--bulma-pagination-disabled-background-color`, `--bulma-pagination-disabled-border-color`\n- `--bulma-pagination-current-color`, `--bulma-pagination-current-background-color`\n- `--bulma-pagination-current-border-color`, `--bulma-pagination-ellipsis-color`\n- `--bulma-pagination-shadow-inset`, `--bulma-pagination-selected-item-h`\n- `--bulma-pagination-selected-item-s`, `--bulma-pagination-selected-item-l`\n- `--bulma-pagination-selected-item-background-l`, `--bulma-pagination-selected-item-border-l`\n- `--bulma-pagination-selected-item-color-l`\n\n**Panel Variables:**\n\n- `--bulma-panel-margin`, `--bulma-panel-item-border`, `--bulma-panel-radius`, `--bulma-panel-shadow`\n- `--bulma-panel-heading-line-height`, `--bulma-panel-heading-padding`, `--bulma-panel-heading-radius`\n- `--bulma-panel-heading-size`, `--bulma-panel-heading-weight`, `--bulma-panel-tabs-font-size`\n- `--bulma-panel-tab-border-bottom-color`, `--bulma-panel-tab-border-bottom-style`\n- `--bulma-panel-tab-border-bottom-width`, `--bulma-panel-tab-active-color`\n- `--bulma-panel-list-item-color`, `--bulma-panel-list-item-hover-color`\n- `--bulma-panel-block-color`, `--bulma-panel-block-hover-background-color`\n- `--bulma-panel-block-active-border-left-color`, `--bulma-panel-block-active-color`\n- `--bulma-panel-block-active-icon-color`, `--bulma-panel-icon-color`\n\n**Progress Variables:**\n\n- `--bulma-progress-border-radius`, `--bulma-progress-bar-background-color`\n- `--bulma-progress-value-background-color`, `--bulma-progress-indeterminate-duration`\n\n**Skeleton Variables:**\n\n- `--bulma-skeleton-background`, `--bulma-skeleton-radius`, `--bulma-skeleton-block-min-height`\n- `--bulma-skeleton-lines-gap`, `--bulma-skeleton-line-height`\n\n**Table Variables:**\n\n- `--bulma-table-color`, `--bulma-table-background-color`, `--bulma-table-cell-border-color`\n- `--bulma-table-cell-border-style`, `--bulma-table-cell-border-width`, `--bulma-table-cell-padding`\n- `--bulma-table-cell-heading-color`, `--bulma-table-cell-text-align`\n- `--bulma-table-head-cell-border-width`, `--bulma-table-head-cell-color`\n- `--bulma-table-foot-cell-border-width`, `--bulma-table-foot-cell-color`\n- `--bulma-table-head-background-color`, `--bulma-table-body-background-color`\n- `--bulma-table-foot-background-color`, `--bulma-table-row-hover-background-color`\n- `--bulma-table-row-active-background-color`, `--bulma-table-row-active-color`\n- `--bulma-table-striped-row-even-background-color`, `--bulma-table-striped-row-even-hover-background-color`\n\n**Tabs Variables:**\n\n- `--bulma-tabs-border-bottom-color`, `--bulma-tabs-border-bottom-style`, `--bulma-tabs-border-bottom-width`\n- `--bulma-tabs-link-color`, `--bulma-tabs-link-hover-border-bottom-color`, `--bulma-tabs-link-hover-color`\n- `--bulma-tabs-link-active-border-bottom-color`, `--bulma-tabs-link-active-color`, `--bulma-tabs-link-padding`\n- `--bulma-tabs-boxed-link-radius`, `--bulma-tabs-boxed-link-hover-background-color`\n- `--bulma-tabs-boxed-link-hover-border-bottom-color`, `--bulma-tabs-boxed-link-active-background-color`\n- `--bulma-tabs-boxed-link-active-border-color`, `--bulma-tabs-boxed-link-active-border-bottom-color`\n- `--bulma-tabs-toggle-link-border-color`, `--bulma-tabs-toggle-link-border-style`\n- `--bulma-tabs-toggle-link-border-width`, `--bulma-tabs-toggle-link-hover-background-color`\n- `--bulma-tabs-toggle-link-hover-border-color`, `--bulma-tabs-toggle-link-radius`\n- `--bulma-tabs-toggle-link-active-background-color`, `--bulma-tabs-toggle-link-active-border-color`\n- `--bulma-tabs-toggle-link-active-color`\n\n**Tag Variables:**\n\n- `--bulma-tag-h`, `--bulma-tag-s`, `--bulma-tag-background-l`, `--bulma-tag-background-l-delta`\n- `--bulma-tag-hover-background-l-delta`, `--bulma-tag-active-background-l-delta`\n- `--bulma-tag-color-l`, `--bulma-tag-radius`, `--bulma-tag-delete-margin`\n\n**Title & Subtitle Variables:**\n\n- `--bulma-title-color`, `--bulma-title-family`, `--bulma-title-size`, `--bulma-title-weight`\n- `--bulma-title-line-height`, `--bulma-title-strong-color`, `--bulma-title-strong-weight`\n- `--bulma-title-sub-size`, `--bulma-title-sup-size`\n- `--bulma-subtitle-color`, `--bulma-subtitle-family`, `--bulma-subtitle-size`, `--bulma-subtitle-weight`\n- `--bulma-subtitle-line-height`, `--bulma-subtitle-strong-color`, `--bulma-subtitle-strong-weight`\n\n**Content Variables:**\n\n- `--bulma-content-heading-color`, `--bulma-content-heading-weight`, `--bulma-content-heading-line-height`\n- `--bulma-content-block-margin-bottom`, `--bulma-content-blockquote-background-color`\n- `--bulma-content-blockquote-border-left`, `--bulma-content-blockquote-padding`, `--bulma-content-pre-padding`\n- `--bulma-content-table-cell-border`, `--bulma-content-table-cell-border-width`\n- `--bulma-content-table-cell-padding`, `--bulma-content-table-cell-heading-color`\n- `--bulma-content-table-head-cell-border-width`, `--bulma-content-table-head-cell-color`\n- `--bulma-content-table-body-last-row-cell-border-bottom-width`\n- `--bulma-content-table-foot-cell-border-width`, `--bulma-content-table-foot-cell-color`\n\n**Control Variables:**\n\n- `--bulma-control-radius`, `--bulma-control-radius-small`, `--bulma-control-border-width`\n- `--bulma-control-height`, `--bulma-control-line-height`, `--bulma-control-padding-vertical`\n- `--bulma-control-padding-horizontal`, `--bulma-control-size`, `--bulma-control-focus-shadow-l`\n\n**Delete Variables:**\n\n- `--bulma-delete-dimensions`, `--bulma-delete-background-l`, `--bulma-delete-background-alpha`\n- `--bulma-delete-color`\n\n**File Variables:**\n\n- `--bulma-file-radius`, `--bulma-file-name-border-color`, `--bulma-file-name-border-style`\n- `--bulma-file-name-border-width`, `--bulma-file-name-max-width`\n- `--bulma-file-h`, `--bulma-file-s`, `--bulma-file-background-l`, `--bulma-file-background-l-delta`\n- `--bulma-file-hover-background-l-delta`, `--bulma-file-active-background-l-delta`\n- `--bulma-file-border-l`, `--bulma-file-border-l-delta`, `--bulma-file-hover-border-l-delta`\n- `--bulma-file-active-border-l-delta`, `--bulma-file-cta-color-l`, `--bulma-file-name-color-l`\n- `--bulma-file-color-l-delta`, `--bulma-file-hover-color-l-delta`, `--bulma-file-active-color-l-delta`\n\n**Footer Variables:**\n\n- `--bulma-footer-background-color`, `--bulma-footer-color`, `--bulma-footer-padding`\n\n**Hero Variables:**\n\n- `--bulma-hero-body-padding`, `--bulma-hero-body-padding-tablet`, `--bulma-hero-body-padding-small`\n- `--bulma-hero-body-padding-medium`, `--bulma-hero-body-padding-large`\n\n**Icon Variables:**\n\n- `--bulma-icon-dimensions`, `--bulma-icon-dimensions-small`, `--bulma-icon-dimensions-medium`\n- `--bulma-icon-dimensions-large`, `--bulma-icon-text-spacing`\n\n**Media Variables:**\n\n- `--bulma-media-border-color`, `--bulma-media-border-size`, `--bulma-media-spacing`\n- `--bulma-media-spacing-large`, `--bulma-media-content-spacing`, `--bulma-media-level-1-spacing`\n- `--bulma-media-level-1-content-spacing`, `--bulma-media-level-2-spacing`\n\n**Section Variables:**\n\n- `--bulma-section-padding`, `--bulma-section-padding-desktop`, `--bulma-section-padding-medium`\n- `--bulma-section-padding-large`\n\n**Burger Variables:**\n\n- `--bulma-burger-h`, `--bulma-burger-s`, `--bulma-burger-l`, `--bulma-burger-border-radius`\n- `--bulma-burger-gap`, `--bulma-burger-item-height`, `--bulma-burger-item-width`\n\nThe Theme component also supports all [Bulma helper class props](./usebulmaclasses.md) for styling the wrapper element.",
"parts": [],
"cssVars": []
}
diff --git a/bulma-ui/src/helpers/Theme.tsx b/bulma-ui/src/helpers/Theme.tsx
index 23133db91..73aef5d86 100644
--- a/bulma-ui/src/helpers/Theme.tsx
+++ b/bulma-ui/src/helpers/Theme.tsx
@@ -7,7 +7,7 @@ import React, {
} from 'react';
import classNames from './classNames';
import { useBulmaClasses, BulmaClassesProps } from './useBulmaClasses';
-import { validRadii } from './bulmaClassHelpers';
+import { validGaps, validRadii, type BulmaGapStep } from './bulmaClassHelpers';
import { warnOnce } from './devWarnings';
// --- FULL Bulma v1 CSS variable keys (auto-generated from CSSVAR_KEYS) ---
@@ -592,17 +592,20 @@ function cssVarToProp(varName: string): string {
}
/**
- * Prop names `cssVarToProp` would mint that are already `BulmaOtherProps`
- * helper props: `--bulma-shadow` becomes `shadow` and `--bulma-radius` becomes
- * `radius`. They stay out of `bulmaVarPropMap`, so on Theme each is the helper
- * prop it is on every other component, and both variables are still reachable
- * through `bulmaVars`.
+ * Prop names `cssVarToProp` would mint that are already helper props:
+ * `--bulma-shadow` becomes `shadow`, `--bulma-radius` becomes `radius` and
+ * `--bulma-column-gap` becomes `columnGap`. They stay out of
+ * `bulmaVarPropMap`, so on Theme each is the helper prop it is on every other
+ * component, and every one of those variables is still reachable through
+ * `bulmaVars`.
*
* `radius` was missed here once and set `--bulma-radius` while typed as the
* helper (#694). It still writes that variable, so what it did then keeps
- * working; see `themeRadiusVar`.
+ * working; see `themeRadiusVar`. `columnGap` joined when the gap helpers
+ * became shared helper props, and keeps its old variable route the same way;
+ * see `themeColumnGapVar`.
*/
-const helperPropNames: readonly string[] = ['shadow', 'radius'];
+const helperPropNames: readonly string[] = ['shadow', 'radius', 'columnGap'];
/**
* Mapping of camelCase prop names to their Bulma CSS variable counterparts,
@@ -676,6 +679,40 @@ const themeRadiusVar = (radius: unknown): string | undefined => {
return radius;
};
+/**
+ * What `columnGap` writes to `--bulma-column-gap` on a Theme, or `undefined`
+ * when it writes nothing.
+ *
+ * Until the gap helpers were shared helper props, `columnGap` on Theme was
+ * the camelCase prop Theme mints for `--bulma-column-gap`. It was never in
+ * `ThemeProps`, so only untyped code reached it, but that code got the
+ * columns gutter it asked for. It is the column gap helper now, as on every
+ * other component, so a gap step goes to the helper and writes nothing here.
+ * Any other non-empty string is still written as given, so a length such as
+ * `'1rem'` keeps working, with a development warning pointing at `bulmaVars`.
+ *
+ * Only a string writes anything, for the reason `themeRadiusVar` gives: a
+ * number or a boolean was never a usable length.
+ */
+const themeColumnGapVar = (columnGap: unknown): string | undefined => {
+ if (typeof columnGap !== 'string' || columnGap === '') {
+ return undefined;
+ }
+ if ((validGaps as readonly string[]).includes(columnGap)) {
+ return undefined;
+ }
+ warnOnce(
+ 'Theme:column-gap-variable',
+ `[bestax-bulma] : setting ` +
+ '--bulma-column-gap through the columnGap prop is deprecated and will ' +
+ 'stop working in a future major version. On Theme, as on every other ' +
+ 'component, columnGap is the column gap helper ' +
+ `("${validGaps.join('", "')}"). Set the variable with ` +
+ `bulmaVars={{ '--bulma-column-gap': '${columnGap}' }} instead.`
+ );
+ return columnGap;
+};
+
/** The one `