Navigation>

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:

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

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:

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

Examples

Spacings

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

Examples

Customization

You can customize the prefixes in your configuration like this:

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