slightly better CSS

ui/assets/app.js

@@ -10191,7 +10191,8 @@ var PS = {};
   var Halogen_HTML_Core = $PS["Halogen.HTML.Core"];
   var prop = function (dictIsProp) {
       return Halogen_HTML_Core.prop(dictIsProp);
-  };                                                        
+  };                                                          
+  var title = prop(Halogen_HTML_Core.isPropString)("title");
   var type_ = function (dictIsProp) {
       return prop(dictIsProp)("type");
   };
@@ -10200,6 +10201,7 @@ var PS = {};
   var attr = Halogen_HTML_Core.attr(Data_Maybe.Nothing.value);
   exports["attr"] = attr;
   exports["id_"] = id_;
+  exports["title"] = title;
   exports["type_"] = type_;
   exports["value"] = value;
 })(PS);
@@ -10264,12 +10266,14 @@ var PS = {};
       return element("input")(props)([  ]);
   };
   var span = element("span");
-  var div = element("div");  
+  var div = element("div");
+  var button = element("button");
   var br = function (props) {
       return element("br")(props)([  ]);
   };
   var br_ = br([  ]);
   exports["br_"] = br_;
+  exports["button"] = button;
   exports["div"] = div;
   exports["input"] = input;
   exports["span"] = span;
@@ -10293,6 +10297,14 @@ var PS = {};
   };
   exports["currentTarget"] = currentTarget;
 })(PS);
+(function($PS) {
+  // Generated by purs version 0.13.3
+  "use strict";
+  $PS["Web.UIEvent.MouseEvent.EventTypes"] = $PS["Web.UIEvent.MouseEvent.EventTypes"] || {};
+  var exports = $PS["Web.UIEvent.MouseEvent.EventTypes"];
+  var click = "click";
+  exports["click"] = click;
+})(PS);
 (function($PS) {
   // Generated by purs version 0.13.3
   "use strict";
@@ -10310,15 +10322,24 @@ var PS = {};
   var Foreign_Index = $PS["Foreign.Index"];
   var Halogen_HTML_Core = $PS["Halogen.HTML.Core"];
   var Halogen_Query_Input = $PS["Halogen.Query.Input"];
+  var Unsafe_Coerce = $PS["Unsafe.Coerce"];
   var Web_Event_Event = $PS["Web.Event.Event"];
   var Web_HTML_Event_EventTypes = $PS["Web.HTML.Event.EventTypes"];
+  var Web_UIEvent_MouseEvent_EventTypes = $PS["Web.UIEvent.MouseEvent.EventTypes"];
+  var mouseHandler = Unsafe_Coerce.unsafeCoerce;
   var handler = function (et) {
       var $0 = Halogen_HTML_Core.handler(et);
       var $1 = Data_Functor.map(Data_Functor.functorFn)(Data_Functor.map(Data_Maybe.functorMaybe)(Halogen_Query_Input.Action.create));
       return function ($2) {
           return $0($1($2));
       };
-  };   
+  };                                                       
+  var onClick = (function () {
+      var $3 = handler(Web_UIEvent_MouseEvent_EventTypes.click);
+      return function ($4) {
+          return $3(mouseHandler($4));
+      };
+  })();
   var addForeignPropHandler = function (key) {
       return function (prop) {
           return function (reader) {
@@ -10334,6 +10355,7 @@ var PS = {};
       };
   };                                                                                                                    
   var onValueChange = addForeignPropHandler(Web_HTML_Event_EventTypes.change)("value")(Foreign.readString);
+  exports["onClick"] = onClick;
   exports["onValueChange"] = onValueChange;
 })(PS);
 (function($PS) {
@@ -11018,7 +11040,22 @@ var PS = {};
           return new AccentChanged(value0);
       };
       return AccentChanged;
-  })();                                       
+  })();
+  var SetToSolarized = (function () {
+      function SetToSolarized() {
+
+      };
+      SetToSolarized.value = new SetToSolarized();
+      return SetToSolarized;
+  })();
+  var SetToY = (function () {
+      function SetToY() {
+
+      };
+      SetToY.value = new SetToY();
+      return SetToY;
+  })();
+  var solyellow = Color.lab(60.0)(10.0)(65.0);
   var solbase3 = Color.lab(97.0)(0.0)(10.0);
   var solbase03 = Color.lab(15.0)(-12.0)(-12.0);
   var render = function (state) {
@@ -11076,7 +11113,11 @@ 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_Core.text(" Contrast:"), 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_Semigroup.append(Data_Semigroup.semigroupArray)([ Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(CSS_Font.color(cssCol("b0"))) ])([ Halogen_HTML_Core.text(":root {") ]) ])(Data_Semigroup.append(Data_Semigroup.semigroupArray)(Data_Functor.map(Data_Functor.functorArray)(mkCssColor)(palette))([ Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(CSS_Font.color(cssCol("b0"))) ])([ Halogen_HTML_Core.text("}") ]) ]))) ]);
+      }), Halogen_HTML_Properties.value(Color.toHexString(state.accent)) ]) ]), Halogen_HTML_Elements.div([  ])([ Halogen_HTML_Elements.button([ Halogen_HTML_Events.onClick(function (v) {
+          return new Data_Maybe.Just(SetToSolarized.value);
+      }), Halogen_HTML_Properties.title("Set solarized") ])([ Halogen_HTML_Core.text("Set solarized") ]), Halogen_HTML_Elements.button([ Halogen_HTML_Events.onClick(function (v) {
+          return new Data_Maybe.Just(SetToY.value);
+      }), Halogen_HTML_Properties.title("Set grayer") ])([ Halogen_HTML_Core.text("Set Y") ]) ]), 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_Semigroup.append(Data_Semigroup.semigroupArray)([ Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(CSS_Font.color(cssCol("b0"))) ])([ Halogen_HTML_Core.text(":root {") ]) ])(Data_Semigroup.append(Data_Semigroup.semigroupArray)(Data_Functor.map(Data_Functor.functorArray)(mkCssColor)(palette))([ Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(CSS_Font.color(cssCol("b0"))) ])([ Halogen_HTML_Core.text("}") ]) ]))) ]);
   };
   var initialState = function (v) {
       return {
@@ -11087,18 +11128,6 @@ var PS = {};
   };
   var handleAction = function (v) {
       if (v instanceof DarkChanged) {
-          return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
-              var $15 = {};
-              for (var $16 in st) {
-                  if ({}.hasOwnProperty.call(st, $16)) {
-                      $15[$16] = st[$16];
-                  };
-              };
-              $15.dark = v.value0;
-              return $15;
-          });
-      };
-      if (v instanceof LightChanged) {
           return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
               var $19 = {};
               for (var $20 in st) {
@@ -11106,11 +11135,11 @@ var PS = {};
                       $19[$20] = st[$20];
                   };
               };
-              $19.light = v.value0;
+              $19.dark = v.value0;
               return $19;
           });
       };
-      if (v instanceof AccentChanged) {
+      if (v instanceof LightChanged) {
           return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
               var $23 = {};
               for (var $24 in st) {
@@ -11118,11 +11147,51 @@ var PS = {};
                       $23[$24] = st[$24];
                   };
               };
-              $23.accent = v.value0;
+              $23.light = v.value0;
               return $23;
           });
       };
-      throw new Error("Failed pattern match at Solaryzed (line 185, column 16 - line 188, column 56): " + [ v.constructor.name ]);
+      if (v instanceof AccentChanged) {
+          return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
+              var $27 = {};
+              for (var $28 in st) {
+                  if ({}.hasOwnProperty.call(st, $28)) {
+                      $27[$28] = st[$28];
+                  };
+              };
+              $27.accent = v.value0;
+              return $27;
+          });
+      };
+      if (v instanceof SetToSolarized) {
+          return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
+              var $31 = {};
+              for (var $32 in st) {
+                  if ({}.hasOwnProperty.call(st, $32)) {
+                      $31[$32] = st[$32];
+                  };
+              };
+              $31.dark = solbase03;
+              $31.light = solbase3;
+              $31.accent = solyellow;
+              return $31;
+          });
+      };
+      if (v instanceof SetToY) {
+          return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
+              var $34 = {};
+              for (var $35 in st) {
+                  if ({}.hasOwnProperty.call(st, $35)) {
+                      $34[$35] = st[$35];
+                  };
+              };
+              $34.dark = Data_Maybe.fromMaybe(solbase03)(Color.fromHexString("#202631"));
+              $34.light = Data_Maybe.fromMaybe(solbase3)(Color.fromHexString("#f4f7ff"));
+              $34.accent = Data_Maybe.fromMaybe(solyellow)(Color.fromHexString("#a98d50"));
+              return $34;
+          });
+      };
+      throw new Error("Failed pattern match at Solaryzed (line 198, column 16 - line 207, column 91): " + [ v.constructor.name ]);
   };
   var component = Halogen_Component.mkComponent({
       initialState: initialState,

ui/assets/index.html

@@ -13,6 +13,8 @@
              font-family: "pt mono",Menlo,monospace;
              display: block;
          }
+         button { border: solid; font-weight: bold; }
+         button:hover { cursor: pointer; }
          #dark { color: rgba(255,255,255,0.5); }
          #light { color: rgba(0,0,0,0.5); }
          #colors > div { width: 80px; margin: 10px; display: inline-block; border-radius: 3px; }

ui/src/Solaryzed.purs

@@ -29,6 +29,8 @@ type State = { dark :: Color
 data Action = DarkChanged Color
             | LightChanged Color
             | AccentChanged Color
+            | SetToSolarized
+            | SetToY
 
 component :: forall q i o m. H.Component HH.HTML q i o m
 component =
@@ -73,6 +75,17 @@ render state =
                , HP.value (toHexString state.accent)
                ]
     ]
+  , HH.div []
+    [ HH.button
+      [ HE.onClick \_ -> Just SetToSolarized
+      , HP.title "Set solarized"]
+      [ HH.text "Set solarized" ]
+    , HH.button
+      [ HE.onClick \_ -> Just SetToY
+      , HP.title "Set grayer"
+      ]
+      [ HH.text "Set Y"]
+    ]
   , HH.div
     [ HP.id_ "colors" ]
     (map mkDivColor palette)
@@ -186,5 +199,10 @@ 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 }
-
+  SetToSolarized -> H.modify_ \st -> st { dark = solbase03
+                                        , light = solbase3
+                                        , accent = solyellow }
+  SetToY -> H.modify_ \st -> st { dark = fromMaybe solbase03 (fromHexString "#202631")
+                                , light = fromMaybe solbase3 (fromHexString "#f4f7ff")
+                                , accent = fromMaybe solyellow (fromHexString "#a98d50") }