Neutral color primitive value update #11725
Description
Background
The Calcite Brand design system team is developing a new dark and light theme system that better aligns with current elevation trends in design systems across the web. Additionally, we are standardizing our themes to match what front-end designers are adjusting in the current system. With this update, we aim to move one step closer to a foundational neutral color system to use with our backgrounds and, eventually, for our borders and text styles as well.
Colors to change
Approximately half of the current blk-XXX primitive token values are somewhat slightly off from what can be achieved using a full percentage of black over white. Although this change may be so subtle that it goes unnoticed by the viewer, maintaining an accurate underlying foundation is a crucial standard to build upon.
The primitives to update with new values can be seen in the Figma document here, the image attached to this issue, and in the list below:
| Primitive | New Value |
|---|---|
| blk-005 | #F7F7F7 |
| blk-010 | #F2F2F2 |
| blk-020 | #EBEBEB |
| blk-030 | #DEDEDE |
| blk-050 | #C9C9C9 |
| blk-080 | #ABABAB |
| blk-090 | #9E9E9E |
| blk-140 | #6B6B6B |
| blk-150 | #616161 |
| blk-160 | #545454 |
| blk-190 | #363636 |
| blk-210 | #212121 |
| blk-220 | #141414 |
| blk-230 | #0A0A0A |
| blk-235 | #050505 |
In addition to the colors.json file, we would like to update the Calcite Core Variables and UI Kit Figma tokens to pull the correct value to the brand library components.
monday.com sync: #8717963820