Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@tokens-studio/dtcg-convert
Advanced tools
@tokens-studio/dtcg-convert
Conversion tool that converts Style Dictionary JSON formatted file(s) to DTCG
DTCG Convert Web Component & App
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.
Installation
With NPM:
npm install @tokens-studio/dtcg-convert
Usage
// 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/shoelace@2.19.1/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/shoelace@2.19.1/cdn/themes/dark.css"
/>
</head>
</html>
See Shoelace Themes Docs for more info
Extending
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
}
Bare import specifiers
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-convert
Which 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-convert
Some 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.
0.1.0
Minor Changes
- 15fa85f: First release of DTCG Convert Web Component.
FAQs
Conversion tool that converts Style Dictionary JSON formatted file(s) to DTCG
The npm package @tokens-studio/dtcg-convert receives a total of 1 weekly downloads. As such, @tokens-studio/dtcg-convert popularity was classified as not popular.
We found that @tokens-studio/dtcg-convert demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 14 Jan 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025