/* * OneStop design tokens ("Refined Lode", design system 1.0, 2026-11-06; "Taupe" palette 2026-11-10) * Copyright (c) 2026 Toupin Technologies Inc. All rights reserved. * * The token layer of the whole UI. Source of truth: Source\Docs\Design system\tokens.css (the spec, Design system.md * section 2); the hex values MudBlazor needs are repeated in Client\DesignTokens.cs, kept equal by DesignTokensTests. * WHERE: linked by Components\App.razor RIGHT AFTER app.css (MudBlazor.min.css -> app.css -> tokens.css -> os.css -> * pay.css, boot.css, ... the app files). Since wave 0 step 2 app.css has no token block of its own: the legacy * names (--panel, --muted, --accent...) are the aliases of section 9, so every app wears these values. * The legacy aliases use the selector `html:root[data-theme]` (specificity 0,2,1): they beat a `:root` (0,1,0) or * `:root[data-theme="dark"]` (0,2,0) of an app file whatever the link order (signin.css's --mono, for one). * THEME: (set before first paint by App.razor, switched by ThemeState.cs). Unchanged. * DENSITY: (no attribute = default). html.wall-mode (the existing kiosk * class) = wall. Any element may carry data-density to re-scale a region (the type tokens are re-declared there). * CHART ORDER: data-chart-order="ops" on an app root (Monitoring, Alarms, Control loops, Wall...) reorders the same * 8 hues for ISA-101 screens (no brass/terra in the first slots). * RULES: apps use SEMANTIC tokens only (--os-surface, --os-text-2, --os-bad...). The raw ramps (--os-stone-*, * --os-olive-*, --os-gold-*) are for this file and boot.css; the stylelint rule `os/no-raw-ramp` warns elsewhere. * No hex in app CSS (guard test, counts may only go down). Contrast ratios in comments are WCAG 2.x, computed. */ /* ------------------------------------------------------------------------------------------------------------------ 0. Fonts. Inter (UI) is NEW: fonts\inter-latin.woff2, a pyftsubset of Inter 4 (SIL OFL), wght 400-600, Latin + U+2009, U+202F, U+2212 (French spaces, minus), features kern calt tnum case; ~40 KB. Outfit (display, KPI figures, wordmark) is the file already shipped (32 KB, has tnum). Mono = system stack, no download. Total fonts ~72 KB, both preloaded. ------------------------------------------------------------------------------------------------------------------ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/outfit-latin.woff2") format("woff2"); } /* Metric-matched fallback: the swap from Segoe UI to Inter does not move the layout */ @font-face { font-family: "Inter Fallback"; src: local("Segoe UI"), local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* ------------------------------------------------------------------------------------------------------------------ 1. Raw ramps (constant in both themes). OKLCH-built; olive 500 = today's #8D7F56, gold 400 = the logo #E0BF3F. ------------------------------------------------------------------------------------------------------------------ */ :root { /* Stone: warm neutral, hue ~85, chroma 0.002-0.011 (replaces the cool slate #1f2937 / #6b7280) */ --os-stone-0: #FFFFFF; --os-stone-25: #FDFCFB; --os-stone-50: #F8F7F5; --os-stone-100: #F2F1EE; --os-stone-150: #E8E6E2; --os-stone-200: #DCDAD5; --os-stone-300: #C4C1BB; --os-stone-400: #A19E98; --os-stone-500: #7F7B75; --os-stone-600: #65615B; --os-stone-700: #4E4B46; --os-stone-800: #3A3833; --os-stone-850: #2E2C28; --os-stone-900: #24221E; --os-stone-925: #1A1916; --os-stone-950: #141311; --os-stone-975: #100F0D; /* Olive (brand) */ --os-olive-50: #FAF7EE; --os-olive-100: #F2EDDD; --os-olive-200: #E4DABD; --os-olive-300: #CFC097; --os-olive-400: #AD9D70; --os-olive-500: #8D7F56; --os-olive-600: #786B46; --os-olive-700: #625737; --os-olive-800: #4C4329; --os-olive-900: #36301D; --os-olive-950: #221E12; /* Gold (logo, the vein, AI) */ --os-gold-50: #FFF9E7; --os-gold-100: #FDF0C7; --os-gold-200: #F9E299; --os-gold-300: #F0D066; --os-gold-400: #E1BE3F; --os-gold-500: #C5A52E; --os-gold-600: #A8871C; --os-gold-700: #86701F; --os-gold-800: #66530F; --os-gold-900: #4B3F14; --os-logo-gold: #E0BF3F; /* the logo frame, exactly; defined ONCE (today --brand-gold has 3 values) */ } /* ------------------------------------------------------------------------------------------------------------------ 2. Semantic colours, LIGHT. "Taupe" (toupintech.com, 2026-11-10): warm whites, Ink text, deep tan for accent TEXT, the logo's gold for FILLS with Ink text (--os-accent-fill). Contrast on --os-surface (#FBFAF7) unless said. ------------------------------------------------------------------------------------------------------------------ */ :root { color-scheme: light; /* Surfaces */ --os-canvas: #F7F6F2; /* page behind panels (Taupe background) */ --os-surface: #FBFAF7; /* panels, cards, tables, top bar, app bar (Taupe surface) */ --os-surface-sunken: #EFEDE7; /* wells: table head, code, segmented track, stripes, quiet areas (Taupe surface 2) */ --os-surface-raised: #FBFAF7; /* menus, popovers, dialogs, drawers, toasts */ --os-surface-hover: rgba(36, 32, 29, 0.04); --os-surface-pressed: rgba(36, 32, 29, 0.08); --os-surface-selected: #EFE8D8; /* selected row / nav item: soft tan 50 % over surface */ --os-field: #FBFAF7; /* inputs */ --os-inverse: #24201D; /* tooltips (Ink) */ --os-inverse-text: #F4F0EA; /* 14.2:1 on inverse */ /* Text */ --os-text: #24201D; /* Ink: 15.5:1 surface, 15.0 canvas, 13.8 sunken, 13.2 selected */ --os-text-2: #59544E; /* 7.2 surface, 6.9 canvas, 6.4 sunken, 6.1 selected */ --os-text-3: #6A645D; /* 5.6 surface, 5.4 canvas, 5.0 sunken, 4.8 selected: captions, axis labels, meta */ --os-text-disabled: #A19E98; /* disabled only (exempt) */ /* Lines */ --os-border-subtle: rgba(36, 32, 29, 0.07); /* soft rule: row rules, panel outline (light) */ --os-border: rgba(36, 32, 29, 0.12); /* rule: dividers, chips, segmented */ --os-border-strong: rgba(36, 32, 29, 0.22); /* hover outlines, table-head rule */ --os-border-input: #8C857D; /* inputs, checkboxes: 3.5:1 surface, 3.4 canvas, 3.1 sunken (WCAG 1.4.11) */ --os-panel-line: var(--os-border-subtle); /* Accent: deep tan for text and lines (gold text on light fails: 1.7:1), the gold for fills */ --os-accent: #7D6430; /* links, active tab line, checked, outlines: 5.4 surface, 5.2 canvas, 4.8 sunken */ --os-accent-hover: #6A5428; --os-accent-pressed: #574423; --os-accent-brand: #7D6430; /* decoration only: tile icons, illustrations (not text) */ --os-accent-soft: #E3D6B8; /* soft tan: soft badge, selected chip, text selection */ --os-accent-text: #5E4A22; /* tan text on accent-soft: 5.9:1 (deep tan there is 3.9, too low) */ --os-on-accent: #FBFAF7; /* 5.4 on accent, 6.9 on accent-hover */ --os-accent-fill: #E1C041; /* primary buttons: the logo's gold, Ink text */ --os-accent-fill-hover: #ECD062; --os-on-accent-fill: #24201D; /* 9.1 on gold, 10.6 on gold hover */ --os-knob: #FBFAF7; /* a switch's knob when off (on: on-accent) */ --os-focus: #7D6430; /* 2 px ring, 2 px offset: 5.4 surface / 5.2 canvas (gold would be 1.7, below 3:1) */ /* The gold vein: ONLY the shell line, the AI rule + marker, the nav notch, the highlighted record, the demo bar */ --os-vein: #E1C041; /* lines and notches: the gold */ --os-logo-ink: #2E2E2E; /* the logo's T */ --os-ai: #7D6430; /* AI rule and spark (deep tan: the gold is too pale on light) */ --os-ai-soft: #F6F0D6; /* AI chip, suggestion "new" value: gold 18 % over surface */ --os-ai-text: #7D6430; /* 4.9 on ai-soft, 5.4 on surface */ --os-scrim: rgba(30, 25, 21, 0.40); --os-spark-brand: var(--os-olive-500); /* KPI sparklines are data: they keep the olive of before (not Taupe) */ /* Status: ONE palette. strong = dots, icons, marks, solid fills (white text >= 5:1); text = words on soft or surface */ --os-good: #2E7D4F; --os-good-text: #1E5E3A; --os-good-soft: #E6F4EA; --os-good-border: #BFE0C9; --os-on-good: #FFFFFF; --os-warn: #A65A00; --os-warn-text: #7F4300; --os-warn-soft: #FDF0DC; --os-warn-border: #F2D3A6; --os-on-warn: #FFFFFF; --os-bad: #B42318; --os-bad-text: #8F1D14; --os-bad-soft: #FDECEA; --os-bad-border: #F5C6C0; --os-on-bad: #FFFFFF; --os-info: #2F64A3; --os-info-text: #234D80; --os-info-soft: #E7EFF9; --os-info-border: #C3D6EE; --os-on-info: #FFFFFF; --os-neutral: #7A766F; --os-neutral-text: #4E4B46; --os-neutral-soft: #F2F1EE; --os-neutral-border: #DCDAD5; --os-on-neutral: #FFFFFF; /* ratios: good 5.05/6.8 on soft; warn 5.14/6.9; bad 6.57/7.8; info 6.05/7.4; neutral 4.52/7.7 */ /* Chart hues (validated with dataviz validate_palette.js on #FFFFFF: all 5 checks PASS in both orders below) */ --os-hue-brass: #9D7B19; --os-hue-blue: #2D74CA; --os-hue-teal: #009B8F; --os-hue-violet: #735ACC; --os-hue-terra: #D35D31; --os-hue-sky: #2B95BD; --os-hue-moss: #5D913C; --os-hue-rose: #CD6199; --os-chart-other: #A19E98; /* Sequential (brass, magnitude, heatmaps): light -> dark; validated ordinal (light end 2:1 on surface) */ --os-seq-1: #D4B362; --os-seq-2: #C29C36; --os-seq-3: #AD8604; --os-seq-4: #947202; --os-seq-5: #7B5F01; --os-seq-6: #644C00; --os-seq-7: #4D3A01; /* Diverging (blue <-> terra, stone midpoint): variance to plan, energy vs baseline */ --os-div-n4: #0C54A0; --os-div-n3: #467CC0; --os-div-n2: #83A7D6; --os-div-n1: #C2D3E8; --os-div-0: #E9E8E5; --os-div-p1: #E9C9BE; --os-div-p2: #E1957A; --os-div-p3: #CF6139; --os-div-p4: #A63C0C; /* Chart chrome (backgrounds, grid and axis only: the data hues above are unchanged) */ --os-chart-grid: rgba(36, 32, 29, 0.07); --os-chart-axis: rgba(36, 32, 29, 0.12); --os-chart-label: #6A645D; --os-chart-target: rgba(36, 32, 29, 0.60); /* dashed 4 4, 1.5 px */ --os-chart-band: rgba(125, 100, 48, 0.08); /* normal operating band (deep tan) */ --os-chart-shift: rgba(36, 32, 29, 0.035); /* Shift A/B/C bands on time axes */ --os-chart-event: rgba(180, 35, 24, 0.07); /* downtime / alarm windows */ /* Elevation (4 levels, the only box-shadows allowed). Warm shadows rgba(30, 25, 21) instead of black */ --os-shadow-1: 0 1px 2px rgba(30, 25, 21, 0.04), 0 4px 14px rgba(30, 25, 21, 0.04); --os-shadow-2: 0 2px 4px rgba(30, 25, 21, 0.04), 0 8px 24px -6px rgba(30, 25, 21, 0.10); --os-shadow-3: 0 4px 8px -2px rgba(30, 25, 21, 0.05), 0 16px 40px rgba(30, 25, 21, 0.08); --os-shadow-4: 0 8px 16px -4px rgba(30, 25, 21, 0.08), 0 32px 72px -16px rgba(30, 25, 21, 0.24); --os-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14); /* top highlight of filled primary buttons */ } /* ------------------------------------------------------------------------------------------------------------------ 3. Semantic colours, DARK (designed, not inverted). "Taupe": Night canvas, Ink deep panels, text on dark, the gold. Contrast on --os-surface (#2A2420) unless said. Panel separation: --os-border, the rule on dark (0.14). ------------------------------------------------------------------------------------------------------------------ */ :root[data-theme="dark"] { color-scheme: dark; --os-canvas: #1F1B18; /* Night: app shell, sidebar, hero bands */ --os-surface: #2A2420; /* Ink deep: panels and cards on Night */ --os-surface-sunken: #1F1B18; --os-surface-raised: #342D28; /* menus, dialogs: Ink deep + 4 % text on dark */ --os-surface-hover: rgba(244, 240, 234, 0.05); --os-surface-pressed: rgba(244, 240, 234, 0.09); --os-surface-selected: #403724; /* gold 12 % over Ink deep */ --os-field: #1F1B18; /* inputs read as wells in the dark */ --os-inverse: #F4F0EA; --os-inverse-text: #24201D; --os-text: #F4F0EA; /* 13.5 surface, 15.1 canvas, 11.9 raised, 10.3 selected */ --os-text-2: rgba(244, 240, 234, 0.70); /* muted on dark: 7.3 surface, 7.9 canvas, 6.7 raised, 6.0 selected */ --os-text-3: rgba(244, 240, 234, 0.60); /* 5.8 surface, 6.2 canvas, 5.35 raised, 4.85 selected */ --os-text-disabled: rgba(244, 240, 234, 0.38); --os-border-subtle: rgba(244, 240, 234, 0.08); /* row rules */ --os-border: rgba(244, 240, 234, 0.14); /* the rule on dark: panel outline */ --os-border-strong: rgba(244, 240, 234, 0.24); --os-border-input: #8A8178; /* 4.0 surface, 4.5 canvas, 3.5 raised */ --os-panel-line: var(--os-border); --os-accent: #E1C041; /* the gold: 8.6 on surface, 9.6 canvas, 7.6 raised; Ink on it 9.1 */ --os-accent-hover: #ECD062; --os-accent-pressed: #F3DE8A; --os-accent-brand: #C9B48A; /* mid tan */ --os-accent-soft: #403724; --os-accent-text: #E3D6B8; /* soft tan: 8.1 on accent-soft */ --os-on-accent: #24201D; --os-accent-fill: #E1C041; --os-accent-fill-hover: #ECD062; --os-on-accent-fill: #24201D; --os-knob: #F4F0EA; --os-focus: #E1C041; --os-vein: #E1C041; --os-logo-ink: #F4F1E8; --os-ai: #E1C041; /* 8.6 on surface */ --os-ai-soft: #322C1C; /* gold 10 % over Night */ --os-ai-text: #ECD062; /* 9.1 on ai-soft */ --os-scrim: rgba(15, 12, 10, 0.62); --os-spark-brand: var(--os-olive-400); --os-good: #5CC48A; --os-good-text: #9BDDB4; --os-good-soft: #15291D; --os-good-border: #24462F; --os-on-good: #11100E; --os-warn: #F0A04B; --os-warn-text: #F6C48D; --os-warn-soft: #33240F; --os-warn-border: #573A16; --os-on-warn: #11100E; --os-bad: #F47B70; --os-bad-text: #FFADA6; --os-bad-soft: #351B19; --os-bad-border: #5C2F2B; --os-on-bad: #11100E; --os-info: #74AAEC; --os-info-text: #A9CBF5; --os-info-soft: #162436; --os-info-border: #27405F; --os-on-info: #11100E; --os-neutral: #8F8B84; --os-neutral-text: #BAB6AF; --os-neutral-soft: #24221E; --os-neutral-border: #3A3833; --os-on-neutral: #11100E; /* ratios: strong on surface good 8.1, warn 8.2, bad 6.6, info 7.3; #11100E on strong >= 7.2; text on soft >= 8.9 */ /* Chart hues (validated on #1A1916: all 5 checks PASS in both orders) */ --os-hue-brass: #B28F2C; --os-hue-blue: #468DE5; --os-hue-teal: #20A89B; --os-hue-violet: #8976DC; --os-hue-terra: #DD6D45; --os-hue-sky: #359DC5; --os-hue-moss: #689D48; --os-hue-rose: #D4679F; --os-chart-other: #65625D; /* Sequential in dark runs dark -> light so "more" is always more ink against the dark surface */ --os-seq-1: #614D17; --os-seq-2: #7D6217; --os-seq-3: #9A7814; --os-seq-4: #B59026; --os-seq-5: #CEA94B; --os-seq-6: #E2C479; --os-seq-7: #F5DFAC; --os-div-n4: #6AA7F4; --os-div-n3: #4C82C6; --os-div-n2: #365C8C; --os-div-n1: #283C54; --os-div-0: #2F2E2C; --os-div-p1: #513126; --os-div-p2: #89452D; --os-div-p3: #C45E39; --os-div-p4: #ED835E; --os-chart-grid: rgba(244, 240, 234, 0.07); --os-chart-axis: rgba(244, 240, 234, 0.14); --os-chart-label: rgba(244, 240, 234, 0.60); --os-chart-target: rgba(244, 240, 234, 0.60); --os-chart-band: rgba(201, 180, 138, 0.10); --os-chart-shift: rgba(244, 240, 234, 0.03); --os-chart-event: rgba(244, 123, 112, 0.10); /* Night is as dark as rgba(30, 25, 21): shadows on dark use a deeper warm black */ --os-shadow-1: 0 1px 2px rgba(12, 10, 8, 0.40), inset 0 1px 0 rgba(244, 240, 234, 0.035); --os-shadow-2: 0 2px 6px rgba(12, 10, 8, 0.45), 0 10px 24px -8px rgba(12, 10, 8, 0.55), inset 0 1px 0 rgba(244, 240, 234, 0.05); --os-shadow-3: 0 4px 12px rgba(12, 10, 8, 0.50), 0 20px 40px -10px rgba(12, 10, 8, 0.65), inset 0 1px 0 rgba(244, 240, 234, 0.06); --os-shadow-4: 0 12px 24px rgba(12, 10, 8, 0.55), 0 40px 80px -16px rgba(12, 10, 8, 0.70), inset 0 1px 0 rgba(244, 240, 234, 0.06); --os-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.22); } /* ------------------------------------------------------------------------------------------------------------------ 4. Chart slots: ONE palette, two orders. Colour follows the entity (ChartTheme.ColorOf), never the rank. Brand order (default): brass first, so single-series business charts look like TTech. Operator order (data-chart-order="ops", and the wall): ISA-101 - no amber/terra in the first slots (they sit near the warn/bad hues an operator scans for). ------------------------------------------------------------------------------------------------------------------ */ :root { --os-chart-1: var(--os-hue-brass); --os-chart-2: var(--os-hue-blue); --os-chart-3: var(--os-hue-teal); --os-chart-4: var(--os-hue-violet); --os-chart-5: var(--os-hue-terra); --os-chart-6: var(--os-hue-sky); --os-chart-7: var(--os-hue-moss); --os-chart-8: var(--os-hue-rose); --os-spark: var(--os-spark-brand); /* every KPI sparkline: one calm line (kept olive: a data series) */ /* Energy keeps meaning-based colours as named aliases onto hues (not new hues). Brass and terra are never stacked together (deutan dE 2.5 between them), so gas is blue, not copper. */ --os-util-elec: var(--os-hue-brass); --os-util-gas: var(--os-hue-blue); --os-util-water: var(--os-hue-teal); --os-util-steam: var(--os-hue-violet); } [data-chart-order="ops"], html.wall-mode, html[data-density="wall"] { --os-chart-1: var(--os-hue-blue); --os-chart-2: var(--os-hue-teal); --os-chart-3: var(--os-hue-violet); --os-chart-4: var(--os-hue-moss); --os-chart-5: var(--os-hue-rose); --os-chart-6: var(--os-hue-brass); --os-chart-7: var(--os-hue-sky); --os-chart-8: var(--os-hue-terra); --os-spark: var(--os-text-2); /* operators: graphite sparklines, colour only for state */ } /* ------------------------------------------------------------------------------------------------------------------ 5. Type, space, radius, motion, z-index (theme-independent) ------------------------------------------------------------------------------------------------------------------ */ :root { --os-font-ui: "Inter", "Inter Fallback", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --os-font-display: "Outfit", "Inter", "Segoe UI", system-ui, sans-serif; --os-font-mono: "Cascadia Mono", "SF Mono", ui-monospace, Consolas, "Liberation Mono", monospace; --os-num: tabular-nums; /* font-variant-numeric of every figure */ /* Spacing, 4 px base */ --os-space-0: 0; --os-space-px: 1px; --os-space-0h: 2px; --os-space-1: 4px; --os-space-1h: 6px; --os-space-2: 8px; --os-space-3: 12px; --os-space-4: 16px; --os-space-5: 20px; --os-space-6: 24px; --os-space-8: 32px; --os-space-10: 40px; --os-space-12: 48px; --os-space-16: 64px; --os-space-20: 80px; /* Radii (6 values replace 36). Panels keep today's 10 px. Nested: inner = outer - padding */ --os-radius-xs: 4px; /* checkbox, progress, bar data-ends */ --os-radius-sm: 6px; /* tags, small buttons, tooltips */ --os-radius-md: 8px; /* buttons, inputs, segmented, menu items, icon tiles */ --os-radius-lg: 10px; /* panels, cards, KPI tiles, tables, toasts, popovers */ --os-radius-xl: 14px; /* dialogs, drawers' inner edge, hero header, loading stage */ --os-radius-pill: 999px;/* badges, filter chips, avatars, switches */ --os-border-w: 1px; --os-border-w-strong: 2px; /* Motion */ --os-dur-1: 90ms; /* hover colour / opacity */ --os-dur-2: 160ms; /* press, toggle, tab indicator, chip */ --os-dur-3: 240ms; /* menus, popovers, toasts, skeleton -> content fade-up */ --os-dur-4: 320ms; /* dialogs, drawers */ --os-dur-chart: 450ms; /* chart first draw only */ --os-ease-standard: cubic-bezier(0.2, 0, 0, 1); --os-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --os-ease-in: cubic-bezier(0.4, 0, 1, 1); --os-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* tiny delights only: accepted suggestion, AI spark, toggles */ /* Z-index: MudBlazor 9.11 defaults kept (Drawer 1100, Popover 1200, AppBar 1300, Dialog 1400, Snackbar 1500, Tooltip 1600); the app's own drawers already sit at 1300/1301 (aihelp, connect, monitoring2, datahub-reports) */ --os-z-raised: 1; --os-z-sticky: 20; --os-z-pagebar: 30; --os-z-stage: 40; --os-z-drawer: 1100; --os-z-popover: 1200; --os-z-appbar: 1300; --os-z-dialog: 1400; --os-z-toast: 1500; --os-z-tooltip: 1600; --os-z-boot: 2000; /* Shell metrics */ --os-vein-h: 2px; --os-topbar-h: 56px; --os-appbar-h: 48px; --os-shell-h: calc(var(--os-vein-h) + var(--os-topbar-h) + var(--os-appbar-h)); --os-prose: 72ch; /* the only width cap: running text inside a panel */ /* The brand texture: today's topographic hero, used as a MASK (colour comes from the element). Allowed only in the hero page header, empty states, the boot and sign-in screens; never behind data (stylelint os/contours-scope). */ --os-contours: url("welcome-topo.svg"); } /* Page padding and grid gutter by breakpoint (same names and values as MudBlazor's Breakpoint enum) */ :root { --os-page-x: 16px; --os-gutter: 12px; --os-cols: 4; } @media (min-width: 600px) { :root { --os-page-x: 20px; --os-gutter: 16px; --os-cols: 8; } } @media (min-width: 960px) { :root { --os-page-x: 24px; --os-gutter: 16px; --os-cols: 12; } } @media (min-width: 1280px) { :root { --os-page-x: 28px; --os-gutter: 20px; --os-cols: 12; } } @media (min-width: 1920px) { :root { --os-page-x: 32px; --os-gutter: 24px; --os-cols: 12; } } @media (min-width: 2560px) { :root { --os-page-x: 40px; --os-gutter: 32px; --os-cols: 16; } } @media (max-width: 599.98px) { :root { --os-topbar-h: 52px; --os-appbar-h: 44px; } } /* ------------------------------------------------------------------------------------------------------------------ 6. Density. Controls, rows, panel padding and the type scale. Default = employees' and clients' default; compact = engineering lists (remembered per app); comfortable = occasional readers; wall = control room. ------------------------------------------------------------------------------------------------------------------ */ :root, [data-density] { --os-font-scale: 1; --os-control-h: 32px; --os-row-h: 40px; --os-panel-pad: 20px; --os-cell-x: 12px; --os-icon: 18px; --os-chart-font: 12px; --os-chart-line: 2px; --os-label-lines: 2; } [data-density="compact"] { --os-font-scale: 0.9286; /* 13 px body */ --os-control-h: 28px; --os-row-h: 32px; --os-panel-pad: 16px; --os-cell-x: 10px; --os-icon: 16px; --os-chart-font: 11.5px; } [data-density="comfortable"] { --os-font-scale: 1.0714; /* 15 px body */ --os-control-h: 36px; --os-row-h: 48px; --os-panel-pad: 24px; --os-cell-x: 14px; --os-icon: 20px; --os-chart-font: 12.5px; } /* :root.wall-mode / :root[data-density] are (0,2,0) and come after the dark block, so the raised muted text also wins in the dark theme */ [data-density="wall"], :root[data-density="wall"], :root.wall-mode { --os-font-scale: 1.2857; /* 18 px body, read from 3 m */ --os-control-h: 44px; --os-row-h: 56px; --os-panel-pad: 28px; --os-cell-x: 16px; --os-icon: 24px; --os-chart-font: 16px; --os-chart-line: 3px; --os-text-3: var(--os-text-2); /* muted text raised one step for distance reading */ --os-page-x: 48px; --os-gutter: 32px; } /* Type tokens (use as `font: var(--os-type-body)`; letter-spacing via the matching --os-track-*). Re-declared on [data-density] so a scoped region re-computes them with its own scale. */ :root, [data-density] { --os-type-display: 600 calc(2.5rem * var(--os-font-scale))/1.1 var(--os-font-display); --os-type-h1: 600 calc(1.625rem * var(--os-font-scale))/1.231 var(--os-font-display); --os-type-h2: 600 calc(1.125rem * var(--os-font-scale))/1.444 var(--os-font-ui); --os-type-h3: 600 calc(0.9375rem * var(--os-font-scale))/1.467 var(--os-font-ui); --os-type-h4: 600 calc(0.8125rem * var(--os-font-scale))/1.538 var(--os-font-ui); --os-type-body: 400 calc(0.875rem * var(--os-font-scale))/1.5715 var(--os-font-ui); --os-type-body-strong: 500 calc(0.875rem * var(--os-font-scale))/1.5715 var(--os-font-ui); --os-type-reading: 400 calc(0.9375rem * var(--os-font-scale))/1.6 var(--os-font-ui); --os-type-small: 400 calc(0.8125rem * var(--os-font-scale))/1.538 var(--os-font-ui); --os-type-caption: 400 calc(0.75rem * var(--os-font-scale))/1.333 var(--os-font-ui); --os-type-label: 500 calc(0.78125rem* var(--os-font-scale))/1.28 var(--os-font-ui); --os-type-eyebrow: 600 calc(0.6875rem * var(--os-font-scale))/1.455 var(--os-font-ui); --os-type-button: 500 calc(0.84375rem* var(--os-font-scale))/1.48 var(--os-font-ui); --os-type-kpi-xl: 500 calc(3.5rem * var(--os-font-scale))/1.07 var(--os-font-display); --os-type-kpi-lg: 500 calc(2.125rem * var(--os-font-scale))/1.18 var(--os-font-display); --os-type-kpi: 500 calc(1.75rem * var(--os-font-scale))/1.214 var(--os-font-display); --os-type-kpi-sm: 500 calc(1.25rem * var(--os-font-scale))/1.3 var(--os-font-display); --os-type-mono: 400 calc(0.78125rem* var(--os-font-scale))/1.6 var(--os-font-mono); --os-track-display: -0.025em; --os-track-h1: -0.018em; --os-track-h2: -0.011em; --os-track-h3: -0.006em; --os-track-body: -0.003em; --os-track-eyebrow: 0.06em; --os-track-kpi: -0.02em; } /* ------------------------------------------------------------------------------------------------------------------ 7. Scene colours for the NEW loading animations (boot.css keeps the 15 existing --boot-* tokens on .boot/.ll-card; these are on :root so the in-page stage .os-stage and the Settings gallery get them too) ------------------------------------------------------------------------------------------------------------------ */ :root { --boot-night: #2A2620; --boot-rock: #CFC6B2; --boot-rock-2: #B9AF98; --boot-beam: #FFF6D6; --boot-steel: #8A8578; --boot-bird: #F2C94C; --boot-wing: #E0A526; --boot-beak: #D0632A; --boot-wood: #C9A46A; --boot-wood-line: #A88654; --boot-core: #B9B2A5; --boot-brass: #C9A227; --boot-brass-rim: #9C7F2A; --boot-board: #EBE5D6; --boot-hook: #A99F82; --boot-glove: #EB8A2A; --boot-lcd: #2E2E2E; } :root[data-theme="dark"] { --boot-night: #0D0C0A; --boot-rock: #3A352C; --boot-rock-2: #2E2A23; --boot-beam: #FFF1C2; --boot-steel: #6F6A5E; --boot-bird: #F2C94C; --boot-wing: #C99120; --boot-beak: #D56D33; --boot-wood: #5A4A30; --boot-wood-line: #3F3422; --boot-core: #5B564D; --boot-brass: #C9A227; --boot-brass-rim: #8A6F22; --boot-board: #2A2620; --boot-hook: #7F796D; --boot-glove: #D9782A; --boot-lcd: #E8E3D6; } /* ------------------------------------------------------------------------------------------------------------------ 8. Print: always light (white paper), whatever the screen theme ------------------------------------------------------------------------------------------------------------------ */ @media print { html:root[data-theme] { color-scheme: light; --os-canvas: #FFFFFF; --os-surface: #FFFFFF; --os-surface-sunken: #EFEDE7; --os-surface-raised: #FFFFFF; --os-field: #FFFFFF; --os-text: #24201D; --os-text-2: #59544E; --os-text-3: #6A645D; --os-border-subtle: rgba(36, 32, 29, 0.07); --os-border: rgba(36, 32, 29, 0.12); --os-border-strong: rgba(36, 32, 29, 0.22); --os-panel-line: rgba(36, 32, 29, 0.12); --os-accent: #7D6430; --os-accent-soft: #E3D6B8; --os-accent-text: #5E4A22; --os-logo-ink: #2E2E2E; --os-accent-fill: #E1C041; --os-on-accent-fill: #24201D; --os-on-accent: #FBFAF7; --os-accent-hover: #6A5428; --os-border-input: #8C857D; --os-focus: #7D6430; --os-ai: #7D6430; --os-ai-soft: #F6F0D6; --os-ai-text: #7D6430; --os-shadow-1: none; --os-shadow-2: none; --os-shadow-3: none; --os-shadow-4: none; } } /* ------------------------------------------------------------------------------------------------------------------ 9. LEGACY ALIASES (wave 0 -> wave 5). Every existing CSS file keeps working and wears the new palette at once. Selector html:root[data-theme] = (0,2,1): wins over a :root (0,1,0) or :root[data-theme="dark"] (0,2,0) of an app file in any link order. The values are var() of the --os tokens, so they follow the theme automatically. A scoped redefinition (.pbi, .dhr: the forced-light report frames) still wins inside its element. Counted per name by DesignGuardTests (TTech.Platform.Tests): a count may only go down. Two tokens used today but never defined (--surface: weather.css:413, ProfitChart.razor:88, PayTabs.razor:27; --line: PayTabs.razor:23-35) are defined here, so their light fallbacks stop leaking into dark mode. Deleted in wave 5, when the guard test counts 0 uses of each name. ------------------------------------------------------------------------------------------------------------------ */ html:root[data-theme] { --background: var(--os-canvas); --panel: var(--os-surface); --panel-2: var(--os-surface-sunken); --head-bg: var(--os-surface-sunken); --field: var(--os-field); --text: var(--os-text); --muted: var(--os-text-2); --faint: var(--os-text-3); --accent: var(--os-accent); --accent-soft: var(--os-accent-soft); --accent-strong: var(--os-accent-text); --on-accent: var(--os-on-accent); --brand-gold: var(--os-vein); --logo-ink: var(--os-logo-ink); --brand-font: var(--os-font-display); --border: var(--os-border); --rule: var(--os-border-subtle); --chip: var(--os-neutral-soft); --chip-hover: var(--os-surface-pressed); --chip-text: var(--os-neutral-text); --btn: var(--os-surface); --btn-hover: var(--os-surface-hover); --code-bg: var(--os-surface-sunken); --good: var(--os-good); --good-soft: var(--os-good-soft); --good-text: var(--os-good-text); --bad: var(--os-bad); --bad-soft: var(--os-bad-soft); --warn: var(--os-warn); --warn-soft: var(--os-warn-soft); --info: var(--os-info); --info-soft: var(--os-info-soft); --note-soft: var(--os-warn-soft); --gold-soft: var(--os-ai-soft); --gold-text: var(--os-ai-text); --radius: var(--os-radius-lg); --shadow: var(--os-shadow-1); --mono: var(--os-font-mono); --surface: var(--os-surface); --line: var(--os-border); }