PageSourceSearch

https://styledictionary.com/info/dtcg/

html styledictionary.com collected 2026-10-03 22:29:41 UTC 55,095 bytes, 96 lines download raw bytes

1<!DOCTYPE html><html lang="en" dir="ltr" data-theme="dark" data-has-toc data-has-sidebar class="astro-xhecsxsk"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Design Tokens Community Group | Style Dictionary</title><link rel="canonical" href="https://styledictionary.com/info/dtcg/"/><link rel="sitemap" href="/sitemap-index.xml"/><link rel="shortcut icon" href="/favicon.png" type="image/png"/><meta name="generator" content="Astro v7.3.3"/><meta name="generator" content="Starlight v0.42.1"/><meta property="og:title" content="Design Tokens Community Group"/><meta property="og:type" content="article"/><meta property="og:url" content="https://styledictionary.com/info/dtcg/"/><meta property="og:locale" content="en"/><meta property="og:description" content="Export your Design Tokens to any platform. iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of. Forward-compatible with Design Token Community Group spec."/><meta property="og:site_name" content="Style Dictionary"/><meta name="twitter:card" content="summary_large_image"/><meta name="description" content="Export your Design Tokens to any platform. iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of. Forward-compatible with Design Token Community Group spec."/><meta name="keywords" content="style-dictionary, style dictionary, style, dictionary, design, tokens, design tokens, design system, DTCG, W3C, Design Token Community Group"/><meta name="theme-color" content="#11aea7"/><meta name="og:image" content="/meta-img.png"/><meta name="og:image:alt" content="Image of Style-Dictionary docs site"/>
1<script type="module" src="/_astro/Head.astro_astro_type_script_index_0_lang.Bo-JJUkl.js"></script>
1<script>
2	window.StarlightThemeProvider = (() => {
3		const storedTheme =
4			typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
5		const theme =
6			storedTheme ||
7			(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
8		document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
9		return {
10			updatePickers(theme = storedTheme || 'auto') {
11				document.querySelectorAll('starlight-theme-select').forEach((picker) => {
12					const select = picker.querySelector('select');
13					if (select) select.value = theme;
14					/** @type {HTMLTemplateElement | null} */
15					const tmpl = document.querySelector(`#theme-icons`);
16					const newIcon = tmpl && tmpl.content.querySelector('.' + theme);
17					if (newIcon) {
18						const oldIcon = picker.querySelector('svg.label-icon');
19						if (oldIcon) {
20							oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes);
21						}
22					}
23				});
24			},
25		};
26	})();
27</script>
27<template id="theme-icons"><svg aria-hidden="true" class="light astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Zm.64 5-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 1.41 0l.71-.71A1 1 0 0 0 5.64 17ZM12 5a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1Zm5.66 2.34a1 1 0 0 0 .7-.29l.71-.71a1 1 0 1 0-1.41-1.41l-.66.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.29Zm-12-.29a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.71-.71a1.004 1.004 0 1 0-1.43 1.41l.73.71ZM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Zm-2.64 6A1 1 0 0 0 17 18.36l.71.71a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.76-.66ZM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0 3.5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1Z"/></svg><svg aria-hidden="true" class="dark astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.64 13a1 1 0 0 0-1.05-.14 8.049 8.049 0 0 1-3.37.73 8.15 8.15 0 0 1-8.14-8.1 8.59 8.59 0 0 1 .25-2A1 1 0 0 0 8 2.36a10.14 10.14 0 1 0 14 11.69 1 1 0 0 0-.36-1.05Zm-9.5 6.69A8.14 8.14 0 0 1 7.08 5.22v.27a10.15 10.15 0 0 0 10.14 10.14 9.784 9.784 0 0 0 2.1-.22 8.11 8.11 0 0 1-7.18 4.32v-.04Z"/></svg><svg aria-hidden="true" class="auto astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg></template><link rel="stylesheet" href="/_astro/print.ehPL0gv-.css" media="print"><link rel="stylesheet" href="/_astro/common.Cf5rvZcE.css"><style>@layer starlight.components{:root{--sl-badge-default-border:var(--sl-color-accent);--sl-badge-default-bg:var(--sl-color-accent-low);--sl-badge-default-text:#fff;--sl-badge-note-border:var(--sl-color-blue);--sl-badge-note-bg:var(--sl-color-blue-low);--sl-badge-note-text:#fff;--sl-badge-danger-border:var(--sl-color-red);--sl-badge-danger-bg:var(--sl-color-red-low);--sl-badge-danger-text:#fff;--sl-badge-success-border:var(--sl-color-green);--sl-badge-success-bg:var(--sl-color-green-low);--sl-badge-success-text:#fff;--sl-badge-caution-border:var(--sl-color-orange);--sl-badge-caution-bg:var(--sl-color-orange-low);--sl-badge-caution-text:#fff;--sl-badge-tip-border:var(--sl-color-purple);--sl-badge-tip-bg:var(--sl-color-purple-low);--sl-badge-tip-text:#fff}[data-theme=light]:root{--sl-badge-default-bg:var(--sl-color-accent-high);--sl-badge-note-bg:var(--sl-color-blue-high);--sl-badge-danger-bg:var(--sl-color-red-high);--sl-badge-success-bg:var(--sl-color-green-high);--sl-badge-caution-bg:var(--sl-color-orange-high);--sl-badge-tip-bg:var(--sl-color-purple-high)}.sl-badge:where(.astro-olp73f6q){border:1px solid var(--sl-color-border-badge);font-family:var(--sl-font-system-mono);color:var(--sl-color-text-badge);background-color:var(--sl-color-bg-badge);overflow-wrap:anywhere;border-radius:.25rem;line-height:normal;display:inline-block}.sidebar-content .sl-badge:where(.astro-olp73f6q){line-height:1;font-size:var(--sl-text-xs);padding:.125rem .375rem}.sidebar-content a[aria-current=page]>.sl-badge:where(.astro-olp73f6q){--sl-color-bg-badge:transparent;--sl-color-border-badge:currentColor;color:inherit}.default:where(.astro-olp73f6q){--sl-color-bg-badge:var(--sl-badge-default-bg);--sl-color-border-badge:var(--sl-badge-default-border);--sl-color-text-badge:var(--sl-badge-default-text)}.note:where(.astro-olp73f6q){--sl-color-bg-badge:var(--sl-badge-note-bg);--sl-color-border-badge:var(--sl-badge-note-border);--sl-color-text-badge:var(--sl-badge-note-text)}.danger:where(.astro-olp73f6q){--sl-color-bg-badge:var(--sl-badge-danger-bg);--sl-color-border-badge:var(--sl-badge-danger-border);--sl-color-text-badge:var(--sl-badge-danger-text)}.success:where(.astro-olp73f6q){--sl-color-bg-badge:var(--sl-badge-success-bg);--sl-color-border-badge:var(--sl-badge-success-border);--sl-color-text-badge:var(--sl-badge-success-text)}.tip:where(.astro-olp73f6q){--sl-color-bg-badge:var(--sl-badge-tip-bg);--sl-color-border-badge:var(--sl-badge-tip-border);--sl-color-text-badge:var(--sl-badge-tip-text)}.caution:where(.astro-olp73f6q){--sl-color-bg-badge:var(--sl-badge-caution-bg);--sl-color-border-badge:var(--sl-badge-caution-border);--sl-color-text-badge:var(--sl-badge-caution-text)}.small:where(.astro-olp73f6q){font-size:var(--sl-text-xs);padding:.125rem .25rem}.medium:where(.astro-olp73f6q){font-size:var(--sl-text-sm);padding:.175rem .35rem}.large:where(.astro-olp73f6q){font-size:var(--sl-text-base);padding:.225rem .45rem}.sl-markdown-content :is(h1,h2,h3,h4,h5,h6) .sl-badge:where(.astro-olp73f6q){vertical-align:middle}}
28@layer starlight.components{starlight-file-tree:where(.astro-pzqify77){--x-space:1.5rem;--y-space:.125rem;--y-pad:0;border:1px solid var(--sl-color-gray-5);background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);padding:1rem;display:block;overflow-x:auto}starlight-file-tree:where(.astro-pzqify77) .directory>details{padding:0;background:0 0;border:0;padding-inline-start:var(--x-space)}starlight-file-tree:where(.astro-pzqify77) .directory>details>summary{padding:var(--y-pad) .625rem;color:var(--sl-color-white);border:0;max-width:100%;margin-inline-start:calc(-1 * var(--x-space));font-weight:400}starlight-file-tree:where(.astro-pzqify77) .directory>details>summary::marker,starlight-file-tree:where(.astro-pzqify77) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-pzqify77) .directory>details>summary:hover,starlight-file-tree:where(.astro-pzqify77) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:currentColor}starlight-file-tree:where(.astro-pzqify77) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-pzqify77) .directory>details>summary:hover .highlight .tree-icon{color:var(--sl-color-text-invert);fill:currentColor}starlight-file-tree:where(.astro-pzqify77) ul{border-inline-start:1px solid var(--sl-color-gray-5);margin-inline-start:.5rem;padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-pzqify77)>ul{border:0;margin:0;padding:0}starlight-file-tree:where(.astro-pzqify77) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-pzqify77) .file{color:var(--sl-color-white);margin-inline-start:calc(var(--x-space) - .125rem)}starlight-file-tree:where(.astro-pzqify77) .tree-entry{flex-wrap:wrap;align-items:flex-start;max-width:calc(100% - 1rem);display:inline-flex}@media (width>=30em){starlight-file-tree:where(.astro-pzqify77) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-pzqify77) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-pzqify77) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-pzqify77) .comment{color:var(--sl-color-gray-3);min-width:12rem;max-width:24rem;padding-inline-start:1.625rem}starlight-file-tree:where(.astro-pzqify77) .highlight{color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent);border-radius:.25rem;padding-inline-end:.5rem;display:inline-block}
28starlight-file-tree:where(.astro-pzqify77) svg{fill:var(--sl-color-gray-3);vertical-align:middle;width:.875rem;height:.875rem;margin-inline:.25rem .375rem;display:inline}starlight-file-tree:where(.astro-pzqify77) .highlight svg.tree-icon{fill:currentColor}}
29</style>
29<script type="module" src="/_astro/page.Dwipeu-R.js"></script>
29</head><body class="astro-xhecsxsk"><a class="sl-skip-link astro-7ulyckx7" href="#_top">Skip to content</a><div class="page sl-flex astro-tdn4ktfn"><header class="header astro-tdn4ktfn"><div class="header astro-l4ktdll4"><div class="title-wrapper sl-flex astro-l4ktdll4"><a href="/" class="site-title sl-flex astro-bfprscso"><img class="astro-bfprscso" alt="Style-Dictionary logo, Pascal the chameleon." src="/_astro/logo._n_OjEMs.png" width="800" height="800"><span class="astro-bfprscso" translate="no">Style Dictionary</span></a></div><div class="sl-flex print:hidden astro-l4ktdll4"><site-search class="astro-l4ktdll4 astro-3nsq2cwo" data-translations="{&quot;placeholder&quot;:&quot;Search&quot;}"><button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-3nsq2cwo"><svg aria-hidden="true" class="astro-3nsq2cwo astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg><span class="sl-hidden md:sl-block astro-3nsq2cwo" aria-hidden="true">Search</span><kbd class="sl-hidden md:sl-flex astro-3nsq2cwo" style="display: none;"><kbd class="astro-3nsq2cwo">Ctrl</kbd><kbd class="astro-3nsq2cwo">K</kbd></kbd></button><dialog style="padding:0" aria-label="Search" class="astro-3nsq2cwo"><div class="dialog-frame sl-flex astro-3nsq2cwo"><button data-close-modal class="sl-flex md:sl-hidden astro-3nsq2cwo">Cancel</button><div class="search-container astro-3nsq2cwo"><div id="starlight__search" class="astro-3nsq2cwo"></div></div></div></dialog></site-search>
29<script>
30	(() => {
31		const openBtn = document.querySelector('button[data-open-modal]');
32		const shortcut = openBtn?.querySelector('kbd');
33		if (!openBtn || !(shortcut instanceof HTMLElement)) return;
34		const platformKey = shortcut.querySelector('kbd');
35		if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
36			platformKey.textContent = '⌘';
37			openBtn.setAttribute('aria-keyshortcuts', 'Meta+K');
38		}
39		shortcut.style.display = '';
40	})();
41</script>
41<script type="module" src="/_astro/Search.astro_astro_type_script_index_0_lang.BuGLwjLu.js"></script>
41</div><div class="sl-hidden md:sl-flex print:hidden right-group astro-l4ktdll4"><div class="sl-flex social-icons astro-l4ktdll4"><a href="https://github.com/style-dictionary/style-dictionary" rel="me" class="sl-flex astro-tkjih7zv"><span class="sr-only astro-tkjih7zv">Github</span><svg aria-hidden="true" class="astro-tkjih7zv astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg></a><a href="https://join.slack.com/t/tokens-studio/shared_invite/zt-1p8ea3m6t-C163oJcN9g3~YZTKRgo2hg" rel="me" class="sl-flex astro-tkjih7zv"><span class="sr-only astro-tkjih7zv">Slack</span><svg aria-hidden="true" class="astro-tkjih7zv astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52Zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313ZM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834Zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312Zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834Zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312Zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52Zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313Z"/></svg></a></div><starlight-theme-select><label style="--sl-select-width: 6.25em" class="astro-xfot37iq"><span class="sr-only astro-xfot37iq">Select theme</span><svg aria-hidden="true" class="icon label-icon astro-xfot37iq astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg><select autocomplete="off" class="astro-xfot37iq"><option value="dark" class="astro-xfot37iq">Dark</option><option value="light" class="astro-xfot37iq">Light</option><option value="auto" selected class="astro-xfot37iq">Auto</option></select><svg aria-hidden="true" class="icon caret astro-xfot37iq astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg></label></starlight-theme-select>
41<script>
42	StarlightThemeProvider.updatePickers();
43</script>
43<script type="module">var e=`starlight-theme`,t=e=>e===`auto`||e===`dark`||e===`light`?e:`auto`,n=()=>t(typeof localStorage<`u`&&localStorage.getItem(e));function r(t){typeof localStorage<`u`&&localStorage.setItem(e,t===`light`||t===`dark`?t:``)}var i=()=>matchMedia(`(prefers-color-scheme: light)`).matches?`light`:`dark`;function a(e){StarlightThemeProvider.updatePickers(e),document.documentElement.dataset.theme=e===`auto`?i():e,r(e)}matchMedia(`(prefers-color-scheme: light)`).addEventListener(`change`,()=>{n()===`auto`&&a(`auto`)});var o=class extends HTMLElement{constructor(){super(),a(n()),this.querySelector(`select`)?.addEventListener(`change`,e=>{e.currentTarget instanceof HTMLSelectElement&&a(t(e.currentTarget.value))})}};customElements.define(`starlight-theme-select`,o);</script>
43<script type="module">var e=class extends HTMLElement{constructor(){super();let e=this.querySelector(`select`);e&&(e.addEventListener(`change`,e=>{e.currentTarget instanceof HTMLSelectElement&&(window.location.pathname=e.currentTarget.value)}),window.addEventListener(`pageshow`,t=>{if(!t.persisted)return;let n=e.querySelector(`option[selected]`)?.index;n!==e.selectedIndex&&(e.selectedIndex=n??0)}))}};customElements.define(`starlight-lang-select`,e);</script>
43</div></div></header><nav class="sidebar print:hidden astro-tdn4ktfn" aria-label="Main"><button popovertarget="starlight__sidebar" class="sl-menu-button sl-flex md:sl-hidden print:hidden astro-bb6fbulj"><svg aria-hidden="true" class="open-menu astro-bb6fbulj astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg><svg aria-hidden="true" class="close-menu astro-bb6fbulj astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="m13.41 12 6.3-6.29a1.004 1.004 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1.004 1.004 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 0 1.42.998.998 0 0 0 1.42 0l6.29-6.3 6.29 6.3a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.42L13.41 12Z"/></svg><span class="sr-only astro-bb6fbulj">Menu</span></button>
43<script type="module">var e=class extends HTMLElement{constructor(){super();let e=matchMedia(`(min-width: 50em)`),t=()=>{this.popover=e.matches?null:`auto`};t(),e.addEventListener(`change`,()=>t()),this.addEventListener(`toggle`,({newState:e})=>this.trapFocus(e===`open`))}trapFocus(e){document.querySelectorAll(`.main-frame, .sl-skip-link`).forEach(t=>{t.toggleAttribute(`inert`,e)})}};customElements.define(`sl-sidebar-pane`,e);</script>
43<sl-sidebar-pane popover id="starlight__sidebar" class="sidebar-pane astro-tdn4ktfn"><div class="sidebar-content sl-flex astro-tdn4ktfn"><sl-sidebar-state-persist data-hash="0vv9bil" class="astro-rgxh4l72">
43<script aria-hidden="true">
44		(() => {
45			try {
46				if (!matchMedia('(min-width: 50em)').matches) return;
47				/** @type {HTMLElement | null} */
48				const target = document.querySelector('sl-sidebar-state-persist');
49				const state = JSON.parse(sessionStorage.getItem('sl-sidebar-state') || '0');
50				if (!target || !state || target.dataset.hash !== state.hash) return;
51				window._starlightScrollRestore = state.scroll;
52				customElements.define(
53					'sl-sidebar-restore',
54					class SidebarRestore extends HTMLElement {
55						connectedCallback() {
56							try {
57								const idx = parseInt(this.dataset.index || '');
58								const details = this.closest('details');
59								if (details && typeof state.open[idx] === 'boolean') details.open = state.open[idx];
60							} catch {}
61						}
62					}
63				);
64			} catch {}
65		})();
66	</script>
66<ul class="top-level astro-k7p5qjdm"><li class="astro-k7p5qjdm"><details open class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">Getting Started</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="0"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/getting-started/installation/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Overview</span></a></li><li class="astro-k7p5qjdm"><a href="/getting-started/using_the_cli/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Using the CLI</span></a></li><li class="astro-k7p5qjdm"><a href="/getting-started/using_the_npm_module/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Using the NPM Module</span></a></li><li class="astro-k7p5qjdm"><a href="/getting-started/examples/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Examples</span></a></li></ul></details></li><li class="astro-k7p5qjdm"><details open class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">More info</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="1"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/info/tokens/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Design Tokens</span></a></li><li class="astro-k7p5qjdm"><a href="/info/architecture/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Architecture</span></a></li><li class="astro-k7p5qjdm"><a href="/info/package_structure/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Package Structure</span></a></li><li class="astro-k7p5qjdm"><a href="/info/dtcg/" aria-current="page" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Design Tokens Community Group</span></a></li></ul></details></li><li class="astro-k7p5qjdm"><details open class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">Versions</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="2"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><details open class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">v3</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="3"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="https://v3.styledictionary.com" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Documentation</span></a></li></ul></details></li><li class="astro-k7p5qjdm"><details open class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">v4</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewB
66ox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="4"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/versions/v4/migration" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Migration Guidelines</span></a></li><li class="astro-k7p5qjdm"><a href="/versions/v4/statement" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Statement</span></a></li></ul></details></li><li class="astro-k7p5qjdm"><details open class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">v5</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="5"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/versions/v5/migration" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Migration Guidelines</span></a></li></ul></details></li></ul></details></li><li class="astro-k7p5qjdm"><details open class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">Reference</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="6"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/reference/api" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">API</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/enums" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Enums</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/config" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Configuration</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/logging" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Logging</span></a></li><li class="astro-k7p5qjdm"><details class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">Hooks</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="7"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/reference/hooks/parsers" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Parsers</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/hooks/preprocessors" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Preprocessors</span></a></li><li class="astro-k7p5qjdm"><details class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">Transforms</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="8"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/reference/hooks/transforms/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Overview</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/hooks/transforms/predefined" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Built-in Transforms</span></a></li></ul></details></li><li class="astro-k7p5qjdm"><details class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">Transform Groups</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewB
66ox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="9"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/reference/hooks/transform-groups/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Overview</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/hooks/transform-groups/predefined" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Built-in Transform Groups</span></a></li></ul></details></li><li class="astro-k7p5qjdm"><details class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">Formats</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="10"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/reference/hooks/formats/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Overview</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/hooks/formats/helpers" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Format Helpers</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/hooks/formats/predefined" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Built-in Formats</span></a></li></ul></details></li><li class="astro-k7p5qjdm"><a href="/reference/hooks/filters" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Filters</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/hooks/file-headers" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">File Headers</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/hooks/actions" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Actions</span></a></li></ul></details></li><li class="astro-k7p5qjdm"><details class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">Utils</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="11"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/reference/utils/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Overview</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/utils/references" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">References</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/utils/tokens" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Tokens</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/utils/format-helpers" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Format Helpers</span></a></li><li class="astro-k7p5qjdm"><a href="/reference/utils/dtcg" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Design Token Community Group</span></a></li></ul></details></li><li class="astro-k7p5qjdm"><a href="/reference/types" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Types</span></a></li></ul></details></li><li class="astro-k7p5qjdm"><details open class="astro-k7p5qjdm"><summary class="astro-k7p5qjdm"><span class="group-label astro-k7p5qjdm"><span class="large astro-k7p5qjdm">Examples</span></span><svg aria-hidden="true" class="caret astro-k7p5qjdm astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="12"></sl-sidebar-restore><ul class="astro-k7p5qjdm"><li class="astro-k7p5qjdm"><a href="/examples/basic/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Basic Example</span></a></li><li class="astro-k7p5qjdm"><a href="/examples/splitting-output-files/" class="astro-k7p5qjdm"><span class="astro-k7p5qjdm">Splitting output files</span></a></li></ul></details></li></ul>
66<script aria-hidden="true">
67		(() => {
68			const scroller = document.getElementById('starlight__sidebar');
69			if (!window._starlightScrollRestore || !scroller) return;
70			scroller.scrollTop = window._starlightScrollRestore;
71			delete window._starlightScrollRestore;
72		})();
73	</script>
73</sl-sidebar-state-persist><div class="md:sl-hidden"><div class="mobile-preferences sl-flex astro-3xyq6wyj"><div class="social-icons astro-3xyq6wyj"><a href="https://github.com/style-dictionary/style-dictionary" rel="me" class="sl-flex astro-tkjih7zv"><span class="sr-only astro-tkjih7zv">Github</span><svg aria-hidden="true" class="astro-tkjih7zv astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg></a><a href="https://join.slack.com/t/tokens-studio/shared_invite/zt-1p8ea3m6t-C163oJcN9g3~YZTKRgo2hg" rel="me" class="sl-flex astro-tkjih7zv"><span class="sr-only astro-tkjih7zv">Slack</span><svg aria-hidden="true" class="astro-tkjih7zv astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52Zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313ZM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834Zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312Zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834Zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312Zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52Zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313Z"/></svg></a></div><starlight-theme-select><label style="--sl-select-width: 6.25em" class="astro-xfot37iq"><span class="sr-only astro-xfot37iq">Select theme</span><svg aria-hidden="true" class="icon label-icon astro-xfot37iq astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg><select autocomplete="off" class="astro-xfot37iq"><option value="dark" class="astro-xfot37iq">Dark</option><option value="light" class="astro-xfot37iq">Light</option><option value="auto" selected class="astro-xfot37iq">Auto</option></select><svg aria-hidden="true" class="icon caret astro-xfot37iq astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg></label></starlight-theme-select>
73<script>
74	StarlightThemeProvider.updatePickers();
75</script>
75</div></div></div></sl-sidebar-pane></nav><div class="main-frame astro-tdn4ktfn">
75<script type="module">var e=document.getElementById(`starlight__sidebar`),t=e?.querySelector(`sl-sidebar-state-persist`),n=`sl-sidebar-state`,r=()=>{let r=[],i=t?.dataset.hash||``;try{let e=sessionStorage.getItem(n),t=JSON.parse(e||`{}`);Array.isArray(t.open)&&t.hash===i&&(r=t.open)}catch{}return{hash:i,open:r,scroll:e?.scrollTop||0}},i=e=>{try{sessionStorage.setItem(n,JSON.stringify(e))}catch{}},a=()=>i(r()),o=(e,t)=>{let n=r();n.open[t]=e,i(n)};t?.addEventListener(`click`,e=>{if(!(e.target instanceof Element))return;let t=e.target.closest(`summary`)?.closest(`details`);if(!t)return;let n=t.querySelector(`sl-sidebar-restore`),r=parseInt(n?.dataset.index||``);isNaN(r)||o(!t.open,r)}),addEventListener(`visibilitychange`,()=>{document.visibilityState===`hidden`&&a()});</script>
75<div class="lg:sl-flex astro-y3n6oeqg"><aside class="right-sidebar-container print:hidden astro-y3n6oeqg"><div class="right-sidebar astro-y3n6oeqg"><div class="lg:sl-hidden astro-csuvpcqv"><mobile-starlight-toc data-min-h="2" data-max-h="4" class="astro-lcoaxhf5"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-lcoaxhf5"><details id="starlight__mobile-toc" class="astro-lcoaxhf5"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-lcoaxhf5"><span class="toggle sl-flex astro-lcoaxhf5">On this page<svg aria-hidden="true" class="caret astro-lcoaxhf5 astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></span><span class="display-current astro-lcoaxhf5"></span></summary><div class="dropdown astro-lcoaxhf5"><ul class="isMobile astro-yldcr6x5" style="--depth: 0;"><li style="--depth: 0;" class="astro-yldcr6x5"><a href="#_top" style="--depth: 0;" class="astro-yldcr6x5"><span style="--depth: 0;" class="astro-yldcr6x5">Overview</span></a></li><li style="--depth: 0;" class="astro-yldcr6x5"><a href="#convert-your-tokens-to-the-dtcg-format" style="--depth: 0;" class="astro-yldcr6x5"><span style="--depth: 0;" class="astro-yldcr6x5">Convert your tokens to the DTCG format</span></a></li><li style="--depth: 0;" class="astro-yldcr6x5"><a href="#live-demo" style="--depth: 0;" class="astro-yldcr6x5"><span style="--depth: 0;" class="astro-yldcr6x5">Live demo</span></a></li></ul></div></details></nav></mobile-starlight-toc>
75<script type="module" src="/_astro/MobileTableOfContents.astro_astro_type_script_index_0_lang.BcSo_yiZ.js"></script>
75</div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-csuvpcqv"><div class="sl-container astro-csuvpcqv"><starlight-toc data-min-h="2" data-max-h="4"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-yldcr6x5" style="--depth: 0;"><li style="--depth: 0;" class="astro-yldcr6x5"><a href="#_top" style="--depth: 0;" class="astro-yldcr6x5"><span style="--depth: 0;" class="astro-yldcr6x5">Overview</span></a></li><li style="--depth: 0;" class="astro-yldcr6x5"><a href="#convert-your-tokens-to-the-dtcg-format" style="--depth: 0;" class="astro-yldcr6x5"><span style="--depth: 0;" class="astro-yldcr6x5">Convert your tokens to the DTCG format</span></a></li><li style="--depth: 0;" class="astro-yldcr6x5"><a href="#live-demo" style="--depth: 0;" class="astro-yldcr6x5"><span style="--depth: 0;" class="astro-yldcr6x5">Live demo</span></a></li></ul></nav></starlight-toc>
75<script type="module" src="/_astro/TableOfContents.astro_astro_type_script_index_0_lang.Csloo1VZ.js"></script>
75</div></div></div></aside><div class="main-pane astro-y3n6oeqg"><main data-pagefind-body class="astro-xhecsxsk" lang="en" dir="ltr"><div class="content-panel astro-j63iqgdc"><div class="sl-container astro-j63iqgdc"><h1 id="_top" class="astro-c5i265od">Design Tokens Community Group</h1></div></div><div class="content-panel astro-j63iqgdc"><div class="sl-container astro-j63iqgdc"><div class="sl-markdown-content"><p>The <a href="https://www.w3.org/community/design-tokens/">Design Tokens W3C Community Group</a>’s (DTCG) goal is to “provide standards upon which products and design tools can rely for sharing stylistic pieces of a design system at scale”.</p>
76<p>The Community Group publishes a <a href="https://tr.designtokens.org/format/">specification defining how Design Tokens ought to be formatted</a> for cross-tool and cross-platform interoperability.</p>
77<p><strong>As of version 4</strong>, Style Dictionary has first-class support for the DTCG format.</p>
78<blockquote>
79<p>Important note: the latest format 2025.10 does not have full support yet in Style Dictionary
80<a href="https://github.com/style-dictionary/style-dictionary/issues/1590">This is a work in progress in v5</a></p>
81</blockquote>
82<div class="sl-heading-wrapper level-h2"><h2 id="convert-your-tokens-to-the-dtcg-format">Convert your tokens to the DTCG format</h2><a class="sl-anchor-link" href="#convert-your-tokens-to-the-dtcg-format"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore>Section titled “Convert your tokens to the DTCG format”</span></a></div>
83<p>We provide a tool that converts design tokens from the Style Dictionary v3 JSON format to the DTCG format:</p>
84<div spacer="true"></div>
85<sd-dtcg-convert></sd-dtcg-convert>
86<p>What it does:</p>
87<ul>
88<li>✅ Converts <code dir="auto">value</code>, <code dir="auto">type</code> and <code dir="auto">description</code> design token property keys into <code dir="auto">$value</code>, <code dir="auto">$type</code> and <code dir="auto">$description</code> respectively.</li>
89<li>✅ Moves <code dir="auto">$type</code> properties from the uppermost common ancestor token group to individual design tokens</li>
90</ul>
91<p>What it does not do (at the moment, <a href="https://github.com/style-dictionary/style-dictionary/issues/new?title=Conversion%20tool%20suggestion:%20%3Cyour-suggestion-here%3E">suggestions welcome</a>):</p>
92<ul>
93<li>⛔ It does not refactor type values commonly used to the DTCG types (for example: <code dir="auto">"$type": "size"</code> -> <code dir="auto">"$type": "dimension"</code>).</li>
94</ul>
95<div class="sl-heading-wrapper level-h2"><h2 id="live-demo">Live demo</h2><a class="sl-anchor-link" href="#live-demo"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore>Section titled “Live demo”</span></a></div>
96<sd-playground tokens="{&quot;value&quot;:&quot;{\n  \&quot;colors\&quot;: {\n    \&quot;$type\&quot;: \&quot;color\&quot;,\n    \&quot;black\&quot;: {\n      \&quot;$value\&quot;: \&quot;#000000\&quot;\n    },\n    \&quot;white\&quot;: {\n      \&quot;$value\&quot;: \&quot;#ffffff\&quot;\n    },\n    \&quot;orange\&quot;: {\n      \&quot;100\&quot;: {\n        \&quot;$value\&quot;: \&quot;#fffaf0\&quot;\n      },\n      \&quot;200\&quot;: {\n        \&quot;$value\&quot;: \&quot;#feebc8\&quot;\n      },\n      \&quot;300\&quot;: {\n        \&quot;$value\&quot;: \&quot;#fbd38d\&quot;\n      },\n      \&quot;400\&quot;: {\n        \&quot;$value\&quot;: \&quot;#f6ad55\&quot;\n      },\n      \&quot;500\&quot;: {\n        \&quot;$value\&quot;: \&quot;#ed8936\&quot;\n      },\n      \&quot;600\&quot;: {\n        \&quot;$value\&quot;: \&quot;#dd6b20\&quot;\n      },\n      \&quot;700\&quot;: {\n        \&quot;$value\&quot;: \&quot;#c05621\&quot;\n      },\n      \&quot;800\&quot;: {\n        \&quot;$value\&quot;: \&quot;#9c4221\&quot;\n      },\n      \&quot;900\&quot;: {\n        \&quot;$value\&quot;: \&quot;#7b341e\&quot;\n      }\n    }\n  },\n  \&quot;dimensions\&quot;: {\n    \&quot;0\&quot;: {\n      \&quot;$value\&quot;: \&quot;0px\&quot;\n    },\n    \&quot;1\&quot;: {\n      \&quot;$value\&quot;: \&quot;4px\&quot;\n    },\n    \&quot;2\&quot;: {\n      \&quot;$value\&quot;: \&quot;8px\&quot;\n    },\n    \&quot;3\&quot;: {\n      \&quot;$value\&quot;: \&quot;12px\&quot;\n    },\n    \&quot;4\&quot;: {\n      \&quot;$value\&quot;: \&quot;16px\&quot;\n    },\n    \&quot;5\&quot;: {\n      \&quot;$value\&quot;: \&quot;20px\&quot;\n    },\n    \&quot;6\&quot;: {\n      \&quot;$value\&quot;: \&quot;24px\&quot;\n    },\n    \&quot;7\&quot;: {\n      \&quot;$value\&quot;: \&quot;28px\&quot;\n    },\n    \&quot;8\&quot;: {\n      \&quot;$value\&quot;: \&quot;32px\&quot;\n    },\n    \&quot;9\&quot;: {\n      \&quot;$value\&quot;: \&quot;36px\&quot;\n    },\n    \&quot;10\&quot;: {\n      \&quot;$value\&quot;: \&quot;40px\&quot;\n    },\n    \&quot;11\&quot;: {\n      \&quot;$value\&quot;: \&quot;44px\&quot;\n    },\n    \&quot;12\&quot;: {\n      \&quot;$value\&quot;: \&quot;48px\&quot;\n    },\n    \&quot;13\&quot;: {\n      \&quot;$value\&quot;: \&quot;52px\&quot;\n    },\n    \&quot;14\&quot;: {\n      \&quot;$value\&quot;: \&quot;56px\&quot;\n    },\n    \&quot;15\&quot;: {\n      \&quot;$value\&quot;: \&quot;60px\&quot;\n    },\n    \&quot;$type\&quot;: \&quot;dimension\&quot;,\n    \&quot;max\&quot;: {\n      \&quot;$value\&quot;: \&quot;9999px\&quot;\n    }\n  },\n  \&quot;text\&quot;: {\n    \&quot;fonts\&quot;: {\n      \&quot;$type\&quot;: \&quot;fontFamily\&quot;,\n      \&quot;serif\&quot;: {\n        \&quot;$value\&quot;: \&quot;Times New Roman, serif\&quot;\n      },\n      \&quot;sans\&quot;: {\n        \&quot;$value\&quot;: \&quot;Open Sans, sans-serif\&quot;\n      }\n    },\n    \&quot;weights\&quot;: {\n      \&quot;$type\&quot;: \&quot;fontWeight\&quot;,\n      \&quot;light\&quot;: {\n        \&quot;$value\&quot;: \&quot;thin\&quot;\n      },\n      \&quot;regular\&quot;: {\n        \&quot;$value\&quot;: \&quot;regular\&quot;\n      },\n      \&quot;bold\&quot;: {\n        \&quot;$value\&quot;: \&quot;extra-bold\&quot;\n      }\n    },\n    \&quot;lineHeights\&quot;: {\n      \&quot;$type\&quot;: \&quot;number\&quot;,\n      \&quot;normal\&quot;: {\n        \&quot;$value\&quot;: 1.2\n      },\n      \&quot;large\&quot;: {\n        \&quot;$value\&quot;: 1.8\n      }\n    },\n    \&quot;typography\&quot;: {\n      \&quot;$type\&quot;: \&quot;typography\&quot;,\n      \&quot;heading\&quot;: {\n        \&quot;$value\&quot;: {\n          \&quot;fontFamily\&quot;: \&quot;{text.fonts.sans}\&quot;,\n          \&quot;fontWeight\&quot;: \&quot;{text.weights.bold}\&quot;,\n          \&quot;fontSize\&quot;: \&quot;{dimensions.7}\&quot;,\n          \&quot;lineHeight\&quot;: \&quot;{text.lineHeights.large}\&quot;\n        }\n      },\n      \&quot;body\&quot;: {\n        \&quot;$value\&quot;: {\n          \&quot;fontFamily\&quot;: \&quot;{text.fonts.serif}\&quot;,\n          \&quot;fontWeight\&quot;: \&quot;{text.weights.regular}\&quot;,\n          \&quot;fontSize\&quot;: \&quot;{dimensions.4}\&quot;,\n          \&quot;lineHeight\&quot;: \&quot;{text.lineHeights.normal}\&quot;\n        }\n      }\n    }\n  },\n  \&quot;transitions\&quot;: {\n    \&quot;$type\&quot;: \&quot;transition\&quot;,\n    \&quot;emphasis\&quot;: {\n      \&quot;$value\&quot;: {\n        \&quot;duration\&quot;: \&quot;{transitions.durations.medium}\&quot;,\n        \&quot;delay\&quot;: \&quot;{transitions.durations.instant}\&quot;,\n        \&quot;timingFunction\&quot;: \&quot;{transitions.easingFunctions.accelerate}\&quot;\n      }\n    },\n    \&quot;fade\&quot;: {\n      \&quot;$value\&quot;: {\n        \&quot;duration\&quot;: \&quot;{transitions.durations.long}\&quot;,\n        \&quot;delay\&quot;: \&quot;{transitions.durations.instant}\&quot;,\n        \&quot;timingFunction\&quot;: \&quot;{transitions.easingFunctions.decelerate}\&quot;\n      }\n    },\n    \&quot;easingFunctions\&quot;: {\n      \&quot;$type\&quot;: \&quot;cubicBezier\&quot;,\n      \&quot;accelerate\&quot;: {\n        \&quot;$value\&quot;: [\n          0.5,\n          0,\n          1,\n          1\n        ]\n      },\n      \&quot;decelerate\&quot;: {\n        \&quot;$value\&quot;: [\n          0,\n          0,\n          0.5,\n          1\n        ]\n      }\n    },\n    \&quot;durations\&quot;: {\n      \&quot;$type\&quot;: \&quot;duration\&quot;,\n      \&quot;instant\&quot;: {\n        \&quot;$value\&quot;: \&quot;0ms\&quot;\n      },\n      \&quot;short\&quot;: {\n        \&quot;$value\&quot;: \&quot;100ms\&quot;\n      },\n      \&quot;medium\&quot;: {\n        \&quot;$value\&quot;: \&quot;300ms\&quot;\n      },\n      \&quot;long\&quot;: {\n        \&quot;$value\&quot;: \&quot;600ms\&quot;\n      }\n    }\n  },\n  \&quot;borders\&quot;: {\n    \&quot;$type\&quot;: \&quot;border\&quot;,\n    \&quot;heavy\&quot;: {\n      \&quot;$value\&quot;: {\n        \&quot;color\&quot;: \&quot;{colors.black}\&quot;,\n        \&quot;width\&quot;: \&quot;{dimensions.1}\&quot;,\n        \&quot;style\&quot;: \&quot;{borders.styles.solid}\&quot;\n      }\n    },\n    \&quot;wireframe\&quot;: {\n      \&quot;$value\&quot;: {\n        \&quot;color\&quot;: \&quot;{colors.orange.600}\&quot;,\n        \&quot;width\&quot;: \&quot;{dimensions.2}\&quot;,\n        \&quot;style\&quot;: \&quot;{borders.styles.dashed}\&quot;\n      }\n    },\n    \&quot;styles\&quot;: {\n      \&quot;$type\&quot;: \&quot;strokeStyle\&quot;,\n      \&quot;solid\&quot;: {\n        \&quot;$value\&quot;: \&quot;solid\&quot;\n      },\n      \&quot;dashed\&quot;: {\n        \&quot;$value\&quot;: {\n          \&quot;dashArray\&quot;: [\n            \&quot;0.5rem\&quot;,\n            \&quot;0.25rem\&quot;\n          ],\n          \&quot;lineCap\&quot;: \&quot;round\&quot;\n        }\n      }\n    }\n  },\n  \&quot;shadows\&quot;: {\n    \&quot;$type\&quot;: \&quot;shadow\&quot;,\n    \&quot;sm\&quot;: {\n      \&quot;$value\&quot;: {\n        \&quot;color\&quot;: \&quot;{colors.black}\&quot;,\n        \&quot;offsetX\&quot;: \&quot;{dimensions.0}\&quot;,\n        \&quot;offsetY\&quot;: \&quot;{dimensions.1}\&quot;,\n        \&quot;blur\&quot;: \&quot;{dimensions.3}\&quot;\n      }\n    },\n    \&quot;lg\&quot;: {\n      \&quot;$value\&quot;: {\n        \&quot;color\&quot;: \&quot;{colors.black}\&quot;,\n        \&quot;offsetX\&quot;: \&quot;{dimensions.0}\&quot;,\n        \&quot;offsetY\&quot;: \&quot;{dimensions.2}\&quot;,\n        \&quot;blur\&quot;: \&quot;{dimensions.4}\&quot;\n      }\n    },\n    \&quot;multi\&quot;: {\n      \&quot;$value\&quot;: [\n        \&quot;{shadows.sm}\&quot;,\n        \&quot;{shadows.lg}\&quot;\n      ]\n    }\n  }\n}&quot;,&quot;lang&quot;:&quot;json&quot;}" default-selected="tokens" id="main-demo"><div style="height: 100%" slot="monaco-editor"></div></sd-playground></div><footer class="sl-flex astro-5ljdlb44"><div class="meta sl-flex astro-5ljdlb44"><a href="https://github.com/style-dictionary/style-dictionary/edit/main/docs/src/content/docs/info/
96DTCG.mdx" class="sl-flex print:hidden astro-efdyel5b"><svg aria-hidden="true" class="astro-efdyel5b astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.2em;"><path d="M22 7.24a1 1 0 0 0-.29-.71l-4.24-4.24a1 1 0 0 0-1.1-.22 1 1 0 0 0-.32.22l-2.83 2.83L2.29 16.05a1 1 0 0 0-.29.71V21a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .76-.29l10.87-10.93L21.71 8c.1-.1.17-.2.22-.33a1 1 0 0 0 0-.24v-.14l.07-.05ZM6.83 20H4v-2.83l9.93-9.93 2.83 2.83L6.83 20ZM18.17 8.66l-2.83-2.83 1.42-1.41 2.82 2.82-1.41 1.42Z"/></svg>Edit page</a></div><div class="pagination-links print:hidden astro-6amo5b5o" dir="ltr"><a href="/info/package_structure/" rel="prev" class="astro-6amo5b5o"><svg aria-hidden="true" class="astro-6amo5b5o astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg><span class="astro-6amo5b5o">Previous<br class="astro-6amo5b5o"><span class="link-title astro-6amo5b5o">Package Structure</span></span></a><a href="https://v3.styledictionary.com" rel="next" class="astro-6amo5b5o"><svg aria-hidden="true" class="astro-6amo5b5o astro-7oeb2fff" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg><span class="astro-6amo5b5o">Next<br class="astro-6amo5b5o"><span class="link-title astro-6amo5b5o">Documentation</span></span></a></div></footer></div></div></main></div></div></div></div></body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.