diegohaz / diegohaz/styled-tools

Improve Palette Types

Open
#77 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
799
Forks
24
PR merge metrics
No merged PRs in 30d

Description

## 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](https://user-images.githubusercontent.com/5514877/72574034-8794d680-387c-11ea-9737-0574162c299d.png)

## 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

```

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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.