Fix (form range): change colors for hover and active states

[isabellechanclou]

Related issues

Fixes issue #1320

Description

Fix colors of the grab circle on hover and active state for Chrome and Firefox.

⚠️ To know : It is impossible to change the horizontal bar color in Chrome to make it orange on a certain part. Therefore, it stays grey on all its length.

Motivation & Context

These colors changes are needed to respect the orange design system specifications.

Types of change

• Bug fix (non-breaking which fixes an issues)

Live previews

• https://deploy-preview-1605--boosted.netlify.app/docs/forms/range

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• My change introduces changes to the migration guide
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	e4e9393
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/642bdf4b405d610008b0e399
😎 Deploy Preview	https://deploy-preview-1605--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[julien-deramond]

Haven't looked at the details of this PR but the new Sass var should be documented in the migration guide.

[louismaximepiton]

Some things to tackle before approval!

[louismaximepiton]

Small fixes

[julien-deramond]

Maybe we can inform the designers that in https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789, the cursor is not the same hand cursor.

[louismaximepiton]

js/dist/util/template-factory.js.map should be removed from the PR

[Franco-Riccitelli]

I’ve checked the state colours for hover, press and drag for the grab handle and it all looks good (as specified on a white background). The cursor also behaves as expected with the hand cursor changing on press and drag.

I will change the look of the cursor hand on the Sketch file for the press and drag state.

[julien-deramond]

As discussed with @louismaximepiton, I've removed the deprecation of $form-range-thumb-active-border instead of adding a new $form-range-thumb-active-border-color. It will avoid a migration for our users.
Done via 6794a07

[louismaximepiton]

LGTM 🚀

[julien-deramond]

Can rollback it but I'm suggesting to add a "Dark variant" section in the docs with 519ce5f. Thoughts?

[louismaximepiton]

Re thinking about this, we should remove the dark variant example for now and implement later on with a specific class

[julien-deramond]

Removing dark variant since apparently this PR is not treating this use case at all. Thought that it was OK for dark variant already. And replacing the custom prop with $black. And 🚀

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication