/* AUTO-GENERATED from tokens.json by build.js — DO NOT EDIT. Change tokens.json, run `node build.js`. */ /* @aria-framework/theme — Field Ops Console design system (web). Drop-in token layer for any Bootstrap 5.3 app. Load order in : bootstrap.min.css → theme.css → app.css Serve web/ same-origin (e.g. mount at /theme) so fonts satisfy CSP font-src 'self'. */ /* ── Design tokens — Ops Light in :root; Ops Dark keyed on [data-bs-theme] ───*/ :root{ --font-sans:'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --brand:#0E7A6E; --brand-deep:#0A5C53; --brand-bright:#15B8A6; --brand-rgb:14,122,110; --signal:#E2710B; --paper:#F4F5F2; --surface:#FFFFFF; --surface-2:#FAFBF9; --line:#DCDAD2; --line-strong:#CBC8BC; --text:#18222A; --text-soft:#5C6770; --text-faint:#929BA1; --shadow:0 1px 2px rgba(16,24,28,.05), 0 4px 14px -6px rgba(16,24,28,.12); --shadow-lg:0 18px 50px -18px rgba(16,24,28,.30); /* Sidebar rail (light) */ --side-bg1:#FBFCFA; --side-bg2:#F3F4F0; --side-tx:#4A555E; --side-muted:#8C969D; --side-strong:#18222A; --side-active:rgba(14,122,110,.10); --side-line:rgba(24,34,42,.08); --side-card:rgba(24,34,42,.05); --side-accent:#0E7A6E; } [data-bs-theme="dark"]{ --brand:#16B5A3; --brand-deep:#0E7A6E; --brand-bright:#2FE0CC; --brand-rgb:22,181,163; --signal:#F2871F; --paper:#0C1215; --surface:#141C21; --surface-2:#192329; --line:#243038; --line-strong:#3A4854; --text:#E7EDEF; --text-soft:#9BA7AE; --text-faint:#69767D; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -18px rgba(0,0,0,.8); /* Sidebar rail (dark) */ --side-bg1:#0E1417; --side-bg2:#141C21; --side-tx:#BAC3C8; --side-muted:#69767D; --side-strong:#FFFFFF; --side-active:rgba(21,184,166,.13); --side-line:rgba(255,255,255,.07); --side-card:rgba(255,255,255,.045); --side-accent:#15B8A6; } /* ── Base — static layer (fonts, Bootstrap mapping, edge-clarity, buttons, a11y). Concatenated by build.js AFTER the generated token blocks and BEFORE the component partials in src/components/. Token values come from tokens.json. */ /* ── Self-hosted fonts (relative URLs → resolve under the mount, no CDN) ─────*/ @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap; src:url('./fonts/hanken-grotesk-wght.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('./fonts/ibm-plex-mono-400.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('./fonts/ibm-plex-mono-500.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url('./fonts/ibm-plex-mono-600.woff2') format('woff2')} /* ── Map tokens onto Bootstrap (load AFTER bootstrap.min.css so these win) ───*/ :root{ --bs-body-font-family:var(--font-sans); --bs-primary:var(--brand); --bs-primary-rgb:var(--brand-rgb); --bs-link-color:var(--brand); --bs-link-color-rgb:var(--brand-rgb); --bs-link-hover-color:var(--brand-deep); --bs-body-bg:var(--paper); --bs-body-color:var(--text); --bs-border-color:var(--line); } [data-bs-theme="dark"]{ --bs-primary:var(--brand); --bs-primary-rgb:var(--brand-rgb); --bs-link-color:var(--brand); --bs-link-color-rgb:var(--brand-rgb); --bs-link-hover-color:var(--brand-bright); --bs-body-bg:var(--paper); --bs-body-color:var(--text); --bs-border-color:var(--line); } body{font-family:var(--font-sans)} .mono,.tracking-id,code,kbd,.font-monospace{font-family:var(--font-mono)} /* ── Edge clarity — faint --line for internal dividers; --line-strong + shadow for container edges, so cards/inputs read as raised on white/paper. ────────*/ .card{ border-color:var(--line-strong); box-shadow:var(--shadow); } .form-control,.form-select{ border-color:var(--line-strong); } .input-group-text{ border-color:var(--line-strong); } .table{ --bs-table-border-color:var(--line); } .list-group{ --bs-list-group-border-color:var(--line-strong); } /* ── Brand buttons (component vars compile into Bootstrap; set explicitly) ───*/ .btn-primary{ --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand-deep); --bs-btn-hover-border-color:var(--brand-deep); --bs-btn-active-bg:var(--brand-deep); --bs-btn-active-border-color:var(--brand-deep); --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand); } .btn-outline-primary{ --bs-btn-color:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand); --bs-btn-active-bg:var(--brand); --bs-btn-active-border-color:var(--brand); } /* ── Accessibility ──────────────────────────────────────────────────────────*/ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ── Component: sidebar rail (.s-side) ─────────────────────────────────────── Nav rail, themed per scheme via the --side-* tokens (light rail in light mode, dark rail in dark mode). Mobile-first: off-canvas overlay by default; the ≥768px block puts it back in flow as the desktop rail with a collapsible icon-rail mode. Behavior lives in sidebar.js (served beside theme.css). MARKUP CONTRACT (the app renders this; see package README): #wrapper > .s-side + #page-content-wrapper .s-side > .s-brand (.s-brand-link > .s-mark + span(.s-name+.s-ver), .s-collapse[data-sidebar-toggle]) + .s-nav (.s-grp headings, .s-link[.active] items: icon + label) + .s-me (.s-av, .s-me-who > b+span, .s-out-form > .s-out) Topbar hamburger (mobile): .topbar-toggle[data-sidebar-toggle] State classes on : .sidebar-open (mobile overlay), .sidebar-collapsed (desktop rail; persist + pre-apply before paint to avoid a flash). */ /* Body itself doesn't scroll; sidebar nav + content scroll independently. */ #wrapper { height: 100vh; overflow: hidden; } #page-content-wrapper { height: 100vh; overflow-y: auto; } /* Mobile-first: the sidebar is an off-canvas overlay by default; the @media(min-width:768px) block below puts it back in flow as the desktop rail. One breakpoint, mobile-default + desktop-override — the two layers meet with no gap. sidebar.js reads the current mode from CSS (backdrop display). */ .s-side{ position:fixed; top:0; left:0; z-index:1050; min-width:236px; width:236px; height:100vh; display:flex; flex-direction:column; overflow:hidden; background:linear-gradient(180deg, var(--side-bg1), var(--side-bg2)); color:var(--side-tx); border-right:1px solid var(--side-line); transform:translateX(-100%); transition:transform .2s ease; } html.sidebar-open .s-side{ transform:translateX(0); box-shadow:0 24px 60px rgba(0,0,0,.5); } #sidebar-backdrop{ position:fixed; inset:0; z-index:1040; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .2s ease; } html.sidebar-open #sidebar-backdrop{ opacity:1; visibility:visible; } .s-brand{ display:flex; align-items:center; padding:16px 14px 12px; } .s-brand-link{ display:flex; align-items:center; gap:11px; text-decoration:none; } .s-mark{ width:34px; height:34px; border-radius:9px; flex:0 0 34px; display:grid; place-items:center; background:linear-gradient(140deg, var(--brand-bright), var(--brand-deep)); color:#fff; font-weight:800; font-size:17px; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 16px -6px var(--brand); } .s-name{ display:block; color:var(--side-strong); font-weight:700; font-size:16px; letter-spacing:-.01em; line-height:1; } .s-ver{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--side-muted); margin-top:3px; } .s-nav{ flex:1; overflow-y:auto; padding:4px 12px 12px; } .s-nav::-webkit-scrollbar{ width:7px; } .s-nav::-webkit-scrollbar-thumb{ background:var(--side-card); border-radius:8px; } .s-grp{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--side-muted); padding:16px 12px 7px; } .s-link{ display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:9px; position:relative; color:var(--side-tx); text-decoration:none; font-weight:500; font-size:14px; transition:background .14s, color .14s; white-space:nowrap; } .s-link i{ font-size:16px; width:18px; text-align:center; opacity:.85; } .s-link:hover{ background:var(--side-card); color:var(--side-strong); } .s-link.active{ background:var(--side-active); color:var(--side-strong); } .s-link.active::before{ content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--side-accent); } .s-link.active i{ opacity:1; color:var(--side-accent); } .s-me{ margin:10px 12px 14px; padding:10px 12px; border-radius:11px; display:flex; align-items:center; gap:10px; background:var(--side-card); border:1px solid var(--side-line); } .s-av{ width:34px; height:34px; border-radius:8px; flex:0 0 34px; display:grid; place-items:center; background:linear-gradient(140deg, var(--brand), var(--brand-deep)); color:#fff; font-weight:700; font-size:13px; } .s-me-who{ min-width:0; line-height:1.25; flex:1; } .s-me-who b{ display:block; color:var(--side-strong); font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s-me-who span{ font-family:var(--font-mono); font-size:10.5px; color:var(--side-muted); text-transform:uppercase; letter-spacing:.06em; } .s-out-form{ margin:0; } .s-out{ border:0; background:transparent; color:var(--side-muted); font-size:16px; line-height:1; padding:4px; cursor:pointer; } .s-out:hover{ color:var(--side-strong); } /* Collapse toggle — the sidebar-header chevron (shown on desktop) and the topbar hamburger (shown on mobile, opens the overlay). */ .s-collapse{ flex:0 0 auto; margin-left:auto; width:28px; height:28px; padding:0; border:0; cursor:pointer; background:transparent; color:var(--side-muted); border-radius:7px; display:none; place-items:center; font-size:15px; } .s-collapse:hover{ background:var(--side-card); color:var(--side-strong); } .s-collapse i{ display:block; transition:transform .18s ease; } /* rotate the (centre origin) — no SVG-pivot bug */ html.sidebar-collapsed .s-collapse i{ transform:rotate(180deg); } /* points right = expand */ /* Keyboard-focus ring in the rail's own accent — the base a11y rule uses var(--brand), which can vanish against the rail background. */ .s-link:focus-visible, .s-out:focus-visible, .s-brand-link:focus-visible, .s-collapse:focus-visible { outline-color: var(--side-accent); } .topbar-toggle{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--text-soft); display:grid; place-items:center; font-size:18px; cursor:pointer; padding:0; } .topbar-toggle:hover{ color:var(--text); } /* ── Desktop (≥768px): in-flow sidebar, header chevron, collapsed icon rail ──*/ @media (min-width: 768px){ .s-side{ position:static; transform:none; box-shadow:none; transition:width .18s ease, min-width .18s ease; } #sidebar-backdrop{ display:none; } .topbar-toggle{ display:none; } /* desktop uses the header chevron */ .s-collapse{ display:grid; } /* chevron shown only on desktop */ html.sidebar-collapsed .s-side{ min-width:64px; width:64px; } /* Stack the logo + collapse chevron so the chevron stays reachable to expand. */ html.sidebar-collapsed .s-brand{ flex-direction:column; gap:9px; padding:16px 0 12px; } html.sidebar-collapsed .s-brand-link{ justify-content:center; gap:0; } html.sidebar-collapsed .s-brand-link > span:last-child{ display:none; } html.sidebar-collapsed .s-collapse{ margin-left:0; } html.sidebar-collapsed .s-nav{ padding:4px 8px 12px; } html.sidebar-collapsed .s-grp{ display:none; } html.sidebar-collapsed .s-link{ justify-content:center; gap:0; padding-left:0; padding-right:0; } html.sidebar-collapsed .s-link span{ display:none; } html.sidebar-collapsed .s-link.active::before{ display:none; } html.sidebar-collapsed .s-me{ flex-direction:column; gap:8px; padding:10px 6px; margin:10px 8px 14px; } html.sidebar-collapsed .s-me-who{ display:none; } }