/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved. */ /* Proprietary and confidential. See LICENSE in the project root. */ /* ========================================================================== * Chropyne — Design Token Overrides * * This file is loaded LAST in the host's , after Forge's own * forge-dashboard.css and forge-ui-components.css. Anything you uncomment * here overrides the upstream default. * * Forge ships with two flat token surfaces: * * 1. CORE TOKENS (forge-dashboard.css) * Color, spacing, typography, motion, layout primitives. Defined under * :root and re-resolved per `[data-theme="dark"|"light"]`. Uncomment a * line below to change the default for both themes; if you want to * diverge per theme, copy the line into the matching block at the * bottom of this file. * * 2. COMPONENT TOKENS (forge-ui-components.css) * Bridge variables (--surface-sN, --text-tN, --border-bN) that the * Forge component package consumes. They flow from the core tokens via * `var(--core, fallback)` so changing a core token automatically * reaches every Forge component (ForgeButton, ForgeCard, ForgeIcon…). * * ---------------------------------------------------------------------- * HOW TO USE * * 1. Uncomment a line in :root below. * 2. Save → the live page picks up the change instantly under `dotnet watch`. * 3. Verify both light and dark themes still pass WCAG 2.2 AA contrast. * * Want to see the effect without touching this file? Press the * "sparkles" button in the topbar to open the Tweaks panel — every * setting in there writes the same CSS variables at runtime via JS. * * Full token reference: https://github.com/ProgWolfik/Krejci.Forge/ * blob/master/docs/diagrams/dependencies.md (UI.DesignTokens section). * ========================================================================== */ :root { /* -------- Accent --------------------------------------------------- */ /* Hue for the OKLCH accent ramp. 0 = red, 60 = amber, 120 = green, 160 = teal, 220 = blue, 260 = indigo, 300 = violet, 340 = pink. */ /* --accent-h: 300; */ /* Chroma (saturation) and lightness — fine-tune the accent intensity. */ /* --accent-c: 0.18; */ /* --accent-l: 0.7; */ /* -------- Glass / depth ------------------------------------------- */ /* 0 = no ambient glow on modules */ /* 0.6 = Forge default */ /* 1 = lots of glow */ /* --glass: 0.7; */ /* -------- Radii — corner roundness -------------------------------- */ /* Lower these for a sharper, more "industrial" look; raise for a soft, consumer feel. Match the input + button radius separately if you want only inputs square. */ /* --r-xs: 4px; */ /* default 6px */ /* --r-sm: 6px; */ /* default 8px */ /* --r-md: 8px; */ /* default 12px */ /* --r-lg: 12px; */ /* default 16px */ /* --r-xl: 16px; */ /* default 22px */ /* --r-2xl: 20px; */ /* default 28px */ /* Input-only radius — wins over --r-md inside .forge-input / form fields without changing card / module radii. */ /* --input-radius: 4px; */ /* -------- Motion timings ------------------------------------------ */ /* --t-fast: 200ms; */ /* default 140ms — slower hover / button feedback */ /* --t-med: 320ms; */ /* default 240ms — slower sidebar collapse / overlays */ /* --t-slow: 600ms; */ /* default 420ms — slower theme cross-fade */ /* -------- Easing — change "feel" of every animation --------------- */ /* --ease-spring: cubic-bezier(0.5, 1.8, 0.5, 1); */ /* bouncier */ /* --ease-out: cubic-bezier(0.16, 1, 0.3, 1); */ /* sharper exit */ /* -------- Spacing scale (8pt base) -------------------------------- */ /* Bumping --s-base also propagates because the rest is multiplied. */ /* --s-1: 6px; */ /* default 4px */ /* --s-4: 20px; */ /* default 16px */ /* --s-6: 28px; */ /* default 24px */ /* -------- Typography ---------------------------------------------- */ /* Display font is used for h1.page-title, .kpi-value, .page-title. Replace with any locally hosted or Google-loaded family. The fallback chain stays in case the requested font fails to load. */ /* --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; */ /* --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; */ /* --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; */ /* -------- Layout dimensions --------------------------------------- */ /* --sidebar-w: 280px; */ /* default 248px */ /* --sidebar-collapsed-w: 72px; */ /* default 64px */ /* --header-h: 64px; */ /* default 60px */ /* -------- Form / input behaviour ---------------------------------- */ /* Switch the text-input label style. `static` is the default (label sits above the field). `floating` makes the label drop into the field when empty and float up + scale down on focus / fill. */ /* --input-label-style: floating; */ /* Height of focus ring around inputs / buttons. 0 disables it. */ /* --focus-ring-width: 3px; */ } /* -------------------------------------------------------------------------- * Per-theme overrides (rare). Use these when a token must differ between * dark and light beyond what the core tokens already do. The pattern: * -------------------------------------------------------------------------- */ [data-theme="dark"] { /* --accent-c: 0.20; */ /* slightly more vivid in dark mode */ /* color-scheme propagates to native browser UI —