convert-dimension

This parser helps you convert units of dimension tokens.

Interface

interface parser {
  name: 'convert-dimension';
  options: {
    toFormat: '%' | 'px' | 'em' | 'rem' | 'pt' | 'pc' | 'in' | 'cm' | 'mm' | 'ex' | 'cap' | 'ch' | 'ic' | 'lh' | 'rlh' | 'vw' | 'svw' | 'lvw' | 'dvw' | 'vh' | 'svh' | 'lvh' | 'dvh' | 'vi' | 'svi' | 'lvi' | 'dvi' | 'vb' | 'svb' | 'lvb' | 'dvb' | 'vmin' | 'svmin' | 'lvmin' | 'dvmin' | 'vmax' | 'svmax' | 'lvmax' | 'dvmax'
    baseValue?: {
      rem?: number
    }
    applyTo?: SDTFQuery,
  };
}

Options

Parameter	Required	Type	Default	Description
toFormat	required	| '%' | 'px' | 'em' | 'rem' | 'pt' | 'pc' | 'in' | 'cm' | 'mm' | 'ex' | 'cap' | 'ch' | 'ic' | 'lh' | 'rlh' | 'vw' | 'svw' | 'lvw' | 'dvw' | 'vh' | 'svh' | 'lvh' | 'dvh' | 'vi' | 'svi' | 'lvi' | 'dvi' | 'vb' | 'svb' | 'lvb' | 'dvb' | 'vmin' | 'svmin' | 'lvmin' | 'dvmin' | 'vmax' | 'svmax' | 'lvmax' | 'dvmax'		The target color format to convert to. Actual value conversion is done by the colord package.
baseValue	optional	{ rem: number }
applyTo	optional	| { collection: string | true } | { group: string | true } | { token: string | true } | SDTFQuery	{ token: true }	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 how to query your SDTF graph.

Basic usage

Input

{
  "Foundation": {
    "spacing": {
      "1": {
        "$type": "dimension",
        "$value": {
          "default": {
            "value": 4,
            "unit": "px"
          }
        }
      },
      "2": {
        "$type": "dimension",
        "$value": {
          "default": {
            "value": 8,
            "unit": "px"
          }
        }
      },
      "3": {
        "$type": "dimension",
        "$value": {
          "default": {
            "value": 12,
            "unit": "px"
          }
        }
      }
    }
  }
}

Config

We convert all colors from our SDTF graph in hsl.

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

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Convert spacing in rem and generate tokens in JSON",
      "parsers": [
        {
          "name": "convert-dimension",
          "options": {
            "toFormat": "rem"
          }
        },
        {
          "name": "to-sdtf",
          "output": {
            "type": "file",
            "filePath": "tokens.json"
          }
        }
      ]
    }
  ]
}

Output

tokens.json

{
  "Foundation": {
    "spacing": {
      "1": {
        "$type": "dimension",
        "$value": {
          "default": {
            "value": 0.25,
            "unit": "rem"
          }
        }
      },
      "2": {
        "$type": "dimension",
        "$value": {
          "default": {
            "value": 0.5,
            "unit": "rem"
          }
        }
      },
      "3": {
        "$type": "dimension",
        "$value": {
          "default": {
            "value": 0.75,
            "unit": "rem"
          }
        }
      }
    }
  }
}