fix(range): use correct color of thumb for disabled state

[mivaylo]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: CDE-1449

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

ngModel tends to change template/classes and hence for disabled state our rules for coloring of range's thumbs are overridden

That is why we want to set colors of thumb with !important directive so that the real color is applied and not default gray color

Issue is only caught on Firefox browser

[github-actions]

👋 @mivaylo,

• 🙏 The Clarity team thanks you for opening a pull request
• 🎉 The build for this PR has succeeded
• 🔍 The PR is now ready for review
• 🍿 In the meantime, view a preview of this PR
• 🖐 You can always follow up here. If you're a VMware employee, you can also reach us on our internal #clarity-support Slack channel

Thank you,

🤖 Clarity Release Bot

[github-actions]

This PR introduces visual changes: 20ce85d
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1449-fix-disabled-range-thumb-color
git fetch /~https://github.com/vmware-clarity/ng-clarity.git 20ce85d477cace8eec4052e2281294dd00e46fe2
git cherry-pick 20ce85d477cace8eec4052e2281294dd00e46fe2
git push

[mivaylo]

Current color of thumb in v16 light CDS theme taken from https://storybook.clarity.design/demo/ranges?cds-theme=light in firefox:

(you can ignore the misplacement as it was already fixed and merged, just not yet released - #1062 )

and in dark CDS theme:

And here is with the fix in this PR:

[github-actions]

This PR introduces visual changes: b6b5cf9
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1449-fix-disabled-range-thumb-color
git fetch /~https://github.com/vmware-clarity/ng-clarity.git b6b5cf9c8481e1361613b79cf50a4738198860f2
git cherry-pick b6b5cf9c8481e1361613b79cf50a4738198860f2
git push

[valentin-mladenov]

LGTM

[github-actions]

This PR introduces visual changes: ca4e17c
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1449-fix-disabled-range-thumb-color
git fetch /~https://github.com/vmware-clarity/ng-clarity.git ca4e17cdd26105ae9a6deeb11a9becea6e5a0a31
git cherry-pick ca4e17cdd26105ae9a6deeb11a9becea6e5a0a31
git push

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed PRs after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.