/* malbox design tokens — the contract every site design implements. * * WHY THIS EXISTS * --------------- * The templates are written in Tailwind utilities: `bg-gray-800`, * `text-indigo-500`, `rounded-lg`, `shadow-xl`. Rather than rewrite ~1650 of * those per design, the Tailwind config in templates/_theme_head.html points * its colour, radius, shadow and font scales at the custom properties below. * A design is therefore a set of *values*, not a set of templates, and every * page in the app re-skins itself with no markup change. * * Colours are stored as space-separated sRGB channels ("15 23 42"), not hex, * because the config wraps them as `rgb(var(--mb-x) / )`. That is * what keeps Tailwind's opacity modifiers composing — `bg-gray-800/50`, * `border-white/10` and `bg-indigo-900/20` are all used in the templates and * would break against a hex value. * * THE RAMPS * --------- * Ten shades (50..900) for each of eleven families. What each family *means* * here is fixed, because the templates already use them that way: * * gray page ground and card surfaces (50 = page/light, 900 = page/dark, * 800 = card/dark, 700 = rules/dark) * slate body text and muted text (900/600/500 light, 200/400 dark) * indigo the accent: links, primary buttons, active tabs, focus rings * red critical severity orange high severity * amber warning severity yellow a second warning tone * green success / clean blue informational * sky low severity pink decoration (the nav's beta badge) * * pink earns its place for one reason: it is the only decorative family that * appears on every single page, so leaving it at stock Tailwind put a hot * magenta pill next to Nullspace's phosphor green. rose, violet, emerald, cyan * and teal are deliberately NOT tokenised — ~11 uses between them, none of them * on a page you look at twice — and keep their stock values in every design. * * WHAT A DESIGN MUST DECLARE * -------------------------- * Every COLOUR for both themes: the 110 ramp values plus --mb-white, * --mb-black and --mb-accent-fg. Both themes are required even when the values * are identical, because the templates read the two ends of a ramp disjointly * (`bg-gray-50` only ever applies in light, `dark:bg-gray-900` only in dark) — * there is no single ramp that serves both. * * The STRUCTURAL tokens — --mb-shell, the radii, the shadows, the fonts — are * declared once. They belong to the design, not to the lighting: a radius that * changed when the sun icon was clicked would be a bug. A design that wants its * elevation to react to the theme gets that for free by building the shadow out * of a colour token (Nullspace's rings are `rgb(var(--mb-gray-700))`, which is * already per-theme). * * --mb-accent-fg is what goes ON the accent. It is a token rather than the * `text-white` in the markup because two designs have a light accent — Nullspace's * phosphor green and Cobalt's Nord frost — where white text fails contrast. * * SCOPING * ------- * Selectors are attribute-scoped: `[data-skin="x"]`, never `:root[data-skin="x"]`. * A design therefore applies to any subtree carrying the attribute, which is what * lets Admin -> Settings preview a design the page itself is not using. The dark * block is consequently written twice — `[data-skin="x"].dark` for , and * `.dark [data-skin="x"]` for a nested preview inside a dark page — because a * descendant combinator cannot also match the ancestor. * * tests/test_site_design.py parses this file for the `--mb-*` names and fails any * design that does not declare the complete set. Adding a token here means adding * it to all six design files. * * The values below are Classic — the original malbox palette, which is also the * fallback for any design that fails to load. */ :root { --mb-slate-50: 248 250 252; --mb-slate-100: 241 245 249; --mb-slate-200: 226 232 240; --mb-slate-300: 203 213 225; --mb-slate-400: 148 163 184; --mb-slate-500: 100 116 139; --mb-slate-600: 71 85 105; --mb-slate-700: 51 65 85; --mb-slate-800: 30 41 59; --mb-slate-900: 15 23 42; --mb-gray-50: 249 250 251; --mb-gray-100: 243 244 246; --mb-gray-200: 229 231 235; --mb-gray-300: 209 213 219; --mb-gray-400: 156 163 175; --mb-gray-500: 107 114 128; --mb-gray-600: 75 85 99; --mb-gray-700: 51 65 85; --mb-gray-800: 30 41 59; --mb-gray-900: 15 23 42; --mb-indigo-50: 238 242 255; --mb-indigo-100: 224 231 255; --mb-indigo-200: 199 210 254; --mb-indigo-300: 165 180 252; --mb-indigo-400: 129 140 248; --mb-indigo-500: 99 102 241; --mb-indigo-600: 79 70 229; --mb-indigo-700: 67 56 202; --mb-indigo-800: 55 48 163; --mb-indigo-900: 49 46 129; --mb-red-50: 254 242 242; --mb-red-100: 254 226 226; --mb-red-200: 254 202 202; --mb-red-300: 252 165 165; --mb-red-400: 248 113 113; --mb-red-500: 239 68 68; --mb-red-600: 220 38 38; --mb-red-700: 185 28 28; --mb-red-800: 153 27 27; --mb-red-900: 127 29 29; --mb-orange-50: 255 247 237; --mb-orange-100: 255 237 213; --mb-orange-200: 254 215 170; --mb-orange-300: 253 186 116; --mb-orange-400: 251 146 60; --mb-orange-500: 249 115 22; --mb-orange-600: 234 88 12; --mb-orange-700: 194 65 12; --mb-orange-800: 154 52 18; --mb-orange-900: 124 45 18; --mb-amber-50: 255 251 235; --mb-amber-100: 254 243 199; --mb-amber-200: 253 230 138; --mb-amber-300: 252 211 77; --mb-amber-400: 251 191 36; --mb-amber-500: 245 158 11; --mb-amber-600: 217 119 6; --mb-amber-700: 180 83 9; --mb-amber-800: 146 64 14; --mb-amber-900: 120 53 15; --mb-yellow-50: 254 252 232; --mb-yellow-100: 254 249 195; --mb-yellow-200: 254 240 138; --mb-yellow-300: 253 224 71; --mb-yellow-400: 250 204 21; --mb-yellow-500: 234 179 8; --mb-yellow-600: 202 138 4; --mb-yellow-700: 161 98 7; --mb-yellow-800: 133 77 14; --mb-yellow-900: 113 63 18; --mb-green-50: 240 253 244; --mb-green-100: 220 252 231; --mb-green-200: 187 247 208; --mb-green-300: 134 239 172; --mb-green-400: 74 222 128; --mb-green-500: 34 197 94; --mb-green-600: 22 163 74; --mb-green-700: 21 128 61; --mb-green-800: 22 101 52; --mb-green-900: 20 83 45; --mb-blue-50: 239 246 255; --mb-blue-100: 219 234 254; --mb-blue-200: 191 219 254; --mb-blue-300: 147 197 253; --mb-blue-400: 96 165 250; --mb-blue-500: 59 130 246; --mb-blue-600: 37 99 235; --mb-blue-700: 29 78 216; --mb-blue-800: 30 64 175; --mb-blue-900: 30 58 138; --mb-sky-50: 240 249 255; --mb-sky-100: 224 242 254; --mb-sky-200: 186 230 253; --mb-sky-300: 125 211 252; --mb-sky-400: 56 189 248; --mb-sky-500: 14 165 233; --mb-sky-600: 2 132 199; --mb-sky-700: 3 105 161; --mb-sky-800: 7 89 133; --mb-sky-900: 12 74 110; --mb-pink-50: 253 242 248; --mb-pink-100: 252 231 243; --mb-pink-200: 251 207 232; --mb-pink-300: 249 168 212; --mb-pink-400: 244 114 182; --mb-pink-500: 236 72 153; --mb-pink-600: 219 39 119; --mb-pink-700: 190 24 93; --mb-pink-800: 157 23 77; --mb-pink-900: 131 24 67; --mb-white: 255 255 255; --mb-black: 0 0 0; --mb-accent-fg: 255 255 255; --mb-shell: 1536px; --mb-r: 0.25rem; --mb-r-md: 0.375rem; --mb-r-lg: 0.5rem; --mb-r-xl: 0.75rem; --mb-r-2xl: 1rem; --mb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --mb-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --mb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --mb-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --mb-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --mb-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --mb-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mb-font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --mb-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }