design-tokens
design-tokens copied to clipboard
Published
20 hours ago •
lukasoppermann
lukasoppermann
How do you apply units?
@lukasoppermann I'm using your Figma demo file as an example. No units are being applied as a key/value pair, or appended to the value where applicable after Style Dictionary parses the JSON to CSS.
For example, shouldn't sizes-32 have pixels appended to its value?
Below is the exported JSON from Figma:
{
"sizes": {
"32": {
"description": "32.72px spacer component",
"value": 32.72,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"40": {
"description": null,
"value": 40,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"60": {
"description": null,
"value": 60,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"80": {
"description": null,
"value": 80,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"plain token": {
"description": null,
"value": 200,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"token in frame": {
"description": null,
"value": 200,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"token in group": {
"description": null,
"value": 200,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"in variant 60": {
"description": null,
"value": 60,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"in variant 90": {
"description": null,
"value": 90,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"in variant 120": {
"description": null,
"value": 120,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"frame": {
"description": null,
"value": 32,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"rect": {
"description": null,
"value": 32,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
},
"shape in component": {
"description": "Should use 32px not 20 from inside shape",
"value": 32,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "size"
}
}
}
},
"breakpoints": {
"lg": {
"description": null,
"value": 1280,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "breakpoint"
}
}
},
"sm": {
"description": null,
"value": 768,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "breakpoint"
}
}
},
"md": {
"description": null,
"value": 1024,
"type": "dimension",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "breakpoint"
}
}
}
},
"spacing": {
"10": {
"description": null,
"type": "custom-spacing",
"value": {
"top": 10,
"bottom": 10,
"left": 10,
"right": 10
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "spacing"
}
}
},
"mixed": {
"description": null,
"type": "custom-spacing",
"value": {
"top": 10,
"bottom": 30,
"left": 20,
"right": 20
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "spacing"
}
}
},
"top": {
"description": null,
"type": "custom-spacing",
"value": {
"top": 10,
"bottom": 0,
"left": 0,
"right": 0
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "spacing"
}
}
}
},
"borders": {
"single": {
"description": null,
"type": "custom-stroke",
"value": {
"align": "inside",
"dashPattern": [
0,
0
],
"lineCap": "none",
"lineJoin": "miter",
"miterLimit": 4,
"weight": 5,
"color": "#000000ff"
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "border"
}
}
},
"dashed outside": {
"description": null,
"type": "custom-stroke",
"value": {
"align": "outside",
"dashPattern": [
5,
5,
3,
3
],
"lineCap": "none",
"lineJoin": "miter",
"miterLimit": 4,
"weight": 5,
"color": "#000000ff"
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "border"
}
}
},
"single (style)": {
"description": null,
"type": "custom-stroke",
"value": {
"align": "inside",
"dashPattern": [
0,
0
],
"lineCap": "none",
"lineJoin": "miter",
"miterLimit": 4,
"weight": 5,
"color": "#044affff"
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "border"
}
}
},
"unsupported": {
"multiple borders": {
"description": null,
"type": "custom-stroke",
"value": {
"align": "inside",
"dashPattern": [
5,
10
],
"lineCap": "none",
"lineJoin": "miter",
"miterLimit": 4,
"weight": 5,
"color": "#ffe600ff"
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "border"
}
}
}
}
},
"radius": {
"5": {
"description": null,
"type": "custom-radius",
"value": {
"smoothing": 0,
"topLeft": 5,
"topRight": 5,
"bottomLeft": 5,
"bottomRight": 5
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "radius"
}
}
}
},
"radii": {
"smoothing": {
"description": null,
"type": "custom-radius",
"value": {
"smoothing": 0.75,
"topLeft": 10,
"topRight": 10,
"bottomLeft": 10,
"bottomRight": 10
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "radius"
}
}
},
"mixed": {
"description": null,
"type": "custom-radius",
"value": {
"smoothing": 0,
"topLeft": 5.5,
"topRight": 10,
"bottomLeft": 20,
"bottomRight": 15
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "radius"
}
}
}
},
"motion": {
"move in": {
"description": null,
"type": "custom-transition",
"value": {
"transitionType": "move_in",
"duration": 0.5,
"direction": "left",
"easingFunction": {
"x1": 0.41999998688697815,
"x2": 1,
"y1": 0,
"y2": 1
}
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "motion"
}
}
},
"dissolve": {
"description": null,
"type": "custom-transition",
"value": {
"transitionType": "dissolve",
"duration": 0.45,
"easingFunction": {
"x1": 0.6968395709991455,
"x2": 0.06683959811925888,
"y1": 0.052326660603284836,
"y2": 0.9323266744613647
}
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "motion"
}
}
},
"smart": {
"description": null,
"type": "custom-transition",
"value": {
"transitionType": "smart_animate",
"duration": 0.5,
"easingFunction": {
"x1": 0,
"x2": 1,
"y1": 0,
"y2": 1
}
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "motion"
}
}
},
"push": {
"description": null,
"type": "custom-transition",
"value": {
"transitionType": "push",
"duration": 0.5,
"direction": "left",
"easingFunction": {
"x1": 0.30000001192092896,
"x2": 0.699999988079071,
"y1": -0.05000000074505806,
"y2": -0.5
}
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"exportKey": "motion"
}
}
}
},
"gradient": {
"gradient": {
"single with multiple color stops": {
"description": "Four color stops from yellow to red",
"type": "custom-gradient",
"value": {
"gradientType": "radial",
"rotation": 180,
"stops": [
{
"position": 0,
"color": "#ffb800ff"
},
{
"position": 0.34,
"color": "#ff8a00ff"
},
{
"position": 0.65,
"color": "#ff2e00ff"
},
{
"position": 1,
"color": "#ff0000ff"
}
]
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:fe642a34bcdee92c73dbf4611e4ebf5145c3ab53,",
"exportKey": "gradient"
}
}
},
"multiple": {
"0": {
"type": "custom-gradient",
"value": {
"gradientType": "linear",
"rotation": 180,
"stops": [
{
"position": 0,
"color": "#ffb800ff"
},
{
"position": 1,
"color": "#ffb80000"
}
]
}
},
"1": {
"type": "custom-gradient",
"value": {
"gradientType": "radial",
"rotation": 180,
"stops": [
{
"position": 0,
"color": "#ffffffff"
},
{
"position": 1,
"color": "#ffffff00"
}
]
}
},
"2": {
"type": "custom-gradient",
"value": {
"gradientType": "angular",
"rotation": 180,
"stops": [
{
"position": 0,
"color": "#cf3030ff"
},
{
"position": 1,
"color": "#ffffff00"
}
]
}
},
"3": {
"type": "custom-gradient",
"value": {
"gradientType": "diamond",
"rotation": 180,
"stops": [
{
"position": 0,
"color": "#4a4fccff"
},
{
"position": 1,
"color": "#ffffff00"
}
]
}
},
"description": "",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:f9cf0e5d65a382a96fdedfdb0a3f27821b995e77,",
"exportKey": "gradient"
}
}
}
}
},
"color": {
"colors": {
"multiple fills": {
"0": {
"type": "color",
"value": "#40ffbaff"
},
"1": {
"type": "color",
"value": "#0000001a"
},
"description": "",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:81b218b9b61ad936bf3b7db2e81cca54ba10a2b1,",
"exportKey": "color"
}
}
},
"single blue": {
"description": "",
"type": "color",
"value": "#044affff",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:7cac43f716f83a2cf085e4b0e9195e2b94983a9c,",
"exportKey": "color"
}
}
},
"ref blue": {
"description": "Some other description",
"type": "color",
"value": "{color.colors.single blue}",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:20c1a3b217f88e8094df0a788c34f2a1631c3527,",
"exportKey": "color",
"alias": "color.colors.single blue"
}
}
},
"special characters": {
"😅": {
"description": "Emoji",
"type": "color",
"value": "#40df50ff",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:b0216a01a7188f90fa58cc5f2392663c40b7debe,",
"exportKey": "color"
}
}
},
"änderung": {
"description": "",
"type": "color",
"value": "#3456afff",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:b87141fd9d4e97e32fe167215b8a4bf8438b9aeb,",
"exportKey": "color"
}
}
}
}
},
"invalid": {
"empty": {
"description": "",
"type": "color",
"value": "#00000000",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:eca258fbed208d7a6551cbff664c3af91178eb66,",
"exportKey": "color"
}
}
}
},
"light": {
"background": {
"description": "",
"type": "color",
"value": "#ffffffff",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:0e835d644dba5213112c4e5fa986d47f4d1c2834,",
"exportKey": "color"
}
}
}
},
"dark": {
"background": {
"description": "",
"type": "color",
"value": "#000000ff",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:8961c4f4e15cad61aaafd096ae1d3a5b3a521046,",
"exportKey": "color"
}
}
}
}
},
"grid": {
"multiple": {
"0": {
"type": "custom-grid",
"value": {
"pattern": "columns",
"sectionSize": 1,
"gutterSize": 20,
"alignment": "max",
"count": 7,
"offset": 3
}
},
"1": {
"type": "custom-grid",
"value": {
"pattern": "columns",
"sectionSize": 12,
"gutterSize": 20,
"alignment": "center",
"count": 6
}
},
"2": {
"type": "custom-grid",
"value": {
"pattern": "columns",
"gutterSize": 20,
"alignment": "stretch",
"count": 5,
"offset": 10
}
},
"3": {
"type": "custom-grid",
"value": {
"pattern": "columns",
"sectionSize": 34,
"gutterSize": 20,
"alignment": "min",
"count": 4,
"offset": 13
}
},
"4": {
"type": "custom-grid",
"value": {
"pattern": "rows",
"sectionSize": 8,
"gutterSize": 20,
"alignment": "max",
"count": 5,
"offset": 10
}
},
"5": {
"type": "custom-grid",
"value": {
"pattern": "rows",
"sectionSize": 8,
"gutterSize": 10,
"alignment": "center",
"count": 4
}
},
"6": {
"type": "custom-grid",
"value": {
"pattern": "rows",
"sectionSize": 8,
"gutterSize": 20,
"alignment": "min",
"count": 3,
"offset": 10
}
},
"7": {
"type": "custom-grid",
"value": {
"pattern": "grid",
"sectionSize": 8
}
},
"description": "Grid / multiple description text",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:865dbb7ad3f104ae1691571ad1245719259fb4c1,",
"exportKey": "grid"
}
}
},
"single": {
"description": null,
"type": "custom-grid",
"value": {
"pattern": "columns",
"sectionSize": 11,
"gutterSize": 20,
"alignment": "center",
"count": 5
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:703729b2c406511e7489bd67ce37fdd863f14ca6,",
"exportKey": "grid"
}
}
}
},
"font": {
"body": {
"h3": {
"description": "Comment for text style",
"type": "custom-fontStyle",
"value": {
"fontSize": 20,
"textDecoration": "none",
"fontFamily": "Akzidenz-Grotesk Pro",
"fontWeight": 700,
"fontStyle": "normal",
"fontStretch": "condensed",
"letterSpacing": 0.4,
"lineHeight": 32,
"paragraphIndent": 5,
"paragraphSpacing": 8,
"textCase": "uppercase"
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:f99ee321cd6721038f52af2eb06833da36bb8fd8,",
"exportKey": "font"
}
}
},
"h4 strike through": {
"description": "With stylisitc options",
"type": "custom-fontStyle",
"value": {
"fontSize": 16,
"textDecoration": "line-through",
"fontFamily": "Roboto",
"fontWeight": 500,
"fontStyle": "italic",
"fontStretch": "normal",
"letterSpacing": 0,
"lineHeight": 19.2,
"paragraphIndent": 0,
"paragraphSpacing": 0,
"textCase": "none"
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:325bde22ee52610f4b4f0e278342b6cb48424b04,",
"exportKey": "font"
}
}
},
"italic": {
"type": "custom-fontStyle",
"value": {
"fontSize": 12,
"textDecoration": "none",
"fontFamily": "Roboto",
"fontWeight": 400,
"fontStyle": "italic",
"fontStretch": "normal",
"letterSpacing": 0,
"lineHeight": 14,
"paragraphIndent": 0,
"paragraphSpacing": 0,
"textCase": "none"
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:e761a9e3ad337a71cf04a055aec6c51676be9ac9,",
"exportKey": "font"
}
}
},
"extra bold condensed italic": {
"type": "custom-fontStyle",
"value": {
"fontSize": 12,
"textDecoration": "none",
"fontFamily": "Akzidenz-Grotesk Pro",
"fontWeight": 800,
"fontStyle": "italic",
"fontStretch": "condensed",
"letterSpacing": 0,
"lineHeight": 14.4,
"paragraphIndent": 0,
"paragraphSpacing": 0,
"textCase": "none"
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:0814b0736d7399d8363ce38ffb7642e774ac5e7c,",
"exportKey": "font"
}
}
},
"medium extended italic": {
"type": "custom-fontStyle",
"value": {
"fontSize": 20,
"textDecoration": "none",
"fontFamily": "Akzidenz-Grotesk Pro",
"fontWeight": 500,
"fontStyle": "italic",
"fontStretch": "expanded",
"letterSpacing": 0,
"lineHeight": 24,
"paragraphIndent": 0,
"paragraphSpacing": 0,
"textCase": "none"
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:078f24a3e259fb41a3f69eb1536aaf1e59e55e80,",
"exportKey": "font"
}
}
},
"super": {
"type": "custom-fontStyle",
"value": {
"fontSize": 22,
"textDecoration": "none",
"fontFamily": "Akzidenz-Grotesk Pro",
"fontWeight": 900,
"fontStyle": "normal",
"fontStretch": "normal",
"letterSpacing": 0,
"lineHeight": 26.4,
"paragraphIndent": 0,
"paragraphSpacing": 0,
"textCase": "none"
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:b71a265b78664d0d93b7b979f803774c2d001f80,",
"exportKey": "font"
}
}
}
}
},
"effect": {
"drop shadow (single)": {
"description": "Drop shadow single description",
"type": "custom-shadow",
"value": {
"shadowType": "dropShadow",
"radius": 4,
"color": "#00000040",
"offsetX": 0,
"offsetY": 4,
"spread": 0
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:eb6a290ed88091b32042155df27c45c064e65046,",
"exportKey": "effect"
}
}
},
"inner shadow (multiple)": {
"0": {
"type": "custom-shadow",
"value": {
"shadowType": "innerShadow",
"radius": 4,
"color": "#00000040",
"offsetX": 0,
"offsetY": 4,
"spread": 0
}
},
"1": {
"type": "custom-shadow",
"value": {
"shadowType": "innerShadow",
"radius": 1,
"color": "#000000ff",
"offsetX": 10,
"offsetY": 100,
"spread": 0.5
}
},
"2": {
"type": "custom-shadow",
"value": {
"shadowType": "innerShadow",
"radius": 3,
"color": "#00000040",
"offsetX": -4,
"offsetY": 2,
"spread": 11
}
},
"description": null,
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:c63e759950f94d9f19814d8477c3ae86edd204cf,",
"exportKey": "effect"
}
}
},
"layer blur": {
"description": null,
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:add1f5f1137d4c2d1244a10e190d7c0befd74bf9,",
"exportKey": "effect"
}
}
},
"background blur": {
"description": null,
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:fb79632c5b728272d4247ecc6331a1b796c842b3,",
"exportKey": "effect"
}
}
}
},
"typography": {
"body": {
"h3": {
"description": "Comment for text style",
"fontSize": {
"type": "dimension",
"value": 20
},
"textDecoration": {
"type": "string",
"value": "none"
},
"fontFamily": {
"type": "string",
"value": "Akzidenz-Grotesk Pro"
},
"fontWeight": {
"type": "number",
"value": 700
},
"fontStyle": {
"type": "string",
"value": "normal"
},
"fontStretch": {
"type": "string",
"value": "condensed"
},
"letterSpacing": {
"type": "dimension",
"value": 0.4
},
"lineHeight": {
"type": "dimension",
"value": 32
},
"paragraphIndent": {
"type": "dimension",
"value": 5
},
"paragraphSpacing": {
"type": "dimension",
"value": 8
},
"textCase": {
"type": "string",
"value": "uppercase"
}
},
"h4 strike through": {
"description": "With stylisitc options",
"fontSize": {
"type": "dimension",
"value": 16
},
"textDecoration": {
"type": "string",
"value": "line-through"
},
"fontFamily": {
"type": "string",
"value": "Roboto"
},
"fontWeight": {
"type": "number",
"value": 500
},
"fontStyle": {
"type": "string",
"value": "italic"
},
"fontStretch": {
"type": "string",
"value": "normal"
},
"letterSpacing": {
"type": "dimension",
"value": 0
},
"lineHeight": {
"type": "dimension",
"value": 19.2
},
"paragraphIndent": {
"type": "dimension",
"value": 0
},
"paragraphSpacing": {
"type": "dimension",
"value": 0
},
"textCase": {
"type": "string",
"value": "none"
}
},
"italic": {
"fontSize": {
"type": "dimension",
"value": 12
},
"textDecoration": {
"type": "string",
"value": "none"
},
"fontFamily": {
"type": "string",
"value": "Roboto"
},
"fontWeight": {
"type": "number",
"value": 400
},
"fontStyle": {
"type": "string",
"value": "italic"
},
"fontStretch": {
"type": "string",
"value": "normal"
},
"letterSpacing": {
"type": "dimension",
"value": 0
},
"lineHeight": {
"type": "dimension",
"value": 14
},
"paragraphIndent": {
"type": "dimension",
"value": 0
},
"paragraphSpacing": {
"type": "dimension",
"value": 0
},
"textCase": {
"type": "string",
"value": "none"
}
},
"extra bold condensed italic": {
"fontSize": {
"type": "dimension",
"value": 12
},
"textDecoration": {
"type": "string",
"value": "none"
},
"fontFamily": {
"type": "string",
"value": "Akzidenz-Grotesk Pro"
},
"fontWeight": {
"type": "number",
"value": 800
},
"fontStyle": {
"type": "string",
"value": "italic"
},
"fontStretch": {
"type": "string",
"value": "condensed"
},
"letterSpacing": {
"type": "dimension",
"value": 0
},
"lineHeight": {
"type": "dimension",
"value": 14.4
},
"paragraphIndent": {
"type": "dimension",
"value": 0
},
"paragraphSpacing": {
"type": "dimension",
"value": 0
},
"textCase": {
"type": "string",
"value": "none"
}
},
"medium extended italic": {
"fontSize": {
"type": "dimension",
"value": 20
},
"textDecoration": {
"type": "string",
"value": "none"
},
"fontFamily": {
"type": "string",
"value": "Akzidenz-Grotesk Pro"
},
"fontWeight": {
"type": "number",
"value": 500
},
"fontStyle": {
"type": "string",
"value": "italic"
},
"fontStretch": {
"type": "string",
"value": "expanded"
},
"letterSpacing": {
"type": "dimension",
"value": 0
},
"lineHeight": {
"type": "dimension",
"value": 24
},
"paragraphIndent": {
"type": "dimension",
"value": 0
},
"paragraphSpacing": {
"type": "dimension",
"value": 0
},
"textCase": {
"type": "string",
"value": "none"
}
},
"super": {
"fontSize": {
"type": "dimension",
"value": 22
},
"textDecoration": {
"type": "string",
"value": "none"
},
"fontFamily": {
"type": "string",
"value": "Akzidenz-Grotesk Pro"
},
"fontWeight": {
"type": "number",
"value": 900
},
"fontStyle": {
"type": "string",
"value": "normal"
},
"fontStretch": {
"type": "string",
"value": "normal"
},
"letterSpacing": {
"type": "dimension",
"value": 0
},
"lineHeight": {
"type": "dimension",
"value": 26.4
},
"paragraphIndent": {
"type": "dimension",
"value": 0
},
"paragraphSpacing": {
"type": "dimension",
"value": 0
},
"textCase": {
"type": "string",
"value": "none"
}
}
}
}
}
Below is the rendered CSS with hsl as transform :
:root {
--sizes-32: 32.72;
--sizes-40: 40;
--sizes-60: 60;
--sizes-80: 80;
--sizes-plain-token: 200;
--sizes-token-in-frame: 200;
--sizes-token-in-group: 200;
--sizes-in-variant-60: 60;
--sizes-in-variant-90: 90;
--sizes-in-variant-120: 120;
--sizes-frame: 32;
--sizes-rect: 32;
--sizes-shape-in-component: 32;
--breakpoints-lg: 1280;
--breakpoints-sm: 768;
--breakpoints-md: 1024;
--spacing-10: [object Object];
--spacing-mixed: [object Object];
--spacing-top: [object Object];
--borders-single: [object Object];
--borders-dashed-outside: [object Object];
--borders-single-style: [object Object];
--borders-unsupported-multiple-borders: [object Object];
--radius-5: [object Object];
--radii-smoothing: [object Object];
--radii-mixed: [object Object];
--motion-move-in: [object Object];
--motion-dissolve: [object Object];
--motion-smart: [object Object];
--motion-push: [object Object];
--gradient-gradient-single-with-multiple-color-stops: [object Object];
--gradient-gradient-multiple-0: [object Object];
--gradient-gradient-multiple-1: [object Object];
--gradient-gradient-multiple-2: [object Object];
--gradient-gradient-multiple-3: [object Object];
--color-colors-multiple-fills-0: hsl(158, 100%, 63%);
--color-colors-multiple-fills-1: hsla(0, 0%, 0%, 0.1);
--color-colors-single-blue: hsl(223, 100%, 51%);
--color-colors-ref-blue: hsl(223, 100%, 51%);
--color-colors-special-characters: hsl(126, 71%, 56%);
--color-colors-special-characters-nderung: hsl(223, 54%, 45%);
--color-invalid-empty: hsla(0, 0%, 0%, 0);
--color-light-background: hsl(0, 0%, 100%);
--color-dark-background: hsl(0, 0%, 0%);
--grid-multiple-0: [object Object];
--grid-multiple-1: [object Object];
--grid-multiple-2: [object Object];
--grid-multiple-3: [object Object];
--grid-multiple-4: [object Object];
--grid-multiple-5: [object Object];
--grid-multiple-6: [object Object];
--grid-multiple-7: [object Object];
--grid-single: [object Object];
--font-body-h3: [object Object];
--font-body-h4-strike-through: [object Object];
--font-body-italic: [object Object];
--font-body-extra-bold-condensed-italic: [object Object];
--font-body-medium-extended-italic: [object Object];
--font-body-super: [object Object];
--effect-drop-shadow-single: [object Object];
--effect-inner-shadow-multiple-0: [object Object];
--effect-inner-shadow-multiple-1: [object Object];
--effect-inner-shadow-multiple-2: [object Object];
--typography-body-h3-font-size: 20;
--typography-body-h3-text-decoration: none;
--typography-body-h3-font-family: Akzidenz-Grotesk Pro;
--typography-body-h3-font-weight: 700;
--typography-body-h3-font-style: normal;
--typography-body-h3-font-stretch: condensed;
--typography-body-h3-letter-spacing: 0.4;
--typography-body-h3-line-height: 32;
--typography-body-h3-paragraph-indent: 5;
--typography-body-h3-paragraph-spacing: 8;
--typography-body-h3-text-case: uppercase;
--typography-body-h4-strike-through-font-size: 16;
--typography-body-h4-strike-through-text-decoration: line-through;
--typography-body-h4-strike-through-font-family: Roboto;
--typography-body-h4-strike-through-font-weight: 500;
--typography-body-h4-strike-through-font-style: italic;
--typography-body-h4-strike-through-font-stretch: normal;
--typography-body-h4-strike-through-letter-spacing: 0;
--typography-body-h4-strike-through-line-height: 19.2;
--typography-body-h4-strike-through-paragraph-indent: 0;
--typography-body-h4-strike-through-paragraph-spacing: 0;
--typography-body-h4-strike-through-text-case: none;
--typography-body-italic-font-size: 12;
--typography-body-italic-text-decoration: none;
--typography-body-italic-font-family: Roboto;
--typography-body-italic-font-weight: 400;
--typography-body-italic-font-style: italic;
--typography-body-italic-font-stretch: normal;
--typography-body-italic-letter-spacing: 0;
--typography-body-italic-line-height: 14;
--typography-body-italic-paragraph-indent: 0;
--typography-body-italic-paragraph-spacing: 0;
--typography-body-italic-text-case: none;
--typography-body-extra-bold-condensed-italic-font-size: 12;
--typography-body-extra-bold-condensed-italic-text-decoration: none;
--typography-body-extra-bold-condensed-italic-font-family: Akzidenz-Grotesk Pro;
--typography-body-extra-bold-condensed-italic-font-weight: 800;
--typography-body-extra-bold-condensed-italic-font-style: italic;
--typography-body-extra-bold-condensed-italic-font-stretch: condensed;
--typography-body-extra-bold-condensed-italic-letter-spacing: 0;
--typography-body-extra-bold-condensed-italic-line-height: 14.4;
--typography-body-extra-bold-condensed-italic-paragraph-indent: 0;
--typography-body-extra-bold-condensed-italic-paragraph-spacing: 0;
--typography-body-extra-bold-condensed-italic-text-case: none;
--typography-body-medium-extended-italic-font-size: 20;
--typography-body-medium-extended-italic-text-decoration: none;
--typography-body-medium-extended-italic-font-family: Akzidenz-Grotesk Pro;
--typography-body-medium-extended-italic-font-weight: 500;
--typography-body-medium-extended-italic-font-style: italic;
--typography-body-medium-extended-italic-font-stretch: expanded;
--typography-body-medium-extended-italic-letter-spacing: 0;
--typography-body-medium-extended-italic-line-height: 24;
--typography-body-medium-extended-italic-paragraph-indent: 0;
--typography-body-medium-extended-italic-paragraph-spacing: 0;
--typography-body-medium-extended-italic-text-case: none;
--typography-body-super-font-size: 22;
--typography-body-super-text-decoration: none;
--typography-body-super-font-family: Akzidenz-Grotesk Pro;
--typography-body-super-font-weight: 900;
--typography-body-super-font-style: normal;
--typography-body-super-font-stretch: normal;
--typography-body-super-letter-spacing: 0;
--typography-body-super-line-height: 26.4;
--typography-body-super-paragraph-indent: 0;
--typography-body-super-paragraph-spacing: 0;
--typography-body-super-text-case: none;
}
It looks like the W3C standard spec setting doesn't work with your original Figma demo file. Regardless, I can't seem to get units appended to the font size values for example. Ideally, these should be rem units. Is there a specific JS function required by Style Dictionary to translate pixels to rems? I noticed these values are floats and not strings.
Hey, yes, you will need to create custom transformers. Don't worry, it sounds a lot more complicated than it is.
To append px to the units (you could change it form rem, or em as well) you just create this transformer: https://github.com/lukasoppermann/design-tokens/blob/main/examples/libs/web/sizePx.js
const sizeToPx = {
type: 'value',
matcher: function (token) {
return token.type === 'dimension' && token.value !== 0
},
transformer: function (token) {
return `${token.value}px`
}
}
To get it to run you need to create a file like build.js and run it instead of styleDictionary (node ./examples/build.js):
build.js:
const StyleDictionary = require('style-dictionary')
// PATHS
const basePath = './examples/'
const buildPath = basePath + 'build/'
// create transform group
StyleDictionary.registerTransformGroup({
name: 'custom/css',
transforms: StyleDictionary.transformGroup.css.concat([
'size/px'
])
});
// extend
const StyleDictionaryExtended = StyleDictionary.extend({
source: [basePath + 'input/*.json'],
platforms: {
css: {
transformGroup: 'custom/css',
buildPath: buildPath + '/css/',
files: [
{
format: 'custom/css',
destination: 'variables.css'
}
]
},
}
})
// run SD
StyleDictionaryExtended.buildAllPlatforms()
Let me know if you need more help or if this solves your question.
@lukasoppermann Thanks a bunch. I managed to get it working, but with some caveats. However, I'm unsure if this the right way.
I had to change: files: [{ format: 'custom/css' } ] to files: [{ format: 'css/variables' } ].
I also had to register this variable as a transform first:
const sizeToPx = {
type: 'value',
matcher: function (token) {
return token.type === 'dimension' && token.value !== 0
},
transformer: function (token) {
return `${token.value}px`
}
}
My complete build.js file:
const StyleDictionary = require('style-dictionary');
const basePath = './examples/';
const buildPath = basePath + 'build/';
StyleDictionary.registerTransform({
type: 'value',
name: 'size/px',
matcher: function (token) {
return token.type === 'dimension' && token.value !== 0;
},
transformer: function (token) {
return `${token.value}px`;
},
});
StyleDictionary.registerTransformGroup({
type: 'value',
name: 'custom/css',
transforms: StyleDictionary.transformGroup.css.concat(['size/px']),
});
const StyleDictionaryExtended = StyleDictionary.extend({
source: [basePath + 'input/*.json'],
platforms: {
css: {
transformGroup: 'custom/css',
buildPath: buildPath + '/css/',
files: [
{
format: 'css/variables',
destination: 'variables.css',
},
],
},
},
});
StyleDictionaryExtended.buildAllPlatforms();
@lukasoppermann I could've bothered you less it had looked a bit further. Thanks! https://github.com/lukasoppermann/design-token-transformer
@lukasoppermann it would be nice to be able to specify different actual formats (with it mapping to figma in px). for instance most of our UI inputs like radios and checkboxes in web are using REM to ensure those elements scale with browser font size changes. the other thing is we do us px as well for areas like padding and such where we don't want it scaling up too much with font size.
@lukasoppermann First of all thank you for your work. I found this issue while also trying to resolve our questions on units. As I understand from https://design-tokens.github.io/community-group/format/#dimension the dimension type should be a string and unit MUST also be specified (px or rem). Is this something that we can add or are there complexities here in retrieving that data from Figma? If so maybe we could add a plugin setting for specifying units on dimensions?
