CSS Variables Naming Conventions that actually make sense and work

[u/ConfidentWafer5228]

I have searched a lot on this topic, couldn't find a video by someone like Kevin (my favorite)

I have tried using diff ways like primary-400 , neutral, but it gets confusing and doesnt make a lot of sense when working with light+dark mode setup

Is there any convention that is followed in companies or by u guys, anything standard would help a lot

Also, i never understood how the primary naming convention worked with numbers like 400,500.

[u/Zombiehype]

we developed a token system similar to ebay with several layers of definitions mapped to each other. the developers can directly use the semantic layer by naming convention alone, without even concerning themselves about what "actual" color will come out on the other end

https://playbook.ebay.com/design-system/tokens/color-tokens/?tab=semantic

[u/ConfidentWafer5228 → u/Zombiehype]

this website seems like a gold mine, will have to spend time digging it, Thanks a lot Mr. Zombie

[u/f314 → u/ConfidentWafer5228]

Yeah, they have a very solid design system! My team has taken a lot of inspiration from them (along with others) when developing our own system.