shadow-test-case.md

Shadows in CSS when using Figma + Specify + SD

This is the source (raw token) as delivered by Specify:

{
    "id": "60b553b2-8f57-453a-a461-0a0a7eacf2cb",
    "createdAt": "2023-08-09T14:10:09.213Z",
    "updatedAt": "2023-08-09T14:10:09.213Z",
    "name": "lvl-1",
    "value": [
      {
        "blur": {
          "value": {
            "unit": "px",
            "measure": 2
          }
        },
        "color": {
          "value": {
            "a": 0.3,
            "b": 79,
            "g": 68,
            "r": 55
          }
        },
        "isInner": false,
        "offsetX": {
          "value": {
            "unit": "px",
            "measure": 0
          }
        },
        "offsetY": {
          "value": {
            "unit": "px",
            "measure": 0.800000011920929
          }
        }
      },
      {
        "blur": {
          "value": {
            "unit": "px",
            "measure": 3.5999999046325684
          }
        },
        "color": {
          "value": {
            "a": 0.15,
            "b": 79,
            "g": 68,
            "r": 55
          }
        },
        "spread": {
          "value": {
            "unit": "px",
            "measure": 0.800000011920929
          }
        },
        "isInner": false,
        "offsetX": {
          "value": {
            "unit": "px",
            "measure": 0
          }
        },
        "offsetY": {
          "value": {
            "unit": "px",
            "measure": 0.800000011920929
          }
        }
      }
    ],
    "meta": {
      "source": "localStyles"
    },
    "type": "shadow",
    "originId": "1164:5674",
    "description": "",
    "sourceId": "ac0efe41-5517-45c0-bc32-db19be5f3ade",
    "repositoryId": "e38cf268-0271-4b58-849e-9b11be3cc1c8"
  },

When using the to-css-custom-properties parser, what is generated in the CSS file is:

  --lvl-1: 0px 0.8px 2px rgba(55, 68, 79, 0.3),
    0px 0.8px 3.6px 0.8px rgba(55, 68, 79, 0.15);

The to-style-dictionary parser outputs this into the following two files:

tokens/color/shadown.json

{ "color": { "shadow": { "lvl1": { "0": { "value": "#37444f4d" }, "1": { "value": "#37444f26" } }, } } }

tokens/size/shadown.json

{ "size": { "shadow": { "lvl1": { "0": { "offsetY": { "value": "0.8px" }, "blur": { "value": "2px" } }, "1": { "offsetY": { "value": "0.8px" }, "blur": { "value": "3.6px" }, "spread": { "value": "0.8px" } } } } } }

I'm taking these tokens and feeding them to SD using a simple configuration (format 'css/variables and a bunch of transforms 'attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'size/px', 'color/hex8') and the CSS output is as follows:

  --color-shadow-lvl1-0: #37444f4d;
  --color-shadow-lvl1-1: #37444f26;
  --size-shadow-lvl1-0-offset-y: 0.8px;
  --size-shadow-lvl1-0-blur: 2px;
  --size-shadow-lvl1-1-offset-y: 0.8px;
  --size-shadow-lvl1-1-blur: 3.6px;
  --size-shadow-lvl1-1-spread: 0.8px;

Is there a straight-forward way to combine these into what specify outputs?

  --lvl-1: 0px 0.8px 2px rgba(55, 68, 79, 0.3),
    0px 0.8px 3.6px 0.8px rgba(55, 68, 79, 0.15);