leonardo_ts_trasnformation.md

Leonardo Color to Tokens Studio Transformation

The following example is limited to two hues (gray, blue), and two contrast ratios. The actual color system will contain a variable number for both.

Leonardo Color output

[
  { background: "#e0e0e0" },
  {
    name: 'gray',
    values: [
      {name: "gray100", contrast: 4.5, value: "#767676"},
      {name: "gray200", contrast: 10, value: "#424242"},
    ]
  },
  {
    name: 'blue',
    values: [
      {name: "blue100", contrast: 4.5, value: "#6565ed"},
      {name: "blue200", contrast: 10, value: "#0303e0"},
    ]
  }
]

Transformed for Tokens Studio

"colors": {
  "gray": {
    "100": {
      "value": "#767676",
      "type": "color",
      "description": "WCAG: 4.5"
    },
    "200": {
      "value": "#424242",
      "type": "color",
      "description": "WCAG: 10"
    }
  },
  "blue": {
    "100": {
      "value": "#6565ed",
      "type": "color",
      "description": "WCAG: 4.5"
    },
    "200": {
      "value": "#0303e0",
      "type": "color",
      "description": "WCAG: 10"
    }
  }
}