Establish design token architecture

[bradfrost]

To capture the spirit of the themeability this would need to accommodate, I wrote a post about the new separation of concerns.

Using the analogy of a door, some styles are structural/functional (the hinges need to be on the right or left of a door frame) while others are aesthetic (the door is painted turquoise and has matte black hardware).

Bringing this analogy to this project, this same separation between structure/functionality and aesthetics needs to be present. Things like grid and flexbox-related styles are structural in nature, while things like background-color, color, border-color, border-radius, and box-shadow are more aesthetic in nature.

Things like typography are tricky in that those properties (font-family, font-size, and friends) are largely considered aesthetic but also impact the box model. Spacing is another tricky one that impacts the box model. These nuances will need to be taken into account from an architecture/testing/validation standpoint.

The most-common design token categories and properties are:

Color

• Background color (background-color)
• Text color (color)
• Border color (border-color)
• Icon color (fill stroke, and color)

Typography

• Font family (font-family)
• Font size (font-size)
• Font weight (font-weight)
• Line Height (line-height)
• Letter spacing (letter-spacing)
• Text transform (text-transform)

Border

• Border width (border-width)
• Border style (border-style)
• Border radius (border-radius)

Shadow

• Box shadow (box-shadow)

Animation

• Select animation properties (primarily duration and easing)

Both media queries and z-index can technically be design tokens, but tend to fall more into the structural category. There will almost certainly be a need to discuss and have approaches for, but for now I'm going to leave them out because they are weird, complicated, and are less aesthetic than the other categories.

With this framing, we can put a proposal together on how to architect the token structure. I'll share a proposed shape to get the ball rolling, and can discuss from there!

[sashafirsov]

Q1. What principle the design token would folllow?

• current designer based ones (surfaces , etc )
• consumer semantics ( aka domain driven design )

Discussion on the last: Consumer Semantic Theme tokens

and implementation sample