From 6f2521b2da0e2838564f53ccd84e18dccdc2cd7f Mon Sep 17 00:00:00 2001 From: Filip Znachor Date: Mon, 24 Jun 2024 13:16:02 +0200 Subject: [PATCH] Improved scripts & buttons --- src/_config.css | 22 ------------ src/button.css | 9 +++-- style.css | 1 - web/components/Settings.vue | 2 +- web/ts/Color.ts | 4 +++ web/ts/Preset.ts | 69 ++++++++++++++++++++++--------------- web/ts/Synergy.ts | 5 ++- 7 files changed, 52 insertions(+), 60 deletions(-) delete mode 100644 src/_config.css diff --git a/src/_config.css b/src/_config.css deleted file mode 100644 index f368ef2..0000000 --- a/src/_config.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/button.css b/src/button.css index 85da5bc..747b54a 100644 --- a/src/button.css +++ b/src/button.css @@ -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 { diff --git a/style.css b/style.css index d1231e6..4b46ebb 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,3 @@ -@import url("src/_config.css"); @import url("src/button.css"); @import url("src/input.css"); @import url("src/toggle.css"); diff --git a/web/components/Settings.vue b/web/components/Settings.vue index 8eed585..c4cc336 100644 --- a/web/components/Settings.vue +++ b/web/components/Settings.vue @@ -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]; }); diff --git a/web/ts/Color.ts b/web/ts/Color.ts index f652da0..faf2b59 100644 --- a/web/ts/Color.ts +++ b/web/ts/Color.ts @@ -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})`; diff --git a/web/ts/Preset.ts b/web/ts/Preset.ts index 0367fb2..d3ac6ed 100644 --- a/web/ts/Preset.ts +++ b/web/ts/Preset.ts @@ -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) { diff --git a/web/ts/Synergy.ts b/web/ts/Synergy.ts index 18b00f2..9b64e1f 100644 --- a/web/ts/Synergy.ts +++ b/web/ts/Synergy.ts @@ -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() }; }