feat(ui): implement new Slider. WF-37

[madeindjs]

Implement a brand new Slider component from scratch which respect the new Design System guideline

Screencast.from.2024-08-07.23-37-36.mp4

[FabienArcellier]

The interaction is smoother with this version.

I realized that the graphic customization is incomplete.

Is this a problem that can be solved in this PR? Here are suggested fields.

accent	apply on bar apply on cursor
primary text	apply on title
popover text	apply on popover text
popover	apply on background popover

[ramedina86]

I agree with fields suggested by @FabienArcellier but...

We need to transform the accent, otherwise the ball will have the same color as the bar, which isn't a great look. You can use the colorTransformations, please take a look at CoreSwitchInput for example where the color transformations are used.

[madeindjs]

I found that we already have --softenedAccentColor which does the job

writer-framework/src/ui/src/renderer/colorTransformations.css

Lines 11 to 13 in b35cee4

	--softenedAccentColor: hsl(
	from var(--accentColor) calc(h - 12) calc(s + 0) calc(l + 0.21)
	);

And I also added popoverColor & popoverBackgroundColor (commit)

Screencast.from.2024-08-13.20-28-05.mp4

Now we are close to the perfection 😁