Original color not kept?

fr3fou commented 3 years ago

I tried creating a theme by changing the gray color to "#0f1015", but when generating the colorscheme, this color is nowhere to be found. Is that supposed to be like that? Can it be changed?

{
  "colors": {
    "gray": {
      "50": "#F0F1F4",
      "100": "#D5D7E1",
      "200": "#BBBECE",
      "300": "#A0A4BB",
      "400": "#858BA8",
      "500": "#6A7195",
      "600": "#555B77",
      "700": "#404459",
      "800": "#2B2D3B",
      "900": "#15171E"
    }
  }
}

tomhicks commented 3 years ago

Hi, cheers for the issue.

I agree that's a bit annoying. It's down to how the color scales are generated, but I suppose I could make it work.

If you look here: https://github.com/tomhicks/themera/blob/main/src/atom.ts#L51 you can see that we take your input color, set its lightness to 50, then work from there up and down to make the scale.

Could change that to do something like:

1. take input color
2. measure lightness of input color
3. find closest number on the desired scale of lightnesses.
4. place input color at found position
5. derive other colors from that color

So if you gave it a very dark color, it might place that at position 800 and generate one darker and the rest lighter shades.

Do you fancy trying that yourself? I can help if you would like.

Probably best to start by extracting the color scale generation into its own function, away from the atom! This code isn't very well factored at all - I wrote the whole thing in an afternoon!

fr3fou commented 3 years ago

Thanks for the quick response! I could try and fix it, but I'm kinda really busy these next few weeks with school and personal projects, so I might not be able to do it soon. Also how would step 2 work? Side not, we could take a look at this https://www.npmjs.com/package/chakra-ui-color-generator and take some inspiration from it if it works the way we expect it.

fr3fou commented 3 years ago

after trying it, seems like it doesn't work as intended with this color

tomhicks commented 3 years ago

Step two would be

Color(input).lightness() - calling without a value returns the color's lightness, I think.

You'd probably need to generate all the desired lightnesses first, then do the same step up/down logic as is there now, just factored slightly more nicely

tomhicks / themera

Original color not kept? #3