Background

Developer experience feedback from applying Codex tokens into GrowthExperiments in T332567 was the confusion to have to write
border: @border-width-base @border-style-base @border-color-subtle instead of a border: @border-subtle token featuring all three common values.

We've discussed a number of options:

1. Create border shorthands for most used border styles (e.g. border-base): Potential issue: we might have to create as many border shortcuts as border colors there are: border: @border-base
2. Create border shorthands for only width and style (border-thin-solid), and allow specifying border color separately in the same line. Potential issue: Unionizing first two property values is unseen in my 25y of CSS border: @border-thin-solid @border-color-progressive
3. Create border color mixins that allow customizing style, width and color. Potential issue: Using a mixin for borders seems obfuscated code for questionable value – .border( @border-color-progressive )

Goal

We've decided to add ~5 shorthand tokens for the most common cases – @border-base, @border-progressive, etc

Acceptance criteria for done

• Add border shorthand tokens
  • Apply them in Codex and
  • …in extensions transformed
• Document them in the Figma library