Color Design-Token Names / Levels

[samzuercher]

Two problems:

color naming

If a tailwind-project uses e.g. bg-primary, bg-sky or a custom color like bg-mycolor it is hard to find all colors used. If it is an external library you would import, you could easily miss defining 'mycolor' in your css. It would be better to use a prefix for each and every color to easily find it everywhere. Also 'primary' might be used for multiple things, while a color-prefix e.g. '-color' -> '-color-primary' is precise, a search would quickly give all locations.

levels

With background, popover, primary, secondary, accent, ... which color works on top of which? If numbers would be used for levels it might be easier to understand and more precise: .. 8, 9, 10, 11, 12, ..: 10 would be the default level, 11 is on top of 10, 9 is behind 10. 10-color-background is the background-color on level 10 which should be visible on top of 9-color-background. normally 9-color-text would be applied to text on this level. if an accent-text is needed on level-9 10-color-text would provide some, 11-color-text would provide more. Levels could be defined on <div>'s so children would automatically pick their respective level for colors e.g. {level ? 10}-color-background.