Style-dictionary: Improve "complete" example

Created on 8 Jun 2020 · 6Comments · Source: amzn/style-dictionary

Documentation is very lacking, it looks like someone (me) starting writing some of the READMEs and didn't finish.
Get the example to more closely resemble the demo video
Add web outputs
Add some custom transforms/formats

Or maybe we should rethink having a "complete" example and a "basic" example altogether? Having a "complete" example might make it seem like everyone should start with that one. Just thinking out loud.

example code

Source

dbanksdesign

Most helpful comment

@dbanksdesign Perhaps this is already included in the above, but an example that generates the docs would be fantastic. Thanks!

juanfabrega on 8 Jun 2020

👍3

All 6 comments

@dbanksdesign Perhaps this is already included in the above, but an example that generates the docs would be fantastic. Thanks!

juanfabrega on 8 Jun 2020

👍3

@dbanksdesign also an example on how to generate a sketch file. If this exist could you point me in the right direction?

nevermind i think i found it

https://github.com/amzn/sketch-constructor/tree/master/__examples__/generating-sketch-from-style-dictionary

ocano12 on 18 Jun 2020

👍1

@ocano12 yup that one works. I think we should add a similar example in this repository as well though.

dbanksdesign on 18 Jun 2020

👍2

If by "web outputs" we mean rendering tokens as HTML presentable somewhere like Storybook or other design system docs, I wholeheartedly agree.

Design tokens (or a style dictionary) without documentation feels incomplete. A single source of truth is a great start. But how to share and use that truth is paramount. For starters, in our docs, I'm just rendering the raw built files in every format.

@dbanksdesign curious, what does Amazon do with their style dictionaries?

avkvirtru on 5 Aug 2020

We output JSON files which then get used in a React or Gastby site as data. I think having a storybook and Gatsby (or other doc site frameworks) would be great

dbanksdesign on 5 Aug 2020

👍1

Hi @dbanksdesign,

Great documentation! I am working on building Android and iOS tokens for mobile dev team. Will the complete 'android' and 'ios' example work with multiple themes? We are experiencing an issue where the token names need to have unique values across themes. Is there a way of resolving this issue? We have tried Android flavours - is there a similar solution for iOS?