[joy-ui] Adopt HSL instead of RGB/hex color codes

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

No response

Examples 🌈

No response

Motivation 🔦

Currently all colors get generated as hex codes.

    --joy-palette-primary-50: #F4FAFF;
    --joy-palette-primary-100: #DDF1FF;
    --joy-palette-primary-200: #ADDBFF;
    --joy-palette-primary-300: #6FB6FF;
    --joy-palette-primary-400: #3990FF;
    --joy-palette-primary-500: #096BDE;
    --joy-palette-primary-600: #054DA7;
    --joy-palette-primary-700: #02367D;
    --joy-palette-primary-800: #072859;
    --joy-palette-primary-900: #00153C;

Would suggest the team to generate them as human readable HSL code instead,

    --joy-palette-primary-50: hsl(207, 100%, 98%);
    --joy-palette-primary-100: hsl(205, 100%, 93%);
    ...

Reasons:

1. Better understanding of color when changing hsl values.
2. Changing a hue, saturation or lightness of a color is useful in certain situations.
3. Easy adoption to new color palettes from existing color palettes just be changing hue.

Start by locating the Joy UI code that generates palette color variables and inspect how the current hex values are produced. The issue is complete when generated palette variables use human-readable HSL values consistently, with the existing palette colors preserved.