search

RocketCommunicationsInc / astro-design-tokens

4 stars 1 forks source link

Consider including `font` shorthand for CSS custom properties #41

Open jonathantneal opened 2 years ago

jonathantneal commented 2 years ago

In the current CSS export of tokens, providing font styles to an element can feel lengthy and prone to error.

.hypothetical-example-based-on-applying-font-body-1 {
  font-family: var(--font-body-1-font-family);
  font-size: var(--font-body-1-font-size);
  font-weight: var(--font-body-1-font-weight);
  letter-spacing: var(--font-body-1-letter-spacing);
  line-height: var(--font-body-1-line-height);
}

The verbosity can be reduced from 5 lines to 2 lines by providing a token for the font property.

.hypothetical-example-based-on-applying-font-body-1 {
  font: var(--font-body-1);
  letter-spacing: var(--font-body-1-letter-spacing);
}

Such a token would look something like this:

.hypothetical-root {
  --font-body-1: 400 1rem/var(--font-body-1-line-height) var(--font-body-1-font-family);
}
markacianfrani commented 2 years ago

Would there be any value in having just the --font-body-1-font-family --font-body-1-font-size etc tokens then? Or should we just ship --font-body-1 ? Letter spacing is the odd one out here though.

which makes me think maybe utility classes are the way to go here?