Review style tokens

[MattMcAdams]

I want to make sure I use as few tokens as possible while keeping a solid and flexible design system.

Color

Look into https://spectrum.adobe.com/page/color/ and https://spectrum.adobe.com/page/color-for-data-visualization/

Purpose named variables cons

• more opinionated
• not as reusable
• may grow in number over time

Color scale cons

• I don't want to force people to use a color scale if their project doesn't need it
• harder to customize / more overhead to customize

Hybrid cons

• more variables than necessary
• ???

Another consideration is that there are various approaches to dark mode, which might influence this decision.

One route to go might be to only reference the color scale variables in the purpose-named variables which will be used throughout the code. Then I need to evaluate how many I need, and what to call those to hit the sweet spot between "vague" and "too specific". I don't want something like --button-hover-color. Remember that the goal is not to provide variables to reskin the whole thing, only to make sure color is used consistently.

Spacing

I think this is pretty solid

• might want to add another for gutter between sidebar and content
• might want to add one that is the full width of the sidebar, content, and all gutters

Type

• Group fonts and sizes together
• Remove any scales that are not being used
• Remove font-head or keep it?

Other

• might want to add one for border radius?