diegohaz/styled-tools

Improve Palette Types

blainemuri opened this issue · 0 comments

Bug In Documentation

As of now it lists that the second argument for palette is always any, but when there are three arguments the type interfaces enforces the second argument to be of type number. This can be better labeled in the documentation/readme
Screen Shot 2020-01-16 at 4 23 09 PM

Feature Request

It seems a bit weird to switch on the expected types, where the second value can be either the index or the default value. A possible extension of this could be to actually allow for string | number for both the first and second arguments and to declare the default as the prop within the component.

palette(arg1) => props.theme.palette[arg1] || defaultColor
palette(arg1, arg2) => props.theme.palette[arg1][arg2] || defaultColor
palette(arg1, arg2, arg3) => props.theme.palette[arg1]?.[arg2] || arg3

<ThemeProvider>
  <SomeElement defaultColor="#000000" />
</ThemeProvider>

What this allows is for each argument to be either a string or number, and to access either an array or an object in the same way. This gives for some nicer formatting of palette when there are several different color organization options, in addition to extending the model to support more options.

const theme = {
  palette: {
    solids: {
      black: '#000000',
      white: '#FFFFFF',
    },
    gradients: {
      blue: 'linear-gradient(135deg, #75F094 0%, #75B2F0 100%)',
    }
  }
}

If going with the latter solution, the documentation issue is moot and can be ignored.