/* * Design tokens, read out of the owner's own design (design/Design.html, "Neon" board) and * written here by hand - the export's generated CSS is not copied (research D2). * * Two palettes for the same names: dark is the default, light applies when the page says * so. The server writes data-theme on from the mp_theme cookie, so the right * palette is in place in the first paint, with no flash (research D6). * * Everything else in the panel uses only these names, never a colour of its own. */ :root { /* Neon, dark - the default */ --color-bg: #08080d; --color-surface: #101018; --color-surface-head: #151520; --color-border: #262638; --color-border-soft: #1c1c2a; --color-text: #f3f4ff; --color-muted: #9c9cc2; --color-faint: #8586a3; --color-primary: #00e5ff; --color-primary-soft: rgba(0, 229, 255, 0.18); --color-primary-text: #04121a; --color-accent: #ff3ec8; --color-accent-soft: rgba(255, 62, 200, 0.18); --color-danger: #ff6b6b; --color-danger-bg: rgba(255, 107, 107, 0.12); --color-success: #3ddc97; --color-success-bg: rgba(61, 220, 151, 0.12); --color-focus: #00e5ff; --color-grid-dot: rgba(0, 229, 255, 0.09); --row-hover: rgba(255, 255, 255, 0.035); --pill-bg: rgba(255, 255, 255, 0.05); --shadow-panel: 0 18px 40px -22px rgba(0, 0, 0, 0.65); /* Type: the design's own scale, in rem so the reader's own font size still counts */ --font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-size-base: 0.875rem; --font-size-small: 0.8125rem; --font-size-tiny: 0.6875rem; --font-size-h1: 1.125rem; --line-height: 1.45; /* Spacing and shapes, from the design's own measurements */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --radius: 0.4375rem; --radius-panel: 0.625rem; --radius-pill: 1.25rem; --shadow: var(--shadow-panel); --content-width: 100rem; } :root[data-theme="light"] { --color-bg: #f5f7fb; --color-surface: #ffffff; --color-surface-head: #eef2fa; --color-border: #dbe3f5; --color-border-soft: #e7ecf8; --color-text: #0d0d18; --color-muted: #565a72; --color-faint: #63667b; --color-primary: #09718c; --color-primary-soft: rgba(8, 145, 178, 0.12); --color-primary-text: #ffffff; --color-accent: #c026d3; --color-accent-soft: rgba(192, 38, 211, 0.12); --color-danger: #b42318; --color-danger-bg: #fef3f2; --color-success: #067647; --color-success-bg: #ecfdf3; --color-focus: #0891b2; --color-grid-dot: rgba(8, 145, 178, 0.06); --row-hover: rgba(13, 13, 24, 0.04); --pill-bg: rgba(13, 13, 24, 0.05); --shadow-panel: 0 10px 28px -18px rgba(30, 35, 45, 0.25); } /* * The typeface is served from this server, never from a font CDN, so no request for a page * of the panel ever leaves the host (research D3; SIL Open Font License 1.1, the licence * travels with the files in public/fonts/). Until the files are installed the stack above * falls back to the system font and nothing breaks. */ @font-face { font-family: "Plus Jakarta Sans"; /* One variable file covers every weight the panel uses, which is smaller than three separate ones (60 KB against about 126 KB). */ src: url("/fonts/plus-jakarta-sans.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; }