theo to scss

#css #sass #javascript #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": "…"
      }
    },
    …
  ]
}

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

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:]'

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more