/* DomainHunter.si - theme.css. Linked LAST on every page. Holds (1) the colour tokens of the two themes and (2) the look: a registry tool in the reference's skin - a cool near-white or near-black canvas, one ink, one quiet ink, hairlines, a steel accent that stays out of the way, and ONE control (28 px, 6 px corners, a surface drawn by a soft shadow and an inset edge). Lists are ledgers. Two corner radii: 6 px for controls, 4 px for small cells. Theme contract: theme.js puts exactly one of the classes "light" / "dark" on (and data-theme-mode="auto|light|dark"). Without scripts there is no class, so the tokens are written three times from one source: :root, .light light .dark dark @media (prefers-color-scheme: dark) :root:not(.light):not(.dark) dark Nothing below the token section names a theme: every rule reads tokens, so the class path and the no-script path are painted by the same rules. The markup carries no literal-colour utility and no "dark:" variant: a colour is a token class of the base (text-foreground, text-muted-foreground) or a named class painted here (dh-meta, dh-section-on, dh-marker). Where the values come from (tools/solve_theme.py): the palette, the control, the strong control, the focus colour and the selection are the reference's exact values; the state tones, the control-edge tone for marks, the scroll cue, the tone steps and the ground of a ruled-out hour are solved against those canvases in the reference's cool hue. Roles: --background the canvas: page, banner and sidebar stand on it --foreground ink --muted-foreground quiet ink --card / --popover the raised plane (a menu) --muted the soft plane: a hovered row, the active sidebar row, a disabled button --border the hairline --dh-btn / -hover THE CONTROL's surface and its hover ground (buttons, fields, the chosen cell of a rail); --dh-field is the same surface under a field --primary / --primary-foreground / --dh-primary-hover the STRONG control: the inverse of the page. The primary action and an ending toggle that is on. It is not a coloured fill. --ring = --dh-accent = --dh-mark the accent (steel): the focus ring, the marker of the active sidebar row, small marks. Links are ink with a line under them, not accent. --input the control-edge tone for marks only (scrollbar, lifeline, the line under a quiet link); a field has no border, it is the control --dh-select / -fg selected text The banner is not styled here. It sits on the canvas and reads the standard tokens only (--background, --foreground, --muted-foreground, --border, --ring, --muted) and --dh-logo for the mark; the browser-toolbar colour (theme-color) is the canvas of each theme. Sizes follow one module of 28 (the KIT comment in app.css): controls, fields, tabs, toggles, sidebar rows and ledger rows are 28 px (a button in a ledger row 24 px; 40 px to a finger), type 11 / 12 / 13 / 14 / 16 / 20 / 32, weights 400 / 500 / 600. Specificity: rules here start with ":root", which ties or beats the base, and this sheet comes later. GENERATED PARTS - python tools/solve_theme.py rewrites the table below and the token section; python tools/contrast.py re-reads the tokens and is the gate (exit 1 on a FAIL). @contrast:begin pair floor light floor dark --------------------------------------------------------------------------------------- foreground on background 7.00 15.81 PASS 7.00 15.77 PASS foreground on card 7.00 16.90 PASS 7.00 14.27 PASS foreground on muted 7.00 14.82 PASS 7.00 13.05 PASS foreground on field 7.00 16.90 PASS 7.00 13.05 PASS body text (ink at 82%) on background 7.00 9.16 PASS 7.00 10.70 PASS muted-foreground on background 4.50 5.61 PASS 4.50 9.86 PASS muted-foreground on card 4.50 5.99 PASS 4.50 8.93 PASS muted-foreground on muted 4.50 5.26 PASS 4.50 8.16 PASS muted-foreground on field 4.50 5.99 PASS 4.50 8.16 PASS muted-foreground on note ground 4.50 5.45 PASS 4.50 9.27 PASS meta line on background 4.50 5.61 PASS 4.50 9.86 PASS accent as text on background 4.50 5.80 PASS 4.50 11.17 PASS accent as text on card 4.50 6.20 PASS 4.50 10.11 PASS accent as text on soft plane (hover row) 4.50 5.44 PASS 4.50 9.25 PASS accent as text on note ground 4.50 5.64 PASS 4.50 10.50 PASS strong control: label on its ground 4.50 18.40 PASS 4.50 15.88 PASS strong control: label on hover ground 4.50 17.47 PASS 4.50 13.29 PASS strong control: ground against the canvas 3.00 17.65 PASS 3.00 19.01 PASS strong control: hover ground against canvas 3.00 16.76 PASS 3.00 15.92 PASS strong control: ground against card 3.00 18.88 PASS 3.00 17.21 PASS focus ring against the strong control 0.00 3.04 3.00 1.70 REF focus ring gap (canvas) against the ground 3.00 17.65 PASS 3.00 19.01 PASS control: label on surface 4.50 16.90 PASS 4.50 13.05 PASS control: label on hover ground 4.50 15.91 PASS 4.50 11.63 PASS control: edge vs canvas (floor 1.3) 1.30 1.18 REF 1.30 1.75 PASS control: hover edge vs canvas (1.3) 1.30 1.25 REF 1.30 1.99 PASS control: surface vs canvas [no floor] 0.00 1.06 0.00 1.20 control: hover step [no floor] 0.00 1.06 0.00 1.12 control: trailing icon on surface 3.00 5.99 PASS 3.00 8.16 PASS control: trailing icon on hover 3.00 5.64 PASS 3.00 7.27 PASS strong control: trailing icon on its ground 3.00 5.18 PASS 3.00 3.27 PASS strong control: trailing icon on hover 3.00 5.19 PASS 3.00 3.13 PASS control: top edge vs canvas [no floor] 0.00 1.25 0.00 1.75 control: foot edge vs canvas [no floor] 0.00 1.29 0.00 1.75 row button: edge vs hovered row (1.3) 1.30 1.11 REF 1.30 1.65 PASS row button: hover edge vs hovered row (1.3) 1.30 1.17 REF 1.30 1.75 PASS row button: face vs hovered row (1.03) 1.03 1.14 PASS 1.03 1.12 PASS row button: hover face vs hovered row 1.03 1.07 PASS 1.03 1.20 PASS row button: label on its face 4.50 16.90 PASS 4.50 11.63 PASS row button: label on its hover face 4.50 15.91 PASS 4.50 10.84 PASS disabled button: quiet ink on the soft plane 4.50 5.26 PASS 4.50 8.16 PASS disabled button: hairline on it [no floor] 0.00 1.17 0.00 1.15 disabled tab at 65% (floor 2.5) 2.50 2.74 PASS 2.50 4.67 PASS field: text on the field ground 7.00 16.90 PASS 7.00 13.05 PASS field: placeholder on the field ground 4.50 5.99 PASS 4.50 8.16 PASS field: edge vs canvas 3.00 1.18 REF 3.00 1.75 REF destructive text on background 4.50 8.29 PASS 4.50 6.79 PASS destructive text on field 4.50 8.86 PASS 4.50 5.62 PASS destructive text on note ground 4.50 8.06 PASS 4.50 6.38 PASS destructive edge on field (invalid input) 3.00 8.86 PASS 3.00 5.62 PASS state registered on background 4.50 8.03 PASS 4.50 8.02 PASS state registered on muted 4.50 7.53 PASS 4.50 6.64 PASS state quarantine on background 4.50 6.37 PASS 4.50 8.96 PASS state quarantine on muted 4.50 5.97 PASS 4.50 7.42 PASS state notfound on background 4.50 15.81 PASS 4.50 15.77 PASS state notfound on muted 4.50 14.82 PASS 4.50 13.05 PASS state problem on background 4.50 8.29 PASS 4.50 6.79 PASS state problem on muted 4.50 7.77 PASS 4.50 5.62 PASS state quiet on background 4.50 5.61 PASS 4.50 9.86 PASS state quiet on muted 4.50 5.26 PASS 4.50 8.16 PASS state queued on background 4.50 5.61 PASS 4.50 9.86 PASS state queued on muted 4.50 5.26 PASS 4.50 8.16 PASS quarantine vs problem, lightness step 1.25 1.30 PASS 1.25 1.31 PASS not found vs registered, lightness step 1.50 1.96 PASS 1.50 1.96 PASS input border against background 3.00 3.36 PASS 3.00 3.81 PASS input border against card 3.00 3.59 PASS 3.00 3.45 PASS input border against field 3.00 3.59 PASS 3.00 3.15 PASS input border against sidebar 3.00 3.36 PASS 3.00 3.81 PASS input border against muted (tab rail) 3.00 3.15 PASS 3.00 3.15 PASS focus ring against background 3.00 5.80 PASS 3.00 11.17 PASS focus ring against muted 3.00 5.44 PASS 3.00 9.25 PASS focus ring against field 3.00 6.20 PASS 3.00 9.25 PASS focus ring against sidebar 3.00 5.80 PASS 3.00 11.17 PASS focus ring against active sidebar row 3.00 5.44 PASS 3.00 9.25 PASS banner: value (ink) on canvas 7.00 15.81 PASS 7.00 15.77 PASS banner: label (quiet ink) on canvas 4.50 5.61 PASS 4.50 9.86 PASS banner: mark (--dh-logo) on canvas 3.00 15.81 PASS 3.00 15.77 PASS banner: icon button (quiet ink) on canvas 3.00 5.61 PASS 3.00 9.86 PASS banner: focus ring on canvas 3.00 5.80 PASS 3.00 11.17 PASS banner: button hover, ink on --muted 7.00 14.82 PASS 7.00 13.05 PASS banner: credit (quiet ink) on canvas 4.50 5.61 PASS 4.50 9.86 PASS banner: hairline on canvas [no floor] 0.00 1.25 0.00 1.39 skip link (the strong control): its label 7.00 18.40 PASS 7.00 15.88 PASS sidebar label on sidebar 4.50 5.61 PASS 4.50 9.86 PASS sidebar label, hover (ink on row fill) 4.50 14.82 PASS 4.50 13.05 PASS active sidebar row: label on fill 4.50 14.82 PASS 4.50 13.05 PASS active sidebar row: marker on fill 3.00 5.44 PASS 3.00 9.25 PASS active sidebar row: marker vs sidebar 3.00 5.80 PASS 3.00 11.17 PASS mark (index dot, sort bar) on background 3.00 5.80 PASS 3.00 11.17 PASS mark (row bar) on muted 3.00 5.44 PASS 3.00 9.25 PASS due row: bar (quarantine tone) on canvas 3.00 6.37 PASS 3.00 8.96 PASS due row: bar (quarantine tone) on muted 3.00 5.97 PASS 3.00 7.42 PASS sort arrow (ink) on background 3.00 15.81 PASS 3.00 15.77 PASS document list dash on background 3.00 5.61 PASS 3.00 9.86 PASS document index dot (ink at 50%) on canvas 3.00 3.20 PASS 3.00 4.52 PASS scrollbar thumb on background 3.00 3.36 PASS 3.00 3.81 PASS calendar bar (ink at 80%) on canvas 3.00 8.47 PASS 3.00 10.15 PASS header rule (ink at --dh-rule-a) on canvas 3.00 15.81 PASS 3.00 7.99 PASS row gauge (quiet ink) vs hairline 3.00 4.48 PASS 3.00 7.07 PASS closing rule / month tick (ink at 55%) 3.00 3.72 PASS 3.00 5.26 PASS scroll cue edge vs canvas (floor 1.3) 1.30 1.57 PASS 1.30 1.33 PASS lifeline: scheduled / conditional span 3.00 3.36 PASS 3.00 3.81 PASS lifeline: span already run (ink at 80%) 3.00 8.47 PASS 3.00 10.15 PASS lifeline: quarantine stretch on canvas 3.00 6.37 PASS 3.00 8.96 PASS clock: ruled-out hour vs canvas (1.2) 1.20 1.20 PASS 1.20 1.20 PASS clock: bar (ink at 80%) on a ruled-out hour 3.00 7.51 PASS 3.00 8.77 PASS clock: bar (ink at 80%) on the tab-rail plane 3.00 8.18 PASS 3.00 8.78 PASS grid: tone 1 vs canvas (1.2) 1.20 1.20 PASS 1.20 1.21 PASS grid: ink on tone 1 7.00 13.08 PASS 7.00 12.95 PASS grid: tone 2 vs tone 1 (1.2) 1.20 1.21 PASS 1.20 1.20 PASS grid: ink on tone 2 7.00 10.78 PASS 7.00 10.75 PASS grid: tone 3 vs tone 2 (1.2) 1.20 1.20 PASS 1.20 1.21 PASS grid: ink on tone 3 7.00 8.92 PASS 7.00 8.84 PASS grid: quiet ink on the canvas (empty cell) 4.50 5.61 PASS 4.50 9.86 PASS grid: canvas on full ink (last step) 7.00 15.81 PASS 7.00 15.77 PASS strip: half mark vs canvas 3.00 3.20 PASS 3.00 4.52 PASS strip: half mark vs full mark 3.00 4.92 PASS 3.00 3.48 PASS strip: trace (ink at 14%) vs canvas [no floor] 0.00 1.32 0.00 1.38 strip: half mark vs trace [no floor] 0.00 2.41 0.00 3.26 select menu: ink on the menu ground 7.00 16.90 PASS 7.00 14.27 PASS copy button, hover: ink on its ground 7.00 12.67 PASS 7.00 10.56 PASS contents spine (edge tone at 70%) [no floor] 0.00 2.20 0.00 2.44 ending toggle, on: label on chip 7.00 18.40 PASS 7.00 15.88 PASS ending toggle, chip vs off face 7.00 18.88 PASS 7.00 15.74 PASS ending toggle, on: chip vs background 3.00 17.65 PASS 3.00 19.01 PASS ending toggle, off: label on its face 4.50 16.90 PASS 4.50 13.05 PASS ending toggle, hover: ink on hover ground 7.00 15.91 PASS 7.00 11.63 PASS chosen cell: label on its face 7.00 16.90 PASS 7.00 13.05 PASS chosen cell: face vs its rail [no floor] 0.00 1.06 0.00 1.20 chosen cell: edge vs its rail (1.3) 1.30 1.18 REF 1.30 1.75 PASS rail: quiet label on the canvas 4.50 5.61 PASS 4.50 9.86 PASS rail: hairline on the canvas [no floor] 0.00 1.25 0.00 1.39 ink on code chip 7.00 14.08 PASS 7.00 14.14 PASS muted-foreground on code chip 4.50 4.99 PASS 4.50 8.84 PASS selection: its ink on its ground 4.50 5.04 PASS 4.50 5.04 PASS selection: ground against the canvas 3.00 4.71 PASS 3.00 3.86 PASS plane: card against background [no floor] 0.00 1.06 0.00 1.10 plane: field against background [no floor] 0.00 1.06 0.00 1.20 plane: tab rail against background [no floor] 0.00 1.06 0.00 1.20 plane: sidebar against background [no floor] 0.00 1.00 0.00 1.00 plane: active row against sidebar [no floor] 0.00 1.06 0.00 1.20 hairline against background [no floor] 0.00 1.25 0.00 1.39 hairline against muted [no floor] 0.00 1.17 0.00 1.15 hairline against sidebar [no floor] 0.00 1.25 0.00 1.39 dark: ink on canvas, CEILING <=15 15.77 REF margin: strong control: label on its ground 4.65 15.88 PASS margin: strong control: label on hover ground 4.65 13.29 PASS margin: strong control: ground against the canvas 3.15 19.01 PASS margin: strong control: hover ground against canvas 3.15 15.92 PASS REF = an exact reference value kept under a floor of this table: dark focus ring against the strong control 1.70 (floor 3.0) - the reference focus colour beside the reference strong ground; a 2px gap of canvas lies between them light control: edge vs canvas (floor 1.3) 1.18 (floor 1.3) - the reference control: its inset edge on its surface, beside the reference canvas light control: hover edge vs canvas (1.3) 1.25 (floor 1.3) - the reference control: its inset edge on its surface, beside the reference canvas light row button: edge vs hovered row (1.3) 1.11 (floor 1.3) - the reference control on the reference soft plane (a hovered row) light row button: hover edge vs hovered row (1.3) 1.17 (floor 1.3) - the reference control on the reference soft plane (a hovered row) light field: edge vs canvas 1.18 (floor 3.0) - a field is the reference control: a surface and an inset edge, not a 3:1 border dark field: edge vs canvas 1.75 (floor 3.0) - a field is the reference control: a surface and an inset edge, not a 3:1 border light chosen cell: edge vs its rail (1.3) 1.18 (floor 1.3) - the reference control: its inset edge on its surface, beside the reference canvas dark ink on canvas, CEILING 15.77 (ceiling 15) - the reference ink on the reference canvas light, closest to its floor: input border against muted (tab rail) 3.15 (floor 3.0) document index dot (ink at 50%) on canvas 3.20 (floor 3.0) strip: half mark vs canvas 3.20 (floor 3.0) muted-foreground on code chip 4.99 (floor 4.5) input border against background 3.36 (floor 3.0) dark, closest to its floor: strong control: trailing icon on hover 3.13 (floor 3.0) input border against field 3.15 (floor 3.0) input border against muted (tab rail) 3.15 (floor 3.0) strong control: trailing icon on its ground 3.27 (floor 3.0) selection: its ink on its ground 5.04 (floor 4.5) @contrast:end */ /* ------------------------------------------------------------------ 1. Tokens */ /* @tokens:begin - generated by tools/solve_theme.py; change the anchors there, not these values */ :root, .light { color-scheme: light; --radius: 6px; --background: 240 23.1% 97.5%; /* #f7f7fa */ --foreground: 240 13.8% 12.7%; /* #1c1c25 */ --card: 0 0% 100%; /* #ffffff */ --card-foreground: 240 13.8% 12.7%; /* #1c1c25 */ --popover: 0 0% 100%; /* #ffffff */ --popover-foreground: 240 13.8% 12.7%; /* #1c1c25 */ --primary: 0 0% 6.7%; /* #111111 */ --primary-foreground: 0 0% 98.8%; /* #fcfcfc */ --secondary: 222.9 25.9% 94.7%; /* #eef0f5 */ --secondary-foreground: 240 13.8% 12.7%; /* #1c1c25 */ --muted: 222.9 25.9% 94.7%; /* #eef0f5 */ --muted-foreground: 240 6.7% 41.2%; /* #626270 */ --accent: 222.9 25.9% 94.7%; /* #eef0f5 */ --accent-foreground: 240 13.8% 12.7%; /* #1c1c25 */ --destructive: 2.4 70% 33.1%; /* #8f1e19 */ --destructive-foreground: 240 23.1% 97.5%; /* #f7f7fa */ --border: 240 13.8% 88.6%; /* #dedee6 */ --input: 239 6% 55.1%; /* #868693 */ --ring: 215.3 16.8% 39.6%; /* #546276 */ --sidebar-background: 240 23.1% 97.5%; /* #f7f7fa */ --sidebar-foreground: 240 6.7% 41.2%; /* #626270 */ --sidebar-primary: 0 0% 6.7%; /* #111111 */ --sidebar-primary-foreground: 0 0% 98.8%; /* #fcfcfc */ --sidebar-accent: 222.9 25.9% 94.7%; /* #eef0f5 */ --sidebar-accent-foreground: 240 13.8% 12.7%; /* #1c1c25 */ --sidebar-border: 240 13.8% 88.6%; /* #dedee6 */ --sidebar-ring: 215.3 16.8% 39.6%; /* #546276 */ --dh-accent: 215.3 16.8% 39.6%; /* #546276 */ --dh-mark: 215.3 16.8% 39.6%; /* #546276 */ --dh-primary-hover: 0 0% 9%; /* #171717 */ --dh-field: 0 0% 100%; /* #ffffff */ --dh-meta: 240 6.7% 41.2%; /* #626270 */ --dh-st-registered: 239.3 7.5% 31.8%; /* #4b4b57 */ --dh-st-quarantine: 26.3 41% 34%; /* #7a5233 */ --dh-st-notfound: 240 13.8% 12.7%; /* #1c1c25 */ --dh-st-problem: 2.4 70% 33.1%; /* #8f1e19 */ --dh-st-quiet: 240 6.7% 41.2%; /* #626270 */ --dh-st-queued: 240 6.7% 41.2%; /* #626270 */ --dh-shade: 240 13.8% 12.7%; /* #1c1c25 */ --dh-ruled: 238.7 34.3% 91.3%; /* #e1e2f0 */ --dh-btn: 0 0% 100%; /* #ffffff */ --dh-btn-hover: 0 0% 97.3%; /* #f8f8f8 */ --dh-btn-row: 0 0% 100%; /* #ffffff */ --dh-btn-row-hover: 0 0% 97.3%; /* #f8f8f8 */ --dh-btn-icon: 240 6.7% 41.2%; /* #626270 */ --dh-btn-edge: 0 0% 0%; /* #000000 */ --dh-select: 228.1 100% 60.4%; /* #355dff */ --dh-select-fg: 0 0% 100%; /* #ffffff */ --dh-black: 0 0% 0%; /* #000000 */ --dh-white: 0 0% 100%; /* #ffffff */ --dh-logo: 240 13.8% 12.7%; /* #1c1c25 */ --dh-cue: 0.22; --dh-tone-1: 0.095; --dh-tone-2: 0.185; --dh-tone-3: 0.27; --dh-btn-drop: 0.0392; --dh-btn-a-top: 0.0267; --dh-btn-a-line: 0.04; --dh-btn-a-foot: 0.04; --dh-btn-a-ring: 0.0667; --dh-btn-icon-a: 0.5; --dh-rule-a: 1; --dh-display-weight: 600; } .dark { color-scheme: dark; --radius: 6px; --background: 240 17.2% 5.7%; /* #0c0c11 */ --foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --card: 240 12.7% 10.8%; /* #18181f */ --card-foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --popover: 240 12.7% 10.8%; /* #18181f */ --popover-foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --primary: 0 0% 98.8%; /* #fcfcfc */ --primary-foreground: 0 0% 12.5%; /* #202020 */ --secondary: 240 12.3% 14.3%; /* #202029 */ --secondary-foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --muted: 240 12.3% 14.3%; /* #202029 */ --muted-foreground: 240 13.4% 75.1%; /* #b7b7c8 */ --accent: 240 12.3% 14.3%; /* #202029 */ --accent-foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --destructive: 6.8 55.5% 65.3%; /* #d88175 */ --destructive-foreground: 240 17.2% 5.7%; /* #0c0c11 */ --border: 240 11.3% 19%; /* #2b2b36 */ --input: 239.1 5.7% 45.1%; /* #6c6d7a */ --ring: 213.9 20.4% 77.8%; /* #bbc5d2 */ --sidebar-background: 240 17.2% 5.7%; /* #0c0c11 */ --sidebar-foreground: 240 13.4% 75.1%; /* #b7b7c8 */ --sidebar-primary: 0 0% 98.8%; /* #fcfcfc */ --sidebar-primary-foreground: 0 0% 12.5%; /* #202020 */ --sidebar-accent: 240 12.3% 14.3%; /* #202029 */ --sidebar-accent-foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --sidebar-border: 240 11.3% 19%; /* #2b2b36 */ --sidebar-ring: 213.9 20.4% 77.8%; /* #bbc5d2 */ --dh-accent: 213.9 20.4% 77.8%; /* #bbc5d2 */ --dh-mark: 213.9 20.4% 77.8%; /* #bbc5d2 */ --dh-primary-hover: 0 0% 91%; /* #e8e8e8 */ --dh-field: 240 12.3% 14.3%; /* #202029 */ --dh-meta: 240 13.4% 75.1%; /* #b7b7c8 */ --dh-st-registered: 238.9 8.5% 67.4%; /* #a5a5b3 */ --dh-st-quarantine: 36.2 35.9% 65%; /* #c6ac86 */ --dh-st-notfound: 240 35.1% 92.7%; /* #e6e6f3 */ --dh-st-problem: 6.8 55.5% 65.3%; /* #d88175 */ --dh-st-quiet: 240 13.4% 75.1%; /* #b7b7c8 */ --dh-st-queued: 240 13.4% 75.1%; /* #b7b7c8 */ --dh-shade: 240 35.1% 92.7%; /* #e6e6f3 */ --dh-ruled: 240.2 14.3% 14.5%; /* #20202a */ --dh-btn: 240 12.3% 14.3%; /* #202029 */ --dh-btn-hover: 240 10.9% 18%; /* #292933 */ --dh-btn-row: 240 10.9% 18%; /* #292933 */ --dh-btn-row-hover: 239.8 10.9% 20.1%; /* #2e2e39 */ --dh-btn-icon: 240 13.4% 75.1%; /* #b7b7c8 */ --dh-btn-edge: 0 0% 100%; /* #ffffff */ --dh-select: 228.1 100% 60.4%; /* #355dff */ --dh-select-fg: 0 0% 100%; /* #ffffff */ --dh-black: 0 0% 0%; /* #000000 */ --dh-white: 0 0% 100%; /* #ffffff */ --dh-logo: 240 35.1% 92.7%; /* #e6e6f3 */ --dh-cue: 0.13; --dh-tone-1: 0.095; --dh-tone-2: 0.16; --dh-tone-3: 0.22; --dh-btn-drop: 0.2; --dh-btn-a-top: 0; --dh-btn-a-line: 0; --dh-btn-a-foot: 0; --dh-btn-a-ring: 0.1216; --dh-btn-icon-a: 0.51; --dh-rule-a: 0.7; --dh-display-weight: 600; } @media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) { color-scheme: dark; --radius: 6px; --background: 240 17.2% 5.7%; /* #0c0c11 */ --foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --card: 240 12.7% 10.8%; /* #18181f */ --card-foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --popover: 240 12.7% 10.8%; /* #18181f */ --popover-foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --primary: 0 0% 98.8%; /* #fcfcfc */ --primary-foreground: 0 0% 12.5%; /* #202020 */ --secondary: 240 12.3% 14.3%; /* #202029 */ --secondary-foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --muted: 240 12.3% 14.3%; /* #202029 */ --muted-foreground: 240 13.4% 75.1%; /* #b7b7c8 */ --accent: 240 12.3% 14.3%; /* #202029 */ --accent-foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --destructive: 6.8 55.5% 65.3%; /* #d88175 */ --destructive-foreground: 240 17.2% 5.7%; /* #0c0c11 */ --border: 240 11.3% 19%; /* #2b2b36 */ --input: 239.1 5.7% 45.1%; /* #6c6d7a */ --ring: 213.9 20.4% 77.8%; /* #bbc5d2 */ --sidebar-background: 240 17.2% 5.7%; /* #0c0c11 */ --sidebar-foreground: 240 13.4% 75.1%; /* #b7b7c8 */ --sidebar-primary: 0 0% 98.8%; /* #fcfcfc */ --sidebar-primary-foreground: 0 0% 12.5%; /* #202020 */ --sidebar-accent: 240 12.3% 14.3%; /* #202029 */ --sidebar-accent-foreground: 240 35.1% 92.7%; /* #e6e6f3 */ --sidebar-border: 240 11.3% 19%; /* #2b2b36 */ --sidebar-ring: 213.9 20.4% 77.8%; /* #bbc5d2 */ --dh-accent: 213.9 20.4% 77.8%; /* #bbc5d2 */ --dh-mark: 213.9 20.4% 77.8%; /* #bbc5d2 */ --dh-primary-hover: 0 0% 91%; /* #e8e8e8 */ --dh-field: 240 12.3% 14.3%; /* #202029 */ --dh-meta: 240 13.4% 75.1%; /* #b7b7c8 */ --dh-st-registered: 238.9 8.5% 67.4%; /* #a5a5b3 */ --dh-st-quarantine: 36.2 35.9% 65%; /* #c6ac86 */ --dh-st-notfound: 240 35.1% 92.7%; /* #e6e6f3 */ --dh-st-problem: 6.8 55.5% 65.3%; /* #d88175 */ --dh-st-quiet: 240 13.4% 75.1%; /* #b7b7c8 */ --dh-st-queued: 240 13.4% 75.1%; /* #b7b7c8 */ --dh-shade: 240 35.1% 92.7%; /* #e6e6f3 */ --dh-ruled: 240.2 14.3% 14.5%; /* #20202a */ --dh-btn: 240 12.3% 14.3%; /* #202029 */ --dh-btn-hover: 240 10.9% 18%; /* #292933 */ --dh-btn-row: 240 10.9% 18%; /* #292933 */ --dh-btn-row-hover: 239.8 10.9% 20.1%; /* #2e2e39 */ --dh-btn-icon: 240 13.4% 75.1%; /* #b7b7c8 */ --dh-btn-edge: 0 0% 100%; /* #ffffff */ --dh-select: 228.1 100% 60.4%; /* #355dff */ --dh-select-fg: 0 0% 100%; /* #ffffff */ --dh-black: 0 0% 0%; /* #000000 */ --dh-white: 0 0% 100%; /* #ffffff */ --dh-logo: 240 35.1% 92.7%; /* #e6e6f3 */ --dh-cue: 0.13; --dh-tone-1: 0.095; --dh-tone-2: 0.16; --dh-tone-3: 0.22; --dh-btn-drop: 0.2; --dh-btn-a-top: 0; --dh-btn-a-line: 0; --dh-btn-a-foot: 0; --dh-btn-a-ring: 0.1216; --dh-btn-icon-a: 0.51; --dh-rule-a: 0.7; --dh-display-weight: 600; } } /* @tokens:end */ /* The control's shadow, said once. Front to back: a soft drop, then four inset edges - a top light, a line, a foot and a ring. Each share is a token of the theme: the light theme has all four in black; the dark theme has the ring alone, in white. */ :root { --dh-control-shadow: 0 1px 3px 0 hsl(var(--dh-black) / var(--dh-btn-drop)), inset 0 1px 0 0 hsl(var(--dh-btn-edge) / var(--dh-btn-a-top)), inset 0 0 0 1px hsl(var(--dh-black) / var(--dh-btn-a-line)), inset 0 -1px 0 0 hsl(var(--dh-black) / var(--dh-btn-a-foot)), inset 0 0 0 1px hsl(var(--dh-btn-edge) / var(--dh-btn-a-ring)); --dh-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ------------------------------------------------------------------ 2. Canvas and surfaces */ html { background-color: hsl(var(--background)); } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } /* No drop shadows from the base's utilities: the only shadow on a page is the control's. */ :root .shadow, :root .shadow-sm { --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; } /* Selected text: one solid ground and its own ink, on everything. */ ::selection { background: hsl(var(--dh-select)); color: hsl(var(--dh-select-fg)); } ::-moz-selection { background: hsl(var(--dh-select)); color: hsl(var(--dh-select-fg)); } * { scrollbar-color: hsl(var(--input)) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background-color: hsl(var(--input)); background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: hsl(var(--muted-foreground)); } /* Rules between page parts: a hairline is a hairline. */ :root .border-\[hsl\(var\(--border\)\/0\.6\)\], :root .border-\[hsl\(var\(--border\)\/0\.8\)\] { border-color: hsl(var(--border)); } /* The base paints the accent utilities with --primary, which is the strong control's ground. As text they are ink. */ :root .text-primary, :root .hover\:text-primary:hover { color: hsl(var(--foreground)); } /* ------------------------------------------------------------------ 3. Sidebar */ :root .dh-side { --tw-shadow: 0 0 transparent; box-shadow: none; background-color: hsl(var(--sidebar-background)); border-color: hsl(var(--sidebar-border)); } .dh-side .text-muted-foreground { color: hsl(var(--sidebar-foreground)); } .dh-side .hover\:text-foreground:hover { color: hsl(var(--sidebar-accent-foreground)); } /* The page you are on: the soft plane under the row, ink for its label, and the accent as a short marker on its leading edge (shell.css draws the marker; its colour is here). */ .dh-side a[aria-current="page"] { background-color: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); } .dh-side a[aria-current="page"]::before { background-color: hsl(var(--dh-mark)); } /* ------------------------------------------------------------------ 4. Type */ /* The page title: one size on every page (one step down on a phone). */ :root h1 { font-size: 32px; line-height: 36px; font-weight: var(--dh-display-weight); letter-spacing: -0.035em; } @media (max-width: 640px) { :root h1 { font-size: 24px; line-height: 28px; } } /* Section titles. */ :root .dh-page h2 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; } /* Overlines (small capitals over a block): also a heading written with the capitals utility, and the head of a document section whatever its level (h2 under the page title, h3 under a document's own h2: the outline changes, the look does not). */ :root .dh-overline, :root .dh-page h2.uppercase, :root .dh-page h3.uppercase, :root .dh-page h2.dh-doc-h { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; } /* Nothing under 12px on a phone: the overline takes the next step, a little closer set, so the capitals keep their width (app.css does the same for column heads and tags). */ @media (max-width: 640px) { :root .dh-overline, :root .dh-page h2.uppercase, :root .dh-page h3.uppercase, :root .dh-page h2.dh-doc-h { font-size: 12px; letter-spacing: 0.06em; } } /* Meta lines under a title or a form. */ :root .dh-meta { color: hsl(var(--dh-meta)); font-size: 13px; line-height: 20px; font-weight: 400; } /* The section being read (document pages): its head goes from quiet ink to ink. shell.js swaps this class with text-muted-foreground while reading. */ :root .dh-section-on { color: hsl(var(--foreground)); } /* ------------------------------------------------------------------ 5. Links */ /* A link in running text is ink with a 1 px line under it, 4 px off the letters; pointed at, the line doubles. State labels are never underlined, so a state cannot be taken for a link. */ :root a.text-primary, :root .dh-doc a, :root a.text-foreground.underline, :root .watch-topic-link a { /* no ground, so the corners only show on the focus ring, which follows them */ border-radius: 4px; color: hsl(var(--foreground)); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: currentColor; text-underline-offset: 4px; } :root a.text-primary:hover, :root .dh-doc a:hover, :root a.text-foreground.underline:hover, :root .watch-topic-link a:hover { color: hsl(var(--foreground)); text-decoration-thickness: 2px; } /* Links inside a ledger are quieter still: the ink of their cell over a line in the control-edge tone; on hover, ink and an ink line. */ :root .dh-list a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: hsl(var(--input)); text-underline-offset: 4px; } :root .dh-list a:hover { color: hsl(var(--foreground)); text-decoration-color: hsl(var(--foreground)); } /* A name that is a link has no line at rest; it takes an ink line while its row is pointed at and when it holds the keyboard. The name is an inline block, so the line is drawn on the name itself, not inherited from the link. */ :root .dh-list a:has(> .dh-name) { text-decoration-line: none; } :root .dh-list a .dh-name { color: hsl(var(--foreground)); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 0.2s var(--dh-ease); } :root .dh-list tr:hover a .dh-name, :root .dh-list a:focus-visible .dh-name { text-decoration-color: currentColor; } /* The footer's one link (small screens). */ :root .dh-foot a { border-radius: 4px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* ------------------------------------------------------------------ 6. Focus */ /* One ring everywhere: 2 px of the accent, standing 2 px off what it rings. The gap shows whatever is behind, so the ring never needs a second colour. */ :root :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } :root .focus-visible\:ring-1:focus-visible, :root .focus-visible\:ring-2:focus-visible { box-shadow: none; } /* ------------------------------------------------------------------ 7. The control */ /* ONE recipe for every button, field, toggle and chosen cell of the site, taken from the reference (its light surface and edge formulas are adapted from Supabase UI, Apache License 2.0; see docs/design/THIRD-PARTY.md): geometry 28 px high, 6 px corners, 3 px 10 px padding, 13 / 20 px text at weight 500, letter-spacing -0.001em, a 6 px gap to an icon surface --dh-btn, drawn by --dh-control-shadow (the top of this sheet), not by a border ink --foreground hover the ground goes to --dh-btn-hover press the control gives a little (scale 0.97), only where motion is welcome focus the site's ring (section 6): 2 px of the accent across a 2 px gap disabled the soft plane, quiet ink, a hairline for an edge; no pointer strong the inverse of the page: --primary under --primary-foreground, hover --dh-primary-hover. The primary action. Same geometry, same shadow. in a row 24 px high, 12 / 16 px text, 4 px 8 px padding (.dh-raised-tiny): what fits a 28 px ledger row or a card of the watchlist, and nowhere else - a tool in a section head stands on open canvas and is the 28 px control timing 200 ms cubic-bezier(.22, 1, .36, 1) finger 40 px high below 640 px wide; on any coarse pointer an unseen 8 px above and below the painted control Markup: .dh-raised (the control) or .dh-raised-primary (the strong control), each with .dh-raised-small (28 px) or .dh-raised-tiny (24 px); a trailing icon in .dh-raised-icon. */ :root .dh-raised, :root .dh-list a.dh-raised, :root .dh-raised-primary, :root .dh-list a.dh-raised-primary { position: relative; display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 3px 10px; border: 0; border-radius: 6px; background-color: hsl(var(--dh-btn)); background-image: none; box-shadow: var(--dh-control-shadow); color: hsl(var(--foreground)); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.001em; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; transition: background-color 0.2s var(--dh-ease), color 0.2s var(--dh-ease), scale 0.2s var(--dh-ease); } /* The strong control. */ :root .dh-raised-primary, :root .dh-list a.dh-raised-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } /* In a ledger row. */ :root .dh-raised-tiny, :root .dh-list a.dh-raised-tiny { height: 24px; padding: 4px 8px; font-size: 12px; line-height: 16px; } @media (hover: hover) { :root .dh-raised:hover, :root .dh-list a.dh-raised:hover { background-color: hsl(var(--dh-btn-hover)); color: hsl(var(--foreground)); } :root .dh-raised-primary:hover, :root .dh-list a.dh-raised-primary:hover { background-color: hsl(var(--dh-primary-hover)); color: hsl(var(--primary-foreground)); } } /* A control in a list row. The pointer cannot reach it without hovering the row, so there it sits on the soft plane, not on the canvas: its face is never darker than that ground (--dh-btn-row, hover --dh-btn-row-hover). */ :root .dh-list tbody tr:hover .dh-raised { background-color: hsl(var(--dh-btn-row)); } @media (hover: hover) { :root .dh-list tbody tr:hover .dh-raised:hover { background-color: hsl(var(--dh-btn-row-hover)); } } /* Pressed. */ @media (prefers-reduced-motion: no-preference) { :root .dh-raised:active, :root .dh-list a.dh-raised:active, :root .dh-raised-primary:active, :root .dh-list a.dh-raised-primary:active { scale: 0.97; } } /* The trailing icon: 14 px, quiet ink, 6 px from the label (the gap of the control). On the strong control it is the label at a share. */ :root .dh-raised-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; color: hsl(var(--dh-btn-icon)); } :root .dh-raised-icon svg { display: block; width: 14px; height: 14px; } :root .dh-raised-primary .dh-raised-icon { color: hsl(var(--primary-foreground) / var(--dh-btn-icon-a)); } /* Something that cannot be used and is not a button of the kit (a filter tab while a run is in flight): the whole thing at 65% (the least strength, in steps of 5, at which quiet ink still stands 2.5 off both canvases). One that only says it is disabled (aria-disabled: Stop while a run winds down) stays reachable by the keyboard. */ :root button:disabled, :root [aria-disabled="true"] { opacity: 0.65; cursor: default; } :root button:disabled { pointer-events: none; } /* A control that cannot be used: the soft plane, quiet ink, a hairline. */ :root .dh-raised:disabled, :root .dh-raised[aria-disabled="true"], :root .dh-raised-primary:disabled, :root .dh-raised-primary[aria-disabled="true"] { opacity: 1; background-color: hsl(var(--muted)); box-shadow: inset 0 0 0 1px hsl(var(--border)); color: hsl(var(--muted-foreground)); } :root .dh-raised:disabled .dh-raised-icon, :root .dh-raised-primary:disabled .dh-raised-icon, :root .dh-raised[aria-disabled="true"] .dh-raised-icon, :root .dh-raised-primary[aria-disabled="true"] .dh-raised-icon { color: inherit; } /* A finger. Any coarse pointer: an unseen 8 px above and below the painted control. */ @media (pointer: coarse) { :root .dh-raised::after, :root .dh-list a.dh-raised::after, :root .dh-raised-primary::after, :root .dh-list a.dh-raised-primary::after { content: ""; position: absolute; inset: -8px 0; } } /* Phones: the 28 px control grows to the height of the field beside it (40 px, 14 px text); the 24 px one keeps its size and takes the missing 8 px above and below as an unseen target. */ @media (max-width: 640px) { :root .dh-raised-small, :root .dh-list a.dh-raised-small { height: 40px; font-size: 14px; } :root .dh-raised-tiny, :root .dh-list a.dh-raised-tiny { height: 24px; font-size: 12px; } :root .dh-raised::after, :root .dh-list a.dh-raised::after, :root .dh-raised-primary::after, :root .dh-list a.dh-raised-primary::after { content: ""; position: absolute; inset: -8px 0; } :root .dh-raised-small::after, :root .dh-list a.dh-raised-small::after { inset: 0; } } /* ------------------------------------------------------------------ 8. Fields, toggles, tabs */ /* A field is the control with room to type: the same surface, shadow, corners and height, no border. Fields are addressed by element inside the page wrapper, so a field added later takes the same face. One line: 28 px high, 10 px side padding, 13/20 px text; below 640 px wide 40 px high with 16 px text (a phone zooms in on anything smaller). */ :root .dh-page input[type="text"], :root .dh-page input[type="email"], :root .dh-page input[type="search"], :root .dh-page input[type="url"], :root .dh-page input[type="tel"], :root .dh-page input[type="number"], :root .dh-page input[type="password"], :root .dh-page input:not([type]), :root .dh-page select, :root .dh-page textarea { border: 0; border-radius: 6px; background-color: hsl(var(--dh-field)); box-shadow: var(--dh-control-shadow); color: hsl(var(--foreground)); font-size: 13px; line-height: 20px; } :root .dh-page input[type="text"], :root .dh-page input[type="email"], :root .dh-page input[type="search"], :root .dh-page input[type="url"], :root .dh-page input[type="tel"], :root .dh-page input[type="number"], :root .dh-page input[type="password"], :root .dh-page input:not([type]), :root .dh-page select { height: 28px; padding: 4px 10px; } :root .dh-page textarea { padding: 4px 10px; } :root .dh-page input[type="text"]::placeholder, :root .dh-page input[type="email"]::placeholder, :root .dh-page input[type="search"]::placeholder, :root .dh-page input[type="url"]::placeholder, :root .dh-page input[type="tel"]::placeholder, :root .dh-page input[type="number"]::placeholder, :root .dh-page input[type="password"]::placeholder, :root .dh-page input:not([type])::placeholder, :root .dh-page select::placeholder, :root .dh-page textarea::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; } /* Focus: the site's ring, off the field like off any control. */ :root .dh-page input[type="text"]:focus-visible, :root .dh-page input[type="email"]:focus-visible, :root .dh-page input[type="search"]:focus-visible, :root .dh-page input[type="url"]:focus-visible, :root .dh-page input[type="tel"]:focus-visible, :root .dh-page input[type="number"]:focus-visible, :root .dh-page input[type="password"]:focus-visible, :root .dh-page input:not([type]):focus-visible, :root .dh-page select:focus-visible, :root .dh-page textarea:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; box-shadow: var(--dh-control-shadow); } /* A label sits 6 px over its field. */ :root .dh-page input.mt-2, :root .dh-page textarea.mt-2, :root .dh-page select.mt-2 { margin-top: 6px; } /* The select is drawn by the site: no browser arrow, one small chevron in quiet ink, made of two gradients (tokens only, no image). */ :root .dh-page select.dh-select { -webkit-appearance: none; appearance: none; padding-right: 24px; background-image: linear-gradient(45deg, transparent 50%, hsl(var(--muted-foreground)) 50%), linear-gradient(135deg, hsl(var(--muted-foreground)) 50%, transparent 50%); background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%; background-size: 4px 4px; background-repeat: no-repeat; } @media (hover: hover) { :root .dh-page select.dh-select:hover { background-color: hsl(var(--dh-btn-hover)); } } @media (max-width: 640px) { :root .dh-page input[type="text"], :root .dh-page input[type="email"], :root .dh-page input[type="search"], :root .dh-page input[type="url"], :root .dh-page input[type="tel"], :root .dh-page input[type="number"], :root .dh-page input[type="password"], :root .dh-page input:not([type]), :root .dh-page select, :root .dh-page textarea { font-size: 16px; } :root .dh-page input[type="text"], :root .dh-page input[type="email"], :root .dh-page input[type="search"], :root .dh-page input[type="url"], :root .dh-page input[type="tel"], :root .dh-page input[type="number"], :root .dh-page input[type="password"], :root .dh-page input:not([type]), :root .dh-page select { height: 40px; } } /* A field that was refused: its edge in the tone of a problem. */ :root .dh-page .contact-form [aria-invalid="true"] { box-shadow: 0 1px 3px 0 hsl(var(--dh-black) / var(--dh-btn-drop)), inset 0 0 0 1px hsl(var(--destructive)); } :root .dh-page .contact-form [aria-invalid="true"]:focus-visible { outline-color: hsl(var(--destructive)); } /* Ending toggles. Off: the control, in the mono face. On: the strong control - the only inverse chip on a page. (Geometry: app.css.) */ :root .dh-tld > span { background-color: hsl(var(--dh-btn)); box-shadow: var(--dh-control-shadow); color: hsl(var(--foreground)); } @media (hover: hover) { :root .dh-tld > span:hover { background-color: hsl(var(--dh-btn-hover)); } } :root .dh-tld input:checked + span { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } @media (hover: hover) { :root .dh-tld input:checked + span:hover { background-color: hsl(var(--dh-primary-hover)); } } :root .dh-tld input:focus-visible + span { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* Filter tabs: a rail 28 px high - the canvas inside a hairline - and 22 px cells of quiet words. The chosen tab is the control: its surface, its shadow, ink. */ :root .dh-tabs { height: 28px; padding: 3px; border-radius: 6px; background-color: transparent; box-shadow: inset 0 0 0 1px hsl(var(--border)); color: hsl(var(--muted-foreground)); } :root .dh-tab { height: 22px; padding: 1px 8px; border-radius: 4px; font-size: 13px; line-height: 20px; letter-spacing: -0.001em; } @media (max-width: 640px) { /* Five labels on one row of a phone: no gap, 5 px sides (fits from 376 px up). */ :root .dh-tabs { height: 40px; gap: 0; } :root .dh-tab { height: 34px; padding: 0 5px; } } /* The narrowest phones (360 px): one size down and 4 px sides, and the five labels still sit on one row without scrolling. The tab numbers stay out below 640 px: measured, the five tabs with numbers do not fit 360 px at any padding. */ @media (max-width: 380px) { :root .dh-tab { padding: 0 4px; font-size: 12px; } } :root .dh-tab:hover { color: hsl(var(--foreground)); } :root .dh-tab[aria-pressed="true"], :root .dh-tab[aria-pressed="true"]:hover { background-color: hsl(var(--dh-btn)); box-shadow: var(--dh-control-shadow); color: hsl(var(--foreground)); } /* A 22 px cell in a 28 px rail: the ring stands on the cell itself, in the 3 px padding and the 2 px gap of the rail, so it never crosses the hairline or the cell beside it. */ :root .dh-tab:focus-visible { outline-offset: 0; } /* A field the browser filled in: it keeps the field ground and the ink of the theme (the browser's own wash is off the palette). The ground is painted as an inset shadow under the control's edges because the browser's autofill background cannot be overridden. */ :root .dh-page input:-webkit-autofill, :root .dh-page textarea:-webkit-autofill, :root .dh-page select:-webkit-autofill { -webkit-text-fill-color: hsl(var(--foreground)); caret-color: hsl(var(--foreground)); box-shadow: var(--dh-control-shadow), inset 0 0 0 1000px hsl(var(--dh-field)); } :root .dh-page input:autofill, :root .dh-page textarea:autofill, :root .dh-page select:autofill { -webkit-text-fill-color: hsl(var(--foreground)); caret-color: hsl(var(--foreground)); box-shadow: var(--dh-control-shadow), inset 0 0 0 1000px hsl(var(--dh-field)); } /* ------------------------------------------------------------------ 9. The list (ledger) */ /* Geometry and type are app.css's (row pitch 28 px, heads at 11 px); the tones are here. Header row: closed below by an ink rule (full ink on the light canvas, a share of it on the dark one: --dh-rule-a), labels in capitals. The sorted column is marked under its label. */ :root .dh-list thead th { border-bottom-color: hsl(var(--foreground) / var(--dh-rule-a)); color: hsl(var(--muted-foreground)); } :root .dh-list thead th[aria-sort] { color: hsl(var(--foreground)); } :root .dh-list tbody td, :root .dh-list tbody th { border-bottom-color: hsl(var(--border)); } :root .dh-name { letter-spacing: -0.01em; } /* The last row closes the ledger with an ink rule. */ :root .dh-list tbody tr:last-child td, :root .dh-list tbody tr:last-child th { border-bottom-color: hsl(var(--foreground) / 0.55); } /* A wide list scrolls sideways inside its wrap, and so does any region marked .dh-scroll (the guide's three-letter grid). The cue: a soft edge that is only there while more lies beyond that edge (two covers that travel with the content hide it at the ends). The shade is a share (--dh-cue) of the ink (--dh-shade), so it steps AWAY from the canvas in each theme. The solver raises the share until the edge stands 1.3 off the canvas; the gate holds that line in both themes. */ :root .dh-list-wrap, :root .dh-scroll, :root .gd-grid-wrap { background: linear-gradient(to right, hsl(var(--background)) 67%, hsl(var(--background) / 0)) left center / 36px 100% no-repeat local, linear-gradient(to left, hsl(var(--background)) 67%, hsl(var(--background) / 0)) right center / 36px 100% no-repeat local, linear-gradient(to right, hsl(var(--dh-shade) / var(--dh-cue)), hsl(var(--dh-shade) / 0)) left center / 24px 100% no-repeat scroll, linear-gradient(to left, hsl(var(--dh-shade) / var(--dh-cue)), hsl(var(--dh-shade) / 0)) right center / 24px 100% no-repeat scroll; } /* ------------------------------------------------------------------ 10. Notes and alerts */ /* An informational note is a ruled box. */ :root .rounded-lg.border.border-border, :root .dh-note { border-radius: 6px; } /* An error and a "done" answer are a matched pair with no box: a 2 px rule on the leading edge in their tone, 13/20 text. Error: rule and text in the tone of a problem. Done: the accent as the rule, ink text. (The first selector is repeated with the note box's own class string so it also wins on markup that still carries that string.) */ :root .dh-note-alert, :root .dh-note-alert.rounded-lg.border.border-border, :root #contact-status { padding: 2px 0 2px 12px; border: 0; border-radius: 0; background: none; box-shadow: inset 2px 0 0 hsl(var(--destructive)); color: hsl(var(--destructive)); font-size: 13px; line-height: 20px; font-weight: 400; } :root .dh-note-ok, :root #contact-status:not(.dh-note-alert) { box-shadow: inset 2px 0 0 hsl(var(--dh-mark)); color: hsl(var(--foreground)); } /* ------------------------------------------------------------------ 11. Watch page */ /* "Released": a heading in ink. */ :root .watch-item-released .watch-headline { color: hsl(var(--foreground)); } /* ------------------------------------------------------------------ 12. Document pages */ /* The moving marker of the contents index. */ :root .dh-marker { background-color: hsl(var(--dh-mark)); } /* The dash in front of a list item: a mark, so it holds 3:1 on the canvas. */ :root .dh-dash::before { color: hsl(var(--muted-foreground)); } :root .dh-spine { background: linear-gradient(to bottom, hsl(var(--input) / 0.7) 0%, hsl(var(--input) / 0.7) calc(100% - 36px), transparent 100%); } /* The back links (document pages, the not-found page): the hover ground is a token. */ :root .hover\:bg-muted\/60:hover { background-color: hsl(var(--muted)); } /* ------------------------------------------------------------------ 12b. Forced colours */ /* Forced colours (Windows High Contrast) remove every shadow and repaint every ground, and the control is drawn with exactly those two. So there each control, field, toggle and rail takes a real edge, and a chosen state is said with the system pair for a chosen thing. System colours only: no token and no value of ours means anything in this mode. */ @media (forced-colors: active) { :root .dh-raised, :root .dh-raised-primary, :root .dh-list a.dh-raised, :root .dh-list a.dh-raised-primary, :root .dh-page input, :root .dh-page select, :root .dh-page textarea, :root .dh-tld > span, :root .dh-tabs, :root .dh-theme-seg { border: 1px solid ButtonText; } :root .dh-tld input:checked + span, :root .dh-tab[aria-pressed="true"], html:not([data-theme-mode]) .dh-theme-opt[data-theme-set="auto"], html[data-theme-mode="auto"] .dh-theme-opt[data-theme-set="auto"], html[data-theme-mode="light"] .dh-theme-opt[data-theme-set="light"], html[data-theme-mode="dark"] .dh-theme-opt[data-theme-set="dark"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } } /* ------------------------------------------------------------------ 13. Reduced motion (last on purpose) */ @media (prefers-reduced-motion: reduce) { :root .dh-list a .dh-name, :root .dh-raised, :root .dh-list a.dh-raised, :root .dh-raised-primary, :root .dh-list a.dh-raised-primary { transition: none; } }