feat(ag-p02): CSS token layer, global styles, and theme key alignment#853
Conversation
…button system - site-tokens.css: --panel, --panel-2, --hair, font stacks, radius, shadow, transition tokens - global.css: .wrap (1320px), .wrap-prose (820px), .section rhythm, button classes, burger breakpoints, .md prose, utilities - BaseLayout.astro: fix import order (site-tokens before global), correct localStorage key to ag-theme Closes #852
|
Warning Review limit reached
More reviews will be available in 23 minutes and 20 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
|
✅ Template check passed after update. Thanks for fixing the PR description. |
🔍 Reviewer Summary for PR #853CI Status: ❌ Recommendations
|
|
@coderabbitai review Generated by Claude Code |
There was a problem hiding this comment.
Code Review
This pull request refactors the website's styling by restructuring global.css and introducing a dedicated site-tokens.css file for design tokens. It also updates the import order in BaseLayout.astro and changes the local storage theme key to ag-theme. Feedback on these changes includes removing the potentially slow text-rendering: optimizeLegibility property, adding transitions to alternating sections to prevent snapping during theme switches, and explicitly declaring color-scheme properties for both light and dark themes to ensure native browser elements adapt correctly.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| html { | ||
| scroll-behavior: smooth; | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: reduce) { | ||
| html { | ||
| scroll-behavior: auto; | ||
| } | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| text-rendering: optimizeLegibility; | ||
| } |
There was a problem hiding this comment.
The text-rendering: optimizeLegibility property can cause significant rendering performance bottlenecks and layout latency, particularly on mobile devices or pages with large amounts of text. Since modern browsers already optimize legibility by default for standard text sizes, this property is generally unnecessary and can be safely removed.
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Get PR details and diff
gh pr view 853 --repo lightspeedwp/.github --json title,body,files,additions,deletions,changedFiles
echo "=== PR FILES CHANGED ==="
gh pr diff 853 --repo lightspeedwp/.githubLength of output: 29143
🔍 Review —
|
…scheme tokens - global.css: add scroll-behavior:smooth + prefers-reduced-motion guard - global.css: restore img/svg display:block reset - global.css: add :focus-visible rings to all four button variants - global.css: replace transition:all with explicit props in .btn-soft - global.css: add color-mix() static fallback on .btn-soft border - global.css: add transition to .section-alt for smooth theme switching - site-tokens.css: add color-scheme:light to :root, color-scheme:dark to [data-theme="dark"] - CHANGELOG.md: add Phase 02 entry under [Unreleased] Closes #852
|
Thanks for the thorough review @coderabbitai! Here's how each point was addressed in the follow-up commit ( Fixed ✅
Not changed — by design
Generated by Claude Code |
There was a problem hiding this comment.
Pull request overview
Implements Phase 02 of the website styling system by introducing a site-level token layer and a simplified set of global layout/typography/button styles, then wiring these styles into the base Astro layout and updating theme persistence.
Changes:
- Added
site-tokens.cssdefining surface tokens (--panel,--panel-2,--hair) and dark-mode overrides. - Replaced the previous large
global.csswith a smaller reset + container/section rhythm + typography + button utilities + markdown-prose styles. - Updated
BaseLayout.astroto importsite-tokens.cssbeforeglobal.cssand changed the theme localStorage key toag-theme.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
| website/src/styles/site-tokens.css | Introduces site surface tokens and dark-mode overrides, plus additional token overrides. |
| website/src/styles/global.css | Defines global reset, containers, typography, button utilities, burger visibility, and markdown prose styling. |
| website/src/layouts/BaseLayout.astro | Adjusts stylesheet import order and updates the theme persistence localStorage key. |
| /* Primary — ALWAYS var(--c-brand-blue), never var(--accent) */ | ||
| .btn-primary { | ||
| display: inline-flex; | ||
| gap: 0.5rem; | ||
| align-items: center; | ||
| padding: 0.45rem 0.8rem; | ||
| border-radius: 999px; | ||
| background: rgba(255, 255, 255, 0.06); | ||
| border: 1px solid rgba(255, 255, 255, 0.08); | ||
| color: var(--muted); | ||
| font-size: 0.92rem; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3 { | ||
| margin: 0; | ||
| letter-spacing: -0.03em; | ||
| line-height: 1.02; | ||
| } | ||
|
|
||
| h1 { | ||
| margin-top: 1rem; | ||
| font-family: var(--serif); | ||
| font-size: clamp(3rem, 8vw, 5.8rem); | ||
| max-width: 12ch; | ||
| } | ||
|
|
||
| .lede { | ||
| margin: 1rem 0 0; | ||
| max-width: 60ch; | ||
| font-size: clamp(1.05rem, 2vw, 1.2rem); | ||
| line-height: 1.7; | ||
| color: var(--muted); | ||
| gap: 8px; |
| /* Ghost */ | ||
| .btn-ghost { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| min-height: 3rem; | ||
| padding: 0.7rem 1rem; | ||
| border-radius: 999px; | ||
| border: 1px solid transparent; | ||
| gap: 8px; |
| (function(){ | ||
| try { | ||
| var t = localStorage.getItem('awesome-github-theme'); | ||
| var t = localStorage.getItem('ag-theme'); | ||
| if (t !== 'light' && t !== 'dark') { |
| /* ── Section rhythm ─────────────────────────────────────────────── */ | ||
| .section { | ||
| padding-top: clamp(40px, 6vw, 80px); | ||
| padding-bottom: clamp(40px, 6vw, 80px); | ||
| } |
|
@coderabbitai review Generated by Claude Code |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Ash Shaw <ashley@lightspeedwp.agency>
|
Quick confirmation on each point:
All three accessibility blockers are resolved. The design decisions for the "not changed" items are well-reasoned and clearly documented. This one's good to go from my end! 🎉 🧠 Learnings used✅ Action performedComments resolved and changes approved. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Ash Shaw <ashley@lightspeedwp.agency>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Ash Shaw <ashley@lightspeedwp.agency>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Ash Shaw <ashley@lightspeedwp.agency>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Ash Shaw <ashley@lightspeedwp.agency>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Ash Shaw <ashley@lightspeedwp.agency>
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Get the latest PR diff to verify the fixes from commit 4bdeeba
gh pr diff 853 --repo lightspeedwp/.githubLength of output: 27870
✅ Re-Review — Commit
|
| # | Issue | Status |
|---|---|---|
| 1 | scroll-behavior: smooth + prefers-reduced-motion guard |
✅ Both present in html {} and @media block |
| 2 | :focus-visible on all button variants |
✅ All four — .btn-primary, .btn-ghost, .btn-soft, .icon-btn — have correct outline + outline-offset |
| 3 | img, svg reset |
✅ display: block; max-width: 100% restored |
| 4 | transition: all → explicit props in .btn-soft |
✅ Now filter + box-shadow only |
| 5 | color-mix() fallback |
✅ Correct cascade pattern — static rgba() first, color-mix() second |
| 6 | .section-alt theme-switch transition |
✅ background + border-color transitions added |
| 7 | color-scheme declarations |
✅ light on :root, dark on [data-theme="dark"] |
🔵 One minor note (non-blocking)
The new a {} block styles links but doesn't include a:focus-visible — the old CSS had it. Browsers do provide default focus rings on links, so this won't break accessibility, but you may want to add a styled one to keep it consistent with the button focus treatment:
a:focus-visible {
outline: 2px solid var(--c-brand-blue);
outline-offset: 2px;
border-radius: 2px;
}Worth a follow-up ticket if you'd like, but not a merge blocker.
✅ Summary
All three previously blocking issues (scroll-motion, focus-visible, --border-strong) are resolved. The CSS foundation is solid — token architecture is clean, progressive enhancement on color-mix() is textbook correct, and the color-scheme additions are a nice polish win. Good to go! 🚀
[approve]
🧠 Learnings used
Learnt from: CR
Repo: lightspeedwp/.github PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-06-03T15:59:30.973Z
Learning: Accessibility and performance are non-negotiable; highlight potential issues during reviews
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Ash Shaw <ashley@lightspeedwp.agency>
|
Thanks for the detailed review @copilot. Addressing each point: Fixed ✅
By design / spec-prescribed (no change)
Not in scope for Phase 02
Follow-up ticket
Generated by Claude Code |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4bdeebac35
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| .btn-primary { | ||
| display: inline-flex; | ||
| gap: 0.5rem; | ||
| align-items: center; | ||
| padding: 0.45rem 0.8rem; | ||
| border-radius: 999px; | ||
| background: rgba(255, 255, 255, 0.06); | ||
| border: 1px solid rgba(255, 255, 255, 0.08); | ||
| color: var(--muted); | ||
| font-size: 0.92rem; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3 { | ||
| margin: 0; | ||
| letter-spacing: -0.03em; | ||
| line-height: 1.02; | ||
| } | ||
|
|
||
| h1 { | ||
| margin-top: 1rem; | ||
| font-family: var(--serif); | ||
| font-size: clamp(3rem, 8vw, 5.8rem); | ||
| max-width: 12ch; | ||
| gap: 8px; | ||
| padding: 11px 22px; | ||
| background: var(--c-brand-blue); |
There was a problem hiding this comment.
This new button system only defines .btn-*, but the BaseLayout pages still render the old classes, for example website/src/pages/agents/index.astro:15, website/src/pages/instructions/index.astro:15, and the 404 page use <a class="button secondary">. In those routes the CTAs now fall back to plain links with no pill sizing, contrast treatment, or focus styling, so either the templates need migrating to .btn-* or the legacy .button.primary/.button.secondary rules need to remain until migration is complete.
Useful? React with 👍 / 👎.
| :root { | ||
| color-scheme: light; | ||
|
|
||
| /* Surface elevation above --bg */ | ||
| --panel: #FFFFFF; | ||
| --panel-2: #F9FAFB; | ||
|
|
||
| /* Hairline border — use this, NOT var(--border) */ | ||
| --hair: var(--border); |
There was a problem hiding this comment.
The previous global token layer defined aliases such as --bg-elevated, --bg-soft, --muted, --text, and --shadow, but the replacement token file does not provide them and the public design-system files do not either. Existing BaseLayout pages still depend on those tokens, e.g. website/src/pages/agents/index.astro:109 uses background: var(--bg-elevated) and website/src/pages/agents/index.astro:120 uses box-shadow: var(--shadow), so those declarations become invalid and the cards lose their intended surfaces/shadows after this commit.
Useful? React with 👍 / 👎.
Fixes theme persistence inconsistency: AwesomeGithubLayout was reading and writing awesome-github-theme while BaseLayout uses ag-theme, causing saved preferences to be ignored when navigating between layouts. Also corrects the system-preference fallback to match the BaseLayout guard (dark preference).
Remove duplicated :root{}, [data-theme="dark"]{}, and .section-alt{}
opening braces introduced when pulling CI automation commits during rebase.
CSS was syntactically invalid with nested/orphaned selectors.
Feature Pull Request
Linked issues
Closes #852
Changelog
Added
website/src/styles/site-tokens.css— app-level surface tokens (--panel,--panel-2,--hair), font stacks, radius/shadow/transition tokens, and dark-theme overrides via[data-theme="dark"].website/src/styles/global.css— container system (.wrap1320px,.wrap-prose820px), section rhythm, button system (.btn-primary,.btn-ghost,.btn-soft,.icon-btn), breadcrumb, kbd chip, burger breakpoints, prose styles, and.sr-only.Changed
website/src/layouts/BaseLayout.astro— corrected stylesheet import order (site-tokens.cssbeforeglobal.css) and aligned theme persistence key toag-themeper spec.Fixed
Removed
Checklist (Global DoD / PR)