New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Style dictionary tokens #433
Conversation
Run & review this pull request in StackBlitz Codeflow. |
Fixed the references to existing tokens so now {
"radius": {
"1": {
"value": "2px",
"type": "border-radius"
},
"2": {
"value": "5px",
"type": "border-radius"
},
...
"conditional": {
"1": {
"value": "clamp(0px, calc(100vw - 100%) * 1e5, {radius.1.value})",
"type": "border-radius"
},
"2": {
"value": "clamp(0px, calc(100vw - 100%) * 1e5, {radius.2.value})",
"type": "border-radius"
},
...
}
}
} and {
"ease-squish": {
"1": {
"value": "{ease-elastic-in-out.1.value}",
"type": "other"
},
"2": {
"value": "{ease-elastic-in-out.2.value}",
"type": "other"
},
...
},
"ease-elastic": {
"1": {
"value": "{ease-elastic-out.1.value}",
"type": "other"
},
...
} |
nice, this looks good so far! what's left? thanks for hackin on this 🙂 |
I think I'm done! The missing part was to structure Output The updated output is available here for references. Demo Anyhow, a demo is available where I used Notes In a pure style dictionary project where using the generated tokens to build up your design system based on open-props, the basic config for style dictionary with css variables output only looks like the following // config.js file
const StyleDictionary = require('style-dictionary')
StyleDictionary.extend({
include: ['./node_modules/open-props/open-props.style-dictionary-tokens.json'],
source: ['tokens/**/*.json'],
platforms: {
css: {
// To preserve all the original values and units from the tokens, I am not using the predefined
// transformGroup: `css` here but a list of transforms, because it includes the `size/rem`
// transform clashing with values with units included into the definition.
transforms: ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css'],
buildPath: 'dist/',
files: [
{
destination: 'variables.css',
format: 'css/variables',
options: {
outputReferences: true
}
}
]
}
}
}).buildAllPlatforms() with some tokens like {
"color": {
"border": {
"default": {
"value": "{color.gray.4.value}",
"type": "color",
},
"primary": {
"value": "{color.indigo.7.value}",
"type": "color",
}
}
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for merging!!! |
Thank you @indaco 🎉 |
This PR implements the
toStyleDictionary
script to generate a style dictionary compliant json file namedopen-props.style-dictionary-tokens.json
Related to #288
It is a first draft to check if the approach works for you. In case I can continue and finalising it. E.g.
replace the reference to the CSS variables with the correct tokens (see below the sample for--radius-conditional
)The way I structured the tokens reflects the original naming convention. Here is the generated file for reference.
Below some examples:
colors
borders
sizes
--border-size-{1-5}
turns into
radius
turns into