/* ============================================================ hdw-ui — TOKENS Every value in an hdw product comes from this file. If a number is not in here, it does not go in the CSS. Load order: tokens.css → base.css → components.css ============================================================ */ /* ---- FONTS ---- Perch has no fonts/ folder and ships none: every screen is SF Pro, from the device (-apple-system), so there is no file to load and no licence to break. hdw-ui's own @font-face block is for Delight, Basis Grotesque Mono and the Inter Tight stand-in — hdwOS's print documents and its Windows/Android fallback. Perch has no print documents, and without the font files here, declaring them would only ever 404. Cut, not copied. */ :root{ color-scheme:dark light; /* ========================================================== 1 · COLOUR — pure monochrome. Dark is the default, light below. Black, white and neutral greys with no hue in them. Colour is kept for exactly three meanings and for data: --orange hdw itself: the mark, and ONE main action per screen --yes done, paid, approved (--c-green points here) --no overdue, failed, rejected (--c-red points here) --c-* the other hues stay, for charts and brand colours only. A status is never amber or blue: it is a grey that darkens as the work moves forward (--t0 to --t4). ========================================================== */ --canvas:#000000; /* the page behind everything */ --bg:#141414; /* a card, an input, a panel */ --bg2:#1c1c1c; /* a hovered row, a subtle fill */ --bg3:#262626; /* a pressed control, a well */ --fg:#ffffff; /* primary text */ --fg2:#a0a0a0; /* secondary text, labels */ --fg3:#6b6b6b; /* placeholder, disabled */ --border:rgba(255,255,255,.11); /* default hairline */ --border2:rgba(255,255,255,.20); /* hover / focus hairline */ --hairline:rgba(255,255,255,.14); /* on glass surfaces */ --orange:#ff3d14; /* hdw. The mark and one main action. */ --orange-dim:var(--bg3); /* was an orange wash; selection is grey now */ --thumb:#3a3a3a; /* the selected segment, lighter than its track */ --yes:#32d74b; --yes-wash:rgba(50,215,75,.14); --no:#ff453a; --no-wash:rgba(255,69,58,.14); /* Perch only: a soft warning. Waiting on you, not broken — never the red "failed" meaning. Derived from the kit's own amber (--c-amber), not a new colour, so it already resolves correctly in both themes below. */ --warn:var(--c-amber); --warn-wash:color-mix(in srgb, var(--c-amber) 14%, transparent); /* stage weight: a status chip darkens as work moves forward */ --t0:transparent; --t0-ink:#6b6b6b; --t0-ring:rgba(255,255,255,.22); --t1:#242424; --t1-ink:#9a9a9a; --t2:#3d3d3d; --t2-ink:#d4d4d4; --t3:#8a8a8a; --t3-ink:#000000; --t4:#ffffff; --t4-ink:#000000; /* chrome that blurs what scrolls beneath it (bars, sheets, menus) */ --glass:rgba(20,20,20,.72); --glass-thick:rgba(20,20,20,.82); --glass-fx:saturate(180%) blur(20px); /* ---- STATUS · colour carries meaning, never decoration ---- green done/paid · red overdue/failed · amber waiting/partial blue in progress · grey inactive */ --c-grey:#9aa3ad; --c-blue:#3d8bff; --c-amber:#ff9f1c; --c-orange:#ff6a3d;--c-violet:#b06bff;--c-pink:#ff4fa8; --c-green:var(--yes); --c-teal:#12d1bd; --c-red:var(--no); --c-yellow:#ffd21f; /* Status colour as TEXT on a tint of itself. The --c-* tokens are accents: right for a dot, a border or a bar, too pale for small text on a faint wash of themselves. These are the same hues pushed to a legible weight, per theme. Always 4.5:1 or better. */ --ink-grey:#c3c9d1; --ink-blue:#8ab4ff; --ink-amber:#ffc46b; --ink-green:var(--yes);--ink-red:var(--no); --ink-orange:#ff9d7a; --ink-violet:#c9a0ff; --ink-teal:#5ee8d8; --ink-pink:#ff9ccd; /* ========================================================== 2 · TYPE — SF Pro Regular. One weight, five sizes. Each size has one job. Hierarchy comes from size and colour: --fg for what you read, --fg2 for the line that explains it, --fg3 for dates and counts. No bold anywhere, and no manual tracking: SF Pro spaces itself for every size. Every number is tabular (set once on body), so columns of amounts line up. ========================================================== */ --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',system-ui,sans-serif; --font-display:var(--font-body); --font-mono:var(--font-body); /* numbers are SF Pro's tabular figures now */ --fs-title:26px; /* one per screen: the page title, the big amount */ --fs-heading:17px; /* a section, a card's name, a number in a tile */ --fs-body:13px; /* everything you read or press. A Mac's own text size. */ --fs-small:12px; /* the grey line under a title that explains it */ --fs-caption:11px; /* dates, counts, table heads, labels on data */ --w-reg:400; /* the only weight */ /* the old eleven steps, folded onto the five. Kept so every page that still names them lands on the new scale without being edited. */ --fs-1:var(--fs-caption); --fs-2:var(--fs-caption); --fs-3:var(--fs-small); --fs-4:var(--fs-body); --fs-5:var(--fs-body); --fs-6:var(--fs-heading); --fs-7:var(--fs-title); --fs-8:var(--fs-title); --fs-9:var(--fs-title); --fs-10:var(--fs-title); --fs-11:var(--fs-title); --fs-label:var(--fs-caption); --fs-meta:var(--fs-caption); --fs-sm:var(--fs-small); --fs-section:var(--fs-heading); --fs-page:var(--fs-title); --fs-hero:var(--fs-title); --lh-tight:1.2; /* title and heading */ --lh-snug:1.3; --lh:1.4; /* default UI text */ --lh-prose:1.6; /* paragraphs */ --ls-tight:0; /* retired: SF Pro tracks itself */ --ls-caps:.06em; /* only on small all-caps labels */ --measure:68ch; /* longest a line of prose ever gets */ /* ========================================================== 3 · SPACE — 4px grid. These nine values, nothing between. A 14 sitting next to a 16 is why things look untidy. ========================================================== */ --s-0:2px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --page-pad-x:32px; --page-pad-y:24px; --page-gap:var(--s-5); /* between stacked sections */ --page-max:1400px; /* widest a reading column gets */ /* ========================================================== 4 · SHAPE — rounded rectangles, the way a Mac draws them. outer radius = inner radius + the padding between them. Nothing is a pill except the switch and a count badge (--r-round). A button holding only an icon is a circle (50%). ========================================================== */ --r-xs:4px; /* thumbnail, the top of a chart bar */ --r-sm:6px; /* status chip, tag, menu item, segment */ --radius:8px; /* button, input, search, filter chip, nav row */ --r-box:12px; /* card, panel, table, board column, menu */ --r-lg:14px; /* modal, sheet */ --r-pill:8px; /* what used to be a pill is a rounded rectangle now */ --r-round:999px; /* the switch and a count badge. Nothing else. */ --ctrl-h-sm:28px; --ctrl-h:32px; /* standard button / input height, for 13px text */ --ctrl-h-lg:40px; /* primary CTA */ --hit:40px; /* minimum tap target, always */ --bw:1px; /* hairline */ --bw2:1.5px; /* checkbox, focus-adjacent */ /* ========================================================== 5 · ELEVATION — layered, low opacity, large blur. Shadows over hard borders wherever depth is the point. ========================================================== */ --shadow-1:0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.18); --shadow-2:0 2px 6px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.16); --shadow-soft:0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); --shadow-pop:0 24px 64px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5); /* ========================================================== 6 · MOTION — durations and curves, not vibes. Animate transform and opacity ONLY. Never width, height, top or left — those make the browser redo the whole layout every frame, which is what stutter actually is. ========================================================== */ --dur-fast:.12s; /* hover, press, colour change */ --dur:.2s; /* small thing entering or leaving */ --dur-slow:.32s; /* modal, drawer, sheet */ --transition:var(--dur-fast); /* legacy alias */ --ease:cubic-bezier(.22,.61,.36,1); /* default */ --ease-out:cubic-bezier(.16,1,.3,1); /* entering, decelerates */ --ease-in:cubic-bezier(.4,0,1,1); /* leaving, accelerates */ --ease-std:cubic-bezier(.2,0,0,1); /* the safe all-rounder */ --spring:cubic-bezier(.34,1.56,.64,1); /* one playful pop, rarely */ --stagger:40ms; /* delay between items in a list reveal */ --press:.96; /* scale on press. Exactly this. Never below .95 */ /* ========================================================== 7 · FOCUS — keyboard users get a real ring, always. 2px, 3:1 contrast minimum. Never remove without replacing. ========================================================== */ --focus-w:2px; --focus-offset:2px; --focus:var(--orange); /* ========================================================== 8 · LAYERS — every stacking value lives here. Random z-index numbers are why a modal ends up behind a bar. ========================================================== */ --z-base:0; --z-sticky:100; --z-nav:200; --z-dropdown:300; --z-overlay:400; --z-modal:500; --z-toast:600; --z-tooltip:700; /* ========================================================== 9 · BREAKPOINTS (documentation — @media needs literals) phone <640 · tablet 640–1024 · desk >1024 ========================================================== */ /* ========================================================== 10 · APP TOKENS Values a full application needs that a component kit alone does not. --zoom, --bc, --dt-grid and --dump-w are set at runtime by the app and must never be given a value here. ========================================================== */ --sidebar-w:220px; --font-logo:var(--font-body); --green:var(--yes); --green-dim:var(--yes-wash); /* ========================================================== 11 · LEGACY ALIASES Older names still referenced across the app, pointed at the canonical token so every page conforms without being edited. Dropping these collapses every pill radius to 0. Keep them. ========================================================== */ --pill:var(--r-pill); --r:var(--radius); --r2:var(--r-box); --r-ctrl:var(--radius); --font:var(--font-body); /* hdw-ui's --sans / --serif point print documents (proposals, agreements) at Delight. Perch has no print documents and no Delight file, so this kit does not carry those two names at all — nothing here would ever read them. */ } /* ============================================================ LIGHT THEME Both themes are designed, neither is an afterthought. [data-theme] wins in both directions so a toggle always works. ============================================================ */ :root[data-theme="light"]{ --canvas:#f2f2f2; --bg:#ffffff; --bg2:#f7f7f7; --bg3:#e8e8e8; --fg:#000000; --fg2:#6e6e6e; --fg3:#a0a0a0; --border:rgba(0,0,0,.09); --border2:rgba(0,0,0,.16); --hairline:rgba(0,0,0,.08); --orange:#ff2e00; --orange-dim:var(--bg3); --thumb:#ffffff; --glass:rgba(255,255,255,.72); --glass-thick:rgba(255,255,255,.82); --green:var(--yes); --green-dim:var(--yes-wash); --yes:#1d9c3f; --yes-wash:rgba(29,156,63,.10); --no:#d92d20; --no-wash:rgba(217,45,32,.10); --t0:transparent; --t0-ink:#a0a0a0; --t0-ring:rgba(0,0,0,.16); --t1:#ebebeb; --t1-ink:#6e6e6e; --t2:#cfcfcf; --t2-ink:#3d3d3d; --t3:#8a8a8a; --t3-ink:#ffffff; --t4:#000000; --t4-ink:#ffffff; --c-grey:#6e747c; --c-blue:#2563eb; --c-amber:#e08a00; --c-orange:#e23c12;--c-violet:#8b3ff0;--c-pink:#d4188a; --c-green:var(--yes);--c-teal:#0a9d90; --c-red:var(--no); --c-yellow:#9a7d00; --ink-grey:#4a5058; --ink-blue:#1a49c4; --ink-amber:#7a4a00; --ink-green:var(--yes);--ink-red:var(--no); --ink-orange:#a8330f; --ink-violet:#6a2cc0; --ink-teal:#0b6f66; --ink-pink:#a3136a; --shadow-1:0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04); --shadow-2:0 2px 6px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05); --shadow-soft:0 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06); --shadow-pop:0 24px 64px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); } /* Follow the device when nobody has chosen. Guarded so an explicit dark choice is never overwritten by a light system setting. */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --canvas:#f2f2f2; --bg:#ffffff; --bg2:#f7f7f7; --bg3:#e8e8e8; --fg:#000000; --fg2:#6e6e6e; --fg3:#a0a0a0; --border:rgba(0,0,0,.09); --border2:rgba(0,0,0,.16); --hairline:rgba(0,0,0,.08); --orange:#ff2e00; --orange-dim:var(--bg3); --thumb:#ffffff; --glass:rgba(255,255,255,.72); --glass-thick:rgba(255,255,255,.82); --green:var(--yes); --green-dim:var(--yes-wash); --yes:#1d9c3f; --yes-wash:rgba(29,156,63,.10); --no:#d92d20; --no-wash:rgba(217,45,32,.10); --t0:transparent; --t0-ink:#a0a0a0; --t0-ring:rgba(0,0,0,.16); --t1:#ebebeb; --t1-ink:#6e6e6e; --t2:#cfcfcf; --t2-ink:#3d3d3d; --t3:#8a8a8a; --t3-ink:#ffffff; --t4:#000000; --t4-ink:#ffffff; --c-grey:#6e747c; --c-blue:#2563eb; --c-amber:#e08a00; --c-orange:#e23c12;--c-violet:#8b3ff0;--c-pink:#d4188a; --c-green:var(--yes);--c-teal:#0a9d90; --c-red:var(--no); --c-yellow:#9a7d00; --ink-grey:#4a5058; --ink-blue:#1a49c4; --ink-amber:#7a4a00; --ink-green:var(--yes);--ink-red:var(--no); --ink-orange:#a8330f; --ink-violet:#6a2cc0; --ink-teal:#0b6f66; --ink-pink:#a3136a; --shadow-1:0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04); --shadow-2:0 2px 6px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05); --shadow-soft:0 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06); --shadow-pop:0 24px 64px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); } } /* Phones: tighter gutters, bigger controls. */ @media (max-width:640px){ :root{ --page-pad-x:16px; --page-pad-y:16px; --ctrl-h:40px; --ctrl-h-lg:48px; /* a phone is held further away: body and small go up a step */ --fs-body:14px; --fs-small:13px; } } /* Touch: a mouse hits 32px fine, a thumb does not. Every small control grows to the 40px minimum on a touch device without changing how it looks on a desk. This is keyed to the pointer, not the screen width, because a small window on a laptop is still driven by a mouse. */ @media (pointer:coarse){ :root{ --ctrl-h-sm:var(--hit); --ctrl-h:var(--hit); } }