/* * forge.css — Forge's canonical token block * ---------------------------------------------------------------------------- * Vellum Ink visual register (ADR 017). Hand-authored on :root so the * tokens are globally available to any element on the page. Consumers * use the tokens directly via var(--forge-*) or var(--vl-*), or via * the component CSS in forge.kit.css. * * Two token banks: * * --forge-* Semantic tokens (ADR 001). The bank that every Forge * component consumes. Re-skinning Forge to a new register * means changing these values; the components don't need * to know. Names align with the prior semantic surface * (surface/text/border/interactive) so existing adapters * just pick up the new values. * * --vl-* Vellum-specific tokens. Glass tiers, bruise-ink shadows, * page gradient, pastel accents, severity surfaces, blur * radii, motion easings, type families. These exist because * Vellum needs more nuance than the bare semantic bank * can express — they're the register's signature surface. * * Editing: change values directly here. ADR 010's DTCG pipeline is * retained as documentation of the prior architecture, but this file * is no longer regenerated from tokens/. See ADR 017. * * Lint: pnpm lint:system still enforces the semantic-tokens-only rule * (ADR 001) against this file. Don't pull base color refs into adapter * code; use var(--forge-*) or var(--vl-*). * ============================================================================ */ :root { /* ------------------------------------------------------------------------ * PAGE CANVAS — cool-blue linear wash. Base temperature is Tier-C explorable * (ADR 019: the warm-cream canvas is a default, not a signature invariant), so * cooling the register is a graduation, not an ADR act. NB: this also swaps the * three-radial-wash construction for a single top-down linear — ADR 019 notes * the radial construction "persists as part of the canvas system", so that * construction change is a deliberate register-evolution flagged in the PR. * ------------------------------------------------------------------------ */ --vl-page-gradient: linear-gradient( 178deg, oklch(0.93 0.035 244) 0%, oklch(0.965 0.016 244) 22%, oklch(0.986 0.006 244) 48%, oklch(0.99 0.004 244) 100% ); --forge-surface-page: oklch(0.975 0.006 248); /* ------------------------------------------------------------------------ * GLASS TIERS — alpha-on-cool-white surfaces. Used with backdrop-filter * for the letterpress-on-vellum look. Chrome .66 / content .72 / deep * .88 (DECISIONS row 002, intensified from Compact's lighter alphas). * ------------------------------------------------------------------------ */ --vl-surface-content: rgba(252, 253, 255, 0.72); --vl-surface-content-hover: rgba(252, 253, 255, 0.84); --vl-surface-chrome: rgba(252, 253, 255, 0.66); --vl-surface-deep: rgba(252, 253, 255, 0.88); --vl-surface-well: rgba(252, 253, 255, 0.50); --vl-surface-inset: rgba(252, 253, 255, 0.42); --vl-blur-chrome: 22px; --vl-blur-content: 20px; --vl-blur-deep: 28px; /* ------------------------------------------------------------------------ * SURFACE FALLBACKS — solid tones for browsers without backdrop-filter. * Also used directly when a flat surface is desired (card bodies, * surfaces that don't sit on the gradient). * ------------------------------------------------------------------------ */ --forge-surface-primary: oklch(0.985 0.005 248); --forge-surface-secondary: oklch(0.95 0.008 250); --forge-surface-tertiary: oklch(0.91 0.010 250); /* ------------------------------------------------------------------------ * TEXT — warm-neutral hierarchy on cream. * ------------------------------------------------------------------------ */ --forge-text-primary: oklch(0.20 0.014 60); --forge-text-secondary: oklch(0.40 0.018 62); --forge-text-tertiary: oklch(0.56 0.018 68); /* ------------------------------------------------------------------------ * SKELETON — loading placeholder tone (kit .vl-skeleton). A warm greige * derived from the muted ink so a skeleton reads on BOTH the solid cream * surfaces and the translucent Vellum glass tiers; the previous * white-on-white base washed out on --vl-surface-content. `base` = the * resting block / gradient edges, `shine` = the lighter band the shimmer * sweeps. `duration` is tokenised so a consumer can retune the rhythm * without overriding the (unlayered) kit class. * ------------------------------------------------------------------------ */ --vl-skeleton-base: color-mix(in oklch, var(--forge-text-tertiary) 24%, var(--forge-surface-primary)); --vl-skeleton-shine: color-mix(in oklch, var(--forge-text-tertiary) 11%, var(--forge-surface-primary)); --vl-skeleton-duration: 2000ms; /* ------------------------------------------------------------------------ * BORDERS + HAIRLINES. * ------------------------------------------------------------------------ */ --forge-border-default: oklch(0.82 0.012 65); --forge-border-strong: oklch(0.70 0.018 65); --vl-border-subtle: rgba(252, 253, 255, 0.62); --vl-border-hairline: rgba(70, 84, 110, 0.22); /* ------------------------------------------------------------------------ * BRAND — BlueOcean brand primary (ADR 019). Signature-invariant: the * VALUE is protected like severity tokens (no exploration verb or * candidate bank may recolor it); its page COVERAGE is explorable. * Distinct from the interactive frost-blue below — the relationship * (whether interactive rebases onto brand) is deliberately open, * reserved for the first design-phase exploration. Authored as hex: * the brand equity is defined in hex and the invariant check needs * an exact literal (≈ oklch(0.4791 0.2837 267.87); the rounded * 3-decimal oklch does NOT round-trip to this hex). * ------------------------------------------------------------------------ */ --forge-brand-primary: #262DF9; /* ------------------------------------------------------------------------ * INTERACTIVE — saturated/darkened frost-blue (DECISIONS row 005). * Leads the page; reserved for primary actions and active states. * ------------------------------------------------------------------------ */ --forge-interactive-default: oklch(0.42 0.18 248); --forge-interactive-hover: oklch(0.36 0.20 248); --forge-interactive-active: oklch(0.30 0.22 248); --forge-interactive-focus-ring: oklch(0.55 0.18 248 / 0.50); --forge-text-on-brand: oklch(0.985 0.006 85); /* ------------------------------------------------------------------------ * INVERSE PAIR — dark surface + light text for tooltips and other * inverted UI surfaces. Mirrors of the primary text + primary surface * tokens above so the contrast is symmetric. * ------------------------------------------------------------------------ */ --forge-surface-inverse: oklch(0.20 0.014 60); --forge-text-on-inverse: oklch(0.985 0.006 85); /* ------------------------------------------------------------------------ * NARRATIVE TONE ACCENTS — intensified pastels (DECISIONS row 004). * Lavender / sage / peach pairs for narrative cards, tone tags, callouts. * Surface is the glass tint; text is the darkened ink to pair against it. * ------------------------------------------------------------------------ */ --vl-accent-lavender-surface: rgba(208, 196, 232, 0.72); --vl-accent-lavender-text: oklch(0.28 0.10 290); --vl-accent-sage-surface: rgba(196, 220, 200, 0.72); --vl-accent-sage-text: oklch(0.26 0.085 140); --vl-accent-peach-surface: rgba(238, 214, 205, 0.74); --vl-accent-peach-text: oklch(0.30 0.09 38); /* ------------------------------------------------------------------------ * ITALIC ACCENT INK — cool letterpress tint for serif italic emphasis. * Used as color: on .vl-text-italic so italic passages pick up the * Vellum register's "warm-printed-on-cream" feel. * ------------------------------------------------------------------------ */ --vel-accent-italic-color: oklch(0.30 0.03 255); /* ------------------------------------------------------------------------ * SEVERITY (ADR 004) — paired surface + text. Never chrome alone. * Threat severity uses --vl-sev-*; feedback severity (alerts) uses * --vl-info / --vl-success / --vl-warn / --vl-danger. * ------------------------------------------------------------------------ */ --vl-sev-high-surface: rgba(248, 184, 168, 0.72); --vl-sev-high-text: oklch(0.32 0.16 30); --vl-sev-medium-surface: rgba(244, 212, 188, 0.72); --vl-sev-medium-text: oklch(0.32 0.13 60); --vl-sev-low-surface: rgba(210, 214, 222, 0.66); --vl-sev-low-text: oklch(0.38 0.024 250); --vl-info-surface: rgba(208, 220, 232, 0.72); --vl-info-text: oklch(0.34 0.08 245); --vl-success-surface: rgba(196, 220, 200, 0.72); --vl-success-text: oklch(0.30 0.10 145); --vl-warn-surface: rgba(244, 212, 188, 0.74); --vl-warn-text: oklch(0.32 0.13 60); --vl-danger-surface: rgba(248, 184, 168, 0.72); --vl-danger-text: oklch(0.32 0.16 30); /* ------------------------------------------------------------------------ * SEMANTIC SEVERITY (ADR 004 + ADR 018) — the agnostic --forge-* bank * that components consume. Saturated `*-default` / `*-hover` colors for * button fills and border accents; tone-on-tone `*-surface` + `*-text` * pairs for badges, cards, and inline severity callouts. Hues match * the Vellum --vl-* siblings above (warm red, peach amber, sage green) * rather than the legacy cool primaries — keeps the register * consistent across the agnostic and Vellum-specific banks. * ------------------------------------------------------------------------ */ --forge-danger-default: oklch(0.50 0.20 30); --forge-danger-hover: oklch(0.42 0.21 30); --forge-danger-surface: var(--vl-danger-surface); --forge-danger-text: var(--vl-danger-text); --forge-warning-default: oklch(0.60 0.16 60); --forge-warning-surface: var(--vl-warn-surface); --forge-warning-text: var(--vl-warn-text); --forge-success-default: oklch(0.50 0.13 145); --forge-success-surface: var(--vl-success-surface); --forge-success-text: var(--vl-success-text); /* ------------------------------------------------------------------------ * SHADOWS — bruise-ink, ~30% heavier than Compact (DECISIONS row 003). * Three tiers for resting / hover / popover layers. * ------------------------------------------------------------------------ */ --vl-shadow-rest: 0 16px 44px -10px rgba(60, 50, 80, 0.20), 0 2px 6px rgba(60, 50, 80, 0.10); --vl-shadow-hover: 0 26px 64px -10px rgba(60, 50, 80, 0.30), 0 6px 16px rgba(60, 50, 80, 0.16); --vl-shadow-popover: 0 24px 60px -12px rgba(50, 40, 90, 0.34), 0 6px 18px rgba(50, 40, 90, 0.16); /* ------------------------------------------------------------------------ * RADII. * ------------------------------------------------------------------------ */ --vl-radius-card: 18px; --vl-radius-card-sm: 14px; --vl-radius-chart: 16px; --vl-radius-chip: 999px; --vl-radius-control: 12px; --vl-radius-control-sm: 8px; /* ------------------------------------------------------------------------ * MOTION. * ------------------------------------------------------------------------ */ --vl-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --vl-motion-duration: 240ms; --vl-motion-fast: 140ms; /* ------------------------------------------------------------------------ * TYPE — serif for display, system sans for body, JetBrains-or-system * for mono. Vellum's display register is Source Serif 4; load it via * @font-face or Google Fonts in the consumer's HTML. * ------------------------------------------------------------------------ */ --vl-font-serif: "Source Serif 4", "Source Serif Pro", "Newsreader", ui-serif, Georgia, "Times New Roman", serif; --vl-font-sans: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", "Arial", sans-serif; --vl-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, "Cascadia Code", "Roboto Mono", monospace; --vl-letter-display: -0.020em; --vl-letter-sans: -0.005em; /* ------------------------------------------------------------------------ * SPACING SCALE — documentation reference. Components use literal px * tuned to their context; the scale is here so designers can sanity-check * that values fall on a consistent grid. * ------------------------------------------------------------------------ */ --vl-space-1: 4px; --vl-space-2: 8px; --vl-space-3: 12px; --vl-space-4: 16px; --vl-space-5: 20px; --vl-space-6: 24px; --vl-space-8: 32px; --vl-space-12: 48px; }