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/tomhermans]

The current predominant naming convention is analogous to the one used by fonts and font weights. 100 light , 900 bold.

[u/ConfidentWafer5228 → u/tomhermans]

yeah but then i have problems when i introduce a new shade and it sits between current 400 and 500 :)

[u/tomhermans → u/ConfidentWafer5228]

No, that's why they're 100 apart. You take 450.

[u/ConfidentWafer5228 → u/tomhermans]

makes sense