Better focus outlines & small improvements
This commit is contained in:
parent
c3aa6857c2
commit
15d990a67c
8 changed files with 25 additions and 21 deletions
|
@ -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);
|
||||
}
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);}
|
|
@ -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);
|
||||
|
|
|
@ -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"]},
|
||||
|
|
Loading…
Reference in a new issue