storybook-design-token
storybook-design-token copied to clipboard
Allow Control Types Config (ArgTypes)
Would be awesome if we could configure the input types, especially for the Colors.
Proposing a similar setup to the standard Storybook ArgTypes
Thinking that config per @presenter
type would be ideal, but would be nice to add custom control types on a per-design token basis too.
Presenter Config
const parameters = {
designToken: {
controls: {
// config per `@presenter` type here
Colors: {
type: 'color', presetColors: ['#ff0000', '#00ff00', '#0000ff']
},
BorderRadius: {
type: 'radio', options: ['0px', '4px', '8px', '16px'] }
}
}
}
Specific Design Hook Override Config
const parameters = {
designToken: {
controls: {
// object of design token specific overrides. Handy for enforcing specific values on specific tokens
overrides: {
'--theme-button-background': {
type: 'select', options: ['#ff0000', '#00ff00', '#0000ff']
}
}
}
}
}
Hey. Open for a PR if you would like to give it a try. I won't get to it anytime soon, unfortunately.