From Tokens Studio to MUI

Hi everyone! I've been searching across the docs and issues but I don't seem to get a clear example of how am I supposed to get this going. The situation is the following:

I've got my tokens in figma using Tokens Studio, as follows (example of one of the tokens):

which translates to the following css:

and to the following json, after exporting it from the plugin:

Tokens Studio Json output

``` { "global": { ..., "authContainer": { "value": "12", "type": "borderRadius" }, "elevationLight1": { "value": [ { "x": "0", "y": "1", "blur": "2", "spread": "0", "color": "rgba(0, 0, 0, 0.3)", "type": "dropShadow" }, { "x": "0", "y": "1", "blur": "3", "spread": "1", "color": "rgba(0, 0, 0, 0.15)", "type": "dropShadow" } ], "type": "boxShadow" }, } } ```

used token-transformer to transform the json to the style-dictionary input:

token-transform output

{
   ...,
"authContainer": {
    "value": 12,
    "type": "borderRadius"
  },
  "elevationLight1": {
    "0": {
      "x": {
        "value": 0,
        "type": "x"
      },
      "y": {
        "value": 1,
        "type": "y"
      },
      "blur": {
        "value": 2,
        "type": "blur"
      },
      "spread": {
        "value": 0,
        "type": "spread"
      },
      "color": {
        "value": "#0000004d",
        "type": "color"
      },
      "type": {
        "value": "dropShadow",
        "type": "type"
      }
    },
    "1": {
      "x": {
        "value": 0,
        "type": "x"
      },
      "y": {
        "value": 1,
        "type": "y"
      },
      "blur": {
        "value": 3,
        "type": "blur"
      },
      "spread": {
        "value": 1,
        "type": "spread"
      },
      "color": {
        "value": "#00000026",
        "type": "color"
      },
      "type": {
        "value": "dropShadow",
        "type": "type"
      }
    }
  },
}

and then transformed this output as the style-distionary input: config.json:

"javascript": {
"transformGroup": "js",
"buildPath": "../returns-portal/src/assets/styles/",
"files": [
  { 
    "format": "javascript/umd", 
    "destination": "tokens.js"
  }
]
}

Style-dictionary output

export const AuthContainer = 12;
export const ElevationLight10X = 0;
export const ElevationLight10Y = 1;
export const ElevationLight10Blur = 2;
export const ElevationLight10Spread = 0;
export const ElevationLight10Color = "#0000004d";
export const ElevationLight10Type = "dropShadow";
export const ElevationLight11X = 0;
export const ElevationLight11Y = 1;
export const ElevationLight11Blur = 3;
export const ElevationLight11Spread = 1;
export const ElevationLight11Color = "#00000026";
export const ElevationLight11Type = "dropShadow";

The question here is: how do I use these const's in my MUI components? It doesn't seem to be the proper format for a react's style prop nor a MUI's theme. What am I missing?

For the record, also tried javascript/object format in style-dictionary's config.json, but the output doesn't seem helpful neither:

output

``` "authContainer": { "value": 12, "type": "borderRadius", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": 12, "type": "borderRadius" }, "name": "AuthContainer", "attributes": { "category": "authContainer" }, "path": [ "authContainer" ] }, "elevationLight1": { "0": { "x": { "value": 0, "type": "x", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": 0, "type": "x" }, "name": "ElevationLight10X", "attributes": { "category": "elevationLight1", "type": "0", "item": "x" }, "path": [ "elevationLight1", "0", "x" ] }, "y": { "value": 1, "type": "y", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": 1, "type": "y" }, "name": "ElevationLight10Y", "attributes": { "category": "elevationLight1", "type": "0", "item": "y" }, "path": [ "elevationLight1", "0", "y" ] }, "blur": { "value": 2, "type": "blur", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": 2, "type": "blur" }, "name": "ElevationLight10Blur", "attributes": { "category": "elevationLight1", "type": "0", "item": "blur" }, "path": [ "elevationLight1", "0", "blur" ] }, "spread": { "value": 0, "type": "spread", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": 0, "type": "spread" }, "name": "ElevationLight10Spread", "attributes": { "category": "elevationLight1", "type": "0", "item": "spread" }, "path": [ "elevationLight1", "0", "spread" ] }, "color": { "value": "#0000004d", "type": "color", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": "#0000004d", "type": "color" }, "name": "ElevationLight10Color", "attributes": { "category": "elevationLight1", "type": "0", "item": "color" }, "path": [ "elevationLight1", "0", "color" ] }, "type": { "value": "dropShadow", "type": "type", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": "dropShadow", "type": "type" }, "name": "ElevationLight10Type", "attributes": { "category": "elevationLight1", "type": "0", "item": "type" }, "path": [ "elevationLight1", "0", "type" ] } }, "1": { "x": { "value": 0, "type": "x", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": 0, "type": "x" }, "name": "ElevationLight11X", "attributes": { "category": "elevationLight1", "type": "1", "item": "x" }, "path": [ "elevationLight1", "1", "x" ] }, "y": { "value": 1, "type": "y", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": 1, "type": "y" }, "name": "ElevationLight11Y", "attributes": { "category": "elevationLight1", "type": "1", "item": "y" }, "path": [ "elevationLight1", "1", "y" ] }, "blur": { "value": 3, "type": "blur", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": 3, "type": "blur" }, "name": "ElevationLight11Blur", "attributes": { "category": "elevationLight1", "type": "1", "item": "blur" }, "path": [ "elevationLight1", "1", "blur" ] }, "spread": { "value": 1, "type": "spread", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": 1, "type": "spread" }, "name": "ElevationLight11Spread", "attributes": { "category": "elevationLight1", "type": "1", "item": "spread" }, "path": [ "elevationLight1", "1", "spread" ] }, "color": { "value": "#00000026", "type": "color", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": "#00000026", "type": "color" }, "name": "ElevationLight11Color", "attributes": { "category": "elevationLight1", "type": "1", "item": "color" }, "path": [ "elevationLight1", "1", "color" ] }, "type": { "value": "dropShadow", "type": "type", "filePath": "tokens/tokens.json", "isSource": true, "original": { "value": "dropShadow", "type": "type" }, "name": "ElevationLight11Type", "attributes": { "category": "elevationLight1", "type": "1", "item": "type" }, "path": [ "elevationLight1", "1", "type" ] } } }, ```

Thanks you advance!

amzn / style-dictionary

From Tokens Studio to MUI #927