/* * Heluca theme bridge — light/dark semantics + daisyUI v5 mapping. * * UPSTREAMED into the design system so consuming apps copy it verbatim, exactly * like tokens/*.css. It is NOT @imported by styles.css (it references daisyUI's * --color-* slots and resolved --t-* neutrals that belong to the consuming app, * not to the token layer). Copy it into your app's stylesheet AFTER the daisyUI * plugin — see readme.md "Svelte implementation" and @heluca/svelte's README. * * Two jobs the token layer leaves to the app: * 1. Re-point the semantic aliases per [data-theme], so Heluca's own * component vocabulary (--bg, --surface-card) works in both themes, and * expose resolved --t-* neutrals. * 2. Map those onto daisyUI v5's --color-* variables, so existing markup * (.btn, .input, .card, .badge, .menu, .alert …) inherits the brand with * no per-component edits — the highest-leverage part of adoption. * * Heluca is dark-native (Hecate is "dark, torch-lit"); light is a first-class * daytime mapping. Your app sets data-theme="light|dark" on ; this file * defines nothing without it. * * NOTE ON --text-body: it is the 16px body SIZE (defined once, in * tokens/typography.css, consistent with --text-heading / --text-label / * --text-caption). The old conflicting colour alias was removed from * tokens/colors.css at source, so `font-size: var(--text-body)` is valid and * this file must NOT re-point it to a colour. Body/label colour is --t-text. */ /* ── Semantic aliases: dark (Heluca's native) ─────────────────────── */ [data-theme='dark'] { color-scheme: dark; --bg: var(--ink); --surface-card: var(--surface); /* resolved neutrals for this theme */ --t-base: var(--ink); --t-base-200: var(--base-200); --t-surface: var(--surface); --t-surface-raised: var(--surface-raised); --t-text: var(--text); --t-text-muted: var(--text-muted); --t-text-faint: var(--text-faint); --t-hairline: var(--hairline); --t-divider: var(--divider); } /* ── Semantic aliases: light ──────────────────────────────────────── */ [data-theme='light'] { color-scheme: light; --bg: var(--paper); --surface-card: var(--paper-surface); --t-base: var(--paper); --t-base-200: #ece7dc; /* between --paper and --paper-hairline */ --t-surface: var(--paper-surface); --t-surface-raised: #ffffff; --t-text: var(--text-dark); --t-text-muted: var(--text-grey); --t-text-faint: var(--text-lightgrey); --t-hairline: var(--paper-hairline); --t-divider: var(--paper-hairline); /* On light, elevation-1's hairline ring must use the paper hairline. */ --elev-1: 0 0 0 1px var(--paper-hairline); /* Shadows tuned for dark are far too heavy on paper. */ --elev-2: 0 6px 16px -6px rgba(38, 35, 43, 0.18); --elev-3: 0 18px 44px -12px rgba(38, 35, 43, 0.28); --glow: 0 10px 28px -8px rgba(255, 164, 21, 0.45); } /* * ── daisyUI v5 bridge ───────────────────────────────────────────── * daisyUI reads --color-* custom properties. Wiring them to Heluca tokens is * what makes existing markup on-brand with no per-component edits. * Radii come from Heluca's shape scale: one radius per element class. */ [data-theme='light'], [data-theme='dark'] { --color-base-100: var(--t-base); --color-base-200: var(--t-base-200); --color-base-300: var(--t-surface-raised); --color-base-content: var(--t-text); --color-primary: var(--orange); --color-primary-content: var(--on-orange); --color-secondary: var(--blue); --color-secondary-content: var(--on-blue); --color-accent: var(--orange-bright); --color-accent-content: var(--on-orange); --color-neutral: var(--t-surface); --color-neutral-content: var(--t-text); --color-info: var(--info); --color-success: var(--success); --color-warning: var(--warning); --color-error: var(--danger); --color-info-content: var(--on-blue); --color-success-content: #04140d; --color-warning-content: var(--on-orange); --color-error-content: #ffffff; /* Shape scale — daisyUI radius slots mapped to Heluca element classes. */ --radius-selector: var(--radius-input); /* checkbox, radio, toggle, badge */ --radius-field: var(--radius-input); /* input, select, textarea */ --radius-box: var(--radius-card); /* card, modal, alert */ } /* * daisyUI v5 sizing slots — pinned by the SYSTEM, applied to every Heluca * theme. Previously this block named only light/dark, so the temperament * themes silently fell back to daisyUI's built-in `--border` / `--size-*` / * `--depth` — wrong for Terminal especially, whose entire aesthetic is a 1px * border. A temperament may still override any of these in its own block * (Business/Terminal set their own radii); the point is that they're never * left to daisyUI's defaults by accident. */ [data-theme='light'], [data-theme='dark'], [data-theme='consulting'], [data-theme='business'], [data-theme='business-dark'], [data-theme='terminal'], [data-theme='terminal-light'] { --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } /* * daisyUI's .btn inherits --radius-field (8px, correct for inputs) but Heluca * specifies 14px for buttons. One radius per element class is a stated rule, * so buttons are corrected explicitly rather than by bending --radius-field. */ .btn { border-radius: var(--radius-button); font-family: var(--font-sans); font-weight: 700; } /* * Pills stay pills. Badges are CHROME by default — across the estate the common * case is system status ("revoked", health, counts), which is app-authored → * Public Sans, consistent with every other label. Opt into the content face * with .badge-content (or Badge userContent) for genuinely user-authored values * such as tag names or device labels. */ .badge { border-radius: var(--radius-pill); font-family: var(--font-sans); } .badge-content { font-family: var(--font-work); } /* Sheets/modals use the sheet radius, not the card radius. */ .modal-box { border-radius: var(--radius-sheet); } /* * ── Type: chrome vs content ─────────────────────────────────────── * "The app is Public Sans, the user's words are Plex." Chrome is the default; * fields the user types into are switched to the work face. */ body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-body); background: var(--bg); color: var(--t-text); } /* * Fields hold user content → work face. Do NOT set font-size on these directly: * daisyUI v5 size classes read `max(var(--font-size, floor), floor)`, and a * direct font-size here has equal specificity but lands later in the cascade, * so it defeats every -sm/-xs modifier (16px in a 24px box). Set only the * --font-size override point per size and let daisyUI's own rules apply. */ .input, .textarea, select.select { font-family: var(--font-work); } .input, .textarea { --font-size: var(--text-work); } /* 16px — clears the .875rem floor */ .input-sm, .textarea-sm { --font-size: var(--text-label); } /* 13px — clears the .75rem floor */ .input-xs, .textarea-xs { --font-size: var(--text-caption); } /* 12px — clears the .6875rem floor */ /* * .select and .file-input set font-size DIRECTLY (no --font-size indirection), * so the override above can't reach them. We keep the work FACE and leave * daisyUI's own size scale intact rather than restating font-size per size * (which would re-clamp small sizes). The face is what the chrome≠content rule * cares about; the numeric scale is daisyUI's and is correct. */ .file-input { font-family: var(--font-work); } /* * Fields need a SURFACE against the page. daisyUI defaults .input et al. to * --color-base-100, which the bridge maps to --t-base (the page background) — * leaving a field with no fill. Lift them to --t-surface in both themes * (also matches Heluca's own TextField, which uses --t-surface). Do NOT retune * --color-base-100 — that IS the page background and is correct. */ .input, .textarea, select.select, .file-input, .modal-box { background-color: var(--t-surface); } /* * The native