Skip to content

Stop dark-mode link-blue from painting project titles and team icons - #145

Merged
VatsalSy merged 1 commit into
mainfrom
rayleigh-cloud/dark-unclassed-component-links-c02a
Oct 12, 2026
Merged

VatsalSy merged 1 commit into
mainfrom
rayleigh-cloud/dark-unclassed-component-links-c02a

Conversation

@VatsalSy

@VatsalSy VatsalSy commented Oct 12, 2026 •

Copy link
Copy Markdown
Member

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.css is unchanged. No bridge.css dark-surface overrides were re-added.

Rebased onto main after #141–#144. The only conflict was assets/css/research-v2.css: kept main’s transparent research-content panel plus this PR’s dark TOC companion rules.

Changes

  • Dark-scoped companion rules (: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.
  • Dark-mode Font Awesome brand !important whites on GitHub / Bluesky / LinkedIn inside those icon rows are overridden so every icon in a row is one colour.
  • The same cascade hit footer column/legal links, teaching breadcrumbs, and the research TOC. Those get matching dark companions. Homepage prose (.closing-cta p a) stays link-blue, which is intended.
  • Light-mode rules are not edited.

Testing

  • Jekyll build on the rebased tree; Playwright probes at 1440 and 390.
  • Dark paper is --c-paper #12100d (rgb(18, 16, 13)).
  • Dark /projects/: 22 titles #f8f4ec (match h2 / --fg-strong).
  • Dark /team/: 52 links and every icon kind #9a8e7d (--fg-2); every icon in a row is that one colour.
  • Dark homepage member icons #9a8e7d; prose .closing-cta p a remains #8fb8ff.
  • Light /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 #12100d dark paper after the rebase.

/projects/ · 1440

Dark before (titles #8fb8ff):

Projects dark 1440 before titles

Dark after (titles inherit --fg-strong on #12100d):

Projects dark 1440 after titles

Light before:

Projects light 1440 before titles

Light after:

Projects light 1440 after titles

Full page, dark 1440 before / after:

Projects dark 1440 before
Projects dark 1440 after

Full page, light 1440 before / after:

Projects light 1440 before
Projects light 1440 after

/projects/ · 390

Projects dark 390 before
Projects dark 390 after
Projects light 390 before
Projects light 390 after

/team/ · 1440

Dark before (mixed blue and white icons):

Team dark 1440 before icons

Dark after (all --fg-2 on #12100d):

Team dark 1440 after icons

Light before / after (icon crop byte-identical):

Team light 1440 before icons
Team light 1440 after icons

Full page, dark 1440 before / after:

Team dark 1440 before
Team dark 1440 after

Full page, light 1440 before / after:

Team light 1440 before
Team light 1440 after

/team/ · 390

Team dark 390 before
Team dark 390 after
Team light 390 before
Team light 390 after

Open in Web Open in Cursor 

Copilot AI balanced review requested due to automatic review settings October 12, 2026 10:03

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@coderabbitai

coderabbitai Bot commented Oct 12, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Essentials
  • Run ID: 8cf02183-abb8-47ea-9c05-1937433f89cb

📥 Commits

Reviewing files that changed from the base of the PR and between 1555d9d and 692cfd6.


📒 Files selected for processing (6)
  • assets/css/footer-v2.css
  • assets/css/home.css
  • assets/css/projects-v2.css
  • assets/css/research-v2.css
  • assets/css/teaching.css
  • assets/css/team-v2.css

Included review availability: This review used your included allowance. 2 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.


📜 Recent review details
⏰ Context from checks skipped due to timeout. (1)
  • GitHub Check: build

🧰 Additional context used
📚 Code guidelines (1)
AGENTS.md — auto-discovered

📓 Path-based instructions (2)
Source excerpt: Compose from `bridge.css` primitives where possible.

📄 CodeRabbit inference engine (AGENTS.md)

Files:

  • assets/css/projects-v2.css
  • assets/css/research-v2.css
  • assets/css/home.css
  • assets/css/footer-v2.css
  • assets/css/teaching.css
  • assets/css/team-v2.css

Source excerpt: Mobile-first CSS; min-width media queries.

📄 CodeRabbit inference engine (AGENTS.md)

Files:

  • assets/css/projects-v2.css
  • assets/css/research-v2.css
  • assets/css/home.css
  • assets/css/footer-v2.css
  • assets/css/teaching.css
  • assets/css/team-v2.css

🔇 Additional comments (6)
assets/css/footer-v2.css (1)

82-90: LGTM!

Also applies to: 164-173


assets/css/home.css (1)

1025-1037: LGTM!


assets/css/team-v2.css (1)

211-225: LGTM!


assets/css/projects-v2.css (1)

106-115: LGTM!


assets/css/research-v2.css (1)

403-412: LGTM!


assets/css/teaching.css (1)

92-101: LGTM!



📝 Walkthrough

Walkthrough

Dark-theme CSS overrides now define link and icon colours across footer, member, project, research and teaching areas. The rules specify default, hover, focus, active and underline colours.

Changes

Dark-theme link colours

Layer / File(s) Summary
Footer link colours
assets/css/footer-v2.css
Dark-theme rules set footer column link text to --fg-1 and hover text to --c-accent-teal. Legal links use --fg-2 text and --c-border-strong underlines; hover text and underlines use --c-accent-teal.
Member link and icon colours
assets/css/home.css, assets/css/team-v2.css
Dark-theme rules set member link text to --fg-2 and hover text to --c-accent-teal. Icons inherit their link colour.
Navigation link states
assets/css/projects-v2.css, assets/css/research-v2.css, assets/css/teaching.css
Dark-theme rules set project title link hover and focus, research TOC hover and active, and teaching breadcrumb hover colours to --c-accent-teal. They also define default link and breadcrumb underline colours.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix


Merge Risk: ⚪ Minimal · up to 692cf

The dark-theme link and icon overrides reach their intended pages, with no identified issue requiring resolution before merge.

Pre-merge checks | Passed 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly describes the primary change: preventing incorrect dark-mode link-blue colours on project titles and team icons. It is concise and specific.
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches
✨ Simplify code
  • Commit to this branch
  • Create a new PR

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

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.
@cursor
cursor Bot force-pushed the rayleigh-cloud/dark-unclassed-component-links-c02a branch from c126a06 to 692cfd6 Compare October 12, 2026 10:15
Copilot AI balanced review requested due to automatic review settings October 12, 2026 10:15

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@comphy-bot

comphy-bot commented Oct 12, 2026 •

Copy link
Copy Markdown
Member

comphy-bot review status for comphy-lab/comphy-lab.github.io#145 at 692cfd60: completed

Review completed for this exact pull request head.

@comphy-bot
comphy-bot self-requested a review October 12, 2026 10:20

@comphy-bot comphy-bot left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@VatsalSy
VatsalSy merged commit 0aab15c into main Oct 12, 2026
4 checks passed
@VatsalSy
VatsalSy deleted the rayleigh-cloud/dark-unclassed-component-links-c02a branch October 12, 2026 10:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants