From 229efea58923f2375cce6d5ed6ad40170b92678d Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Wed, 30 Oct 2019 14:52:23 +0100 Subject: [PATCH] working with full palette gen --- ui/assets/app.js | 402 ++++++++++++++++++++++++---------- ui/spago.dhall | 5 +- ui/src/Solaryzed.purs | 39 ++-- ui/src/Solaryzed/Palette.purs | 88 ++++++++ 4 files changed, 398 insertions(+), 136 deletions(-) create mode 100644 ui/src/Solaryzed/Palette.purs diff --git a/ui/assets/app.js b/ui/assets/app.js index 66d8eb2..77d943d 100644 --- a/ui/assets/app.js +++ b/ui/assets/app.js @@ -388,6 +388,23 @@ var PS = {}; }; }; }; + + //------------------------------------------------------------------------------ + // Zipping --------------------------------------------------------------------- + //------------------------------------------------------------------------------ + + exports.zipWith = function (f) { + return function (xs) { + return function (ys) { + var l = xs.length < ys.length ? xs.length : ys.length; + var result = new Array(l); + for (var i = 0; i < l; i++) { + result[i] = f(xs[i])(ys[i]); + } + return result; + }; + }; + }; })(PS["Data.Array"] = PS["Data.Array"] || {}); (function(exports) { "use strict"; @@ -723,6 +740,107 @@ var PS = {}; exports["foldableArray"] = foldableArray; exports["foldableMaybe"] = foldableMaybe; })(PS); +(function($PS) { + // Generated by purs version 0.13.3 + "use strict"; + $PS["Data.Newtype"] = $PS["Data.Newtype"] || {}; + var exports = $PS["Data.Newtype"]; + var Newtype = function (unwrap, wrap) { + this.unwrap = unwrap; + this.wrap = wrap; + }; + var unwrap = function (dict) { + return dict.unwrap; + }; + exports["unwrap"] = unwrap; + exports["Newtype"] = Newtype; +})(PS); +(function($PS) { + // Generated by purs version 0.13.3 + "use strict"; + $PS["Data.Maybe.First"] = $PS["Data.Maybe.First"] || {}; + var exports = $PS["Data.Maybe.First"]; + var Data_Maybe = $PS["Data.Maybe"]; + var Data_Monoid = $PS["Data.Monoid"]; + var Data_Newtype = $PS["Data.Newtype"]; + var Data_Semigroup = $PS["Data.Semigroup"]; + var First = function (x) { + return x; + }; + var semigroupFirst = new Data_Semigroup.Semigroup(function (v) { + return function (v1) { + if (v instanceof Data_Maybe.Just) { + return v; + }; + return v1; + }; + }); + var newtypeFirst = new Data_Newtype.Newtype(function (n) { + return n; + }, First); + var monoidFirst = new Data_Monoid.Monoid(function () { + return semigroupFirst; + }, Data_Maybe.Nothing.value); + exports["newtypeFirst"] = newtypeFirst; + exports["monoidFirst"] = monoidFirst; +})(PS); +(function($PS) { + // Generated by purs version 0.13.3 + "use strict"; + $PS["Data.Tuple"] = $PS["Data.Tuple"] || {}; + var exports = $PS["Data.Tuple"]; + var Data_Eq = $PS["Data.Eq"]; + var Data_Foldable = $PS["Data.Foldable"]; + var Data_Functor = $PS["Data.Functor"]; + var Data_Maybe = $PS["Data.Maybe"]; + var Data_Maybe_First = $PS["Data.Maybe.First"]; + var Data_Newtype = $PS["Data.Newtype"]; + var Tuple = (function () { + function Tuple(value0, value1) { + this.value0 = value0; + this.value1 = value1; + }; + Tuple.create = function (value0) { + return function (value1) { + return new Tuple(value0, value1); + }; + }; + return Tuple; + })(); + var snd = function (v) { + return v.value1; + }; + var lookup = function (dictFoldable) { + return function (dictEq) { + return function (a) { + var $312 = Data_Newtype.unwrap(Data_Maybe_First.newtypeFirst); + var $313 = Data_Foldable.foldMap(dictFoldable)(Data_Maybe_First.monoidFirst)(function (v) { + var $163 = Data_Eq.eq(dictEq)(a)(v.value0); + if ($163) { + return new Data_Maybe.Just(v.value1); + }; + return Data_Maybe.Nothing.value; + }); + return function ($314) { + return $312($313($314)); + }; + }; + }; + }; + var functorTuple = new Data_Functor.Functor(function (f) { + return function (m) { + return new Tuple(m.value0, f(m.value1)); + }; + }); + var fst = function (v) { + return v.value0; + }; + exports["Tuple"] = Tuple; + exports["fst"] = fst; + exports["snd"] = snd; + exports["lookup"] = lookup; + exports["functorTuple"] = functorTuple; +})(PS); (function($PS) { // Generated by purs version 0.13.3 "use strict"; @@ -733,6 +851,8 @@ var PS = {}; var Data_Foldable = $PS["Data.Foldable"]; var Data_Function = $PS["Data.Function"]; var Data_Maybe = $PS["Data.Maybe"]; + var Data_Tuple = $PS["Data.Tuple"]; + var zip = $foreign.zipWith(Data_Tuple.Tuple.create); var singleton = function (a) { return [ a ]; }; @@ -754,6 +874,7 @@ var PS = {}; exports["index"] = index; exports["concatMap"] = concatMap; exports["mapMaybe"] = mapMaybe; + exports["zip"] = zip; exports["length"] = $foreign.length; })(PS); (function(exports) { @@ -1167,7 +1288,15 @@ var PS = {}; // module Math - exports.abs = Math.abs; + exports.abs = Math.abs; + + exports.atan2 = function (y) { + return function (x) { + return Math.atan2(y, x); + }; + }; + + exports.cos = Math.cos; exports.pow = function (n) { return function (p) { @@ -1182,6 +1311,12 @@ var PS = {}; }; exports.round = Math.round; + + exports.sin = Math.sin; + + exports.sqrt = Math.sqrt; + + exports.pi = Math.PI; })(PS["Math"] = PS["Math"] || {}); (function($PS) { // Generated by purs version 0.13.3 @@ -1190,9 +1325,14 @@ var PS = {}; var exports = $PS["Math"]; var $foreign = $PS["Math"]; exports["abs"] = $foreign.abs; + exports["atan2"] = $foreign.atan2; + exports["cos"] = $foreign.cos; exports["pow"] = $foreign.pow; exports["round"] = $foreign.round; + exports["sin"] = $foreign.sin; + exports["sqrt"] = $foreign.sqrt; exports["remainder"] = $foreign.remainder; + exports["pi"] = $foreign.pi; })(PS); (function($PS) { // Generated by purs version 0.13.3 @@ -1588,107 +1728,6 @@ var PS = {}; var $foreign = $PS["Data.String.Unsafe"]; exports["charAt"] = $foreign.charAt; })(PS); -(function($PS) { - // Generated by purs version 0.13.3 - "use strict"; - $PS["Data.Newtype"] = $PS["Data.Newtype"] || {}; - var exports = $PS["Data.Newtype"]; - var Newtype = function (unwrap, wrap) { - this.unwrap = unwrap; - this.wrap = wrap; - }; - var unwrap = function (dict) { - return dict.unwrap; - }; - exports["unwrap"] = unwrap; - exports["Newtype"] = Newtype; -})(PS); -(function($PS) { - // Generated by purs version 0.13.3 - "use strict"; - $PS["Data.Maybe.First"] = $PS["Data.Maybe.First"] || {}; - var exports = $PS["Data.Maybe.First"]; - var Data_Maybe = $PS["Data.Maybe"]; - var Data_Monoid = $PS["Data.Monoid"]; - var Data_Newtype = $PS["Data.Newtype"]; - var Data_Semigroup = $PS["Data.Semigroup"]; - var First = function (x) { - return x; - }; - var semigroupFirst = new Data_Semigroup.Semigroup(function (v) { - return function (v1) { - if (v instanceof Data_Maybe.Just) { - return v; - }; - return v1; - }; - }); - var newtypeFirst = new Data_Newtype.Newtype(function (n) { - return n; - }, First); - var monoidFirst = new Data_Monoid.Monoid(function () { - return semigroupFirst; - }, Data_Maybe.Nothing.value); - exports["newtypeFirst"] = newtypeFirst; - exports["monoidFirst"] = monoidFirst; -})(PS); -(function($PS) { - // Generated by purs version 0.13.3 - "use strict"; - $PS["Data.Tuple"] = $PS["Data.Tuple"] || {}; - var exports = $PS["Data.Tuple"]; - var Data_Eq = $PS["Data.Eq"]; - var Data_Foldable = $PS["Data.Foldable"]; - var Data_Functor = $PS["Data.Functor"]; - var Data_Maybe = $PS["Data.Maybe"]; - var Data_Maybe_First = $PS["Data.Maybe.First"]; - var Data_Newtype = $PS["Data.Newtype"]; - var Tuple = (function () { - function Tuple(value0, value1) { - this.value0 = value0; - this.value1 = value1; - }; - Tuple.create = function (value0) { - return function (value1) { - return new Tuple(value0, value1); - }; - }; - return Tuple; - })(); - var snd = function (v) { - return v.value1; - }; - var lookup = function (dictFoldable) { - return function (dictEq) { - return function (a) { - var $312 = Data_Newtype.unwrap(Data_Maybe_First.newtypeFirst); - var $313 = Data_Foldable.foldMap(dictFoldable)(Data_Maybe_First.monoidFirst)(function (v) { - var $163 = Data_Eq.eq(dictEq)(a)(v.value0); - if ($163) { - return new Data_Maybe.Just(v.value1); - }; - return Data_Maybe.Nothing.value; - }); - return function ($314) { - return $312($313($314)); - }; - }; - }; - }; - var functorTuple = new Data_Functor.Functor(function (f) { - return function (m) { - return new Tuple(m.value0, f(m.value1)); - }; - }); - var fst = function (v) { - return v.value0; - }; - exports["Tuple"] = Tuple; - exports["fst"] = fst; - exports["snd"] = snd; - exports["lookup"] = lookup; - exports["functorTuple"] = functorTuple; -})(PS); (function(exports) { "use strict"; @@ -2185,6 +2224,16 @@ var PS = {}; }; }; }; + var lch = function (l) { + return function (c) { + return function (h) { + var deg2rad = $$Math.pi / 180.0; + var b = c * $$Math.sin(h * deg2rad); + var a = c * $$Math.cos(h * deg2rad); + return lab(l)(a)(b); + }; + }; + }; var cssStringHSLA = function (v) { var toString = function (n) { return Data_Show.show(Data_Show.showNumber)(Data_Int.toNumber(Data_Int.round(100.0 * n)) / 100.0); @@ -2287,8 +2336,67 @@ var PS = {}; var c = toRGBA(color); return "#" + (toHex(c.r) + (toHex(c.g) + toHex(c.b))); }; + var toXYZ = function (c) { + var rec = toRGBA$prime(c); + var finv = function (c$prime) { + if (c$prime <= 4.045e-2) { + return c$prime / 12.92; + }; + if (Data_Boolean.otherwise) { + return $$Math.pow((c$prime + 5.5e-2) / 1.055)(2.4); + }; + throw new Error("Failed pattern match at Color (line 366, column 5 - line 367, column 63): " + [ c$prime.constructor.name ]); + }; + var g = finv(rec.g); + var r = finv(rec.r); + var b = finv(rec.b); + var x = 0.4124 * r + 0.3576 * g + 0.1805 * b; + var y = 0.2126 * r + 0.7152 * g + 7.22e-2 * b; + var z = 1.93e-2 * r + 0.1192 * g + 0.9505 * b; + return { + x: x, + y: y, + z: z + }; + }; + var toLab = function (col) { + var rec = toXYZ(col); + var cut = $$Math.pow(6.0 / 29.0)(3.0); + var f = function (t) { + if (t > cut) { + return $$Math.pow(t)(1.0 / 3.0); + }; + if (Data_Boolean.otherwise) { + return (1.0 / 3.0) * $$Math.pow(29.0 / 6.0)(2.0) * t + 4.0 / 29.0; + }; + throw new Error("Failed pattern match at Color (line 384, column 5 - line 385, column 76): " + [ t.constructor.name ]); + }; + var fy = f(rec.y / d65.yn); + var l = 116.0 * fy - 16.0; + var b = 200.0 * (fy - f(rec.z / d65.zn)); + var a = 500.0 * (f(rec.x / d65.xn) - fy); + return { + l: l, + a: a, + b: b + }; + }; + var toLCh = function (col) { + var rec = toLab(col); + var rad2deg = 180.0 / $$Math.pi; + var c = $$Math.sqrt(rec.a * rec.a + rec.b * rec.b); + var h = modPos($$Math.atan2(rec.b)(rec.a) * rad2deg)(360.0); + return { + l: rec.l, + c: c, + h: h + }; + }; exports["lab"] = lab; + exports["lch"] = lch; exports["fromHexString"] = fromHexString; + exports["toLab"] = toLab; + exports["toLCh"] = toLCh; exports["toHexString"] = toHexString; exports["cssStringHSLA"] = cssStringHSLA; })(PS); @@ -10567,6 +10675,53 @@ 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_Semigroup = $PS["Data.Semigroup"]; + var colorLabels = [ "magenta", "red", "orange", "yellow", "green", "cyan", "blue", "violet" ]; + var genColors = function (accentColor) { + var c = (Color.toLCh(accentColor)).c; + var colors = Data_Functor.map(Data_Functor.functorArray)(Color.lch(50.0)(c))([ 1.0, 18.0, 45.0, 68.0, 175.0, 205.0, 237.0, 331.0 ]); + return Data_Array.zip(colorLabels)(colors); + }; + var baseLabels = [ "base03", "base02", "base01", "base00", "base0", "base1", "base2", "base3" ]; + var genBase = function (adark) { + return function (bdark) { + return function (alight) { + return function (blight) { + var ratio = function (n) { + return function (d) { + return function (l) { + return ((97.0 - n) * d + (n - 15.0) * l) / (97.0 - 15.0); + }; + }; + }; + var colors = Data_Functor.map(Data_Functor.functorArray)(function (n) { + return Color.lab(n)(ratio(n)(adark)(alight))(ratio(n)(bdark)(blight)); + })([ 15.0, 20.0, 40.0, 50.0, 60.0, 70.0, 92.0, 97.0 ]); + return Data_Array.zip(baseLabels)(colors); + }; + }; + }; + }; + var genPalette = function (dark) { + return function (light) { + return function (accent) { + 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(accent)); + }; + }; + }; + exports["genPalette"] = genPalette; +})(PS); +(function($PS) { + // Generated by purs version 0.13.3 "use strict"; $PS["Solaryzed"] = $PS["Solaryzed"] || {}; var exports = $PS["Solaryzed"]; @@ -10579,14 +10734,17 @@ var PS = {}; var Control_Bind = $PS["Control.Bind"]; var Control_Monad_State_Class = $PS["Control.Monad.State.Class"]; var DOM_HTML_Indexed_InputType = $PS["DOM.HTML.Indexed.InputType"]; + var Data_Functor = $PS["Data.Functor"]; var Data_Maybe = $PS["Data.Maybe"]; + var Data_Semigroup = $PS["Data.Semigroup"]; var Halogen_Component = $PS["Halogen.Component"]; var Halogen_HTML_CSS = $PS["Halogen.HTML.CSS"]; var Halogen_HTML_Core = $PS["Halogen.HTML.Core"]; var Halogen_HTML_Elements = $PS["Halogen.HTML.Elements"]; var Halogen_HTML_Events = $PS["Halogen.HTML.Events"]; var Halogen_HTML_Properties = $PS["Halogen.HTML.Properties"]; - var Halogen_Query_HalogenM = $PS["Halogen.Query.HalogenM"]; + var Halogen_Query_HalogenM = $PS["Halogen.Query.HalogenM"]; + var Solaryzed_Palette = $PS["Solaryzed.Palette"]; var DarkChanged = (function () { function DarkChanged(value0) { this.value0 = value0; @@ -10618,6 +10776,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)(state.accent); 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 () { @@ -10629,13 +10788,16 @@ var PS = {}; }); })); }; + var mkDivColor = function (v) { + return Halogen_HTML_Elements.div([ cssBackground(v.value1), Halogen_HTML_Properties.id_(v.value0) ])([ Halogen_HTML_Core.text(v.value0) ]); + }; return Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("container") ])([ Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("selectors") ])([ 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 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.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") ])([ Halogen_HTML_Elements.div([ cssBackground(state.dark), Halogen_HTML_Properties.id_("dark") ])([ Halogen_HTML_Core.text("DARK") ]), Halogen_HTML_Elements.div([ cssBackground(state.light), Halogen_HTML_Properties.id_("light") ])([ Halogen_HTML_Core.text("LIGHT") ]), Halogen_HTML_Elements.div([ cssBackground(state.accent), Halogen_HTML_Properties.id_("accent") ])([ Halogen_HTML_Core.text("ACCENT") ]) ]) ]); + }), Halogen_HTML_Properties.value(Color.toHexString(state.accent)) ]) ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("colors") ])(Data_Semigroup.append(Data_Semigroup.semigroupArray)([ Halogen_HTML_Elements.div([ cssBackground(state.dark), Halogen_HTML_Properties.id_("dark") ])([ Halogen_HTML_Core.text("DARK") ]), Halogen_HTML_Elements.div([ cssBackground(state.light), Halogen_HTML_Properties.id_("light") ])([ Halogen_HTML_Core.text("LIGHT") ]), Halogen_HTML_Elements.div([ cssBackground(state.accent), Halogen_HTML_Properties.id_("accent") ])([ Halogen_HTML_Core.text("ACCENT") ]) ])(Data_Functor.map(Data_Functor.functorArray)(mkDivColor)(palette))) ]); }; var initialState = function (v) { return { @@ -10646,18 +10808,6 @@ var PS = {}; }; var handleAction = function (v) { if (v instanceof DarkChanged) { - return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) { - var $7 = {}; - for (var $8 in st) { - if ({}.hasOwnProperty.call(st, $8)) { - $7[$8] = st[$8]; - }; - }; - $7.dark = v.value0; - return $7; - }); - }; - if (v instanceof LightChanged) { return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) { var $11 = {}; for (var $12 in st) { @@ -10665,11 +10815,11 @@ var PS = {}; $11[$12] = st[$12]; }; }; - $11.light = v.value0; + $11.dark = v.value0; return $11; }); }; - if (v instanceof AccentChanged) { + if (v instanceof LightChanged) { return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) { var $15 = {}; for (var $16 in st) { @@ -10677,11 +10827,23 @@ var PS = {}; $15[$16] = st[$16]; }; }; - $15.accent = v.value0; + $15.light = v.value0; return $15; }); }; - throw new Error("Failed pattern match at Solaryzed (line 89, column 16 - line 92, column 56): " + [ v.constructor.name ]); + if (v instanceof AccentChanged) { + return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) { + var $19 = {}; + for (var $20 in st) { + if ({}.hasOwnProperty.call(st, $20)) { + $19[$20] = st[$20]; + }; + }; + $19.accent = v.value0; + return $19; + }); + }; + throw new Error("Failed pattern match at Solaryzed (line 100, column 16 - line 103, column 56): " + [ v.constructor.name ]); }; var component = Halogen_Component.mkComponent({ initialState: initialState, diff --git a/ui/spago.dhall b/ui/spago.dhall index 4da4875..596cae5 100644 --- a/ui/spago.dhall +++ b/ui/spago.dhall @@ -5,8 +5,7 @@ You can edit this file as you like. { name = "solaryzed" , dependencies = - [ "aff" - , "colors" + [ "colors" , "console" , "css" , "dom-indexed" @@ -21,4 +20,4 @@ You can edit this file as you like. ./packages.dhall , sources = [ "src/**/*.purs", "test/**/*.purs" ] -} \ No newline at end of file +} diff --git a/ui/src/Solaryzed.purs b/ui/src/Solaryzed.purs index bef1c24..27071a4 100644 --- a/ui/src/Solaryzed.purs +++ b/ui/src/Solaryzed.purs @@ -8,12 +8,15 @@ import CSS.TextAlign (center, textAlign) import Color (Color, lab, toHexString, fromHexString) import DOM.HTML.Indexed.InputType (InputType(InputColor)) import Data.Maybe (fromMaybe,Maybe(..)) +import Data.Tuple (Tuple(..)) import Halogen as H import Halogen.HTML as HH import Halogen.HTML.CSS as HCSS import Halogen.HTML.Events as HE import Halogen.HTML.Properties as HP +import Solaryzed.Palette (genPalette) + type State = { dark :: Color , light :: Color , accent :: Color } @@ -64,20 +67,28 @@ render state = ] , HH.div [ HP.id_ "colors" ] - [ HH.div - [ cssBackground state.dark - , HP.id_ "dark" ] - [ HH.text "DARK" ] - , HH.div - [ cssBackground state.light - , HP.id_ "light" ] - [ HH.text "LIGHT" ] - , HH.div - [ cssBackground state.accent - , HP.id_ "accent" ] - [ HH.text "ACCENT" ] - ]] + ([ HH.div + [ cssBackground state.dark + , HP.id_ "dark" ] + [ HH.text "DARK" ] + , HH.div + [ cssBackground state.light + , HP.id_ "light" ] + [ HH.text "LIGHT" ] + , HH.div + [ cssBackground state.accent + , HP.id_ "accent" ] + [ HH.text "ACCENT" ] + ] + <> map mkDivColor palette) + ] where + palette = genPalette state.dark state.light state.accent + mkDivColor (Tuple label c) = + HH.div + [ cssBackground c + , HP.id_ label ] + [ HH.text label ] cssBackground c = HCSS.style $ do CSS.background c CSS.height (px 80.0) @@ -90,3 +101,5 @@ handleAction = case _ of DarkChanged c -> H.modify_ \st -> st { dark = c } LightChanged c -> H.modify_ \st -> st { light = c } AccentChanged c -> H.modify_ \st -> st { accent = c } + + diff --git a/ui/src/Solaryzed/Palette.purs b/ui/src/Solaryzed/Palette.purs new file mode 100644 index 0000000..cab8a4b --- /dev/null +++ b/ui/src/Solaryzed/Palette.purs @@ -0,0 +1,88 @@ +module Solaryzed.Palette + ( genPalette + ) where + +import Prelude +import Data.Array (zip) +import Data.Tuple (Tuple) + +import Color (Color,lab,lch,toLCh,toLab) + +-- | given the *a *b of the darkest and lightest colors +-- generate all the CIE of the solarized needed colors +-- from base03 to base3 +genBase :: Number -> Number -> Number -> Number -> Array (Tuple String Color) +genBase adark bdark alight blight = + zip baseLabels colors + where + colors = map (\n -> lab n (ratio n adark alight) (ratio n bdark blight)) + [15.0,20.0,40.0,50.0,60.0,70.0,92.0,97.0] + darkest = 15.0 + lightest = 97.0 + ratio :: Number -> Number -> Number -> Number + ratio n d l = ((lightest - n)*d + (n-darkest)*l)/(lightest - darkest) + +genColors :: Color -> Array (Tuple String Color) +genColors accentColor = + zip colorLabels colors + where c = (toLCh accentColor).c + colors = map (lch 50.0 c) [1.0, 18.0, 45.0, 68.0, 175.0, 205.0, 237.0, 331.0] + +-- | Generate a solarized-like palette given 3 colors +-- base03, base3 and a color like yellow +genPalette :: Color -> Color -> Color -> Array (Tuple String Color) +genPalette dark light accent = + (genBase adark bdark alight blight) <> (genColors accent) + where + darkLab = toLab dark + adark = darkLab.a + bdark = darkLab.b + lightLab = toLab light + alight = lightLab.a + blight = lightLab.b + +-- 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) +-- +baseLabels :: Array String +baseLabels = [ "base03" + , "base02" + , "base01" + , "base00" + , "base0" + , "base1" + , "base2" + , "base3" + ] +colorLabels :: Array String +colorLabels = [ "magenta" + , "red" + , "orange" + , "yellow" + , "green" + , "cyan" + , "blue" + , "violet" + ] +-- +-- paletteLabels :: [Text] +-- paletteLabels = baseLabels +-- <> colorLabels +-- +-- extendedPaletteLabels :: [Text] +-- extendedPaletteLabels = paletteLabels +-- <> map (<> "-d") colorLabels +-- <> map (<> "-l") colorLabels