/* malbox site design: Classic * * The original malbox look: indigo on slate, soft elevation, Tailwind's own neutral and severity ramps. * * Part one and two are the token contract (see _tokens.css) — every name it * declares is redeclared here for both themes. Part three is the chrome layer, * which restyles shared furniture the tokens alone cannot reach. * * Selectors are attribute-scoped rather than rooted on `:root`, so the design * applies to any subtree carrying `data-skin`, not just to . That is what * lets the admin panel render a live preview of a design it has not applied * yet. The dark block is written twice — `[data-skin=x].dark` for the document * element, `.dark [data-skin=x]` for a nested preview inside a dark page — * because a descendant combinator cannot also match the ancestor. * * The chrome layer must never set `display`, `overflow` or `visibility`: * `[data-skin] .mb-card` outranks Tailwind's `.hidden`, which is how every tab * panel in the app is hidden. It must never set `text-transform` either — six * Selenium tests read rendered text. tests/test_site_design.py enforces both. */ /* --- 1. Light theme -------------------------------------------- */ [data-skin="classic"] { --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; } /* --- 2. Dark theme --------------------------------------------- */ [data-skin="classic"].dark, .dark [data-skin="classic"] { --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; }