m038/intotheeast-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: fill in light-mode values for surface-raised and ink-inverse

Browse Source
This commit is contained in:
Mischa
2026-06-21 14:44:49 +02:00
parent 0b6f4b3b9e
commit 611c4a2949
1 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/reference/design-system-light.md
+5 -7
View File
@@ -19,16 +19,14 @@ Light-mode counterpart to `design-system.md`. Only color tokens differ between t
| `--color-accent-hover` | `#185647` | `#287A68` | Hover/pressed teal |
| `--color-accent-light` | `#EBF5F2` | `#1A2E29` | Pale teal tint backgrounds |
| `--color-accent-on` | `#FFFFFF` | `#FFFFFF` | Text on accent surfaces |
| `--color-surface-raised` | ⚠️ not specified | `#2A2720` | Elevated surfaces: tooltips, hover |
| `--color-ink-inverse` | ⚠️ not specified | `#17171A` | Text on accent-coloured buttons |
| `--color-surface-raised` | `#F0EDE9` | `#2A2720` | Elevated surfaces: tooltips, hover |
| `--color-ink-inverse` | `#FFFFFF` | `#17171A` | Text on accent-coloured buttons |
### Notes on accent values
The dark accent is `#2E9880` — a lightened version of the original `#1F6B5A` to maintain contrast against near-black backgrounds.
### Gaps to resolve
### Notes on the two added tokens
Two tokens were added during dark-theme implementation without light counterparts:
- **`--color-surface-raised`**: dark is `#2A2720` (slightly above canvas). Light equivalent would be a warm off-white slightly darker than `--color-canvas` (`#FFFFFF`).
- **`--color-ink-inverse`**: dark is `#17171A` (dark text on the bright `#2E9880` accent). Light equivalent would likely be `#FFFFFF` (white text on the dark `#1F6B5A` accent) — same as `--color-accent-on`.
- **`--color-surface-raised`** (`#F0EDE9`): warm off-white, slightly darker than `--color-canvas` (`#FFFFFF`) to suggest elevation — mirrors the dark mode pattern of `#2A2720` sitting just above `#22201B`.
- **`--color-ink-inverse`** (`#FFFFFF`): white text on the dark teal accent (`#1F6B5A`). Inverse of dark mode where the lightened accent (`#2E9880`) is bright enough to carry dark text (`#17171A`).