Discussion: CSS color parser
kuon opened this issue · comments
My use case for CSS color parser is a WYSIWYG editor that produces CSS colors, the rendering is done in elm, I adjust some of the colors before rendering (like ensuring contrast...), that's where I need a CSS color parser.
Follow up of: #4 (comment)
I would definitely use this in my project. I think css colors are a de-facto interchange format for colors on the web, so if you need interop with a system you don't control, CSS colors are going to come into play.
Whether it should be in the core package is another question. Personally I'm a fan of a batteries included approach, so would support that.
@kuon you mentioned you possibly had some existing code for this? Can you list the formats that it's able to parse?
rgb() rgba() hsl() hsla() and hex (both percentage and 0-255 ranges) it was written for 0.18
https://gist.github.com/kuon/19b14cd5f913c8b60c08dbbdb0156514
Consider it BSD3 licensed.
I read your hex parser and I think yours is better as it uses pattern matching instead of regex.
You should probably also include keyword colors in the parser:
Example using elm/parser
keywords : Parser Color
keywords =
oneOf
[ fromHexString "#000000" |. keyword "black"
, fromHexString "#c0c0c0" |. keyword "silver"
, fromHexString "#808080" |. keyword "gray"
, fromHexString "#ffffff" |. keyword "white"
, fromHexString "#800000" |. keyword "maroon"
, fromHexString "#ff0000" |. keyword "red"
, fromHexString "#800080" |. keyword "purple"
, fromHexString "#ff00ff" |. keyword "fuchsia"
, fromHexString "#008000" |. keyword "green"
, fromHexString "#00ff00" |. keyword "lime"
, fromHexString "#808000" |. keyword "olive"
, fromHexString "#ffff00" |. keyword "yellow"
, fromHexString "#000080" |. keyword "navy"
, fromHexString "#0000ff" |. keyword "blue"
, fromHexString "#008080" |. keyword "teal"
, fromHexString "#00ffff" |. keyword "aqua"
, fromHexString "#ffa500" |. keyword "orange"
, fromHexString "#f0f8ff" |. keyword "aliceblue"
, fromHexString "#faebd7" |. keyword "antiquewhite"
, fromHexString "#7fffd4" |. keyword "aquamarine"
, fromHexString "#f0ffff" |. keyword "azure"
, fromHexString "#f5f5dc" |. keyword "beige"
, fromHexString "#ffe4c4" |. keyword "bisque"
, fromHexString "#ffebcd" |. keyword "blanchedalmond"
, fromHexString "#8a2be2" |. keyword "blueviolet"
, fromHexString "#a52a2a" |. keyword "brown"
, fromHexString "#deb887" |. keyword "burlywood"
, fromHexString "#5f9ea0" |. keyword "cadetblue"
, fromHexString "#7fff00" |. keyword "chartreuse"
, fromHexString "#d2691e" |. keyword "chocolate"
, fromHexString "#ff7f50" |. keyword "coral"
, fromHexString "#6495ed" |. keyword "cornflowerblue"
, fromHexString "#fff8dc" |. keyword "cornsilk"
, fromHexString "#dc143c" |. keyword "crimson"
, fromHexString "#00ffff" |. keyword "cyan"
, fromHexString "#00008b" |. keyword "darkblue"
, fromHexString "#008b8b" |. keyword "darkcyan"
, fromHexString "#b8860b" |. keyword "darkgoldenrod"
, fromHexString "#a9a9a9" |. keyword "darkgray"
, fromHexString "#006400" |. keyword "darkgreen"
, fromHexString "#a9a9a9" |. keyword "darkgrey"
, fromHexString "#bdb76b" |. keyword "darkkhaki"
, fromHexString "#8b008b" |. keyword "darkmagenta"
, fromHexString "#556b2f" |. keyword "darkolivegreen"
, fromHexString "#ff8c00" |. keyword "darkorange"
, fromHexString "#9932cc" |. keyword "darkorchid"
, fromHexString "#8b0000" |. keyword "darkred"
, fromHexString "#e9967a" |. keyword "darksalmon"
, fromHexString "#8fbc8f" |. keyword "darkseagreen"
, fromHexString "#483d8b" |. keyword "darkslateblue"
, fromHexString "#2f4f4f" |. keyword "darkslategray"
, fromHexString "#2f4f4f" |. keyword "darkslategrey"
, fromHexString "#00ced1" |. keyword "darkturquoise"
, fromHexString "#9400d3" |. keyword "darkviolet"
, fromHexString "#ff1493" |. keyword "deeppink"
, fromHexString "#00bfff" |. keyword "deepskyblue"
, fromHexString "#696969" |. keyword "dimgray"
, fromHexString "#696969" |. keyword "dimgrey"
, fromHexString "#1e90ff" |. keyword "dodgerblue"
, fromHexString "#b22222" |. keyword "firebrick"
, fromHexString "#fffaf0" |. keyword "floralwhite"
, fromHexString "#228b22" |. keyword "forestgreen"
, fromHexString "#dcdcdc" |. keyword "gainsboro"
, fromHexString "#f8f8ff" |. keyword "ghostwhite"
, fromHexString "#ffd700" |. keyword "gold"
, fromHexString "#daa520" |. keyword "goldenrod"
, fromHexString "#adff2f" |. keyword "greenyellow"
, fromHexString "#808080" |. keyword "grey"
, fromHexString "#f0fff0" |. keyword "honeydew"
, fromHexString "#ff69b4" |. keyword "hotpink"
, fromHexString "#cd5c5c" |. keyword "indianred"
, fromHexString "#4b0082" |. keyword "indigo"
, fromHexString "#fffff0" |. keyword "ivory"
, fromHexString "#f0e68c" |. keyword "khaki"
, fromHexString "#e6e6fa" |. keyword "lavender"
, fromHexString "#fff0f5" |. keyword "lavenderblush"
, fromHexString "#7cfc00" |. keyword "lawngreen"
, fromHexString "#fffacd" |. keyword "lemonchiffon"
, fromHexString "#add8e6" |. keyword "lightblue"
, fromHexString "#f08080" |. keyword "lightcoral"
, fromHexString "#e0ffff" |. keyword "lightcyan"
, fromHexString "#fafad2" |. keyword "lightgoldenrodyellow"
, fromHexString "#d3d3d3" |. keyword "lightgray"
, fromHexString "#90ee90" |. keyword "lightgreen"
, fromHexString "#d3d3d3" |. keyword "lightgrey"
, fromHexString "#ffb6c1" |. keyword "lightpink"
, fromHexString "#ffa07a" |. keyword "lightsalmon"
, fromHexString "#20b2aa" |. keyword "lightseagreen"
, fromHexString "#87cefa" |. keyword "lightskyblue"
, fromHexString "#778899" |. keyword "lightslategray"
, fromHexString "#778899" |. keyword "lightslategrey"
, fromHexString "#b0c4de" |. keyword "lightsteelblue"
, fromHexString "#ffffe0" |. keyword "lightyellow"
, fromHexString "#32cd32" |. keyword "limegreen"
, fromHexString "#faf0e6" |. keyword "linen"
, fromHexString "#ff00ff" |. keyword "magenta"
, fromHexString "#66cdaa" |. keyword "mediumaquamarine"
, fromHexString "#0000cd" |. keyword "mediumblue"
, fromHexString "#ba55d3" |. keyword "mediumorchid"
, fromHexString "#9370db" |. keyword "mediumpurple"
, fromHexString "#3cb371" |. keyword "mediumseagreen"
, fromHexString "#7b68ee" |. keyword "mediumslateblue"
, fromHexString "#00fa9a" |. keyword "mediumspringgreen"
, fromHexString "#48d1cc" |. keyword "mediumturquoise"
, fromHexString "#c71585" |. keyword "mediumvioletred"
, fromHexString "#191970" |. keyword "midnightblue"
, fromHexString "#f5fffa" |. keyword "mintcream"
, fromHexString "#ffe4e1" |. keyword "mistyrose"
, fromHexString "#ffe4b5" |. keyword "moccasin"
, fromHexString "#ffdead" |. keyword "navajowhite"
, fromHexString "#fdf5e6" |. keyword "oldlace"
, fromHexString "#6b8e23" |. keyword "olivedrab"
, fromHexString "#ff4500" |. keyword "orangered"
, fromHexString "#da70d6" |. keyword "orchid"
, fromHexString "#eee8aa" |. keyword "palegoldenrod"
, fromHexString "#98fb98" |. keyword "palegreen"
, fromHexString "#afeeee" |. keyword "paleturquoise"
, fromHexString "#db7093" |. keyword "palevioletred"
, fromHexString "#ffefd5" |. keyword "papayawhip"
, fromHexString "#ffdab9" |. keyword "peachpuff"
, fromHexString "#cd853f" |. keyword "peru"
, fromHexString "#ffc0cb" |. keyword "pink"
, fromHexString "#dda0dd" |. keyword "plum"
, fromHexString "#b0e0e6" |. keyword "powderblue"
, fromHexString "#bc8f8f" |. keyword "rosybrown"
, fromHexString "#4169e1" |. keyword "royalblue"
, fromHexString "#8b4513" |. keyword "saddlebrown"
, fromHexString "#fa8072" |. keyword "salmon"
, fromHexString "#f4a460" |. keyword "sandybrown"
, fromHexString "#2e8b57" |. keyword "seagreen"
, fromHexString "#fff5ee" |. keyword "seashell"
, fromHexString "#a0522d" |. keyword "sienna"
, fromHexString "#87ceeb" |. keyword "skyblue"
, fromHexString "#6a5acd" |. keyword "slateblue"
, fromHexString "#708090" |. keyword "slategray"
, fromHexString "#708090" |. keyword "slategrey"
, fromHexString "#fffafa" |. keyword "snow"
, fromHexString "#00ff7f" |. keyword "springgreen"
, fromHexString "#4682b4" |. keyword "steelblue"
, fromHexString "#d2b48c" |. keyword "tan"
, fromHexString "#d8bfd8" |. keyword "thistle"
, fromHexString "#ff6347" |. keyword "tomato"
, fromHexString "#40e0d0" |. keyword "turquoise"
, fromHexString "#ee82ee" |. keyword "violet"
, fromHexString "#f5deb3" |. keyword "wheat"
, fromHexString "#f5f5f5" |. keyword "whitesmoke"
, fromHexString "#9acd32" |. keyword "yellowgreen"
, fromHexString "#663399" |. keyword "rebeccapurple"
, succeed (Color 0 0 0 0) |. keyword "transparent"
]Well wouldn't using a dict be faster for color names? I also think it should be case insensitive.
I used regex for my parser, but with elm/parser now available maybe it would be better to use it for the CSS formats.
My use case is interfacing with an existing system that uses css colors. I don't control that system so can't change it to a different format (nor would I want to, it's a totally reasonable choice in context.)
In my case, that information is coming in json, so my ideal situation would be to have a Decoder Color, but I'd be fine with any String -> Maybe Color or String -> Result Color. (I'd like to detect errors and fail the decoding rather than choose a default.)
Since this functionality is not exposed, I'm planning on reimplementing or copying an existing parser, which is not ideal.