/* ========================================================================== MONITO DESIGN SYSTEM — TOKEN LAYER -------------------------------------------------------------------------- Drop this file into any dashboard FIRST, before your own CSS. On its own it changes nothing; it only publishes the vocabulary that monito-ds.components.css (and your own components) consume. Themes switch by setting an attribute on : / The attribute name matches Bootstrap 5.3 so Bootstrap's own dark mode flips in lockstep. Not using Bootstrap? The name is arbitrary — rename it here and in the components file, nothing else depends on it. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONT Self-hosted. Outfit is a VARIABLE font: one file covers 300–700, so this is a single @font-face with a weight RANGE, not five separate faces. Copy assets/vendor/fonts/*.woff2 alongside this file. -------------------------------------------------------------------------- */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/outfit-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/outfit-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 2. LIGHT THEME (the default) -------------------------------------------------------------------------- */ :root { /* --- Brand accent: iris --------------------------------------------- Deliberately NOT green/red/amber. The accent means "interactive" (links, buttons, focus, active nav). It never means "healthy". Keeping these two meanings apart is the single biggest reason the palette reads as coordinated. Re-tint the whole product by editing these five lines and nothing else. */ --primary-color: #5a54e0; --primary-dark: #4a44c9; /* hover / pressed */ --primary-light: #8079ff; --primary-soft: rgba(90, 84, 224, 0.08); /* tinted background */ --primary-ink: #4a44c9; /* text ON primary-soft */ /* --- Semantic status ------------------------------------------------ Every status colour ships as a TRIAD: base → 1px rails, dots, bars, legend swatches (solid fills) soft → the same hue at 11–16% alpha, for tinted backgrounds ink → the readable text/icon colour to sit ON that soft bg In LIGHT, ink is DARKER than base. In DARK, ink is LIGHTER than base. That inversion is what lets one class work in both themes. */ --up: #17b877; --up-soft: rgba(23, 184, 119, 0.12); --up-ink: #067a45; --down: #ee3b52; --down-soft: rgba(238, 59, 82, 0.11); --down-ink: #c31734; --warn: #f59e0b; --warn-soft: rgba(245, 158, 11, 0.14); --warn-ink: #a25c04; --idle: #9aa2b6; --idle-soft: rgba(148, 162, 182, 0.16); --idle-ink: #475569; /* slate-600, not -500: -500 only reaches 4.17:1 on idle-soft */ /* --- Surfaces: the elevation ladder --------------------------------- LIGHT reads as: grey page, white panels floating on it, grey insets. bg-body #f6f7f9 page (grey — never white, or panels vanish) bg-card #ffffff panels sit ABOVE the page surface-2 #eef1f7 recessed: row hover, tracks, chips, seg groups Note surface-2 is DARKER than the card here and LIGHTER in dark theme. In both it simply reads as "a different plane". */ --bg-body: #f6f7f9; --bg-card: #ffffff; --bg-sidebar: #ffffff; --bg-glass: rgba(255, 255, 255, 0.75); /* fixed top bar only */ --surface-2: #eef1f7; /* --- The hairline --------------------------------------------------- An OPAQUE colour, not rgba(0,0,0,.06). This is what makes edges crisp. See README §3 — this is the anti-blur rule. */ --hairline: #d9dde9; /* --- Text ----------------------------------------------------------- */ --text-main: #1e293b; /* headings, values, row titles */ --text-muted: #64748b; /* labels, secondary prose */ --text-light: #94a3b8; /* meta, captions, units, inactive icons */ /* --- Shadow --------------------------------------------------------- Barely-there on purpose. Shadows hint at lift; the HAIRLINE does the actual work of separating a panel from the page. */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.05); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08); /* --- Radius: semantic, not t-shirt sizes ---------------------------- */ --radius-bar: 2px; /* uptime bars, progress tracks */ --radius-xs: 5px; /* mini badges, */ --radius-sm: 8px; /* buttons, inputs, ssl chips */ --radius-md: 10px; /* icon tiles, list items, search field */ --radius-lg: 12px; /* KPI cards */ --radius-xl: 16px; /* panels: board, status strip, detail hero */ --radius-pill: 999px; /* status pills, metric chips */ /* --- Type ----------------------------------------------------------- */ --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* --- Layout ---------------------------------------------------------- */ --sidebar-width: 280px; --header-height: 80px; /* --- Motion ---------------------------------------------------------- */ --ease-row: background 0.12s ease; /* row / list hover */ --ease-ctrl: all 0.2s ease; /* buttons, nav links */ --ease-pane: transform 0.3s ease; /* drawers, sidebar */ } /* -------------------------------------------------------------------------- 3. DARK THEME Not an inversion — a re-grade. Only the values below change; every component above stays byte-identical. -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { /* Iris lightens: #5a54e0 is too dense to read on a near-black page. */ --primary-color: #8079ff; --primary-dark: #6a63f0; --primary-light: #9a94ff; --primary-soft: rgba(128, 121, 255, 0.14); --primary-ink: #a8a2ff; /* Status hues lift and desaturate slightly; ink flips to LIGHTER. */ --up: #2fd39a; --up-soft: rgba(47, 211, 154, 0.15); --up-ink: #6ee7b0; --down: #ff5b6e; --down-soft: rgba(255, 91, 110, 0.16); --down-ink: #ff97a3; --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.15); --warn-ink: #fcd66b; --idle: #59617a; --idle-soft: rgba(255, 255, 255, 0.06); --idle-ink: #9ca3b6; /* Elevation ladder, dark. Lightness now RISES with elevation: body #0a0c11 → sidebar #0e1017 → card #12141c → surface-2 #181c26 Four steps of ~4% lightness. The page is near-black, not #222 — that is what gives the theme its depth. */ --bg-body: #0a0c11; --bg-card: #12141c; --bg-sidebar: #0e1017; --bg-glass: rgba(15, 17, 24, 0.82); --surface-2: #181c26; /* Hairline stays opaque — a lifted slate, not white-at-8%. */ --hairline: #2b3444; --text-main: #eceef4; /* never pure #fff — it vibrates on near-black */ --text-muted: #9ca3b6; --text-light: #6f7789; /* Shadows must be RE-STATED for dark. Light-theme shadows are rgba(0,0,0,.04) — mathematically invisible on a #0a0c11 page. (monito's own style.css only overrides --shadow-sm and leaves md/lg at their light values; that is a real gap, fixed here.) */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6); } /* -------------------------------------------------------------------------- 4. OPTIONAL: follow the OS when the user has expressed no preference. Only active if you do NOT stamp data-bs-theme on yourself. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme]) { color-scheme: dark; } }