Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| docs.g1t.sh and status.g1t.sh follow your system's light or dark setting, and each has an Auto, Light and Dark switch that this browser remembers: the docs' in the header (at the foot of the menu on a phone), with code, search, the API reference and its explorer in both themes; the status page's in its header, chosen before anything is drawn; the workspaces guide says where. | 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 | } |
