Comments (10)
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.
from coloris.
Okay, that's fine by me - I'm looking forward to the next release :)
from coloris.
@leonardfischer What aspects of the color picker you feel need to be more configurable?
from coloris.
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
from coloris.
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).
from coloris.
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));
}
from coloris.
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.
from coloris.
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.
from coloris.
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.
from coloris.
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.
from coloris.
Related Issues (20)
- Add 'Cancel' button (or any custom button) HOT 5
- Materializecss compatibility HOT 2
- Popup Input Issue HOT 3
- Mouse does not lineup on palette after scrolling in scrollable container HOT 3
- Add support for CSS custom properties (variables) HOT 1
- Colorpicker wraps all input fields on page load HOT 6
- I would like to contribute sass/scss to the repository HOT 4
- ARIA: issue with Inline `#clr-color-marker` HOT 6
- Incorrect output value of alpha channel in 8-digit Hex Code HOT 8
- The color picker doesn't stick to the input it scrolls along HOT 2
- Option to not style the input element HOT 8
- Make `el` and `parent` options accept `Node` HOT 12
- colorArea doesn't handle right mouse button HOT 2
- Feature Request: Add Eyedropper HOT 2
- Missing info in docs about setting up thumbnails HOT 4
- Not showing in absolute positioned div HOT 2
- Alpha channel loses information HOT 5
- colorArea issue with CSS zoom HOT 1
- Coloris does not call the onChange event if the mouse is released outside the colorArea HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from coloris.