Provide "outline" token category

[VIPofJoy]

"Outline" is different from "Border", in the design tool, its stroke is aligned to the outside. And it also supports offset, if the design tool does not support it, this ignores the value.

[lucijanblagonic]

Hi @VIPofJoy! To expand on this a bit as I've been doing a bit of work on focus outlines recently (I assume this is what you are showing) and specifically how to implement them in Figma.

There are 3 ways from what I have seen:

1. Use strokes (borders) on an object (doesn't work on no-fill objects)
2. Use Effect styles on an object (can stack multiple)
3. Use an extra element positioned above the object (like your example)

There are also inset focus states, not just on the outside (dense UIs, or hidden overflow items like menus). And several ways how outlines can be implemented in code: you can use outline or even box-shadow. You might tend to use one over the other, depending on the flexibility, complexity of design, browser support or WCAG conformance you are aiming for (WCAG 2.2 Focus appearance).

With all that being said, focus outlines should support the following:

• outline/border type (solid, dotted, dashed...)
• outline/border width (1px, 2px...)
• offset (1px, 2px...)
• stacking multiple together
• ...

Example of different focus styles (columns) across filled, outline and naked button (rows)

So my question at the end is, does this really require a separate category or is it simply a Composite token that takes multiple values?

[VIPofJoy]

Hi @lucijanblagonic! It be a composite token that accepts multiple values.

[VIPofJoy]

{ "focus": { "$type": "outline", "$value": { "color": "#00000080", "width": "4px", "style": "solid", "offset": "2px", } } }
or
{ "focus": { "$type": "outline", "$value": { "color": "#00000080", "width": "4px", "style": "solid", } } }
I am hesitating whether to make the offset attribute a new token category so that it can be used in various scenarios.

[kevinmpowell]

Reviewed by Format Editors 5/17/23

• Does this warrant revisiting the existing Border type? (to possibly make it more flexible, renaming to "Stroke"?)
• Is "Outline" something that makes sense beyond the web platform? How about iOS & Android?
• Possibly related to #98

[danosek]

I like the Stroke. Figma and SVG use this term. In Figma, you can set the position.

Are there any differences in CSS between border and outline beside outline-offset?