Colors
17 semantic color tokens. Use the semantic name (bg-primary, text-foreground) — never raw hex. Light and dark are flipped via the .dark class on <html>.
--color-background
light: #ffffffdark: #0a0a0a
--color-foreground
light: #0a0a0adark: #fafafa
--color-muted
light: #f5f5f5dark: #171717
--color-muted-foreground
light: #737373dark: #a3a3a3
--color-primary
light: #0070f3dark: #3b82f6
--color-primary-foreground
light: #ffffffdark: #0a0a0a
--color-secondary
light: #f5f5f5dark: #262626
--color-secondary-foreground
light: #0a0a0adark: #fafafa
--color-destructive
light: #ef4444dark: #dc2626
--color-destructive-foreground
light: #ffffffdark: #fafafa
--color-success
light: #10b981dark: #10b981
--color-success-foreground
light: #ffffffdark: #0a0a0a
--color-warning
light: #f59e0bdark: #fbbf24
--color-warning-foreground
light: #0a0a0adark: #0a0a0a
--color-border
light: #e5e5e5dark: #262626
--color-input
light: #e5e5e5dark: #262626
--color-ring
light: #0070f3dark: #3b82f6
Usage
/* Tailwind class */
<div className="bg-primary text-primary-foreground" />
/* CSS variable */
.custom { color: var(--color-foreground); }
/* TypeScript */
import { colors } from '@yashiel/mihcm-tokens';
const value = colors.light.primary; // #0070f3