Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 48 minutes and 57 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (93)
Note
|
There was a problem hiding this comment.
Pull request overview
This PR introduces a Sass-authored “effects” styling layer (compiled to assets/css/) and expands/normalises semantic token usage to improve dark mode consistency across cards, buttons, links, and headings.
Changes:
- Added Sass mixins/partials and npm scripts to generate breakpoint maps from
theme.jsonand compile Sass entrypoints into runtime CSS. - Refactored theme/style JSON to use WordPress token shorthand (
var:preset|…,var:custom|…) and expanded semantic colour tokens with dark-mode remaps. - Added/updated card/button/list/link styles plus new card patterns, alongside refreshed compiled CSS assets.
Reviewed changes
Copilot reviewed 93 out of 94 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| theme.json | Updates palette steps, expands semantic colour tokens, adds new shadow tokens, and switches to WP shorthand references. |
| theme-utils.mjs | Adds sync-breakpoints command to generate Sass breakpoint map from theme.json. |
| styles/sections/cards/glass-card.json | Adds reusable “Glass Card” group style definition (base styles in JSON, interaction in Sass). |
| styles/sections/cards/card-spotlight.json | Normalises token syntax and shadow reference format. |
| styles/sections/cards/card-solutions.json | Adds “Solutions” card section style with token-driven border/shadow and a CSS var hook. |
| styles/sections/cards/card-solutions-accent.json | Adds alternate accent treatment variant for solutions card. |
| styles/sections/cards/card-services.json | Adds services card section style definition. |
| styles/sections/cards/card-feature.json | Renames feature card style slug/title and updates token references + CSS var hooks. |
| styles/presets/typography.json | Normalises typography token references to WP shorthand. |
| styles/presets/spacing.json | Normalises spacing token references to WP shorthand. |
| styles/presets/links.json | Normalises link colour token references to WP shorthand. |
| styles/presets/buttons.json | Removes unused settings.custom.button-padding branch and normalises token references. |
| styles/presets/blocks/core-site-title.json | Normalises typography/colour tokens to WP shorthand. |
| styles/presets/blocks/core-site-tagline.json | Normalises colour tokens to WP shorthand. |
| styles/presets/blocks/core-separator.json | Normalises colour tokens to WP shorthand. |
| styles/presets/blocks/core-search.json | Normalises line-height token reference. |
| styles/presets/blocks/core-read-more.json | Normalises link colours and font-weight to custom token. |
| styles/presets/blocks/core-quote.json | Normalises token refs and font-weight to custom token. |
| styles/presets/blocks/core-query-pagination.json | Normalises token refs and font-weight to custom token. |
| styles/presets/blocks/core-pullquote.json | Normalises token refs and font-weight to custom token. |
| styles/presets/blocks/core-preformatted.json | Normalises token refs incl. monospace preset. |
| styles/presets/blocks/core-post-title.json | Normalises token refs for link colours. |
| styles/presets/blocks/core-post-terms.json | Normalises font-weight to custom token. |
| styles/presets/blocks/core-post-navigation-link.json | Normalises font-weight to custom token. |
| styles/presets/blocks/core-post-excerpt.json | Normalises colour + line-height token refs. |
| styles/presets/blocks/core-post-date.json | Normalises colour token refs. |
| styles/presets/blocks/core-navigation.json | Normalises colour token refs + font-weight token. |
| styles/presets/blocks/core-details.json | Adds full details/accordion base styling via tokens. |
| styles/presets/blocks/core-comment-reply-link.json | Normalises colour + line-height token refs. |
| styles/presets/blocks/core-comment-edit-link.json | Normalises colour + line-height token refs. |
| styles/presets/blocks/core-comment-date.json | Normalises colour + line-height token refs. |
| styles/presets/blocks/core-comment-author-name.json | Normalises colour + font-weight + line-height token refs. |
| styles/presets/blocks/core-code.json | Normalises token refs incl. font-weight token. |
| styles/presets/blocks/core-button.json | Normalises token refs and adjusts outline padding values. |
| styles/light.json | Removes light variation file (defaults now live in theme.json). |
| styles/dark.json | Updates dark semantic colour remaps and shadow tokens; normalises root style token syntax. |
| styles/blocks/paragraphs/link-underline-accent.json | Moves interaction contract out of inline css and normalises token refs. |
| styles/blocks/paragraphs/link-arrow-accent.json | Normalises link colour token reference (but currently uses an invalid shorthand form). |
| styles/blocks/lists/tick-accent.json | Adds tick list block style definition. |
| styles/blocks/headings/shadow-heading-contrast.json | Adds heading text-shadow style hook. |
| styles/blocks/headings/shadow-heading-base.json | Adds heading text-shadow style hook. |
| styles/blocks/headings/gradient-accent.json | Normalises heading colour refs (but currently uses an invalid shorthand form). |
| styles/blocks/groups/icon-frame-glow.json | Adds reusable icon frame group style definition. |
| styles/blocks/buttons/glass-button.json | Adds glass button block style definition. |
| styles/blocks/buttons/button-glow-accent.json | Normalises token refs and moves long CSS contract into Sass. |
| styles/blocks/buttons/button-arrow-compact.json | Adds compact arrow CTA button style definition. |
| style.css | Updates “Tested up to” WordPress version. |
| src/scss/gsap/_home-hero-section.scss | Adds GSAP hero section styling using shared mixins and breakpoint map. |
| src/scss/gsap/_card-spotlight.scss | Adds GSAP spotlight card effect styling using shared mixins/tokens. |
| src/scss/gsap-animations.scss | Adds Sass entrypoint for GSAP effect CSS compilation. |
| src/scss/animations/_text-motion.scss | Adds gradient heading motion styles and reduced-motion handling. |
| src/scss/animations/_link-motion.scss | Adds underline + arrow link motion and tick list marker styling. |
| src/scss/animations/_keyframes.scss | Adds shared keyframes for gradient shift animation. |
| src/scss/animations/_icons.scss | Defines shared icon glyphs for CSS-generated arrows/ticks. |
| src/scss/animations/_details-motion.scss | Adds accordion/details interaction styling (hover/open/focus). |
| src/scss/animations/_card-motion.scss | Adds card interaction styling (glass card, feature/services/solutions cards, icon frame glow). |
| src/scss/animations/_button-motion.scss | Adds button motion styling (fill/outline/glass/glow/compact arrow) and reduced-motion handling. |
| src/scss/animations.scss | Adds Sass entrypoint for non-GSAP effect CSS compilation. |
| src/scss/abstracts/mixins/_surface.scss | Adds surface helper mixins (absolute fill + card shell). |
| src/scss/abstracts/mixins/_mq.scss | Adds breakpoint map + mq() mixin tied to generated theme breakpoints. |
| src/scss/abstracts/mixins/_motion.scss | Adds reduced-motion mixin wrapper. |
| src/scss/abstracts/mixins/_glass.scss | Adds glass surface/highlight mixins. |
| src/scss/abstracts/mixins/_breakpoints-theme.scss | Adds generated breakpoint map file (output of sync-breakpoints). |
| patterns/cards/card-solutions.php | Adds solutions card pattern using new styles/classes. |
| patterns/cards/card-services.php | Adds services card pattern using new styles/classes. |
| patterns/cards/card-feature.php | Renames/rewires feature card pattern to new slug/class naming. |
| package.json | Adds Sass dependency and scripts for breakpoint sync + CSS build/watch. |
| package-lock.json | Locks added Sass (and transitive) dependencies. |
| README.md | Documents Sass source layer and new build scripts. |
| CHANGELOG.md | Records new Sass workflow, new patterns/styles, and token/dark mode refactors. |
| .github/tasks/task-list.md | Marks Sass mixin + compilation workflow task complete. |
| .github/reports/2026-04-10-theme-mixin-strategy.md | Updates mixin strategy report formatting/escaping. |
| .github/prompts/new-pattern.prompt.md | Updates prompt front matter key. |
| .github/prompts/extract-pattern.prompt.md | Updates prompt front matter key and expands icon + GSAP workflow guidance. |
| .github/prompts/complete-theme-json.prompt.md | Updates prompt front matter key. |
| .github/prompts/cleanup.prompt.md | Updates prompt front matter key. |
| .github/prompts/audit-theme.prompt.md | Updates prompt front matter key. |
| .github/prompts/audit-styling.prompt.md | Adds styling audit prompt. |
| .github/prompts/README.md | Adds audit-styling prompt to prompt index. |
| .github/instructions/theme-json.instructions.md | Adds explicit guidance to prefer WP shorthand tokens in JSON values. |
| .github/instructions/styling.instructions.md | Adds Sass/CSS authoring and toolchain guidance. |
| .github/instructions/design-token-policy.instructions.md | Adds preset reference syntax guidance aligning JSON vs CSS usage. |
| .github/instructions/README.md | Adds styling instructions to index. |
| .github/copilot-instructions.md | Updates repo Copilot guidance to include source-first Sass workflow. |
| .agents/skills/theme-color-token-enforcer/SKILL.md | Updates semantic token enforcement guidance incl. typography weight tokens. |
| .agents/skills/pattern-extractor/SKILL.md | Updates pattern extraction workflow (Phosphor mapping, mandatory token/GSAP skills). |
| .agents/skills/block-theme-audit/SKILL.md | Updates audit skill version + adds styling workflow checks. |
| .agents/agents/wordpress-theme-styling-auditor.agent.md | Adds new styling auditor persona. |
| .agents/agents/README.md | Adds new persona to index. |
| inc/animations.php | Refactors CSS-driven block style registrations to an array-driven approach. |
| assets/css/gsap-animations.min.css | Adds compiled/minified GSAP effect CSS output. |
| assets/css/gsap-animations.css | Updates compiled GSAP CSS output formatting/contents. |
| assets/css/animations.min.css | Adds compiled/minified non-GSAP effect CSS output. |
Comments suppressed due to low confidence (1)
styles/blocks/paragraphs/link-arrow-accent.json:18
var:wp|custom|...is not valid WordPress theme.json token shorthand, so this reference will not resolve at runtime. Usevar:custom|color|link|accent(and consider switching the numericfontWeightto the existing custom token, e.g.var:custom|typography|font-weight|semibold, to match the repo’s tokenised typography approach).
| "fontSize": "var:preset|font-size|300", | ||
| "fontWeight": "var:custom|typography|font-weight|medium", | ||
| "lineHeight": "var:custom|line-height|heading-default", | ||
| "textDecoration": "uppercase" |
There was a problem hiding this comment.
textDecoration does not support an uppercase value, so this will either be ignored or fail schema validation. Use the textTransform property for uppercase styling (or remove this if it’s not intended).
| $block_styles = array( | ||
| array( | ||
| 'name' => 'feature-card', | ||
| 'label' => __( 'Feature Card', 'ls-theme' ), | ||
| ) | ||
| 'block_name' => 'core/group', | ||
| 'name' => 'card-feature', | ||
| 'label' => __( 'Card - Feature', 'ls-theme' ), | ||
| ), | ||
| array( | ||
| 'block_name' => 'core/group', | ||
| 'name' => 'card-solutions', | ||
| 'label' => __( 'Card - Solutions', 'ls-theme' ), | ||
| ), | ||
| array( | ||
| 'block_name' => 'core/group', | ||
| 'name' => 'card-solutions-accent', | ||
| 'label' => __( 'Card - Solutions Accent', 'ls-theme' ), | ||
| ), | ||
| array( | ||
| 'block_name' => 'core/group', | ||
| 'name' => 'icon-frame-glow', | ||
| 'label' => __( 'Icon Frame Glow', 'ls-theme' ), | ||
| ), | ||
| array( | ||
| 'block_name' => 'core/button', | ||
| 'name' => 'button-arrow-compact', | ||
| 'label' => __( 'Button Arrow Compact', 'ls-theme' ), | ||
| ), | ||
| ); |
There was a problem hiding this comment.
New is-style-* classes are introduced/used in this PR (e.g. card-services, glass-card, glass-button, tick-accent, etc.) but they are not registered via register_block_style(). Without registration they won’t appear in the editor’s Styles panel (and it’s inconsistent with the existing approach used here). Add the missing block-style registrations (or document why certain styles are intentionally pattern-only).
| "top": "calc(1rem - 2px)", | ||
| "right": "var:custom|spacing|button|padding-right", | ||
| "bottom": "calc(1rem - 2px)", | ||
| "left": "var:custom|spacing|button|padding-left" |
There was a problem hiding this comment.
This switches the outline button’s vertical padding calculation from the theme’s shared button padding token to a hard-coded 1rem. That breaks the single source of truth in theme.json (settings.custom.spacing.button.*) and makes future padding tweaks inconsistent. Prefer referencing the existing custom spacing token for top/bottom padding (even inside calc(...)) rather than hard-coding the value.
| "color": { | ||
| "text": "var(--wp--custom--color--text--brand)" | ||
| "text": "var:custom|color|text|brand" | ||
| }, | ||
| "elements": { | ||
| "link": { | ||
| "color": { | ||
| "text": "var(--wp--custom--color--text--brand)" | ||
| "text": "var:custom|color|text|brand" | ||
| } |
There was a problem hiding this comment.
var:wp|custom|... is not valid WordPress theme.json token shorthand, so these colour references will not resolve. Use var:custom|color|text|brand for both occurrences.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a comprehensive styling architecture for the WordPress theme, featuring a Sass source layer, automated breakpoint synchronization, and several new block style variations and patterns. It also standardizes design token usage by migrating to WordPress shorthand syntax in JSON configuration files. Feedback highlights a few remaining inconsistencies in token naming conventions and recommends replacing hardcoded padding values with theme tokens to ensure better maintainability and consistency with the design system.
| "color": { | ||
| "text": "var(--wp--custom--color--text--brand)" | ||
| "text": "var:custom|color|text|brand" | ||
| }, | ||
| "elements": { | ||
| "link": { | ||
| "color": { | ||
| "text": "var(--wp--custom--color--text--brand)" | ||
| "text": "var:custom|color|text|brand" | ||
| } | ||
| } |
There was a problem hiding this comment.
There's an inconsistency in the token syntax used here. Throughout this pull request, the standard for referencing custom tokens in theme.json files has been var:custom|.... However, var:wp|custom|... is used here. To maintain consistency with the rest of the codebase and adhere to the documented WordPress token syntax, please remove the wp| prefix.
"color": {
"text": "var:custom|color|text|brand"
},
"elements": {
"link": {
"color": {
"text": "var:custom|color|text|brand"
}
}
| "color": { | ||
| "text": "var(--wp--custom--color--link--accent)" | ||
| "text": "var:custom|color|link|accent" | ||
| }, |
There was a problem hiding this comment.
There's an inconsistency in the token syntax used here. The standard convention in this project is var:custom|..., but var:wp|custom|... is used. Please update this to var:custom|color|link|accent for consistency.
"color": {
"text": "var:custom|color|link|accent"
}
| "padding": { | ||
| "top": "calc(var(--wp--custom--spacing--button--padding-top) - 2px)", | ||
| "right": "var(--wp--custom--spacing--button--padding-right)", | ||
| "bottom": "calc(var(--wp--custom--spacing--button--padding-bottom) - 2px)", | ||
| "left": "var(--wp--custom--spacing--button--padding-left)" | ||
| "top": "calc(1rem - 2px)", | ||
| "right": "var:custom|spacing|button|padding-right", | ||
| "bottom": "calc(1rem - 2px)", | ||
| "left": "var:custom|spacing|button|padding-left" | ||
| } |
There was a problem hiding this comment.
The padding values for top and bottom are hardcoded as 1rem within the calc() function. This value is defined as a token in theme.json (settings.custom.spacing.button.padding-top and padding-bottom). To improve maintainability and ensure these values stay in sync with the theme's design tokens, it's better to reference the token. Since this is inside a calc() function, you should use the CSS custom property syntax.
"padding": {
"top": "calc(var(--wp--custom--spacing--button--padding-top) - 2px)",
"right": "var:custom|spacing|button|padding-right",
"bottom": "calc(var(--wp--custom--spacing--button--padding-bottom) - 2px)",
"left": "var:custom|spacing|button|padding-left"
}
Implement initial Sass mixins and refactor styles for improved dark mode support. Update color variables and enhance card styles for better visual consistency.