From 0cc8e21d720d0f4a4feffe31ad99b5aa1b529f77 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Sat, 22 Feb 2020 22:48:08 +0000 Subject: [PATCH] looks better, perhaps went back --- ui/assets/app.js | 302 +++++++--------------------------- ui/src/Solaryzed.purs | 46 +++++- ui/src/Solaryzed/Palette.purs | 42 ++--- 3 files changed, 114 insertions(+), 276 deletions(-) diff --git a/ui/assets/app.js b/ui/assets/app.js index 5666eed..5688f94 100644 --- a/ui/assets/app.js +++ b/ui/assets/app.js @@ -445,8 +445,7 @@ var PS = {}; }; exports.eqBooleanImpl = refEq; - exports.eqIntImpl = refEq; - exports.eqNumberImpl = refEq; + exports.eqIntImpl = refEq; exports.eqCharImpl = refEq; exports.eqStringImpl = refEq; })(PS["Data.Eq"] = PS["Data.Eq"] || {}); @@ -460,7 +459,6 @@ var PS = {}; this.eq = eq; }; var eqString = new Eq($foreign.eqStringImpl); - var eqNumber = new Eq($foreign.eqNumberImpl); var eqInt = new Eq($foreign.eqIntImpl); var eqChar = new Eq($foreign.eqCharImpl); var eqBoolean = new Eq($foreign.eqBooleanImpl); @@ -471,7 +469,6 @@ var PS = {}; exports["eq"] = eq; exports["eqBoolean"] = eqBoolean; exports["eqInt"] = eqInt; - exports["eqNumber"] = eqNumber; exports["eqChar"] = eqChar; exports["eqString"] = eqString; })(PS); @@ -639,52 +636,6 @@ var PS = {}; exports["mempty"] = mempty; exports["monoidArray"] = monoidArray; })(PS); -(function($PS) { - // Generated by purs version 0.13.3 - "use strict"; - $PS["Data.Ordering"] = $PS["Data.Ordering"] || {}; - var exports = $PS["Data.Ordering"]; - var Data_Eq = $PS["Data.Eq"]; - var LT = (function () { - function LT() { - - }; - LT.value = new LT(); - return LT; - })(); - var GT = (function () { - function GT() { - - }; - GT.value = new GT(); - return GT; - })(); - var EQ = (function () { - function EQ() { - - }; - EQ.value = new EQ(); - return EQ; - })(); - var eqOrdering = new Data_Eq.Eq(function (v) { - return function (v1) { - if (v instanceof LT && v1 instanceof LT) { - return true; - }; - if (v instanceof GT && v1 instanceof GT) { - return true; - }; - if (v instanceof EQ && v1 instanceof EQ) { - return true; - }; - return false; - }; - }); - exports["LT"] = LT; - exports["GT"] = GT; - exports["EQ"] = EQ; - exports["eqOrdering"] = eqOrdering; -})(PS); (function($PS) { // Generated by purs version 0.13.3 "use strict"; @@ -693,11 +644,9 @@ var PS = {}; var $foreign = $PS["Data.Foldable"]; var Control_Applicative = $PS["Control.Applicative"]; var Control_Apply = $PS["Control.Apply"]; - var Data_Eq = $PS["Data.Eq"]; var Data_Function = $PS["Data.Function"]; var Data_Maybe = $PS["Data.Maybe"]; var Data_Monoid = $PS["Data.Monoid"]; - var Data_Ordering = $PS["Data.Ordering"]; var Data_Semigroup = $PS["Data.Semigroup"]; var Data_Unit = $PS["Data.Unit"]; var Foldable = function (foldMap, foldl, foldr) { @@ -727,28 +676,6 @@ var PS = {}; }; var foldl = function (dict) { return dict.foldl; - }; - var minimumBy = function (dictFoldable) { - return function (cmp) { - var min$prime = function (v) { - return function (v1) { - if (v instanceof Data_Maybe.Nothing) { - return new Data_Maybe.Just(v1); - }; - if (v instanceof Data_Maybe.Just) { - return new Data_Maybe.Just((function () { - var $120 = Data_Eq.eq(Data_Ordering.eqOrdering)(cmp(v.value0)(v1))(Data_Ordering.LT.value); - if ($120) { - return v.value0; - }; - return v1; - })()); - }; - throw new Error("Failed pattern match at Data.Foldable (line 402, column 3 - line 402, column 27): " + [ v.constructor.name, v1.constructor.name ]); - }; - }; - return foldl(dictFoldable)(min$prime)(Data_Maybe.Nothing.value); - }; }; var foldableMaybe = new Foldable(function (dictMonoid) { return function (f) { @@ -810,7 +737,6 @@ var PS = {}; exports["foldMap"] = foldMap; exports["traverse_"] = traverse_; exports["for_"] = for_; - exports["minimumBy"] = minimumBy; exports["foldableArray"] = foldableArray; exports["foldableMaybe"] = foldableMaybe; })(PS); @@ -1205,11 +1131,40 @@ var PS = {}; }; }; }; - exports.ordIntImpl = unsafeCompareImpl; - exports.ordNumberImpl = unsafeCompareImpl; + exports.ordIntImpl = unsafeCompareImpl; exports.ordStringImpl = unsafeCompareImpl; exports.ordCharImpl = unsafeCompareImpl; })(PS["Data.Ord"] = PS["Data.Ord"] || {}); +(function($PS) { + // Generated by purs version 0.13.3 + "use strict"; + $PS["Data.Ordering"] = $PS["Data.Ordering"] || {}; + var exports = $PS["Data.Ordering"]; + var LT = (function () { + function LT() { + + }; + LT.value = new LT(); + return LT; + })(); + var GT = (function () { + function GT() { + + }; + GT.value = new GT(); + return GT; + })(); + var EQ = (function () { + function EQ() { + + }; + EQ.value = new EQ(); + return EQ; + })(); + exports["LT"] = LT; + exports["GT"] = GT; + exports["EQ"] = EQ; +})(PS); (function($PS) { // Generated by purs version 0.13.3 "use strict"; @@ -1225,9 +1180,6 @@ var PS = {}; var ordString = new Ord(function () { return Data_Eq.eqString; }, $foreign.ordStringImpl(Data_Ordering.LT.value)(Data_Ordering.EQ.value)(Data_Ordering.GT.value)); - var ordNumber = new Ord(function () { - return Data_Eq.eqNumber; - }, $foreign.ordNumberImpl(Data_Ordering.LT.value)(Data_Ordering.EQ.value)(Data_Ordering.GT.value)); var ordInt = new Ord(function () { return Data_Eq.eqInt; }, $foreign.ordIntImpl(Data_Ordering.LT.value)(Data_Ordering.EQ.value)(Data_Ordering.GT.value)); @@ -1237,15 +1189,6 @@ var PS = {}; var compare = function (dict) { return dict.compare; }; - var comparing = function (dictOrd) { - return function (f) { - return function (x) { - return function (y) { - return compare(dictOrd)(f(x))(f(y)); - }; - }; - }; - }; var max = function (dictOrd) { return function (x) { return function (y) { @@ -1290,12 +1233,10 @@ var PS = {}; }; }; exports["compare"] = compare; - exports["comparing"] = comparing; exports["min"] = min; exports["max"] = max; exports["clamp"] = clamp; exports["ordInt"] = ordInt; - exports["ordNumber"] = ordNumber; exports["ordString"] = ordString; exports["ordChar"] = ordChar; })(PS); @@ -2104,7 +2045,6 @@ var PS = {}; var Data_Array_NonEmpty = $PS["Data.Array.NonEmpty"]; var Data_Boolean = $PS["Data.Boolean"]; var Data_Either = $PS["Data.Either"]; - var Data_Foldable = $PS["Data.Foldable"]; var Data_Function = $PS["Data.Function"]; var Data_Functor = $PS["Data.Functor"]; var Data_Int = $PS["Data.Int"]; @@ -2114,34 +2054,6 @@ var PS = {}; var Data_String_CodePoints = $PS["Data.String.CodePoints"]; var Data_String_Regex = $PS["Data.String.Regex"]; var $$Math = $PS["Math"]; - var RGB = (function () { - function RGB() { - - }; - RGB.value = new RGB(); - return RGB; - })(); - var HSL = (function () { - function HSL() { - - }; - HSL.value = new HSL(); - return HSL; - })(); - var LCh = (function () { - function LCh() { - - }; - LCh.value = new LCh(); - return LCh; - })(); - var Lab = (function () { - function Lab() { - - }; - Lab.value = new Lab(); - return Lab; - })(); var HSLA = (function () { function HSLA(value0, value1, value2, value3) { this.value0 = value0; @@ -2252,46 +2164,6 @@ var PS = {}; }; }; }; - var interpolate = function (fraction) { - return function (a) { - return function (b) { - return a + fraction * (b - a); - }; - }; - }; - var interpolateAngle = function (fraction) { - return function (a) { - return function (b) { - var paths = [ { - from: a, - to: b - }, { - from: a, - to: b + 360.0 - }, { - from: a + 360.0, - to: b - } ]; - var dist = function (v) { - return $$Math.abs(v.to - v.from); - }; - var shortest = Data_Maybe.fromJust()(Data_Foldable.minimumBy(Data_Foldable.foldableArray)(Data_Ord.comparing(Data_Ord.ordNumber)(dist))(paths)); - return interpolate(fraction)(shortest.from)(shortest.to); - }; - }; - }; - var hsla = function (h) { - return function (s) { - return function (l) { - return function (a) { - var s$prime = Data_Ord.clamp(Data_Ord.ordNumber)(0.0)(1.0)(s); - var l$prime = Data_Ord.clamp(Data_Ord.ordNumber)(0.0)(1.0)(l); - var a$prime = Data_Ord.clamp(Data_Ord.ordNumber)(0.0)(1.0)(a); - return new HSLA(h, s$prime, l$prime, a$prime); - }; - }; - }; - }; var fromHexString = function (str) { var parseHex = (function () { var $111 = Data_Maybe.fromMaybe(0); @@ -2383,14 +2255,6 @@ var PS = {}; }; return modPos(v)(360.0); }; - var toHSLA = function (v) { - return { - h: clipHue(v.value0), - s: v.value1, - l: v.value2, - a: v.value3 - }; - }; var toRGBA$prime = function (v) { var h$prime = clipHue(v.value0) / 60.0; var chr = (1.0 - $$Math.abs(2.0 * v.value2 - 1.0)) * v.value1; @@ -2528,36 +2392,6 @@ var PS = {}; h: h }; }; - var mix = function (v) { - return function (c1) { - return function (c2) { - return function (frac) { - if (v instanceof HSL) { - var t = toHSLA(c2); - var f = toHSLA(c1); - return hsla(interpolateAngle(frac)(f.h)(t.h))(interpolate(frac)(f.s)(t.s))(interpolate(frac)(f.l)(t.l))(interpolate(frac)(f.a)(t.a)); - }; - if (v instanceof RGB) { - var t = toRGBA$prime(c2); - var f = toRGBA$prime(c1); - return rgba$prime(interpolate(frac)(f.r)(t.r))(interpolate(frac)(f.g)(t.g))(interpolate(frac)(f.b)(t.b))(interpolate(frac)(f.a)(t.a)); - }; - if (v instanceof LCh) { - var t = toLCh(c2); - var f = toLCh(c1); - return lch(interpolate(frac)(f.l)(t.l))(interpolate(frac)(f.c)(t.c))(interpolateAngle(frac)(f.h)(t.h)); - }; - if (v instanceof Lab) { - var t = toLab(c2); - var f = toLab(c1); - return lab(interpolate(frac)(f.l)(t.l))(interpolate(frac)(f.a)(t.a))(interpolate(frac)(f.b)(t.b)); - }; - throw new Error("Failed pattern match at Color (line 520, column 1 - line 520, column 34): " + [ v.constructor.name, c1.constructor.name, c2.constructor.name, frac.constructor.name ]); - }; - }; - }; - }; - exports["LCh"] = LCh; exports["lab"] = lab; exports["lch"] = lch; exports["fromHexString"] = fromHexString; @@ -2565,7 +2399,6 @@ var PS = {}; exports["toLCh"] = toLCh; exports["toHexString"] = toHexString; exports["cssStringHSLA"] = cssStringHSLA; - exports["mix"] = mix; })(PS); (function($PS) { // Generated by purs version 0.13.3 @@ -10910,54 +10743,26 @@ var PS = {}; exports["runUI"] = runUI; })(PS); (function($PS) { + // Generated by purs version 0.13.3 "use strict"; $PS["Solaryzed.Palette"] = $PS["Solaryzed.Palette"] || {}; var exports = $PS["Solaryzed.Palette"]; var Color = $PS["Color"]; var Data_Array = $PS["Data.Array"]; var Data_Functor = $PS["Data.Functor"]; - var Data_Ord = $PS["Data.Ord"]; var Data_Semigroup = $PS["Data.Semigroup"]; var colorLabels = [ "yellow", "orange", "red", "magenta", "violet", "blue", "cyan", "green" ]; - var genColors = function (dark) { - return function (light) { - var yellowcontrast = (Color.toLCh(Color.lab(60.0)(10.0)(65.0))).c; - var solbase3 = Color.lab(97.0)(0.0)(10.0); - var solbase03 = Color.lab(15.0)(-12.0)(-12.0); - var middleColor = Color.mix(Color.LCh.value)(dark)(light); - var forceContrast = function (c) { - return function (col) { - var lchCol = Color.toLCh(col); - return Color.lch(lchCol.l)(c)(lchCol.h); - }; + var genColors = function (contrast) { + var forceContrast = function (c) { + return function (col) { + var lchCol = Color.toLCh(col); + return Color.lch(lchCol.l)(c)(lchCol.h); }; - var contrast = yellowcontrast * Data_Ord.max(Data_Ord.ordNumber)((Color.toLCh(dark)).c / (Color.toLCh(solbase03)).c)((Color.toLCh(light)).c / (Color.toLCh(solbase3)).c); - var accents = [ Color.lab(60.0)(10.0)(65.0), Color.lab(50.0)(50.0)(55.0), Color.lab(50.0)(65.0)(45.0), Color.lab(50.0)(65.0)(-5.0), Color.lab(50.0)(15.0)(-45.0), Color.lab(55.0)(-10.0)(-45.0), Color.lab(60.0)(-35.0)(-5.0), Color.lab(60.0)(-20.0)(65.0) ]; - return Data_Array.zip(colorLabels)(Data_Functor.map(Data_Functor.functorArray)(forceContrast(contrast))(accents)); }; + var accents = [ Color.lab(60.0)(10.0)(65.0), Color.lab(50.0)(50.0)(55.0), Color.lab(50.0)(65.0)(45.0), Color.lab(50.0)(65.0)(-5.0), Color.lab(50.0)(15.0)(-45.0), Color.lab(55.0)(-10.0)(-45.0), Color.lab(60.0)(-35.0)(-5.0), Color.lab(60.0)(-20.0)(65.0) ]; + return Data_Array.zip(colorLabels)(Data_Functor.map(Data_Functor.functorArray)(forceContrast(contrast))(accents)); }; - - // genExtendedColors :: HexRGB -> [HexRGB] - // genExtendedColors exampleColor = - // let (ColorCoord (l,c,h)) = unLCH (convert exampleColor) - // hues = [1, 18, 45, 68, 175, 205, 237, 331] - // -- hues = map (fromIntegral . (`rem` 360) . floor . (h+)) [i * 45 | i <- [0..7]] - // in map (convert . mkLCH 60 c) hues - // <> map (convert . mkLCH 35 c) hues - // <> map (convert . mkLCH 85 c) hues - // - // genExtendedPalette :: HexRGB -> HexRGB -> HexRGB -> [HexRGB] - // genExtendedPalette darkc lightc accentc = - // genBase adark bdark alight blight <> genExtendedColors accentc - // where - // (ColorCoord (_,adark,bdark)) = unLAB (convert darkc) - // (ColorCoord (_,alight,blight)) = unLAB (convert lightc) - // var baseLabels = [ "base03", "base02", "base01", "base00", "base0", "base1", "base2", "base3" ]; - - // | given the *a *b of the darkest and lightest colors - // generate all the CIE of the solarized needed colors - // from base03 to base3 var genBase = function (adark) { return function (bdark) { return function (alight) { @@ -10977,14 +10782,14 @@ var PS = {}; }; }; }; - - // | Generate a solarized-like palette given 2 colors - // base03, base3 and a color like yellow var genPalette = function (dark) { return function (light) { - var lightLab = Color.toLab(light); - var darkLab = Color.toLab(dark); - return Data_Semigroup.append(Data_Semigroup.semigroupArray)(genBase(darkLab.a)(darkLab.b)(lightLab.a)(lightLab.b))(genColors(dark)(light)); + return function (accent) { + var lightLab = Color.toLab(light); + var darkLab = Color.toLab(dark); + var contrast = (Color.toLCh(accent)).c; + return Data_Semigroup.append(Data_Semigroup.semigroupArray)(genBase(darkLab.a)(darkLab.b)(lightLab.a)(lightLab.b))(genColors(contrast)); + }; }; }; exports["genPalette"] = genPalette; @@ -11047,7 +10852,7 @@ var PS = {}; var solbase3 = Color.lab(97.0)(0.0)(10.0); var solbase03 = Color.lab(15.0)(-12.0)(-12.0); var render = function (state) { - var palette = Solaryzed_Palette.genPalette(state.dark)(state.light); + var palette = Solaryzed_Palette.genPalette(state.dark)(state.light)(state.accent); var mkCssColor = function (v) { return Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(CSS_Font.color(v.value1)), Halogen_HTML_Properties.id_(v.value0 + "-css") ])([ Halogen_HTML_Core.text("--" + (v.value0 + (": " + (Color.toHexString(v.value1) + ";")))) ]); }; @@ -11064,6 +10869,13 @@ var PS = {}; }); }); })) ])([ Halogen_HTML_Elements.span([ styleCol("base00") ])([ Halogen_HTML_Core.text("-- | Fibonnacci function") ]), Halogen_HTML_Elements.br_, Halogen_HTML_Elements.span([ styleCol("blue") ])([ Halogen_HTML_Core.text("fib") ]), Halogen_HTML_Elements.span([ styleCol("base0") ])([ Halogen_HTML_Core.text(" 0 = 1") ]), Halogen_HTML_Elements.br_, Halogen_HTML_Elements.span([ styleCol("blue") ])([ Halogen_HTML_Core.text("fib") ]), Halogen_HTML_Elements.span([ styleCol("base0") ])([ Halogen_HTML_Core.text(" 1 = 1") ]), Halogen_HTML_Elements.br_, Halogen_HTML_Elements.span([ styleCol("blue") ])([ Halogen_HTML_Core.text("fib") ]), Halogen_HTML_Elements.span([ styleCol("base0") ])([ Halogen_HTML_Core.text(" n = fib (n - 1) + fib (n - 2)") ]), Halogen_HTML_Elements.br_, Halogen_HTML_Elements.br_, Halogen_HTML_Elements.span([ styleCol("yellow") ])([ Halogen_HTML_Core.text("HCSS") ]), Halogen_HTML_Elements.span([ styleCol("blue") ])([ Halogen_HTML_Core.text(".") ]), Halogen_HTML_Elements.span([ styleCol("base0") ])([ Halogen_HTML_Core.text("style ") ]), Halogen_HTML_Elements.span([ styleCol("green") ])([ Halogen_HTML_Core.text("do") ]), Halogen_HTML_Elements.br_, Halogen_HTML_Elements.span([ Halogen_HTML_CSS.style(CSS_Geometry.marginLeft(CSS_Size.em(1.0))) ])([ Halogen_HTML_Core.text(" ") ]), Halogen_HTML_Elements.span([ styleCol("yellow") ])([ Halogen_HTML_Core.text("HH") ]), Halogen_HTML_Elements.span([ styleCol("blue") ])([ Halogen_HTML_Core.text(".") ]), Halogen_HTML_Elements.span([ styleCol("base0") ])([ Halogen_HTML_Core.text("text ") ]), Halogen_HTML_Elements.span([ styleCol("cyan") ])([ Halogen_HTML_Core.text("\"base0\"") ]), Halogen_HTML_Elements.br_ ]); + var mkLightCodeExample = Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(Control_Bind.discard(Control_Bind.discardUnit)(CSS_Stylesheet.bindStyleM)(CSS_Geometry.padding(CSS_Size.em(1.0))(CSS_Size.em(1.0))(CSS_Size.em(1.0))(CSS_Size.em(1.0)))(function () { + return Control_Bind.discard(Control_Bind.discardUnit)(CSS_Stylesheet.bindStyleM)(CSS_Font.fontSize(CSS_Size.px(14.0)))(function () { + return Control_Bind.discard(Control_Bind.discardUnit)(CSS_Stylesheet.bindStyleM)(CSS_Background.background(CSS_Background["backgroundColor'"])(cssCol("base3")))(function () { + return CSS_Font.color(cssCol("base00")); + }); + }); + })) ])([ Halogen_HTML_Elements.span([ styleCol("base0") ])([ Halogen_HTML_Core.text("-- | Fibonnacci function") ]), Halogen_HTML_Elements.br_, Halogen_HTML_Elements.span([ styleCol("blue") ])([ Halogen_HTML_Core.text("fib") ]), Halogen_HTML_Elements.span([ styleCol("base00") ])([ Halogen_HTML_Core.text(" 0 = 1") ]), Halogen_HTML_Elements.br_, Halogen_HTML_Elements.span([ styleCol("blue") ])([ Halogen_HTML_Core.text("fib") ]), Halogen_HTML_Elements.span([ styleCol("base00") ])([ Halogen_HTML_Core.text(" 1 = 1") ]), Halogen_HTML_Elements.br_, Halogen_HTML_Elements.span([ styleCol("blue") ])([ Halogen_HTML_Core.text("fib") ]), Halogen_HTML_Elements.span([ styleCol("base00") ])([ Halogen_HTML_Core.text(" n = fib (n - 1) + fib (n - 2)") ]), Halogen_HTML_Elements.br_, Halogen_HTML_Elements.br_, Halogen_HTML_Elements.span([ styleCol("yellow") ])([ Halogen_HTML_Core.text("HCSS") ]), Halogen_HTML_Elements.span([ styleCol("blue") ])([ Halogen_HTML_Core.text(".") ]), Halogen_HTML_Elements.span([ styleCol("base00") ])([ Halogen_HTML_Core.text("style ") ]), Halogen_HTML_Elements.span([ styleCol("green") ])([ Halogen_HTML_Core.text("do") ]), Halogen_HTML_Elements.br_, Halogen_HTML_Elements.span([ Halogen_HTML_CSS.style(CSS_Geometry.marginLeft(CSS_Size.em(1.0))) ])([ Halogen_HTML_Core.text(" ") ]), Halogen_HTML_Elements.span([ styleCol("yellow") ])([ Halogen_HTML_Core.text("HH") ]), Halogen_HTML_Elements.span([ styleCol("blue") ])([ Halogen_HTML_Core.text(".") ]), Halogen_HTML_Elements.span([ styleCol("base00") ])([ Halogen_HTML_Core.text("text ") ]), Halogen_HTML_Elements.span([ styleCol("cyan") ])([ Halogen_HTML_Core.text("\"base0\"") ]), Halogen_HTML_Elements.br_ ]); var cssBackground = function (c) { return Halogen_HTML_CSS.style(Control_Bind.discard(Control_Bind.discardUnit)(CSS_Stylesheet.bindStyleM)(CSS_Background.background(CSS_Background["backgroundColor'"])(c))(function () { return Control_Bind.discard(Control_Bind.discardUnit)(CSS_Stylesheet.bindStyleM)(CSS_Geometry.height(CSS_Size.px(80.0)))(function () { @@ -11082,7 +10894,9 @@ var PS = {}; return Data_Maybe.Just.create(new DarkChanged(Data_Maybe.fromMaybe(solbase03)(Color.fromHexString(c)))); }), Halogen_HTML_Properties.value(Color.toHexString(state.dark)) ]), Halogen_HTML_Elements.input([ Halogen_HTML_Properties.type_(Halogen_HTML_Core.isPropInputType)(DOM_HTML_Indexed_InputType.InputColor.value), Halogen_HTML_Events.onValueChange(function (c) { return Data_Maybe.Just.create(new LightChanged(Data_Maybe.fromMaybe(solbase03)(Color.fromHexString(c)))); - }), Halogen_HTML_Properties.value(Color.toHexString(state.light)) ]) ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("colors") ])(Data_Functor.map(Data_Functor.functorArray)(mkDivColor)(palette)), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("code") ])([ mkDarkCodeExample ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("css") ])(Data_Functor.map(Data_Functor.functorArray)(mkCssColor)(palette)) ]); + }), Halogen_HTML_Properties.value(Color.toHexString(state.light)) ]), Halogen_HTML_Elements.input([ Halogen_HTML_Properties.type_(Halogen_HTML_Core.isPropInputType)(DOM_HTML_Indexed_InputType.InputColor.value), Halogen_HTML_Events.onValueChange(function (c) { + return Data_Maybe.Just.create(new AccentChanged(Data_Maybe.fromMaybe(solbase03)(Color.fromHexString(c)))); + }), Halogen_HTML_Properties.value(Color.toHexString(state.accent)) ]) ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("colors") ])(Data_Functor.map(Data_Functor.functorArray)(mkDivColor)(palette)), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("code") ])([ mkDarkCodeExample ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("code") ])([ mkLightCodeExample ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("css") ])(Data_Functor.map(Data_Functor.functorArray)(mkCssColor)(palette)) ]); }; var initialState = function (v) { return { @@ -11128,7 +10942,7 @@ var PS = {}; return $23; }); }; - throw new Error("Failed pattern match at Solaryzed (line 130, column 16 - line 133, column 56): " + [ v.constructor.name ]); + throw new Error("Failed pattern match at Solaryzed (line 170, column 16 - line 173, column 56): " + [ v.constructor.name ]); }; var component = Halogen_Component.mkComponent({ initialState: initialState, diff --git a/ui/src/Solaryzed.purs b/ui/src/Solaryzed.purs index c55e17f..c96429a 100644 --- a/ui/src/Solaryzed.purs +++ b/ui/src/Solaryzed.purs @@ -6,7 +6,7 @@ import CSS as CSS import CSS.Size (px) import CSS.TextAlign (center, textAlign) import Color (Color, lab, lch, toHexString, fromHexString) -import DOM.HTML.Indexed.InputType (InputType(InputColor)) +import DOM.HTML.Indexed.InputType (InputType(InputColor,InputRange)) import Data.Maybe (fromMaybe,Maybe(..)) import Data.Tuple (Tuple(..),lookup) import Halogen as H @@ -19,7 +19,8 @@ import Solaryzed.Palette (genPalette) type State = { dark :: Color , light :: Color - , accent :: Color } + , accent :: Color + } data Action = DarkChanged Color | LightChanged Color @@ -60,6 +61,10 @@ render state = , HE.onValueChange \ c -> Just $ LightChanged (fromMaybe solbase03 (fromHexString c)) , HP.value (toHexString state.light) ] + , HH.input [ HP.type_ InputColor + , HE.onValueChange \ c -> Just $ AccentChanged (fromMaybe solbase03 (fromHexString c)) + , HP.value (toHexString state.accent) + ] ] , HH.div [ HP.id_ "colors" ] @@ -68,12 +73,16 @@ render state = [ HP.id_ "code" ] [mkDarkCodeExample] + , HH.div + [ HP.id_ "code" + ] + [mkLightCodeExample] , HH.div [ HP.id_ "css" ] (map mkCssColor palette) ] where - palette = genPalette state.dark state.light + palette = genPalette state.dark state.light state.accent mkDivColor (Tuple label c) = HH.div [ cssBackground c @@ -116,6 +125,37 @@ render state = , HH.span [ styleCol "cyan"][ HH.text "\"base0\""] , HH.br_ ] + mkLightCodeExample = + HH.div + [ HCSS.style $ do + CSS.padding (CSS.em 1.0) (CSS.em 1.0) (CSS.em 1.0) (CSS.em 1.0) + CSS.fontSize (CSS.px 14.0) + CSS.background (cssCol "base3") + CSS.color (cssCol "base00") ] + [ HH.span [ styleCol "base0"][ HH.text "-- | Fibonnacci function"] + , HH.br_ + , HH.span [ styleCol "blue"][ HH.text "fib"] + , HH.span [ styleCol "base00"][ HH.text " 0 = 1"] + , HH.br_ + , HH.span [ styleCol "blue"][ HH.text "fib"] + , HH.span [ styleCol "base00"][ HH.text " 1 = 1"] + , HH.br_ + , HH.span [ styleCol "blue"][ HH.text "fib"] + , HH.span [ styleCol "base00"][ HH.text " n = fib (n - 1) + fib (n - 2)"] + , HH.br_ + , HH.br_ + , HH.span [ styleCol "yellow"][ HH.text "HCSS"] + , HH.span [ styleCol "blue"][ HH.text "."] + , HH.span [ styleCol "base00"][ HH.text "style "] + , HH.span [ styleCol "green"][ HH.text "do"] + , HH.br_ + , HH.span [ HCSS.style $ CSS.marginLeft (CSS.em 1.0) ] [ HH.text " " ] + , HH.span [ styleCol "yellow"][ HH.text "HH"] + , HH.span [ styleCol "blue"][ HH.text "."] + , HH.span [ styleCol "base00"][ HH.text "text "] + , HH.span [ styleCol "cyan"][ HH.text "\"base0\""] + , HH.br_ + ] styleCol col = HCSS.style $ do CSS.color (cssCol col) cssCol colName = fromMaybe solbase03 (lookup colName palette) diff --git a/ui/src/Solaryzed/Palette.purs b/ui/src/Solaryzed/Palette.purs index f816e88..3451163 100644 --- a/ui/src/Solaryzed/Palette.purs +++ b/ui/src/Solaryzed/Palette.purs @@ -23,29 +23,12 @@ genBase adark bdark alight blight = ratio :: Number -> Number -> Number -> Number ratio n d l = ((lightest - n)*d + (n-darkest)*l)/(lightest - darkest) -genColors :: Color -> Color -> Array (Tuple String Color) -genColors dark light = - zip colorLabels (map (keepDist middleColor) accents) +genColors :: Number -> Array (Tuple String Color) +genColors contrast = + zip colorLabels (map (forceContrast contrast) accents) where forceContrast c col = lch lchCol.l c lchCol.h where lchCol = toLCh col - keepDist midlch accent = - where - ldist = midCol.l - d.l - cdist = midCol.c - d.c - hdist = midCol.h - d.h - darkldist = ... - d = toLCh dark - l = toLCh light - middleColor = toLCH $ Color.mix Color.LCh dark light - contrast = yellowcontrast * (max - (d.c /(toLCh solbase03).c) - (l.c/(toLCh solbase3).c)) - yellowcontrast = (toLCh (lab 60.0 10.0 65.0)).c - solbase03 :: Color - solbase03 = lab 15.0 (-12.0) (-12.0) - solbase3 :: Color - solbase3 = lab 97.0 0.0 10.0 accents = [ lab 60.0 10.0 65.0 , lab 50.0 50.0 55.0 , lab 50.0 65.0 45.0 @@ -58,16 +41,17 @@ genColors dark light = -- | Generate a solarized-like palette given 2 colors -- base03, base3 and a color like yellow -genPalette :: Color -> Color -> Array (Tuple String Color) -genPalette dark light = - (genBase adark bdark alight blight) <> (genColors dark light) +genPalette :: Color -> Color -> Color -> Array (Tuple String Color) +genPalette dark light accent = + (genBase adark bdark alight blight) <> (genColors contrast) where - darkLab = toLab dark - adark = darkLab.a - bdark = darkLab.b - lightLab = toLab light - alight = lightLab.a - blight = lightLab.b + contrast = (toLCh accent).c + darkLab = toLab dark + adark = darkLab.a + bdark = darkLab.b + lightLab = toLab light + alight = lightLab.a + blight = lightLab.b -- genExtendedColors :: HexRGB -> [HexRGB] -- genExtendedColors exampleColor =