Convert styles to use var(--color) correctly

[FyreByrd]

SAB/DAB output styles that set color to some variable, but omit the required CSS syntax (I assume there is a difference in how Android handles CSS variables...)

Before:

div.onboarding-top-text-subtitle {
    font-size: 80%;
    color: OnboardingSubtitleColor;
    text-align: center;
}

After:

div.onboarding-top-text-subtitle {
    font-size: 80%;
    color: var(--OnboardingSubtitleColor);
    text-align: center;
}

Summary by CodeRabbit

• Refactor
  • CSS color declarations are now automatically standardized to use CSS variables, ensuring consistent color application throughout the application.

[coderabbitai]

Warning

Rate limit exceeded

@FyreByrd has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 41 minutes and 20 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: fb84c845-d58c-4a64-b14a-278a7566d673

📥 Commits

Reviewing files that changed from the base of the PR and between 9593a64 and e96bf46.

📒 Files selected for processing (1)

• convert/convertStyles.ts

📝 Walkthrough

Walkthrough

convertStyles now transforms CSS color: declarations by rewriting values that end in Color to use CSS variable syntax (var(--<value>)), but only when not already in variable form. This normalization is applied during per-line CSS processing alongside existing font-path and layout selector conversions.

Changes

Color Value Transformation

Layer / File(s)	Summary
Color Value Rewrite Logic convert/convertStyles.ts	Per-line CSS processing adds a regex check: when a color: declaration value ends in Color and is not already using var(--var) syntax, it is rewritten to var(--<matchedValue>).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A color hops into the fold,
No more plain names, I'm told—
var(--brandColor) sounds so fine,
CSS variables in line!
Now every shade and tone align. ✨

🚥 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 directly matches the main change: converting color styles to use proper CSS var(--color) syntax instead of bare variable names.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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/style-vars

---

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 `@convert/convertStyles.ts`:
- Around line 105-107: The current regex and replace mutate any earlier
occurrence of the token and wrongly rewrite values like "currentColor"; update
the logic in convertStyles.ts to match and replace only the color property value
itself (not the whole line) by using a regex that captures the "color:"
declaration and the value (e.g.
/(color:\s*)(?!var\(--)(?!currentColor\b)([A-Za-z0-9_-]+Color\b)/i) and then
call line = line.replace(thatRegex, (_m, p1, p2) => `${p1}var(--${p2})`), so the
replacement is scoped to the matched declaration value and excludes
"currentColor" and values already using var(--...).

🪄 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: 7b35e9e0-a011-4dab-a085-236386a09bcc

📥 Commits

Reviewing files that changed from the base of the PR and between 81bc8b1 and 9593a64.

📒 Files selected for processing (1)

• convert/convertStyles.ts