From 15d990a67cf1913f3aa13af336d031714ee41e10 Mon Sep 17 00:00:00 2001 From: Filip Znachor Date: Fri, 21 Jun 2024 22:51:23 +0200 Subject: [PATCH] Better focus outlines & small improvements --- src/button.css | 6 +++--- src/checkbox.css | 2 +- src/tabs.css | 2 +- src/toggle.css | 6 +++--- web/components/Settings.vue | 4 +--- web/css/demo.css | 6 ++---- web/ts/Preset.ts | 19 +++++++++++++------ web/ts/Synergy.ts | 1 + 8 files changed, 25 insertions(+), 21 deletions(-) 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"]},