diff --git a/ui/assets/app.js b/ui/assets/app.js index 77d943d..43a3f1b 100644 --- a/ui/assets/app.js +++ b/ui/assets/app.js @@ -10685,8 +10685,9 @@ var PS = {}; var Data_Semigroup = $PS["Data.Semigroup"]; var colorLabels = [ "magenta", "red", "orange", "yellow", "green", "cyan", "blue", "violet" ]; var genColors = function (accentColor) { + var l = (Color.toLCh(accentColor)).l; 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 ]); + var colors = Data_Functor.map(Data_Functor.functorArray)(Color.lch(l)(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" ]; @@ -10736,7 +10737,6 @@ var PS = {}; 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"]; @@ -10797,7 +10797,7 @@ var PS = {}; 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") ])(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))) ]); + }), 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)) ]); }; var initialState = function (v) { return { @@ -10843,7 +10843,7 @@ var PS = {}; return $19; }); }; - throw new Error("Failed pattern match at Solaryzed (line 100, column 16 - line 103, column 56): " + [ v.constructor.name ]); + throw new Error("Failed pattern match at Solaryzed (line 87, column 16 - line 90, column 56): " + [ v.constructor.name ]); }; var component = Halogen_Component.mkComponent({ initialState: initialState, diff --git a/ui/assets/index.html b/ui/assets/index.html index 9173623..60e0685 100644 --- a/ui/assets/index.html +++ b/ui/assets/index.html @@ -10,10 +10,12 @@ margin: 0 auto; font-size: 18px; font-weight: bold; - font-family: monospace; } + font-family: monospace; + display: block; + } #dark { color: rgba(255,255,255,0.5); } #light { color: rgba(0,0,0,0.5); } - div { width: 80px; margin: 10px; display: inline-block; border-radius: 3px; } + #colors > div { width: 80px; margin: 10px; display: inline-block; border-radius: 3px; } diff --git a/ui/src/Solaryzed.purs b/ui/src/Solaryzed.purs index 27071a4..4f89e1f 100644 --- a/ui/src/Solaryzed.purs +++ b/ui/src/Solaryzed.purs @@ -67,20 +67,7 @@ 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" ] - ] - <> map mkDivColor palette) + (map mkDivColor palette) ] where palette = genPalette state.dark state.light state.accent diff --git a/ui/src/Solaryzed/Palette.purs b/ui/src/Solaryzed/Palette.purs index cab8a4b..4b1360b 100644 --- a/ui/src/Solaryzed/Palette.purs +++ b/ui/src/Solaryzed/Palette.purs @@ -26,7 +26,8 @@ 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] + l = (toLCh accentColor).l + colors = map (lch l 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