quarks-css / quarks

A CSS-in-JS library for applying styles to React components via props
MIT License
3 stars 1 forks source link

Enable users to create their own theme #7

Open dslovinsky opened 1 year ago

dslovinsky commented 1 year ago

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.

jpwallace22 commented 1 year ago

I like it. I know the advantages of it. However, something like this flattenObject functionality needs to be documented very well. It goes against what a user would expect, and we should take extra care that it is understood.