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.
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`
})
}
})
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: