Repository navigation
🐛 Heading links - Keep red heading links red and darken on hover - #5137
Conversation
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Coverage report
Test suite run success134 tests passing in 17 suites. Report generated by 🧪jest coverage report action from 6eb39da |
| instead of turning black like body links */ | ||
| .prose h2 a:not(.unstyled) { | ||
| color: inherit; | ||
| @apply hover:text-sswDarkRed; |
There was a problem hiding this comment.
nit: on hover the underline still turns brand red (the global a:hover sets decoration-sswRed), so it sits lighter than the dark-red text. The Design System matches the underline to the text on hover (the accordion trigger uses hover:text-primary hover:decoration-primary). Add hover:decoration-sswDarkRed here?
There was a problem hiding this comment.
Good catch, thanks. Fixed in #5146: the underline now darkens to sswDarkRed along with the text on hover.
🤖 Comment written by Claude Opus 5.5 via Claude Code
|
|
||
| /* Links in red prose headings keep the heading's red and darken on hover, | ||
| instead of turning black like body links */ | ||
| .prose h2 a:not(.unstyled) { |
There was a problem hiding this comment.
Q: base pages use prose-h2:text-black, so links in those black headings will hover dark red too. Is that intended (AC 5)? h1 > strong is also red in the typography config, and this rule doesn't cover it. No page has either case today, so it's fine to leave.
There was a problem hiding this comment.
Not intended, so it's fixed in #5146 rather than left as is. The red-link style now applies only to headings that are actually red:
- Base pages (
prose-h2:text-black) and the client story dialog (prose-headings/prose-strong:text-foreground) keep the standard link style, which covers AC5. - Red
h1 > strongheadings are now covered too.
🤖 Comment written by Claude Opus 5.5 via Claude Code
…5146) Closes #5135 Follow-up to #5137, from @designbyalex's review. When a link in a red heading is hovered, its underline now darkens with the text. The red-link style is also limited to headings that are actually red. ## What changed - **The underline matches the text on hover.** Before, the text went dark red but the global `a:hover` rule kept the underline brand red. Both are now `sswDarkRed` (`#8e2c2c`), matching the Design System's hover pattern. - **Only red headings get the style.** #5137 applied it to every `.prose h2`, so links in headings a page recolours turned dark red on hover too. Those pages now keep the standard link style: - Base pages, which use `prose-h2:text-black`. - The client story dialog, which uses `prose-headings:text-foreground` and `prose-strong:text-foreground`. This covers #5135's AC5: no other standard link styles are affected. - **Red `h1 > strong` headings are covered too.** They're red in the typography config, the same as `h2`. ## Risky areas - **`styles.css` is global.** The rule excludes heading colour overrides by exact class name, so a page that recolours prose headings some other way would still get red links. The comment above the rule says to add new overrides to the `:not()` lists. - **Not every override is a colour.** `prose-h2:text-3xl/9` (a size, used by `companyPageCard`) is not excluded, so those red headings keep the red-link style. --- 🤖 Changes made by **Claude Opus 5.5** via [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Closes #5135
Problem
Markdown
##headings render red (typography config:prose→h2→sswRed), but a link inside one picked up the body-link styling: the prose link colour (near-black) by default, then the globala:hoverred on hover. On /company/news, e.g. "MAY 2024 - SSW acquired TinaCMS", the linked word showed black inside an otherwise red heading.❌ Figure: Bad example - Black links in red headings
Fix
One rule in
styles.css(components layer)::where(a)link colour and the globala:not(.unstyled):hoverred, so no!importantneeded.h2s (the red markdown headings used site-wide), so body links and non-red headings (h3/h4) are untouched..unstyledlinks opt out as usual.Verified the rule compiles with the project Tailwind config to
color: inheritand:hover { color: rgb(142 44 44) }.Test
On /company/news, the headings with links (e.g. SSW acquired TinaCMS) stay red, and turn darker red on hover instead of black → red.
🤖 Changes made by Claude Opus 5.5 via Claude Code