Spike: Define a naming convention for Design tokens
braven112 opened this issue · comments
User story
As a design system team we want a naming convention for design tokens that allows for components to easily pull in other themes.
For example body {background: var (--auro-color-white)} could be changed to body {background: var (--bg-color-primary)} or something similar.
Outline tasks
Generally speaking we want to use a semantic naming convention. Where the semantic names then map to the various themes we create.
Where we need to spend a little extra time is for the concept of onDark On a light colored theme using onDark for a background makes sense but if this were a darkMode theme this same token would likely be a white or very light grey color. We need to come up with an alternate way to classify this.
Some ideas to consider:
bg-color-primary1
bg-color-primary2
bg-color-secondary1
bg-color-secondary2
bg-color-accent-colortext-color-primary
text-color-secondary
text-color-onAccent
Here is a really good article about design systems and they do a deep dive into theming that I've linked directly too.
https://www.smashingmagazine.com/2022/12/anatomy-themed-design-system-components/#themes
Definition of “Done” (exit criteria)
- An initial design token naming convention has been finalized
- A plan has been finalized for how to integrate theming into Figma
- Get buyoff from Ryan Scott in ITS about naming and Figma strategy.
- We have a plan to show Examples on the Auro Doc Site
- A clear deprecation strategy on how we keep the original tokens and while adding the new ones.
- In addition to colors we need to look at all tokens, like padding or border radius, etc.
@blackfalcon to follow up with @leeejune as to the status of the ITS tokens and how need to merge that in with this proposal.
This issue is no longer in play. The following issue contains the working spec.