/* * Huli FHIR IG — semantic design tokens (#1364 §Visual identity) * * Adopts the shadcn-style semantic taxonomy on top of the existing Huli * palette anchor (#0B0D10 canvas, #12151A surface, #4D8DFF accent). * Tokens are role-based (--text-primary, --border-subtle, * --surface-raised) so component CSS reads as English rather than as * gray-numbers. * * Loaded by the CI post-process step in * `.github/workflows/fhir-ig-build.yml` (Step: "Apply Huli styling to * IG output"). The step copies this file to `output/assets/css/` and * injects `` * into every `*.html` page's ``. * * Sections: * 1. Color: canvas + surface layers * 2. Color: text * 3. Color: borders * 4. Color: accent + semantic * 5. Color: code + syntax * 6. Spacing scale (4px base) * 7. Border radius (two-tier Stripe pattern) * 8. Typography (Inter + JetBrains Mono) * 9. Layout * 10. Motion * 11. Focus ring * 12. Legacy --huli-* aliases (back-compat) * 13. HL7-emitted CSS variable aliases */ :root { /* --- 1. Color: canvas + surface layers (dark, primary) --- */ --canvas: #0b0d10; /* page background */ --surface: #12151a; /* cards, panels, table headers */ --surface-raised: #1a1f26; /* hover-raised, dropdown */ --surface-sunken: #0e1116; /* code block interior — DARKER than canvas */ /* --- 2. Color: text --- */ --text-primary: #e7eaef; --text-secondary: #a8adb3; --text-tertiary: #6e747c; --text-on-accent: #ffffff; /* --- 3. Color: borders + dividers --- */ --border-subtle: #1f252d; --border-default: #2a323c; --border-strong: #3b4552; /* --- 4. Color: accent (rationed) + semantic --- */ --accent: #4d8dff; --accent-hover: #6aa0ff; --accent-muted: rgba(77, 141, 255, 0.12); --accent-border: rgba(77, 141, 255, 0.32); --success: #4ade80; --success-muted: rgba(74, 222, 128, 0.1); --warn: #f5b547; --warn-muted: rgba(245, 181, 71, 0.1); --danger: #f87171; --danger-muted: rgba(248, 113, 113, 0.1); --info: var(--accent); --info-muted: var(--accent-muted); /* --- 5. Color: code + syntax --- */ --code-bg: var(--surface-sunken); --code-border: var(--border-subtle); --code-text: #d7dce3; --code-inline-bg: rgba(255, 255, 255, 0.06); --code-inline-text: #c8d0db; --syn-comment: #6e747c; --syn-keyword: #b392f0; --syn-string: #9ecbff; --syn-number: #f5b547; --syn-function: #79b8ff; --syn-tag: #f97583; --syn-attr: #b392f0; --syn-punctuation: #a8adb3; /* --- 6. Spacing scale (4px base, strict) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* --- 7. Border radius (two-tier Stripe pattern) --- */ --radius-interactive: 4px; /* buttons, inputs, kbd, badge, inline code */ --radius-surface: 12px; /* cards, callouts, code blocks */ --radius-pill: 999px; /* status pills, avatar */ /* --- 8. Typography --- */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 16px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 40px; --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.6; --lh-loose: 1.75; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- 9. Layout --- */ --content-max: 760px; --container-max: 1440px; --sidebar-w: 272px; --toc-w: 224px; --topbar-h: 56px; --content-pad-x: 32px; --content-pad-y: 48px; /* --- 10. Motion --- */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* --- 11. Focus ring --- */ --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent); /* --- 12. Legacy --huli-* aliases (back-compat with anything referencing them) --- */ --huli-canvas: var(--canvas); --huli-surface: var(--surface); --huli-surface-2: var(--surface-raised); --huli-surface-3: var(--surface-raised); --huli-fg: var(--text-primary); --huli-fg-muted: var(--text-secondary); --huli-fg-faint: var(--text-tertiary); --huli-border: var(--border-subtle); --huli-border-strong: var(--border-default); --huli-accent: var(--accent); --huli-accent-hover: var(--accent-hover); --huli-accent-soft: var(--accent-muted); --huli-warn: var(--warn); --huli-danger: var(--danger); --huli-success: var(--success); --huli-font-sans: var(--font-sans); --huli-font-mono: var(--font-mono); --huli-reading-column: var(--content-max); /* --- 13. HL7-emitted CSS variable aliases --- */ --navbar-bg-color: var(--canvas); --footer-bg-color: var(--surface); --footer-container-color: var(--canvas); --btn-hover-color: var(--accent); --stripe-bg-color: var(--border-subtle); --btn-active-color: var(--accent); --btn-text-color: var(--text-primary); --stu-note-background-color: transparent; --stu-note-border-left-color: var(--warn); --footer-highlight-text-color: var(--text-secondary); --footer-hyperlink-text-color: var(--accent); --footer-nav-bg-color: var(--surface); } /* Optional light theme — toggled by .light class on . Dark is the default. */ :root.light { --canvas: #fafaf7; --surface: #ffffff; --surface-raised: #f4f4ee; --surface-sunken: #0e1116; /* code stays dark even in light theme */ --text-primary: #0f1419; --text-secondary: #4f5560; --text-tertiary: #8a8f99; --border-subtle: #ecece6; --border-default: #ddddd4; --border-strong: #bfbfb4; --code-text: #d7dce3; --code-inline-bg: rgba(0, 0, 0, 0.06); --code-inline-text: #1f2937; }