Use avh4/elm-color

elm.json

@@ -17,6 +17,7 @@
     ],
     "elm-version": "0.19.0 <= v < 0.20.0",
     "dependencies": {
+        "avh4/elm-color": "1.0.0 <= v < 2.0.0",
         "elm/core": "1.0.0 <= v < 2.0.0",
         "elm/html": "1.0.0 <= v < 2.0.0",
         "elm/json": "1.0.0 <= v < 2.0.0",

examples/Form.elm

@@ -12,23 +12,23 @@ import Element.Region as Region
 
 
 white =
-    Element.rgb 1 1 1
+    Color.rgb 1 1 1
 
 
 grey =
-    Element.rgb 0.9 0.9 0.9
+    Color.rgb 0.9 0.9 0.9
 
 
 blue =
-    Element.rgb 0 0 0.8
+    Color.rgb 0 0 0.8
 
 
 red =
-    Element.rgb 0.8 0 0
+    Color.rgb 0.8 0 0
 
 
 darkBlue =
-    Element.rgb 0 0 0.9
+    Color.rgb 0 0 0.9
 
 
 main =

experiments/font-adjustment-updated/FontAdjustment.elm

@@ -537,8 +537,8 @@ viewAdjustment label adjustment size left lineHeight updateWith =
                         , Element.height (Element.px 16)
                         , Border.rounded 8
                         , Border.width 1
-                        , Border.color (Element.rgb 0.5 0.5 0.5)
-                        , Background.color (Element.rgb 1 1 1)
+                        , Border.color (Color.rgb 0.5 0.5 0.5)
+                        , Background.color (Color.rgb 1 1 1)
                         ]
                 , value = adjustment
                 }

experiments/font-adjustment/FontAdjustment.elm

@@ -340,8 +340,8 @@ viewAdjustment label adjustment size left lineHeight updateWith =
                         , Element.height (Element.px 16)
                         , Border.rounded 8
                         , Border.width 1
-                        , Border.color (Element.rgb 0.5 0.5 0.5)
-                        , Background.color (Element.rgb 1 1 1)
+                        , Border.color (Color.rgb 0.5 0.5 0.5)
+                        , Background.color (Color.rgb 1 1 1)
 
                         -- , onRight
                         --     (el

experiments/workspace/Form.elm

@@ -13,23 +13,23 @@ import Html.Attributes
 
 
 white =
-    Element.rgb 1 1 1
+    Color.rgb 1 1 1
 
 
 grey =
-    Element.rgb 0.9 0.9 0.9
+    Color.rgb 0.9 0.9 0.9
 
 
 blue =
-    Element.rgb 0 0 0.8
+    Color.rgb 0 0 0.8
 
 
 red =
-    Element.rgb 0.8 0 0
+    Color.rgb 0.8 0 0
 
 
 darkBlue =
-    Element.rgb 0 0 0.9
+    Color.rgb 0 0 0.9
 
 
 main =

src/Element.elm

@@ -15,7 +15,6 @@ module Element exposing
     , layout, layoutWith, Option, noStaticStyleSheet, forceHover, noHover, focusStyle, FocusStyle
     , link, newTabLink, download, downloadAs
     , image
-    , Color, rgba, rgb, rgb255, rgba255, fromRgb, fromRgb255, toRgb
     , above, below, onRight, onLeft, inFront, behindContent
     , Attr, Decoration, mouseOver, mouseDown, focused
     , Device, DeviceClass(..), Orientation(..), classifyDevice
@@ -212,109 +211,14 @@ You'll also need to retrieve the initial window size. You can either use [`Brows
 
 -}
 
+import Color exposing (Color)
 import Html exposing (Html)
 import Html.Attributes
 import Internal.Flag as Flag exposing (Flag)
 import Internal.Model as Internal
 import Internal.Style exposing (classes)
 
 
-{-| -}
-type alias Color =
-    Internal.Color
-
-
-{-| Provide the red, green, and blue channels for the color.
-
-Each channel takes a value between 0 and 1.
-
--}
-rgb : Float -> Float -> Float -> Color
-rgb r g b =
-    Internal.Rgba r g b 1
-
-
-{-| -}
-rgba : Float -> Float -> Float -> Float -> Color
-rgba =
-    Internal.Rgba
-
-
-{-| Provide the red, green, and blue channels for the color.
-
-Each channel takes a value between 0 and 255.
-
--}
-rgb255 : Int -> Int -> Int -> Color
-rgb255 red green blue =
-    Internal.Rgba
-        (toFloat red / 255)
-        (toFloat green / 255)
-        (toFloat blue / 255)
-        1
-
-
-{-| -}
-rgba255 : Int -> Int -> Int -> Float -> Color
-rgba255 red green blue a =
-    Internal.Rgba
-        (toFloat red / 255)
-        (toFloat green / 255)
-        (toFloat blue / 255)
-        a
-
-
-{-| Create a color from an RGB record.
--}
-fromRgb :
-    { red : Float
-    , green : Float
-    , blue : Float
-    , alpha : Float
-    }
-    -> Color
-fromRgb clr =
-    Internal.Rgba
-        clr.red
-        clr.green
-        clr.blue
-        clr.alpha
-
-
-{-| -}
-fromRgb255 :
-    { red : Int
-    , green : Int
-    , blue : Int
-    , alpha : Float
-    }
-    -> Color
-fromRgb255 clr =
-    Internal.Rgba
-        (toFloat clr.red / 255)
-        (toFloat clr.green / 255)
-        (toFloat clr.blue / 255)
-        clr.alpha
-
-
-{-| Deconstruct a `Color` into its rgb channels.
--}
-toRgb :
-    Color
-    ->
-        { red : Float
-        , green : Float
-        , blue : Float
-        , alpha : Float
-        }
-toRgb (Internal.Rgba r g b a) =
-    { red = r
-    , green = g
-    , blue = b
-    , alpha = a
-    }
-
-
 {-| The basic building block of your layout.
 
     howdy : Element msg

src/Element/Background.elm

@@ -16,7 +16,8 @@ module Element.Background exposing
 
 -}
 
-import Element exposing (Attr, Attribute, Color)
+import Color exposing (Color)
+import Element exposing (Attr, Attribute)
 import Internal.Flag as Flag
 import Internal.Model as Internal
 import VirtualDom

src/Element/Border.elm

@@ -32,7 +32,8 @@ module Element.Border exposing
 
 -}
 
-import Element exposing (Attr, Attribute, Color)
+import Color exposing (Color)
+import Element exposing (Attr, Attribute)
 import Internal.Flag as Flag
 import Internal.Model as Internal
 import Internal.Style as Style exposing (classes)

src/Element/Font.elm

@@ -16,7 +16,7 @@ module Element.Font exposing
 
     view =
         Element.el
-            [ Font.color (Element.rgb 0 0 1)
+            [ Font.color (Color.rgb 0 0 1)
             , Font.size 18
             , Font.family
                 [ Font.typeface "Open Sans"
@@ -65,7 +65,8 @@ module Element.Font exposing
 
 -}
 
-import Element exposing (Attr, Attribute, Color)
+import Color exposing (Color)
+import Element exposing (Attr, Attribute)
 import Internal.Flag as Flag
 import Internal.Model as Internal
 import Internal.Style exposing (classes)

src/Element/Input.elm

@@ -184,7 +184,8 @@ Alternatively, see if it's reasonable to _not_ display an input if you'd normall
 
 -}
 
-import Element exposing (Attribute, Color, Element)
+import Color exposing (Color)
+import Element exposing (Attribute, Element)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Events as Events
@@ -205,15 +206,15 @@ type Placeholder msg
 
 
 white =
-    Element.rgb 1 1 1
+    Color.rgb 1 1 1
 
 
 darkGrey =
-    Element.rgb (186 / 255) (189 / 255) (182 / 255)
+    Color.rgb (186 / 255) (189 / 255) (182 / 255)
 
 
 charcoal =
-    Element.rgb
+    Color.rgb
         (136 / 255)
         (138 / 255)
         (133 / 255)
@@ -504,8 +505,8 @@ defaultThumb =
         , Element.height (Element.px 16)
         , Border.rounded 8
         , Border.width 1
-        , Border.color (Element.rgb 0.5 0.5 0.5)
-        , Background.color (Element.rgb 1 1 1)
+        , Border.color (Color.rgb 0.5 0.5 0.5)
+        , Background.color (Color.rgb 1 1 1)
         ]
 
 
@@ -1098,8 +1099,8 @@ renderPlaceholder (Placeholder placeholderAttrs placeholderEl) forPlaceholder on
             ++ [ Font.color charcoal
                , Internal.htmlClass (classes.noTextSelection ++ " " ++ classes.passPointerEvents)
                , Element.clip
-               , Border.color (Element.rgba 0 0 0 0)
-               , Background.color (Element.rgba 0 0 0 0)
+               , Border.color (Color.rgba 0 0 0 0)
+               , Background.color (Color.rgba 0 0 0 0)
                , Element.height Element.fill
                , Element.width Element.fill
                , Element.alpha
@@ -1760,13 +1761,13 @@ defaultRadioOption optionLabel status =
             , Border.color <|
                 case status of
                     Idle ->
-                        Element.rgb (208 / 255) (208 / 255) (208 / 255)
+                        Color.rgb (208 / 255) (208 / 255) (208 / 255)
 
                     Focused ->
-                        Element.rgb (208 / 255) (208 / 255) (208 / 255)
+                        Color.rgb (208 / 255) (208 / 255) (208 / 255)
 
                     Selected ->
-                        Element.rgb (59 / 255) (153 / 255) (252 / 255)
+                        Color.rgb (59 / 255) (153 / 255) (252 / 255)
             ]
             Element.none
         , Element.el [ Element.width Element.fill, Internal.htmlClass "unfocusable" ] optionLabel
@@ -2215,24 +2216,24 @@ defaultCheckbox checked =
         , Border.rounded 3
         , Border.color <|
             if checked then
-                Element.rgb (59 / 255) (153 / 255) (252 / 255)
+                Color.rgb (59 / 255) (153 / 255) (252 / 255)
 
             else
-                Element.rgb (211 / 255) (211 / 255) (211 / 255)
+                Color.rgb (211 / 255) (211 / 255) (211 / 255)
         , Border.shadow
             { offset = ( 0, 0 )
             , blur = 1
             , size = 1
             , color =
                 if checked then
-                    Element.rgba (238 / 255) (238 / 255) (238 / 255) 0
+                    Color.rgba (238 / 255) (238 / 255) (238 / 255) 0
 
                 else
-                    Element.rgb (238 / 255) (238 / 255) (238 / 255)
+                    Color.rgb (238 / 255) (238 / 255) (238 / 255)
             }
         , Background.color <|
             if checked then
-                Element.rgb (59 / 255) (153 / 255) (252 / 255)
+                Color.rgb (59 / 255) (153 / 255) (252 / 255)
 
             else
                 white