Once you save any file, the URL encodes your progress so it's easy to share!
Made for our Design System platform: Backlight.dev. Read the integration docs.
Style Dictionary can output to lots of different formats, for example Web or iOS.
Below is a card component which is based on the tokens. Try changing the card tokens!
Note: if you're viewing this on small viewport below 740px, the frame below will be set to mobile.
import StyleDictionary
from
'style-dictionary';
in the config. This is useful if you need for example formatHelpers
(e.g.
StyleDictionary.formatHelpers.fileHeader({ file }))
{ type:
'sd-tokens-request' },
{ type:
'sd-dictionary-request' }
or
{ type:
'sd-input-files-request' }
which will dispatch a MessageEvent to the source of the request with
either the tokens, the current dictionary instance, or all of the
input files and its contents. Useful for third-party integrations
through iframes. Note that for postMessage cloning, dictionary
instance is JSON.stringified as it contains functions.
You can load this app in an iframe with a project ID in the URL and then use postMessage to request all kinds of useful data from the style-dictionary-play instance, which the app will then send back with postMessage. Use '*' for origin.
{ type:
'sd-tokens-request' }
for just the rudimentary tokens object
{ type:
'sd-dictionary-request' }
for just the rudimentary dictionary object. This object will not
contain any methods because those cannot be cloned and sent over
postMessage.
{ type:
'sd-enriched-tokens-request'
}
for the full tokens and allTokens (flattened version of tokens) object
after running transforms and resolutions based on a specific platform.
This will give much more metadata about the tokens. You have to pass
the platform as a string property in the request message.
You can find which platforms are used by first sending an
sd-dictionary-request which contains the configured platforms.
{ type:
'sd-input-files-request' }
for all input files and their contents as strings.
For a full explanation, check out the blog we wrote about it.
We use a
browser patch
of
style-dictionary
in combination with
browserify
and a shim for file-system (e.g. memfs or
browserify-fs) to make the tool work in the browser.
We then use monaco-editor and some file-tree utilities to make the playground editor work with it.
The input files are encoded in the URL when you save files, making playground snippets easy to share with others!