kbenestad/mdcms
1
0
Fork 0
mirror of https://github.com/kbenestad/mdcms.git synced 2026-06-18 15:24:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Document nav colour key requirement for saturated and dark nav backgrounds

Browse source 
Clarifies that nav-link, nav-link-active, and nav-section-heading affect not
just nav links but also the site name, description, and theme toggle — all
sidebar elements that inherit from these variables. Adds a rule of thumb for
when to set the keys explicitly (saturation >20%, or lightness outside the
neutral range).

https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB
This commit is contained in:
Claude 2026-05-18 14:43:04 +00:00
parent 4e66024be0
commit 1d76226311
No known key found for this signature in database
1 changed files with 13 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
docs/claude-design.md
View file

@ -102,6 +102,19 @@ When `nav-background` and `accent` share the same hue (or are very close),
active nav links become invisible — the coloured text disappears into a active nav links become invisible — the coloured text disappears into a
coloured background. coloured background.
The nav colour keys also control the **site name, site description, and
dark/light mode toggle** — all three live inside the sidebar and inherit from
the same variables. On muted or neutral nav backgrounds the content-area
fallbacks (`text`, `text-muted`) are fine. On any saturated or bold nav
background the contrast between `text` and `text-muted` is likely too low for
these elements to remain legible, so all three nav colour keys must be set
explicitly.
**Rule of thumb:** if `nav-background` has a saturation above roughly 20 % or
a lightness below 30 % (dark sidebar) or above 85 % (near-white sidebar that
differs noticeably from the page background), set `nav-link`,
`nav-link-active`, and `nav-section-heading` explicitly for that mode.
**Always set all three nav colour keys explicitly** whenever `nav-background` **Always set all three nav colour keys explicitly** whenever `nav-background`
is anything other than a neutral near-white (light) or near-black (dark). is anything other than a neutral near-white (light) or near-black (dark).