Improved scripts & buttons

src/_config.css

@@ -1,22 +0,0 @@
-:root {
-	--synergy-border: #865e3c66;
-	--synergy-border-active: #865e3c;
-	--synergy-border-width: 2px;
-	--synergy-border-radius: .375rem;
-	--synergy-focus-highlight: #865e3c3f;
-	--synergy-tab-highlight: #865e3c19;
-	--synergy-label: #9d7d61;
-	--synergy-label-active: #865e3c;
-	--synergy-btn-primary-bg: #9d7d61;
-	--synergy-btn-primary-bg-active: #c0ab98;
-	--synergy-btn-primary-bg-hover: #865e3c;
-	--synergy-btn-bg: #e1dedb;
-	--synergy-btn-bg-active: #c8c5c2;
-	--synergy-btn-bg-hover: #d9d6d2;
-	--synergy-text-color: #63452c;
-	--synergy-bg: #f9f7f4;
-}
-
-.btn.btn-primary {
-	--synergy-text-color: #ffffff;
-}

src/button.css

@@ -14,9 +14,8 @@
 	font-size: 1em;
 	line-height: 1.25;
 	border-radius: var(--synergy-border-radius);
-	transition: .2s background-color;
+	transition: transform .1s;
 	cursor: pointer;
-	transition: box-shadow .2s;
 	text-decoration: none;
 }
 
@@ -29,14 +28,14 @@
 }
 
 .btn:active {
-	background-color: var(--synergy-btn-bg-active);
+	transform: scale(.97);
 }
 
 .btn.btn-primary {
-	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
 	--synergy-btn-bg: var(--synergy-btn-primary-bg);
 	--synergy-btn-bg-hover: var(--synergy-btn-primary-bg-hover);
-	--synergy-btn-bg-active: var(--synergy-btn-primary-bg-active);
+	--synergy-text-color: var(--synergy-btn-primary-text-color);
 }
 
 .btn:focus-visible {

style.css

@@ -1,4 +1,3 @@
-@import url("src/_config.css");
 @import url("src/button.css");
 @import url("src/input.css");
 @import url("src/toggle.css");

web/components/Settings.vue

@@ -17,7 +17,7 @@ function update() {
 }
 
 function applyPreset(preset: Preset) {
-	const variables = preset.getVariables() as ComboObject;
+	const variables = preset.getColorVariables() as ComboObject;
 	Object.keys(variables).forEach(key => {
 		variableValues[key] = variables[key];
 	});

web/ts/Color.ts

@@ -29,6 +29,10 @@ export class Color {
 		return [r, g, b];
 	}
 
+	alpha(alpha: number) {
+		return new Color(this.r, this.g, this.b, alpha);
+	}
+
 	rgbFormat() {
 		let rgb = `${this.r*255}, ${this.g*255}, ${this.b*255}`;
 		return this.a == 1 ? `rgb(${rgb})` : `rgba(${rgb}, ${this.a})`;

web/ts/Preset.ts

@@ -5,8 +5,8 @@ export class Preset {
 	static readonly presets: Preset[] = [
 		new Preset({main: "#337e2c", text: "#031601", bg: "#f3f7f2"}),
 		new Preset({main: "#1c71d8", text: "#030e1c", bg: "#ffffff"}),
-		new Preset({main: "#9141ac", text: "#613583", bg: "#f6edf7"}),
+		new Preset({main: "#9141ac", text: "#613583", bg: "#ffffff", "site-bg": "#f6edf7"}),
-		new Preset({main: "#a51d2d", text: "#3d3846", bg: "#f1e9e8"}),
+		new Preset({main: "#a51d2d", text: "#3d3846", bg: "#f6f2f1", "site-bg": "#f1e9e8"}),
 		new Preset({main: "#865e3c", text: "#63452c", bg: "#f9f7f4", "site-bg": "#ffffff"}),
 		new Preset({main: "#F45662", text: "#c4aeae", bg: "#181218"}),
 		new Preset({main: "#E66993", text: "#dddddd", bg: "#18181b"}),
@@ -29,41 +29,54 @@ export class Preset {
 		return this.colors["main"];
 	}
 
-	public getVariables() {
+	public getColorVariables() {
 		const cMain = this.selectColor("main");
 		const cBg = this.selectColor("bg");
 		const cSiteBg = this.selectColor(["site-bg", "bg"]);
 		const cText = this.selectColor("text");
-		const cGray = new Color(0.6, 0.6, 0.6);
+		const cGray = new Color(.6, .6, .6);
-		return {
+		const cBtn = cBg.mix(cGray, .6).mix(cMain, .1);
-			"border": this.cMix(cMain, cBg, 0.4),
+		const colors = {
-			"border-active": cMain.hexFormat(),
+			"border": cMain.mix(cBg, .6),
-			"focus-highlight": this.cAlpha(cMain, 0.25),
+			"border-active": cMain,
-			"tab-highlight": this.cMix(cMain, cBg, 0.1),
+			"focus-highlight": cMain.alpha(.25),
-			"label": this.cMix(cMain, cBg, 0.8),
+			"tab-highlight": cMain.alpha(.1),
-			"label-active": this.cMix(cMain, cBg),
+			"label": cMain.mix(cBg, .2),
-			"btn-primary-bg": this.cMix(cMain, cBg, 0.8),
+			"label-active": cMain,
-			"btn-primary-bg-active": this.cMix(cMain, cBg, 0.5),
+			"btn-primary-bg": cMain.mix(cBg, .2),
-			"btn-primary-bg-hover": this.cMix(cMain, cBg, 0.9),
+			"btn-primary-bg-hover": cMain.mix(cBg, .1),
-			"btn-focus-highlight": this.cAlpha(cBg.mix(cGray, 0.6).mix(cMain, 0.1), 0.25),
+			"btn-primary-text-color": this.cSelectContrast(cMain, cText, cBg, Color.fromHex("#fff"), Color.fromHex("#000")),
-			"btn-bg": this.cMix(cBg.mix(cGray, 0.6).mix(cMain, 0.1), cBg, 0.3),
+			"btn-focus-highlight": cBtn.alpha(.25),
-			"btn-bg-active": this.cMix(cBg.mix(cGray, 0.6).mix(cMain, 0.1), cBg, 0.6),
+			"btn-bg": cBtn.mix(cBg, .7),
-			"btn-bg-hover": this.cMix(cBg.mix(cGray, 0.6).mix(cMain, 0.1), cBg, 0.45),
+			"btn-bg-hover": cBtn.mix(cBg, .45),
-			"text-color": cText.hexFormat(),
+			"text-color": cText,
-			"bg": cBg.hexFormat(),
+			"bg": cBg,
-			"site-bg": cSiteBg.hexFormat()
+			"site-bg": cSiteBg
 		};
+		return this.convertColorsToHex(colors);
 	}
 
-	public cMix(color: Color, color2: Color, ratio: number = 1) {
+	private cSelectContrast(color: Color, ...colors: Color[]) {
-		let c = color2.mix(color, ratio);
+		let bestContrast = 0;
-		return c.hexFormat();
+		let bestColor;
+		for (const otherColor of colors) {
+			const contrast = color.contrast(otherColor);
+			if (contrast > bestContrast) {
+				bestContrast = contrast;
+				bestColor = otherColor;
+			}
+		}
+		return bestColor;
 	}
 
-	public cAlpha(color: Color, alpha: number = 1) {
+	private convertColorsToHex(colors: ComboObject) {
-		let c = color.clone();
+		const hexColors: ComboObject = {};
-		c.a = alpha;
+		for (const key in colors) {
-		return c.hexFormat();
+			if (colors.hasOwnProperty(key)) {
+				hexColors[key] = colors[key].hexFormat();
+			}
+		}
+		return hexColors;
 	}
 
 	public static convertColors(input: Colors<Color | string>) {

web/ts/Synergy.ts

@@ -12,11 +12,10 @@ export const variables: Variable[] = [
 	{name: "label-active", type: "color", requiredBy: ["input"]},
 	{name: "btn-primary-bg", type: "color", requiredBy: ["button"]},
 	{name: "btn-primary-bg-hover", type: "color", requiredBy: ["button"]},
-	{name: "btn-primary-bg-active", type: "color", requiredBy: ["button"]},
+	{name: "btn-primary-text-color", type: "color", requiredBy: ["button"]},
 	{name: "btn-focus-highlight", type: "color", requiredBy: ["button"]},
 	{name: "btn-bg", type: "color", requiredBy: ["button"]},
 	{name: "btn-bg-hover", type: "color", requiredBy: ["button"]},
-	{name: "btn-bg-active", type: "color", requiredBy: ["button"]},
 	{name: "text-color", type: "color", requiredBy: ["input", "button"]},
 	{name: "bg", type: "color", requiredBy: ["input", "checkbox", "toggle"]},
 	{name: "site-bg", type: "color"}
@@ -50,7 +49,7 @@ export function getDefaultVariables() {
 		"border-width": "2px",
 		"border-radius": ".375rem",
 		"tab-bar-height": "2px",
-		...Preset.getRandom().getVariables()
+		...Preset.getRandom().getColorVariables()
 	};
 }