bestax-mcp 0.0.0

package/data/components/Theme.json

@@ -0,0 +1,65 @@
+{
+  "name": "Theme",
+  "kind": "helper",
+  "category": "helpers",
+  "slug": "helpers/theme",
+  "docsUrl": "https://bestax.io/docs/api/helpers/theme",
+  "examples": [
+    {
+      "title": "Basic Theme Customization",
+      "code": "function 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}"
+    },
+    {
+      "title": "Global Theme (Root Level)",
+      "code": "function 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}"
+    },
+    {
+      "title": "Dark Mode",
+      "code": "import { 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}"
+    },
+    {
+      "title": "Local Theme (Component Level)",
+      "code": "function 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}"
+    },
+    {
+      "title": "Using CSS Variables Object",
+      "code": "function 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}"
+    },
+    {
+      "title": "Advanced CSS Variables Usage",
+      "code": "function 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}"
+    },
+    {
+      "title": "Advanced CSS Variables Usage",
+      "code": "function 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}"
+    },
+    {
+      "title": "Advanced CSS Variables Usage",
+      "code": "function 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}"
+    },
+    {
+      "title": "Complete Color Scheme",
+      "code": "function 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}"
+    },
+    {
+      "title": "Theme with Styling",
+      "code": "function 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}"
+    },
+    {
+      "title": "Nested Themes",
+      "code": "function 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}"
+    },
+    {
+      "title": "Theme with ConfigProvider",
+      "code": "function 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}"
+    }
+  ],
+  "accessibility": null,
+  "related": [],
+  "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\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.",
+  "parts": [],
+  "cssVars": []
+}