/** * Harley's — Oak Room · brand-book deck token layer (hand-authored) * * Kept-room paradigm. Warm parchment ground + warm stone ink + quarantined * lamplight amber. SHARP corners (radius-none is CANON), FLAT elevation * (every shadow resolves to none — CANON), EB Garamond single family. * * Usage (deck): loaded by every shell AFTER fonts.generated.css, * BEFORE deck.css. LOAD ORDER IS LAW. * * Governance: src/themes/harleys/CANON.md (composed; awaiting every-time * adjudication before lock) + tarva-brand-book/harleys/PLAN.md (LOCKED). * * ────────────────────────────────────────────────────────────────────── * COLOR PRIMITIVES + SEMANTIC ALIASES — generated from palette.ts. * See ADR 0018. The @import below brings in the 60 primitive ramp vars, * the 22 semantic aliases (light + dark), the 5 status anchors, the font * stacks, and the shadcn↔contract bridge. * * NON-COLOR + binding tokens (sharp radii, flat shadows, the amber-CTA * foreground ink, the display-font indirection, the generic status * companions, and the Chronica-V2 alias layer) are hand-authored below. * The baker (`scripts/build-themes.mjs`) only ever writes * `tokens.generated.css`; this file is hand-authored and SURVIVES a * re-bake — color updates flow through the @import while the structural * regime tokens persist. Mirrors the meadow / echo-quill pattern. * * Oak Room deltas from the Reaper original this layer was cloned from: * (1) --on-accent / --accent-foreground bind PRIMARY-900 ink (#1e1b18) — * 5.5:1 on lamplight amber #b8864a; NB the canon QUARANTINES accent * from ever being an interactive fill — these companions exist only * for teaching swatches/washes inside the book itself. * (2) Fonts: EB Garamond display+body (tokens.generated.css binds * --font-display/--font-body directly); mono stays system SFMono. * (3) There is NO cta Button variant in this system — Button is * substituted by ProofEnclosure (canon Res.2). * ────────────────────────────────────────────────────────────────────── */ @import './tokens.generated.css'; /* ============================================================ LIGHT MODE — non-color / binding tokens (canonical) Applies in BOTH light and dark (dark only ADDS `.dark`), so mode-stable tokens (sharp radii, flat shadows, ink-on-amber) live here and are inherited by the dark scope. ============================================================ */ .harleys, [data-color-scheme='harleys'] { /* -------- CANON corner_regime: SHARP (R2 / DEF-04 · CANON Res.6) -------- * "Rounded corners — excluded. Not deferred — excluded." Zero every * rectangle / control / surface / pill radius token the library `:root` * and component recipes read, so the shadcn-baseline rounded defaults * (--button-radius .375rem, --radius .625rem, --radius-control/surface/ * overlay 6/8/12px, --radius-pill 9999px) cannot win. Keep `--radius-full` * / `--primitive-radius-full` = 9999px ONLY for intentional circles * (avatars, switch thumbs) per INV-RADIUS-03. */ --radius: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --button-radius: 0; --radius-control: 0; --radius-surface: 0; --radius-overlay: 0; --radius-pill: 0; --primitive-radius-sm: 0; --primitive-radius-md: 0; --primitive-radius-lg: 0; --primitive-radius-xl: 0; --primitive-radius-2xl: 0; /* Intentional circles only — DO NOT zero. */ --radius-full: 9999px; --primitive-radius-full: 9999px; /* -------- CANON shadow_regime: FLAT (R3 / DEF-05 · DO-007) -------- * "Communicate elevation exclusively through border tokens and surface * color steps. Never use drop shadows." Suppress every elevation tier the * library `:root` ships as real rgba drop shadows; `.card` / `.toast` * consume `--shadow-sm` / `--shadow-lg`, so they must resolve to none. */ --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-2xl: none; /* Elevation-step aliases (referenced by some surfaces / consumer utils). */ --shadow-elevation-1: none; --shadow-elevation-2: none; --shadow-elevation-3: none; /* Button never lifts. */ --button-shadow: 0 0 #0000; /* -------- Display-font indirection (R4 / DEF-10 · Res.3 / DO-005) -------- * The generated semantic aliases set `--font-display: var(--brand-font- * display)` / `--font-body: var(--brand-font-body)`, but nothing defined * `--brand-font-*` → headings silently fell back to Georgia. CANON Res.3 * forbids consumer apps from overriding `--font-display`/`--font-body`, so * this binding MUST live upstream. Point the brand-font indirection at the * theme's own resolved family stacks (EB Garamond display+body, system * SFMono mono — from tokens.generated.css). */ --brand-font-display: var(--harleys-oak-room-font-display); --brand-font-body: var(--harleys-oak-room-font-body); --brand-font-mono: var(--harleys-oak-room-font-mono); /* `--font-mono` has no generated alias; bind it so numeric/audit/RBAC surfaces get the theme mono stack rather than the library default. */ --font-mono: var(--harleys-oak-room-font-mono); /* -------- Amber-CTA foreground ink (R1 / DEF-03 · DO-007 / Res.7) -------- * The shadcn bridge in tokens.generated.css sets `--accent-foreground: * var(--fg-inverse)` (near-white) → white-on-amber = 2.79:1, FAILS AA. * The CANON-correct amber CTA uses DARK INK: neutral-900 on accent = * 5.5:1 (light, accent-500) / 7.55:1 (dark, accent-400). Bind to the FIXED * neutral-900 ramp token — NOT `var(--fg-primary)`, which flips to * neutral-50 in dark and would re-break contrast on the always-light amber * fill. `--on-accent` is the explicit companion the `cta` Button variant * and any amber affordance reads. */ --on-accent: var(--harleys-oak-room-primary-900); --accent-foreground: var(--harleys-oak-room-primary-900); /* -------- Generic status companions (R6 / DEF-11) -------- * harleys ships the 5 status ANCHORS but no -fg/-light/-dark/ * -foreground companions and no --warning/--error/--info name-bridges. * These were authored app-side (extension-tokens.css) and flagged * "belongs UPSTREAM" (JAR-277). Promote the GENERIC subset; newsroom * DOMAIN families (source/workflow/trust/urgency/chart) stay app-side per * ADR-001 N2. Refs flip automatically in dark because the anchors do. */ --warning: var(--warn); --error: var(--danger); --info: var(--status-info); --success-foreground: var(--harleys-oak-room-neutral-50); --success-light: var(--harleys-oak-room-success-100); --success-dark: var(--harleys-oak-room-success-700); /* Dark ink on amber-adjacent warn fill (matches the accent-fg rationale). */ --warning-foreground: var(--harleys-oak-room-neutral-900); --warning-light: var(--harleys-oak-room-warn-100); --warning-dark: var(--harleys-oak-room-warn-700); --error-foreground: var(--harleys-oak-room-neutral-50); --error-light: var(--harleys-oak-room-danger-100); --error-dark: var(--harleys-oak-room-danger-700); --info-foreground: var(--harleys-oak-room-neutral-50); --info-light: var(--harleys-oak-room-primary-100); --info-dark: var(--harleys-oak-room-primary-700); /* `--accent-subtle` left-accent pattern: the subtle amber wash is already emitted by tokens.generated.css (accent-100 light / primary-700 dark); pair it with the full --accent border in component CSS. The fg ink for a subtle-amber wash is the same dark ink. */ --accent-subtle-foreground: var(--harleys-oak-room-neutral-900); /* ── Chronica V2 alias-layer (R5 / DEF-07, DEF-09) ─────────────────── Dedicated harleys block (audit §3.2 option ii). The shared inline alias list in src/tokens/index.css (~1366, → styles.css:4481) does NOT include harleys, so the ~47 Chronica-vocabulary components (`--color-surface-*`, `--color-text-*`, `--color-border-*`, `--color-accent-*`, `--brand-orange`, status `--color-*`) fell through to the no-scheme `:root` fallback (stock orange/teal). We do NOT append harleys to that shared list because it rebinds `--font-display: var(--font-sans)`, which would clobber the EB Garamond display face. Instead map the Chronica vocabulary onto harleys steel/amber here, rebranding the stock literals (DEF-09) to the brand ramp. */ --color-surface-primary: var(--bg-canvas); --color-surface-secondary: var(--bg-surface-alt); --color-surface-elevated: var(--bg-surface); --color-surface-muted: var(--bg-sunken); --color-surface-cream: var(--bg-surface); --color-surface: var(--bg-surface); --color-text-primary: var(--fg-primary); --color-text-secondary: var(--fg-secondary); --color-text-muted: var(--fg-muted); --color-text-inverse: var(--fg-inverse); --color-text-brand: var(--accent-strong); --color-foreground: var(--fg-primary); --color-border-default: var(--border-subtle); --color-border-emphasis: var(--border-strong); --color-border-focus: var(--border-focus); --color-border: var(--border-subtle); --color-accent-primary: var(--accent); --color-accent-hover: var(--accent-strong); --color-accent-pressed: var(--accent-strong); --color-interactive-default: var(--accent); --color-interactive-hover: var(--accent-strong); --color-success: var(--success); --color-warning: var(--warn); --color-error: var(--danger); --color-danger: var(--danger); --color-info: var(--status-info); /* SURFACE token (also Tailwind `bg-muted` source) — alias to --muted (shadcn surface), NOT --fg-muted (text). Matches the shared alias-layer. */ --color-muted: var(--muted); /* Brand-orange family — harleys's editorial amber stands in for tarva's stock orange so brand-orange callouts render amber, never raw orange. Text/button steps use --accent-strong for the resting/active contrast. */ --brand-orange: var(--accent); --brand-orange-text: var(--accent-strong); --brand-orange-button: var(--accent-strong); --brand-amber: var(--accent); } /* ============================================================ DARK MODE — staff / operator alternate Only the companions whose dark value is NOT a re-aliased anchor need explicit dark overrides. The sharp radii, flat shadows, the ink-on-amber foreground, and the Chronica alias-layer above are mode-stable (they reference --accent / --bg-* / ramp tokens that the generated dark block already flips) and carry through unchanged. ============================================================ */ :root.harleys.dark, .harleys.dark, [data-color-scheme='harleys'][data-theme='dark'], .harleys[data-theme='dark'] { /* Status -light/-dark companions invert so badges keep AA contrast in dark (light wash → deep ink in dark). Foreground inks/anchors and the amber ink already hold across modes. */ --success-light: var(--harleys-oak-room-success-800); --success-dark: var(--harleys-oak-room-success-200); --warning-light: var(--harleys-oak-room-warn-800); --warning-dark: var(--harleys-oak-room-warn-200); --error-light: var(--harleys-oak-room-danger-800); --error-dark: var(--harleys-oak-room-danger-200); --info-light: var(--harleys-oak-room-primary-800); --info-dark: var(--harleys-oak-room-primary-200); } /* ============================================================ FORBIDDEN-MOVE SUPPRESSION (R3 tail / DEF-06 · DONT-002/003) ============================================================ The library ships a celebratory `tarva-step-cluster-glow` keyframe with a hard-coded orange drop-shadow glow (animations.css: `box-shadow: 0 0 8px 2px rgba(249,115,22,.4)`). Under harleys this violates DO-007 (no drop shadows), DONT-003 (no animated celebration), and INV-COLOR-05 (raw non-token orange). Neutralize the lift + glow for any StepCluster active element rendered under the scheme — the state is still conveyed by the component's border / surface-step treatment. */ .harleys .animate-step-cluster-glow, [data-color-scheme='harleys'] .animate-step-cluster-glow { animation: none; box-shadow: 0 0 #0000; }