Re: [community-group] Example json files? (#82)

Hi @c1rrus — I totally get the benefits and would love my code-driven variables to be able to simply be imported into a Figma or Sketch by an onboarded designer and I can't imagine the design tokens working group participants aren't far from making this a reality as it's such a no brainer.

As such, I elected to do this for my UI component library; while the tokens aren't adding anything to the project yet, I do think the interoperability will be helpful as it grows. Since asking this a couple weeks back I was able to refactor AgnosticUI's CSS custom properties to be derived from [design tokens](https://github.com/AgnosticUI/agnosticui/tree/master/agnostic-css/tokens)

```json
    "transform": "style-dictionary build --config ",
    "build:colors": "yarn transform ./tokens/colors/config.colors.json",
    "build:focus": "yarn transform ./tokens/focus/config.focus.json",
    "build:motion": "yarn transform ./tokens/motion/config.motion.json",
    "build:sizes": "yarn transform ./tokens/sizes/config.sizes.json",
    "build:type": "yarn transform ./tokens/typography/config.typography.json",
    "build:tokens": "yarn build:colors && yarn build:focus && yarn build:motion && yarn build:sizes && yarn build:type"
```

Once I read a page or two from the style dictionary docs it was pretty easy to generate the css custom properties. My defs are a bit flatter or denormalized then many of the examples but it was easy to accommodate that by simply using configurations per token type like:

```json
{
  "source": ["tokens/colors/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "public/css-src/",
      "prefix": "agnostic",
      "files": [{
        "format": "css/variables",
        "destination": "colors.css",
        "options": {
          "outputReferences": true
        }
      }]
    }
  }
}
```

@c1rrus I know this is nothing surprising to you but maybe it's of interest to others seeking an example and/or you as you document various examples ;-)

-- 
GitHub Notification of comment by roblevintennis
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/82#issuecomment-1001553445 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 27 December 2021 12:48:02 UTC