CodeSpace/Synergy-Legacy
3
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better focus outlines & small improvements

Browse source
This commit is contained in:
Filip Znachor 2024-06-21 22:51:23 +02:00
parent c3aa6857c2
commit 15d990a67c
8 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/button.css
View file

@ -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);
}

2
src/checkbox.css
View file

@ -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 {

6
src/toggle.css
View file

@ -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);
}

4
web/components/Settings.vue
View file

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

6
web/css/demo.css
View file

@ -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);}

17
web/ts/Preset.ts
View file

@ -38,16 +38,17 @@ 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()
@ -59,6 +60,12 @@ export class Preset {
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);

1
web/ts/Synergy.ts
View file

@ -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"]},