fix: theme integration

[ivan-dalmet]

WIP fix issues of theming

Summary by CodeRabbit

• Style
  • Updated language picker interface styling with enhanced visual hierarchy for active language indicators, improved icon color application, and refined secondary language label appearance
  • Enhanced theme switcher component with refined icon styling for improved visual consistency across the user interface

[coderabbitai]

Walkthrough

Both UI switcher components receive styling updates to their CheckIcon elements. The local-switcher also adjusts secondary label styling from muted-foreground to opacity-60. No functional or behavioral changes; updates are purely presentational.

Changes

Cohort / File(s)	Summary
UI Component Styling Updates src/components/ui/local-switcher.tsx, src/components/ui/theme-switcher.tsx	Added text-current Tailwind class to CheckIcon for explicit current text color inheritance. Local-switcher additionally changes secondary language label styling from muted-foreground to opacity-60.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'fix: theme integration' is vague and does not clearly communicate the specific changes made. The PR actually contains styling updates to UI components (CheckIcon styling in language and theme switchers) with opacity/color adjustments, but the title is too generic and doesn't reflect these specific modifications.	Provide a more specific title that describes the actual styling changes, such as 'fix: update language and theme switcher icon styling' or 'fix: adjust CheckIcon and label styling in switchers'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/theme

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7b12d92 and c725a8b.

📒 Files selected for processing (2)

• src/components/ui/local-switcher.tsx (1 hunks)
• src/components/ui/theme-switcher.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

src/components/ui/local-switcher.tsx (1)

.storybook/preview.tsx (1)

• i18n (37-47)

src/components/ui/theme-switcher.tsx (1)

src/components/form/field-checkbox/docs.stories.tsx (1)

• props (137-157)

⏰ 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: Playwright E2E Tests

🔇 Additional comments (3)

src/components/ui/local-switcher.tsx (2)

40-45: LGTM! Improved color inheritance for CheckIcon.

Adding text-current ensures the CheckIcon properly inherits the text color from its parent element, which aligns with best practices for icon styling and improves theme integration. This change is consistent with the same update in theme-switcher.tsx.

---

48-54: Verify contrast ratios with opacity-60 across themes.

The change from muted-foreground to opacity-60 removes a semantic, theme-aware color in favor of a fixed opacity value. While this may fix theme integration issues, opacity-60 could create accessibility concerns if the base text color doesn't maintain sufficient contrast at 60% opacity across all themes (light, dark, system).

Consider verifying:

1. Contrast ratios meet WCAG AA standards (4.5:1 for normal text) in all theme modes
2. Whether muted-foreground can be fixed to work properly with themes instead of replacing it
3. If opacity-60 is the intended long-term solution or a temporary workaround

Since this is a WIP PR for theme integration, please ensure this change is thoroughly tested across all theme variants.

src/components/ui/theme-switcher.tsx (1)

69-74: LGTM! Consistent color inheritance improvement.

Adding text-current to the CheckIcon ensures proper color inheritance from parent elements, improving theme integration. This change is consistent with the identical update in local-switcher.tsx, maintaining styling consistency across both UI switcher components.

---

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.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud