/** * Burdenoff Design Tokens - Consolidated * * This file aggregates all design tokens from foundation, semantic, and brand layers. * Host shells should import this single file to get all tokens. * * Theme attributes (data-brand, data-theme, data-density, data-typography) must be set * on the root element by the host shell to activate the appropriate token values. */ /* Foundation tokens - color palette, spacing, typography scales */ @import './build/foundation.css' layer(foundation); /* Semantic tokens - purpose-driven tokens that reference foundation */ @import './build/semantic.css' layer(semantic); /* Brand overrides - brand-specific customizations */ @import './build/brands/workspaces.css' layer(brands); @import './build/brands/tenant.css' layer(brands); @import './build/brands/healthybowl.css' layer(brands); @import './build/brands/fluidgrids.css' layer(brands); @import './build/brands/vibecontrols.css' layer(brands); @import './build/brands/housingvista.css' layer(brands); @import './build/brands/intelwatchtower.css' layer(brands); @import './build/brands/mybodyshield.css' layer(brands); @import './build/brands/artistrybase.css' layer(brands); @import './build/brands/brainyrich.css' layer(brands); /* Boff UI expressive + accessibility themes (forest/ocean/sunset/high-contrast). * Imported into the `themes` layer LAST so an expressive theme's accent wins * over the per-brand accent. See build/themes.css. */ @import './build/themes.css' layer(themes); /* Boff UI 2.0 — glass-intensity preference (data-glass on ) + OS * reduced-transparency. Unlayered so these win over foundation/semantic/ * brands/themes deterministically. Set by the Theme Preferences customizer. */ :root[data-glass='off'] { --blur-glass: 0px; --color-surface-glass: var(--color-bg-elevated); /* opaque fallback */ --gradient-gloss-card: none; } :root[data-glass='subtle'] { --blur-glass: 8px; } :root[data-glass='full'] { --blur-glass: 16px; } @media (prefers-reduced-transparency: reduce) { :root { --blur-glass: 0px; --color-surface-glass: var(--color-bg-elevated); --gradient-gloss-card: none; } } /* Boff UI 2.0 — user "reduce motion" preference (data-reduce-motion on ), * in addition to the OS prefers-reduced-motion media query. Neutralises all * animations/transitions/lift while keeping the UI fully functional. */ :root[data-reduce-motion] *, :root[data-reduce-motion] *::before, :root[data-reduce-motion] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } :root[data-reduce-motion] { --pop-lift-y: 0px; } /* Boff UI 2.0 — slim scrollbar utility. * * Opt-in (NOT a global `::-webkit-scrollbar` override) so it only lands on the * surfaces that ask for it — the app-shell sidebars today. The browser default * bar is a wide, opaque grey that reads as a foreign object against a dark * sidebar; this replaces it with a thin rounded thumb on a transparent track. * * The thumb is mixed from --color-text-primary rather than pinned to a border * or text token, because no fixed token reads correctly in both themes: * --color-border-strong is a clean grey in light (#9CA3AF) but nearly the * sidebar's own background in dark (#3C4759), while --color-text-muted is the * reverse. Mixing off the foreground colour inverts with the theme for free. * * Native scrolling is kept intact — no Radix wrapper — so keyboard, touch and * scroll-anchoring behaviour are unchanged. * * Unlayered, so it wins over the foundation/semantic/brands/themes layers * without needing !important. */ /* Firefox (and anything without the WebKit pseudo-elements). * * This MUST stay behind @supports: Chrome implements both APIs, and setting * `scrollbar-width`/`scrollbar-color` on an element makes Chrome ignore that * element's ::-webkit-scrollbar rules entirely. Applied unconditionally it * silently disables the width and border-radius below, and Chrome falls back * to its own built-in "thin" bar. */ @supports not selector(::-webkit-scrollbar) { .scrollbar-slim { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--color-text-primary) 52%, transparent) transparent; } } /* WebKit/Blink — the path Chrome, Edge and Safari actually take. */ .scrollbar-slim::-webkit-scrollbar { width: 4px; height: 4px; } .scrollbar-slim::-webkit-scrollbar-track { background: transparent; } .scrollbar-slim::-webkit-scrollbar-thumb { background-color: color-mix(in oklab, var(--color-text-primary) 52%, transparent); border-radius: var(--radius-pill); } .scrollbar-slim::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklab, var(--color-text-primary) 75%, transparent); } /* Corner where a vertical and horizontal bar meet — default is an opaque * grey square that would reintroduce exactly the artefact this removes. */ .scrollbar-slim::-webkit-scrollbar-corner { background: transparent; } /* Boff UI 2.0 — hover-reveal modifier for .scrollbar-slim. * * Composes with .scrollbar-slim: the thumb is transparent until the pointer is * anywhere over the scroll container, then fades up to the normal resting * colour. Used on the app-shell side nav, where a permanently visible bar * competes with the nav items for attention. * * The width is deliberately NOT zeroed at rest — the gutter stays reserved so * revealing the thumb cannot reflow the nav underneath it. * * Pointer-coarse devices (touch) are excluded: there is no hover there, so the * bar would never be reachable. */ @media (hover: hover) { .scrollbar-hover-only::-webkit-scrollbar-thumb { background-color: transparent; } .scrollbar-hover-only:hover::-webkit-scrollbar-thumb { background-color: color-mix(in oklab, var(--color-text-primary) 52%, transparent); } .scrollbar-hover-only:hover::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklab, var(--color-text-primary) 75%, transparent); } /* Firefox equivalent — same @supports reasoning as .scrollbar-slim above. */ @supports not selector(::-webkit-scrollbar) { .scrollbar-hover-only { scrollbar-color: transparent transparent; } .scrollbar-hover-only:hover { scrollbar-color: color-mix(in oklab, var(--color-text-primary) 52%, transparent) transparent; } } }