Consider using ‘size’ over ‘spacing’ in tokens

[jonathantneal]

In the current set of tokens, the spacing namespace is used to describe sizes of the 4-pixel font-relative scaling used throughout the project. As this font-relative scaling may be used in other areas, such as border widths, fixed line-heights, and at-some-future-point grids, a namespace of size may be more ubiquitous, clear, and terse.

.hypothetical-example-based-on-the-button {
  border-radius: var(--size-075);
  border-width: var(--size-025);
  padding-inline: var(--size-4);
  padding-block: var(--size-1);
}

This would also be compatible with aliased tokens.

:where(:root) {
  --border-size: var(--size-025);
  --radius-size: var(--size-075);
}

.hypothetical-example-based-on-the-button {
  border-radius: var(--radius-size);
  border-width: var(--border-size);
  padding-inline: var(--size-4);
  padding-block: var(--size-1);
}

[markacianfrani]

I'm generally in favor of this. Though spacing and size are two different concepts, I feel like most people just alias spacing to sizing.

Concerns:

• Sizing was explicitly left out of the spacing audit work so things like checkbox/radio width/height and icon sizes aren't accounted for. We might need to add more values to our current spacing tokens.
• We might still need to create spacing tokens that alias size, if only to appease the Figma Tokens plugin. Size tokens are imbued with the powers of setting height/width whereas spacing can be applied to padding. Kinda an implementation detail, but might be an overall good idea anyway.

[jonathantneal]

Sizing was explicitly left out of the spacing audit work

That makes sense, and I also think they were brought in implicitly. For instance, in buttons, we must know the size of icons and font sizes to produce 4px scaling tokens for padding and line height.

if only to appease the Figma Tokens plugin

That makes sense for Figma. What is the effort to filter out Figma-specific tokens from the CSS properties?