select-modes

This parser helps you select design tokens from specific mode(s).

Interface

interface parser {
  name: 'select-modes';
  options: {
    modes: string[];
  };
}

Options

Parameter	Required	Type	Default	Description
modes	true	Array		The query that select items in the graph.

Basic usage: select all tokens from a mode named "light"

Input

{
  "colors": {
    "$collection": {
      "$modes": ["light", "dark"]
    },
    "info": {
      "infoToken": {
        "$type": "color",
        "$value": {
          "light": {
            "model": "rgb",
            "red": 219,
            "green": 234,
            "blue": 254,
            "alpha": 1
          },
          "dark": {
            "model": "rgb",
            "red": 219,
            "green": 234,
            "blue": 254,
            "alpha": 1
          }
        }
      }
    },
    "danger": {
      "dangerToken": {
        "$type": "color",
        "$value": {
          "light": {
            "model": "rgb",
            "red": 209,
            "green": 204,
            "blue": 204,
            "alpha": 1
          },
          "dark": {
            "model": "rgb",
            "red": 19,
            "green": 34,
            "blue": 54,
            "alpha": 1
          }
        }
      }
    }
  }
}

Config

1. We want to get all design tokens from the mode named "light"

2. We eventually generate our design tokens ass CSS variables in a CSS file thanks to the to-css-custom-properties parser.

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Only get tokens from the mode named 'light' and gererate tokens in CSS",
      "parsers": [
        {
          "name": "select-modes",
          "options": {
            "modes": ["light"]
          }
        },
        {
          "name": "to-css-custom-properties",
          "options": {
            "selectorTemplate": "[data-theme=\"{{mode}}\"]"
          },
          "output": {
            "type": "file",
            "filePath": "public/css-custom-properties.css"
          }
        }
      ]
    }
  ]
}

Output

tokens.json

[data-theme="light"] {
  --danger-dangerToken: rgb(209, 204, 204);
  --info-infoToken: rgb(219, 234, 254);
}