refact: extracting components #249
Conversation
WalkthroughAdds a CSS migration strategy document and introduces multiple new CSS/SCSS component files implementing a dual-class (legacy FL-Builder + BEM) approach. Updates an existing theme stylesheet with CSS variables, utilities, and selector adjustments. Adds foundation, utilities, layout scaffolding, and Phase 0 migrations for buttons, cards, forms, navigation, and structural layout. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Dev as Developer
participant Repo as Repo (CSS/SCSS)
participant CI as CI/CD
participant Prev as Preview env
participant VR as Visual/Perf/AXE Checks
participant RB as Rollback Paths
Dev->>Repo: Add dual-class CSS + variables\n(Phase 0 components)
Repo-->>CI: Commit/PR
CI->>Prev: Build & deploy preview
Prev->>VR: Run validations (visual, perf, a11y)
alt Pass thresholds
VR-->>Dev: Report success
Dev->>Repo: Proceed to next micro-migrations
else Fail thresholds
VR-->>RB: Trigger rollback (component/phase/emergency)
RB-->>Repo: Revert commit(s)
Repo-->>CI: Rebuild preview
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests
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[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
themes/beaver/assets/css/bem-home-page-minimal.css (1)
22-25: Comment contradicts implementation (“No visual changes”).This file sets margins, paddings, colors, etc. Either update the comment or move visual changes into a separate migration layer.
Apply:
-/* ================================================ - SEMANTIC CLASS HOOKS ONLY - No layout, margin, padding, or visual changes - ================================================ */ +/* ================================================ + SEMANTIC HOOKS + SAFE VISUAL CONSOLIDATION + Includes copied styles from FL nodes with intent + to preserve current visuals during migration + ================================================ */
🧹 Nitpick comments (20)
themes/beaver/assets/css/components/c-footer.scss (1)
10-14: Add hex fallbacks before var() for mobile compatibility.Project guideline: provide direct hex fallbacks if variables fail on mobile.
- background-color: var(--footer-bg); - color: var(--footer-text); - padding: var(--footer-padding); + background-color: #ffffff; + background-color: var(--footer-bg, #ffffff); + color: #333333; + color: var(--footer-text, #333333); + padding: 2rem; + padding: var(--footer-padding, 2rem);themes/beaver/assets/css/components/cards-migration.css (1)
1-24: Scaffold ships empty rule sets; consider gating or adding minimal defaults.Empty blocks bloat CSS and can confuse future readers. Either add minimal, safe defaults or omit until Phase 1.
Example minimal baseline:
-.cs-testimonial, -.c-card--testimonial { - /* Base testimonial card styles */ -} +.cs-testimonial, +.c-card--testimonial { + display: block; + background-color: #ffffff; + background-color: var(--card-bg, #ffffff); + color: #333333; + color: var(--card-text, #333333); + border-radius: 8px; +}Also add a newline at EOF.
themes/beaver/assets/css/components/layout-rows.css (1)
5-10: Row container lacks clearfix; floats in columns will collapse parent.Add a clearfix to .c-row (and/or .c-row__content) to contain floated children.
.c-row, .c-row__content { margin-left: auto; margin-right: auto; min-width: 0; } + +/* Contain floated columns */ +.c-row::after, +.c-row__content::after { + content: ""; + display: table; + clear: both; +}themes/beaver/assets/css/components/c-modal.scss (1)
10-18: Add hex/explicit fallbacks for variables; improve overlay defaults.Provide fallbacks and ensure scrollability for long content.
- background-color: var(--modal-bg); - z-index: var(--modal-z-index); - display: none; + background-color: #000000; + background-color: var(--modal-bg, rgba(0, 0, 0, 0.8)); + z-index: 1000; + z-index: var(--modal-z-index, 1000); + display: none; + overflow: auto; /* allow content scroll */themes/beaver/assets/css/components/c-hero.scss (1)
10-15: Add direct hex fallbacks before var().Aligns with mobile fallback guideline.
- padding: var(--hero-padding); - background-color: var(--hero-bg-color); - color: var(--hero-text-color); + padding: 4rem 2rem; + padding: var(--hero-padding, 4rem 2rem); + background-color: #ffffff; + background-color: var(--hero-bg-color, #ffffff); + color: #333333; + color: var(--hero-text-color, #333333);themes/beaver/assets/css/components/c-accordion.scss (1)
11-16: Provide hex fallbacks for variables.Consistent with project mobile guidance.
- border: 1px solid var(--accordion-border-color); + border: 1px solid #e7e7e7; + border-color: var(--accordion-border-color, #e7e7e7); border-radius: 8px; - background-color: var(--accordion-content-bg); - color: var(--accordion-text-color); + background-color: #ffffff; + background-color: var(--accordion-content-bg, #ffffff); + color: #333333; + color: var(--accordion-text-color, #333333);themes/beaver/assets/css/components/buttons-migration.css (2)
3-27: Support disabled state and forced-colors.Anchor “buttons” sometimes use aria-disabled; add disabled styles and Windows HC support.
+.c-button[disabled], +.c-button.-is-disabled, +.fl-builder-content a.fl-button[aria-disabled="true"] { + pointer-events: none; + opacity: 0.6; + cursor: default; +} + +@media (forced-colors: active) { + .fl-builder-content a.fl-button, + .c-button { + border-color: ButtonText; + background: ButtonFace; + color: ButtonText; + } + .fl-builder-content a.fl-button:focus, + .c-button:focus { + outline: 2px solid Highlight; + box-shadow: none; + } +}Also applies to: 45-51, 61-67
6-9: Drop obsolete vendor prefixes.
-moz/-webkit-border-radiusand transition prefixes are unnecessary for supported browsers.border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; @@ - -webkit-transition: all 0.3s ease; - -moz-transition: all 0.3s ease;Also applies to: 24-27
themes/beaver/assets/css/components/c-contact-section.scss (1)
11-14: Add hex fallbacks for CSS variables.Meet the mobile fallback guideline.
- background-color: var(--contact-bg); - color: var(--contact-text); - padding: var(--contact-padding); + background-color: var(--contact-bg, #ffffff); + color: var(--contact-text, #333333); + padding: var(--contact-padding, 2rem);themes/beaver/assets/css/components/c-service-grid.scss (1)
12-15: Optional: graceful non-grid fallback.Add a simple block fallback when Grid is unsupported.
display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--grid-gap); } + +@supports not (display: grid) { + .c-service-grid { display: block; } +}themes/beaver/assets/css/components/forms-migration.css (1)
53-55: Avoid!importantunless necessary.If specificity allows, drop
!importantto keep utilities composable.-.c-form__input--full { - width: 100% !important; -} +.c-form__input--full { width: 100%; }themes/beaver/assets/css/components/c-testimonial-slider.scss (1)
11-14: Add hex fallbacks to vars.- background-color: var(--slider-bg); - color: var(--slider-text); - padding: var(--slider-padding); + background-color: var(--slider-bg, #ffffff); + color: var(--slider-text, #333333); + padding: var(--slider-padding, 2rem);themes/beaver/assets/css/components/c-team-member.scss (1)
11-14: Add hex fallbacks to vars.- background-color: var(--team-card-bg); - color: var(--team-card-text); - padding: var(--team-card-padding); + background-color: var(--team-card-bg, #ffffff); + color: var(--team-card-text, #333333); + padding: var(--team-card-padding, 2rem);themes/beaver/assets/css/components/navigation-migration.css (2)
6-9: Mobile nav layering (z-index) and scroll lock.Fixed positioning needs a stacking context; also ensure body scroll lock exists elsewhere.
@media (max-width: 1024px) { .navigation, .c-nav { position: fixed; + z-index: 1000; background-color: #ffffff; /* var(--jt-white) mobile fix */ } }Confirm body overflow handling when
.js-navigation.-openis applied.
35-42: Border color without border width.On some resets, no border is visible. Consider setting a minimal width on mobile.
@media (max-width: 1024px) { .menu-opener, .c-nav__toggle { border-color: #121212; /* var(--jt-text-primary) mobile fix */ + border-width: 1px; + border-style: solid; display: block; } }themes/beaver/assets/css/components/layout-foundation.css (1)
23-32: Screen-reader helper: include focus override.Allow focusable elements to become visible when focused by keyboard.
.c-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } + +.c-sr-only:focus, +.c-sr-only:active { + position: static; + width: auto; + height: auto; + clip: auto; + white-space: normal; +}docs/css-migration-strategic-analysis.md (1)
3-3: Fix MD036: use a heading instead of emphasis.Change the emphasized line to a proper heading for markdownlint.
Apply:
-*CSS Analyst & Strategist Report - September 22, 2025* +### CSS Analyst & Strategist Report — September 22, 2025themes/beaver/assets/css/utilities.css (1)
26-33: Prefer modern pseudo-element syntax and minimal clearfix.Use ::before/::after and the micro clearfix pattern.
Apply:
-.c-clearfix:before, -.c-clearfix:after { display: table; content: " "; } - -.c-clearfix:after { clear: both; } +.c-clearfix::before, +.c-clearfix::after { content: ""; display: table; } +.c-clearfix::after { clear: both; }themes/beaver/assets/css/bem-home-page-minimal.css (2)
439-465: Over-broad color reset risks unintended overrides.The universal-ish selector with many :not() clauses will force white on most descendants. Narrow scope (e.g., limit to headings/paragraphs inside the block) or rely on inheritance from a wrapper.
Apply:
-.fl-builder-content .c-cta-section__content-column *:not(span):not(input):not(textarea):not(select):not(a):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fl-menu-mobile-toggle) { - color: #ffffff; -} +.fl-builder-content .c-cta-section__content-column { + color: #ffffff; +} +.fl-builder-content .c-cta-section__content-column a { color: #ffffff; } +.fl-builder-content .c-cta-section__content-column a:hover { color: #ffffff; }
743-747: Move .u-margin-auto and .u-form-center into utilities.css; remove duplicate utilities from bem-home-page-minimal.css.u-text-center already exists in themes/beaver/assets/css/utilities.css (line 13). Remove the utility declarations from themes/beaver/assets/css/bem-home-page-minimal.css (lines 736–748) and add .u-margin-auto and .u-form-center to utilities.css.
Apply here:
-/* Micro-change 1: Safe utility class addition */ -.u-text-center { text-align: center; } -.u-margin-auto { margin-left: auto; margin-right: auto; } -.u-form-center { text-align: center; }And add to themes/beaver/assets/css/utilities.css:
+/* Layout/Forms Utilities */ +.u-margin-auto { margin-left: auto; margin-right: auto; } +.u-form-center { text-align: center; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
bin/test(1 hunks)docs/css-migration-strategic-analysis.md(1 hunks)themes/beaver/assets/css/bem-home-page-minimal.css(5 hunks)themes/beaver/assets/css/components/buttons-migration.css(1 hunks)themes/beaver/assets/css/components/c-accordion.scss(1 hunks)themes/beaver/assets/css/components/c-contact-section.scss(1 hunks)themes/beaver/assets/css/components/c-footer.scss(1 hunks)themes/beaver/assets/css/components/c-hero.scss(1 hunks)themes/beaver/assets/css/components/c-modal.scss(1 hunks)themes/beaver/assets/css/components/c-service-grid.scss(1 hunks)themes/beaver/assets/css/components/c-team-member.scss(1 hunks)themes/beaver/assets/css/components/c-testimonial-slider.scss(1 hunks)themes/beaver/assets/css/components/cards-migration.css(1 hunks)themes/beaver/assets/css/components/forms-migration.css(1 hunks)themes/beaver/assets/css/components/layout-columns.css(1 hunks)themes/beaver/assets/css/components/layout-foundation.css(1 hunks)themes/beaver/assets/css/components/layout-rows.css(1 hunks)themes/beaver/assets/css/components/navigation-migration.css(1 hunks)themes/beaver/assets/css/utilities.css(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
themes/**/assets/**/*.{css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Hugo Pipes/PostCSS/Tailwind pipeline; ensure CSS follows project component conventions and is compatible with mobile @media rules (use direct hex fallbacks if variables fail on mobile)
Files:
themes/beaver/assets/css/components/c-accordion.scssthemes/beaver/assets/css/components/c-modal.scssthemes/beaver/assets/css/components/layout-foundation.cssthemes/beaver/assets/css/components/c-footer.scssthemes/beaver/assets/css/components/forms-migration.cssthemes/beaver/assets/css/components/layout-columns.cssthemes/beaver/assets/css/components/buttons-migration.cssthemes/beaver/assets/css/components/c-contact-section.scssthemes/beaver/assets/css/components/c-service-grid.scssthemes/beaver/assets/css/components/c-hero.scssthemes/beaver/assets/css/components/cards-migration.cssthemes/beaver/assets/css/components/layout-rows.cssthemes/beaver/assets/css/components/c-testimonial-slider.scssthemes/beaver/assets/css/components/c-team-member.scssthemes/beaver/assets/css/utilities.cssthemes/beaver/assets/css/bem-home-page-minimal.cssthemes/beaver/assets/css/components/navigation-migration.css
🧠 Learnings (2)
📚 Learning: 2025-09-22T09:11:24.148Z
Learnt from: CR
PR: jetthoughts/jetthoughts.github.io#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-22T09:11:24.148Z
Learning: Applies to Rakefile : Ruby automation should integrate with existing Rake tasks and avoid introducing hardcoded values or masking tests
Applied to files:
bin/test
📚 Learning: 2025-09-22T09:11:24.148Z
Learnt from: CR
PR: jetthoughts/jetthoughts.github.io#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-22T09:11:24.148Z
Learning: Applies to bin/**/*.rb : Do not add ad-hoc developer scripts; leverage existing bin tools and ensure configuration via ENV without hardcoded values
Applied to files:
bin/test
🧬 Code graph analysis (1)
themes/beaver/assets/css/components/navigation-migration.css (1)
themes/beaver/assets/js/navigation.js (3)
document(1-29)subMenuOpener(23-27)e(4-7)
🪛 markdownlint-cli2 (0.18.1)
docs/css-migration-strategic-analysis.md
3-3: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build_and_deploy / build
🔇 Additional comments (7)
themes/beaver/assets/css/components/layout-columns.css (1)
5-8: Columns float without a clearfix; add mobile-safe defaults.Floating columns need a clearing strategy on the parent row to avoid collapse. Also, provide mobile-first stacking.
Consider:
.c-col { float: left; + width: 100%; /* mobile-first */ min-height: 1px; }And ensure the row container defines a clearfix (see comment in layout-rows.css).
Run to confirm a clearfix exists:bin/test (1)
3-7: Make TEST_SUITE configurable and ensure shell portability
- Replace non‑portable "/usr/bin/env sh" + pipefail with bash (or remove pipefail) and avoid defaulting to test:critical; make suite selectable via TEST_SUITE to prevent silently narrowing test coverage.
- Verification failed earlier (rg run errored due to missing paths). Confirm CI/workflows/scripts do not call bin/test or depend on test:critical before merging.
Apply:
-#!/usr/bin/env sh +#!/usr/bin/env bash @@ -set -euo pipefail +set -euo pipefail @@ -if [ $# -eq 0 ]; then -# bin/rake test:all - bin/rake test:critical +if [ $# -eq 0 ]; then + # Select suite via TEST_SUITE (default: test:critical). Example: TEST_SUITE=test:all bin/test + bin/rake "${TEST_SUITE:-test:critical}"To verify callers, run locally:
rg -n -C2 -g '!**/node_modules/**' -e '\bbin/test\b|\bbin/rake\b.*\btest:|\btest:all\b|\btest:critical\b|\bTEST_SUITE\b' .themes/beaver/assets/css/components/layout-foundation.css (1)
34-43: Verify visibility utility breakpoints exist.Defaults are hidden; ensure breakpoint rules enabling each variant are defined elsewhere.
docs/css-migration-strategic-analysis.md (1)
1-11: Solid plan and actionable checkpoints.The phased approach, rollback granularity, and validation cadence read strong and pragmatic.
themes/beaver/assets/css/utilities.css (1)
16-20: Naming is clear; aligns with “c-” component utility pattern.No issues.
themes/beaver/assets/css/bem-home-page-minimal.css (2)
140-144: Selector merge for title prefix looks good.Combining legacy and BEM hook should keep behavior consistent.
Please confirm no JS/CMS logic targets .pp-infobox-title-prefix visibility independently.
78-86: Mobile CSS variables declared but unused — confirm usage or convert to var() fallbacks.Declarations in themes/beaver/assets/css/bem-home-page-minimal.css (lines 78–86) only define tokens; they do nothing unless referenced with var(--name) or used as fallbacks (example: background: var(--form-background, #F5F6F8)). The provided ripgrep produced no matches — either update consuming properties to use var(...) or remove the unused tokens.
| /* CSS Custom Properties for Future Use */ | ||
| :root { | ||
| --color-primary: #1a8cff; | ||
| --infobox-spacing: 15px; | ||
| --infobox-margin: 25px; | ||
| --form-background: #F5F6F8; | ||
| --form-field-spacing: 20px; | ||
| --cta-button-bg: #121212; | ||
| --cta-button-hover-bg: #24292D; | ||
| --cta-button-margin: 40px; | ||
| --cta-section-spacing: 15px; | ||
| --cta-text-color: #ffffff; | ||
| --cta-button-border: #060606; | ||
| } |
There was a problem hiding this comment.
Custom properties defined but not used.
You define tokens on :root but rules still use hard-coded values. Either use var() with hex fallbacks (preferred per guidelines) or drop the tokens.
Apply on a representative set (extend similarly elsewhere):
-.fl-builder-content .c-cta-section__button a.fl-button,
-.fl-builder-content .c-cta-section__button a.fl-button:visited {
- background: #121212;
- text-transform: none;
- border: 1px solid #060606;
-}
+.fl-builder-content .c-cta-section__button a.fl-button,
+.fl-builder-content .c-cta-section__button a.fl-button:visited {
+ background: var(--cta-button-bg, #121212);
+ text-transform: none;
+ border: 1px solid var(--cta-button-border, #060606);
+}
-.fl-builder-content .c-cta-section__button a.fl-button:hover {
- background-color: #24292D;
- border: 1px solid #181d21;
-}
+.fl-builder-content .c-cta-section__button a.fl-button:hover {
+ background-color: var(--cta-button-hover-bg, #24292D);
+ border: 1px solid var(--cta-button-hover-border, #181d21);
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /* CSS Custom Properties for Future Use */ | |
| :root { | |
| --color-primary: #1a8cff; | |
| --infobox-spacing: 15px; | |
| --infobox-margin: 25px; | |
| --form-background: #F5F6F8; | |
| --form-field-spacing: 20px; | |
| --cta-button-bg: #121212; | |
| --cta-button-hover-bg: #24292D; | |
| --cta-button-margin: 40px; | |
| --cta-section-spacing: 15px; | |
| --cta-text-color: #ffffff; | |
| --cta-button-border: #060606; | |
| } | |
| /* CSS Custom Properties for Future Use */ | |
| :root { | |
| --color-primary: #1a8cff; | |
| --infobox-spacing: 15px; | |
| --infobox-margin: 25px; | |
| --form-background: #F5F6F8; | |
| --form-field-spacing: 20px; | |
| --cta-button-bg: #121212; | |
| --cta-button-hover-bg: #24292D; | |
| --cta-button-margin: 40px; | |
| --cta-section-spacing: 15px; | |
| --cta-text-color: #ffffff; | |
| --cta-button-border: #060606; | |
| } | |
| .fl-builder-content .c-cta-section__button a.fl-button, | |
| .fl-builder-content .c-cta-section__button a.fl-button:visited { | |
| background: var(--cta-button-bg, #121212); | |
| text-transform: none; | |
| border: 1px solid var(--cta-button-border, #060606); | |
| } | |
| .fl-builder-content .c-cta-section__button a.fl-button:hover { | |
| background-color: var(--cta-button-hover-bg, #24292D); | |
| border: 1px solid var(--cta-button-hover-border, #181d21); | |
| } |
🤖 Prompt for AI Agents
In themes/beaver/assets/css/bem-home-page-minimal.css around lines 7–20 you
declare custom properties on :root but they are not used; update representative
rules to reference these variables with hex fallbacks (e.g., background, button
bg/hover, button border, text color, form background, spacing and margins) using
var(--token, #hex) instead of hard-coded values so tokens are applied
consistently; if any declared token is genuinely unused after updates, remove it
to avoid dead variables.
| /* Focus states for accessibility */ | ||
| .fl-builder-content a.fl-button:focus, | ||
| .c-button:focus { | ||
| outline: 2px solid var(--color-focus, #4a90e2); | ||
| outline-offset: 2px; | ||
| box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3); | ||
| } |
There was a problem hiding this comment.
Add :focus-visible and reduce-motion; limit transitioned properties.
Keyboard a11y and motion sensitivity: include :focus-visible and a reduced-motion override; avoid transition: all.
- transition: all 0.3s ease;
- -webkit-transition: all 0.3s ease;
- -moz-transition: all 0.3s ease;
+ transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+
+@media (prefers-reduced-motion: reduce) {
+ .fl-builder-content a.fl-button,
+ .fl-builder-content a.fl-button:visited,
+ .c-button {
+ transition: none;
+ transform: none;
+ }
+}
@@
.fl-builder-content a.fl-button:focus,
.c-button:focus {
outline: 2px solid var(--color-focus, #4a90e2);
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}
+
+.fl-builder-content a.fl-button:focus-visible,
+.c-button:focus-visible {
+ outline: 2px solid var(--color-focus, #4a90e2);
+ outline-offset: 2px;
+ box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
+}Also applies to: 24-27
🤖 Prompt for AI Agents
In themes/beaver/assets/css/components/buttons-migration.css around lines 37 to
43 (and also apply same changes to lines 24-27), the focus styles should support
:focus-visible for keyboard users, include a prefers-reduced-motion override to
disable or simplify animated effects for motion-sensitive users, and avoid broad
`transition: all`; instead explicitly transition only safe properties (e.g.,
background-color, color, box-shadow, border-color). Update selectors to include
:focus-visible alongside :focus, add a @media (prefers-reduced-motion: reduce)
block to remove transitions and heavy animations for these buttons, and replace
any `transition: all` uses on these elements with a targeted transition list.
| .fl-node-vo75i29j3fmz.c-accordion { | ||
| @extend .c-accordion; | ||
| } No newline at end of file |
There was a problem hiding this comment.
🛠️ Refactor suggestion
🧩 Analysis chain
@extend selector likely redundant; decide mapping strategy.
Mirror the earlier recommendation: target bare FL node or delete.
-.fl-node-vo75i29j3fmz.c-accordion {
+.fl-node-vo75i29j3fmz {
@extend .c-accordion;
}Verify usage:
🏁 Script executed:
#!/bin/bash
rg -n -C2 -e 'fl-node-vo75i29j3fmz\b' layouts content themesLength of output: 91974
Replace combined selector with bare FL node
.fl-node-vo75i29j3fmz appears throughout the generated layout CSS and the combined selector only exists in this file — switch to the bare FL node so .c-accordion rules are actually applied (or delete the rule if unused).
File: themes/beaver/assets/css/components/c-accordion.scss (lines 20–22)
-.fl-node-vo75i29j3fmz.c-accordion {
+.fl-node-vo75i29j3fmz {
@extend .c-accordion;
}🤖 Prompt for AI Agents
In themes/beaver/assets/css/components/c-accordion.scss around lines 20–22, the
selector ".fl-node-vo75i29j3fmz.c-accordion" is too specific and prevents
.c-accordion rules from being applied; replace the combined selector with the
bare FL node selector (i.e. use ".fl-node-vo75i29j3fmz" and keep the @extend
.c-accordion) so the component styles are applied, or delete this rule entirely
if it is not used anywhere.
| .fl-node-header-nav-contact-us-btn.c-contact-section { | ||
| @extend .c-contact-section; | ||
| } | ||
|
|
||
| .fl-node-header-nav-contat-us-btn-nested.c-contact-section { | ||
| @extend .c-contact-section; | ||
| } No newline at end of file |
There was a problem hiding this comment.
Fix @extend selectors; remove redundant .c-contact-section in the extender.
As written, the element already has .c-contact-section; @extend becomes a no-op and prevents styling of legacy-only FL nodes. Extend from the FL node selector alone.
-.fl-node-header-nav-contact-us-btn.c-contact-section {
- @extend .c-contact-section;
-}
-
-.fl-node-header-nav-contat-us-btn-nested.c-contact-section {
- @extend .c-contact-section;
-}
+.fl-node-header-nav-contact-us-btn { @extend .c-contact-section; }
+.fl-node-header-nav-contact-us-btn-nested { @extend .c-contact-section; }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .fl-node-header-nav-contact-us-btn.c-contact-section { | |
| @extend .c-contact-section; | |
| } | |
| .fl-node-header-nav-contat-us-btn-nested.c-contact-section { | |
| @extend .c-contact-section; | |
| } | |
| .fl-node-header-nav-contact-us-btn { @extend .c-contact-section; } | |
| .fl-node-header-nav-contact-us-btn-nested { @extend .c-contact-section; } |
🤖 Prompt for AI Agents
In themes/beaver/assets/css/components/c-contact-section.scss around lines 18 to
24, the @extend rules currently repeat the .c-contact-section class which makes
the extend a no-op; change each rule to extend the FL node selector only (e.g.
have the .fl-node-header-nav-contact-us-btn and
.fl-node-header-nav-contat-us-btn-nested rules use @extend on their respective
.fl-node-* selectors rather than @extend .c-contact-section) so legacy FL-only
nodes receive the shared .c-contact-section styles.
| @extend .c-contact-section; | ||
| } | ||
|
|
||
| .fl-node-header-nav-contat-us-btn-nested.c-contact-section { |
There was a problem hiding this comment.
Typo in selector: contat → contact.
Fix to avoid dead rule.
-.fl-node-header-nav-contat-us-btn-nested { @extend .c-contact-section; }
+.fl-node-header-nav-contact-us-btn-nested { @extend .c-contact-section; }Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In themes/beaver/assets/css/components/c-contact-section.scss around line 22,
the selector contains a typo
".fl-node-header-nav-contat-us-btn-nested.c-contact-section" where "contat"
should be "contact"; update the selector to
".fl-node-header-nav-contact-us-btn-nested.c-contact-section" so the rule
matches and is not dead.
| .fl-node-2div407rylu5.c-team-member { | ||
| @extend .c-team-member; | ||
| } | ||
|
|
||
| .fl-node-el3fhm25cy0g.c-team-member { | ||
| @extend .c-team-member; | ||
| } | ||
|
|
||
| .fl-node-mvlu0rkbgc18.c-team-member, | ||
| .fl-node-pqwe8j7o3l6z.c-team-member { | ||
| @extend .c-team-member; | ||
| } No newline at end of file |
There was a problem hiding this comment.
Fix @extend selectors (remove .c-team-member).
-.fl-node-2div407rylu5.c-team-member { @extend .c-team-member; }
-.fl-node-el3fhm25cy0g.c-team-member { @extend .c-team-member; }
-.fl-node-mvlu0rkbgc18.c-team-member,
-.fl-node-pqwe8j7o3l6z.c-team-member { @extend .c-team-member; }
+.fl-node-2div407rylu5 { @extend .c-team-member; }
+.fl-node-el3fhm25cy0g { @extend .c-team-member; }
+.fl-node-mvlu0rkbgc18,
+.fl-node-pqwe8j7o3l6z { @extend .c-team-member; }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .fl-node-2div407rylu5.c-team-member { | |
| @extend .c-team-member; | |
| } | |
| .fl-node-el3fhm25cy0g.c-team-member { | |
| @extend .c-team-member; | |
| } | |
| .fl-node-mvlu0rkbgc18.c-team-member, | |
| .fl-node-pqwe8j7o3l6z.c-team-member { | |
| @extend .c-team-member; | |
| } | |
| .fl-node-2div407rylu5 { | |
| @extend .c-team-member; | |
| } | |
| .fl-node-el3fhm25cy0g { | |
| @extend .c-team-member; | |
| } | |
| .fl-node-mvlu0rkbgc18, | |
| .fl-node-pqwe8j7o3l6z { | |
| @extend .c-team-member; | |
| } |
🤖 Prompt for AI Agents
In themes/beaver/assets/css/components/c-team-member.scss around lines 18 to 29,
the @extend usages currently refer to the full selector including
`.c-team-member` (e.g. `@extend .c-team-member;`) which is incorrect; update
each @extend to reference the placeholder/placeholder selector alone (remove
`.c-team-member` so it extends the proper placeholder or base selector name
expected by the project), e.g. replace `@extend .c-team-member;` with `@extend
<base-selector-or-placeholder>;` for each fl-node block so the extend targets
the correct selector without duplicating `.c-team-member`.
| .fl-node-08kl1yzxeout.c-testimonial-slider { | ||
| @extend .c-testimonial-slider; | ||
| } | ||
|
|
||
| .fl-node-cbhworulayqn.c-testimonial-slider { | ||
| @extend .c-testimonial-slider; | ||
| } | ||
|
|
||
| .fl-node-d09l8jp3qrgf.c-testimonial-slider, | ||
| .fl-node-7d9wg1x8ua5m.c-testimonial-slider { | ||
| @extend .c-testimonial-slider; | ||
| } No newline at end of file |
There was a problem hiding this comment.
Fix @extend selectors to target legacy nodes only.
Same pattern: remove .c-testimonial-slider from extenders.
-.fl-node-08kl1yzxeout.c-testimonial-slider { @extend .c-testimonial-slider; }
-.fl-node-cbhworulayqn.c-testimonial-slider { @extend .c-testimonial-slider; }
-.fl-node-d09l8jp3qrgf.c-testimonial-slider,
-.fl-node-7d9wg1x8ua5m.c-testimonial-slider { @extend .c-testimonial-slider; }
+.fl-node-08kl1yzxeout { @extend .c-testimonial-slider; }
+.fl-node-cbhworulayqn { @extend .c-testimonial-slider; }
+.fl-node-d09l8jp3qrgf,
+.fl-node-7d9wg1x8ua5m { @extend .c-testimonial-slider; }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .fl-node-08kl1yzxeout.c-testimonial-slider { | |
| @extend .c-testimonial-slider; | |
| } | |
| .fl-node-cbhworulayqn.c-testimonial-slider { | |
| @extend .c-testimonial-slider; | |
| } | |
| .fl-node-d09l8jp3qrgf.c-testimonial-slider, | |
| .fl-node-7d9wg1x8ua5m.c-testimonial-slider { | |
| @extend .c-testimonial-slider; | |
| } | |
| .fl-node-08kl1yzxeout { | |
| @extend .c-testimonial-slider; | |
| } | |
| .fl-node-cbhworulayqn { | |
| @extend .c-testimonial-slider; | |
| } | |
| .fl-node-d09l8jp3qrgf, | |
| .fl-node-7d9wg1x8ua5m { | |
| @extend .c-testimonial-slider; | |
| } |
🤖 Prompt for AI Agents
themes/beaver/assets/css/components/c-testimonial-slider.scss lines 18-29: the
@extend rules currently include both the legacy fl-node-... classes and the
.c-testimonial-slider selector, which causes the extension to target the modern
component too; update each @extend to reference only the legacy fl-node-*
selectors (remove ".c-testimonial-slider" from the extender lists) so the
mixin/placeholder is applied solely to legacy nodes.
| background-color: var(--jt-white); | ||
| background-size: cover; | ||
| background-repeat: no-repeat; | ||
| } |
There was a problem hiding this comment.
Provide hex fallbacks for CSS vars (mobile compatibility).
Ensure colors render when CSS variables are unavailable.
-.c-form--contact {
- background-color: var(--jt-white);
+.c-form--contact {
+ background-color: var(--jt-white, #ffffff);
@@
-.c-form__label {
- color: var(--jt-dark);
+.c-form__label {
+ color: var(--jt-dark, #121212);Also applies to: 33-35
🤖 Prompt for AI Agents
In themes/beaver/assets/css/components/forms-migration.css around lines 10-13
(and similarly for lines 33-35), the declarations use CSS variables without
fallbacks; add explicit hex color fallbacks before each var(...) usage so
browsers without CSS variable support still render expected colors (e.g. add
background-color: #ffffff; immediately before background-color: var(--jt-white);
and apply the same pattern for any other color properties on lines 33-35).
| .c-layout *, | ||
| .c-layout *:before, | ||
| .c-layout *:after { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
There was a problem hiding this comment.
Include root .c-layout in box-sizing reset.
Root container currently omitted; add it so children inherit correctly.
+ .c-layout {
+ box-sizing: border-box;
+ }
.c-layout *,
.c-layout *:before,
.c-layout *:after {
box-sizing: border-box;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .c-layout *, | |
| .c-layout *:before, | |
| .c-layout *:after { | |
| box-sizing: border-box; | |
| } | |
| .c-layout { | |
| box-sizing: border-box; | |
| } | |
| .c-layout *, | |
| .c-layout *:before, | |
| .c-layout *:after { | |
| box-sizing: border-box; | |
| } |
🤖 Prompt for AI Agents
themes/beaver/assets/css/components/layout-foundation.css around lines 5 to 10:
the box-sizing reset currently targets children only (.c-layout *, .c-layout
*:before, .c-layout *:after) and omits the root container; include the root
selector so the rule applies to .c-layout itself by adding .c-layout to the
selector list (i.e., make the selector .c-layout, .c-layout *, .c-layout
*:before, .c-layout *:after) so the root inherits the same box-sizing reset.
| /* Responsive Visibility Utilities */ | ||
| .c-visible-large, | ||
| .c-visible-medium, | ||
| .c-visible-mobile { display: none; } | ||
|
|
||
| .c-visible-desktop { display: block; } | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
Responsive visibility classes need breakpoint rules.
As written, “mobile/medium/large” are always hidden and “desktop” is always shown. Add media queries to flip states per breakpoint.
Proposed minimal mobile/desktop behavior (confirm breakpoints before merging):
/* Responsive Visibility Utilities */
-.c-visible-large,
-.c-visible-medium,
-.c-visible-mobile { display: none; }
-
-.c-visible-desktop { display: block; }
+.c-visible-large,
+.c-visible-medium,
+.c-visible-mobile { display: none; }
+.c-visible-desktop { display: block; }
+
+/* Mobile first: show on mobile, hide desktop */
+@media (max-width: 860px) {
+ .c-visible-mobile { display: block; }
+ .c-visible-desktop { display: none; }
+}
+
+/* TODO: add agreed breakpoints for medium/large visibility */To validate current usage and decide breakpoints, run:
🏁 Script executed:
#!/bin/bash
# Find where these classes are used to align breakpoints.
rg -nC2 -g '!**/node_modules/**' -e '\.c-visible-(desktop|mobile|medium|large)\b'Length of output: 148
🏁 Script executed:
#!/bin/bash
set -euo pipefail
pattern='\.c-visible-(desktop|mobile|medium|large)\b'
echo "PWD: $(pwd)"
echo "Top-level entries:"
ls -la | sed -n '1,120p'
echo
echo "rg version (if available):"
if command -v rg >/dev/null 2>&1; then
rg --version | head -n1 || true
else
echo "rg not found"
fi
echo
echo "1) rg --debug (why files might be skipped):"
rg --debug -n -S -e "$pattern" . || true
echo
echo "2) rg including hidden/unrestricted files (recommended):"
rg --hidden -uu -nC2 -S -e "$pattern" . || true
echo
echo "3) Search tracked files via git (if repo present):"
if command -v git >/dev/null 2>&1; then
git ls-files | rg -n -e "$pattern" || true
else
echo "git not available"
fi
echo
echo "4) Show the referenced file (if present): themes/beaver/assets/css/utilities.css"
if [ -f "themes/beaver/assets/css/utilities.css" ]; then
echo "---- BEGIN FILE: themes/beaver/assets/css/utilities.css ----"
sed -n '1,240p' themes/beaver/assets/css/utilities.css
echo "---- END FILE ----"
else
echo "File not found: themes/beaver/assets/css/utilities.css"
fi
echo
echo "5) Fallback: search all .css files explicitly"
find . -type f -name '*.css' -print0 | xargs -0 rg -nC2 -e "$pattern" || true
echo
echo "Script finished"Length of output: 19768
Add breakpoint media queries and consolidate duplicate visibility rules
.c-visible-mobile/.c-visible-medium/.c-visible-large are always hidden and .c-visible-desktop always shown; the same rules are duplicated. Add mobile-first media queries using the project breakpoints and consolidate into a single source-of-truth.
- Locations: themes/beaver/assets/css/utilities.css (lines 35–39) and themes/beaver/assets/css/components/layout-foundation.css (lines 35–43).
- Action: add media queries (example: @media (max-width: 860px) { .c-visible-mobile {display:block} .c-visible-desktop {display:none} }), or replace with the agreed breakpoints; remove the duplicate definition so only one file defines these utilities.
🤖 Prompt for AI Agents
In themes/beaver/assets/css/utilities.css around lines 34 to 40, the visibility
utilities currently set mobile/medium/large always hidden and desktop always
shown and are duplicated in
themes/beaver/assets/css/components/layout-foundation.css (lines ~35–43);
replace this with a single mobile-first set of media queries using the project
breakpoints (e.g. base: .c-visible-mobile {display:block}
.c-visible-desktop{display:none}, then @media (min-width: 861px) {
.c-visible-medium{display:block} .c-visible-mobile{display:none} } and @media
(min-width: <desktop-breakpoint>) { .c-visible-large{display:block}
.c-visible-medium{display:none} .c-visible-desktop{display:block} }),
consolidate into utilities.css as the single source-of-truth, and remove the
duplicate rules from layout-foundation.css so only utilities.css defines these
classes.
- Safe 1-line addition to BEM utility classes - No visual changes - utility class added for future use - Tests pass: bin/rake test:critical ✓ - Rollback: git revert HEAD if needed
- Safe 1-line addition of margin auto utility - Total changes: 2 utility classes added safely - No visual changes - utilities for future use - Tests pass: bin/rake test:critical ✓ - Rollback: git revert HEAD if needed
- Ultra-safe 3-line addition of CSS variable foundation - No visual changes - variable for future design system - Establishes basis for maintainable color system - Tests pass: bin/rake test:critical ✓ - Rollback: git revert HEAD if needed
- Add cards-migration.css foundation - Update navigation-migration.css with mobile fixes - Ready for Phase 2 conservative InfoBox pattern refactoring - All 23 tests passing, screenshots validated 🤖 Generated with Claude Code Co-Authored-By: Claude <[email protected]>
✅ SAFE: Add --infobox-spacing: 15px CSS custom property ✅ TESTS: All 23 tests passing, 0 failures ✅ RISK: Zero visual impact, maintains 100% compatibility 🤖 Generated with Claude Code Co-Authored-By: Claude <[email protected]>
✅ SAFE: Add --infobox-margin: 25px CSS custom property ✅ TESTS: All 23 tests passing, 0 failures ✅ RISK: Zero visual impact, maintains 100% compatibility 🤖 Generated with Claude Code Co-Authored-By: Claude <[email protected]>
…elector - Added .c-feature-card__title-prefix alongside existing PowerPack selector - Maintains FL-Builder compatibility with dual-class strategy - ≤3 lines change following ultra-conservative methodology - All screenshot tests pass (23 runs, 33 assertions, 0 failures) - Ready for mobile CSS variable compatibility testing Migration Progress: 3/∞ micro-changes completed Checkpoint: Preparing for mobile compatibility validation Rollback: git revert HEAD if needed
…acks - Added mobile-specific CSS custom property overrides in @media (max-width: 860px) - Reduced spacing values for mobile: --infobox-spacing: 12px, --infobox-margin: 20px - Direct values ensure mobile compatibility without CSS variable support issues - ≤3 lines change following ultra-conservative methodology - All screenshot tests pass (23 runs, 33 assertions, 0 failures) Migration Progress: 4/∞ micro-changes completed Mobile Compatibility: CSS variables tested with mobile fallbacks Rollback: git revert HEAD if needed
pftg
force-pushed
the
refact-components
branch
from
5b27dc8 to
4b993e6
Compare
pftg
force-pushed
the
refact-components
branch
from
4b993e6 to
036ef92
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
docs/css-migration-strategic-analysis.md(1 hunks)themes/beaver/assets/css/bem-home-page-minimal.css(5 hunks)themes/beaver/assets/css/components/buttons-migration.css(1 hunks)themes/beaver/assets/css/components/c-accordion.scss(1 hunks)themes/beaver/assets/css/components/c-contact-section.scss(1 hunks)themes/beaver/assets/css/components/c-footer.scss(1 hunks)themes/beaver/assets/css/components/c-hero.scss(1 hunks)themes/beaver/assets/css/components/c-modal.scss(1 hunks)themes/beaver/assets/css/components/c-service-grid.scss(1 hunks)themes/beaver/assets/css/components/c-team-member.scss(1 hunks)themes/beaver/assets/css/components/c-testimonial-slider.scss(1 hunks)themes/beaver/assets/css/components/cards-migration.css(1 hunks)themes/beaver/assets/css/components/forms-migration.css(1 hunks)themes/beaver/assets/css/components/layout-columns.css(1 hunks)themes/beaver/assets/css/components/layout-foundation.css(1 hunks)themes/beaver/assets/css/components/layout-rows.css(1 hunks)themes/beaver/assets/css/components/navigation-migration.css(1 hunks)themes/beaver/assets/css/utilities.css(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (10)
- themes/beaver/assets/css/components/c-service-grid.scss
- themes/beaver/assets/css/utilities.css
- themes/beaver/assets/css/components/c-contact-section.scss
- themes/beaver/assets/css/components/c-team-member.scss
- themes/beaver/assets/css/components/c-footer.scss
- themes/beaver/assets/css/components/layout-columns.css
- themes/beaver/assets/css/components/forms-migration.css
- themes/beaver/assets/css/bem-home-page-minimal.css
- themes/beaver/assets/css/components/layout-rows.css
- themes/beaver/assets/css/components/c-testimonial-slider.scss
🧰 Additional context used
📓 Path-based instructions (1)
themes/**/assets/**/*.{css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
CSS/SCSS should follow project performance and responsiveness practices; mobile @media queries must avoid problematic CSS variable rendering (use direct hex if needed)
Files:
themes/beaver/assets/css/components/c-modal.scssthemes/beaver/assets/css/components/navigation-migration.cssthemes/beaver/assets/css/components/cards-migration.cssthemes/beaver/assets/css/components/layout-foundation.cssthemes/beaver/assets/css/components/c-accordion.scssthemes/beaver/assets/css/components/buttons-migration.cssthemes/beaver/assets/css/components/c-hero.scss
🧠 Learnings (2)
📚 Learning: 2024-11-08T06:11:04.017Z
Learnt from: AucT
PR: jetthoughts/jetthoughts.github.io#200
File: themes/beaver/assets/css/use-cases-dynamic.css:117-134
Timestamp: 2024-11-08T06:11:04.017Z
Learning: In `themes/beaver/assets/css/use-cases-dynamic.css`, duplicate declarations of `.use-cases .tab-panel .item` are acceptable and should not be flagged.
Applied to files:
themes/beaver/assets/css/components/c-accordion.scss
📚 Learning: 2024-11-08T06:11:26.144Z
Learnt from: AucT
PR: jetthoughts/jetthoughts.github.io#200
File: themes/beaver/assets/js/tabs.js:17-46
Timestamp: 2024-11-08T06:11:26.144Z
Learning: For the file `themes/beaver/assets/js/tabs.js`, avoid suggesting improvements to keyboard navigation implementation or adding ARIA roles and attributes unless requested.
Applied to files:
themes/beaver/assets/css/components/buttons-migration.css
🧬 Code graph analysis (1)
themes/beaver/assets/css/components/navigation-migration.css (1)
themes/beaver/assets/js/navigation.js (1)
document(1-27)
🪛 markdownlint-cli2 (0.18.1)
docs/css-migration-strategic-analysis.md
3-3: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build_and_deploy / build
🔇 Additional comments (6)
themes/beaver/assets/css/components/c-modal.scss (1)
29-31: Fix FL-Builder backfill selectorKeeping
.c-modalin the selector means FL nodes without the new class never receive the modal styles, so the migration fails. Drop the extra class so the legacy node picks up.c-modalvia@extend.-.fl-node-ncg61wov0ytq.c-modal { +.fl-node-ncg61wov0ytq { @extend .c-modal; }themes/beaver/assets/css/components/c-accordion.scss (1)
20-22: Remove the combined selector for the FL nodeWith
@extend,.fl-node-vo75i29j3fmz.c-accordiononly matches nodes that already have both classes, so legacy FL markup (.fl-node-vo75i29j3fmzwithout.c-accordion) never picks up the migrated styles. Drop.c-accordionfrom the selector so the compatibility bridge actually works.-.fl-node-vo75i29j3fmz.c-accordion { +.fl-node-vo75i29j3fmz { @extend .c-accordion; }themes/beaver/assets/css/components/c-hero.scss (1)
19-30: Fix dual-class mismatch so @extend actually appliesThe markup for
fwc7x53r0dpl,bi013pcl2qtv, andpifywec9vd5mnodes doesn’t include.c-hero, so these selectors never match and the hero styling never lands on those blocks. Drop the.c-herorequirement (or add the class in the markup) so the migration works.Here’s the selector-only fix:
-.fl-node-dn129i74qg6m.c-hero { +.fl-node-dn129i74qg6m { @extend .c-hero; } -.fl-node-fwc7x53r0dpl.c-hero { +.fl-node-fwc7x53r0dpl { @extend .c-hero; } -.fl-node-bi013pcl2qtv.c-hero, -.fl-node-pifywec9vd5m.c-hero { +.fl-node-bi013pcl2qtv, +.fl-node-pifywec9vd5m { @extend .c-hero; }themes/beaver/assets/css/components/layout-foundation.css (1)
5-9: Include.c-layoutroot in the box-sizing reset.The container itself is still
content-box, so padding/border math will differ from its children. Add.c-layoutto the selector list so the root inherits the reset.- .c-layout *, + .c-layout, + .c-layout *,themes/beaver/assets/css/components/buttons-migration.css (1)
24-43: Restore targeted transitions and motion/focus accessibilityReintroduce the a11y/perf protections we discussed earlier: drop
transition: all, add aprefers-reduced-motionoverride, and expose:focus-visibleso keyboard users actually see the focus ring.Apply this diff to address the gaps:
- transition: all 0.3s ease; - -webkit-transition: all 0.3s ease; - -moz-transition: all 0.3s ease; + transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; @@ -.fl-builder-content a.fl-button:focus, -.c-button:focus { +.fl-builder-content a.fl-button:focus, +.fl-builder-content a.fl-button:focus-visible, +.c-button:focus, +.c-button:focus-visible { outline: 2px solid var(--color-focus, #4a90e2); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3); } + +@media (prefers-reduced-motion: reduce) { + .fl-builder-content a.fl-button, + .fl-builder-content a.fl-button:visited, + .c-button { + transition: none; + transform: none; + } +}themes/beaver/assets/css/components/cards-migration.css (1)
3-21: Phase 0 scaffolding matches established migration pattern.Selectors mirror the dual-class approach used elsewhere, leaving room for incremental styling without side effects. No issues found.
| @@ -0,0 +1,308 @@ | |||
| # CSS Migration Strategic Analysis & Risk Assessment | |||
|
|
|||
| *CSS Analyst & Strategist Report - September 22, 2025* | |||
There was a problem hiding this comment.
Fix markdownlint MD036 warning
Convert the emphasized line to a proper heading to satisfy markdownlint.
Apply this diff:
-*CSS Analyst & Strategist Report - September 22, 2025*
+## CSS Analyst & Strategist Report — September 22, 2025📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| *CSS Analyst & Strategist Report - September 22, 2025* | |
| ## CSS Analyst & Strategist Report — September 22, 2025 |
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
3-3: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
🤖 Prompt for AI Agents
In docs/css-migration-strategic-analysis.md around line 3, the emphasized line
"*CSS Analyst & Strategist Report - September 22, 2025*" should be converted
from italic/emphasis to a proper Markdown heading to resolve markdownlint MD036;
replace the asterisks with a heading marker (e.g., prefix with one or more # as
appropriate for document structure) and ensure there is a blank line after the
heading.
| .navigation, | ||
| .c-nav { | ||
| /* Base navigation container styles */ | ||
| @media (max-width: 1024px) { | ||
| position: fixed; | ||
| background-color: #ffffff; /* var(--jt-white) mobile fix */ | ||
| } | ||
| } | ||
|
|
||
| .navigation .nav, | ||
| .c-nav__list { | ||
| /* Navigation list base styles */ | ||
| @media (max-width: 1024px) { | ||
| flex-direction: column; | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| .navigation .nav li, | ||
| .c-nav__item { | ||
| /* Navigation item base styles */ | ||
| } | ||
|
|
||
| .navigation .nav .link, | ||
| .c-nav__link { | ||
| /* Navigation link base styles */ | ||
| @media (max-width: 1024px) { | ||
| color: #121212; /* var(--jt-text-primary) mobile fix */ | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| .menu-opener, | ||
| .c-nav__toggle { | ||
| /* Mobile menu toggle styles */ | ||
| @media (max-width: 1024px) { | ||
| border-color: #121212; /* var(--jt-text-primary) mobile fix */ | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| .menu-opener:before, | ||
| .c-nav__toggle:before { | ||
| /* Mobile toggle hamburger line */ | ||
| @media (max-width: 1024px) { | ||
| background-color: #121212; /* var(--jt-text-primary) mobile fix */ | ||
| } |
There was a problem hiding this comment.
Unnest the @media rules (invalid CSS currently)
The nested @media directives are valid in SCSS but not in plain CSS, so every mobile override here is being dropped. Restructure the media query at the root level so the styles actually apply.
Apply this diff:
-.navigation,
-.c-nav {
- /* Base navigation container styles */
- @media (max-width: 1024px) {
- position: fixed;
- background-color: #ffffff; /* var(--jt-white) mobile fix */
- }
-}
-
-.navigation .nav,
-.c-nav__list {
- /* Navigation list base styles */
- @media (max-width: 1024px) {
- flex-direction: column;
- width: 100%;
- }
-}
+ .navigation,
+.c-nav {
+ /* Base navigation container styles */
+}
+
+.navigation .nav,
+.c-nav__list {
+ /* Navigation list base styles */
+}
@@
-.navigation .nav .link,
-.c-nav__link {
- /* Navigation link base styles */
- @media (max-width: 1024px) {
- color: #121212; /* var(--jt-text-primary) mobile fix */
- display: block;
- }
-}
-
-.menu-opener,
-.c-nav__toggle {
- /* Mobile menu toggle styles */
- @media (max-width: 1024px) {
- border-color: #121212; /* var(--jt-text-primary) mobile fix */
- display: block;
- }
-}
-
-.menu-opener:before,
-.c-nav__toggle:before {
- /* Mobile toggle hamburger line */
- @media (max-width: 1024px) {
- background-color: #121212; /* var(--jt-text-primary) mobile fix */
- }
-}
+.navigation .nav .link,
+.c-nav__link {
+ /* Navigation link base styles */
+}
+
+.menu-opener,
+.c-nav__toggle {
+ /* Mobile menu toggle styles */
+}
+
+.menu-opener:before,
+.c-nav__toggle:before {
+ /* Mobile toggle hamburger line */
+}
+
+@media (max-width: 1024px) {
+ .navigation,
+ .c-nav {
+ position: fixed;
+ background-color: #ffffff; /* var(--jt-white) mobile fix */
+ }
+
+ .navigation .nav,
+ .c-nav__list {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .navigation .nav .link,
+ .c-nav__link {
+ color: #121212; /* var(--jt-text-primary) mobile fix */
+ display: block;
+ }
+
+ .menu-opener,
+ .c-nav__toggle {
+ border-color: #121212; /* var(--jt-text-primary) mobile fix */
+ display: block;
+ }
+
+ .menu-opener:before,
+ .c-nav__toggle:before {
+ background-color: #121212; /* var(--jt-text-primary) mobile fix */
+ }
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .navigation, | |
| .c-nav { | |
| /* Base navigation container styles */ | |
| @media (max-width: 1024px) { | |
| position: fixed; | |
| background-color: #ffffff; /* var(--jt-white) mobile fix */ | |
| } | |
| } | |
| .navigation .nav, | |
| .c-nav__list { | |
| /* Navigation list base styles */ | |
| @media (max-width: 1024px) { | |
| flex-direction: column; | |
| width: 100%; | |
| } | |
| } | |
| .navigation .nav li, | |
| .c-nav__item { | |
| /* Navigation item base styles */ | |
| } | |
| .navigation .nav .link, | |
| .c-nav__link { | |
| /* Navigation link base styles */ | |
| @media (max-width: 1024px) { | |
| color: #121212; /* var(--jt-text-primary) mobile fix */ | |
| display: block; | |
| } | |
| } | |
| .menu-opener, | |
| .c-nav__toggle { | |
| /* Mobile menu toggle styles */ | |
| @media (max-width: 1024px) { | |
| border-color: #121212; /* var(--jt-text-primary) mobile fix */ | |
| display: block; | |
| } | |
| } | |
| .menu-opener:before, | |
| .c-nav__toggle:before { | |
| /* Mobile toggle hamburger line */ | |
| @media (max-width: 1024px) { | |
| background-color: #121212; /* var(--jt-text-primary) mobile fix */ | |
| } | |
| .navigation, | |
| .c-nav { | |
| /* Base navigation container styles */ | |
| } | |
| .navigation .nav, | |
| .c-nav__list { | |
| /* Navigation list base styles */ | |
| } | |
| .navigation .nav .link, | |
| .c-nav__link { | |
| /* Navigation link base styles */ | |
| } | |
| .menu-opener, | |
| .c-nav__toggle { | |
| /* Mobile menu toggle styles */ | |
| } | |
| .menu-opener:before, | |
| .c-nav__toggle:before { | |
| /* Mobile toggle hamburger line */ | |
| } | |
| @media (max-width: 1024px) { | |
| .navigation, | |
| .c-nav { | |
| position: fixed; | |
| background-color: #ffffff; /* var(--jt-white) mobile fix */ | |
| } | |
| .navigation .nav, | |
| .c-nav__list { | |
| flex-direction: column; | |
| width: 100%; | |
| } | |
| .navigation .nav .link, | |
| .c-nav__link { | |
| color: #121212; /* var(--jt-text-primary) mobile fix */ | |
| display: block; | |
| } | |
| .menu-opener, | |
| .c-nav__toggle { | |
| border-color: #121212; /* var(--jt-text-primary) mobile fix */ | |
| display: block; | |
| } | |
| .menu-opener:before, | |
| .c-nav__toggle:before { | |
| background-color: #121212; /* var(--jt-text-primary) mobile fix */ | |
| } | |
| } |
🤖 Prompt for AI Agents
In themes/beaver/assets/css/components/navigation-migration.css around lines 3
to 49, the CSS contains nested @media rules (SCSS-style) which are invalid in
plain CSS; extract each nested block into a single root-level @media (max-width:
1024px) { ... } wrapper and move the contained declarations there. Concretely,
create a top-level @media (max-width: 1024px) block that includes the selectors
.navigation, .c-nav { position: fixed; background-color: #ffffff; }, .navigation
.nav, .c-nav__list { flex-direction: column; width: 100%; }, .navigation .nav
.link, .c-nav__link { color: #121212; display: block; }, .menu-opener,
.c-nav__toggle { border-color: #121212; display: block; } and
.menu-opener:before, .c-nav__toggle:before { background-color: #121212; }
ensuring all braces and commas are correct and removing the nested @media blocks
from the original selector rules.
Summary by CodeRabbit