/* File: viewers/shared/tokens.css * * Single source of truth for every design token in this project. * Implements DESIGN.md sections 2-8 (color, type, spacing, radius, * elevation, motion, focus). No surface gets to redefine these. * * Theming model: * 1. :root defines the dark-mode values (project default; * radiologists work in dark rooms). * 2. [data-theme="light"] on swaps to light values. * 3. If no explicit data-theme is set, prefers-color-scheme: light * flips to light as a fallback. Explicit setting always wins. * * The token names are mode-agnostic so a surface can write * `color: var(--text-primary)` without knowing or caring which mode * is active. * * Consumers: * - viewers/landing/ (landing page) * - compose/keycloak/themes/evemeta/ (Keycloak login) * - services/benchmark-dashboard/templates/ (dashboard) * - viewers/ohif/src/styles/ (OHIF fork) * * All of them @import "/" -- the file is small * enough that duplicating it per surface is preferable to wiring up * a shared CSS module loader across four very different build * pipelines (Go html/template, FreeMarker, plain HTML, Vite). * * Rule: if you find yourself wanting a new token, add it here first * and refer to it from the surface; never inline a one-off color or * spacing value at the surface level. Run bin/check-design.sh to * enforce. */ /* ============================================================ * 1. Dark mode -- the project default * ============================================================ */ :root, [data-theme="dark"] { /* -- Surfaces (DESIGN.md sec.2) -- */ --surface-canvas: #0b0d10; --surface-raised: #15181d; --surface-sunken: #070809; --surface-overlay: #1c2026; /* -- Text -- */ --text-primary: #f4f6f8; --text-secondary: #a8b0bb; --text-muted: #6b7480; --text-inverse: #0b0d10; --text-link: var(--accent-500); /* -- Border -- */ --border-default: #2a2f37; --border-strong: #3a414b; --border-focus: var(--accent-500); /* -- Accent: pale periwinkle (cool, soothing) -- * Designed for low-saturation surfaces. Because the 500 is light, * --accent-on is DARK (text-inverse), not white. Reverses the * usual on-accent convention. All combos verified WCAG AA. */ --accent-50: #f0f2f9; --accent-200: #c8cee4; --accent-500: #a9b4d6; --accent-600: #919dc7; --accent-700: #7886b8; --accent-on: #0b0d10; /* -- Semantic -- */ --success-500: #1f9d65; --warning-500: #d99425; --danger-500: #dc4646; --info-500: var(--accent-500); /* -- Brand-specific (do NOT reuse for UI) -- */ --health-mark-red: #d92626; /* -- Overlay shadow (the ONLY shadow per DESIGN.md sec.6) -- */ --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.28); /* -- Modal backdrop wash (only on the wash
, never on text) -- */ --overlay-backdrop: rgba(0, 0, 0, 0.45); } /* ============================================================ * 2. Light mode -- explicit opt-in via [data-theme="light"] * ============================================================ */ [data-theme="light"] { --surface-canvas: #fafbfc; --surface-raised: #ffffff; --surface-sunken: #f0f2f5; --surface-overlay: #ffffff; --text-primary: #0b0d10; --text-secondary: #3f4853; --text-muted: #6b7480; --text-inverse: #f4f6f8; --border-default: #dde1e6; --border-strong: #c0c6cd; /* Accent scale is identical in both modes (clinical teal works on * both backgrounds; verified vs WCAG AA in DESIGN.md sec.2). */ --success-500: #0f7a4a; --warning-500: #b87617; --danger-500: #c0312f; --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.08); --overlay-backdrop: rgba(15, 23, 42, 0.30); } /* ============================================================ * 3. prefers-color-scheme fallback * * Only fires when the consumer hasn't explicitly set data-theme. * The :not() guard makes the explicit override authoritative. * ============================================================ */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --surface-canvas: #fafbfc; --surface-raised: #ffffff; --surface-sunken: #f0f2f5; --surface-overlay: #ffffff; --text-primary: #0b0d10; --text-secondary: #3f4853; --text-muted: #6b7480; --text-inverse: #f4f6f8; --border-default: #dde1e6; --border-strong: #c0c6cd; --success-500: #0f7a4a; --warning-500: #b87617; --danger-500: #c0312f; --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.08); --overlay-backdrop: rgba(15, 23, 42, 0.30); } } /* ============================================================ * 4. Typography (DESIGN.md sec.3) * ============================================================ */ :root { --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Pair: size and line-height live together. Use as * font: var(--font-weight-md) var(--text-sm)/var(--lh-sm) var(--font-sans); * or just `font-size: var(--text-sm); line-height: var(--lh-sm);`. */ --text-4xs: 10px; --lh-4xs: 14px; --text-3xs: 11px; --lh-3xs: 16px; --text-2xs: 12px; --lh-2xs: 16px; --text-xs: 13px; --lh-xs: 18px; --text-sm: 14px; --lh-sm: 20px; --text-md: 16px; --lh-md: 24px; --text-lg: 18px; --lh-lg: 26px; --text-xl: 22px; --lh-xl: 30px; --text-2xl: 28px; --lh-2xl: 36px; --text-3xl: 36px; --lh-3xl: 44px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 600; } /* ============================================================ * 5. Spacing (4px grid, DESIGN.md sec.4) * ============================================================ */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; } /* ============================================================ * 6. Radius (DESIGN.md sec.5) * ============================================================ */ :root { --radius-0: 0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; } /* ============================================================ * 7. Motion (DESIGN.md sec.7) * ============================================================ */ :root { --motion-snap: 100ms; --motion-base: 160ms; --motion-slow: 240ms; --motion-ease: cubic-bezier(0.2, 0, 0, 1); } @media (prefers-reduced-motion: reduce) { :root { --motion-snap: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } } /* ============================================================ * 8. Focus ring (DESIGN.md sec.8) * * Two-layer ring: a canvas-colored offset (so it reads on adjacent * elements regardless of surface tier) followed by the accent. * ============================================================ */ :root { --focus-ring: 0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--accent-500); } /* ============================================================ * 9. Global reset (minimum) * * Just enough to make tokens work consistently. We DON'T do a full * normalize/reset here -- each surface (especially OHIF) brings its * own. This block only sets the document-level defaults the tokens * assume. * ============================================================ */ html { background: var(--surface-canvas); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--font-weight-regular); /* Tabular numerals everywhere by default (DESIGN.md sec.3). */ font-feature-settings: "tnum" 1, "cv11" 1; /* Render hints */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--accent-500); color: var(--accent-on); } /* ============================================================ * 10. Universal focus visible * * Every interactive element gets the ring by default unless it * specifies its own. Removing this is forbidden (DESIGN.md sec.12). * ============================================================ */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* ============================================================ * 11. The Inter and JetBrains Mono @font-face declarations live in * viewers/shared/fonts.css. Surfaces that need self-hosted * fonts import that file alongside this one. (Splitting tokens * from fonts lets the tokens load synchronously while fonts * load with font-display: swap.) * ============================================================ */