bestax-mcp 1.1.1 → 1.1.2

package/data/catalog.json

@@ -1286,6 +1286,28 @@
     "--bulma-control-radius": "Control",
     "--bulma-control-radius-small": "Control",
     "--bulma-control-size": "Control",
+    "--bulma-dateinput-cell-color": "DateTimeInput",
+    "--bulma-dateinput-cell-disabled-color": "DateTimeInput",
+    "--bulma-dateinput-cell-hover-bg": "DateTimeInput",
+    "--bulma-dateinput-cell-other-month-color": "DateTimeInput",
+    "--bulma-dateinput-cell-radius": "DateTimeInput",
+    "--bulma-dateinput-cell-selected-bg": "DateTimeInput",
+    "--bulma-dateinput-cell-selected-color": "DateTimeInput",
+    "--bulma-dateinput-cell-size": "DateTimeInput",
+    "--bulma-dateinput-cell-today-color": "DateTimeInput",
+    "--bulma-dateinput-day-name-color": "DateTimeInput",
+    "--bulma-dateinput-day-name-size": "DateTimeInput",
+    "--bulma-dateinput-header-padding": "DateTimeInput",
+    "--bulma-dateinput-min-width": "DateTimeInput",
+    "--bulma-dateinput-nav-button-size": "DateTimeInput",
+    "--bulma-datetimeinput-gap": "DateTimeInput",
+    "--bulma-datetimeinput-time-card-background": "DateTimeInput",
+    "--bulma-datetimeinput-time-card-border-color": "DateTimeInput",
+    "--bulma-datetimeinput-time-card-padding": "DateTimeInput",
+    "--bulma-datetimeinput-time-card-radius": "DateTimeInput",
+    "--bulma-datetimeinput-time-card-shadow": "DateTimeInput",
+    "--bulma-datetimeinput-time-overlay-background": "DateTimeInput",
+    "--bulma-datetimeinput-time-overlay-blur": "DateTimeInput",
     "--bulma-delete-background-alpha": "Delete",
     "--bulma-delete-background-l": "Delete",
     "--bulma-delete-color": "Delete",
@@ -1814,6 +1836,7 @@
     "--bulma-tabs-boxed-link-hover-background-color": "Tabs",
     "--bulma-tabs-boxed-link-hover-border-bottom-color": "Tabs",
     "--bulma-tabs-boxed-link-radius": "Tabs",
+    "--bulma-tabs-content-padding": "Tabs",
     "--bulma-tabs-link-active-border-bottom-color": "Tabs",
     "--bulma-tabs-link-active-color": "Tabs",
     "--bulma-tabs-link-color": "Tabs",
@@ -1829,6 +1852,9 @@
     "--bulma-tabs-toggle-link-hover-background-color": "Tabs",
     "--bulma-tabs-toggle-link-hover-border-color": "Tabs",
     "--bulma-tabs-toggle-link-radius": "Tabs",
+    "--bulma-tabs-vertical-border-color": "Tabs",
+    "--bulma-tabs-vertical-border-width": "Tabs",
+    "--bulma-tabs-vertical-min-width": "Tabs",
     "--bulma-tag-active-background-l-delta": "Tag",
     "--bulma-tag-background-l": "Tag",
     "--bulma-tag-background-l-delta": "Tag",
@@ -1850,6 +1876,20 @@
     "--bulma-textarea-max-height": "TextArea",
     "--bulma-textarea-min-height": "TextArea",
     "--bulma-textarea-padding": "TextArea",
+    "--bulma-timeinput-footer-padding": "TimeInput",
+    "--bulma-timeinput-separator-color": "TimeInput",
+    "--bulma-timeinput-separator-size": "TimeInput",
+    "--bulma-timeinput-wheel-bg": "TimeInput",
+    "--bulma-timeinput-wheel-color": "TimeInput",
+    "--bulma-timeinput-wheel-dim-color": "TimeInput",
+    "--bulma-timeinput-wheel-gap": "TimeInput",
+    "--bulma-timeinput-wheel-hover-bg": "TimeInput",
+    "--bulma-timeinput-wheel-item-height": "TimeInput",
+    "--bulma-timeinput-wheel-mask": "TimeInput",
+    "--bulma-timeinput-wheel-radius": "TimeInput",
+    "--bulma-timeinput-wheel-selected-bg": "TimeInput",
+    "--bulma-timeinput-wheel-selected-color": "TimeInput",
+    "--bulma-timeinput-wheel-width": "TimeInput",
     "--bulma-title-color": "Title",
     "--bulma-title-family": "Title",
     "--bulma-title-line-height": "Title",

package/data/components/DateInput.json

@@ -688,6 +688,90 @@
     }
   ],
   "cssVars": [
+    {
+      "css": "--bulma-dateinput-min-width",
+      "sass": "$dateinput-min-width",
+      "default": "16rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-size",
+      "sass": "$dateinput-cell-size",
+      "default": "2.25rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-radius",
+      "sass": "$dateinput-cell-radius",
+      "default": "var(--bulma-radius-small)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-color",
+      "sass": "$dateinput-cell-color",
+      "default": "var(--bulma-text)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-hover-bg",
+      "sass": "$dateinput-cell-hover-bg",
+      "default": "hsla(0, 0%, 50%, 0.13)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-selected-bg",
+      "sass": "$dateinput-cell-selected-bg",
+      "default": "var(--bulma-primary)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-selected-color",
+      "sass": "$dateinput-cell-selected-color",
+      "default": "var(--bulma-primary-invert)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-today-color",
+      "sass": "$dateinput-cell-today-color",
+      "default": "var(--bulma-primary)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-disabled-color",
+      "sass": "$dateinput-cell-disabled-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-other-month-color",
+      "sass": "$dateinput-cell-other-month-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-header-padding",
+      "sass": "$dateinput-header-padding",
+      "default": "0.5rem 0",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-day-name-color",
+      "sass": "$dateinput-day-name-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-day-name-size",
+      "sass": "$dateinput-day-name-size",
+      "default": "var(--bulma-size-7)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-nav-button-size",
+      "sass": "$dateinput-nav-button-size",
+      "default": "1.75rem",
+      "scope": "element"
+    },
     {
       "css": "--bulma-input-h",
       "sass": "$input-h",

package/data/components/DateTimeInput.json

@@ -768,6 +768,222 @@
     }
   ],
   "cssVars": [
+    {
+      "css": "--bulma-dateinput-min-width",
+      "sass": "$dateinput-min-width",
+      "default": "16rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-size",
+      "sass": "$dateinput-cell-size",
+      "default": "2.25rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-radius",
+      "sass": "$dateinput-cell-radius",
+      "default": "var(--bulma-radius-small)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-color",
+      "sass": "$dateinput-cell-color",
+      "default": "var(--bulma-text)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-hover-bg",
+      "sass": "$dateinput-cell-hover-bg",
+      "default": "hsla(0, 0%, 50%, 0.13)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-selected-bg",
+      "sass": "$dateinput-cell-selected-bg",
+      "default": "var(--bulma-primary)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-selected-color",
+      "sass": "$dateinput-cell-selected-color",
+      "default": "var(--bulma-primary-invert)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-today-color",
+      "sass": "$dateinput-cell-today-color",
+      "default": "var(--bulma-primary)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-disabled-color",
+      "sass": "$dateinput-cell-disabled-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-cell-other-month-color",
+      "sass": "$dateinput-cell-other-month-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-header-padding",
+      "sass": "$dateinput-header-padding",
+      "default": "0.5rem 0",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-day-name-color",
+      "sass": "$dateinput-day-name-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-day-name-size",
+      "sass": "$dateinput-day-name-size",
+      "default": "var(--bulma-size-7)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-dateinput-nav-button-size",
+      "sass": "$dateinput-nav-button-size",
+      "default": "1.75rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-datetimeinput-gap",
+      "sass": "$datetimeinput-gap",
+      "default": "0.75rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-datetimeinput-time-card-background",
+      "sass": "$datetimeinput-time-card-background",
+      "default": "var(--bulma-scheme-main)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-datetimeinput-time-card-border-color",
+      "sass": "$datetimeinput-time-card-border-color",
+      "default": "var(--bulma-border)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-datetimeinput-time-card-radius",
+      "sass": "$datetimeinput-time-card-radius",
+      "default": "var(--bulma-radius-large)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-datetimeinput-time-card-shadow",
+      "sass": "$datetimeinput-time-card-shadow",
+      "default": "0 8px 24px hsla(0, 0%, 0%, 0.18)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-datetimeinput-time-card-padding",
+      "sass": "$datetimeinput-time-card-padding",
+      "default": "0.5rem 0.75rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-datetimeinput-time-overlay-background",
+      "sass": "$datetimeinput-time-overlay-background",
+      "default": "hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l), 0.55)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-datetimeinput-time-overlay-blur",
+      "sass": "$datetimeinput-time-overlay-blur",
+      "default": "3px",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-width",
+      "sass": "$timeinput-wheel-width",
+      "default": "3rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-item-height",
+      "sass": "$timeinput-wheel-item-height",
+      "default": "2rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-gap",
+      "sass": "$timeinput-wheel-gap",
+      "default": "0.4rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-bg",
+      "sass": "$timeinput-wheel-bg",
+      "default": "var(--bulma-scheme-main)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-color",
+      "sass": "$timeinput-wheel-color",
+      "default": "var(--bulma-text)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-dim-color",
+      "sass": "$timeinput-wheel-dim-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-hover-bg",
+      "sass": "$timeinput-wheel-hover-bg",
+      "default": "hsla(0, 0%, 50%, 0.13)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-selected-bg",
+      "sass": "$timeinput-wheel-selected-bg",
+      "default": "var(--bulma-primary)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-selected-color",
+      "sass": "$timeinput-wheel-selected-color",
+      "default": "var(--bulma-primary-invert)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-radius",
+      "sass": "$timeinput-wheel-radius",
+      "default": "var(--bulma-radius)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-mask",
+      "sass": "$timeinput-wheel-mask",
+      "default": "linear-gradient(180deg, transparent 0, black 18%, black 82%, transparent 100%)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-separator-color",
+      "sass": "$timeinput-separator-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-separator-size",
+      "sass": "$timeinput-separator-size",
+      "default": "var(--bulma-size-5)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-footer-padding",
+      "sass": "$timeinput-footer-padding",
+      "default": "0.5rem 0 0",
+      "scope": "element"
+    },
     {
       "css": "--bulma-input-h",
       "sass": "$input-h",

package/data/components/Tabs.json

@@ -464,6 +464,30 @@
     }
   ],
   "cssVars": [
+    {
+      "css": "--bulma-tabs-vertical-min-width",
+      "sass": "$tabs-vertical-min-width",
+      "default": "200px",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-tabs-vertical-border-color",
+      "sass": "$tabs-vertical-border-color",
+      "default": "var(--bulma-border)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-tabs-vertical-border-width",
+      "sass": "$tabs-vertical-border-width",
+      "default": "1px",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-tabs-content-padding",
+      "sass": "$tabs-content-padding",
+      "default": "1rem",
+      "scope": "element"
+    },
     {
       "css": "--bulma-tabs-border-bottom-color",
       "sass": "$tabs-border-bottom-color",

package/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    <Theme primaryH=\"270\" primaryS=\"100%\" primaryL=\"50%\">\n      <Box p=\"4\">\n        <Button color=\"primary\">Purple Primary Button</Button>\n      </Box>\n    </Theme>\n  );\n}\n```\n\n### Global Theme (Root Level)\n\n```tsx\nfunction GlobalTheme() {\n  return (\n    <Theme isRoot={true} primaryH=\"270\" primaryS=\"100%\" primaryL=\"50%\">\n      <div>\n        <Button color=\"primary\">Global Purple Theme</Button>\n        <Button color=\"info\">Info Button</Button>\n      </div>\n    </Theme>\n  );\n}\n```\n\n### Dark Mode\n\nThe `colorMode` prop sets Bulma's `data-theme` on `<html>`, 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 (`<Theme isRoot colorMode=\"light\">`); 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    <Theme isRoot colorMode={mode}>\n      <Button color=\"primary\" onClick={() => setMode('dark')}>\n        Dark\n      </Button>\n      <Button color=\"primary\" onClick={() => setMode('light')}>\n        Light\n      </Button>\n      <Button onClick={() => setMode('system')}>System</Button>\n    </Theme>\n  );\n}\n```\n\n### Local Theme (Component Level)\n\n```tsx\nfunction LocalTheme() {\n  return (\n    <div>\n      <Button color=\"primary\">Standard Primary</Button>\n\n      <Theme primaryH=\"120\" primaryS=\"100%\" primaryL=\"40%\">\n        <Button color=\"primary\">Green Primary</Button>\n      </Theme>\n\n      <Button color=\"primary\">Standard Primary Again</Button>\n    </div>\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    <Theme bulmaVars={sunsetTheme} isRoot>\n      <Box p=\"4\">\n        <Title>Sunset Theme</Title>\n        <Button color=\"primary\">Sunset Button</Button>\n        <Button color=\"info\">Info Button</Button>\n      </Box>\n    </Theme>\n  );\n}\n```\n\n### Advanced CSS Variables Usage\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    '--bestax-title-color': 'hsl(0, 0%, 21%)',\n    '--bulma-subtitle-color': 'hsl(0, 0%, 48%)',\n  };\n\n  return (\n    <Theme bulmaVars={typographyTheme}>\n      <Title>Custom Typography</Title>\n      <Subtitle>With custom fonts and weights</Subtitle>\n    </Theme>\n  );\n}\n```\n\n```tsx\nfunction CustomButtonTheme() {\n  const customButton = {\n    '--bestax-button-border-radius': '12px',\n    '--bestax-button-padding-vertical': '0.75rem',\n    '--bestax-button-padding-horizontal': '1.5rem',\n    '--bestax-button-focus-box-shadow-size': '0 0 0 0.2rem',\n    '--bestax-button-focus-box-shadow-color': 'rgba(72, 95, 199, 0.25)',\n  };\n\n  return (\n    <Theme bulmaVars={customButton}>\n      <Button color=\"primary\">Custom Styled Button</Button>\n    </Theme>\n  );\n}\n```\n\n```tsx\nfunction SpacingTheme() {\n  const spacingTheme = {\n    '--bulma-block-spacing': '2rem',\n    '--bulma-column-gap': '1rem',\n    '--bulma-section-padding': '4rem 1.5rem',\n    '--bestax-box-padding': '2rem',\n    '--bestax-card-content-padding': '2rem',\n  };\n\n  return (\n    <Theme bulmaVars={spacingTheme}>\n      <Section>\n        <Columns>\n          <Column>\n            <Box>Content with custom spacing</Box>\n          </Column>\n          <Column>\n            <Card>\n              <CardContent>Custom card padding</CardContent>\n            </Card>\n          </Column>\n        </Columns>\n      </Section>\n    </Theme>\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    <Theme {...forestScheme} isRoot>\n      <Box p=\"4\">\n        <Title>Forest Theme</Title>\n        <Button color=\"primary\">Forest Primary</Button>\n        <Button color=\"success\">Success</Button>\n        <Button color=\"info\">Info</Button>\n        <Button color=\"warning\">Warning</Button>\n        <Button color=\"danger\">Danger</Button>\n      </Box>\n    </Theme>\n  );\n}\n```\n\n### Theme with Styling\n\n```tsx\nfunction StyledTheme() {\n  return (\n    <Theme\n      className=\"custom-theme-wrapper\"\n      primaryH=\"45\"\n      primaryS=\"100%\"\n      primaryL=\"50%\"\n      p=\"5\"\n      m=\"3\"\n      textAlign=\"centered\"\n      backgroundColor=\"light\"\n    >\n      <Title>Styled Theme Container</Title>\n      <Button color=\"primary\">Styled Button</Button>\n    </Theme>\n  );\n}\n```\n\n### Nested Themes\n\n```tsx\nfunction NestedThemes() {\n  return (\n    <Theme primaryH=\"210\" primaryS=\"60%\" primaryL=\"45%\" p=\"4\">\n      <Title>Outer Theme (Blue)</Title>\n      <Button color=\"primary\">Blue Primary</Button>\n\n      <Theme\n        primaryH=\"120\"\n        primaryS=\"70%\"\n        primaryL=\"40%\"\n        p=\"3\"\n        mt=\"4\"\n        backgroundColor=\"light\"\n      >\n        <Title size=\"4\">Inner Theme (Green)</Title>\n        <Button color=\"primary\">Green Primary</Button>\n      </Theme>\n\n      <Button color=\"primary\" mt=\"3\">\n        Blue Primary Again\n      </Button>\n    </Theme>\n  );\n}\n```\n\n### Theme with ConfigProvider\n\n```tsx\nfunction PrefixedTheme() {\n  return (\n    <ConfigProvider classPrefix=\"bestax-\">\n      <Theme primaryH=\"300\" primaryS=\"80%\" primaryL=\"50%\" isRoot>\n        <Button color=\"primary\">Prefixed & Themed Button</Button>\n      </Theme>\n    </ConfigProvider>\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\n### CSS Variable Naming\n\n- All Bulma CSS variables follow the `--bulma-*` naming convention\n- Use the `bulmaVars` prop when you need to set variables not covered by individual props\n- Individual props (like `primaryH`) are converted to their corresponding CSS variable names\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., `<Section bgColor=\"scheme-main-bis\">`) at once\n\n### Performance Considerations\n\n- Prefer setting themes at higher levels in your component tree rather than deeply nested\n- Use `isRoot={true}` sparingly to avoid CSS specificity issues\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### Prop to CSS Variable Conversion\n\nThe Theme component automatically converts camelCase prop names to their corresponding CSS custom property names using the following pattern:\n\n```\npropName → --bulma-prop-name\n```\n\n**Examples:**\n\n- `primaryH` → `--bulma-primary-h`\n- `schemeS` → `--bulma-scheme-s`\n- `lightL` → `--bulma-light-l`\n- `hoverBackgroundLDelta` → `--bulma-hover-background-l-delta`\n- `cardContentPadding` → `--bestax-card-content-padding`\n\n### Prop vs bulmaVars\n\nYou can use CSS variables in two ways:\n\n1. **Individual Props** (recommended for commonly used variables):\n\n   ```tsx\n   <Theme primaryH=\"270\" primaryS=\"100%\" primaryL=\"50%\" />\n   ```\n\n2. **bulmaVars Object** (for less common variables or when you have many variables):\n\n   ```tsx\n   <Theme\n     bulmaVars={{\n       '--bulma-primary-h': '270',\n       '--bulma-primary-s': '100%',\n       '--bulma-primary-l': '50%',\n       '--bestax-card-content-padding': '2rem',\n     }}\n   />\n   ```\n\n3. **Combined** (props take precedence over bulmaVars):\n   ```tsx\n   <Theme\n     primaryH=\"270\" // This takes precedence\n     bulmaVars={{\n       '--bulma-primary-h': '180', // This is overridden\n       '--bestax-card-content-padding': '2rem',\n     }}\n   />\n   ```\n\n### All Supported Props\n\nThe Theme component supports props for all 500+ Bulma CSS variables. Here's the complete list organized by category:\n\n**Scheme & Base Color Props:**\n\n- `schemeH`, `schemeS`, `lightL`, `lightInvertL`, `darkL`, `darkInvertL`\n- `softL`, `boldL`, `softInvertL`, `boldInvertL`\n- `hoverBackgroundLDelta`, `activeBackgroundLDelta`, `hoverBorderLDelta`, `activeBorderLDelta`\n- `hoverColorLDelta`, `activeColorLDelta`, `hoverShadowADelta`, `activeShadowADelta`\n\n**Color Props:**\n\n- `primaryH`, `primaryS`, `primaryL`, `linkH`, `linkS`, `linkL`\n- `infoH`, `infoS`, `infoL`, `successH`, `successS`, `successL`\n- `warningH`, `warningS`, `warningL`, `dangerH`, `dangerS`, `dangerL`\n\n**Typography Props:**\n\n- `familyPrimary`, `familySecondary`, `familyCode`\n- `sizeSmall`, `sizeNormal`, `sizeMedium`, `sizeLarge`\n- `weightLight`, `weightNormal`, `weightMedium`, `weightSemibold`, `weightBold`, `weightExtrabold`\n- `bodyBackgroundColor`, `bodySize`, `bodyMinWidth`, `bodyRendering`, `bodyFamily`\n- `bodyOverflowX`, `bodyOverflowY`, `bodyColor`, `bodyFontSize`, `bodyWeight`, `bodyLineHeight`\n- `codeFamily`, `codePadding`, `codeWeight`, `codeSize`, `smallFontSize`\n- `hrBackgroundColor`, `hrHeight`, `hrMargin`, `strongColor`, `strongWeight`\n- `preFontSize`, `prePadding`, `preCodeFontSize`\n\n**Layout & Spacing Props:**\n\n- `blockSpacing`, `duration`, `easing`, `speed`, `arrowColor`, `loadingColor`\n- `radiusSmall`, `radius`, `radiusMedium`, `radiusLarge`, `radiusRounded`\n- `columnGap`, `gridGap`, `gridColumnCount`, `gridColumnMin`\n- `gridCellColumnSpan`, `gridCellColumnStart`\n\n**Box Props:**\n\n- `boxBackgroundColor`, `boxColor`, `boxRadius`, `boxShadow`, `boxPadding`\n- `boxLinkHoverShadow`, `boxLinkActiveShadow`\n\n**Breadcrumb Props:**\n\n- `breadcrumbItemColor`, `breadcrumbItemHoverColor`, `breadcrumbItemActiveColor`\n- `breadcrumbItemPaddingVertical`, `breadcrumbItemPaddingHorizontal`, `breadcrumbItemSeparatorColor`\n\n**Burger Props:**\n\n- `burgerH`, `burgerS`, `burgerL`, `burgerBorderRadius`, `burgerGap`\n- `burgerItemHeight`, `burgerItemWidth`\n\n**Card Props:**\n\n- `cardColor`, `cardBackgroundColor`, `cardShadow`, `cardRadius`\n- `cardHeaderBackgroundColor`, `cardHeaderColor`, `cardHeaderPadding`\n- `cardHeaderShadow`, `cardHeaderWeight`, `cardContentBackgroundColor`\n- `cardContentPadding`, `cardFooterBackgroundColor`, `cardFooterBorderTop`\n- `cardFooterPadding`, `cardMediaMargin`\n\n**Content Props:**\n\n- `contentHeadingColor`, `contentHeadingWeight`, `contentHeadingLineHeight`\n- `contentBlockMarginBottom`, `contentBlockquoteBackgroundColor`, `contentBlockquoteBorderLeft`\n- `contentBlockquotePadding`, `contentPrePadding`, `contentTableCellBorder`\n- `contentTableCellBorderWidth`, `contentTableCellPadding`, `contentTableCellHeadingColor`\n- `contentTableHeadCellBorderWidth`, `contentTableHeadCellColor`\n- `contentTableBodyLastRowCellBorderBottomWidth`, `contentTableFootCellBorderWidth`\n- `contentTableFootCellColor`\n\n**Control Props:**\n\n- `controlRadius`, `controlRadiusSmall`, `controlBorderWidth`, `controlHeight`\n- `controlLineHeight`, `controlPaddingVertical`, `controlPaddingHorizontal`\n- `controlSize`, `controlFocusShadowL`\n\n**Delete Props:**\n\n- `deleteDimensions`, `deleteBackgroundL`, `deleteBackgroundAlpha`, `deleteColor`\n\n**Dropdown Props:**\n\n- `dropdownMenuMinWidth`, `dropdownContentBackgroundColor`, `dropdownContentOffset`\n- `dropdownContentPaddingBottom`, `dropdownContentPaddingTop`, `dropdownContentRadius`\n- `dropdownContentShadow`, `dropdownContentZ`, `dropdownItemH`, `dropdownItemS`\n- `dropdownItemL`, `dropdownItemBackgroundL`, `dropdownItemBackgroundLDelta`\n- `dropdownItemHoverBackgroundLDelta`, `dropdownItemActiveBackgroundLDelta`\n- `dropdownItemColorL`, `dropdownItemSelectedH`, `dropdownItemSelectedS`\n- `dropdownItemSelectedL`, `dropdownItemSelectedBackgroundL`, `dropdownItemSelectedColorL`\n- `dropdownDividerBackgroundColor`\n\n**File Props:**\n\n- `fileRadius`, `fileNameBorderColor`, `fileNameBorderStyle`, `fileNameBorderWidth`\n- `fileNameMaxWidth`, `fileH`, `fileS`, `fileBackgroundL`, `fileBackgroundLDelta`\n- `fileHoverBackgroundLDelta`, `fileActiveBackgroundLDelta`, `fileBorderL`\n- `fileBorderLDelta`, `fileHoverBorderLDelta`, `fileActiveBorderLDelta`\n- `fileCtaColorL`, `fileNameColorL`, `fileColorLDelta`, `fileHoverColorLDelta`\n- `fileActiveColorLDelta`\n\n**Footer Props:**\n\n- `footerBackgroundColor`, `footerColor`, `footerPadding`\n\n**Hero Props:**\n\n- `heroBodyPadding`, `heroBodyPaddingTablet`, `heroBodyPaddingSmall`\n- `heroBodyPaddingMedium`, `heroBodyPaddingLarge`\n\n**Icon Props:**\n\n- `iconDimensions`, `iconDimensionsSmall`, `iconDimensionsMedium`\n- `iconDimensionsLarge`, `iconTextSpacing`\n\n**Input Props:**\n\n- `inputH`, `inputS`, `inputL`, `inputBorderStyle`, `inputBorderL`\n- `inputBorderLDelta`, `inputHoverBorderLDelta`, `inputActiveBorderLDelta`\n- `inputFocusH`, `inputFocusS`, `inputFocusL`, `inputFocusShadowSize`\n- `inputFocusShadowAlpha`, `inputColorL`, `inputBackgroundL`, `inputBackgroundLDelta`\n- `inputHeight`, `inputShadow`, `inputPlaceholderColor`, `inputDisabledColor`\n- `inputDisabledBackgroundColor`, `inputDisabledBorderColor`, `inputDisabledPlaceholderColor`\n- `inputArrow`, `inputIconColor`, `inputIconHoverColor`, `inputIconFocusColor`, `inputRadius`\n\n**Media Props:**\n\n- `mediaBorderColor`, `mediaBorderSize`, `mediaSpacing`, `mediaSpacingLarge`\n- `mediaContentSpacing`, `mediaLevel1Spacing`, `mediaLevel1ContentSpacing`, `mediaLevel2Spacing`\n\n**Menu Props:**\n\n- `menuItemH`, `menuItemS`, `menuItemL`, `menuItemBackgroundL`, `menuItemBackgroundLDelta`\n- `menuItemHoverBackgroundLDelta`, `menuItemActiveBackgroundLDelta`, `menuItemColorL`\n- `menuItemRadius`, `menuItemSelectedH`, `menuItemSelectedS`, `menuItemSelectedL`\n- `menuItemSelectedBackgroundL`, `menuItemSelectedColorL`, `menuListBorderLeft`\n- `menuListLineHeight`, `menuListLinkPadding`, `menuNestedListMargin`\n- `menuNestedListPaddingLeft`, `menuLabelColor`, `menuLabelFontSize`\n- `menuLabelLetterSpacing`, `menuLabelSpacing`\n\n**Message Props:**\n\n- `messageH`, `messageS`, `messageBackgroundL`, `messageBorderL`, `messageBorderLDelta`\n- `messageBorderStyle`, `messageBorderWidth`, `messageColorL`, `messageRadius`\n- `messageHeaderWeight`, `messageHeaderPadding`, `messageHeaderRadius`\n- `messageHeaderBodyBorderWidth`, `messageHeaderBackgroundL`, `messageHeaderColorL`\n- `messageBodyBorderWidth`, `messageBodyColor`, `messageBodyPadding`\n- `messageBodyRadius`, `messageBodyPreCodeBackgroundColor`\n\n**Modal Props:**\n\n- `modalZ`, `modalBackgroundBackgroundColor`, `modalContentWidth`, `modalContentMarginMobile`\n- `modalContentSpacingMobile`, `modalContentSpacingTablet`, `modalCloseDimensions`\n- `modalCloseRight`, `modalCloseTop`, `modalCardSpacing`, `modalCardHeadBackgroundColor`\n- `modalCardHeadPadding`, `modalCardHeadRadius`, `modalCardTitleColor`\n- `modalCardTitleLineHeight`, `modalCardTitleSize`, `modalCardFootBackgroundColor`\n- `modalCardFootRadius`, `modalCardBodyBackgroundColor`, `modalCardBodyPadding`\n\n**Navbar Props:**\n\n- `navbarH`, `navbarS`, `navbarL`, `navbarBackgroundColor`, `navbarBoxShadowSize`\n- `navbarBoxShadowColor`, `navbarPaddingVertical`, `navbarPaddingHorizontal`\n- `navbarZ`, `navbarFixedZ`, `navbarItemBackgroundA`, `navbarItemBackgroundL`\n- `navbarItemBackgroundLDelta`, `navbarItemHoverBackgroundLDelta`, `navbarItemActiveBackgroundLDelta`\n- `navbarItemColorL`, `navbarItemSelectedH`, `navbarItemSelectedS`, `navbarItemSelectedL`\n- `navbarItemSelectedBackgroundL`, `navbarItemSelectedColorL`, `navbarItemImgMaxHeight`\n- `navbarBurgerColor`, `navbarTabHoverBackgroundColor`, `navbarTabHoverBorderBottomColor`\n- `navbarTabActiveColor`, `navbarTabActiveBackgroundColor`, `navbarTabActiveBorderBottomColor`\n- `navbarTabActiveBorderBottomStyle`, `navbarTabActiveBorderBottomWidth`\n- `navbarDropdownBackgroundColor`, `navbarDropdownBorderL`, `navbarDropdownBorderColor`\n- `navbarDropdownBorderStyle`, `navbarDropdownBorderWidth`, `navbarDropdownOffset`\n- `navbarDropdownArrow`, `navbarDropdownRadius`, `navbarDropdownZ`\n- `navbarDropdownBoxedRadius`, `navbarDropdownBoxedShadow`, `navbarDropdownItemH`\n- `navbarDropdownItemS`, `navbarDropdownItemL`, `navbarDropdownItemBackgroundL`\n- `navbarDropdownItemColorL`, `navbarDividerBackgroundL`, `navbarDividerHeight`\n- `navbarBottomBoxShadowSize`\n\n**Notification Props:**\n\n- `notificationH`, `notificationS`, `notificationBackgroundL`, `notificationColorL`\n- `notificationCodeBackgroundColor`, `notificationRadius`, `notificationPadding`\n\n**Pagination Props:**\n\n- `paginationMargin`, `paginationMinWidth`, `paginationItemH`, `paginationItemS`\n- `paginationItemL`, `paginationItemBackgroundLDelta`, `paginationItemHoverBackgroundLDelta`\n- `paginationItemActiveBackgroundLDelta`, `paginationItemBorderStyle`, `paginationItemBorderWidth`\n- `paginationItemBorderL`, `paginationItemBorderLDelta`, `paginationItemHoverBorderLDelta`\n- `paginationItemActiveBorderLDelta`, `paginationItemFocusBorderLDelta`, `paginationItemColorL`\n- `paginationItemFontSize`, `paginationItemMargin`, `paginationItemPaddingLeft`\n- `paginationItemPaddingRight`, `paginationItemOuterShadowH`, `paginationItemOuterShadowS`\n- `paginationItemOuterShadowL`, `paginationItemOuterShadowA`, `paginationNavPaddingLeft`\n- `paginationNavPaddingRight`, `paginationDisabledColor`, `paginationDisabledBackgroundColor`\n- `paginationDisabledBorderColor`, `paginationCurrentColor`, `paginationCurrentBackgroundColor`\n- `paginationCurrentBorderColor`, `paginationEllipsisColor`, `paginationShadowInset`\n- `paginationSelectedItemH`, `paginationSelectedItemS`, `paginationSelectedItemL`\n- `paginationSelectedItemBackgroundL`, `paginationSelectedItemBorderL`, `paginationSelectedItemColorL`\n\n**Panel Props:**\n\n- `panelMargin`, `panelItemBorder`, `panelRadius`, `panelShadow`, `panelHeadingLineHeight`\n- `panelHeadingPadding`, `panelHeadingRadius`, `panelHeadingSize`, `panelHeadingWeight`\n- `panelTabsFontSize`, `panelTabBorderBottomColor`, `panelTabBorderBottomStyle`\n- `panelTabBorderBottomWidth`, `panelTabActiveColor`, `panelListItemColor`\n- `panelListItemHoverColor`, `panelBlockColor`, `panelBlockHoverBackgroundColor`\n- `panelBlockActiveBorderLeftColor`, `panelBlockActiveColor`, `panelBlockActiveIconColor`\n- `panelIconColor`\n\n**Progress Props:**\n\n- `progressBorderRadius`, `progressBarBackgroundColor`, `progressValueBackgroundColor`\n- `progressIndeterminateDuration`\n\n**Section Props:**\n\n- `sectionPadding`, `sectionPaddingDesktop`, `sectionPaddingMedium`, `sectionPaddingLarge`\n\n**Skeleton Props:**\n\n- `skeletonBackground`, `skeletonRadius`, `skeletonBlockMinHeight`, `skeletonLinesGap`\n- `skeletonLineHeight`\n\n**Table Props:**\n\n- `tableColor`, `tableBackgroundColor`, `tableCellBorderColor`, `tableCellBorderStyle`\n- `tableCellBorderWidth`, `tableCellPadding`, `tableCellHeadingColor`, `tableCellTextAlign`\n- `tableHeadCellBorderWidth`, `tableHeadCellColor`, `tableFootCellBorderWidth`\n- `tableFootCellColor`, `tableHeadBackgroundColor`, `tableBodyBackgroundColor`\n- `tableFootBackgroundColor`, `tableRowHoverBackgroundColor`, `tableRowActiveBackgroundColor`\n- `tableRowActiveColor`, `tableStripedRowEvenBackgroundColor`, `tableStripedRowEvenHoverBackgroundColor`\n\n**Tabs Props:**\n\n- `tabsBorderBottomColor`, `tabsBorderBottomStyle`, `tabsBorderBottomWidth`\n- `tabsLinkColor`, `tabsLinkHoverBorderBottomColor`, `tabsLinkHoverColor`\n- `tabsLinkActiveBorderBottomColor`, `tabsLinkActiveColor`, `tabsLinkPadding`\n- `tabsBoxedLinkRadius`, `tabsBoxedLinkHoverBackgroundColor`, `tabsBoxedLinkHoverBorderBottomColor`\n- `tabsBoxedLinkActiveBackgroundColor`, `tabsBoxedLinkActiveBorderColor`\n- `tabsBoxedLinkActiveBorderBottomColor`, `tabsToggleLinkBorderColor`, `tabsToggleLinkBorderStyle`\n- `tabsToggleLinkBorderWidth`, `tabsToggleLinkHoverBackgroundColor`, `tabsToggleLinkHoverBorderColor`\n- `tabsToggleLinkRadius`, `tabsToggleLinkActiveBackgroundColor`, `tabsToggleLinkActiveBorderColor`\n- `tabsToggleLinkActiveColor`\n\n**Tag Props:**\n\n- `tagH`, `tagS`, `tagBackgroundL`, `tagBackgroundLDelta`, `tagHoverBackgroundLDelta`\n- `tagActiveBackgroundLDelta`, `tagColorL`, `tagRadius`, `tagDeleteMargin`\n\n**Title & Subtitle Props:**\n\n- `titleColor`, `titleFamily`, `titleSize`, `titleWeight`, `titleLineHeight`\n- `titleStrongColor`, `titleStrongWeight`, `titleSubSize`, `titleSupSize`\n- `subtitleColor`, `subtitleFamily`, `subtitleSize`, `subtitleWeight`\n- `subtitleLineHeight`, `subtitleStrongColor`, `subtitleStrongWeight`\n\n### TypeScript Support\n\nAll props are fully typed in TypeScript. Use IDE autocomplete to discover available props:\n\n```tsx\n// TypeScript will provide autocomplete for all available props\n<Theme\n  primaryH=\"270\"\n  cardContent={/* TypeScript autocomplete will show all card-related props */}\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.                                                                                                                          |\n| `colorMode` | `'light' \\| 'dark' \\| 'system'` | Sets Bulma's light/dark scheme by writing the `data-theme` attribute on `<html>`. 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` | `Record<string, string>`        | Object containing CSS custom properties as key-value pairs (e.g., `{'--bulma-primary-h': '210'}`).                                                                                                                                                        |\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#### Complete CSS Variables List\n\nThe Theme component supports all 500+ Bulma CSS variables through the `bulmaVars` prop and individual props:\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- `--bestax-box-background-color`, `--bestax-box-color`, `--bestax-box-radius`, `--bestax-box-shadow`\n- `--bestax-box-padding`, `--bestax-box-link-hover-shadow`, `--bestax-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- `--bestax-card-color`, `--bestax-card-background-color`, `--bestax-card-shadow`, `--bestax-card-radius`\n- `--bestax-card-header-background-color`, `--bestax-card-header-color`, `--bestax-card-header-padding`\n- `--bestax-card-header-shadow`, `--bestax-card-header-weight`\n- `--bestax-card-content-background-color`, `--bestax-card-content-padding`\n- `--bestax-card-footer-background-color`, `--bestax-card-footer-border-top`, `--bestax-card-footer-padding`\n- `--bestax-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- `--bestax-notification-h`, `--bestax-notification-s`, `--bestax-notification-background-l`\n- `--bestax-notification-color-l`, `--bestax-notification-code-background-color`\n- `--bestax-notification-radius`, `--bestax-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- `--bestax-title-color`, `--bestax-title-family`, `--bestax-title-size`, `--bestax-title-weight`\n- `--bestax-title-line-height`, `--bestax-title-strong-color`, `--bestax-title-strong-weight`\n- `--bestax-title-sub-size`, `--bestax-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    <Theme primaryH=\"270\" primaryS=\"100%\" primaryL=\"50%\">\n      <Box p=\"4\">\n        <Button color=\"primary\">Purple Primary Button</Button>\n      </Box>\n    </Theme>\n  );\n}\n```\n\n### Global Theme (Root Level)\n\n```tsx\nfunction GlobalTheme() {\n  return (\n    <Theme isRoot={true} primaryH=\"270\" primaryS=\"100%\" primaryL=\"50%\">\n      <div>\n        <Button color=\"primary\">Global Purple Theme</Button>\n        <Button color=\"info\">Info Button</Button>\n      </div>\n    </Theme>\n  );\n}\n```\n\n### Dark Mode\n\nThe `colorMode` prop sets Bulma's `data-theme` on `<html>`, 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 (`<Theme isRoot colorMode=\"light\">`); 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    <Theme isRoot colorMode={mode}>\n      <Button color=\"primary\" onClick={() => setMode('dark')}>\n        Dark\n      </Button>\n      <Button color=\"primary\" onClick={() => setMode('light')}>\n        Light\n      </Button>\n      <Button onClick={() => setMode('system')}>System</Button>\n    </Theme>\n  );\n}\n```\n\n### Local Theme (Component Level)\n\n```tsx\nfunction LocalTheme() {\n  return (\n    <div>\n      <Button color=\"primary\">Standard Primary</Button>\n\n      <Theme primaryH=\"120\" primaryS=\"100%\" primaryL=\"40%\">\n        <Button color=\"primary\">Green Primary</Button>\n      </Theme>\n\n      <Button color=\"primary\">Standard Primary Again</Button>\n    </div>\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    <Theme bulmaVars={sunsetTheme} isRoot>\n      <Box p=\"4\">\n        <Title>Sunset Theme</Title>\n        <Button color=\"primary\">Sunset Button</Button>\n        <Button color=\"info\">Info Button</Button>\n      </Box>\n    </Theme>\n  );\n}\n```\n\n### Advanced CSS Variables Usage\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    '--bestax-title-color': 'hsl(0, 0%, 21%)',\n    '--bulma-subtitle-color': 'hsl(0, 0%, 48%)',\n  };\n\n  return (\n    <Theme bulmaVars={typographyTheme}>\n      <Title>Custom Typography</Title>\n      <Subtitle>With custom fonts and weights</Subtitle>\n    </Theme>\n  );\n}\n```\n\n```tsx\nfunction CustomButtonTheme() {\n  const customButton = {\n    '--bestax-button-border-radius': '12px',\n    '--bestax-button-padding-vertical': '0.75rem',\n    '--bestax-button-padding-horizontal': '1.5rem',\n    '--bestax-button-focus-box-shadow-size': '0 0 0 0.2rem',\n    '--bestax-button-focus-box-shadow-color': 'rgba(72, 95, 199, 0.25)',\n  };\n\n  return (\n    <Theme bulmaVars={customButton}>\n      <Button color=\"primary\">Custom Styled Button</Button>\n    </Theme>\n  );\n}\n```\n\n```tsx\nfunction SpacingTheme() {\n  const spacingTheme = {\n    '--bulma-block-spacing': '2rem',\n    '--bulma-column-gap': '1rem',\n    '--bulma-section-padding': '4rem 1.5rem',\n    '--bestax-box-padding': '2rem',\n    '--bestax-card-content-padding': '2rem',\n  };\n\n  return (\n    <Theme bulmaVars={spacingTheme}>\n      <Section>\n        <Columns>\n          <Column>\n            <Box>Content with custom spacing</Box>\n          </Column>\n          <Column>\n            <Card>\n              <CardContent>Custom card padding</CardContent>\n            </Card>\n          </Column>\n        </Columns>\n      </Section>\n    </Theme>\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    <Theme {...forestScheme} isRoot>\n      <Box p=\"4\">\n        <Title>Forest Theme</Title>\n        <Button color=\"primary\">Forest Primary</Button>\n        <Button color=\"success\">Success</Button>\n        <Button color=\"info\">Info</Button>\n        <Button color=\"warning\">Warning</Button>\n        <Button color=\"danger\">Danger</Button>\n      </Box>\n    </Theme>\n  );\n}\n```\n\n### Theme with Styling\n\n```tsx\nfunction StyledTheme() {\n  return (\n    <Theme\n      className=\"custom-theme-wrapper\"\n      primaryH=\"45\"\n      primaryS=\"100%\"\n      primaryL=\"50%\"\n      p=\"5\"\n      m=\"3\"\n      textAlign=\"centered\"\n      backgroundColor=\"light\"\n    >\n      <Title>Styled Theme Container</Title>\n      <Button color=\"primary\">Styled Button</Button>\n    </Theme>\n  );\n}\n```\n\n### Nested Themes\n\n```tsx\nfunction NestedThemes() {\n  return (\n    <Theme primaryH=\"210\" primaryS=\"60%\" primaryL=\"45%\" p=\"4\">\n      <Title>Outer Theme (Blue)</Title>\n      <Button color=\"primary\">Blue Primary</Button>\n\n      <Theme\n        primaryH=\"120\"\n        primaryS=\"70%\"\n        primaryL=\"40%\"\n        p=\"3\"\n        mt=\"4\"\n        backgroundColor=\"light\"\n      >\n        <Title size=\"4\">Inner Theme (Green)</Title>\n        <Button color=\"primary\">Green Primary</Button>\n      </Theme>\n\n      <Button color=\"primary\" mt=\"3\">\n        Blue Primary Again\n      </Button>\n    </Theme>\n  );\n}\n```\n\n### Theme with ConfigProvider\n\n```tsx\nfunction PrefixedTheme() {\n  return (\n    <ConfigProvider classPrefix=\"bestax-\">\n      <Theme primaryH=\"300\" primaryS=\"80%\" primaryL=\"50%\" isRoot>\n        <Button color=\"primary\">Prefixed & Themed Button</Button>\n      </Theme>\n    </ConfigProvider>\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\n### CSS Variable Naming\n\n- All Bulma CSS variables follow the `--bulma-*` naming convention\n- Use the `bulmaVars` prop when you need to set variables not covered by individual props\n- Individual props (like `primaryH`) are converted to their corresponding CSS variable names\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., `<Section bgColor=\"scheme-main-bis\">`) 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- Use `isRoot={true}` sparingly to avoid CSS specificity issues\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### Prop to CSS Variable Conversion\n\nThe Theme component automatically converts camelCase prop names to their corresponding CSS custom property names using the following pattern:\n\n```\npropName → --bulma-prop-name\n```\n\n**Examples:**\n\n- `primaryH` → `--bulma-primary-h`\n- `schemeS` → `--bulma-scheme-s`\n- `lightL` → `--bulma-light-l`\n- `hoverBackgroundLDelta` → `--bulma-hover-background-l-delta`\n- `cardContentPadding` → `--bestax-card-content-padding`\n\n### Prop vs bulmaVars\n\nYou can use CSS variables in two ways:\n\n1. **Individual Props** (recommended for commonly used variables):\n\n   ```tsx\n   <Theme primaryH=\"270\" primaryS=\"100%\" primaryL=\"50%\" />\n   ```\n\n2. **bulmaVars Object** (for less common variables or when you have many variables):\n\n   ```tsx\n   <Theme\n     bulmaVars={{\n       '--bulma-primary-h': '270',\n       '--bulma-primary-s': '100%',\n       '--bulma-primary-l': '50%',\n       '--bestax-card-content-padding': '2rem',\n     }}\n   />\n   ```\n\n3. **Combined** (props take precedence over bulmaVars):\n   ```tsx\n   <Theme\n     primaryH=\"270\" // This takes precedence\n     bulmaVars={{\n       '--bulma-primary-h': '180', // This is overridden\n       '--bestax-card-content-padding': '2rem',\n     }}\n   />\n   ```\n\n### All Supported Props\n\nThe Theme component supports props for all 500+ Bulma CSS variables. Here's the complete list organized by category:\n\n**Scheme & Base Color Props:**\n\n- `schemeH`, `schemeS`, `lightL`, `lightInvertL`, `darkL`, `darkInvertL`\n- `softL`, `boldL`, `softInvertL`, `boldInvertL`\n- `hoverBackgroundLDelta`, `activeBackgroundLDelta`, `hoverBorderLDelta`, `activeBorderLDelta`\n- `hoverColorLDelta`, `activeColorLDelta`, `hoverShadowADelta`, `activeShadowADelta`\n\n**Color Props:**\n\n- `primaryH`, `primaryS`, `primaryL`, `linkH`, `linkS`, `linkL`\n- `infoH`, `infoS`, `infoL`, `successH`, `successS`, `successL`\n- `warningH`, `warningS`, `warningL`, `dangerH`, `dangerS`, `dangerL`\n\n**Typography Props:**\n\n- `familyPrimary`, `familySecondary`, `familyCode`\n- `sizeSmall`, `sizeNormal`, `sizeMedium`, `sizeLarge`\n- `weightLight`, `weightNormal`, `weightMedium`, `weightSemibold`, `weightBold`, `weightExtrabold`\n- `bodyBackgroundColor`, `bodySize`, `bodyMinWidth`, `bodyRendering`, `bodyFamily`\n- `bodyOverflowX`, `bodyOverflowY`, `bodyColor`, `bodyFontSize`, `bodyWeight`, `bodyLineHeight`\n- `codeFamily`, `codePadding`, `codeWeight`, `codeSize`, `smallFontSize`\n- `hrBackgroundColor`, `hrHeight`, `hrMargin`, `strongColor`, `strongWeight`\n- `preFontSize`, `prePadding`, `preCodeFontSize`\n\n**Layout & Spacing Props:**\n\n- `blockSpacing`, `duration`, `easing`, `speed`, `arrowColor`, `loadingColor`\n- `radiusSmall`, `radius`, `radiusMedium`, `radiusLarge`, `radiusRounded`\n- `columnGap`, `gridGap`, `gridColumnCount`, `gridColumnMin`\n- `gridCellColumnSpan`, `gridCellColumnStart`\n\n**Box Props:**\n\n- `boxBackgroundColor`, `boxColor`, `boxRadius`, `boxShadow`, `boxPadding`\n- `boxLinkHoverShadow`, `boxLinkActiveShadow`\n\n**Breadcrumb Props:**\n\n- `breadcrumbItemColor`, `breadcrumbItemHoverColor`, `breadcrumbItemActiveColor`\n- `breadcrumbItemPaddingVertical`, `breadcrumbItemPaddingHorizontal`, `breadcrumbItemSeparatorColor`\n\n**Burger Props:**\n\n- `burgerH`, `burgerS`, `burgerL`, `burgerBorderRadius`, `burgerGap`\n- `burgerItemHeight`, `burgerItemWidth`\n\n**Card Props:**\n\n- `cardColor`, `cardBackgroundColor`, `cardShadow`, `cardRadius`\n- `cardHeaderBackgroundColor`, `cardHeaderColor`, `cardHeaderPadding`\n- `cardHeaderShadow`, `cardHeaderWeight`, `cardContentBackgroundColor`\n- `cardContentPadding`, `cardFooterBackgroundColor`, `cardFooterBorderTop`\n- `cardFooterPadding`, `cardMediaMargin`\n\n**Content Props:**\n\n- `contentHeadingColor`, `contentHeadingWeight`, `contentHeadingLineHeight`\n- `contentBlockMarginBottom`, `contentBlockquoteBackgroundColor`, `contentBlockquoteBorderLeft`\n- `contentBlockquotePadding`, `contentPrePadding`, `contentTableCellBorder`\n- `contentTableCellBorderWidth`, `contentTableCellPadding`, `contentTableCellHeadingColor`\n- `contentTableHeadCellBorderWidth`, `contentTableHeadCellColor`\n- `contentTableBodyLastRowCellBorderBottomWidth`, `contentTableFootCellBorderWidth`\n- `contentTableFootCellColor`\n\n**Control Props:**\n\n- `controlRadius`, `controlRadiusSmall`, `controlBorderWidth`, `controlHeight`\n- `controlLineHeight`, `controlPaddingVertical`, `controlPaddingHorizontal`\n- `controlSize`, `controlFocusShadowL`\n\n**Delete Props:**\n\n- `deleteDimensions`, `deleteBackgroundL`, `deleteBackgroundAlpha`, `deleteColor`\n\n**Dropdown Props:**\n\n- `dropdownMenuMinWidth`, `dropdownContentBackgroundColor`, `dropdownContentOffset`\n- `dropdownContentPaddingBottom`, `dropdownContentPaddingTop`, `dropdownContentRadius`\n- `dropdownContentShadow`, `dropdownContentZ`, `dropdownItemH`, `dropdownItemS`\n- `dropdownItemL`, `dropdownItemBackgroundL`, `dropdownItemBackgroundLDelta`\n- `dropdownItemHoverBackgroundLDelta`, `dropdownItemActiveBackgroundLDelta`\n- `dropdownItemColorL`, `dropdownItemSelectedH`, `dropdownItemSelectedS`\n- `dropdownItemSelectedL`, `dropdownItemSelectedBackgroundL`, `dropdownItemSelectedColorL`\n- `dropdownDividerBackgroundColor`\n\n**File Props:**\n\n- `fileRadius`, `fileNameBorderColor`, `fileNameBorderStyle`, `fileNameBorderWidth`\n- `fileNameMaxWidth`, `fileH`, `fileS`, `fileBackgroundL`, `fileBackgroundLDelta`\n- `fileHoverBackgroundLDelta`, `fileActiveBackgroundLDelta`, `fileBorderL`\n- `fileBorderLDelta`, `fileHoverBorderLDelta`, `fileActiveBorderLDelta`\n- `fileCtaColorL`, `fileNameColorL`, `fileColorLDelta`, `fileHoverColorLDelta`\n- `fileActiveColorLDelta`\n\n**Footer Props:**\n\n- `footerBackgroundColor`, `footerColor`, `footerPadding`\n\n**Hero Props:**\n\n- `heroBodyPadding`, `heroBodyPaddingTablet`, `heroBodyPaddingSmall`\n- `heroBodyPaddingMedium`, `heroBodyPaddingLarge`\n\n**Icon Props:**\n\n- `iconDimensions`, `iconDimensionsSmall`, `iconDimensionsMedium`\n- `iconDimensionsLarge`, `iconTextSpacing`\n\n**Input Props:**\n\n- `inputH`, `inputS`, `inputL`, `inputBorderStyle`, `inputBorderL`\n- `inputBorderLDelta`, `inputHoverBorderLDelta`, `inputActiveBorderLDelta`\n- `inputFocusH`, `inputFocusS`, `inputFocusL`, `inputFocusShadowSize`\n- `inputFocusShadowAlpha`, `inputColorL`, `inputBackgroundL`, `inputBackgroundLDelta`\n- `inputHeight`, `inputShadow`, `inputPlaceholderColor`, `inputDisabledColor`\n- `inputDisabledBackgroundColor`, `inputDisabledBorderColor`, `inputDisabledPlaceholderColor`\n- `inputArrow`, `inputIconColor`, `inputIconHoverColor`, `inputIconFocusColor`, `inputRadius`\n\n**Media Props:**\n\n- `mediaBorderColor`, `mediaBorderSize`, `mediaSpacing`, `mediaSpacingLarge`\n- `mediaContentSpacing`, `mediaLevel1Spacing`, `mediaLevel1ContentSpacing`, `mediaLevel2Spacing`\n\n**Menu Props:**\n\n- `menuItemH`, `menuItemS`, `menuItemL`, `menuItemBackgroundL`, `menuItemBackgroundLDelta`\n- `menuItemHoverBackgroundLDelta`, `menuItemActiveBackgroundLDelta`, `menuItemColorL`\n- `menuItemRadius`, `menuItemSelectedH`, `menuItemSelectedS`, `menuItemSelectedL`\n- `menuItemSelectedBackgroundL`, `menuItemSelectedColorL`, `menuListBorderLeft`\n- `menuListLineHeight`, `menuListLinkPadding`, `menuNestedListMargin`\n- `menuNestedListPaddingLeft`, `menuLabelColor`, `menuLabelFontSize`\n- `menuLabelLetterSpacing`, `menuLabelSpacing`\n\n**Message Props:**\n\n- `messageH`, `messageS`, `messageBackgroundL`, `messageBorderL`, `messageBorderLDelta`\n- `messageBorderStyle`, `messageBorderWidth`, `messageColorL`, `messageRadius`\n- `messageHeaderWeight`, `messageHeaderPadding`, `messageHeaderRadius`\n- `messageHeaderBodyBorderWidth`, `messageHeaderBackgroundL`, `messageHeaderColorL`\n- `messageBodyBorderWidth`, `messageBodyColor`, `messageBodyPadding`\n- `messageBodyRadius`, `messageBodyPreCodeBackgroundColor`\n\n**Modal Props:**\n\n- `modalZ`, `modalBackgroundBackgroundColor`, `modalContentWidth`, `modalContentMarginMobile`\n- `modalContentSpacingMobile`, `modalContentSpacingTablet`, `modalCloseDimensions`\n- `modalCloseRight`, `modalCloseTop`, `modalCardSpacing`, `modalCardHeadBackgroundColor`\n- `modalCardHeadPadding`, `modalCardHeadRadius`, `modalCardTitleColor`\n- `modalCardTitleLineHeight`, `modalCardTitleSize`, `modalCardFootBackgroundColor`\n- `modalCardFootRadius`, `modalCardBodyBackgroundColor`, `modalCardBodyPadding`\n\n**Navbar Props:**\n\n- `navbarH`, `navbarS`, `navbarL`, `navbarBackgroundColor`, `navbarBoxShadowSize`\n- `navbarBoxShadowColor`, `navbarPaddingVertical`, `navbarPaddingHorizontal`\n- `navbarZ`, `navbarFixedZ`, `navbarItemBackgroundA`, `navbarItemBackgroundL`\n- `navbarItemBackgroundLDelta`, `navbarItemHoverBackgroundLDelta`, `navbarItemActiveBackgroundLDelta`\n- `navbarItemColorL`, `navbarItemSelectedH`, `navbarItemSelectedS`, `navbarItemSelectedL`\n- `navbarItemSelectedBackgroundL`, `navbarItemSelectedColorL`, `navbarItemImgMaxHeight`\n- `navbarBurgerColor`, `navbarTabHoverBackgroundColor`, `navbarTabHoverBorderBottomColor`\n- `navbarTabActiveColor`, `navbarTabActiveBackgroundColor`, `navbarTabActiveBorderBottomColor`\n- `navbarTabActiveBorderBottomStyle`, `navbarTabActiveBorderBottomWidth`\n- `navbarDropdownBackgroundColor`, `navbarDropdownBorderL`, `navbarDropdownBorderColor`\n- `navbarDropdownBorderStyle`, `navbarDropdownBorderWidth`, `navbarDropdownOffset`\n- `navbarDropdownArrow`, `navbarDropdownRadius`, `navbarDropdownZ`\n- `navbarDropdownBoxedRadius`, `navbarDropdownBoxedShadow`, `navbarDropdownItemH`\n- `navbarDropdownItemS`, `navbarDropdownItemL`, `navbarDropdownItemBackgroundL`\n- `navbarDropdownItemColorL`, `navbarDividerBackgroundL`, `navbarDividerHeight`\n- `navbarBottomBoxShadowSize`\n\n**Notification Props:**\n\n- `notificationH`, `notificationS`, `notificationBackgroundL`, `notificationColorL`\n- `notificationCodeBackgroundColor`, `notificationRadius`, `notificationPadding`\n\n**Pagination Props:**\n\n- `paginationMargin`, `paginationMinWidth`, `paginationItemH`, `paginationItemS`\n- `paginationItemL`, `paginationItemBackgroundLDelta`, `paginationItemHoverBackgroundLDelta`\n- `paginationItemActiveBackgroundLDelta`, `paginationItemBorderStyle`, `paginationItemBorderWidth`\n- `paginationItemBorderL`, `paginationItemBorderLDelta`, `paginationItemHoverBorderLDelta`\n- `paginationItemActiveBorderLDelta`, `paginationItemFocusBorderLDelta`, `paginationItemColorL`\n- `paginationItemFontSize`, `paginationItemMargin`, `paginationItemPaddingLeft`\n- `paginationItemPaddingRight`, `paginationItemOuterShadowH`, `paginationItemOuterShadowS`\n- `paginationItemOuterShadowL`, `paginationItemOuterShadowA`, `paginationNavPaddingLeft`\n- `paginationNavPaddingRight`, `paginationDisabledColor`, `paginationDisabledBackgroundColor`\n- `paginationDisabledBorderColor`, `paginationCurrentColor`, `paginationCurrentBackgroundColor`\n- `paginationCurrentBorderColor`, `paginationEllipsisColor`, `paginationShadowInset`\n- `paginationSelectedItemH`, `paginationSelectedItemS`, `paginationSelectedItemL`\n- `paginationSelectedItemBackgroundL`, `paginationSelectedItemBorderL`, `paginationSelectedItemColorL`\n\n**Panel Props:**\n\n- `panelMargin`, `panelItemBorder`, `panelRadius`, `panelShadow`, `panelHeadingLineHeight`\n- `panelHeadingPadding`, `panelHeadingRadius`, `panelHeadingSize`, `panelHeadingWeight`\n- `panelTabsFontSize`, `panelTabBorderBottomColor`, `panelTabBorderBottomStyle`\n- `panelTabBorderBottomWidth`, `panelTabActiveColor`, `panelListItemColor`\n- `panelListItemHoverColor`, `panelBlockColor`, `panelBlockHoverBackgroundColor`\n- `panelBlockActiveBorderLeftColor`, `panelBlockActiveColor`, `panelBlockActiveIconColor`\n- `panelIconColor`\n\n**Progress Props:**\n\n- `progressBorderRadius`, `progressBarBackgroundColor`, `progressValueBackgroundColor`\n- `progressIndeterminateDuration`\n\n**Section Props:**\n\n- `sectionPadding`, `sectionPaddingDesktop`, `sectionPaddingMedium`, `sectionPaddingLarge`\n\n**Skeleton Props:**\n\n- `skeletonBackground`, `skeletonRadius`, `skeletonBlockMinHeight`, `skeletonLinesGap`\n- `skeletonLineHeight`\n\n**Table Props:**\n\n- `tableColor`, `tableBackgroundColor`, `tableCellBorderColor`, `tableCellBorderStyle`\n- `tableCellBorderWidth`, `tableCellPadding`, `tableCellHeadingColor`, `tableCellTextAlign`\n- `tableHeadCellBorderWidth`, `tableHeadCellColor`, `tableFootCellBorderWidth`\n- `tableFootCellColor`, `tableHeadBackgroundColor`, `tableBodyBackgroundColor`\n- `tableFootBackgroundColor`, `tableRowHoverBackgroundColor`, `tableRowActiveBackgroundColor`\n- `tableRowActiveColor`, `tableStripedRowEvenBackgroundColor`, `tableStripedRowEvenHoverBackgroundColor`\n\n**Tabs Props:**\n\n- `tabsBorderBottomColor`, `tabsBorderBottomStyle`, `tabsBorderBottomWidth`\n- `tabsLinkColor`, `tabsLinkHoverBorderBottomColor`, `tabsLinkHoverColor`\n- `tabsLinkActiveBorderBottomColor`, `tabsLinkActiveColor`, `tabsLinkPadding`\n- `tabsBoxedLinkRadius`, `tabsBoxedLinkHoverBackgroundColor`, `tabsBoxedLinkHoverBorderBottomColor`\n- `tabsBoxedLinkActiveBackgroundColor`, `tabsBoxedLinkActiveBorderColor`\n- `tabsBoxedLinkActiveBorderBottomColor`, `tabsToggleLinkBorderColor`, `tabsToggleLinkBorderStyle`\n- `tabsToggleLinkBorderWidth`, `tabsToggleLinkHoverBackgroundColor`, `tabsToggleLinkHoverBorderColor`\n- `tabsToggleLinkRadius`, `tabsToggleLinkActiveBackgroundColor`, `tabsToggleLinkActiveBorderColor`\n- `tabsToggleLinkActiveColor`\n\n**Tag Props:**\n\n- `tagH`, `tagS`, `tagBackgroundL`, `tagBackgroundLDelta`, `tagHoverBackgroundLDelta`\n- `tagActiveBackgroundLDelta`, `tagColorL`, `tagRadius`, `tagDeleteMargin`\n\n**Title & Subtitle Props:**\n\n- `titleColor`, `titleFamily`, `titleSize`, `titleWeight`, `titleLineHeight`\n- `titleStrongColor`, `titleStrongWeight`, `titleSubSize`, `titleSupSize`\n- `subtitleColor`, `subtitleFamily`, `subtitleSize`, `subtitleWeight`\n- `subtitleLineHeight`, `subtitleStrongColor`, `subtitleStrongWeight`\n\n### TypeScript Support\n\nAll props are fully typed in TypeScript. Use IDE autocomplete to discover available props:\n\n```tsx\n// TypeScript will provide autocomplete for all available props\n<Theme\n  primaryH=\"270\"\n  cardContent={/* TypeScript autocomplete will show all card-related props */}\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.                                                                                                                          |\n| `colorMode` | `'light' \\| 'dark' \\| 'system'` | Sets Bulma's light/dark scheme by writing the `data-theme` attribute on `<html>`. 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` | `Record<string, string>`        | Object containing CSS custom properties as key-value pairs (e.g., `{'--bulma-primary-h': '210'}`).                                                                                                                                                        |\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\nThe Theme component supports all 500+ Bulma CSS variables through the `bulmaVars` prop and individual props:\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- `--bestax-box-background-color`, `--bestax-box-color`, `--bestax-box-radius`, `--bestax-box-shadow`\n- `--bestax-box-padding`, `--bestax-box-link-hover-shadow`, `--bestax-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- `--bestax-card-color`, `--bestax-card-background-color`, `--bestax-card-shadow`, `--bestax-card-radius`\n- `--bestax-card-header-background-color`, `--bestax-card-header-color`, `--bestax-card-header-padding`\n- `--bestax-card-header-shadow`, `--bestax-card-header-weight`\n- `--bestax-card-content-background-color`, `--bestax-card-content-padding`\n- `--bestax-card-footer-background-color`, `--bestax-card-footer-border-top`, `--bestax-card-footer-padding`\n- `--bestax-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- `--bestax-notification-h`, `--bestax-notification-s`, `--bestax-notification-background-l`\n- `--bestax-notification-color-l`, `--bestax-notification-code-background-color`\n- `--bestax-notification-radius`, `--bestax-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- `--bestax-title-color`, `--bestax-title-family`, `--bestax-title-size`, `--bestax-title-weight`\n- `--bestax-title-line-height`, `--bestax-title-strong-color`, `--bestax-title-strong-weight`\n- `--bestax-title-sub-size`, `--bestax-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": []
 }

package/data/components/TimeInput.json

@@ -722,6 +722,90 @@
     }
   ],
   "cssVars": [
+    {
+      "css": "--bulma-timeinput-wheel-width",
+      "sass": "$timeinput-wheel-width",
+      "default": "3rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-item-height",
+      "sass": "$timeinput-wheel-item-height",
+      "default": "2rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-gap",
+      "sass": "$timeinput-wheel-gap",
+      "default": "0.4rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-bg",
+      "sass": "$timeinput-wheel-bg",
+      "default": "var(--bulma-scheme-main)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-color",
+      "sass": "$timeinput-wheel-color",
+      "default": "var(--bulma-text)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-dim-color",
+      "sass": "$timeinput-wheel-dim-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-hover-bg",
+      "sass": "$timeinput-wheel-hover-bg",
+      "default": "hsla(0, 0%, 50%, 0.13)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-selected-bg",
+      "sass": "$timeinput-wheel-selected-bg",
+      "default": "var(--bulma-primary)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-selected-color",
+      "sass": "$timeinput-wheel-selected-color",
+      "default": "var(--bulma-primary-invert)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-radius",
+      "sass": "$timeinput-wheel-radius",
+      "default": "var(--bulma-radius)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-wheel-mask",
+      "sass": "$timeinput-wheel-mask",
+      "default": "linear-gradient(180deg, transparent 0, black 18%, black 82%, transparent 100%)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-separator-color",
+      "sass": "$timeinput-separator-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-separator-size",
+      "sass": "$timeinput-separator-size",
+      "default": "var(--bulma-size-5)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-timeinput-footer-padding",
+      "sass": "$timeinput-footer-padding",
+      "default": "0.5rem 0 0",
+      "scope": "element"
+    },
     {
       "css": "--bulma-input-h",
       "sass": "$input-h",

package/data/skills/bestax-icons/references/icon-libraries.md

@@ -52,12 +52,11 @@ Set it once on `ConfigProvider` and omit `library` everywhere else.
     type="module"
     src="https://unpkg.com/ionicons@8.0.13/dist/ionicons/ionicons.esm.js"
   ></script>
-  <script
-    nomodule
-    src="https://unpkg.com/ionicons@8.0.13/dist/ionicons/ionicons.js"
-  ></script>
   ```
 
+  Ionicons v8 is ESM-only — there is no legacy `nomodule` bundle, so a single
+  `type="module"` tag is all that is needed.
+
 - **Scaffold flag:** `--icon ionicons` — which maps to `iconLibrary="ion"`. Passing
   `'ionicons'` as the `library`/`iconLibrary` value renders nothing.
 - **Names:** kebab-case: `rocket`, `heart`, `settings`.

package/data/skills/bestax-layout-scaffold/SKILL.md

@@ -99,10 +99,10 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
   and `.box` re-declare `--bulma-card-shadow`/`--bulma-box-shadow` from `--bulma-shadow` on
   their own selector, so setting _those_ from an ancestor never wins (same for
   `--bulma-box-radius`; `--bulma-card-radius` is a literal with no ancestor route at all).
-  It has to be a CSS rule rather than `<Theme bulmaVars={{ '--bulma-shadow': … }}>`, because
-  `bulmaVars` is a closed typed record and `--bulma-shadow` is not one of its keys — that
-  exact call **does not compile**, and it was the single most repeated invention across this
-  library's cold-start evals. Either way the subtree stays theme- and dark-mode-aware.
+  A class-scoped CSS rule keeps the ring on just the one featured card without wrapping it in
+  its own `Theme`; `<Theme bulmaVars={{ '--bulma-shadow': … }}>` also compiles and is the
+  better fit when the override already applies to a whole scoped subtree. Either way the
+  subtree stays theme- and dark-mode-aware.
 
 - **CTAs on a colored hero must stay legible in both schemes.** On a fixed-color surface
   (`Hero color="primary"`, a dark banner), use **filled** buttons — `color="light"` or
@@ -194,7 +194,7 @@ inline `style`.
       every other `Section` — never band CSS, never `bgColor="light"`/`"white"`.
 - [ ] Decorative CSS ≤10 lines total incl. comments — no file-header comment (hero wash +
       featured-card ring), `--bulma-*`-derived; no resets — Bulma ships one.
-      The ring sets `--bulma-shadow` in a CSS rule; `Theme bulmaVars` has no such key.
+      The ring sets `--bulma-shadow` (via a scoped CSS rule or `Theme bulmaVars`).
 - [ ] Set the icon library once via `<ConfigProvider iconLibrary="…">` at the root.
 - [ ] Site built? ~800 KB raw / ~82 KB gzip CSS is the expected default-flavor size — to shrink
       it, run the `bestax-optimize` skill (measure first).

package/data/skills/bestax-migrate/references/component-map.md

@@ -6,40 +6,40 @@ codemod converts it; **Flagged** = it leaves a `TODO(bestax-migrate)` comment (s
 
 ## Top-level components
 
-| RBC            | bestax                                       | Notes                                                                                 |
-| -------------- | -------------------------------------------- | ------------------------------------------------------------------------------------- |
-| `Block`        | `Block`                                      | Auto                                                                                  |
-| `Box`          | `Box`                                        | Auto                                                                                  |
-| `Breadcrumb`   | `Breadcrumb`                                 | Auto; `align` → `alignment` (`center`→`centered`)                                     |
-| `Button`       | `Button`                                     | Auto; `<Button remove/>` → `<Delete/>`; see prop map                                  |
-| `Card`         | `Card`                                       | Auto                                                                                  |
-| `Columns`      | `Columns`                                    | Auto; `breakpoint="mobile"`→`isMobile`, `multiline`→`isMultiline`, …                  |
-| `Container`    | `Container`                                  | Auto; `breakpoint="fluid"`→`fluid`, `max`→`isMax`                                     |
-| `Content`      | `Content`                                    | Auto                                                                                  |
-| `Dropdown`     | `Dropdown`                                   | Structure auto; controlled `value`/`onChange` flagged                                 |
-| `Element`      | —                                            | Flagged: no generic element; use a semantic component + helper props                  |
-| `Footer`       | `Footer`                                     | Auto                                                                                  |
-| `Form.*`       | flat imports                                 | See Form table below                                                                  |
-| `Heading`      | `Title` / `SubTitle` / `<p class="heading">` | Auto; `subtitle` picks `SubTitle`, `heading` picks the plain element                  |
-| `Hero`         | `Hero`                                       | Auto; `hasNavbar`→`fullheightWithNavbar`; `halfheight`/`gradient` flagged             |
-| `Icon`         | `Icon`                                       | `<i class="fas fa-x">` children → `name`/`library`/`variant` props; else flagged      |
-| `Image`        | `Image`                                      | Auto; numeric `size={128}` → `size="128x128"`, `rounded`→`isRounded`                  |
-| `Level`        | `Level`                                      | Auto; `breakpoint="mobile"`→`isMobile`                                                |
-| `Loader`       | plain `<div className="loader">`             | Auto (Bulma v1 still ships the class)                                                 |
-| `Media`        | `Media`                                      | Auto                                                                                  |
-| `Menu`         | `Menu`                                       | Auto                                                                                  |
-| `Message`      | `Message`                                    | Auto; `size` flagged                                                                  |
-| `Modal`        | `Modal`                                      | `show`→`active`; `closeOnEsc`/`closeOnBlur`/`showClose` flagged (defaults cover them) |
-| `Navbar`       | `Navbar`                                     | Auto; see dropdown note below                                                         |
-| `Notification` | `Notification`                               | Auto; `light`→`isLight`                                                               |
-| `Pagination`   | `Pagination`                                 | `onChange`→`onPageChange`; `delta`/labels/`showFirstLast`/`autoHide` flagged          |
-| `Panel`        | `Panel`                                      | Auto                                                                                  |
-| `Progress`     | `Progress`                                   | Auto                                                                                  |
-| `Section`      | `Section`                                    | Auto                                                                                  |
-| `Table`        | `Table`                                      | Auto; `size="fullwidth"`→`isFullwidth`, `striped`→`isStriped`, …                      |
-| `Tabs`         | `Tabs`                                       | Auto; children wrapped in `Tabs.List`; `type="toggle-rounded"`→`toggle rounded`       |
-| `Tag`          | `Tag`                                        | Auto; `remove`→`isDelete`, `rounded`→`isRounded`                                      |
-| `Tile`         | —                                            | Flagged: Bulma v1 replaced tiles with `Grid`/`Cell`                                   |
+| RBC            | bestax                                       | Notes                                                                                                                       |
+| -------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `Block`        | `Block`                                      | Auto                                                                                                                        |
+| `Box`          | `Box`                                        | Auto                                                                                                                        |
+| `Breadcrumb`   | `Breadcrumb`                                 | Auto; `align` → `alignment` (`center`→`centered`)                                                                           |
+| `Button`       | `Button`                                     | Auto for literal `remove` (by value, not presence — truthy → `<Delete/>`, `remove={false}` stays `Button`); dynamic flagged |
+| `Card`         | `Card`                                       | Auto                                                                                                                        |
+| `Columns`      | `Columns`                                    | Auto; `breakpoint="mobile"`→`isMobile`, `multiline`→`isMultiline`, …                                                        |
+| `Container`    | `Container`                                  | Auto; `breakpoint="fluid"`→`fluid`, `max`→`isMax`                                                                           |
+| `Content`      | `Content`                                    | Auto                                                                                                                        |
+| `Dropdown`     | `Dropdown`                                   | Structure auto; controlled `value`/`onChange` flagged                                                                       |
+| `Element`      | —                                            | Flagged: no generic element; use a semantic component + helper props                                                        |
+| `Footer`       | `Footer`                                     | Auto                                                                                                                        |
+| `Form.*`       | flat imports                                 | See Form table below                                                                                                        |
+| `Heading`      | `Title` / `SubTitle` / `<p class="heading">` | Auto for literal `subtitle`/`heading` (by value, not presence — `subtitle={false}` is `Title`); dynamic value flagged       |
+| `Hero`         | `Hero`                                       | Auto; `hasNavbar`→`fullheightWithNavbar`; `halfheight`/`gradient` flagged                                                   |
+| `Icon`         | `Icon`                                       | `<i class="fas fa-x">` children → `name`/`library`/`variant` props; else flagged                                            |
+| `Image`        | `Image`                                      | Auto; numeric `size={128}` → `size="128x128"`, `rounded`→`isRounded`                                                        |
+| `Level`        | `Level`                                      | Auto; `breakpoint="mobile"`→`isMobile`                                                                                      |
+| `Loader`       | plain `<div className="loader">`             | Auto (Bulma v1 still ships the class)                                                                                       |
+| `Media`        | `Media`                                      | Auto                                                                                                                        |
+| `Menu`         | `Menu`                                       | Auto                                                                                                                        |
+| `Message`      | `Message`                                    | Auto; `size` flagged                                                                                                        |
+| `Modal`        | `Modal`                                      | `show`→`active`; `closeOnEsc`/`closeOnBlur`/`showClose` flagged (defaults cover them)                                       |
+| `Navbar`       | `Navbar`                                     | Auto; see dropdown note below                                                                                               |
+| `Notification` | `Notification`                               | Auto; `light`→`isLight`                                                                                                     |
+| `Pagination`   | `Pagination`                                 | `onChange`→`onPageChange`; `delta`/labels/`showFirstLast`/`autoHide` flagged                                                |
+| `Panel`        | `Panel`                                      | Auto                                                                                                                        |
+| `Progress`     | `Progress`                                   | Auto                                                                                                                        |
+| `Section`      | `Section`                                    | Auto                                                                                                                        |
+| `Table`        | `Table`                                      | Auto; `size="fullwidth"`→`isFullwidth`, `striped`→`isStriped`, …                                                            |
+| `Tabs`         | `Tabs`                                       | Auto; children wrapped in `Tabs.List`; `type="toggle-rounded"`→`toggle rounded`                                             |
+| `Tag`          | `Tag`                                        | Auto; `remove`→`isDelete`, `rounded`→`isRounded`                                                                            |
+| `Tile`         | —                                            | Flagged: Bulma v1 replaced tiles with `Grid`/`Cell`                                                                         |
 
 ## Compound sub-components
 

package/data/skills/bestax-migrate/references/css-migration.md

@@ -22,13 +22,18 @@ finish what it flagged.
 
   ```scss
   @use 'bulma/sass' with (
-      $primary: #ff6b35,
-      $family-primary: 'Nunito',
-      sans-serif
-    );
+    $primary: #ff6b35,
+    $family-primary: (
+      'Nunito',
+      sans-serif,
+    )
+  );
   @use '@allxsmith/bestax-bulma/scss/extras';
   ```
 
+  A comma-valued override (a font-family stack) is wrapped in parens so Dart Sass
+  reads it as one list value, not extra arguments to `with (…)`.
+
   0.9 `_all` aggregator imports (`bulma/sass/elements/_all`) became directory modules
   (`@use 'bulma/sass/elements';`). Relative node_modules paths
   (`@import '../../node_modules/bulma/bulma'`, common under Parcel) keep their prefix,
@@ -38,6 +43,31 @@ finish what it flagged.
   **dart-sass ≥ 1.79** — the codemod's node-sass replacement installs that, but check
   bundler-pinned older versions (Parcel's sass transformer pins 1.66).
 
+  react-bulma-components' own stylesheet — any `react-bulma-components/…` specifier,
+  bare, `~`-prefixed, or a relative `node_modules/` path, covering the documented v3
+  entry points (`src/index.sass`, `dist/react-bulma-components(.min).css`) as well as
+  deep partials and extensionless forms — is not a third-party extension; it's the
+  library being migrated away from. It targets Bulma 0.9, not the v1 your components now
+  use, and (unless `--no-deps` is passed) `package.json` no longer lists it, so the
+  import can never resolve once installed. Every `--css` mode rewrites it into a real
+  Bulma root rather than leaving a known-broken import — the **same shape the
+  `@import 'bulma/…'` root path emits**, so a file that starts from RBC and one that
+  starts from a Bulma import converge: `bestax` (default) emits
+  `@use 'bulma/sass';` (folding any leading `$var` overrides above the import into
+  `with (…)`) plus `@use '@allxsmith/bestax-bulma/scss/extras';`; `bulma` emits plain
+  `@use 'bulma/sass';`; `keep` does the same with a TODO explaining the replacement
+  (worded to match whether `--no-deps` kept the package). It deliberately does **not**
+  emit the hard-configured `scss/bestax` bundle here — that bundle can't carry the
+  user's own theme vars, and reconfiguring `bulma/sass` when another file already
+  configures it is a hard Sass error. If the file already has its own `bulma/…` root
+  (a `@use 'bulma/sass'` of its own, or a Bulma `@import` the codemod converts), the RBC
+  **root/index** line (`src/index`, the bundled `dist/*.css`, or the bare specifier) is
+  dropped instead of emitting a second root; in `bestax` mode the extras are added once
+  alongside that existing root. A dropped RBC **deep partial** (e.g.
+  `src/components/navbar.sass`) is different — `bulma/sass` doesn't necessarily carry a
+  given partial's styles, so it gets a `// TODO(bestax-migrate)` and a report entry
+  ("port any styles it carried beyond Bulma's own by hand") rather than vanishing silently.
+
 - **package.json**: `react-bulma-components` removed, `@allxsmith/bestax-bulma` added,
   `bulma` bumped to `^1.0.4` (or added when sources still import `bulma/…` directly),
   and dead `node-sass` replaced with dart `sass`. Run the package manager's install
@@ -63,6 +93,8 @@ elements,form,components,grid,layout,helpers,themes}` with leaf partials like
   compatibility. Class-based usage (`className="is-checkradio"`) keeps needing the
   extension; usage that migrated to bestax components (Radio, Checkbox, the advanced
   form controls) is already styled by the bestax extras, so the import can go.
+  react-bulma-components' own stylesheet is never flagged this way (see above) — only
+  packages actually named `bulma-*` are.
 
 ## Choosing a CSS flavor (optional)
 

package/data/skills/bestax-theming/references/css-variables.md

@@ -101,26 +101,27 @@ and numeric shades `--bulma-<c>-00` … `--bulma-<c>-95`.
 | `--bulma-size-small` / `-normal` / `-medium` / `-large`                       | 0.75 / 1 / 1.25 / 1.5rem          | via `bulmaVars` |
 | `--bulma-weight-light/normal/medium/semibold/bold/extrabold`                  | 300 / 400 / 500 / 600 / 700 / 800 | via `bulmaVars` |
 
-## Shadow — the one token `bulmaVars` cannot set
+## Shadow — override the upstream token, not the derived one
 
-`--bulma-shadow` is a real Bulma variable (`.box` and `.card` both derive
-`--bulma-box-shadow`/`--bulma-card-shadow` from it), but it is **not a key of `bulmaVars`** —
-that record is a closed union built from an explicit list, and shadow was left out. Writing
-`<Theme bulmaVars={{ '--bulma-shadow': … }}>` is a compile error, and it is the single most
-repeated invention in this library's cold-start evals: every run on every guidance channel
-tried it.
+`--bulma-shadow` (plus its `--bulma-shadow-h`/`-s`/`-l` channels) is a real Bulma variable that
+`.box`, `.card`, `.dropdown`, and `.panel` each derive their own shadow variable from
+(`--bulma-box-shadow`, `--bulma-card-shadow`, …). It **is** a key of `bulmaVars`, so `Theme` can
+set it directly:
 
-Set it in CSS instead, then apply the class to the one element that needs it:
-
-```css
-.featured-ring {
-  --bulma-shadow: 0 0 0 2px var(--bulma-primary);
-}
+```tsx
+<Theme bulmaVars={{ '--bulma-shadow': '0 0 0 2px var(--bulma-primary)' }}>
+  <Box>featured</Box>
+</Theme>
 ```
 
+There is no individual `shadow` prop for it — `shadow` already names the unrelated
+`shadowless` helper class (`shadow="shadowless"` → `is-shadowless`) — so reach it through
+`bulmaVars` as shown above.
+
 Do **not** reach for `--bulma-box-shadow`/`--bulma-card-shadow` from an ancestor instead —
-those are re-declared on `.box`/`.card` themselves, so an inherited value always loses (the
-same rule as the extras section below).
+those are re-declared on `.box`/`.card` themselves, so an inherited value always loses. Setting
+`--bulma-shadow` from an ancestor `Theme` is the one override that cascades into all of them
+(the same rule as the extras section below).
 
 ## Extras component variables
 

package/data/skills.json

@@ -43,7 +43,7 @@
         {
           "id": "icon-libraries",
           "file": "references/icon-libraries.md",
-          "bytes": 6179
+          "bytes": 6199
         }
       ],
       "examples": [
@@ -88,12 +88,12 @@
         {
           "id": "component-map",
           "file": "references/component-map.md",
-          "bytes": 11894
+          "bytes": 13190
         },
         {
           "id": "css-migration",
           "file": "references/css-migration.md",
-          "bytes": 5679
+          "bytes": 7999
         },
         { "id": "prop-map", "file": "references/prop-map.md", "bytes": 6363 },
         {
@@ -127,7 +127,7 @@
         {
           "id": "css-variables",
           "file": "references/css-variables.md",
-          "bytes": 26650
+          "bytes": 26771
         },
         {
           "id": "themeable-components",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "MCP server for @allxsmith/bestax-bulma — component props, examples, CSS variables and agent skills, served offline from a version-pinned index",
   "type": "module",
   "bin": {