Valid value constants
Overview
The valid* tuples enumerate the core accepted values for the shared Bulma helper props — public API for building prop types and validation. Each is a readonly as const tuple, so (typeof validColors)[number] gives you the exact string-literal union. useBulmaClasses (and the per-concern hooks) silently ignore unrecognized values, and every tuple member produces a helper class except validSchemeColors, whose values instead produce the bulmaHelperStyles inline style (no class). A few props accept documented extras beyond their tuple, noted in the table below: the display* props also take 'none' (rendering the is-hidden* visibility class), and the color props also take 'inherit' and 'current' — so validate against the prop's TypeScript union, not the tuple alone, when you need the full contract.
Import
import {
validColors,
validSizes,
validViewports,
} from '@allxsmith/bestax-bulma';
All 19 constants are importable the same way.
Constants
| Constant | Values | Used by prop family |
|---|---|---|
validColors | 'primary', 'link', 'info', 'success', 'warning', 'danger', 'black' … 'white', 'light', 'dark' (17 values) | color, backgroundColor helper props. Component color modifier unions are narrower and component-specific; some validColors members ship no is-<color> CSS (deprecated, warned in dev). See each component's Props table. Scheme-aware components extend their bgColor unions with validSchemeColors (below). |
validColorShades | '00', '05' … '95', 'invert', 'light', 'dark', 'soft', 'bold', 'on-scheme' | colorShade, backgroundColorShade |
validSchemeColors | 'scheme-main', 'scheme-main-bis', 'scheme-main-ter', 'scheme-invert', 'scheme-invert-bis', 'scheme-invert-ter' | Scheme-aware bgColor/backgroundColor values. Emit no class — components render them as a dark-mode-safe inline background-color: var(--bulma-<value>) style (Bulma ships no has-background-scheme-* helpers). |
validSizes | '0'–'6', 'auto' | Spacing: m, mt, mr, mb, ml, mx, my, p, pt, … px, py |
validTextSizes | '1'–'7' | textSize (+ textSizeMobile … textSizeFullhd) |
validAlignments | 'centered', 'justified', 'left', 'right' | textAlign (+ viewport variants) |
validTextTransforms | 'capitalized', 'lowercase', 'uppercase', 'italic' | textTransform |
validTextWeights | 'light', 'normal', 'medium', 'semibold', 'bold' | textWeight |
validFontFamilies | 'sans-serif', 'monospace', 'primary', 'secondary', 'code' | fontFamily |
validDisplays | 'block', 'flex', 'inline', 'inline-block', 'inline-flex' — the display* props additionally accept 'none' | display (+ displayMobile … displayFullhd) |
validVisibilities | 'hidden', 'sr-only', 'invisible' | visibility (+ viewport variants) |
validFlexDirections | 'row', 'row-reverse', 'column', 'column-reverse' | flexDirection |
validFlexWraps | 'nowrap', 'wrap', 'wrap-reverse' | flexWrap |
validJustifyContents | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'start', 'end', 'left', 'right' | justifyContent |
validAlignContents | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch' | alignContent |
validAlignItems | 'stretch', 'flex-start', 'flex-end', 'center', 'baseline', 'start', 'end' | alignItems |
validAlignSelfs | 'auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' | alignSelf |
validFlexGrowShrink | '0'–'5' | flexGrow, flexShrink |
validViewports | 'mobile', 'tablet', 'desktop', 'widescreen', 'fullhd' | viewport (responsive modifier) |
Typing with (typeof …)[number]
Because the arrays are as const, indexing them with number yields the union of their literal values — the same idiom the library uses internally for its prop types:
import { validColors, validSizes } from '@allxsmith/bestax-bulma';
type Color = (typeof validColors)[number]; // 'primary' | 'link' | … | 'dark'
type Spacing = (typeof validSizes)[number]; // '0' | '1' | … | '6' | 'auto'
interface MyComponentProps {
color?: Color;
m?: Spacing;
}
They also work as runtime validators:
function isColor(value: string): value is (typeof validColors)[number] {
return (validColors as readonly string[]).includes(value);
}
validSizes is for spacing, not element sizesvalidSizes ('0'–'6' | 'auto') enumerates the spacing helper scale — the values for m/p props like m="4" (→ m-4). Element size props are a different axis: Button, Icon, and friends declare an inline union such as 'small' | 'medium' | 'large' (Button adds 'normal'), not validSizes. Don't use validSizes to type a component's size prop.
See Also
useBulmaClasses: The hook that consumes these values and generates the helper classes.- Helper guides: Task-oriented walkthroughs of the helper-prop system (color, spacing, typography, flex, visibility).