$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'