Types for colorPalette seem wrong

This issue has been tracked since 2021-10-19.

The types for color palettes are a little odd.

type Color = `#${number}`
	|`rgb(${number},${number},${number})`
	|`rgba(${number},${number},${number},${number})`;

type ColorPalette = Color 
	| `${Color} ${Color}` 
	| `${Color} ${Color} ${Color}`
	| `${Color} ${Color} ${Color} ${Color}`
	| `${Color} ${Color} ${Color} ${Color} ${Color}`;

This makes sense, but in the docs, and in many CSS hex codes, they aren't just numbers.

In the docs, the examples give #9355e8FF #123456FF #BDAF10FF as a valid option, but this throws a TS error because there are numbers and letters.

Changing the color template string to #1 #11 #1 fixes the TS error, but is not actually valid.

Possible Solution

type Color = `#${number | string}`
	|`rgb(${number},${number},${number})`
	|`rgba(${number},${number},${number},${number})`;

This solves my use case, but I'm not sure if there was some logic around needing to be a number?

christopher-caldwell wrote this answer on 2021-10-19

Follow up, for the hex code, I'd say a string is best. With the current types, I cannot use my theme, which I know to be a valid color. Adding the # to appease TS would fail to color properly

Screen Shot 2021-10-18 at 10 59 55 PM

simzer wrote this answer on 2021-10-19

I tried to create a proper type definition:

type HexDigit = '0'|'1'|'2'|'3'|'4'|'5'|'6'|'7'|'8'|'9'|'a'|'b'|'c'|'d'|'e'|'f'|'A'|'B'|'C'|'D'|'E'|'F';

type HexByte = `${HexDigit}${HexDigit}`;

type Color = `#${HexByte}${HexByte}${HexByte}`
	|`#${HexByte}${HexByte}${HexByte}${HexByte}`
	|`rgb(${number},${number},${number})`
	|`rgba(${number},${number},${number},${number})`;

but it didn't work

Expression produces a union type that is too complex to represent.

So I changed it to this for now:

type Color = `#${string}`
	|`rgb(${number},${number},${number})`
	|`rgba(${number},${number},${number},${number})`;
simzer wrote this answer on 2021-10-19

The ColorPalette definition is also wrong, it can handle more than 5 colors, but I couldn't find a way to define it to arbitrary length in TS.

More Details About Repo
Owner Name vizzuhq
Repo Name vizzu-lib
Full Name vizzuhq/vizzu-lib
Language JavaScript
Created Date 2021-06-07
Updated Date 2022-11-22
Star Count 1630
Watcher Count 19
Fork Count 65
Issue Count 17

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date