Theme functions: createShades

[josch0]

I want to give users of my app the ability to add their own brand color to the theme. To do this, they would provide a single hex color value.

Therefore, a theme function that would automatically calculate all shades based on this single hex value would be great.

It would be important to make sure that the hex color value is inserted in the shades array at the position of the primaryShade.
(This is something that none of the color tools linked in the doc for creating shades can do).

Using the function could look like this:

theme = {{
    colors: {
        brand: theme.fn.createShades('#123456', 6),
    },
}}

Producing that:

brand: [ '#xxxxxx', '#xxxxxx', '#xxxxxx', '#xxxxxx', '#xxxxxx', '#xxxxxx', '#123456', '#xxxxxx', '#xxxxxx', '#xxxxxx' ]

I could try to program an example. There are certainly ready-made npm libraries for generating shades.

[josch0]

Ah I just realized, I don't have access to the theme functions at this point.

Then an alternative notation of the shades would be an idea and the creation is done by the theme provider under the hood.

theme = {{
    colors: {
        brand: { baseColor: '#123456', baseShade: 6 },
    },
}}

[rtivital]

Hi @josch0, I do not think that this should be done on library level, we provide a list of tools that you can use to generate colors in documentation. Adding this feature will mean that it will be required to depend on color library and I would like to avoid that.