/* revision: 2026.06.16.10.57.36 */ /* * BlockForge — framework_theme.css (design tokens) * * Design tokens only — no rules. This is the swappable layer: a brand or dark * theme replaces this file (or overrides :root) without touching block rules. * framework_core.css consumes these vars and MUST be loaded AFTER this file. * Host load order: framework_theme.css -> framework_core.css -> /Application/styles.css. * * Naming mirrors the runtime split: "core" = stable shared substrate * (framework_core.css / runtime_core.js); the sibling is the variable layer * (framework_theme.css / runtime_app.js). * * Values are CONSOLIDATED: several near-duplicate literals in the legacy single * stylesheet collapse to one canonical value per role (the same dedup applied to * colour — e.g. blues #4285f4/#2788ff/#2563eb/...; reds #c0392b/#dc2626/#ef4444; * spacing/radius/shadow clusters). Hover/active variants stay distinct so * interaction contrast is kept. Consolidating literals changes pixels by design; * this is a visual-regression token pass, not a pure refactor. * * App layout knobs consumed with inline fallbacks (e.g. --bf-form-columns, * --bf-form-min-field-width, --bf-field-width, --bf-font-mono) are intentionally * left undefined here so apps can set them per-screen; do not define them. * * Dark theme: a [data-theme="dark"] scope at the bottom of this file overrides the * neutral colour tokens (surface/text/border families) for a dark UI. Toggle it by * setting data-theme="dark" on or — no extra stylesheet link, runtime * toggleable, core rules unchanged. The sidebar theme is a separate, explicit knob, * independent of [data-theme]: a plain .bf-sidebar is light; add the .bf-sidebar--dark * modifier for the dark slate treatment. It simply swaps the --bf-nav-* palette tokens * (light defaults in :root, dark overrides in the .bf-sidebar--dark block below) and is * unrelated to whether the sidebar's tree is in navigationMode. */ :root { /* Primary (blue): actions, links, active/selected state */ --bf-color-primary: #4285f4; --bf-color-primary-hover: #1a73e8; --bf-color-primary-soft: #e8f0fe; --bf-color-primary-border: #c5d8fc; /* Accent (indigo): secondary emphasis */ --bf-color-accent: #6366f1; /* Danger (red): destructive actions, errors */ --bf-color-danger: #c0392b; --bf-color-danger-hover: #9e1111; --bf-color-danger-soft: #fdf0ef; --bf-color-danger-border: #f5c6c2; /* Success (green): confirmations, valid state */ --bf-color-success: #1e7e34; --bf-color-success-soft: #e6f4ea; --bf-color-success-border: #b7dfbf; /* Warning (amber) */ --bf-color-warning: #f39c12; /* Text scale: strong -> muted -> subtle */ --bf-color-text: #111827; --bf-color-text-muted: #6b7280; --bf-color-text-subtle: #9ca3af; /* Borders / dividers */ --bf-color-border: #d1d5db; --bf-color-border-light: #e5e7eb; /* Surfaces: base -> alt -> muted */ --bf-color-surface: #ffffff; --bf-color-surface-alt: #f5f5f5; --bf-color-surface-muted: #f3f4f6; /* Focus ring (full box-shadow value) */ --bf-focus-ring: 0 0 0 2px rgba(66, 133, 244, 0.2); /* Spacing scale: recurring paddings/margins/gaps. Bespoke layout one-offs (10/14/20/24/32/40px) stay literal in core. */ --bf-space-1: 2px; --bf-space-2: 4px; --bf-space-3: 6px; --bf-space-4: 8px; --bf-space-5: 12px; --bf-space-6: 16px; /* Corner radius: sm controls -> md default -> lg panels -> xl cards -> pill */ --bf-radius-sm: 3px; --bf-radius-md: 4px; --bf-radius-lg: 6px; --bf-radius-xl: 8px; --bf-radius-pill: 999px; /* Elevation */ --bf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --bf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --bf-shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.12); /* Sidebar palette — DEFAULT (light). The sidebar theme is explicit and separate from [data-theme]: a plain .bf-sidebar uses these light tokens; .bf-sidebar--dark (below) overrides them to the dark slate treatment. Driven entirely by tokens, so no app CSS is needed to pick a sidebar theme — set the class, the colour follows. */ --bf-nav-bg: var(--bf-color-surface); --bf-nav-border: var(--bf-color-border); --bf-nav-text: var(--bf-color-text); --bf-nav-text-muted: var(--bf-color-text-muted); --bf-nav-text-subtle: var(--bf-color-text-subtle); --bf-nav-icon: #475467; --bf-nav-item-hover: rgba(17, 24, 39, 0.05); /* Translucent in-sidebar control chrome (e.g. a select-field), tinted to suit the bg. */ --bf-nav-control-border: rgba(17, 24, 39, 0.16); --bf-nav-control-bg: rgba(17, 24, 39, 0.03); --bf-nav-control-border-hover: rgba(17, 24, 39, 0.28); --bf-nav-control-bg-hover: rgba(17, 24, 39, 0.06); /* Sidebar selected/active HIGHLIGHT — single hue knob shared by both themes. Change --bf-nav-accent alone to recolour the whole highlight (gradient fill, the active item's left accent bar, drop-target cues, and the active label tint); everything below is derived from it via color-mix(). Decoupled from --bf-color-primary so the sidebar highlight can differ from the app primary (e.g. green sidebar, blue app). Requires color-mix() support (evergreen; consistent with the :has() selectors used in framework_core.css). --bf-nav-item-active / --bf-nav-text-active are per-theme (re-derived in .bf-sidebar--dark) because the readable fill/text differ light vs dark. */ --bf-nav-accent: #1c6cd0; --bf-nav-item-active: linear-gradient(90deg, color-mix(in srgb, var(--bf-nav-accent) 22%, transparent), color-mix(in srgb, var(--bf-nav-accent) 7%, transparent)); --bf-nav-text-active: color-mix(in srgb, var(--bf-nav-accent) 32%, black); } /* Dark sidebar treatment. Scoped token overrides — only the palette changes; all the structural sidebar/tree chrome lives in framework_core.css and reads these tokens. */ .bf-sidebar--dark { --bf-nav-bg: #171a22; --bf-nav-border: #262b36; --bf-nav-text: #c8ceda; --bf-nav-text-muted: #9aa4b8; --bf-nav-text-subtle: #697284; --bf-nav-icon: #aeb6c6; --bf-nav-item-hover: rgba(255, 255, 255, 0.045); --bf-nav-control-border: rgba(255, 255, 255, 0.14); --bf-nav-control-bg: rgba(255, 255, 255, 0.08); --bf-nav-control-border-hover: rgba(255, 255, 255, 0.24); --bf-nav-control-bg-hover: rgba(255, 255, 255, 0.11); --bf-nav-item-active: linear-gradient(90deg, color-mix(in srgb, var(--bf-nav-accent) 36%, transparent), color-mix(in srgb, var(--bf-nav-accent) 12%, transparent)); --bf-nav-text-active: color-mix(in srgb, var(--bf-nav-accent) 12%, white); } /* * Dark theme variant. Overrides the neutral colour families only; brand/semantic * colours (primary/accent/danger/success/warning) and their soft tints are kept so * contrast on coloured chips, messages and buttons is preserved. --bf-color-primary-soft * is re-tinted dark because it is used only as a soft *background* in core (the three * sidebar *text* usages were moved to --bf-nav-text-active). Equal specificity to * :root, declared later, so these win when the scope matches. */ :root[data-theme="dark"], [data-theme="dark"] { --bf-color-text: #e6e9f0; --bf-color-text-muted: #9aa4b8; --bf-color-text-subtle: #697284; --bf-color-border: #333a47; --bf-color-border-light: #262b36; --bf-color-surface: #1a1d27; --bf-color-surface-alt: #20242f; --bf-color-surface-muted: #262b36; --bf-color-primary-soft: #1c2740; --bf-color-primary-border: #2c3a5a; --bf-focus-ring: 0 0 0 2px rgba(66, 133, 244, 0.35); }