working with full palette gen

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

View file

@ -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,

View file

@ -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" ]
}
}

View file

@ -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 }

View file

@ -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