diff --git a/src/button.css b/src/button.css
index 995b0a5..85da5bc 100644
--- a/src/button.css
+++ b/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);
}
\ No newline at end of file
diff --git a/src/checkbox.css b/src/checkbox.css
index 33e16e8..2b75512 100644
--- a/src/checkbox.css
+++ b/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 {
diff --git a/src/tabs.css b/src/tabs.css
index fe73328..a0fd5f2 100644
--- a/src/tabs.css
+++ b/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;
diff --git a/src/toggle.css b/src/toggle.css
index c62dff9..95ae82f 100644
--- a/src/toggle.css
+++ b/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 {
- box-shadow: 0 0 10px 0 var(--synergy-bg), 0 0 0 10px var(--synergy-focus-highlight);
+.toggle input:focus-visible + .indicator:after {
+ outline: 10px solid var(--synergy-focus-highlight);
}
diff --git a/web/components/Settings.vue b/web/components/Settings.vue
index 709c3d6..8eed585 100644
--- a/web/components/Settings.vue
+++ b/web/components/Settings.vue
@@ -38,9 +38,7 @@ function applyPreset(preset: Preset) {
{{ v.name }}
-
-
-
+
diff --git a/web/css/demo.css b/web/css/demo.css
index 56b2163..773810d 100644
--- a/web/css/demo.css
+++ b/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);}
\ No newline at end of file
diff --git a/web/ts/Preset.ts b/web/ts/Preset.ts
index b4cc845..0367fb2 100644
--- a/web/ts/Preset.ts
+++ b/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-bg": this.cMix(cBg.mix(cGray, 0.8).mix(cMain, 0.1), cBg, 0.3),
- "btn-bg-active": this.cMix(cBg.mix(cGray, 0.8).mix(cMain, 0.1), cBg, 0.6),
- "btn-bg-hover": this.cMix(cBg.mix(cGray, 0.8).mix(cMain, 0.1), cBg, 0.4),
+ "btn-primary-bg-hover": this.cMix(cMain, cBg, 0.9),
+ "btn-focus-highlight": this.cAlpha(cBg.mix(cGray, 0.6).mix(cMain, 0.1), 0.25),
+ "btn-bg": this.cMix(cBg.mix(cGray, 0.6).mix(cMain, 0.1), cBg, 0.3),
+ "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
) {
return Object.entries(input).reduce>>((acc, [key, value]) => {
acc[key as ColorType] = value instanceof Color ? value : Color.fromHex(value);
diff --git a/web/ts/Synergy.ts b/web/ts/Synergy.ts
index 5891ed3..18b00f2 100644
--- a/web/ts/Synergy.ts
+++ b/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"]},