Skip to content
This repository was archived by the owner on Sep 26, 2023. It is now read-only.
This repository was archived by the owner on Sep 26, 2023. It is now read-only.

Enable users to create their own theme #7

@dslovinsky

Description

@dslovinsky

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions