Creating a design token overview

If you use CSS custom properties in your project, which are named based on a certain logic, miyagi can automatically create a visual overview of your design tokens based on these custom properties.

To do so, add the following to your configuration:

"assets": {
  "customProperties": {
    "files": ["file/with/custom/properties.css"]
  }
}

Naming of custom properties

miyagi scans the CSS files for custom properties, which start with a specific prefix. By default these prefixes are:

color
typo
spacing

Colors

Custom properties, that are named --color-${name}, are interpreted as colors, which can be used for typography but also as decorative colors. You can also name the custom properties like --color-typo-${name} or --color-decoration-${name}. That way miyagi knows that this color is only supposed to be used for typography or decorations like background, border etc., and will render them accordingly.

Examples

--color-Primary
--color-decoration-Gold
--color-typo-Headline

Typography

As typography consists of multiple CSS properties (as opposed to colors and spacings), miyagi looks for custom properties, that start with --typo-${name} and end with any of the following:

-font-family
-font-feature-settings
-font-kerning
-font-size-adjust
-font-size
-font-stretch
-font-style
-font-variant-caps
-font-variant
-font-weight
-letter-spacing
-line-height
-text-shadow
-text-transform

miyagi will then use all these custom properties to render an exemplary text node.

Examples

--typo-Headline-font-family
--typo-Headline-font-size
--typo-Headline-line-height

Spacings

Custom properties for spacings need to be simply called --spacing-${name}.

Examples

--spacing-12
--spacing-24
--spacing-32

Customization

You can customize the prefixes in your configuration like this:

"assets": {
  "customProperties": {
    "prefixes": {
      "color": "color",
      "typo": "typo",
      "spacing": "spacing"
    }
  }
}