Skip to content

Instantly share code, notes, and snippets.

@peschee

peschee/shadow-test-case.md

Last active August 10, 2023 06:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save peschee/e89f41f4446ca9bf9e59b4f41df5d9b8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save peschee/e89f41f4446ca9bf9e59b4f41df5d9b8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. peschee revised this gist Aug 10, 2023. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions shadow-test-case.md
    View file
    Original file line number Diff line number Diff line change
    @@ -128,13 +128,13 @@ The `to-style-dictionary` parser outputs this into the following two files:
    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:

    ```css
    --vpb-color-shadow-lvl1-0: #37444f4d;
    --vpb-color-shadow-lvl1-1: #37444f26;
    --vpb-size-shadow-lvl1-0-offset-y: 0.8px;
    --vpb-size-shadow-lvl1-0-blur: 2px;
    --vpb-size-shadow-lvl1-1-offset-y: 0.8px;
    --vpb-size-shadow-lvl1-1-blur: 3.6px;
    --vpb-size-shadow-lvl1-1-spread: 0.8px;
    --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?
  2. peschee created this gist Aug 10, 2023.
    145 changes: 145 additions & 0 deletions shadow-test-case.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,145 @@
    # Shadows in CSS when using Figma + Specify + SD

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

    ```json
    {
    "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:

    ```css
    --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:

    <details>
    <summary>tokens/color/shadown.json</summary>
    <code>{
    "color": {
    "shadow": {
    "lvl1": { "0": { "value": "#37444f4d" }, "1": { "value": "#37444f26" } },
    }
    }
    }
    </code>
    </details>

    <details>
    <summary>tokens/size/shadown.json</summary>
    <code>{
    "size": {
    "shadow": {
    "lvl1": {
    "0": { "offsetY": { "value": "0.8px" }, "blur": { "value": "2px" } },
    "1": {
    "offsetY": { "value": "0.8px" },
    "blur": { "value": "3.6px" },
    "spread": { "value": "0.8px" }
    }
    }
    }
    }
    }
    </code>
    </details>

    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:

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

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

    ```css
    --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);
    ```