sketch2react / stratos-tokens-app-feedback

Share your feedback on the Stratos Tokens app.
1 stars 0 forks source link

Material UI Design Tokens Demo.sketch not creating style dictionary variables #2

Closed AnthonySGeorge closed 3 years ago

AnthonySGeorge commented 3 years ago

How to recreate:

Drag the 'Material UI Design Tokens Demo.sketch' file into Stratos

go to View > project in terminal

In terminal run 'npm install' then npm run build

Output in terminal is : `

style-dictionary build

scss ✔︎ styledictionary/build/scss/_variables.scss

android ✔︎ styledictionary/build/android/font_dimens.xml ✔︎ styledictionary/build/android/colors.xml

ios No properties for StyleDictionaryColor.h. File not created. No properties for StyleDictionaryColor.m. File not created. No properties for StyleDictionarySize.h. File not created. No properties for StyleDictionarySize.m. File not created.

ios-swift ✔︎ styledictionary/build/ios-swift/StyleDictionary.swift

ios-swift-separate-enums No properties for StyleDictionaryColor.swift. File not created. No properties for StyleDictionarySize.swift. File not created. `

output in styledictionary/build/scss/_variables.scss

$light-theme-default-theme-config-typography-h6: 0.03125; only

juanofteamsketch2react commented 3 years ago

Hey @AnthonySGeorge 😺 That demo does not follow the naming conventions or structure of Style Dictionary, that's why it does not output everything correctly.

Take a look at this demo for reconstructing it: https://marketplace.sketch2react.io/product/stratos-styling-react-demo/

juanofteamsketch2react commented 3 years ago

Also look into this article for guidance 👉 https://sketch2react.io/blog/how-to-get-started-with-style-dictionary-stratos-tokens/

juanofteamsketch2react commented 3 years ago

We let you choose whatever structure and naming conventions you need, the Material-UI demo is setup to work with this demo website 👉 https://cimdalli.github.io/mui-theme-generator/

Which does not require to run everything through Style Dictionary since you get the raw design token json data and it works directly in the demo.

juanofteamsketch2react commented 3 years ago

You can also try with this one but it has not been updated for Tokens 2021 👉https://marketplace.sketch2react.io/product/ant-design-system-tokens-demo/