Base & tokens
The foundation layer: reset, theme tokens and shared primitives. Every color, radius, shadow and focus ring in the library reads the semantic tokens below — override them once and the whole system follows. Unlayered user CSS always wins the cascade.
USAGE
1:root {2 --primary: oklch(0.55 0.2 260);3 --radius: 0rem; /* whole radius scale follows */4 --mo-card-radius: 0; /* per-component hooks */5}
FILES
src/css/00-base.csssrc/css/01-theme.csssrc/css/variables.csssrc/css/animations.csssrc/css/shared.csssrc/css/utilities.csssrc/js/base.jsHOOKS BY COMPONENT
Accordion
--mo-accordion-paddingAlert
--mo-alert-padding--mo-alert-radiusAspect Ratio
--mo-aspect-ratioAttachment
--mo-attachment-gap--mo-attachment-group-gap--mo-attachment-media-radius--mo-attachment-media-size--mo-attachment-media-size-sm--mo-attachment-media-size-xs--mo-attachment-radius--mo-attachment-radius-xs--mo-attachment-width-vertical--mo-attachment-width-vertical-contentAvatar
--mo-avatar-sizeBadge
--mo-badge-padding-x--mo-badge-padding-y--mo-badge-radiusButton
--mo-button-font-size--mo-button-height--mo-button-height-large--mo-button-height-small--mo-button-height-xs--mo-button-padding-x--mo-button-padding-x-large--mo-button-padding-x-small--mo-button-padding-x-xs--mo-button-padding-y--mo-button-radiusButton Group
--mo-button-group-divider--mo-button-group-gap--mo-button-group-text-padding-xCard
--mo-card-bg--mo-card-padding--mo-card-radiusCarousel
--mo-carousel-basis--mo-carousel-dot--mo-carousel-gap--mo-carousel-gap-tight--mo-carousel-height--mo-carousel-size-lg--mo-carousel-size-smCombobox
--mo-combobox-height--mo-combobox-max-height--mo-combobox-min-width--mo-combobox-radiusCommand
--mo-command-list-height--mo-command-radius--mo-command-widthContext Menu
--mo-context-menu-min-width--mo-context-menu-outline-color--mo-context-menu-outline-width--mo-context-menu-radiusDialog
--mo-dialog-max-width--mo-dialog-radiusDropdown Menu
--mo-dropdown-min-width--mo-dropdown-radiusEmpty
--mo-empty-border-color--mo-empty-border-width--mo-empty-content-max-width--mo-empty-gap--mo-empty-header-max-width--mo-empty-media-icon-radius--mo-empty-media-icon-size--mo-empty-media-icon-svg-size--mo-empty-media-image-size--mo-empty-padding--mo-empty-padding-md--mo-empty-radiusForm
--mo-field-gap--mo-input-padding-x--mo-input-radius--mo-switch-thumb--mo-switch-widthHover Card
--mo-hover-card-radius--mo-hover-card-widthInput Group
--mo-input-group-addon-padding-x--mo-input-group-divider--mo-input-group-height--mo-input-group-radiusItem
--mo-item-gap--mo-item-group-gap--mo-item-media-icon-size--mo-item-media-image-size--mo-item-padding--mo-item-padding-sm--mo-item-radiusMenubar
--mo-menubar-gap--mo-menubar-height--mo-menubar-min-width--mo-menubar-radiusNavigation Menu
--mo-navigation-columns--mo-navigation-gap--mo-navigation-item-height--mo-navigation-item-padding-x--mo-navigation-panel-widthInput OTP
--mo-otp-cell-sizePopover
--mo-popover-radius--mo-popover-widthResizable
--mo-resizable-active--mo-resizable-hit--mo-resizable-lineScroll Area
--mo-scroll-area-height--mo-scroll-area-width--mo-scroll-fade-sizeSelect
--mo-select-height--mo-select-max-height--mo-select-min-width--mo-select-padding-x--mo-select-radiusSheet
--mo-sheet-handle-height--mo-sheet-handle-width--mo-sheet-max-block-size--mo-sheet-max-widthSlider
--mo-slider-thumb-bg--mo-slider-vertical-heightTable
--mo-table-cell-padding-x--mo-table-cell-padding-yTabs
--mo-tabs-active-bg--mo-tabs-height--mo-tabs-list-bg--mo-tabs-radius--mo-tabs-vertical-gapTag Input
--mo-taginput-paddingToast
--mo-toast-max-width--mo-toast-min-width--mo-toast-paddingToggle
--mo-toggle-bgToggle Group
--mo-toggle-group-gapTooltip
--mo-tooltip-delayTOKENS BY COMPONENT
--accent--accent-foreground--background--border--card--destructive--destructive-foreground--foreground--input--muted--muted-foreground--primary--primary-foreground--radius--ring--success--warning