Stroke Style

A type of stroke as defined in 9.2.

JSON

{
  "focus-ring-style": {
    "$type": "strokeStyle",
    "$value": "dashed"
  },
  "alert-border-style": {
    "$type": "strokeStyle",
    "$value": {
      "dashArray": ["0.5rem", "0.25rem"],
      "lineCap": "round"
    }
  }
}

YAML

focus-ring-style:
  $type: strokeStyle
  $value: dashed
alert-border-style:
  $type: strokeStyle
  $value:
    dashArray:
      - 0.5rem
      - 0.25rem
    lineCap: round

Property	Type	Description
$type	string	Required. "strokeStyle"
$value	string | object	See Value types
$description	string	(Optional) A description of this token and its intended usage.

Value types

A Stroke Style token’s $value must be either of 2 possible types: string or object

String

A string value as defined in 9.2.1 must be one of the following keywords that correspond to the equivalent CSS line styles:

• solid
• dashed
• dotted
• double
• groove
• ridge
• outset
• inset

Object

An object value as defined in 9.2.2 is an object that must have the following 2 properties:

Property	Type	Description
dashArray	string[]	An array of dimension values that specify alternating dashes & gaps.
lineCap	string	Must be one of round, butt, or square.

Notes

• Stroke Style is the only composite token type that can also be used in another composite type (Border)

See also

• Border