Consider a token to represent the 4px relative scale

[jonathantneal]

The current tokens tend to step along a 4px scale. There may be times it would be easier to reference this scale directly.

:where(:root) {
  --scale: 0.25rem;
}

.hypothetical-example-based-on-rux-button {
  padding-inline: calc(var(--scale) * 4);
}

Such a variable would allow users to increase or decrease sizing evenly across an entire experience from one variable.

To be effective, other sizing tokens would need to inherit this value.

:where(:root) {
  --scale: 0.25rem;

  --spacing-025: calc(var(--scale) * 0.25);
  --spacing-050: calc(var(--scale) * 0.50);
  --spacing-075: calc(var(--scale) * 0.75);
  --spacing-1: calc(var(--scale) * 1);
  --spacing-2: calc(var(--scale) * 2);
  --spacing-3: calc(var(--scale) * 3);
  --spacing-4: calc(var(--scale) * 4);
  --spacing-6: calc(var(--scale) * 6);
  --spacing-8: calc(var(--scale) * 7);
  --spacing-10: calc(var(--scale) * 10);
  --spacing-12: calc(var(--scale) * 12);
  --spacing-16: calc(var(--scale) * 16);
  --spacing-20: calc(var(--scale) * 20);
  --spacing-24: calc(var(--scale) * 24);
}

Thoughts?

[markacianfrani]

In that example, why wouldn't you just use the spacing-4 token?

Part of feels it's potentially dangerous and could lead to developers just plugging in any ol number and deviating from the DS.

But another part of me feels like what's the alternative? Hard coding a random value because you have a real use case. In which case you, having a --scale would at least enforce some alignment vs. none at all, which I think is good.

[jonathantneal]

• I think it would be fine to ship both --size-base and --size-4.
• A distinct advantage to --size-base: 0.25rem would be that authors could override the spacing system.
  • This would be if tokens referenced the base value, like --size-4: calc(4 * var(--size-base)).
• On naming — --spacing vs --size — that can be resolved in Consider using ‘size’ over ‘spacing’ in tokens #39.