@@ -1,6 +1,24 @@
2# Possible API Changes
1# Possible API Changes
5+If we separate out alpha from the core color type, we can
7+1. Have a unified `Color` type that works in all contexts, including in webGL situations where transparency may be handled differently, or not at all.
8+2. Encourage people to use actual color mixing functions where possible or to enumerate their colors concretely.
9+ - The point here is that alpha mixing can sometimes lead to colors that don't look great or are unexpected.
11+Ultimately I want the position of `elm-ui` to be something like the following:
13+1. `rgb`(both value based and hex) is more of an interop format than a color space you'd actually want to modify things in. Think, when have you ever thought "oh, just bump the red channel down a bit and you'll be good"?
15+ - As an interop format, it means it's what you're going to be copying from tools or receiving from a designer.
16+ - These tools generally have the ability to mix things properly.
17+ - By mixing things concretely, designers have more control over their ultimate design.
19+2. Transparency in most of these cases is still necessary or at the least convenient. It's not too difficult to treat that separately than the identity of a color value.
21+3. Ultimately we want to encourage people to use a colorspace like [HSLuv](https://package.elm-lang.org/packages/kuon/elm-hsluv/latest/). Basically any of the colorspaces that are based in [CIEXYZ colorspace](https://en.wikipedia.org/wiki/CIE_1931_color_space). They're much easier to use. - May not really seem related to alpha channels, but the idea is that doing things like `lightening` a color is much easier in these other colorspaces.
5## Element.Font
23## Element.Font
@@ -11,14 +29,13 @@
11 -- if they really want it
29 -- if they really want it
12 Font.opacity : Float -> Attribute msg
30 Font.opacity : Float -> Attribute msg
14− Font.shadow :
32+ Font.shadow :
15 { offset : (Float, Float)
33 { offset : (Float, Float)
16 , blur : Float
34 , blur : Float
17 , color : Color
35 , color : Color
18 , opacity : Float
36 , opacity : Float
19 } -> Attribute msg
37 } -> Attribute msg
22## Element.Background
39## Element.Background
24 Background.color : Color -> Attribute
41 Background.color : Color -> Attribute
@@ -27,11 +44,10 @@
27 -- over an image background.
44 -- over an image background.
28 Background.opacity : Float -> Attribute
45 Background.opacity : Float -> Attribute
31For gradients, we can have opacity as a separate set of steps.
47For gradients, we can have opacity as a separate set of steps.
32−This actually makes it _easier_ to do something like a rainbow that linearly fades away. We don't have to figure out the exact opacity that the 5th color has.
48+This actually makes it _easier_ to do something like a rainbow that linearly fades away. We don't have to figure out the exact opacity that the 5th color has.
34− Background.gradient :
50+ Background.gradient :
35 { angle : Float
51 { angle : Float
36 , colors : List Color
52 , colors : List Color
37 , opacity : List Float
53 , opacity : List Float
@@ -51,14 +67,11 @@ In that way, we could have something like
52 Background.blend 0.5 color
68 Background.blend 0.5 color
54−Which would set a color mode and set the background opacity. I'd need to play around with it, but seems kinda cool!
70+Which would set a color mode and set the background opacity. I'd need to play around with it, but seems kinda cool!
59## Element.Border
72## Element.Border
61−Sometimes a transparent border is used as a placeholder, and then we change a color on `mouseOver`. This is to avoid layout movement in the resulting animation.
74+Sometimes a transparent border is used as a placeholder, and then we change a color on `mouseOver`. This is to avoid layout movement in the resulting animation.
63 Border.color : Color -> Attribute
76 Border.color : Color -> Attribute
@@ -72,7 +85,7 @@ Sometimes a transparent border is used as a placeholder, and then we change a co
72 , opacity : Float
85 , opacity : Float
75− Border.manyShadows :
88+ Border.manyShadows :
77 { offset : (Float, Float)
90 { offset : (Float, Float)
78 , blur : Float
91 , blur : Float
@@ -88,8 +101,7 @@ Sometimes a transparent border is used as a placeholder, and then we change a co
88 , opacity : Float
101 , opacity : Float
92−# Discussion and Usecases
104+# Discussion and Usecases
94The main question about binding alpha with color is:
106The main question about binding alpha with color is:
@@ -97,10 +109,9 @@ The main question about binding alpha with color is:
98Or would you want to set these things explicitly and independently of each other?
110Or would you want to set these things explicitly and independently of each other?
101## Tinting and shading (i.e. lightening and darkening)
112## Tinting and shading (i.e. lightening and darkening)
103−*Note* - not sure what package would house these functions.
114+_Note_ - not sure what package would house these functions.
105We usually get in the habit of using alpha for an ad-hoc lightener/darkener.
116We usually get in the habit of using alpha for an ad-hoc lightener/darkener.
106This can easily be replicated with functions that actually operate on colors in elm.
117This can easily be replicated with functions that actually operate on colors in elm.
@@ -113,12 +124,9 @@ With the idea that this function should use the luminance from CIELUV instead of
114We also use alpha as an ad hoc way to mix two colors (i.e. [turn a font subtley green on a green background](https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886#9cdf).
125We also use alpha as an ad hoc way to mix two colors (i.e. [turn a font subtley green on a green background](https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886#9cdf).
117 [ Background.color bg
128 [ Background.color bg
118 -- explicitly mix the two!
129 -- explicitly mix the two!
119 , Font.color (Color.mix 0.2 white bg)
130 , Font.color (Color.mix 0.2 white bg)
121 (text "Howdy")
132 (text "Howdy")