| 1 | /* |
| 2 | * The docs' two themes. Dark is g1t's own very dark gray; light swaps the |
| 3 | * shared --g1t-* tokens for their light values (--g1t-light-* in |
| 4 | * packages/theme/tokens.css, the same palette as the app's Light |
| 5 | * appearance), so every rule that reads a token follows without a light |
| 6 | * rule of its own. |
| 7 | * |
| 8 | * Starlight sets data-theme on <html> before the first paint: the reader's |
| 9 | * choice in its theme select (Auto, Light or Dark, kept in this browser), |
| 10 | * and on Auto their system's setting. The API explorer |
| 11 | * (src/pages/api/reference.astro) sets it the same way. |
| 12 | * |
| 13 | * The few colours the docs use that have no shared token are here as |
| 14 | * --g1t-docs-*, dark first. |
| 15 | */ |
| 16 | :root { |
| 17 | /* Link text: a paler lavender than the accent on dark. */ |
| 18 | --g1t-docs-link: #cfc6ff; |
| 19 | /* Text on a faint accent tint. */ |
| 20 | --g1t-docs-accent-high: #d9d1ff; |
| 21 | /* A primary button's hover: brighter than fg on dark, softer on light. */ |
| 22 | --g1t-docs-fg-hover: #ffffff; |
| 23 | /* The shadow under a menu that floats over the page. */ |
| 24 | --g1t-docs-menu-shadow: 0 12px 32px rgb(0 0 0 / 0.45); |
| 25 | /* How much of an API method's colour tints its tag. */ |
| 26 | --g1t-docs-tag-tint: 14%; |
| 27 | color-scheme: dark; |
| 28 | } |
| 29 | |
| 30 | :root[data-theme='light'] { |
| 31 | --g1t-bg: var(--g1t-light-bg); |
| 32 | --g1t-surface: var(--g1t-light-surface); |
| 33 | --g1t-raised: var(--g1t-light-raised); |
| 34 | --g1t-line: var(--g1t-light-line); |
| 35 | --g1t-line-strong: var(--g1t-light-line-strong); |
| 36 | |
| 37 | --g1t-fg: var(--g1t-light-fg); |
| 38 | --g1t-fg-soft: var(--g1t-light-fg-soft); |
| 39 | --g1t-muted: var(--g1t-light-muted); |
| 40 | --g1t-faint: var(--g1t-light-faint); |
| 41 | |
| 42 | --g1t-accent: var(--g1t-light-accent); |
| 43 | --g1t-accent-hover: var(--g1t-light-accent-hover); |
| 44 | --g1t-accent-dim: var(--g1t-light-accent-dim); |
| 45 | --g1t-accent-low: var(--g1t-light-accent-low); |
| 46 | |
| 47 | --g1t-success: var(--g1t-light-success); |
| 48 | --g1t-success-dim: var(--g1t-light-success-dim); |
| 49 | --g1t-success-low: var(--g1t-light-success-low); |
| 50 | |
| 51 | --g1t-info: var(--g1t-light-info); |
| 52 | --g1t-merged: var(--g1t-light-merged); |
| 53 | --g1t-warn: var(--g1t-light-warn); |
| 54 | --g1t-danger: var(--g1t-light-danger); |
| 55 | |
| 56 | /* The accent itself as link text: 5.5:1 on the page. */ |
| 57 | --g1t-docs-link: var(--g1t-light-accent); |
| 58 | --g1t-docs-accent-high: #4b36a6; |
| 59 | --g1t-docs-fg-hover: #3a3a41; |
| 60 | --g1t-docs-menu-shadow: 0 12px 32px rgb(24 24 27 / 0.12); |
| 61 | /* Lighter, so each method's text keeps 4.5:1 on its tag. */ |
| 62 | --g1t-docs-tag-tint: 9%; |
| 63 | color-scheme: light; |
| 64 | } |