fix: category text contrast in light mode

[Sbragul26]

Description

This PR fixes #7796 and improves the visibility of category filter labels on the Integrations page in Light Mode.

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Style
  • Updated selected integration and integration title text to use the theme’s white color for improved visual consistency.

[github-actions]

Preview deployment for PR #7797 removed.

This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[Bhumikagarggg]

@Sbragul26 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[Rajesh-Nagarajan-11]

Attach video & also add root cause please

[Bhumikagarggg]

@Sbragul26 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[Sbragul26]

Before	After
https://layer5.io/cloud-native-management/meshery/integrations	https://layer5.io/pr-preview/pr-7797/cloud-native-management/meshery/integrations

[KumarNirupam1]

Looks good to me. The previous use of whiteToBlack could lead to poor contrast in light mode because the selected chip uses a dark green background. Switching both the selected category text and integration title to theme.white provides consistent readability across themes. I tested the affected states and the change looks correct.
LGTM 👍

[KhushamBansal]

LGTM!!

[coderabbitai]

📝 Walkthrough

Walkthrough

This change updates text color properties in Integration.style.js. The .selected state and integration titles now use theme.white instead of theme.whiteToBlack for text color.

Changes

Text Color Fix

Layer / File(s)	Summary
Update text color values src/sections/Meshery/Meshery-integrations/Integration.style.js	The .selected state and integration title text color use theme.white instead of theme.whiteToBlack.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related issues

• 🐛 Bug Report: Active integration category chip has low text contrast in light mode #7891: This issue addresses the same text contrast problem for selected integration and category text in the Integrations page.

Possibly related PRs

• layer5io/layer5#7789: This PR fixes dark-mode text contrast issues in related style files.

Suggested labels: project/meshery

🚥 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 clearly describes the category text contrast fix in Light Mode.
Linked Issues check	✅ Passed	The color changes address issue #7796 by improving category filter label visibility in Light Mode.
Out of Scope Changes check	✅ Passed	The two color changes are limited to the Integrations page contrast issue described in issue #7796.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

---

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

[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 `@src/sections/Meshery/Meshery-integrations/Integration.style.js`:
- Line 107: Update the `.title` color declaration in the styled component to use
a theme color that provides WCAG 2.1 AA contrast against the hover background
`#00d3a9` in both themes, while preserving the existing hover styling.

🪄 Autofix

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 Plus

Run ID: 0d52a75e-77ce-4b05-87cb-f9c23a796d6f

📥 Commits

Reviewing files that changed from the base of the PR and between cbf1205 and cce2b84.

📒 Files selected for processing (1)

• src/sections/Meshery/Meshery-integrations/Integration.style.js

[coderabbitai]

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Restore WCAG-compliant contrast for .title.

When the card is hovered, Line 147 sets the background to #00d3a9. theme.white does not provide sufficient contrast on that background. Use a theme value that meets WCAG AA in both modes, or change the hover background.

As per coding guidelines, JavaScript changes must meet WCAG 2.1 Level AA accessibility requirements.

🤖 Prompt for 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.

In `@src/sections/Meshery/Meshery-integrations/Integration.style.js` at line 107,
Update the `.title` color declaration in the styled component to use a theme
color that provides WCAG 2.1 AA contrast against the hover background `#00d3a9`
in both themes, while preserving the existing hover styling.

Source: Coding guidelines