fix: replace SCSS variables with CSS custom properties

[ramiy]

Summary by CodeRabbit

• Style
  • Standardized modal, callout, feedback, and theme sizing through shared CSS custom properties.
  • Preserved existing feedback colors and layout behavior while simplifying styling configuration.
  • Maintained existing repeater row, settings tab, and changelog icon appearance.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Advanced

Run ID: 09a73d54-3bde-496f-b792-283f74f02c92

📥 Commits

Reviewing files that changed from the base of the PR and between f27f718 and 0febf83.

📒 Files selected for processing (6)

• src/css/common/_demo.scss
• src/css/common/_theme.scss
• src/css/feedback.scss
• src/css/manage/blueprints/_form-fields.scss
• src/css/settings.scss
• src/css/welcome.scss

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.

---

Walkthrough

The SCSS stylesheets replace selected Sass variables, maps, and loops with CSS custom properties, literal values, and explicit selectors. Theme properties now support demo and feedback styles.

Changes

CSS style refactor

Layer / File(s)	Summary
Theme property migration src/css/common/_theme.scss, src/css/common/_demo.scss, src/css/feedback.scss	The theme adds modal size and inset properties. Demo and feedback styles use these properties or equivalent literal values instead of removed Sass variables.
Static selector and value expansion src/css/manage/blueprints/_form-fields.scss, src/css/settings.scss, src/css/welcome.scss	Form fields use a fixed background color. Settings tabs and changelog icon colors use explicit selectors instead of Sass calculations and loops.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Refactor

Suggested reviewers: lightbulbman, sheabunge

Merge Risk: ⚪ Minimal · up to 0febf

The stylesheet refactor preserves the existing visual and settings-tab behavior, with no actionable merge-blocking risk identified.

🚥 Pre-merge checks | ✅ 4 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Ponytail: No Over-Engineering	⚠️ Warning	The change adds needless repetition. src/css/settings.scss:91-100 replaces one @each loop with ten duplicated selector pairs. src/css/welcome.scss:191-217 replaces one icon map and loop with sev…	Restore the $sections and $icon-colors compile-time collections with their existing @each loops. Keep the CSS custom-property migration for the actual style values.
Pr Hygiene	⚠️ Warning	The title is a short conventional-commit summary. The PR body is missing. The review metadata contains no description, and the head commit has no message body. The commit has no AI-attribution trailer…	Add a short factual summary to the PR body. State what changed and omit author reasoning or narrative detail.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title uses the required conventional-commit format, describes the main SCSS-to-CSS custom property change, and is 54 characters long.
Correctness And Security	✅ Passed	PASS. The PR changes only CSS token and Sass-loop representations. The diff preserves all values and selectors: 320px, 1400px, 100001, 40px, 460px, #fafafa, settings tab names, and changelog icon colo…
Scope Discipline	✅ Passed	The PR stays within one concern: removing local Sass variables and replacing their uses with CSS custom properties or equivalent compiled CSS. The demo and feedback changes use theme properties in src…

Full details: Ponytail: No Over-Engineering

Explanation

The change adds needless repetition. src/css/settings.scss:91-100 replaces one @each loop with ten duplicated selector pairs. src/css/welcome.scss:191-217 replaces one icon map and loop with seven duplicated rules. The base revision already used the simpler abstractions, and the diff adds 11 and 26 lines for the same mappings.

Full details: Pr Hygiene

Explanation

The title is a short conventional-commit summary. The PR body is missing. The review metadata contains no description, and the head commit has no message body. The commit has no AI-attribution trailer. The changed files show no private, internal, or cross-repo disclosure.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch sass-css-migration/core

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch sass-css-migration/core

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}