refactor(styles): semantic colors on links - #8181
Conversation
Link colours were spread across five declarations and three SCSS variables, and they disagreed. In dark mode a link was $primary400 (#906af6) inside a list item, $primary (#6837fc) everywhere else, and $dark-highlight-color (#e1e1e1) on hover, so the same element changed hue depending on where it sat and whether the pointer was over it. --color-text-action already carries both purples the codebase reaches for: #6837fc in light, #906af6 in dark. Every link colour now reads from it, so the .dark duplicates that existed only to restate a value are gone. Light mode is unchanged. Dark mode settles on #906af6, which is what list items already used and holds up better against a dark background than #6837fc. This is the step that makes the Link component migration safe: .link and .btn-link resolve to the same colour by construction, so moving a call site between them is not a visual change. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe stylesheet changes replace legacy Sass colour variables with Estimated code review effort: 1 (Trivial) | ~3 minutes Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
the
front-end
talissoncosta
changed the title
Docker builds report
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: c7c2f764-c47d-435d-8cd4-08cf1b238407
📒 Files selected for processing (3)
frontend/web/styles/components/_list-item.scssfrontend/web/styles/components/_panel.scssfrontend/web/styles/project/_buttons.scss
✅ private-cloud · depot-ubuntu-latest-16 — run #18912 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
🗂️ Previous results✅ oss · depot-ubuntu-latest-arm-16 — run #18912 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18912 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Skipped testsfirefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss ✅ private-cloud · depot-ubuntu-latest-16 — run #18911 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #18912 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18911 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-arm-16 — run #18911 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #18911 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18909 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ private-cloud · depot-ubuntu-latest-16 — run #18909 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
✅ oss · depot-ubuntu-latest-arm-16 — run #18909 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #18909 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
|
Visual Regression19 screenshots compared. See report for details. |
.dark .panel a:hover is also !important and one element more specific than .dark .panel .btn-link, so a hovered link-styled anchor in a dark panel kept going near-white. Spelling out :hover on the btn-link override outranks it. List item links were already fine, .list-item:hover a carries an extra class. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 470722f5-2578-4c26-b6fa-851a7b41c271
📒 Files selected for processing (1)
frontend/web/styles/components/_panel.scss
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
btn-link now reads the same token, so dark no longer differs and .dark .btn-link is gone. The .dark .link selector stays: body.dark a is untouched and still outranks a bare .link. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2 participants
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Closes #8180
In dark mode a link was #906af6 inside a list item, #6837fc elsewhere, and #e1e1e1 on hover. Every link colour now reads
--color-text-action, and the.darkblocks that only restated a value are gone.Light mode is unchanged. Dark settles on #906af6, already what list items used.
_buttons.scss:.btn-linkbase, hover, active. Dropped.dark .btn-linkand the dark hover._list-item.scss: the two$primary400rules and the icon fill._panel.scss: the!importantoverride keeps!important, value only.Leaves the global
arule alone. #1E0D26 / #e1e1e1 is body text, not a link colour.Makes #8178 safe:
.linkand.btn-linkthen match by construction, so migrating a call site is not a visual change.How did you test this code?
rspack build: compiles, 24 pre-existing bootstrap warnings..btn-linkresolves to the token, nothing hardcodes the old dark purple.main, since whole rules were deleted.Dark mode is the whole risk and wants a visual regression run. One screen per rule is enough:
_list-item.scss!importantoverride,_panel.scss.btn-linkbase and hoverWatch for: links inside and outside a list item now matching, hover no longer going near-white, and light mode not moving.