OKLCH support

OKLCH is interesting and can be considered in a bigger scope.

When we created UI Skins, we took inspiration from UI Patterns Settings & Layout Options, so we used form elements plugin ID: textfield, color, checkbox...

Today, UI Patterns Settings & Layout Options are getting merged into UI Patterns 2 which is using JSON Schema for typing, instead of form elements plugin ID. Also UI Icons is leveraging JSON Schema for the icon options.

Why not decoupling data structure from form building in CSS variables too?

We can take the CSS data types:

integer

One or more decimal units 0 through 9.

number

Real numbers which may also have a fractional component, for example 1 or 1.34.

dimension

A number with a unit attached to it, for example 23px or 15em.

percentage

A number with a percentage sign attached to it, for example 10%.

ratio

A ratio, written with the syntax number / number.

flex

A flexible length introduced for CSS grid layout, written as a number with the fr unit attached and used for grid track sizing.

length

Lengths are a dimension and refer to distances.

angle

Angles are used in properties such as linear-gradient() and are a dimension with one of deg, grad, rad, or turn units attached.

time

Duration units are a dimension with an s or ms unit.

frequency

Frequencies are a dimension with a Hz or kHz unit attached.

resolution

Is a dimension with a unit identifier of dpi, dpcm, dppx, or x.

length-percentage

A type that can accept a length or a percentage as a value.

frequency-percentage

A type that can accept a frequency or a percentage as a value.

angle-percentage

A type that can accept an angle or a percentage as a value.

time-percentage

A type that can accept a time or a percentage as a value.

color

Specified as a keyword or a numerical color value.

alpha-value

Specifies the transparency of a color. May be a number, in which case 0 is fully transparent and 1 is fully opaque, or a percentage, in which case 0% is fully transparent and 100% fully opaque.

hue

Specifies the angle, with a unit identifier of deg, grad, rad, or turn, or unitless number interpreted as deg, of the color wheel specific to the absolute-color-functions of which it is a component.

image

A URL reference to an image or a color gradient.

color-stop-list

A list of two or more color stops with optional transition information using a color hint.

linear-color-stop

A color and a length-percentage to indicate the color stop for this part of the gradient.

linear-color-hint

A length-percentage to indicate how the color interpolates.

ending-shape

Used for radial gradients; can have a keyword value of circle or ellipse.

size

Determines the size of the radial gradient's ending shape. This accepts a value of a keyword or a length but not a percentage.

position

Defines the position of an object area. Accepts a keyword value such as top or left, or a length-percentage.

calc-sum

A calculation which is a sequence of calculation values interspersed with addition (+) and subtraction (-) operators. This data type requires both values to have units.

calc-product

A calculation which is a sequence of calculation values interspersed with multiplication (*) and division (/) operators. When multiplying, one value must be unitless. When dividing, the second value must be unitless.

calc-value

Defines accepted values for calculations, values such as calc-sum calculations.

calc-keyword

Defines a number of CSS keywords representing numeric constants such as e and π, that can be used in CSS math functions.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types

Or the new design tokens data types:

1. Color
2. Dimension
3. Font family
4. Font weight
5. Duration
6. Cubic Bézier
7. Number
8. Stroke style
9. Border
10. Transition
11. Shadow
12. Gradient
13. Typography

https://design-tokens.github.io/community-group/format/#types

So, duplicate of #3403788: UX: Add other widgets ?

Yes, but not using the Drupal form elements as data type. We need to bad this practice. And promote the use of proper well-defined, industry standard, data types.