Repository navigation
Feat/ls 1711 define spotlight global styles and shared block styling - #3
Conversation
…lement base element styles for links, buttons, quotes, and lists, ensuring alignment with design tokens and enhancing editorial consistency.
…ver states to accent colors for improved consistency.
…kground color, text color, border radius, and padding for buttons, ensuring alignment with design tokens.
…gic: create primary, dark, and dark-pill styles, ensuring proper auto-registration and validation of pseudo-selectors.
…hy, and spacing settings for improved visual consistency.
…, and padding for lists to enhance visual consistency.
…improved visual rhythm and consistency
… base element styling, button variations, and update CHANGELOG for LS-1711
Moves the completed spotlight-global-styles-and-block-rules change to openspec/changes/archive/ and adds the new base-styles capability spec to openspec/specs/, documenting the base element/block styling rules this change introduced. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Warning Review limit reached
Next review available in: 46 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
Note
|
| Layer / File(s) | Summary |
|---|---|
Base-styles contract openspec/changes/archive/..., openspec/specs/base-styles/spec.md |
Defines requirements, design decisions, scope, and validation tasks for links, buttons, quotes, pullquotes, lists, and spacing. |
Global theme styles theme.json |
Updates link colors and heading margins. Adds button, quote, pullquote, list, and list-item styles. |
Button style variations and asset loading styles/blocks/button/*.json, assets/css/*.css, functions.php |
Adds four core/button style variations, their icons and hover states, and versioned CSS loading for the front end and block editor. |
Variation schema validation theme-utils.mjs |
Wraps block-style variation data for runtime schema validation and removes recognized pseudo-selector keys before AJV validation. |
Documentation and release notes AGENTS.md, CHANGELOG.md |
Documents automatic nested variation registration and records the styling and validation changes. |
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant ThemeJSON
participant VariationJSON
participant WordPress
participant ButtonCSS
ThemeJSON->>WordPress: define base styles
VariationJSON->>WordPress: register core/button variations
WordPress->>ButtonCSS: enqueue button styles
ButtonCSS->>WordPress: apply icons and hover states
Possibly related PRs
- lightspeedwp/spotlight-theme-2026#1: Relates to
theme-utils.mjs,theme.json, style variation structure, and validation conventions. - lightspeedwp/spotlight-theme-2026#2: Both changes update
theme.jsonand use shared design-token foundations.
Suggested reviewers: zaredrogers
🚥 Pre-merge checks | ✅ 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 identifies the main changes: defining Spotlight global styles and shared block styling. |
| Docstring Coverage | ✅ Passed | Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. |
| 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
📝 Generate docstrings
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
feat/ls-1711-define-spotlight-global-styles-and-shared-block-styling
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 @coderabbitai help to get the list of available commands.
|
Tick the box to add this pull request to the merge queue (same as
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@CHANGELOG.md`:
- Line 19: Update the Unreleased note in CHANGELOG.md to reference the archived
OpenSpec directory under
openspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/
instead of the non-archived path, preserving the existing release-note text.
In `@styles/blocks/button/primary.json`:
- Around line 28-33: Update the theme minimum WordPress version in style.css to
7.0 or later so the :hover styles remain supported in
styles/blocks/button/primary.json lines 28-33, styles/blocks/button/dark.json
lines 28-33, and styles/blocks/button/dark-pill.json lines 28-33; no direct
changes are required in those JSON files.
In `@theme-utils.mjs`:
- Around line 134-140: Update the block style variation validation before
wrapBlockStyleVariation() to require styles to be a non-null object, alongside
the existing blockTypes validation. When styles is missing, null, or otherwise
invalid, mark hasErrors = true and skip wrapping that variation so later JSON
files continue to be validated without a TypeError.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro Plus
Run ID: b138b859-48ca-4f1c-b619-0ce87e7a8865
📒 Files selected for processing (13)
AGENTS.mdCHANGELOG.mdopenspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/.openspec.yamlopenspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/design.mdopenspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/proposal.mdopenspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/specs/base-styles/spec.mdopenspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/tasks.mdopenspec/specs/base-styles/spec.mdstyles/blocks/button/dark-pill.jsonstyles/blocks/button/dark.jsonstyles/blocks/button/primary.jsontheme-utils.mjstheme.json
There was a problem hiding this comment.
Pull request overview
Defines Spotlight’s base styling layer in theme.json (links, buttons, quotes, lists, heading rhythm) and adds three core/button block style variations, with supporting validator and documentation updates so these styles are both selectable in the editor and schema-checked.
Changes:
- Updated
theme.jsonglobal element + block styles (link colour ramp, default button styling + hover, quote/pullquote, list spacing/indent, heading margins). - Added three
core/buttonblock style variations understyles/blocks/button/(Primary, Dark, Dark Pill), including scoped CSS for icons/hover. - Improved
theme-utils.mjs validate-schemahandling for block-style-variation JSON, and updated OpenSpec/AGENTS/CHANGELOG documentation to reflect the new behaviour and guidance.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| theme.json | Adds/adjusts global element and block styles (links, buttons, headings, quotes, lists). |
| theme-utils.mjs | Wraps block style variation files into their runtime schema position for validation, with pseudo-selector workaround. |
| styles/blocks/button/primary.json | New Primary button block style variation. |
| styles/blocks/button/dark.json | New Dark button block style variation. |
| styles/blocks/button/dark-pill.json | New Dark Pill button block style variation. |
| openspec/specs/base-styles/spec.md | New capability spec documenting the base-styles requirements. |
| openspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/tasks.md | Archived task breakdown for LS-1711 implementation. |
| openspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/specs/base-styles/spec.md | Archived delta spec for the change. |
| openspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/proposal.md | Archived proposal for the change. |
| openspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/design.md | Archived design decisions/risks for the change. |
| openspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/.openspec.yaml | OpenSpec archive metadata for the change. |
| CHANGELOG.md | Documents the newly added base styles, button variations, and validator update under Unreleased. |
| AGENTS.md | Corrects guidance: styles/blocks/** and styles/sections/** auto-register as block style variations. |
…icle, and Secondary blocks
…custom hover states and icon variations
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@assets/css/core-button.css`:
- Line 23: Normalize the CSS keyword case by changing currentColor to
currentcolor in assets/css/core-button.css:23-23,
assets/css/custom-button.css:16-16, assets/css/custom-button.css:39-39, and
assets/css/custom-button.css:62-62. Review assets/css/*.css for correctness and
run the documented linting checks before committing.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro Plus
Run ID: 013442d3-ee12-4975-a702-a1ad6e482cfb
⛔ Files ignored due to path filters (3)
assets/icons/arrow-line-up-right.svgis excluded by!**/*.svgassets/icons/arrow-right.svgis excluded by!**/*.svgassets/icons/chart-line-up.svgis excluded by!**/*.svg
📒 Files selected for processing (8)
assets/css/core-button.cssassets/css/custom-button.cssfunctions.phpstyles/blocks/button/dashboard.jsonstyles/blocks/button/outline.jsonstyles/blocks/button/republish-article.jsonstyles/blocks/button/secondary.jsontheme.json
💤 Files with no reviewable changes (1)
- theme.json
🚧 Files skipped from review as they are similar to previous changes (1)
- styles/blocks/button/dashboard.json
… styles and enhance theme.json with CSS padding for list items
Description
This branch defines Spotlight's global element styles and shared block styling rules on top of the design-token foundation from LS-1710. It closes the gap between "tokens exist" and "content actually looks intentional" — links, buttons, quotes, lists, and heading/paragraph spacing rhythm are now styled in
theme.json, grounded against four dev-ready Figma frames (home, article, contact) rather than invented from scratch.Changes
styles.elements.linkfrom thebrandramp (brand-500/brand-600) toaccent-200/accent-300, confirmed against real body-copy links in the Figma frames —brand-500stays reserved for category badges/labels, a separate pattern-level concernstyles.elements.buttonnow has a filled look (background/text colour, standard radius, padding, hover state) matching the "Subscribe" instance, instead of rendering with only font-size/weight and browser defaults for everything elsecore/buttonstyles understyles/blocks/button/—primary(full-pill, accent-blue fill, trailing arrow),dark(navy fill, standard radius, leading icon),dark-pill(navy fill, full-pill) — each a standalone, single-responsibility file following thekwv-theme-2026/Ollie convention, matching four distinct button instances found in the source framescore/quote/core/pullquotenow have a border accent, quote-body typography, and a distinct mutedcite(attribution) treatmentcore/list/core/list-itemgiven a marker colour,<li>spacing, and start-indent — flagged as a reasonable provisional default since no Figma source or reference-theme precedent exists for this elementstyles.elements.headinggiven asymmetric top/bottom margin (more space above a heading than below it) sourced from the existing fluid spacing scale — no new spacing tokens introduced anywhere in this branchtheme-utils.mjs'svalidate-schemanow checks block-style-variation partial files (styles/blocks/**/*.json) at their real runtime position instead of the flat rootstylesshape, and works around a confirmed upstream schema/ajvlimitation with pseudo-selector property names (reproduced againstkwv-theme-2026's own productioncta.jsonto confirm it wasn't specific to our files)AGENTS.mdcorrection: updated thestyles/blocks//styles/sections/guidance — these files do auto-register as selectable block styles (confirmed working in the Site Editor), correcting the previous claim that they required manual PHP registrationproposal.md/design.md/specs//tasks.md) drafted, implemented task-group by task-group, and archived; newopenspec/specs/base-styles/capability spec added alongside the existingdesign-tokensspec[Unreleased], including provisional-value notes for list spacing and heading marginsFiles Modified
Source files:
theme.json— +95/-6 lines (link colour, default button, quote/pullquote, list/list-item, heading spacing)styles/blocks/button/primary.json— new, 36 linesstyles/blocks/button/dark.json— new, 36 linesstyles/blocks/button/dark-pill.json— new, 35 linestheme-utils.mjs— +57 lines (block-style-variation schema validation fix)AGENTS.md— correctedstyles/blocks//styles/sections/auto-registration claimCHANGELOG.md— new[Unreleased]entriesPlanning/spec files:
openspec/changes/archive/2026-08-05-spotlight-global-styles-and-block-rules/— archived change (proposal, design, tasks, delta spec)openspec/specs/base-styles/spec.md— new capability specKey Improvements
kwv-theme-2026's own convention and confirmed to auto-register correctly as selectable block styles with no PHP wiring neededtheme-utils.mjsnow correctly validates block-style-variation files, unblocking this pattern for future use across the themetheme.json's own schema (thecssescape hatch), with zero new authored stylesheet —assets/css/remains untouchedRelated Issues
Closes LS-1711 — define Spotlight global styles and shared block styling rules
Part of LS-1704 — establish Spotlight
theme.jsonfoundations and design tokens (parent issue; not closed by this PR — full pattern/component work and custom CSS/JS exception documentation are tracked separately as LS-1712 and LS-1713)Testing
npm run schema:validatepasses fortheme.jsonand allstyles/**/*.jsonfiles, including the three new button variation filesnpm run theme:validatepasses (required files, placeholder tokens, text-domain consistency)single.html/page.htmltemplates don't exist yet, so the theme currently has no way to render singular post/page content on the front end) — tracked as a follow-up once those templates land, including re-checking whether the button hover states (which work in the editor) also render correctly on a real front-end pageDeployment Notes
linkelement) with no live content depending on the old valueprimary/dark/dark-pill) are descriptive placeholders pending a quick confirmation of the design system's own component naming, and the list/heading-spacing values have no Figma source at all, chosen as reasonable calm-editorial defaultscore/quote/core/pullquote) use!importantinsidetheme.json's scopedcssproperty — this is deliberate and narrowly scoped: WordPress core caps all theme.json custom CSS at a flattened:root :where(...)specificity, which cannot structurally out-specify core's own.wp-block-quote citedefault rule, so!importantis the sanctioned way around a core-imposed ceiling (same techniquekwv-theme-2026itself uses). Open to revisiting this with Zared if a cleaner approach turns upChecklist
developbase-stylescapability spec left behindSummary by CodeRabbit
New Features
Bug Fixes
Documentation