Repository navigation
fix(website): make redesign theme the site-wide stylesheet - #7
Conversation
The home page regressed because BaseLayout loaded the old global.css alongside redesign.css, and redesign.css still keyed its dark tokens on a .dark class that nothing set anymore (the boot script and both toggles only set data-theme). The result was light tokens mixed with old dark surfaces and lime link colors. - BaseLayout imports redesign.css; global.css and tokens.css deleted - redesign.css dark token blocks now key on :root[data-theme='dark'] - CDN font links dropped; Sora/Geist/JetBrains Mono come from fontsource imports in redesign.css - Nav, Footer, ThemeToggle, Search, and the docs/install/changelog/ community/404 pages restyled onto the redesign tokens; prose links and inline code get scoped styles so the home page is untouched - orphaned old-design marketing components removed - changelog bullets render **bold** and `code` instead of raw markdown
|
Warning Review limit reachedNext included review available in 1 minute. View limit detailsLimit details: You’ve used the included review currently available. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Review configuration: ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Advanced Run ID: 📒 Files selected for processing (22)
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 |
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| .cl__rel { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem 1.8rem; margin-bottom: 1.5rem; } | ||
| .cl__rel--latest { border-color: var(--signal-bright); } | ||
| .cl__head p { color: var(--muted-foreground); margin-top: 0.6rem; } | ||
| .cl__head a { color: var(--primary); } |
There was a problem hiding this comment.
SUGGESTION: .cl__head a { color: var(--primary); } is the only head-level link rule in this PR that omits an underline. Every other page-level anchor rule added in this PR pairs the --primary color with text-decoration: underline; text-underline-offset: 3px; (404.astro:18, community.astro:77, install.astro:147, docs/[...slug].astro:167, docs/index.astro:75). Color alone is not a sufficient link indicator (WCAG 2.1 SC 1.4.1), and the Keep a Changelog link in the head is the only one currently relying solely on hue.
| .cl__head a { color: var(--primary); } | |
| .cl__head a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } |
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| padding-bottom: 0.4rem; | ||
| } | ||
| .docs-article :global(p) { line-height: 1.7; } | ||
| .docs-article :global(a) { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } |
There was a problem hiding this comment.
WARNING: The new .docs-article :global(a) rule (specificity 0,1,1) wins over the .docs-edit rule at line 202. .docs-edit sets color on the <p class="docs-edit"> wrapper, which the inner <a> only inherits; .docs-article :global(a) sets color (and text-decoration: underline) directly on the <a>. Net effect: the Edit this page on GitHub → link now renders as a primary-colored, underlined link inside the article body, instead of the muted, non-underlined secondary-action look the .docs-edit rule is trying to express. Either drop the .docs-edit color, narrow the new rule (e.g. :global(p:not(.docs-edit) a) or scope to the rendered <Content /> container), or move the edit footer outside <article class="docs-article">.
Reply with @kilocode-bot fix it to Kilo Code address this issue.
| .replace(/</g, '<') | ||
| .replace(/>/g, '>') | ||
| .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>') | ||
| .replace(/`([^`]+?)`/g, '<code>$1</code>'); |
There was a problem hiding this comment.
SUGGESTION: The hand-rolled inline() renderer is fragile in ways the current CHANGELOG.md happens not to trigger, but the new set:html={inline(b)} path now reaches the DOM:
- The non-greedy regex can't disambiguate nested constructs. e.g.
**foo ** bar**renders as<strong>foo </strong> bar<strong> bar</strong>instead of the literal asterisks a contributor probably intended. - No escape handling for backticks or
**. A literal`or**cannot be expressed in any bullet — they will always be interpreted as code/bold. - The order (
&→<→>→**→`) is correct for now, but any future inline construct added here must be aware that&is already escaped and that<will already be<.
Worth considering a real markdown lib (marked + DOMPurify, or markdown-it) for the bullet renderer, or at minimum escaping unmatched ** and ` so future contributors can't silently corrupt rendering.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
Code Review SummaryStatus: No Issues Found | Recommendation: Merge Overview
The new commit
Reviewed the full new Files Reviewed (2 files changed since prior review)
Previous Review Summary (commit 9aca0d0)Current summary above is authoritative. Previous snapshots are kept for context only. Previous review (commit 9aca0d0)Status: 3 Issues Found | Recommendation: Address before merge Overview
The PR cleanly resolves the site-wide stylesheet collision and the dark-token selector bug it describes — Issue Details (click to expand)WARNING
SUGGESTION
Files Reviewed (22 files)
Reviewed by minimax-m3 · Input: 0 · Output: 0 · Cached: 0 |
Full-page screenshots (local build of this branch)Dark (default) — home, docs index, docs article, install, changelog, community, 404. Light — home and a docs article.
|
- changelog: underline the Keep a Changelog head link so color isn't the only link indicator (matches prose links elsewhere) - changelog: replace the set:html markdown regex with a tokenizing renderer; bullets render as real strong/code elements through text nodes, so unmatched ** and backticks stay literal and no HTML can reach the DOM - docs article: scope .docs-edit a to keep the edit-on-GitHub footer link muted and non-underlined despite the new prose link rule
1 participant
Problem
The redesign promoted in #6 renders broken in production (screenshots in #3 no longer match): wrong colors, wrong fonts, old-theme artifacts. Two compounding causes:
BaseLayoutloaded the oldglobal.css(dark surfaces viatokens.css, lime link hovers, Space Grotesk/Inter) alongside the home page'sredesign.css— two competing Tailwind v4 themes on one page.redesign.cssstill gated its dark token blocks on a.darkclass, but the theme boot script and both theme toggles only set thedata-themeattribute (the reconcile in feat(website): promote redesign to home page #6). Dark tokens could never activate, so shadcn tokens stayed light whiledark:utilities activated — mixed states everywhere.Fix
BaseLayoutnow importsredesign.cssas the single site-wide stylesheet;global.cssandtokens.cssare deleted.redesign.csskey on:root[data-theme='dark'](andhtml[data-theme='dark']forcolor-scheme), matching the boot script and both toggles. Theme toggle round-trip verified (attribute + localStorage persist).<link>s removed — Sora / Geist / JetBrains Mono ship via fontsource imports inredesign.css.--background,--card,--muted,--primary,--muted-foreground…). Prose links and inline code get scoped styles so the home page is untouched.components/marketing/*(unreferenced anywhere since feat(website): promote redesign to home page #6) removed.**bold**/`code`instead of raw markdown (visible literal asterisks on /changelog).Verification
npm run buildclean, 29 pages.data-themeand persists tolocalStorage['synapse-theme'].Closes the regression reported against #3 (prod mismatch).