From 90b31ca2e426b54fda09b5789e1f2ac201bf56d3 Mon Sep 17 00:00:00 2001 From: sharkdp Date: Sat, 5 Mar 2016 13:31:03 +0100 Subject: [PATCH] Use purescript-colors, fixes #22 --- .gitignore | 1 + bower.json | 3 +- package.json | 2 +- site/Main.js | 2 +- site/Main.purs | 7 +- src/CSS/Color.purs | 478 +----------------------------------------- src/CSS/Gradient.purs | 24 +-- src/CSS/Property.purs | 5 + test/Main.purs | 10 +- 9 files changed, 37 insertions(+), 495 deletions(-) diff --git a/.gitignore b/.gitignore index 307f9c0..b4cddd3 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ /bower_components/ /node_modules/ /output/ +site/psc.js diff --git a/bower.json b/bower.json index 064e8ad..842ad4a 100644 --- a/bower.json +++ b/bower.json @@ -26,7 +26,8 @@ "purescript-profunctor": "^0.3.1", "purescript-strings": "^0.7.0", "purescript-these": "^0.3.0", - "purescript-transformers": "^0.8.1" + "purescript-transformers": "^0.8.1", + "purescript-colors": "^0.4.3" }, "devDependencies": { "purescript-exceptions": "^0.3.0" diff --git a/package.json b/package.json index 7c27cb6..7b046af 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,6 @@ "gulp-jshint": "^1.11.2", "gulp-purescript": "^0.7.0", "gulp-run": "^1.6.8", - "purescript": "^0.7.6-rc.1" + "purescript": "^0.8.2" } } diff --git a/site/Main.js b/site/Main.js index ee40712..38d86ce 100644 --- a/site/Main.js +++ b/site/Main.js @@ -1,7 +1,7 @@ /* global exports */ "use strict"; -// module Main +// module Site exports.addStyleSheet = function(s){ diff --git a/site/Main.purs b/site/Main.purs index f98397b..0f6003f 100644 --- a/site/Main.purs +++ b/site/Main.purs @@ -1,5 +1,8 @@ module Site where +import Prelude hiding (top) + +import Data.List (List(..)) import Control.Monad.Eff import CSS.Animation import CSS.Background @@ -25,7 +28,7 @@ import CSS.Transition import Data.Maybe import Data.Tuple.Nested import DOM -import qualified Data.Array.NonEmpty as NEL +import Data.NonEmpty as NEL foreign import addStyleSheet :: forall eff. String -> Eff (dom::DOM | eff) Unit foreign import titleWidth :: forall eff. Eff (dom::DOM | eff) Number @@ -39,7 +42,7 @@ blue2 :: Color blue2 = rgb 238 238 255 backgroundGradient :: forall a. Angle a -> CSS -backgroundGradient a = backgroundImage $ linearGradient a (ColorPoint white (pct 0.0)) [] (ColorPoint blue2 (pct 100.0)) +backgroundGradient a = backgroundImage $ linearGradient a (uniformScale RGB white Nil blue2) shake :: (Number -> Number) -> CSS shake f = transforms [translate (px (f 3.0)) nil, rotate (deg (f 2.0))] diff --git a/src/CSS/Color.purs b/src/CSS/Color.purs index bd5d10a..b6e7af6 100644 --- a/src/CSS/Color.purs +++ b/src/CSS/Color.purs @@ -1,473 +1,7 @@ -module CSS.Color where - -import Prelude - -import Data.Foldable (intercalate) - -import CSS.Property -import CSS.String - -data Color = Rgba Int Int Int Int - | Hsla Number Number Number Number - | Other Value - -instance isStringColor :: IsString Color where - fromString = Other <<< fromString - -instance valColor :: Val Color where - value (Rgba r g b 255) = Value <<< fromString $ "rgb(" <> intercalate ", " [show r, show g, show b] <> ")" - value (Rgba r g b a) = Value <<< fromString $ "rgba(" <> intercalate ", " [show r, show g, show b, show a] <> ")" - value (Hsla h s l 1.0) = Value <<< fromString $ "hsl(" <> intercalate ", " [show h, show s, show l] <> ")" - value (Hsla h s l a) = Value <<< fromString $ "hsla(" <> intercalate ", " [show h, show s, show l, show a] <> ")" - value (Other v) = v - -rgba :: Int -> Int -> Int -> Int -> Color -rgba = Rgba - -rgb :: Int -> Int -> Int -> Color -rgb r g b = Rgba r g b 255 - -clamp :: Int -> Int -clamp n = if n < 0 then 0 else if n > 255 then 255 else n - -aliceblue :: Color -aliceblue = rgb 240 248 255 - -antiquewhite :: Color -antiquewhite = rgb 250 235 215 - -aqua :: Color -aqua = rgb 0 255 255 - -aquamarine :: Color -aquamarine = rgb 127 255 212 - -azure :: Color -azure = rgb 240 255 255 - -beige :: Color -beige = rgb 245 245 220 - -bisque :: Color -bisque = rgb 255 228 196 - -black :: Color -black = rgb 0 0 0 - -blanchedalmond :: Color -blanchedalmond = rgb 255 235 205 - -blue :: Color -blue = rgb 0 0 255 - -blueviolet :: Color -blueviolet = rgb 138 43 226 - -brown :: Color -brown = rgb 165 42 42 - -burlywood :: Color -burlywood = rgb 222 184 135 - -cadetblue :: Color -cadetblue = rgb 95 158 160 - -chartreuse :: Color -chartreuse = rgb 127 255 0 - -chocolate :: Color -chocolate = rgb 210 105 30 - -coral :: Color -coral = rgb 255 127 80 - -cornflowerblue :: Color -cornflowerblue = rgb 100 149 237 - -cornsilk :: Color -cornsilk = rgb 255 248 220 - -crimson :: Color -crimson = rgb 220 20 60 - -cyan :: Color -cyan = rgb 0 255 255 - -darkblue :: Color -darkblue = rgb 0 0 139 - -darkcyan :: Color -darkcyan = rgb 0 139 139 - -darkgoldenrod :: Color -darkgoldenrod = rgb 184 134 11 - -darkgray :: Color -darkgray = rgb 169 169 169 - -darkgreen :: Color -darkgreen = rgb 0 100 0 - -darkgrey :: Color -darkgrey = rgb 169 169 169 - -darkkhaki :: Color -darkkhaki = rgb 189 183 107 - -darkmagenta :: Color -darkmagenta = rgb 139 0 139 - -darkolivegreen :: Color -darkolivegreen = rgb 85 107 47 - -darkorange :: Color -darkorange = rgb 255 140 0 - -darkorchid :: Color -darkorchid = rgb 153 50 204 - -darkred :: Color -darkred = rgb 139 0 0 - -darksalmon :: Color -darksalmon = rgb 233 150 122 - -darkseagreen :: Color -darkseagreen = rgb 143 188 143 - -darkslateblue :: Color -darkslateblue = rgb 72 61 139 - -darkslategray :: Color -darkslategray = rgb 47 79 79 - -darkslategrey :: Color -darkslategrey = rgb 47 79 79 - -darkturquoise :: Color -darkturquoise = rgb 0 206 209 - -darkviolet :: Color -darkviolet = rgb 148 0 211 - -deeppink :: Color -deeppink = rgb 255 20 147 - -deepskyblue :: Color -deepskyblue = rgb 0 191 255 - -dimgray :: Color -dimgray = rgb 105 105 105 - -dimgrey :: Color -dimgrey = rgb 105 105 105 - -dodgerblue :: Color -dodgerblue = rgb 30 144 255 - -firebrick :: Color -firebrick = rgb 178 34 34 - -floralwhite :: Color -floralwhite = rgb 255 250 240 - -forestgreen :: Color -forestgreen = rgb 34 139 34 - -fuchsia :: Color -fuchsia = rgb 255 0 255 - -gainsboro :: Color -gainsboro = rgb 220 220 220 - -ghostwhite :: Color -ghostwhite = rgb 248 248 255 - -gold :: Color -gold = rgb 255 215 0 - -goldenrod :: Color -goldenrod = rgb 218 165 32 - -gray :: Color -gray = rgb 128 128 128 - -green :: Color -green = rgb 0 128 0 - -greenyellow :: Color -greenyellow = rgb 173 255 47 - -grey :: Color -grey = rgb 128 128 128 - -honeydew :: Color -honeydew = rgb 240 255 240 - -hotpink :: Color -hotpink = rgb 255 105 180 - -indianred :: Color -indianred = rgb 205 92 92 - -indigo :: Color -indigo = rgb 75 0 130 - -ivory :: Color -ivory = rgb 255 255 240 - -khaki :: Color -khaki = rgb 240 230 140 - -lavender :: Color -lavender = rgb 230 230 250 - -lavenderblush :: Color -lavenderblush = rgb 255 240 245 - -lawngreen :: Color -lawngreen = rgb 124 252 0 - -lemonchiffon :: Color -lemonchiffon = rgb 255 250 205 - -lightblue :: Color -lightblue = rgb 173 216 230 - -lightcoral :: Color -lightcoral = rgb 240 128 128 - -lightcyan :: Color -lightcyan = rgb 224 255 255 - -lightgoldenrodyellow :: Color -lightgoldenrodyellow = rgb 250 250 210 - -lightgray :: Color -lightgray = rgb 211 211 211 - -lightgreen :: Color -lightgreen = rgb 144 238 144 - -lightgrey :: Color -lightgrey = rgb 211 211 211 - -lightpink :: Color -lightpink = rgb 255 182 193 - -lightsalmon :: Color -lightsalmon = rgb 255 160 122 - -lightseagreen :: Color -lightseagreen = rgb 32 178 170 - -lightskyblue :: Color -lightskyblue = rgb 135 206 250 - -lightslategray :: Color -lightslategray = rgb 119 136 153 - -lightslategrey :: Color -lightslategrey = rgb 119 136 153 - -lightsteelblue :: Color -lightsteelblue = rgb 176 196 222 - -lightyellow :: Color -lightyellow = rgb 255 255 224 - -lime :: Color -lime = rgb 0 255 0 - -limegreen :: Color -limegreen = rgb 50 205 50 - -linen :: Color -linen = rgb 250 240 230 - -magenta :: Color -magenta = rgb 255 0 255 - -maroon :: Color -maroon = rgb 128 0 0 - -mediumaquamarine :: Color -mediumaquamarine = rgb 102 205 170 - -mediumblue :: Color -mediumblue = rgb 0 0 205 - -mediumorchid :: Color -mediumorchid = rgb 186 85 211 - -mediumpurple :: Color -mediumpurple = rgb 147 112 219 - -mediumseagreen :: Color -mediumseagreen = rgb 60 179 113 - -mediumslateblue :: Color -mediumslateblue = rgb 123 104 238 - -mediumspringgreen :: Color -mediumspringgreen = rgb 0 250 154 - -mediumturquoise :: Color -mediumturquoise = rgb 72 209 204 - -mediumvioletred :: Color -mediumvioletred = rgb 199 21 133 - -midnightblue :: Color -midnightblue = rgb 25 25 112 - -mintcream :: Color -mintcream = rgb 245 255 250 - -mistyrose :: Color -mistyrose = rgb 255 228 225 - -moccasin :: Color -moccasin = rgb 255 228 181 - -navajowhite :: Color -navajowhite = rgb 255 222 173 - -navy :: Color -navy = rgb 0 0 128 - -oldlace :: Color -oldlace = rgb 253 245 230 - -olive :: Color -olive = rgb 128 128 0 - -olivedrab :: Color -olivedrab = rgb 107 142 35 - -orange :: Color -orange = rgb 255 165 0 - -orangered :: Color -orangered = rgb 255 69 0 - -orchid :: Color -orchid = rgb 218 112 214 - -palegoldenrod :: Color -palegoldenrod = rgb 238 232 170 - -palegreen :: Color -palegreen = rgb 152 251 152 - -paleturquoise :: Color -paleturquoise = rgb 175 238 238 - -palevioletred :: Color -palevioletred = rgb 219 112 147 - -papayawhip :: Color -papayawhip = rgb 255 239 213 - -peachpuff :: Color -peachpuff = rgb 255 218 185 - -peru :: Color -peru = rgb 205 133 63 - -pink :: Color -pink = rgb 255 192 203 - -plum :: Color -plum = rgb 221 160 221 - -powderblue :: Color -powderblue = rgb 176 224 230 - -purple :: Color -purple = rgb 128 0 128 - -red :: Color -red = rgb 255 0 0 - -rosybrown :: Color -rosybrown = rgb 188 143 143 - -royalblue :: Color -royalblue = rgb 65 105 225 - -saddlebrown :: Color -saddlebrown = rgb 139 69 19 - -salmon :: Color -salmon = rgb 250 128 114 - -sandybrown :: Color -sandybrown = rgb 244 164 96 - -seagreen :: Color -seagreen = rgb 46 139 87 - -seashell :: Color -seashell = rgb 255 245 238 - -sienna :: Color -sienna = rgb 160 82 45 - -silver :: Color -silver = rgb 192 192 192 - -skyblue :: Color -skyblue = rgb 135 206 235 - -slateblue :: Color -slateblue = rgb 106 90 205 - -slategray :: Color -slategray = rgb 112 128 144 - -slategrey :: Color -slategrey = rgb 112 128 144 - -snow :: Color -snow = rgb 255 250 250 - -springgreen :: Color -springgreen = rgb 0 255 127 - -steelblue :: Color -steelblue = rgb 70 130 180 - -tan :: Color -tan = rgb 210 180 140 - -teal :: Color -teal = rgb 0 128 128 - -thistle :: Color -thistle = rgb 216 191 216 - -tomato :: Color -tomato = rgb 255 99 71 - -turquoise :: Color -turquoise = rgb 64 224 208 - -violet :: Color -violet = rgb 238 130 238 - -wheat :: Color -wheat = rgb 245 222 179 - -white :: Color -white = rgb 255 255 255 - -whitesmoke :: Color -whitesmoke = rgb 245 245 245 - -yellow :: Color -yellow = rgb 255 255 0 - -yellowgreen :: Color -yellowgreen = rgb 154 205 50 +module CSS.Color + ( module Color + , module Color.Scheme.X11 + ) where +import Color +import Color.Scheme.X11 diff --git a/src/CSS/Gradient.purs b/src/CSS/Gradient.purs index 81ab074..d8f5412 100644 --- a/src/CSS/Gradient.purs +++ b/src/CSS/Gradient.purs @@ -1,18 +1,16 @@ -module CSS.Gradient where +module CSS.Gradient + ( module Color.Scale + , linearGradient + ) where import Prelude -import Data.Foldable (intercalate) +import CSS.Background (BackgroundImage(..)) +import CSS.Property (value) +import CSS.Size (Angle) +import CSS.String (fromString) -import CSS.Background -import CSS.Color -import CSS.Property -import CSS.Size -import CSS.String +import Color.Scale -data ColorPoint = ColorPoint Color (Size Rel) - -linearGradient :: forall a. Angle a -> ColorPoint -> Array ColorPoint -> ColorPoint-> BackgroundImage -linearGradient a b cs e = BackgroundImage $ fromString "linear-gradient(" <> value a <> fromString ", " <> points <> fromString ")" - where colorPoint (ColorPoint a b) = value a <> fromString " " <> value b - points = intercalate (fromString ", ") $ [colorPoint b] <> (colorPoint <$> cs) <> [colorPoint e] +linearGradient :: forall a. Angle a -> ColorScale -> BackgroundImage +linearGradient a cs = BackgroundImage $ fromString "linear-gradient(" <> value a <> fromString (", " <> cssColorStops cs <> ")") diff --git a/src/CSS/Property.purs b/src/CSS/Property.purs index 28fd351..f1bd907 100644 --- a/src/CSS/Property.purs +++ b/src/CSS/Property.purs @@ -9,6 +9,8 @@ import Data.NonEmpty (NonEmpty(), oneOf) import Data.Profunctor.Strong (second) import Data.Tuple (Tuple(..), lookup) +import Color (Color, cssStringHSLA) + import CSS.String data Prefixed = Prefixed (Array (Tuple String String)) @@ -79,5 +81,8 @@ instance valList :: (Val a) => Val (Array a) where instance valNonEmpty :: (Val a) => Val (NonEmpty Array a) where value = value <<< oneOf +instance valColor :: Val Color where + value = fromString <<< cssStringHSLA + noCommas :: forall a. (Val a) => Array a -> Value noCommas = intercalate (fromString " ") <<< (value <$>) diff --git a/test/Main.purs b/test/Main.purs index 00398fc..86dd670 100644 --- a/test/Main.purs +++ b/test/Main.purs @@ -27,12 +27,12 @@ example2 = render do example3 :: Rendered example3 = render do - border dashed (px 2.0) green + border dashed (px 2.0) blue example4 :: Rendered example4 = render do body ? do - color green + color blue fromString "#world" ? do display block @@ -41,12 +41,12 @@ assertEqual x y = unless (x == y) <<< throwException <<< error $ "Assertion fail main :: Eff (err :: EXCEPTION) Unit main = do - renderedInline example1 `assertEqual` Just "color: rgb(255, 0, 0); display: block" + renderedInline example1 `assertEqual` Just "color: hsl(0.0, 100.0%, 50.0%); display: block" renderedInline example2 `assertEqual` Just "display: inline-block" - renderedInline example3 `assertEqual` Just "border: dashed 2.0px rgb(0, 128, 0)" + renderedInline example3 `assertEqual` Just "border: dashed 2.0px hsl(240.0, 100.0%, 50.0%)" selector (Selector (Refinement [Id "test"]) Star) `assertEqual` "#test" selector (fromString "#test") `assertEqual` "#test" - renderedSheet example4 `assertEqual` Just "body { color: rgb(0, 128, 0) }\n#world { display: block }\n" + renderedSheet example4 `assertEqual` Just "body { color: hsl(240.0, 100.0%, 50.0%) }\n#world { display: block }\n"