feat(token lab): editable color tokens #428
Conversation
|
| if (color && typeof color === 'object') { | ||
| let normalizedColor = color; | ||
|
|
||
| // DTCG tokens: convert to Culori format | ||
| if (color.colorSpace && Array.isArray(color.channels)) { | ||
| normalizedColor = tokenToCulori(); | ||
| normalizedColor = tokenToCulori(color); |
There was a problem hiding this comment.
The color token component would not even render without this change.
video.mp4
| function trimTrailingZeros(value: string) { | ||
| return value.replace(/\.0+$/, '').replace(/(?<=\.[^\.]+)0+$/, ''); | ||
| } |
There was a problem hiding this comment.
0.2300 => 0.23
56.421 => 56.421
123.00 => 123
| {channels.map((v, i) => <output className={c.channel} key={i}>{trimTrailingZeros(String(v).slice(0, 6))}</output>)} | ||
| </div> | ||
| <output className={c.alpha}>{trimTrailingZeros(String((color.original.alpha * 100)).slice(0, 6))}%</output> |
There was a problem hiding this comment.
Went with 5 digits (6 characters) of precision to match the design, but it feels kinda excessive.
There was a problem hiding this comment.
I wonder if using Intl.NumberFormat() would help simplify this. 🤔
It could just as well complicate it too though. Just a thought.
There was a problem hiding this comment.
Yeah I’ve gone back-and-forth about this. If we’re shooting for 24-bit color, we need 10–12 digits or so:
1 / 2 ** 24 = 0.000000059604
16-bit color is probably a better target because today many devices are in the ~10 bit color range. 16-bit color is fairly safely-represented at ~7 significant digits.
1 / 2 ** 16 = 0.000015
The fewer decimals you have, the less fidelity and colors will “snap” to the wrong color. The designs probably should have more decimals than they do now.
Also +1 I think Intl.NumberFormat() would probably be a better choice that’s more optimized by the JS engine. The RegEx isn’t slow per-se, but on higher refresh rate devices every little slowdown could result in dropping frames while sliding.
| @starting-style { | ||
| opacity: 0; | ||
| translate: 0 2rem; | ||
| } |
There was a problem hiding this comment.
First starting style rule of the codebase 🎉
| background: var(--color); | ||
| .popover { | ||
| display: grid; | ||
| background: var(--tz-color-bg-1); |
There was a problem hiding this comment.
This should be using an elevated token instead, but I couldn't find an analogue. The color picker is also hardcoded to this token anyway. Elevated tokens seems like a broad effort.
| outline: 2px solid var(--tz-color-focus); | ||
| outline: 2px solid var(--tz-color-base-lime-800); |
There was a problem hiding this comment.
This token does not exist. Could there be others leftover from refactors?
There was a problem hiding this comment.
Yes we’ve gone through a few refactors and there are some stragglers. Thanks for fixing!
| width: 28rem; | ||
| height: 1.5rem; | ||
| gap: 1rem; | ||
| grid-template-columns: 3fr 20fr 5fr; |
There was a problem hiding this comment.
Most parameters for the layout of the row are centralized here.
| @@ -40,6 +40,7 @@ | |||
| outline: none; | |||
| padding: 0; | |||
| text-indent: var(--tz-space-200); | |||
| field-sizing: content; | |||
There was a problem hiding this comment.
Fixes a layout issue on chromium
Screen.Recording.2025-01-27.093656.mp4
There was a problem hiding this comment.
This is FANTASTIC, thank you! 🎉 This looks and works great; thanks for contributing to the project!
The suggestion on the decimal formatting is not blocking; I left some thoughts but I really just need to benchmark it because there might not be an issue. Performance is really weird in that the real slowdowns are rarely the things you initially think they’d be. At any rate, not blocking at all.
Thanks again!
Changes
video.mp4
How to Review
Dark mode has poor contrast, review could help there.