1166 introduce color modifiers

[swordEdge]

No description provided.

[github-actions]

Commit SHA:6efbd1bd9bedb3600341f659afc40c08ca2a5459

Test coverage results 🧪

Code coverage diff between base branch:next and head branch: 1166-introduce-color-modifiers 

Status	File	% Stmts	% Branch	% Funcs	% Lines
🔴	total	71.58 (-0.57)	63.71 (-0.6)	69.09 (-0.67)	72.01 (-0.59)
✨ 🆕	src/app/components/ColorPickerTrigger.tsx	66.67	100	0	66.67
✨ 🆕	src/app/components/ColorTokenForm.tsx	1.37	0	0	1.39
✨ 🆕	src/app/components/DropdownMenuRadioElement.tsx	25	100	0	33.33
✨ 🆕	src/app/components/TokenTooltip/SingleColorValueDisplay.tsx	100	25	100	100
🟢	src/app/store/models/tokenState.tsx	97.28 (0.73)	84.93 (-0.14)	100 (1.49)	97.16 (0.76)
✨ 🆕	src/constants/ColorModifierTypes.ts	100	100	100	100
✨ 🆕	src/constants/ColorSpaceTypes.ts	100	100	100	100
✨ 🆕	src/types/Modifier.ts	100	100	100	100
✨ 🆕	src/utils/convertModifiedColorToHex.ts	80	80	100	80
✨ 🆕	src/utils/modifyColor.ts	80	80	100	80
🟢	src/utils/alias/checkIfAlias.tsx	94.74 (5.27)	88.89 (11.11)	100 (0)	94.44 (5.55)
🟢	src/utils/alias/getAliasValue.ts	89.23 (0.9)	82.14 (1.58)	100 (0)	88.52 (1.02)
✨ 🆕	src/utils/is/isColorToken.ts	66.67	50	100	100
❌	src/app/components/PropertyDropdownMenuRadioElement.tsx	25	100	0	33.33

[github-actions]

Commit SHA:0919394a797a67aa3fcd9ac29347fb2b41745cb9
Current PR reduces the test coverage percentage by 1 for some tests

[six7]

some more things i encountered:

• we're currently saving the value field as a string in JSON. can we save it as a number instead?
• can you add something to the tooltip of color tokens that use a modifier? just beneath the value: lighten(0.5) / LCH so {operation}({value}) / {space}) or for mix: mix(#ffffff, 0.5) / LCH.

[six7]

Let's call this isColorToken instead. Color tokens can only be single.

[six7]

@swordEdge One last thing: Can you make sure users can enter both 0.5 as well as 0,5 for the value? For me right now I have to enter 0,05 - I believe this depends on localization? Can we parse the input on change and change that to 0.5 always (the decimal point, not the decimal comma). Figma does the same if you type 0,5 in a width in Figma it converts to 0.5.

[six7]

I found one more edge case:

If a user already had something else in their $extensions property (which will be likely given this is going to be how in the spec users are able to add extra metadata) we currently override the whole object

To reproduce:

• add a $extensions field with some other identifier to a token
• then add a color modifier to that token via the UI and save
• notice how we removed the other $extensions value.

I'd expect that same $extensions property to still be there. We do not want to delete that for the user, we just want to append.

CleanShot.2023-01-10.at.23.42.46.mp4

[six7]

🎉