Fix: Improve palette text contrast across light, dark, and high-contrast themesFix palette text contrast

[abdulazees1111s]

Summary

Improved text visibility and contrast for palette items across light, dark, and high-contrast themes.

Problem

Palette items (e.g., "Flow") had poor contrast in different themes:

• Light theme: gray text on light background
• Dark theme: low visibility in some states
• High contrast mode: gray text on black background

This made the UI difficult to read and reduced accessibility.

Changes Made

• Updated text color for palette items to ensure sufficient contrast

• Improved background color for hover and selected states

• Added theme-specific styling for:

  • Light theme
  • Dark theme
  • High contrast mode

• Ensured consistent readability across all modes

Accessibility

These changes improve usability for users with:

• Low vision
• Color vision deficiencies
• High contrast accessibility needs

Testing

• Verified in light theme (text clearly visible)
• Verified in dark theme (text readable with proper contrast)
• Verified in high contrast mode (white text on black background)
• Checked hover and selected states across all themes
• No UI regressions observed

Screenshots

** Before

**After

1.Light Mode

2.Dark Mode

3.High Contrast Mode

Issue

Fixes #6439

PR Category

• Bug Fix
• Accessibility improvement

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[abdulazees1111s]

Hi! This is my first contribution. I’ve addressed the UI contrast issue across themes.
Please let me know if any changes are needed. Thanks!

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

toolbar.test.js

[zealot-zew]

hey, i think this is totally different problem. the inconsistency happens sometimes when it doesn't load properly, but right now the in the master it works good.

[Chaitu7032]

hey @abdulazees1111s , Thanks for the accessibility improvements ...

I noticed a few things that should be addressed before merging this :

• This PR includes Tamil localization changes, which seem unrelated to the accessibility updates. It would be better to move those into a separate PR to keep things focused and easier to review.
• There’s a leftover debug statement (console.log("Tamil added");) in js/toolbar.js that should be removed.
• I also saw some formatting-only changes in dist/css/style.css and index.html that don’t appear to be part of this update it would be good to clean those up.
• js/languagebox.js could use a bit of indentation/formatting cleanup for consistency.

Once these are sorted out, I’d feel much more comfortable approving the PR.

[Ashutoshx7]

hy take a look everything is faling can't start reviewing at this stage

[github-actions]

This PR has merge conflicts with master.

Please rebase your branch:

# Add upstream remote (one-time setup)
git remote add upstream https://github.com/sugarlabs/musicblocks.git

# Fetch latest master and rebase
git fetch upstream
git rebase upstream/master

# Resolve any conflicts, then:
git push --force-with-lease origin YOUR_BRANCH

Tip: Enable "Allow edits from maintainers" on this PR so we can auto-rebase for you next time. This only grants access to your PR branch. Your fork's other branches are not affected.