A reusable Web Component for converting a Style Dictionary formatted JSON file or ZIP of JSON files to DTCG format.
Using Style Dictionary's DTCG conversion utilities.
With NPM:
npm install @tokens-studio/dtcg-convert// registers <dtcg-convert>
import '@tokens-studio/dtcg-convert/define';<dtcg-convert></dtcg-convert>Or with a custom label (which can also be set as a property through JS):
<dtcg-convert label="Convert me!"></dtcg-convert>Or with a different button element, which does not have to be a shoelace button, it could be your own:
<dtcg-convert>
<sl-button variant="neutral">Convert me!</sl-button>
</dtcg-convert>Note that since the component uses Shoelace button as a default, you will have to load a theme when using it, for light mode:
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css"
/>
</head>For dark mode you'll also have to set the dark theme class on the html element:
<html class="sl-theme-dark">
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css"
/>
</head>
</html>See Shoelace Themes Docs for more info
You may want to further customize this component's functionality.
The recommended way is by extending the base class and using method overrides:
import { html } from 'lit';
import { DtcgConvert } from '@tokens-studio/dtcg-convert';
class CustomDtcgConvert extends DtcgConvert {
// overrides
}This Web Component is published to NPM as an ES Module. It's usable in any modern JavaScript context out of the box with the exception that it uses bare import specifiers, for example:
import { render } from 'lit';By default, browsers won't know how to resolve the specifier 'lit', only absolute and relative paths are allowed.
This means you either need:
- a bundler like Rollup (needs
@rollup/plugin-node-resolve) - a smart dev server like Vite
- inject an import map that tells the browser how to resolve the specifier
The easiest solution if you're not familiar with bundlers and dev servers is to create an import map e.g. using JSPM.
If you've installed this module from NPM into your local project:
npx jspm install -p nodemodules @tokens-studio/dtcg-convertWhich creates an importmap.json file, the contents of which you can put inside an importmap script in your HTML:
<script type="importmap">
... import map contents here ...
</script>Alternatively, if you don't want to install from NPM locally and would rather just consume from a CDN like JSPM:
npx jspm install @tokens-studio/dtcg-convertSome CDNs like JSDelivr ESM or unpkg (using ?module query parameter) have ways of auto-resolving bare import specifiers for you, so adding an importmap might be optional in that case.