/*! ============================================================================ * HELM Design Tokens — canonical source of truth * ---------------------------------------------------------------------------- * Consolidated from the v5 release packages (helm-theme.css + helm-creative.css * + helm-components.css). Every v5 token VALUE is preserved byte-for-byte; the * blocks marked "HELM addition" are new (focus, motion, z-index, state-soft / * on-color, overlay scrim, per-surface density). This file is PURE VARIABLES — * no element styling — so it can sit under MudBlazor, Radzen, QuickGrid, a * bespoke HELM kit, or a native client without conflict. * * Consume by setting attributes on (or any subtree to scope a region): * data-brand = (default Neighbourly) | "creative" * data-theme = (default light) | "dark" * data-app = helm|datum|place|anchor|wake|sonar|chart|atlas|range|compass|fleet * |wave|port|cargo|beacon|harbour|waypoint|channel|bridge * data-surface = "ops" | "workspace" (default) | "consumer" * * e.g. * ========================================================================== */ /* ============================================================ 1 · BASE / Neighbourly brand (light) [v5 helm-theme.css] ============================================================ */ :root { /* Brand primitives */ --helm-blue:#282A71; --helm-green:#56BE8B; --helm-dark-grey:#464647; --helm-light-grey:#F7F8F9; --helm-blue-700:#21225D; --helm-blue-50:#EEEEF4; --helm-green-50:#EBF7F1; /* Semantic — color */ --color-primary:var(--helm-blue); --color-primary-hover:var(--helm-blue-700); --color-primary-soft:var(--helm-blue-50); --color-accent:var(--helm-green); --color-accent-soft:var(--helm-green-50); --color-success:#56BE8B; --color-warning:#E0A33C; --color-danger:#D14343; --color-info:#2F6FED; /* Surfaces & text */ --bg-app:#F7F8F9; --bg-surface:#FFFFFF; --bg-raised:#FFFFFF; --bg-sunken:#F0F1F2; --border:#DEDFE0; --border-strong:#C6C6C7; --text-strong:#1A1C2E; --text-default:#464647; --text-muted:#6E6E6E; --text-on-primary:#FFFFFF; /* muted darkened #878787->#6E6E6E for WCAG AA body contrast */ /* Type */ --font-heading:"Lufga","Montserrat","Segoe UI",Arial,sans-serif; --font-body:"Montserrat","Segoe UI",Arial,sans-serif; --font-mono:"JetBrains Mono",Consolas,monospace; --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:34px; --fs-3xl:44px; --fw-body:500; --fw-medium:600; --fw-bold:800; --lh-tight:1.15; --lh-body:1.55; /* Shape & space */ --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-8:48px; /* Elevation */ --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08); --shadow-md:0 4px 12px rgba(16,24,40,.10); --shadow-lg:0 12px 32px rgba(16,24,40,.14); /* Active app accent (overridden per [data-app]) */ --accent:var(--helm-blue); --accent-ink:var(--helm-blue-700); --accent-soft:var(--helm-blue-50); /* App-bar / chrome backing. Light = the app's primary (per [data-app]); dark re-points it to a dark neutral (§2) so the chrome darkens with the theme even though the per-app rules re-assert --color-primary. Chrome (HelmAppShell topbar, app bars) should back off this, not --color-primary. */ --chrome-bg:var(--color-primary); /* ---- HELM addition · state soft-fills + readable on-color ---- */ --color-success-soft:#EBF7F1; --color-on-success:#1E5C40; --color-warning-soft:#FBF1E0; --color-on-warning:#7A5314; --color-danger-soft:#FBEAEA; --color-on-danger:#8A2A2A; --color-info-soft:#EAF1FD; --color-on-info:#1B4FB0; /* ---- HELM addition · overlay scrim ---- */ --bg-overlay:rgba(16,24,40,.45); /* ---- HELM addition · focus ring (keyboard) ---- */ --focus-ring:0 0 0 3px color-mix(in srgb, var(--color-primary) 38%, transparent); --focus-ring-danger:0 0 0 3px color-mix(in srgb, var(--color-danger) 40%, transparent); /* ---- HELM addition · motion ---- */ --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms; --ease-standard:cubic-bezier(.2,0,0,1); --ease-emphasized:cubic-bezier(.3,0,0,1); /* ---- HELM addition · z-index scale ---- */ --z-sticky:100; --z-dropdown:1000; --z-overlay:1100; --z-modal:1200; --z-toast:1300; /* ---- HELM addition · density defaults (= workspace/comfortable) ---- */ --control-h:40px; --row-h:48px; --gutter:var(--space-4); --fs-base:var(--fs-md); } /* ============================================================ 2 · DARK theme [v5 + additions] ============================================================ */ [data-theme="dark"] { --bg-app:#0E1326; --bg-surface:#161C33; --bg-raised:#1C2340; --bg-sunken:#0A0F1F; --border:#262E4D; --border-strong:#38416B; --text-strong:#F4F6FB; --text-default:#C4CBDC; --text-muted:#8A92A8; --color-primary:#898AB1; --color-primary-hover:#A9AAC6; --color-primary-soft:#1C2340; --color-accent:#67C497; --accent:#898AB1; --accent-ink:#A9AAC6; --accent-soft:#1C2340; --chrome-bg:#1C2340; /* dark chrome — not the per-app primary, so app bars darken with the theme */ --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.45); --shadow-lg:0 12px 32px rgba(0,0,0,.55); /* ---- HELM addition (dark) ---- */ --color-success-soft:#13301F; --color-on-success:#8FE3B6; --color-warning-soft:#3A2C12; --color-on-warning:#F2C572; --color-danger-soft:#3A1A1A; --color-on-danger:#F1A1A1; --color-info-soft:#16213F; --color-on-info:#9DB9F2; --bg-overlay:rgba(0,0,0,.6); } /* ============================================================ 3 · CREATIVE brand [v5 helm-creative.css] ============================================================ */ :root[data-brand="creative"] { --color-primary:#0B1B33; --color-primary-hover:#28364B; --color-primary-soft:#EBEDEF; --color-accent:#17B6A7; --color-accent-soft:#E3F6F4; --color-info:#3B82F6; --bg-app:#EEF3F8; --bg-surface:#FFFFFF; --border:#D6DBDF; --accent:#17B6A7; --accent-ink:#128E82; --accent-soft:#E3F6F4; --font-heading:"Sora","Montserrat","Segoe UI",Arial,sans-serif; } :root[data-brand="creative"][data-theme="dark"] { --bg-app:#0B1B33; --bg-surface:#1A293F; --bg-raised:#233247; --border:#2D3B50; --color-primary:#17B6A7; --accent:#17B6A7; } /* ============================================================ 4 · PER-APP accents [v5 helm-components.css] ------------------------------------------------------------ Sets the active --accent triplet (+ --accent-100) and re-points --color-primary so the app's identity color flows through chrome, links, focus, and primary actions. ============================================================ */ [data-app="helm"] {--accent:#282A71;--accent-ink:#1F2158;--accent-soft:#EAEAF1;--accent-100:#D8D9E5;--color-primary:#282A71;--color-primary-hover:#1F2158;--color-primary-soft:#EAEAF1;} /* core */ [data-app="datum"] {--accent:#5B5FCF;--accent-ink:#474AA1;--accent-soft:#EFEFFA;--accent-100:#E1E2F6;--color-primary:#5B5FCF;--color-primary-hover:#474AA1;--color-primary-soft:#EFEFFA;} /* foundation · Shared Meaning & Contracts */ [data-app="place"] {--accent:#2E7DB8;--accent-ink:#246290;--accent-soft:#EAF2F8;--accent-100:#D9E8F2;--color-primary:#2E7DB8;--color-primary-hover:#246290;--color-primary-soft:#EAF2F8;} /* foundation · Site & Endpoint Truth */ [data-app="anchor"] {--accent:#5B6B7B;--accent-ink:#475360;--accent-soft:#EFF0F2;--accent-100:#E1E4E7;--color-primary:#5B6B7B;--color-primary-hover:#475360;--color-primary-soft:#EFF0F2;} /* foundation · Provisioning & Control */ [data-app="wake"] {--accent:#1F7A8C;--accent-ink:#185E6C;--accent-soft:#E8F3F5;--accent-100:#D4E9ED;--color-primary:#1F7A8C;--color-primary-hover:#185E6C;--color-primary-soft:#E8F3F5;} /* foundation · Audit & Evidence */ [data-app="sonar"] {--accent:#1497A6;--accent-ink:#107682;--accent-soft:#E7F4F6;--accent-100:#D3E9ED;--color-primary:#1497A6;--color-primary-hover:#107682;--color-primary-soft:#E7F4F6;} /* foundation · Query & Retrieval */ [data-app="chart"] {--accent:#E08A3C;--accent-ink:#AF6C2F;--accent-soft:#FCF3EC;--accent-100:#F9EADC;--color-primary:#E08A3C;--color-primary-hover:#AF6C2F;--color-primary-soft:#FCF3EC;} /* truth · Healthcare Truth */ [data-app="atlas"] {--accent:#1F9C9C;--accent-ink:#187A7A;--accent-soft:#E9F5F5;--accent-100:#D7EDED;--color-primary:#1F9C9C;--color-primary-hover:#187A7A;--color-primary-soft:#E9F5F5;} /* truth · Market & Territory */ [data-app="range"] {--accent:#BC5A93;--accent-ink:#954874;--accent-soft:#FAEEF5;--accent-100:#F4DCEA;--color-primary:#BC5A93;--color-primary-hover:#954874;--color-primary-soft:#FAEEF5;} /* truth · Map & Distance */ [data-app="compass"] {--accent:#56BE8B;--accent-ink:#43946C;--accent-soft:#EEF8F3;--accent-100:#E1F3EA;--color-primary:#56BE8B;--color-primary-hover:#43946C;--color-primary-soft:#EEF8F3;} /* truth · Pricing & Decisions */ [data-app="fleet"] {--accent:#2F6FED;--accent-ink:#2557B9;--accent-soft:#EAF1FD;--accent-100:#DAE5FC;--color-primary:#2F6FED;--color-primary-hover:#2557B9;--color-primary-soft:#EAF1FD;} /* movement · Fulfillment & Logistics */ [data-app="wave"] {--accent:#21A8C4;--accent-ink:#1A8399;--accent-soft:#E9F6F9;--accent-100:#D7EFF4;--color-primary:#21A8C4;--color-primary-hover:#1A8399;--color-primary-soft:#E9F6F9;} /* movement · Work Availability */ [data-app="port"] {--accent:#4A5DE8;--accent-ink:#3A49B5;--accent-soft:#EDEFFD;--accent-100:#DEE2FB;--color-primary:#4A5DE8;--color-primary-hover:#3A49B5;--color-primary-soft:#EDEFFD;} /* movement · Rx Intake & Transfer */ [data-app="cargo"] {--accent:#C77F33;--accent-ink:#9B6328;--accent-soft:#F9F2EB;--accent-100:#F5E8DA;--color-primary:#C77F33;--color-primary-hover:#9B6328;--color-primary-soft:#F9F2EB;} /* movement · Inventory & Replenishment */ [data-app="beacon"] {--accent:#E86A5C;--accent-ink:#B55348;--accent-soft:#FDF0EF;--accent-100:#FBE4E2;--color-primary:#E86A5C;--color-primary-hover:#B55348;--color-primary-soft:#FDF0EF;} /* engage · Patient Outreach */ [data-app="harbour"] {--accent:#0E9F6E;--accent-ink:#0B7C56;--accent-soft:#E7F5F0;--accent-100:#D4EEE5;--color-primary:#0E9F6E;--color-primary-hover:#0B7C56;--color-primary-soft:#E7F5F0;} /* engage · Payments */ [data-app="waypoint"]{--accent:#607089;--accent-ink:#4B576B;--accent-soft:#EFF1F3;--accent-100:#E2E5EA;--color-primary:#607089;--color-primary-hover:#4B576B;--color-primary-soft:#EFF1F3;} /* transport · Tenant Router */ [data-app="channel"] {--accent:#2E8FB0;--accent-ink:#247089;--accent-soft:#EAF4F7;--accent-100:#D9EBF1;--color-primary:#2E8FB0;--color-primary-hover:#247089;--color-primary-soft:#EAF4F7;} /* transport · Per-Tenant Connection */ [data-app="bridge"] {--accent:#4A6FA5;--accent-ink:#3A5781;--accent-soft:#EDF1F6;--accent-100:#DEE5EF;--color-primary:#4A6FA5;--color-primary-hover:#3A5781;--color-primary-soft:#EDF1F6;} /* transport · Connection Span (legacy) */ /* ============================================================ 5 · SURFACE density [HELM addition] ------------------------------------------------------------ Maps the three surface archetypes to density tokens. Components should size off --control-h / --row-h / --gutter / --fs-base rather than hard-coding, so one attribute reflows the whole surface. Default (no attribute) == workspace/comfortable. ============================================================ */ [data-surface="ops"] { --control-h:32px; --row-h:34px; --gutter:var(--space-3); --fs-base:var(--fs-sm); } /* dense, desktop, power users */ [data-surface="workspace"] { --control-h:40px; --row-h:48px; --gutter:var(--space-4); --fs-base:var(--fs-md); } /* comfortable, desktop + tablet */ [data-surface="consumer"] { --control-h:48px; --row-h:56px; --gutter:var(--space-5); --fs-base:var(--fs-md); } /* spacious, touch-first */ /* ============================================================ 6 · Global guards [HELM addition] ============================================================ */ /* Predictable box model: width/height include padding + border, so a width:100% control with padding never overflows its container. */ *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { :root { --motion-fast:0ms; --motion-base:0ms; --motion-slow:0ms; } }