looks better, perhaps went back
This commit is contained in:
Yann Esposito (Yogsototh)
parent
2e19dabd8c
commit
0cc8e21d72
GPG key ID:
7B19A4C650D59646
3 changed files with 114 additions and 276 deletions
302
ui/assets/app.js
302
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,
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
|
|
|
|||
Loading…
Reference in a new issue