-
-
@@ -490,10 +627,14 @@
var shadeSteps = 10;
var saturationShift = 0;
var lightShift = 4;
+ var contrastNegative = parseInt(helper.e(".input-theme-contrast-dark").value, 10) / 100;
+ var contrastPositive = parseInt(helper.e(".input-theme-contrast-light").value, 10) / 100;
var html = helper.e("html");
- var rgb = helper.convertColor.hex.rgb(helper.e(".theme-color").value);
+ var rgb = helper.convertColor.hex.rgb(helper.e(".input-theme-color").value);
var hsl = helper.convertColor.rgb.hsl(rgb);
+
html.style.setProperty("--theme-shade", rgb.r + ", " + rgb.g + ", " + rgb.b);
+
var renderShade = function(name, index, rgb) {
for (var key in rgb) {
if (rgb[key] < 0) {
@@ -513,54 +654,71 @@
for (var i = 1; i <= shadeSteps; i++) {
var rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
- s: hsl.s - (saturationShift * i),
- l: hsl.l - (lightShift * i)
+ s: hsl.s,
+ l: hsl.l - (contrastNegative * i)
});
renderShade("--theme-shade-negative-", i, rgb);
};
for (var i = 1; i <= shadeSteps; i++) {
var rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
- s: hsl.s + (saturationShift * i),
- l: hsl.l + (lightShift * i)
+ s: hsl.s,
+ l: hsl.l + (contrastPositive * i)
});
renderShade("--theme-shade-positive-", i, rgb);
};
}
},
accent: function() {
- var color = helper.convertColor.hex.rgb(helper.e(".theme-accent").value);
+ var color = helper.convertColor.hex.rgb(helper.e(".input-theme-accent").value);
helper.e("html").style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
}
}
};
+
helper.e(".disable-on").addEventListener("click", function() {
disable.on();
}, false);
+
helper.e(".disable-off").addEventListener("click", function() {
disable.off();
}, false);
+
helper.e(".theme-dark").addEventListener("click", function() {
theme.dark();
}, false);
+
helper.e(".theme-light").addEventListener("click", function() {
theme.light();
}, false);
- helper.e(".radius").addEventListener("input", function() {
+
+ helper.e(".input-theme-radius").addEventListener("input", function() {
var html = helper.e("html");
html.style.setProperty("--theme-radius", (parseInt(this.value, 10) / 100) + "rem");
}, false);
+
helper.e(".style-guide-form-dropdown").addEventListener("click", function() {
helper.toggleClass(helper.e(".form-dropdown"), "form-dropdown-open");
helper.toggleClass(helper.e(".form-dropdown-menu"), "form-dropdown-menu-right");
helper.toggleClass(helper.e(".form-dropdown-menu"), "form-dropdown-menu-bottom");
}, false);
- helper.e(".theme-accent").addEventListener("change", function() {
+
+ helper.e(".input-theme-accent").addEventListener("change", function() {
theme.render.accent();
}, false);
- helper.e(".theme-color").addEventListener("change", function() {
+
+ helper.e(".input-theme-color").addEventListener("change", function() {
theme.render.color.shade();
}, false);
+
+ helper.e(".input-theme-contrast-light").addEventListener("input", function() {
+ theme.render.color.shade();
+ }, false);
+
+ helper.e(".input-theme-contrast-dark").addEventListener("input", function() {
+ theme.render.color.shade();
+ }, false);
+
theme.render.color.shade();
theme.render.accent();