Repository navigation
Stop dark-mode link-blue from painting project titles and team icons - #145
Conversation
The vendored :root[data-theme="dark"] a:where(:not([class])) rule at (0,2,1) beat component colour rules at (0,1,1). Dark-scoped companions restore heading inherit on project titles and --fg-2 on icon rows, with the existing teal hover. tokens.css is unchanged. lint-staged prettier is skipped because it would rewrite unrelated one-line rules in these CSS files.
c126a06 to
692cfd6
Compare
|
comphy-bot review status for Review completed for this exact pull request head. |
comphy-bot
left a comment
There was a problem hiding this comment.
Reviewed all six CSS changes at 692cfd6 (+78/-0). No P0/P1 issues found.
The dark-scoped component selectors outrank the generic class-less anchor rule, preserve project-title hover/focus and TOC active states, and keep icon colors inherited from their component links. Light-mode rules remain unchanged. No unrelated layout, script, dependency or security-policy changes.
Verification: exact-head build and PR hygiene checks succeeded; patch conflict-marker and whitespace checks passed. Deployment was skipped and CodeRabbit was pending in the captured check rollup. No peer findings were present in the complete review-thread snapshot. This was a static review; I did not execute PR code or independently rerun the reported browser probes.
Suggested regression coverage: light/dark default, hover and keyboard-focus colors for these components, active TOC state, and home/team brand-icon inheritance.
Summary
In dark mode, class-less anchors inside
/projects/titles and/team/icon rows computed to prose link-blue#8fb8ff. Project titles no longer matched their parent heading (--fg-strong), and each team icon row mixed blue (envelope, Scholar, globe) with white (GitHub, Bluesky). Light mode was already correct.The vendored design-system rule
:root[data-theme="dark"] a:where(:not([class]))at specificity(0,2,1)beat the site rules.projects-list__title a { color: inherit; }and.t-member__links a { color: var(--fg-2); }at(0,1,1). This restores those component colours on the site side.assets/css/tokens.cssis unchanged. Nobridge.cssdark-surface overrides were re-added.Rebased onto
mainafter #141–#144. The only conflict wasassets/css/research-v2.css: kept main’s transparent research-content panel plus this PR’s dark TOC companion rules.Changes
:root[data-theme="dark"] …) raise specificity so project titles inherit the heading colour and team/home icon links stay--fg-2, with the existing teal hover.!importantwhites on GitHub / Bluesky / LinkedIn inside those icon rows are overridden so every icon in a row is one colour..closing-cta p a) stays link-blue, which is intended.Testing
--c-paper#12100d(rgb(18, 16, 13))./projects/: 22 titles#f8f4ec(matchh2/--fg-strong)./team/: 52 links and every icon kind#9a8e7d(--fg-2); every icon in a row is that one colour.#9a8e7d; prose.closing-cta p aremains#8fb8ff./team/icon crop is byte-identical to the pre-rebase after crop. Light project titles stay#0f0c08. Full-page light shots differ from the original before shots where Fix header command-K contrast in dark mode #142 restyled the header command-K control.After screenshots below were recaptured on
#12100ddark paper after the rebase./projects/ · 1440
Dark before (titles
#8fb8ff):Dark after (titles inherit
--fg-strongon#12100d):Light before:
Light after:
Full page, dark 1440 before / after:
Full page, light 1440 before / after:
/projects/ · 390
/team/ · 1440
Dark before (mixed blue and white icons):
Dark after (all
--fg-2on#12100d):Light before / after (icon crop byte-identical):
Full page, dark 1440 before / after:
Full page, light 1440 before / after:
/team/ · 390