/* Design tokens: the only file in the dashboard allowed to hold a raw color. * * Source of truth: Paige's Foundations in the Figma file Rosey-Dashboard * (h6TyDzeEDCwia8aouDJCa5): node 139:2 for light, 3:72 for dark, and the * Reporting screen 42:112 for how they are used. Docs, and every place we * differ from Figma: DESIGN-TOKENS.md. * * Colors are raw HSL triplets ("H S% L%"), used as hsl(var(--canvas)) or * hsl(var(--canvas) / 0.5). That keeps the file reusable by a Tailwind app. * The hex value next to each triplet is a comment for humans. * * Section 1 holds Paige's tokens with her names and her light values. Section 7 * at the bottom gives the same names her dark values. Components mostly read * the semantic tokens in section 2, which point at section 1, so they follow * the theme with no dark override of their own. */ /* Aeonik, the brand face, as one variable file (weights 100 to 900). Commercial font (CoType), licensed to Fueled for internal use, so it lives in app/licensed_fonts/ and is served only to signed-in users (aeonik_font() in app/main.py). Signed-out pages fall back to Host Grotesk. Do not move it into app/static/. */ @font-face { font-family: "Aeonik"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/aeonik.woff2?v=2") format("woff2"); } /* Host Grotesk (SIL OFL, fonts/OFL-HostGrotesk.txt), variable, weights 300 to 800. The fallback: /login renders in it, and it covers glyphs Aeonik lacks. */ @font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/static/fonts/HostGrotesk-Variable.woff2?v=2") format("woff2"); } /* JetBrains Mono Regular (SIL OFL, fonts/OFL-JetBrainsMono.txt): code, commit SHAs, IDs and dates in tables. */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/JetBrainsMono-Regular.woff2?v=1") format("woff2"); } :root { /* 1. Paige's tokens, light values (Figma 139:2) ---------------------------- */ /* brand */ --primary: 247 100% 66%; /* #6652ff fills (primary button), chart series 1 */ --primary-hover: 247.2 84.5% 59.6%; /* #5641ef */ --primary-focus: 247.3 98.9% 65.7%; /* #6651fe */ --on-primary: 0 0% 100%; /* #ffffff text on a primary fill, 5.0:1 */ --secure: 234 21% 47%; /* #5f6491 */ /* text */ --ink: 210 11.1% 3.5%; /* #08090a */ --ink-muted: 217 10% 26%; /* #3c4149 */ --ink-subtle: 220 5.9% 39.6%; /* #5f636b secondary text, 6.0:1 on canvas */ --ink-tertiary: 218.6 6.4% 56.9%; /* #8a8f98 3.2:1: disabled, placeholder, decoration only */ /* surface */ --canvas: 0 0% 100%; /* #ffffff */ --surface-1: 180 7% 97%; /* #f7f8f8 panels and tiles */ --surface-2: 220 12% 95%; /* #f1f2f4 */ --surface-3: 220 8.1% 92.7%; /* #ebecee */ --surface-4: 225 9% 91%; /* #e6e7ea */ /* border */ --hairline: 225 8% 90.2%; /* #e4e5e8 */ --hairline-strong: 228 6% 84%; /* #d4d5d9 */ --hairline-tertiary: 222.9 6.3% 78.2%; /* #c4c6cb */ /* inverse */ --inverse-canvas: 210 11.1% 3.5%; /* #08090a */ --inverse-surface-1: 210 4.8% 8.2%; /* #141516 */ --inverse-surface-2: 210 4% 9.8%; /* #18191a */ --inverse-ink: 0 0% 100%; /* #ffffff */ /* semantic */ --success: 137 66% 30%; /* #1a7f37 */ --danger: 356.9 64% 46.9%; /* #c42b33 */ --overlay: 0 0% 0%; /* #000000 */ /* Figma Foundations, Charts > Status (edited 2026-10-29): a dot, bar or rule. 3.4:1 on surface-1, so never text: text uses --warning-text. */ --warning: 35.5 71% 42%; /* #b7791f */ /* Not in Figma. Warning as text (5.3:1 on surface-1), and the info status (5.4:1 on surface-1; the old #78C2FF was 1.8:1, under 3:1 as a dot). */ --warning-text: 35.6 75.5% 32%; /* #8f5d14 */ --info: 203.7 87.7% 35.1%; /* #0b6aa8 */ /* 2. Semantic colors (use these in components) ------------------------------ */ --background: var(--canvas); /* page canvas */ --foreground: var(--ink); /* body text */ --card: var(--surface-1); /* panels, stat tiles, forms */ --muted: var(--surface-2); /* inset surfaces: code, menu hover */ --muted-foreground: var(--ink-subtle); /* secondary text */ --border: var(--hairline); /* cards, tables, dividers */ /* Figma draws inputs with a hairline (1.3:1). Control outlines need 3:1 (WCAG 1.4.11), so inputs use ink-tertiary: 3.2:1 on canvas, 3.1 on surface-1. */ --input: var(--ink-tertiary); --link: var(--primary); /* links and text-colored primary, 5.0:1 on canvas */ --ring: var(--primary-focus); /* 2px focus ring */ --button-hover: var(--primary-hover); /* primary button hover, white text 6.2:1 */ /* The top bar is black in both themes: the inverse surface in light. */ --topbar: var(--inverse-canvas); --topbar-foreground: var(--inverse-ink); --topbar-muted-foreground: var(--ink-tertiary); /* nav links, 6.1:1 on the bar */ --topbar-border: var(--inverse-canvas);/* hairline under the bar, drawn in dark only */ --topbar-border-width: 0px; /* Toasts, chart tooltips, the OEE popover. */ --popover: var(--inverse-canvas); --popover-foreground: var(--inverse-ink); --popover-muted-foreground: var(--ink-tertiary); /* 6.1:1 */ --popover-border: var(--inverse-canvas); /* 1px outline, visible in dark only */ /* Status colors. A status renders as a dot, bar or rule next to ink text. */ --status-success: var(--success); --status-error: var(--danger); --status-warning: var(--warning); --status-info: var(--info); --status-inactive: var(--ink-tertiary); /* Chart series, in order of use. The Reporting screen (42:112) sets 1, 4 and neutral: Rosey and Builder are primary, Code Reviewer is ink-muted, the project team is ink-tertiary. Closed unmerged reads --danger directly. */ --chart-1: var(--primary); --chart-2: var(--series-2); --chart-3: var(--series-3); --chart-4: var(--ink-muted); --chart-5: var(--secure); --chart-neutral: var(--ink-tertiary); /* Figma's categorical series (Foundations, Charts, edited 2026-10-29). Assign 1 to 7 in order. In light only 1 and 7 reach 3:1 on surface-1, so the legend and the table carry identity. */ --series-1: var(--primary); /* #6652ff */ --series-2: 325 100% 66.1%; /* #ff52b7 */ --series-3: 38.1 96% 49.2%; /* #f69e05 */ --series-4: 168.9 79.3% 36.1%; /* #13a58a */ --series-5: 22.1 80.5% 53.7%; /* #e8702a */ --series-6: 200.9 100% 50%; /* #00a6ff */ --series-7: 118.1 45.3% 41.6%; /* #3d9a3a */ /* Figma's diverging scale, the two steps the budget variance chart uses: sky below the budget, pink above. n2 is the same in both themes; p2 follows series-2. Under 3:1 in light, so every bar prints its number. */ --diverging-n2: 201.7 94.2% 47.3%; /* #0798ea */ --diverging-p2: var(--series-2); /* #ff52b7 */ --gradient-brand: linear-gradient(90deg, #6652FF, #FF5CBF); /* 3. Type (Figma 139:2) ------------------------------------------------------ */ --font-sans: "Aeonik", "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --weight-regular: 400; /* body, table cells */ --weight-medium: 500; /* labels, buttons, nav */ --weight-semibold: 600; /* page and section headings, big numbers */ /* One group per Figma text style: size, weight, line height, tracking. */ --type-display-xl-size: 80px; --type-display-xl-weight: var(--weight-semibold); --type-display-xl-leading: 1.05; --type-display-xl-tracking: -3px; --type-display-lg-size: 56px; --type-display-lg-weight: var(--weight-semibold); --type-display-lg-leading: 1.1; --type-display-lg-tracking: -1.8px; --type-display-md-size: 40px; /* page title, stat values */ --type-display-md-weight: var(--weight-semibold); --type-display-md-leading: 1.15; --type-display-md-tracking: -1px; --type-headline-size: 28px; /* section title */ --type-headline-weight: var(--weight-semibold); --type-headline-leading: 1.2; --type-headline-tracking: -0.6px; --type-card-title-size: 22px; --type-card-title-weight: var(--weight-medium); --type-card-title-leading: 1.25; --type-card-title-tracking: -0.4px; --type-subhead-size: 20px; --type-subhead-weight: var(--weight-regular); --type-subhead-leading: 1.4; --type-subhead-tracking: -0.2px; --type-body-lg-size: 18px; /* panel title */ --type-body-lg-weight: var(--weight-regular); --type-body-lg-leading: 1.5; --type-body-lg-tracking: -0.1px; --type-body-size: 16px; --type-body-weight: var(--weight-regular); --type-body-leading: 1.5; --type-body-tracking: -0.05px; --type-body-sm-size: 14px; /* tables, tile labels, most UI text */ --type-body-sm-weight: var(--weight-regular); --type-body-sm-leading: 1.5; --type-body-sm-tracking: 0px; --type-caption-size: 12px; /* details, axes, legends, hints */ --type-caption-weight: var(--weight-regular); --type-caption-leading: 1.4; --type-caption-tracking: 0px; --type-button-size: 14px; /* buttons, labels, nav */ --type-button-weight: var(--weight-medium); --type-button-leading: 1.2; --type-button-tracking: 0px; --type-eyebrow-size: 13px; --type-eyebrow-weight: var(--weight-medium); --type-eyebrow-leading: 1.3; --type-eyebrow-tracking: 0.4px; --type-mono-size: 13px; --type-mono-weight: var(--weight-regular); --type-mono-leading: 1.5; --type-mono-tracking: 0px; /* 4. Space, 4px base (Figma 139:2) ---------------------------------------- */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; /* card padding */ --space-xl: 32px; --space-xxl: 48px; --space-section: 96px; --container: 1200px; --chart-height: 320px; /* every chart box */ --chart-bar: 24px; /* thickest bar (Figma Charts) */ --chart-line: 2px; /* line width, marker ring */ --chart-marker: 8px; /* scatter and line marker diameter */ --sparkline-height: 48px; /* the line in a headline tile */ --trend-tile-min: 200px; /* minimum headline trend tile width */ --border-width: 1px; /* chart panel and button hairlines */ --table-window: min(560px, 70vh); /* a run table's scroll box, about 10 rows */ --control-height: 40px; /* buttons (Figma Button 3:387) */ --input-height: 44px; /* inputs and selects (Figma Text Input 3:404) */ --tap: 44px; /* touch target on a coarse pointer (WCAG 2.5.5) */ /* App shell (Figma Left nav 113:3, Overview 11:3). */ --sidebar: 256px; /* sidebar width */ --shell-inset: 8px; /* gap around the main panel */ --topbar-height: 56px; /* the panel's breadcrumb bar */ --nav-item: 32px; /* nav item and icon button height */ --tab-height: 36px; /* view tab height */ --icon-sm: 16px; /* nav, crumb and icon button icons */ --avatar: 28px; /* brand mark and user avatar */ --space-xxxs: 2px; /* gap between nav items (Figma off-scale) */ --space-nav-y: 6px; /* tab and section header vertical padding */ --space-nav-icon: 10px; /* icon to label in a nav item */ --duration-base: 300ms; /* drawer slide, scrim fade */ --opacity-scrim: 0.4; /* --overlay behind the phone drawer */ /* Disabled controls: the whole control, with ink-tertiary text. */ --opacity-disabled: 0.6; /* 5. Radius (Figma 139:2) -------------------------------------------------- */ --radius-xs: 4px; /* inline code */ --radius-sm: 6px; /* tags, menu items */ --radius-md: 8px; /* every button and input, popovers */ --radius-lg: 12px; /* cards, tiles, tables */ --radius-xl: 16px; /* screenshot panels */ --radius-xxl: 24px; --radius-pill: 9999px; /* tabs and status only */ /* 6. Elevation: none. Depth is a surface step plus a hairline. The focus ring is the only glow. */ /* Tells the browser to draw form controls, scrollbars and the canvas in the matching scheme. Section 7 sets it to dark. */ color-scheme: light; } /* 7. Dark theme --------------------------------------------------------------- Same behavior as Zensical's palette toggle (DESIGN-TOKENS.md, "Dark mode"): the default follows the OS through prefers-color-scheme, and the choice made with the top bar toggle is stored in localStorage and set on as data-theme="light" or "dark" before first paint (theme.js, and the inline script in base.html). Paige's tokens take her dark values (Figma 3:72). A few semantic tokens are re-pointed where dark needs a different role, see DESIGN-TOKENS.md. The two blocks below must hold the same declarations: tests/test_design_tokens.py compares them. A plain stylesheet cannot share one block between a selector and a media query. */ :root[data-theme="dark"] { color-scheme: dark; --primary: 247 100% 66%; /* #6652ff */ --primary-hover: 248.4 100% 73.3%; /* #8a77ff */ --primary-focus: 247.3 98.9% 65.7%; /* #6651fe */ --on-primary: 0 0% 100%; /* #ffffff */ --secure: 234.1 23.7% 57.8%; /* #7a7fad */ --ink: 180 7% 97%; /* #f7f8f8 */ --ink-muted: 217.5 20.5% 84.7%; /* #d0d6e0 */ --ink-subtle: 218.6 6.4% 56.9%; /* #8a8f98 */ --ink-tertiary: 218.2 5.3% 40.6%; /* #62666d */ --canvas: 240 33.3% 0.6%; /* #010102 */ --surface-1: 210 6.2% 6.3%; /* #0f1011 */ --surface-2: 210 4.8% 8.2%; /* #141516 */ --surface-3: 210 4% 9.8%; /* #18191a */ --surface-4: 210 3.8% 10.2%; /* #191a1b */ --hairline: 223 9% 15%; /* #23252a */ --hairline-strong: 240 5.5% 21.6%; /* #34343a */ --hairline-tertiary: 240 4.6% 25.5%; /* #3e3e44 */ --inverse-canvas: 0 0% 100%; /* #ffffff */ --inverse-surface-1: 180 5.3% 96.3%; /* #f5f6f6 */ --inverse-surface-2: 180 5.9% 96.7%; /* #f6f7f7 */ --inverse-ink: 0 0% 0%; /* #000000 */ --success: 133.7 62% 40.2%; /* #27a644 */ --danger: 356.6 82.4% 66.7%; /* #f0646c */ --overlay: 0 0% 0%; /* #000000 */ --warning: 36.5 76.7% 56.3%; /* #e5a23a */ --warning-text: var(--warning); /* 8.7:1 on surface-1 */ --info: 207.1 100% 73.5%; /* #78c2ff */ --series-2: 324.1 82.9% 58.8%; /* #ed3fa7 */ --series-3: 38 95.2% 41%; /* #cc8305 */ --series-4: 169.2 73.5% 37.1%; /* #19a48b */ --series-5: 23.7 72.8% 49%; /* #d86a22 */ --series-6: 201.7 94.2% 47.3%; /* #0798ea */ --series-7: 118.2 45% 42.7%; /* #3f9e3c */ /* #6652ff text is 4.2:1 on canvas, so links and the ring use #8a77ff (6.1). */ --link: var(--primary-hover); --ring: var(--primary-hover); /* White on Figma's dark hover #8a77ff is 3.4:1. Buttons darken instead. */ --button-hover: 247.2 84.5% 59.6%; /* #5641ef, white text 6.2:1 */ /* The inverse tokens turn white in dark. The top bar and popovers stay dark. */ --topbar: var(--surface-1); --topbar-foreground: var(--ink); --topbar-muted-foreground: var(--ink-subtle); --topbar-border: var(--hairline); --topbar-border-width: 1px; --popover: var(--surface-3); --popover-foreground: var(--ink); --popover-muted-foreground: var(--ink-subtle); --popover-border: var(--hairline-strong); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --primary: 247 100% 66%; /* #6652ff */ --primary-hover: 248.4 100% 73.3%; /* #8a77ff */ --primary-focus: 247.3 98.9% 65.7%; /* #6651fe */ --on-primary: 0 0% 100%; /* #ffffff */ --secure: 234.1 23.7% 57.8%; /* #7a7fad */ --ink: 180 7% 97%; /* #f7f8f8 */ --ink-muted: 217.5 20.5% 84.7%; /* #d0d6e0 */ --ink-subtle: 218.6 6.4% 56.9%; /* #8a8f98 */ --ink-tertiary: 218.2 5.3% 40.6%; /* #62666d */ --canvas: 240 33.3% 0.6%; /* #010102 */ --surface-1: 210 6.2% 6.3%; /* #0f1011 */ --surface-2: 210 4.8% 8.2%; /* #141516 */ --surface-3: 210 4% 9.8%; /* #18191a */ --surface-4: 210 3.8% 10.2%; /* #191a1b */ --hairline: 223 9% 15%; /* #23252a */ --hairline-strong: 240 5.5% 21.6%; /* #34343a */ --hairline-tertiary: 240 4.6% 25.5%; /* #3e3e44 */ --inverse-canvas: 0 0% 100%; /* #ffffff */ --inverse-surface-1: 180 5.3% 96.3%; /* #f5f6f6 */ --inverse-surface-2: 180 5.9% 96.7%; /* #f6f7f7 */ --inverse-ink: 0 0% 0%; /* #000000 */ --success: 133.7 62% 40.2%; /* #27a644 */ --danger: 356.6 82.4% 66.7%; /* #f0646c */ --overlay: 0 0% 0%; /* #000000 */ --warning: 36.5 76.7% 56.3%; /* #e5a23a */ --warning-text: var(--warning); --info: 207.1 100% 73.5%; /* #78c2ff */ --series-2: 324.1 82.9% 58.8%; /* #ed3fa7 */ --series-3: 38 95.2% 41%; /* #cc8305 */ --series-4: 169.2 73.5% 37.1%; /* #19a48b */ --series-5: 23.7 72.8% 49%; /* #d86a22 */ --series-6: 201.7 94.2% 47.3%; /* #0798ea */ --series-7: 118.2 45% 42.7%; /* #3f9e3c */ --link: var(--primary-hover); --ring: var(--primary-hover); --button-hover: 247.2 84.5% 59.6%; /* #5641ef */ --topbar: var(--surface-1); --topbar-foreground: var(--ink); --topbar-muted-foreground: var(--ink-subtle); --topbar-border: var(--hairline); --topbar-border-width: 1px; --popover: var(--surface-3); --popover-foreground: var(--ink); --popover-muted-foreground: var(--ink-subtle); --popover-border: var(--hairline-strong); } }