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

{"color": {"yellow": {"0": {"value":"#fff9db","type":"color"      },"1": {"value":"#fff3bf","type":"color"      },...}

borders

sizes

--border-size-{1-5}

turns into

"border": {"size": {"1": {"value":"1px","type":"border-width"      },"2": {"value":"2px","type":"border-width"      },...    }  }

radius

--radius-{1-6}--radius-conditional-{1-6}

turns into

{"radius": {"1": {"value":"2px","type":"border-radius"    },"2": {"value":"5px","type":"border-radius"    },...."conditional": {"1": {"value":"clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1))","type":"border-radius"        },"2": {"value":"clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2))","type":"border-radius"        },...    }  }}

indaco added3 commits

October 22, 2023 19:19

feat: generate json for style dictionary

2b8cb4f

chore: update package-lock.json

b57e268

refactor(build/to-style-dictionary.js): maintains code consistency wi…

77c6534

…th others

Copy link

bolt-new-by-stackblitzbot commentedOct 23, 2023

Run & review this pull request inStackBlitz Codeflow.

fix(build/to-style-dictionary.js): references to existing tokens

cb1ff54

Copy link

ContributorAuthor

indaco commentedOct 23, 2023

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"      },...}

chore: add export entry foropen-props.style-dictionary-tokens.json

3a44bc5

Copy link

Owner

argyleink commentedOct 23, 2023

nice, this looks good so far! what's left?
have you tested importing the generated JSON?

thanks for hackin on this 🙂

indaco added4 commits

October 24, 2023 08:39

feat(build/to-style-dictionary.js): nested tokens for 'other' meta types

85baffa

refactor(build/to-style-dictionary.js): replace the forEach loop with…

017ea51

… reduce

style(build/to-style-dictionary.js): adhere to the formatting style o…

1c2efc4

…f the code

fix(build/to-style-dictionary.js): references to existing tokens when…

8b0d277

… nested

Copy link

ContributorAuthor

indaco commentedOct 24, 2023•
edited
Loading

I think I'm done!

The missing part was to structurenoise andnoise-filter as well asease and all its variants (avoiding excessive nesting).
Yes, I have run tests for the generated JSON in terms of values, references and correctness in my personal style dictionary project. Hope I did not miss anything.

Output

The updated output is availablehere for references.

Demo

Anyhow, ademo is available where I used@csstools/postcss-design-tokens as per in#288. Have a look to theapp.postcss file.

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 fileconstStyleDictionary=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",      }   }}