[css-ui-4] Extend outline to include offset

[jossmac]

Proposal to extend the outline shorthand value to optionally include an outline-offset value.

The desire for this change is to simplify/improve CSS variable definitions as complete design tokens. The font shorthand property is terrific for this purpose. Borrowing from that API, a slash delimiter (/) would offer the opportunity to declare an optional offset value e.g.

/* current */
:focus  {
  outline: 3px solid black;
  outline-offset: 2px;
}

/* proposed */
:focus  {
  outline: 3px solid black / 2px;
}

Abbreviated syntax:

outline = 
  <'outline-color'> ||
  <'outline-style'> ||
  <'outline-width'>
  [ / <'outline-offset'> ]

Related:

• [css-ui] Should outline-offset be a longhand of outline? #8788
• [css-ui] Proposal: allow multiple outlines per element #10343