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

                  

                

              

              

                
                

                   Edit this page on GitHub