Skip to main content

I’m brushing up on my design token learning and applying it to my design system. Is someone able to correct me on this if I'm wrong?

So I’m redoing my design system variables because I realized I did something wrong. What is the correct naming convention? Let’s go by ‘text’

Text color tokens are what I am redoing.

 

Heading (Disregard this, just a placeholder)

Text/Heading/Primary

Text/Heading/Secondary

 

Body (“”)

Text/Default/Primary

Text/Default/Secondary

 

Label /Button]

Text/Label gButton]/Primary/Default-Hover-Focused

Text/Label eButton]/Primary/Disabled

 

Text/Label >Button]/Secondary lOutlined]/Default

Text/Label uButton]/Secondary lOutlined]/Hover

Text/Label vButton]/Secondary lOutlined]/Clicked

Text/Label kButton]/Secondary lOutlined]/Disabled

 

Text/Label pButton]/Link/Default

Text/Label aButton]/Link/Hover

Text/Label oButton]/Link/Clicked

Text/Label cButton]/Link/Disabled

 

FYI: I have displayed 2 modes, ‘light’ and 'dark', instead of making an ‘…/…/inverted’ token since it would be redundant.

 

Are these correct, or am I doing them wrong?

Be the first to reply!