Playground

Play with Tokun here. Enter your JSON object set the format and loader and see the tokens generated.

JSONOutput

{
  "brand": {
    "color": {
      "$type": "color",
      "": {
        "$value": "#123456",
        "$description": "Default color"
      },
      "white": {
        "$value": "#ffffff",
        "$description": "White color"
      },
      "black": {
        "$value": "#000000",
        "$description": "Black color"
      }
    },
    "typography": {
      "header": {
        "fontFamily": {
          "$type": "fontFamily",
          "$value": ["Arial", "sans-serif"]
        },
        "fontSize": {
          "$type": "dimension",
          "$value": {
            "value": 24,
            "unit": "px"
          }
        },
        "fontWeight": {
          "$type": "fontWeight",
          "$value": 500
        }
      }
    }
  },
  "alias": {
    "$description": "Alias",
    "color": {
      "$description": "Color alias",
      "primary": {
        "$type": "color",
        "$value": "{brand.color.white}",
        "$description": "Primary color"
      },
      "secondary": {
        "$type": "color",
        "$value": "{brand.color.black}",
        "$description": "Secondary color"
      }
    },
    "gradient": {
      "$type": "gradient",
      "$value": [
        { "color": "{brand.color}", "position": 0 },
        { "color": "{brand.color.black}", "position": 1 }
      ]
    },
    "typography": {
      "$description": "Typography alias",
      "header": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{brand.typography.header.fontFamily}",
          "fontSize": "{brand.typography.header.fontSize}",
          "fontWeight": "{brand.typography.header.fontWeight}",
          "letterSpacing": {
            "value": 0.1,
            "unit": "rem"
          },
          "lineHeight": 1.2
        },
        "$description": "Header typography"
      }
    }
  }
}

Loader

Format

Transforms are automatically applied when choosing a format