@@ -1,6 +1,24 @@
1−
21# Possible API Changes
32
3+**Motivation**
4+
5+If we separate out alpha from the core color type, we can
6+
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.
10+
11+Ultimately I want the position of `elm-ui` to be something like the following:
12+
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"?
14+
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.
18+
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.
20+
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.
422
523## Element.Font
624
@@ -11,14 +29,13 @@
1129 -- if they really want it
1230 Font.opacity : Float -> Attribute msg
1331
14− Font.shadow :
32+ Font.shadow :
1533 { offset : (Float, Float)
1634 , blur : Float
1735 , color : Color
1836 , opacity : Float
1937 } -> Attribute msg
2038
21−
2239## Element.Background
2340
2441 Background.color : Color -> Attribute
@@ -27,11 +44,10 @@
2744 -- over an image background.
2845 Background.opacity : Float -> Attribute
2946
30−
3147For 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.
3349
34− Background.gradient :
50+ Background.gradient :
3551 { angle : Float
3652 , colors : List Color
3753 , opacity : List Float
@@ -51,14 +67,11 @@ In that way, we could have something like
5167
5268 Background.blend 0.5 color
5369
54−Which would set a color mode and set the background opacity. I'd need to play around with it, but seems kinda cool!
55−
56−
57−
70+Which would set a color mode and set the background opacity. I'd need to play around with it, but seems kinda cool!
5871
5972## Element.Border
6073
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.
6275
6376 Border.color : Color -> Attribute
6477
@@ -72,7 +85,7 @@ Sometimes a transparent border is used as a placeholder, and then we change a co
7285 , opacity : Float
7386 }
7487
75− Border.manyShadows :
88+ Border.manyShadows :
7689 List
7790 { offset : (Float, Float)
7891 , blur : Float
@@ -88,8 +101,7 @@ Sometimes a transparent border is used as a placeholder, and then we change a co
88101 , opacity : Float
89102 }
90103
91−
92−# Discussion and Usecases
104+# Discussion and Usecases
93105
94106The main question about binding alpha with color is:
95107
@@ -97,10 +109,9 @@ The main question about binding alpha with color is:
97109
98110Or would you want to set these things explicitly and independently of each other?
99111
100−
101112## Tinting and shading (i.e. lightening and darkening)
102113
103−*Note* - not sure what package would house these functions.
114+_Note_ - not sure what package would house these functions.
104115
105116We usually get in the habit of using alpha for an ad-hoc lightener/darkener.
106117This 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
113124
114125We 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).
115126
116− el
127+ el
117128 [ Background.color bg
118129 -- explicitly mix the two!
119130 , Font.color (Color.mix 0.2 white bg)
120131 ]
121132 (text "Howdy")
122−
123−
124−