Open djmtype opened 2 years ago
djmtype
commented
2 years ago 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.
lukasoppermann
commented
2 years ago 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.
djmtype
commented
2 years ago @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
mikepaggi-abbvie
commented
1 year ago @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.
westende
commented
10 months ago @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?
@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-32have pixels appended to its value?Below is the exported JSON from Figma:
Below is the rendered CSS with hsl as transform :