nuxt-modules / design-tokens

Design tokens module for Nuxt
https://design-tokens.nuxtjs.org
MIT License
50 stars 3 forks source link

Define global/theme keys #13

Closed Tahul closed 2 years ago

Tahul commented 2 years ago

Following the work done on Elements, it becomes clear the we need to define a set of "pre-defined" keys that are supported to suggest a naming convention over some usual values.

You can find a great list of potential values here: https://docs.figmatokens.com/tokens/available-tokens

As we are using this plugin ourselves, I think it might be handy to follow their naming convention.

Having these naming conventions suggested also gives us potential to build feature on top of this; such as being able to autocomplete values from compose() feature.

Would look like this:

defineTokens({
   spacing: {
      sm: '16px',
      lg: '32px',
   },
   components: {
      block: compose({
         width: '{*}'
                    // ^ This would receive autocomplete for `spacing.sm` and `spacing.lg`
      })
   }
})