CSS Custom Properties

This template is dedicated for Web developers using CSS. It helps you generate all types of design tokens as CSS Custom Properties in their respective CSS file and it helps you to optimize your SVG's.

This example uses 5 different parsers:

• filter to target specific token types like colors and text styles

• convert-color to convert our colors in HSL

• change-case to change the name of our tokens and modes to kebabCase

• to-css-custom-properties to generate a CSS file containing our tokens

• make-line-height-relative to make our text styles' line-height relative to their font-size

• convert-dimension to convert our text styles' font-size from px to rem

• to-css-text-style to generate our text styles as CSS classes

• svgo to optimize, transform vectors, and generate SVG files

This template is an example among others. Head toward the to-css-custom-properties page to get all available options.

CLI configuration

When using the CLI, you need to fill three properties:

• repository is @organization/repository

• personalAccessToken which you can generate in your account settings

• rules lets you transform tokens by chaining parsers

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate colors in HSL",
      "parsers": [
        {
          "name": "filter",
          "options": {
            "query": {
              "where": {
                "token": ".*",
                "withTypes": {
                  "include": [
                    "color"
                  ]
                },
                "select": {
                  "parents": true
                }
              }
            }
          }
        },
        {
          "name": "convert-color",
          "options": {
            "toFormat": "hsl",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "change": "names",
            "toCase": "kebabCase",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "change": "modes",
            "toCase": "kebabCase",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "to-css-custom-properties",
          "output": {
            "type": "file",
            "filePath": "output/colors.css"
          }
        }
      ]
    },
    {
      "name": "Generate text styles as CSS classes",
      "parsers": [
        {
          "name": "filter",
          "options": {
            "query": {
              "where": {
                "token": ".*",
                "withTypes": {
                  "include": [
                    "textStyle"
                  ]
                },
                "select": {
                  "token": true
                }
              }
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "toCase": "kebabCase",
            "applyTo": {
              "token": true
            }
          }
        },
        {
          "name": "make-line-height-relative",
          "options": {}
        },
        {
          "name": "convert-dimension",
          "options": {
            "applyToKeys": {
              "textStyle": [
                "fontSize"
              ]
            },
            "toFormat": "rem"
          }
        },   
        {
          "name": "to-css-text-style",
          "output": {
            "type": "file",
            "filePath": "output/text-styles.scss"
          },
          "options": {
            "genericFamily": "sans-serif",
            "tokenNameTemplate": "text-style-{{token}}"
          }
        }
      ]
    },
    {
      "name": "Optimize and transform vectors with svgo + Generate SVG files",
      "parsers": [
        {
          "name": "svgo",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          },
          "options": {
            "svgo": {
              "plugins": [
                {
                  "name": "removeDimensions"
                },
                {
                  "name": "convertColors",
                  "params": {
                    "currentColor": true
                  }
                }
              ]
            }
          }
        }
      ]
    }
  ]
}

GitHub configuration

If you use the GitHub, you need to fill 4 properties:

• repository is @organization/repository

• head lets you set the branch your PR will be created on

• base lets you set the branch your PR will be merged on

• rules lets you transform tokens by chaining parsers

Make sure you have connected your GitHub account with your Specify account. Head toward this article to learn more.

.specifyrc.json

{
  "version": "2",
  "head": "specifyrc-json",
  "base": "main",
  "repository": "@organization/repository",
  "rules": [
    {
      "name": "Generate colors in HSL",
      "parsers": [
        {
          "name": "filter",
          "options": {
            "query": {
              "where": {
                "token": ".*",
                "withTypes": {
                  "include": [
                    "color"
                  ]
                },
                "select": {
                  "parents": true
                }
              }
            }
          }
        },
        {
          "name": "convert-color",
          "options": {
            "toFormat": "hsl",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "change": "names",
            "toCase": "kebabCase",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "change": "modes",
            "toCase": "kebabCase",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "to-css-custom-properties",
          "output": {
            "type": "file",
            "filePath": "tokens.css"
          }
        }
      ]
    },
    {
      "name": "Generate text styles as CSS classes",
      "parsers": [
        {
          "name": "filter",
          "options": {
            "query": {
              "where": {
                "token": ".*",
                "withTypes": {
                  "include": [
                    "textStyle"
                  ]
                },
                "select": {
                  "token": true
                }
              }
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "toCase": "kebabCase",
            "applyTo": {
              "token": true
            }
          }
        },
        {
          "name": "make-line-height-relative",
          "options": {}
        },
        {
          "name": "convert-dimension",
          "options": {
            "applyToKeys": {
              "textStyle": [
                "fontSize"
              ]
            },
            "toFormat": "rem"
          }
        },   
        {
          "name": "to-css-text-style",
          "output": {
            "type": "file",
            "filePath": "public/text-styles.scss"
          },
          "options": {
            "genericFamily": "sans-serif",
            "tokenNameTemplate": "text-style-{{token}}"
          }
        }
      ]
    },
    {
      "name": "Optimize and transform vectors with svgo + Generate SVG files",
      "parsers": [
        {
          "name": "svgo",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          },
          "options": {
            "svgo": {
              "plugins": [
                {
                  "name": "removeDimensions"
                },
                {
                  "name": "convertColors",
                  "params": {
                    "currentColor": true
                  }
                }
              ]
            }
          }
        }
      ]
    }
  ]
}