Is your feature request related to a problem? Please describe.
Quarks optionally allow for theme values to be used within prop values, either through custom overwrites or eventually through callbacks. Currently the theme is hard-coded for testing purposes, but users should be able to provide their own.
Describe the solution you'd like
Ideally a theme should just be a JS object literal that users pass in as an argument in the setup function. Alternatively, it could be something defined in a config file at a path in the root of our choosing. Whatever avenue we go with we should probably also use for the ability to create custom overwrites.
Describe alternatives you've considered
None
Additional context
Imo the theme should be flatted down to two layers for ease of access as strings. This should occur internally allowing users to nest their theme however they want. Ex. a user provided theme like this:
const theme = {
colors: {
primary: {
25: '#F2F9FF',
50: '#E3F2FF',
100: '#BCDDFF',
200: '#90C9FF',
},
},
breakpoints: {
sm: '375px',
},
};
becomes this:
const theme = {
colors: {
primary25: '#F2F9FF',
primary50: '#E3F2FF',
primary100: '#BCDDFF',
primary200: '#90C9FF',
},
breakpoints: {
sm: '375px',
},
};
which can be done with the flattenObject function we already have.