Better focus outlines & small improvements

src/button.css

@@ -16,7 +16,6 @@
 	border-radius: var(--synergy-border-radius);
 	transition: .2s background-color;
 	cursor: pointer;
-	outline: none;
 	transition: box-shadow .2s;
 	text-decoration: none;
 }
@@ -41,9 +40,10 @@
 }
 
 .btn:focus-visible {
-	box-shadow: 0 0 0 5px var(--synergy-focus-highlight);
+	outline: 5px solid var(--synergy-btn-focus-highlight);
+	background-color: var(--synergy-btn-bg-hover);
 }
 
 .btn.btn-primary:focus-visible {
-	box-shadow: 0 0 0 5px var(--synergy-focus-highlight);
+	outline: 5px solid var(--synergy-focus-highlight);
 }

src/checkbox.css

@@ -42,7 +42,7 @@ label.cbox > input:checked + *::before {
 }
 
 label.cbox > input:focus-visible  + *::before {
-	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 0 0 8px var(--synergy-focus-highlight);
+	outline: 5px solid var(--synergy-focus-highlight);
 }
 
 label.cbox > input[type=checkbox] + *::before {

src/tabs.css

@@ -26,7 +26,7 @@
 	width: 60%;
 	height: var(--synergy-tab-bar-height);
 	background-color: var(--synergy-border-active);
-	bottom: 0; 
+	bottom: 0;
 	left: 20%;
 	transition: all .2s;
 	opacity: 0;

src/toggle.css

@@ -30,7 +30,7 @@
 }
 
 .toggle .indicator::after {
-	transition: all .2s;
+	transition: background-color .2s;
 	margin-left: auto;
 	display: inline-block;
 	height: 100%;
@@ -48,8 +48,8 @@
 	background: var(--synergy-border-active);
 }
 
-.toggle input:focus-visible + .indicator::after {
+.toggle input:focus-visible + .indicator:after {
-	box-shadow: 0 0 10px 0 var(--synergy-bg), 0 0 0 10px var(--synergy-focus-highlight);
+	outline: 10px solid var(--synergy-focus-highlight);
 }
 
 

web/components/Settings.vue

@@ -38,9 +38,7 @@ function applyPreset(preset: Preset) {
 						{{ v.name }}
 					</label>
 					<div v-if="v.type == 'color'">
-						<div class="inp inp-small color">
+						<div class="colori" :style="{ background: variableValues[v.name] }" />
-							<input v-model="variableValues[v.name]" type="color" :id="v.name" @change="update">
-						</div>
 						<div class="inp inp-small">
 							<input v-model="variableValues[v.name]" type="string" :id="v.name" @change="update">
 						</div>

web/css/demo.css

@@ -42,14 +42,12 @@ header h1 .color {background-clip: text; -webkit-background-clip: text; backgrou
 .form {display: flex; flex-direction: column; gap: 15px; max-width: 450px;}
 .form > * {margin: 0;}
 
+.colori {aspect-ratio: 1 / 1; height: 34px; border-radius: var(--synergy-border-radius);}
+
 
 /* Synergy expansions */
 
 .inp.inp-small input {padding: 5px 9px; font-size: .9em;}
 
-.inp.color {width: 40px;}
-.inp input[type=color] {padding: 0; border: 0;}
-::-webkit-color-swatch, ::-moz-color-swatch {border: 0;}
-
 a {color: var(--synergy-btn-primary-bg);}
 a:hover {color: var(--synergy-btn-primary-bg-hover);}

web/ts/Preset.ts

@@ -38,27 +38,34 @@ export class Preset {
 		return {
 			"border": this.cMix(cMain, cBg, 0.4),
 			"border-active": cMain.hexFormat(),
-			"focus-highlight": this.cMix(cMain, cBg, 0.25),
+			"focus-highlight": this.cAlpha(cMain, 0.25),
 			"tab-highlight": this.cMix(cMain, cBg, 0.1),
 			"label": this.cMix(cMain, cBg, 0.8),
 			"label-active": this.cMix(cMain, cBg),
 			"btn-primary-bg": this.cMix(cMain, cBg, 0.8),
 			"btn-primary-bg-active": this.cMix(cMain, cBg, 0.5),
-			"btn-primary-bg-hover": this.cMix(cMain, cBg),
+			"btn-primary-bg-hover": this.cMix(cMain, cBg, 0.9),
-			"btn-bg": this.cMix(cBg.mix(cGray, 0.8).mix(cMain, 0.1), cBg, 0.3),
+			"btn-focus-highlight": this.cAlpha(cBg.mix(cGray, 0.6).mix(cMain, 0.1), 0.25),
-			"btn-bg-active": this.cMix(cBg.mix(cGray, 0.8).mix(cMain, 0.1), cBg, 0.6),
+			"btn-bg": this.cMix(cBg.mix(cGray, 0.6).mix(cMain, 0.1), cBg, 0.3),
-			"btn-bg-hover": this.cMix(cBg.mix(cGray, 0.8).mix(cMain, 0.1), cBg, 0.4),
+			"btn-bg-active": this.cMix(cBg.mix(cGray, 0.6).mix(cMain, 0.1), cBg, 0.6),
+			"btn-bg-hover": this.cMix(cBg.mix(cGray, 0.6).mix(cMain, 0.1), cBg, 0.45),
 			"text-color": cText.hexFormat(),
 			"bg": cBg.hexFormat(),
 			"site-bg": cSiteBg.hexFormat()
 		};
 	}
-	
+
 	public cMix(color: Color, color2: Color, ratio: number = 1) {
 		let c = color2.mix(color, ratio);
 		return c.hexFormat();
 	}
 
+	public cAlpha(color: Color, alpha: number = 1) {
+		let c = color.clone();
+		c.a = alpha;
+		return c.hexFormat();
+	}
+
 	public static convertColors(input: Colors<Color | string>) {
 		return Object.entries(input).reduce<Partial<Colors<Color>>>((acc, [key, value]) => {
 			acc[key as ColorType] = value instanceof Color ? value : Color.fromHex(value);

web/ts/Synergy.ts

@@ -13,6 +13,7 @@ export const variables: Variable[] = [
 	{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-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"]},