Design SystemTheming
Design tokens live in @dr-max/ui/theme.css as a Tailwind @theme static block of CSS custom properties. Import it once in your app shell — with or without Tailwind.
What's inside
| Token group | Examples | Used as |
|---|---|---|
| Typography | --font-sans (Proxima Vara stack) | font-sans |
| Breakpoints | --breakpoint-sm: 576px, --breakpoint-md: 768px, --breakpoint-lg: 992px, --breakpoint-xl: 1200px | responsive variants |
| Semantic colors | --color-primary, --color-muted | bg-primary, text-muted |
| Palette scales | --color-green-*, --color-red-*, --color-blue-*, --color-gray-*, … | bg-green-600 |
| Elevation | --shadow-elevation-* | shadow-elevation-hard-4dp |
| Radii | --radius-* | rounded-lg |
In 0.2.1, named breakpoints, padding/margin steps 1–6, and selected radius and color tokens align with the storefront's Bootstrap utilities. For example, px-4 is 25px and rounded-lg is 14px. Library components use explicit pixel values and design-system breakpoints (360/744/1280/1920px) to preserve their sizing. Consumers needing those breakpoints can use min-[744px]: and the corresponding explicit variants.
Custom themes
An app can use the package defaults or provide its own compatible theme — components only depend on the custom properties, not on where they're defined:
@import '@dr-max/ui/theme.css';
/* Override tokens after the import */
:root {
--color-primary: var(--color-blue-600);
}
Fonts
The tokens reference the Proxima Vara font family with an adjusted Arial fallback. The font files are licensed and distributed inside Dr.Max — serve them from your app and declare the @font-face yourself.