This commit is contained in:
Yann Esposito (Yogsototh) 2019-10-30 23:31:41 +01:00
parent 229efea589
commit dbf42744fd
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
4 changed files with 11 additions and 21 deletions

View file

@ -10685,8 +10685,9 @@ var PS = {};
var Data_Semigroup = $PS["Data.Semigroup"]; var Data_Semigroup = $PS["Data.Semigroup"];
var colorLabels = [ "magenta", "red", "orange", "yellow", "green", "cyan", "blue", "violet" ]; var colorLabels = [ "magenta", "red", "orange", "yellow", "green", "cyan", "blue", "violet" ];
var genColors = function (accentColor) { var genColors = function (accentColor) {
var l = (Color.toLCh(accentColor)).l;
var c = (Color.toLCh(accentColor)).c; 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); return Data_Array.zip(colorLabels)(colors);
}; };
var baseLabels = [ "base03", "base02", "base01", "base00", "base0", "base1", "base2", "base3" ]; 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 DOM_HTML_Indexed_InputType = $PS["DOM.HTML.Indexed.InputType"];
var Data_Functor = $PS["Data.Functor"]; var Data_Functor = $PS["Data.Functor"];
var Data_Maybe = $PS["Data.Maybe"]; var Data_Maybe = $PS["Data.Maybe"];
var Data_Semigroup = $PS["Data.Semigroup"];
var Halogen_Component = $PS["Halogen.Component"]; var Halogen_Component = $PS["Halogen.Component"];
var Halogen_HTML_CSS = $PS["Halogen.HTML.CSS"]; var Halogen_HTML_CSS = $PS["Halogen.HTML.CSS"];
var Halogen_HTML_Core = $PS["Halogen.HTML.Core"]; 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)))); 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) { }), 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)))); 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) { var initialState = function (v) {
return { return {
@ -10843,7 +10843,7 @@ var PS = {};
return $19; 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({ var component = Halogen_Component.mkComponent({
initialState: initialState, initialState: initialState,

View file

@ -10,10 +10,12 @@
margin: 0 auto; margin: 0 auto;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
font-family: monospace; } font-family: monospace;
display: block;
}
#dark { color: rgba(255,255,255,0.5); } #dark { color: rgba(255,255,255,0.5); }
#light { color: rgba(0,0,0,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; }
</style> </style>
</head> </head>
<body> <body>

View file

@ -67,20 +67,7 @@ render state =
] ]
, HH.div , HH.div
[ HP.id_ "colors" ] [ HP.id_ "colors" ]
([ HH.div (map mkDivColor palette)
[ 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 where
palette = genPalette state.dark state.light state.accent palette = genPalette state.dark state.light state.accent

View file

@ -26,7 +26,8 @@ genColors :: Color -> Array (Tuple String Color)
genColors accentColor = genColors accentColor =
zip colorLabels colors zip colorLabels colors
where c = (toLCh accentColor).c 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 -- | Generate a solarized-like palette given 3 colors
-- base03, base3 and a color like yellow -- base03, base3 and a color like yellow