convert-dimension

This parser helps you convert units of dimension tokens (spacing, sizing, breakpoint, blur...) and composite tokens sub values (font-size, letter-spacing, border-width...)

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'
      | null;
    baseValue?: {
      rem?: number
    };
    applyTo?: SDTFQuery;
    applyToKeys?: {
      textStyle?: Array<'fontSize' | 'lineHeight' | 'letterSpacing' | 'paragraphSpacing'| 'textIndent'>,
      shadow?: Array<'offsetX' | 'offsetY' | 'blurRadius' | 'spreadRadius'>,
      border?: Array<'width' | 'rectangleCornerRadii'>,
    };
    excludeFormats?: array;
    includeFormats?: array;
  };
}

Options

Examples

Basic usage

{
  "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"
          }
        }
      }
    }
  }
}

Generate unitless dimension tokens

{
  "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"
          }
        }
      }
    }
  }
}

Convert text style's font-size from px to rem

{
  "Text styles": {
    "Body": {
      "$type": "textStyle",
      "$value": {
        "default": {
          "font": {
            "family": "Neue Haas Grotesk Text Pro",
            "postScriptName": "Neue Haas Grotesk Text Pro",
            "weight": "roman",
            "style": "normal",
            "files": []
          },
          "fontSize": {
            "value": 14,
            "unit": "px"
          },
          "color": null,
          "fontFeatures": null,
          "lineHeight": {
            "value": 150,
            "unit": "%"
          },
          "letterSpacing": {
            "value": 0.2,
            "unit": "px"
          },
          "paragraphSpacing": {
            "value": 0,
            "unit": "px"
          },
          "textAlignHorizontal": null,
          "textAlignVertical": null,
          "textDecoration": "none",
          "textIndent": {
            "value": 0,
            "unit": "px"
          },
          "textTransform": "none"
        }
      }
    }
  }
}

Last updated