feat: Dynamically adjust gradient percentages based on min/max values

[schelv]

Updated the CSS gradient for the element to have its color stops adjust dynamically based on the and values of the color temperature selector.
This provides a more accurate visual representation of the selected range.

Proposed change

The documentation (link):

The dev branch:

Proposed in this pull request:

Blueprint used to create the images

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

We already have a function for that:

frontend/src/dialogs/more-info/components/lights/light-color-temp-picker.ts

Line 37 in 8e1e75d

export const generateColorTemperatureGradient = (min: number, max: number) => {

Any reason you didn't reuse that?

[schelv]

We already have a function for that:

frontend/src/dialogs/more-info/components/lights/light-color-temp-picker.ts

Line 37 in 8e1e75d

export const generateColorTemperatureGradient = (min: number, max: number) => {

Any reason you didn't reuse that?

I didn't know it existed.

[schelv]

The function you suggested works well.
The colors are very different than before, but this might be correct if you look at the image below.
https://en.wikipedia.org/wiki/Mired#/media/File:Planckian-locus-in-mireds.png
The default minimum value for the slider is 153, which is not as blue in the "locus" as it was in the old slider.

A bug might have been introduced when the -webkit-linear-gradient was changed to linear-gradient a few weeks ago; the direction of the gradient in the dev branch is different from the one in the documentation and the one I have running at home.
This is now restored with these changes