Specify Docs
Specify ↗︎Changelog ↗︎Guide ↗︎
V1
V1
  • Getting started
    • Introduction
    • What is Specify?
    • Getting started
    • Glossary
  • Advanced Repository
    • Getting started
    • Figma Variables & Styles
    • Tokens Studio
    • CLI & Config
    • Querying a SDTF graph
    • GitHub
    • Parsers
      • to-css-custom-properties
      • to-style-dictionary
      • to-tailwind
      • to-sdtf
      • to-javascript
      • to-react-native
      • to-json
      • to-typescript
      • filter
      • select-modes
      • change-case
      • convert-color
      • convert-dimension
    • Templates
      • CSS Custom Properties
      • SDTF
      • Tailwind
    • REST API
    • Playground
  • Concepts
    • Token types
    • Configuration
    • Parsers
    • Templates
    • Best practices
  • Apps & Tools
    • Overview
    • GitHub
    • npm
    • GitLab
    • Bitbucket
    • Azure DevOps
    • REST API
    • CLI
    • Notion
    • Raycast
  • Useful links
    • Discord
    • YouTube
    • Twitter
    • Help Center
Powered by GitBook
On this page
  • Interface
  • Options
  • Basic usage

Was this helpful?

Edit on GitHub
Export as PDF
  1. Advanced Repository
  2. Parsers

convert-color

This parser helps you convert color formats of color tokens.

Interface

interface parser {
  name: 'convert-color';
  options: {
    toFormat:
      | 'hex'
      | 'rgb'
      | 'hsl'
      | 'hsb'
      | 'lch'
      | 'lab';
    applyTo?:
      | { collection: string | true }
      | { group: string | true }
      | { token: string | true }
      | SDTFQuery;
  };
}

Options

Parameter
Required
Type
Default
Description

toFormat

required

applyTo

optional

Basic usage

{
  "Colors": {
    "$collection": { "$modes": ["Light", "Dark"] },
    "Core": {
      "blue 100": {
        "$type": "color",
        "$description": "token 1 aliased with n modes within collection within n groups",
        "$value": {
          "Light": {
            "red": 219,
            "blue": 254,
            "alpha": 1,
            "green": 236,
            "model": "rgb"
          },
          "Dark": {
            "red": 41,
            "blue": 67,
            "alpha": 1,
            "green": 52,
            "model": "rgb"
          }
        }
      },
      "blue 700": {
        "$type": "color",
        "$description": "token 2 aliased with n modes within collection within n groups",
        "$value": {
          "Light": {
            "red": 17,
            "blue": 249,
            "alpha": 1,
            "green": 125,
            "model": "rgb"
          },
          "Dark": {
            "red": 96,
            "blue": 250,
            "alpha": 1,
            "green": 168,
            "model": "rgb"
          }
        }
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$description": "alias token with n modes within collection within n groups",
              "$value": {
                "Dark": {
                  "$mode": "dark",
                  "$alias": "Colors.Core.blue 100"
                },
                "Light": {
                  "$mode": "light",
                  "$alias": "Colors.Core.blue 700"
                }
              }
            }
          }
        }
      }
    }  
  }
}

We convert all colors from our SDTF graph in hsl.

.specifyrc.json
{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Convert colors in HSL and generate tokens in JSON",
      "parsers": [
        {
          "name": "convert-color",
          "options": {
            "toFormat": "hsl"
          }
        },
        {
          "name": "to-sdtf",
          "output": {
            "type": "file",
            "filePath": "tokens.json"
          }
        }
      ]
    }
  ]
}
tokens.json
{
  "colors": {
    "$collection": { "$modes": ["light", "dark"] },
    "core": {
      "blue-100": {
        "$type": "color",
        "$description": "token 1 aliased with n modes within collection within n groups",
        "$value": {
          "light": {
            "model": "hsl",
            "hue": 211,
            "saturation": 95,
            "lightness": 93,
            "alpha": 1
          },
          "dark": {
            "model": "hsl",
            "hue": 215,
            "saturation": 24,
            "lightness": 21,
            "alpha": 1
          }
        }
      },
      "blue-700": {
        "$type": "color",
        "$description": "token 2 aliased with n modes within collection within n groups",
        "$value": {
          "light": {
            "model": "hsl",
            "hue": 212,
            "saturation": 95,
            "lightness": 52,
            "alpha": 1
          },
          "dark": {
            "model": "hsl",
            "hue": 212,
            "saturation": 94,
            "lightness": 68,
            "alpha": 1
          }
        }
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$description": "alias token with n modes within collection within n groups",
              "$value": {
                "dark": {
                  "$mode": "dark",
                  "$alias": "colors.core.blue-100"
                },
                "light": {
                  "$mode": "light",
                  "$alias": "colors.core.blue-700"
                }
              }
            }
          }
        }
      }
    }  
  }
}
Previouschange-caseNextconvert-dimension

Last updated 1 year ago

Was this helpful?

The target color format to convert to. Actual value conversion is done by the package.

The selection where to apply the transformation. collection, group, token take a Regex string or true to select anything of the kind. An SDTFQuery can be used for advance use cases. Learn more about .

We then generate our transformed SDTF graph in a JSON file thanks to the parser.

| 'hex' 
| 'rgb' 
| 'hsl' 
| 'hsb' 
| 'lch' 
| 'lab'
| { collection: string | true }
| { group: string | true }
| { token: string | true }
| SDTFQuery
{ token: true }
to-sdtf
colord
how to query your SDTF graph