search

codyhouse / codyhouse-framework

A lightweight front-end framework for building accessible, bespoke interfaces.
https://codyhouse.co/
MIT License
1.16k stars 171 forks source link

REwork of global color & scales #103

Open oppenheimer- opened 3 years ago

oppenheimer- commented 3 years ago

When defining custom global colors, the UX suffers a lot when trying to build a custom scheme, where the colors do not depend on a scale.

For example:

  1. we define a base color, the scales are calculated automatically
  2. set custom HSL values for different shades
  3. change the base color
  4. all changes in 2. are lost

On the other hand it would be extremely beneficial for the color editor to support a custom lower and upper value and calculate everything in between is calculated with real HSL.

  1. set base color
  2. set lower color
  3. set upper color
  4. lighter / darker values are calculated

This brings me to another point: better color calculations. I'd like to recommend integrating the famous "chroma.js" library. Please have a look at their color scale implementation; especially the HSL mode differs perceptually alot from linear blending like now.

Changing the editor to support more or even less color variations would be very very handy, too. Custom naming would be necessary, too then.

sebastiano-guerriero commented 3 years ago

Hi!

I can see why point 1 can be an issue. Right now the color editor automatically updates all the color variations when the base color is changed. We couldn't figure out a way to 'lock' one among hue/saturation/lightness (which one should we 'lock'? when locking doesn't make sense?).

About point 2: We're already using chroma.js to generate the background + color contrasts. For all the other colors, we're generating the color variations by updating the lightness. I agree that lightness is not the only factor to consider when creating a color scale. For this reason, we make hue and saturation manually editable. The advantage I see in the way it works now: you can pick a single color instead of 3. Selecting 3 colors would require extra work for the user.

Thanks for the feedback. We'll certainly look into improving the color editor soon 👍

oppenheimer- commented 1 year ago

For this reason, we make hue and saturation manually editable.

And that was basically my pain point, too. The generated color scale, that should take the heavy lifting from you, oftentimes seems a bit off so we need to adjust HSL manually nonetheless. This became tedious for all the new themes i was setting up in the last year.

Something different though: an overhaul of the color editor would be absolutely sweet. I stumbled upon this awesome ai palette generator (api included). Maybe this is of interest to you in some way: huemint. Already spun my head around using this for a home grown color editor here.