DEV Community

Josua Schmid
Josua Schmid

Posted on

theo to scss

You may have a JSON file of the following form which is called plasmic-tokens.theo.json:

{
  "props": [
    {
      "name": "96",
      "type": "spacing",
      "value": "24rem",
      "category": "spacing",
      "meta": {
        "projectId": "…",
        "id": "…"
      }
    },
    {
      "name": "Black-050",
      "type": "color",
      "value": "#F6F7F7",
      "category": "color",
      "meta": {
        "projectId": "…",
        "id": "…"
      }
    },
    …
  ]
}
Enter fullscreen mode Exit fullscreen mode

This is file has been baked by Salesforce theo.

If you want to extract the colors for SASS, then you can use the command line tool:

yarn theo app/javascript/plasmic-tokens.theo.json --transform web --format sass
Enter fullscreen mode Exit fullscreen mode

or if this doesn't work like in my case (Cannot find module 'optimist'), use the following one-liner to extract all colors:

jq -r '.props[] | select(.type == "color") | "$" + .name + ": " + .value + ";"' app/javascript/components/plasmic-tokens.theo.json | tr '[:upper:]' '[:lower:]'
Enter fullscreen mode Exit fullscreen mode

Top comments (0)