diff --git a/docs/reference/design-system-light.md b/docs/reference/design-system-light.md index 06f8d41..2cb1738 100644 --- a/docs/reference/design-system-light.md +++ b/docs/reference/design-system-light.md @@ -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`).