fix: grid breakpoints from px -> rem, update variables #106

[airikej]

Summary by CodeRabbit

• New Features

  • Added active state styling for primary and secondary filter components across all themes.

• Improvements

  • Converted responsive breakpoints to rem-based units for improved accessibility and consistency.
  • Enhanced error handling with detailed HTTP status and response information.
  • Improved alpha channel precision in color conversion logic.

[coderabbitai]

Warning

Rate limit exceeded

@airikej has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 46 minutes and 26 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7d4addf3-a82b-403b-958f-4900473e53d3

📥 Commits

Reviewing files that changed from the base of the PR and between 52f341d and 57fce44.

📒 Files selected for processing (1)

• scripts/variable-exporter.ts

📝 Walkthrough

Walkthrough

This PR updates the design system with improved Figma variable export error handling and alpha rounding, migrates responsive breakpoints from pixel to rem units across Sass configurations, and introduces filter component active state theme variables for both default and dark themes.

Changes

Core System Updates

Layer / File(s)	Summary
Figma variable export script improvements scripts/variable-exporter.ts	Enhanced API error reporting now includes status, status text, and response body. RGBA alpha values are quantized to 4 decimal places; alpha === 1 renders as rgb(...), otherwise as rgba(...) with the rounded alpha.
Responsive breakpoint unit migration to rem src/_mixins.scss, src/variables/_bootstrap-variables.scss	Both $breakpoints and $grid-breakpoints Sass maps updated from px values (576px, 768px, 992px, 1200px, 1400px) to rem equivalents (36rem, 48rem, 62rem, 75rem, 87.5rem) for scalable responsive design.
Filter component active state theme variables src/variables/themes/default/color-variables__dark.scss, src/variables/themes/default/color-variables__default.scss	Added --filter-primary-active-* and --filter-secondary-active-* CSS variables (background, border, text) to both default and dark themes, wired to existing button active state color tokens.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related issues

• TEDI-Design-System/core#106: Directly related breakpoint unit migration from px to rem in the same Sass variable map.

Possibly related PRs

• TEDI-Design-System/core#103: Breakpoint token changes in this PR affect the breakpoint helper functions consumed by the retrieved PR's responsive media query generation.

Suggested reviewers

• mart-sessman
• ly-tempel-bitweb

Poem

🐰 With whiskers twitching, a script now speaks,

When Figma fails, the error's complete,

Breakpoints dance in rem so neat,

Filters shine with active states sleek,

The design system hops to the beat! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 accurately summarizes the main changes: converting grid breakpoints from px to rem units and updating related variables across multiple files.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/106-change-grid-breakpoints-from-px-to-rem-for-accessibility

---

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 and usage tips.}

[coderabbitai]

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 `@scripts/variable-exporter.ts`:
- Around line 130-131: The branch currently compares the rounded value `alpha =
Number(a.toFixed(4))` to 1, which can coerce near-1 transparencies to
`rgb(...)`; change the branch to use the original `a` for the equality check
(e.g., test `a === 1`) while keeping `alpha` (the rounded value) for the `rgba`
output so `rr`, `gg`, `bb` stay the same but transparency is preserved
correctly.

🪄 Autofix (Beta)

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: defaults

Review profile: CHILL

Plan: Pro

Run ID: ec67aa4c-7057-4167-9074-b5c08fce1a2f

📥 Commits

Reviewing files that changed from the base of the PR and between e37ba06 and 52f341d.

📒 Files selected for processing (5)

• scripts/variable-exporter.ts
• src/_mixins.scss
• src/variables/_bootstrap-variables.scss
• src/variables/themes/default/color-variables__dark.scss
• src/variables/themes/default/color-variables__default.scss