Foundations
Colors
Component colors come from --ml-* design tokens. The utility stylesheet adds bg-* and color-* classes for every palette shade.
Design tokens
Used by every shared component. Override them in :root to re-theme.
--ml-primary--ml-secondary--ml-accent--ml-muted--ml-muted-foreground--ml-border--ml-ring--ml-danger--ml-success--ml-warning--ml-infoUtility palette
Apply with bg-{name} for backgrounds and color-{name} for text, e.g. bg-blue-2 or color-red-4. Shades run from 1 (lightest) to 5 (darkest).
green
orange
gray
red
blue
yellow
violet
<div class="bg-blue-1 color-blue-5">Light background, dark text</div>
<span class="color-red-3">Error text</span>Semantic utilities
Status colors, available as bg-* and color-* classes.
bg-success
bg-danger
bg-info
bg-warning
bg-secondary