$dt()

$dt('token.path') (Design Tokens) is a build-time feature.

It allows you to make references to your tokens anywhere in your app.

It works in the following places:

• <style>
• <style lang="postcss">
• <script>
• <template>
• .css | .postcss | .less | .scss
• .ts | .js
• .tsx | .jsx
• .mjs | .cjs

Usage

defineTheme({  color: {    primary: {      100: 'red'    }  }})$dt('color.primary.100') // var(--color-primary-100)$dt('color.primary.100', 'value') // 'red'