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

Improved scripts & buttons

Browse source
This commit is contained in:
Filip Znachor 2024-06-24 13:16:02 +02:00
parent af7b3dc54b
commit 6f2521b2da
7 changed files with 52 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/_config.css
View file

@ -1,22 +0,0 @@
:root {
--synergy-border: #865e3c66;
--synergy-border-active: #865e3c;
--synergy-border-width: 2px;
--synergy-border-radius: .375rem;
--synergy-focus-highlight: #865e3c3f;
--synergy-tab-highlight: #865e3c19;
--synergy-label: #9d7d61;
--synergy-label-active: #865e3c;
--synergy-btn-primary-bg: #9d7d61;
--synergy-btn-primary-bg-active: #c0ab98;
--synergy-btn-primary-bg-hover: #865e3c;
--synergy-btn-bg: #e1dedb;
--synergy-btn-bg-active: #c8c5c2;
--synergy-btn-bg-hover: #d9d6d2;
--synergy-text-color: #63452c;
--synergy-bg: #f9f7f4;
}
.btn.btn-primary {
--synergy-text-color: #ffffff;
}

9
src/button.css
View file

@ -14,9 +14,8 @@
font-size: 1em;
line-height: 1.25;
border-radius: var(--synergy-border-radius);
transition: .2s background-color;
transition: transform .1s;
cursor: pointer;
transition: box-shadow .2s;
text-decoration: none;
}
@ -29,14 +28,14 @@
}
.btn:active {
background-color: var(--synergy-btn-bg-active);
transform: scale(.97);
}
.btn.btn-primary {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
--synergy-btn-bg: var(--synergy-btn-primary-bg);
--synergy-btn-bg-hover: var(--synergy-btn-primary-bg-hover);
--synergy-btn-bg-active: var(--synergy-btn-primary-bg-active);
--synergy-text-color: var(--synergy-btn-primary-text-color);
}
.btn:focus-visible {

1
style.css
View file

@ -1,4 +1,3 @@
@import url("src/_config.css");
@import url("src/button.css");
@import url("src/input.css");
@import url("src/toggle.css");

2
web/components/Settings.vue
View file

@ -17,7 +17,7 @@ function update() {
}
function applyPreset(preset: Preset) {
const variables = preset.getVariables() as ComboObject;
const variables = preset.getColorVariables() as ComboObject;
Object.keys(variables).forEach(key => {
variableValues[key] = variables[key];
});

4
web/ts/Color.ts
View file

@ -29,6 +29,10 @@ export class Color {
return [r, g, b];
}
alpha(alpha: number) {
return new Color(this.r, this.g, this.b, alpha);
}
rgbFormat() {
let rgb = `${this.r*255}, ${this.g*255}, ${this.b*255}`;
return this.a == 1 ? `rgb(${rgb})` : `rgba(${rgb}, ${this.a})`;

69
web/ts/Preset.ts
View file

@ -5,8 +5,8 @@ export class Preset {
static readonly presets: Preset[] = [
new Preset({main: "#337e2c", text: "#031601", bg: "#f3f7f2"}),
new Preset({main: "#1c71d8", text: "#030e1c", bg: "#ffffff"}),
new Preset({main: "#9141ac", text: "#613583", bg: "#f6edf7"}),
new Preset({main: "#a51d2d", text: "#3d3846", bg: "#f1e9e8"}),
new Preset({main: "#9141ac", text: "#613583", bg: "#ffffff", "site-bg": "#f6edf7"}),
new Preset({main: "#a51d2d", text: "#3d3846", bg: "#f6f2f1", "site-bg": "#f1e9e8"}),
new Preset({main: "#865e3c", text: "#63452c", bg: "#f9f7f4", "site-bg": "#ffffff"}),
new Preset({main: "#F45662", text: "#c4aeae", bg: "#181218"}),
new Preset({main: "#E66993", text: "#dddddd", bg: "#18181b"}),
@ -29,41 +29,54 @@ export class Preset {
return this.colors["main"];
}
public getVariables() {
public getColorVariables() {
const cMain = this.selectColor("main");
const cBg = this.selectColor("bg");
const cSiteBg = this.selectColor(["site-bg", "bg"]);
const cText = this.selectColor("text");
const cGray = new Color(0.6, 0.6, 0.6);
return {
"border": this.cMix(cMain, cBg, 0.4),
"border-active": cMain.hexFormat(),
"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, 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()
const cGray = new Color(.6, .6, .6);
const cBtn = cBg.mix(cGray, .6).mix(cMain, .1);
const colors = {
"border": cMain.mix(cBg, .6),
"border-active": cMain,
"focus-highlight": cMain.alpha(.25),
"tab-highlight": cMain.alpha(.1),
"label": cMain.mix(cBg, .2),
"label-active": cMain,
"btn-primary-bg": cMain.mix(cBg, .2),
"btn-primary-bg-hover": cMain.mix(cBg, .1),
"btn-primary-text-color": this.cSelectContrast(cMain, cText, cBg, Color.fromHex("#fff"), Color.fromHex("#000")),
"btn-focus-highlight": cBtn.alpha(.25),
"btn-bg": cBtn.mix(cBg, .7),
"btn-bg-hover": cBtn.mix(cBg, .45),
"text-color": cText,
"bg": cBg,
"site-bg": cSiteBg
};
return this.convertColorsToHex(colors);
}
public cMix(color: Color, color2: Color, ratio: number = 1) {
let c = color2.mix(color, ratio);
return c.hexFormat();
private cSelectContrast(color: Color, ...colors: Color[]) {
let bestContrast = 0;
let bestColor;
for (const otherColor of colors) {
const contrast = color.contrast(otherColor);
if (contrast > bestContrast) {
bestContrast = contrast;
bestColor = otherColor;
}
}
return bestColor;
}
public cAlpha(color: Color, alpha: number = 1) {
let c = color.clone();
c.a = alpha;
return c.hexFormat();
private convertColorsToHex(colors: ComboObject) {
const hexColors: ComboObject = {};
for (const key in colors) {
if (colors.hasOwnProperty(key)) {
hexColors[key] = colors[key].hexFormat();
}
}
return hexColors;
}
public static convertColors(input: Colors<Color | string>) {

5
web/ts/Synergy.ts
View file

@ -12,11 +12,10 @@ export const variables: Variable[] = [
{name: "label-active", type: "color", requiredBy: ["input"]},
{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-primary-text-color", 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"]},
{name: "text-color", type: "color", requiredBy: ["input", "button"]},
{name: "bg", type: "color", requiredBy: ["input", "checkbox", "toggle"]},
{name: "site-bg", type: "color"}
@ -50,7 +49,7 @@ export function getDefaultVariables() {
"border-width": "2px",
"border-radius": ".375rem",
"tab-bar-height": "2px",
...Preset.getRandom().getVariables()
...Preset.getRandom().getColorVariables()
};
}