/* --------------------------------------------------------------------------- Themes. The whole app is already painted in brand-* classes, so a theme is nothing more than a different set of these ten numbers. index.html points Tailwind's brand palette at these variables, which is why changing one attribute on recolours every button, tab, link, chart line and highlight at once, with no rebuild and no reload. Values are space-separated RGB channels, NOT hex — Tailwind's needs them that way, and without it every bg-brand-50/60 and ring-brand-500/20 in the app would quietly stop rendering. --page is the sheet the app sits on. It carries the faintest tint of the theme rather than a strong colour: this is a working tool that people read numbers off for an hour at a time, and a saturated background makes small grey text harder to read, not more cheerful. --------------------------------------------------------------------------- */ :root, [data-theme="indigo"] { --brand-50: 238 242 255; --brand-100: 224 231 255; --brand-200: 199 210 254; --brand-300: 165 180 252; --brand-400: 129 140 248; --brand-500: 99 102 241; --brand-600: 79 70 229; --brand-700: 67 56 202; --brand-800: 55 48 163; --brand-900: 49 46 129; --page: 248 250 252; } [data-theme="ocean"] { --brand-50: 236 254 255; --brand-100: 207 250 254; --brand-200: 165 243 252; --brand-300: 103 232 249; --brand-400: 34 211 238; --brand-500: 6 182 212; --brand-600: 8 145 178; --brand-700: 14 116 144; --brand-800: 21 94 117; --brand-900: 22 78 99; --page: 240 253 255; } [data-theme="forest"] { --brand-50: 236 253 245; --brand-100: 209 250 229; --brand-200: 167 243 208; --brand-300: 110 231 183; --brand-400: 52 211 153; --brand-500: 16 185 129; --brand-600: 5 150 105; --brand-700: 4 120 87; --brand-800: 6 95 70; --brand-900: 6 78 59; --page: 240 253 244; } [data-theme="sunset"] { --brand-50: 255 247 237; --brand-100: 255 237 213; --brand-200: 254 215 170; --brand-300: 253 186 116; --brand-400: 251 146 60; --brand-500: 249 115 22; --brand-600: 234 88 12; --brand-700: 194 65 12; --brand-800: 154 52 18; --brand-900: 124 45 18; --page: 255 251 245; } [data-theme="berry"] { --brand-50: 253 242 248; --brand-100: 252 231 243; --brand-200: 251 207 232; --brand-300: 249 168 212; --brand-400: 244 114 182; --brand-500: 236 72 153; --brand-600: 219 39 119; --brand-700: 190 24 93; --brand-800: 157 23 77; --brand-900: 131 24 67; --page: 254 246 250; } [data-theme="slate"] { --brand-50: 248 250 252; --brand-100: 241 245 249; --brand-200: 226 232 240; --brand-300: 203 213 225; --brand-400: 148 163 184; --brand-500: 100 116 139; --brand-600: 71 85 105; --brand-700: 51 65 85; --brand-800: 30 41 59; --brand-900: 15 23 42; --page: 248 250 252; } body { background-color: rgb(var(--page)); } :root { color-scheme: light; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } button, a, input, select, textarea { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .stoplight-dot { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 9999px; flex-shrink: 0; } .stoplight-green { background-color: #16a34a; } .stoplight-yellow { background-color: #eab308; } .stoplight-red { background-color: #dc2626; } .chart-tooltip { pointer-events: none; position: absolute; background: rgba(15, 23, 42, 0.92); color: white; font-size: 0.7rem; padding: 0.35rem 0.5rem; border-radius: 0.375rem; white-space: nowrap; transform: translate(-50%, -110%); z-index: 20; } ::-webkit-scrollbar { height: 8px; width: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; } ::-webkit-scrollbar-track { background: transparent; }