/* * Drive Union design tokens. * * The :root and [data-theme="dark"] blocks below are the handoff's, verbatim — the values are * copied out of docs/design/drive-union/Drive Union.dc.html, not re-derived. The design is * high-fidelity and final; an oklch() lightness rounded "to something nicer" is a visible bug. * * oklch() is used on purpose and stays: the palette's greens hold their perceived lightness * across both themes only because it is a perceptual space. Do not convert these to hex. */ /* [data-theme="light"] is not in the handoff, which only names :root. It is here so light is addressable the same way dark is: the style guide puts a light panel and a dark panel on one page, and means what it says instead of working by accident because :root happens to be the same element. */ :root, [data-theme="light"] { --bg: oklch(0.975 0.005 160); --surface: #ffffff; --surface2: oklch(0.985 0.004 160); --line: oklch(0.915 0.006 160); --text: oklch(0.25 0.012 160); --muted: oklch(0.56 0.012 160); --accent: #0F9D77; --accent-ink: #0B7A5C; --soft: oklch(0.955 0.028 165); --warn: oklch(0.72 0.13 70); --warn-soft: oklch(0.96 0.04 80); --danger: oklch(0.57 0.16 27); --danger-soft: oklch(0.96 0.03 27); --shadow: 0 1px 2px rgba(16, 40, 32, .05), 0 8px 24px -12px rgba(16, 40, 32, .18); --row-pad: 11px 14px; } [data-theme="dark"] { --bg: oklch(0.185 0.008 165); --surface: oklch(0.225 0.010 165); --surface2: oklch(0.255 0.010 165); --line: oklch(0.315 0.012 165); --text: oklch(0.955 0.005 160); --muted: oklch(0.70 0.010 160); --accent: oklch(0.78 0.12 168); --accent-ink: oklch(0.86 0.10 168); --soft: oklch(0.30 0.045 168); --warn: oklch(0.80 0.12 75); --warn-soft: oklch(0.31 0.05 75); --danger: oklch(0.70 0.14 27); --danger-soft: oklch(0.30 0.06 27); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6); } /* The handoff's density switch. Table rows read their padding from --row-pad and nothing else, so compact is one attribute on the root rather than a second set of row rules. */ [data-density="compact"] { --row-pad: 7px 14px; } /* * Not colour tokens — the two font stacks the handoff names, lifted into variables so the * monospace run (sizes, ids, slugs, speeds) is one declaration instead of forty inline copies. * The stacks themselves are the handoff's, unchanged. */ :root { --font-sans: Vazirmatn, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; }