Comments (12)
This should be pretty straightforward.
We just need to add a color : Color.Color
field such that you can ultimately do this in elm-repl:
> (Css.rgb 22 23 24).color
RGBA 22 23 24 1 : Color.Color
This would mean changing color : Compatible
to colorValue : Compatible
to avoid the namespace conflict. After that, we'll want some sort of mapColor
function like so:
mapColor : (Color.Color -> Color.Color) -> Css.Color -> Css.Color
> mapColor (\elmCoreColor -> Color.rgb 1 2 3) Css.rgba 99 88 77 0.5
{ value = "rgb(1, 2, 3)", colorValue = Compatible, warnings = [], color = RGBA 1 2 3 1 }
We could just take the resulting Color.Color
value returned from mapColor
's mapper function, store the new Color.Color
in the record, and update the record's value
based on the RGBA representation of the Color.Color
(or possibly just go rgb
in the specific case where the alpha value is 1).
from elm-css.
Just fyi, I finished the initial version of the color mixing library:
http://package.elm-lang.org/packages/mdgriffith/elm-color-mixing/1.0.2/
from elm-css.
Awesome! 🎉
from elm-css.
I'll take a stab at this over the next few days.
from elm-css.
So here's what I have after a couple hours of tinker arounding:
mapColor : (Color.Color -> Color.Color) -> Color -> Color
mapColor mapper cssColor =
let
{ red, green, blue, alpha } =
Color.toRgb << mapper
in
{ cssColor | colorValue = Compatible, red = red, green = green, blue = blue, alpha = alpha }
This doesn't work because mapper needs an additional argument. I'm relatively new to Elm, but I think this fits the general idea of the mapColor function, but I'm missing something crucial. If anyone can point out what I'm doing wrong here, that would be really helpful.
Also, this issue is really old and I noticed #167 was closed already. Is this issue relevant still?
from elm-css.
Any update on this? Color manipulation is the thing missing from elm-css to use it over sass.
from elm-css.
I started work on something similar on a branch...no ETA yet though. 🙂
from elm-css.
If I can help in any way, tell me.
from elm-css.
Btw, if anybody wants to chime into mdgriffith/elm-color-mixing#3 for the preferred syntax.
from elm-css.
Just out of curiosity, what is the status of this now?
I recently was converting over some Sass styles to elm-css
and realized that I didn't have a way of translating over the color mixing that I had.
from elm-css.
This feature would be very useful: currently I need to keep duplicate
colors for style-elements and Css which I use to style foreign app.
from elm-css.
Unfortunately this won't work out anymore based on the new "do everything at runtime" strategy. For performance reasons we'll be compiling directly to strings rather than keeping runtime metadata around like colors. So accessing the colors would require something like parsing the compiled CSS string, which doesn't sound like a good idea.
from elm-css.
Related Issues (20)
- `Css.important` on `Css.batch` output only applies to last Css.Style
- Empty style node emitted if no styles HOT 1
- Cannot use elm-css with lamdera HOT 1
- Runtime type error when using CSS in an SVG element's attributes HOT 6
- Hash Collisions: FNV vs Murmur3 HOT 1
- `<span> > <style>` wrapping in elm-css 17 has unexpected side effect inside grid container HOT 3
- Different behavior for multiple`css` attributes between root of tree and children HOT 1
- Extra gap when using (display: flex) and (justify-content: space-between) HOT 3
- Css classes not rendering correctly
- 17.0.4 generated class name is not added when there's also a set class name HOT 15
- Elm HTML's non-optimized XSS warning bypassed by elm-css
- CSP nonce support (to be able to protect against XSS attacks) HOT 5
- Safari animations HOT 2
- Duplicate inline styles?
- Error in documentation? HOT 1
- Alternative Stylesheets
- Support for flex box gap HOT 1
- Class names are not escaped
- Rename `generalSiblings`
- Add animation timing function
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 elm-css.