Style dictionary tokens

[indaco]

This PR implements the toStyleDictionary script to generate a style dictionary compliant json file named open-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

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

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[indaco]

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

[argyleink]

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

thanks for hackin on this 🙂

[indaco]

I think I'm done!

The missing part was to structure noise and noise-filter as well as ease 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 available here for references.

Demo

Anyhow, a demo is available where I used @csstools/postcss-design-tokens as per in #288. Have a look to the app.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 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",
      }
   }
}

[argyleink]

rad, looks good, thanks for contributing!

[indaco]

Thanks for merging!!!

[romainmenke]

Thank you @indaco 🎉