/* * Design tokens. Every color/space/radius/curve in the UI comes from here. * * Palette: one true-neutral ramp — the Dynamic Island's near-black glass * with near-white ink, applied to the whole app. No blue cast. The only * chromatic elements are the functional semantics (danger/warning/success) * and the faint prismatic fringe of the single lens light described in * DESIGN_LANGUAGE.md. Everything else is a shade of white on black. */ :root { /* Bricolage Grotesque is bundled (@fontsource-variable) so it renders offline in the Tauri build; its optical-size axis covers both text and display roles. */ --font-ui: "Bricolage Grotesque Variable", "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace; --radius-sm: 6px; --radius-md: 9px; --radius-lg: 13px; --radius-xl: 18px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --title-bar-height: 42px; --tab-bar-height: 36px; --activity-bar-width: 48px; /* The Dynamic Island sits in the title bar's bezel, centred on its height. */ --island-height: 28px; --island-top: calc((var(--title-bar-height) - var(--island-height)) / 2); /* * Motion. Three curves: * --ease-out settles without overshoot — opacity, color, size. * --ease-spring overshoots ~7% then rests — transforms, panel entrances. * --ease-bouncy overshoots ~16% — small pops (press release, chevrons). * And two for a drop of liquid, used by the island's lobes: * --ease-birth a drop pinching off: out fast, then held back while the * neck thins (a slow crawl from ~0.82 to ~0.98), then a * snap free to ~1.06 and a damped wobble to rest. * --ease-drown a drop merging: a slow approach until the surfaces * bridge, then pulled in, then gone. (For a 1 → 0 pair.) * And one for a blur clearing: * --ease-focus slow, then quick into focus. Chromium drops a blur once * it is under about half a pixel, so a blur eased *out* * to zero crawls at a fraction of a pixel and then goes * in one frame — a pop. Ending fast, the last of it goes * inside a frame's own change. * The cubic-beziers are fallbacks; the real curves are swapped in below * via linear() where supported. The three springs are sampled every * ~10ms and landed: a spring only ever settles asymptotically, so a table * cut at the duration still carries a residual and the last segment * would snap to 1 in one frame — a visible tick as the shape stops. The * residual is faded out with a smoothstep over the tail instead, so each * curve reaches 1 with zero velocity. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-bouncy: cubic-bezier(0.34, 1.7, 0.64, 1); --ease-birth: cubic-bezier(0.2, 1.1, 0.5, 1); --ease-drown: cubic-bezier(0.55, 0, 0.3, 1); --ease-focus: cubic-bezier(0.6, 0, 0.8, 0.3); --duration-fast: 140ms; --duration-normal: 240ms; --duration-spring: 600ms; --duration-bouncy: 520ms; /* A lobe merging back into its neighbour; DynamicIsland.tsx's LOBE_LINGERS keeps the lobe this long. */ --duration-drown: 450ms; /* A view swapping behind glass: the crossfade plus the warp that settles with it. The last ~40% is the glass coming to rest, so this runs longer than it looks. */ --duration-liquid: 600ms; /* * Lens light — used ONLY for the single focused/active element. It is lit * like a slab of glass: a specular rim where the light enters, a dimmer * refracted rim on the far side, and a faint prismatic fringe (cool on * the lit side, warm on the far side) where the edge disperses it. * --lens-x/--lens-y is where the light sits on the element's edge; * src/ui/lensLight.ts slides it toward the pointer. The colours are RGB * triplets so recipes can pick their own alpha via rgb(var(--x) / a). */ --lens-x: 30%; --lens-y: 0%; --dot-size: 1px; --dot-spacing: 18px; } /* Registered so the light position can transition instead of jumping. */ @property --lens-x { syntax: ""; inherits: true; initial-value: 30%; } @property --lens-y { syntax: ""; inherits: true; initial-value: 0%; } @supports (transition-timing-function: linear(0, 1)) { :root { /* k=170 d=26 — critically damped, 500ms; landed from 55% */ --ease-out: linear( 0, 0.007798 2%, 0.02864 4%, 0.05924 6%, 0.09689 8%, 0.1394 10%, 0.1851 12%, 0.2325 14%, 0.2805 16%, 0.3282 18%, 0.3751 20%, 0.4206 22%, 0.4643 24%, 0.5061 26%, 0.5456 28%, 0.5829 30%, 0.6179 32%, 0.6506 34%, 0.681 36%, 0.7093 38%, 0.7354 40%, 0.7595 42%, 0.7816 44%, 0.802 46%, 0.8207 48%, 0.8377 50%, 0.8533 52%, 0.8675 54%, 0.8806 56%, 0.8936 58%, 0.9062 60%, 0.9183 62%, 0.9295 64%, 0.9399 66%, 0.9493 68%, 0.9578 70%, 0.9652 72%, 0.9717 74%, 0.9774 76%, 0.9822 78%, 0.9862 80%, 0.9896 82%, 0.9924 84%, 0.9946 86%, 0.9963 88%, 0.9976 90%, 0.9986 92%, 0.9993 94%, 0.9997 96%, 0.9999 98%, 1 ); /* k=220 d=19 — ~7% overshoot, 600ms; landed from 55% */ --ease-spring: linear( 0, 0.01032 1.67%, 0.03864 3.33%, 0.08129 5%, 0.1349 6.67%, 0.1966 8.33%, 0.2637 10%, 0.3338 11.7%, 0.4052 13.3%, 0.4761 15%, 0.5452 16.7%, 0.6115 18.3%, 0.674 20%, 0.7323 21.7%, 0.7858 23.3%, 0.8344 25%, 0.8778 26.7%, 0.9162 28.3%, 0.9496 30%, 0.9783 31.7%, 1.002 33.3%, 1.022 35%, 1.038 36.7%, 1.051 38.3%, 1.06 40%, 1.067 41.7%, 1.071 43.3%, 1.073 45%, 1.073 46.7%, 1.071 48.3%, 1.069 50%, 1.065 51.7%, 1.061 53.3%, 1.056 55%, 1.051 56.7%, 1.046 58.3%, 1.04 60%, 1.034 61.7%, 1.028 63.3%, 1.023 65%, 1.018 66.7%, 1.014 68.3%, 1.01 70%, 1.007 71.7%, 1.005 73.3%, 1.003 75%, 1.001 76.7%, 1 78.3%, 0.9997 80%, 0.9992 81.7%, 0.999 83.3%, 0.999 85%, 0.999 86.7%, 0.9992 88.3%, 0.9993 90%, 0.9995 91.7%, 0.9997 93.3%, 0.9998 95%, 0.9999 96.7%, 1 ); /* k=400 d=20 — ~16% overshoot, 520ms; landed from 60% */ --ease-bouncy: linear( 0, 0.01867 1.92%, 0.06941 3.85%, 0.1446 5.77%, 0.237 7.69%, 0.3403 9.62%, 0.4487 11.5%, 0.5573 13.5%, 0.6623 15.4%, 0.7604 17.3%, 0.8494 19.2%, 0.9277 21.2%, 0.9945 23.1%, 1.049 25%, 1.092 26.9%, 1.124 28.8%, 1.146 30.8%, 1.158 32.7%, 1.163 34.6%, 1.161 36.5%, 1.153 38.5%, 1.141 40.4%, 1.127 42.3%, 1.11 44.2%, 1.092 46.2%, 1.075 48.1%, 1.057 50%, 1.041 51.9%, 1.026 53.8%, 1.013 55.8%, 1.002 57.7%, 0.9931 59.6%, 0.9859 61.5%, 0.9808 63.5%, 0.9777 65.4%, 0.9766 67.3%, 0.977 69.2%, 0.9787 71.2%, 0.9811 73.1%, 0.984 75%, 0.9871 76.9%, 0.9901 78.8%, 0.9927 80.8%, 0.995 82.7%, 0.9968 84.6%, 0.9981 86.5%, 0.9991 88.5%, 0.9996 90.4%, 0.9999 92.3%, 1 ); /* Piecewise cubic Hermite through (ms, value): (0,0) (130,.82) (300,.975) (350,1.06) (430,.985) (520,1.004) (600,1); 600ms */ --ease-birth: linear( 0, 0.09838 1.67%, 0.1931 3.33%, 0.2836 5%, 0.3692 6.67%, 0.4493 8.33%, 0.5233 10%, 0.5907 11.7%, 0.6507 13.3%, 0.7028 15%, 0.7464 16.7%, 0.7809 18.3%, 0.8056 20%, 0.82 21.7%, 0.8287 23.3%, 0.8368 25%, 0.8445 26.7%, 0.852 28.3%, 0.8592 30%, 0.8664 31.7%, 0.8736 33.3%, 0.881 35%, 0.8886 36.7%, 0.8967 38.3%, 0.9054 40%, 0.9146 41.7%, 0.9247 43.3%, 0.9356 45%, 0.9476 46.7%, 0.9607 48.3%, 0.975 50%, 0.9934 51.7%, 1.016 53.3%, 1.037 55%, 1.054 56.7%, 1.06 58.3%, 1.057 60%, 1.048 61.7%, 1.036 63.3%, 1.022 65%, 1.009 66.7%, 0.9967 68.3%, 0.9882 70%, 0.985 71.7%, 0.9857 73.3%, 0.9874 75%, 0.9899 76.7%, 0.9929 78.3%, 0.9961 80%, 0.9991 81.7%, 1.002 83.3%, 1.003 85%, 1.004 86.7%, 1.004 88.3%, 1.003 90%, 1.003 91.7%, 1.002 93.3%, 1.001 95%, 1.001 96.7%, 1 98.3%, 1 ); /* Same, through (0,0) (120,.07) (270,.72) (450,1); 450ms */ --ease-drown: linear( 0, 0.002752 2.22%, 0.005185 4.44%, 0.007562 6.67%, 0.01015 8.89%, 0.01321 11.1%, 0.017 13.3%, 0.02179 15.6%, 0.02785 17.8%, 0.03544 20%, 0.04481 22.2%, 0.05625 24.4%, 0.07 26.7%, 0.08948 28.9%, 0.1172 31.1%, 0.152 33.3%, 0.1928 35.6%, 0.2385 37.8%, 0.288 40%, 0.3401 42.2%, 0.3939 44.4%, 0.448 46.7%, 0.5015 48.9%, 0.5532 51.1%, 0.602 53.3%, 0.6468 55.6%, 0.6865 57.8%, 0.72 60%, 0.7493 62.2%, 0.777 64.4%, 0.8032 66.7%, 0.8279 68.9%, 0.8511 71.1%, 0.8726 73.3%, 0.8925 75.6%, 0.9108 77.8%, 0.9275 80%, 0.9425 82.2%, 0.9558 84.4%, 0.9674 86.7%, 0.9773 88.9%, 0.9854 91.1%, 0.9918 93.3%, 0.9963 95.6%, 0.9991 97.8%, 1 ); } } /* ---------- Palette ---------- */ /* * One theme: the Dynamic Island's black glass, everywhere. The island is * the single pure-black object; the chrome around it sits a hair above, * and the editor a hair above that, so the code pane reads as the lit * surface. Ink is white at four strengths. Everything that separates one * surface from another is a white-alpha hairline, like the island's rim. */ :root { color-scheme: dark; --bg-app: #050505; --bg-chrome: #060606; --bg-sidebar: #060606; --bg-editor: #0c0c0c; --bg-panel: #060606; --bg-elevated: rgba(12, 12, 12, 0.8); --bg-input: rgba(255, 255, 255, 0.05); --bg-hover: rgba(255, 255, 255, 0.07); --bg-active: rgba(255, 255, 255, 0.14); --bg-selected: rgba(255, 255, 255, 0.1); --bg-inverse: #f5f5f5; --fg: #f5f5f5; --fg-secondary: rgba(255, 255, 255, 0.72); --fg-muted: rgba(255, 255, 255, 0.5); --fg-subtle: rgba(255, 255, 255, 0.32); --fg-on-accent: #050505; --fg-inverse: #050505; /* Kept for functional highlights (editor cursor, links); chrome is neutral. */ --accent: #f5f5f5; --accent-hover: #ffffff; --accent-soft: rgba(255, 255, 255, 0.1); --link: #8ab4ff; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --separator: rgba(255, 255, 255, 0.07); --danger: #ff5e5b; --warning: #f5b544; --success: #4ade80; --info: #7cb3ff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.75), 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); /* Glass surfaces (overlays only — never the editor/sidebar): the island's black glass. */ --glass-bg: rgba(6, 6, 6, 0.72); --glass-border: rgba(255, 255, 255, 0.1); --glass-blur: 28px; --glass-highlight: rgba(255, 255, 255, 0.08); --lens-core: 255 255 255; --lens-bleed: 255 255 255; --lens-cool: 160 200 255; --lens-warm: 255 214 160; --glow-strength: 1; --dot-color: rgba(255, 255, 255, 0.05); /* The island itself: the deepest surface, edged by its own rim (its shadow is drawn by the goo filter in DynamicIsland.tsx). */ --island-bg: #000000; --island-rim: rgba(255, 255, 255, 0.12); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-spring: 0ms; --duration-bouncy: 0ms; --duration-drown: 0ms; --duration-liquid: 0ms; } }