Include SCSS file with variables

[leonardfischer]

Hello @mdbassit,

Thank you for the wonderful color picker. I was wondering if you would be willing to migrate the styling to the SCSS format and include (overwritable) variables to make the color picker more configurable.

I could also provide a pull request when I find some time ;)

[mdbassit]

Hello,

Thank you for the kind words. I'm looking into using CSS custom properties in the next release, but I currently have no plans to switch to SASS/SCSS.

[leonardfischer]

Okay, that's fine by me - I'm looking forward to the next release :)

[mdbassit]

@leonardfischer What aspects of the color picker you feel need to be more configurable?

[leonardfischer]

Hey @mdbassit I'd say these are the main parts that make sense to be configurable:

• Background color of the popup (light / dark)
• Styling of the input (Borderradius, active, hover, ...)
• Styling of the Sliders (Borderradius, size)
• Styling of the Swatches (Borderradius, Size)

But please don't stress this :) It is not mandatory for my usage

[mdbassit]

Alright, noted.

FYI, the background color can be set using the option themeMode which can be "light", "dark" or "auto" (uses the user's preferred color scheme that's set in the browser).

[silverwind]

Some CSS vars would be great for all colors (including box-shadows) and maybe border-radius. Such vars would remove the need to have themes because those themes could just be a set of CSS vars. For example:

.clr-picker {
  border-radius: var(--clr-border-radius, 10px);
  background-color: var(--clr-color-bg, #fff);
  box-shadow: 0 0 5px var(--clr-box-shadow-1, rgba(0,0,0,.05)), 0 5px 20px var(--clr-box-shadow-2, rgba(0,0,0,.1));
}

[mdbassit]

I think it's a bit of an overkill to use CSS custom properties just for that since all of these properties are used exactly once in the CSS code. It's just as good to override the properties in a custom stylesheet. That being said, I'm still thinking about how to use custom properties in a meaningful way for a future release.

[silverwind]

I recently customized the CSS and yes I do agree that not all colors make sense to expose as variables because they would never be altered like the gradient color. Stuff like backgrounds, borders, border radius and box shadows are good candidates for customization.

I doubt whether such vars will be enough for all cases. As part of my customization, I also altered a number of other things like margins, z-index and the whole rendering of the color box in the <input>. You can see the result here.

So I guess the best course of action is to offer the CSS as-is and deep integrations are expected to use their own altered copy of the CSS.

[mdbassit]

I doubt whether such vars will be enough for all cases. As part of my customization, I also altered a number of other things like margins, z-index and the whole rendering of the color box in the <input>. You can see the result here.

I like what you did with it.

So I guess the best course of action is to offer the CSS as-is and deep integrations are expected to use their own altered copy of the CSS.

That's exactly right. I included themes specifically to demonstrate that Coloris can be customized relatively easily with a little CSS.

[silverwind]

Yeah, I agree. It makes no sense to try to make it right for everyone with variables, so the themes are better seen as examples to be customized for deep integrations. Simple uses cases that don't care about styling can still use them as-is and they work to some degree, but with no guarantees. So I'd say close the issue.