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