diff --git a/package.json b/package.json index 65bc8f9a..11f5f04e 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,7 @@ "watch": "pnpm build --watch" }, "dependencies": { - "arrpc": "github:OpenAsar/arrpc#061d473dc742266fc7f61587ed18e666543fed1e", - "tinycolor2": "^1.6.0" + "arrpc": "github:OpenAsar/arrpc#061d473dc742266fc7f61587ed18e666543fed1e" }, "devDependencies": { "@fal-works/esbuild-plugin-global-externals": "^2.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f10185b..9c258729 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,9 +4,6 @@ dependencies: arrpc: specifier: github:OpenAsar/arrpc#061d473dc742266fc7f61587ed18e666543fed1e version: github.com/OpenAsar/arrpc/061d473dc742266fc7f61587ed18e666543fed1e - tinycolor2: - specifier: ^1.6.0 - version: 1.6.0 devDependencies: '@fal-works/esbuild-plugin-global-externals': @@ -3577,10 +3574,6 @@ packages: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true - /tinycolor2@1.6.0: - resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==} - dev: false - /tmp-promise@3.0.3: resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==} dependencies: diff --git a/src/main/splash.ts b/src/main/splash.ts index 7e4bfd2e..e78bc42e 100644 --- a/src/main/splash.ts +++ b/src/main/splash.ts @@ -8,9 +8,9 @@ import { BrowserWindow } from "electron"; import { join } from "path"; import { SplashProps } from "shared/browserWinProperties"; import { VIEW_DIR } from "shared/paths"; -import tinycolor from "tinycolor2"; import { Settings } from "./settings"; +import { alpha } from "./utils/color"; export function createSplashWindow() { const splash = new BrowserWindow(SplashProps); @@ -21,9 +21,7 @@ export function createSplashWindow() { if (splashTheming) { if (splashColor) { splash.webContents.insertCSS(`body { --fg: ${splashColor} !important }`); - const semiTrans = tinycolor(splashColor); - semiTrans.setAlpha(0.2); - splash.webContents.insertCSS(`body { --fg-semi-trans: ${semiTrans.toRgbString()} !important }`); + splash.webContents.insertCSS(`body { --fg-semi-trans: ${alpha(splashColor, 0.2)} !important }`); } if (splashBackground) { diff --git a/src/main/utils/color.ts b/src/main/utils/color.ts new file mode 100644 index 00000000..7398a745 --- /dev/null +++ b/src/main/utils/color.ts @@ -0,0 +1,42 @@ +/* + * SPDX-License-Identifier: GPL-3.0 + * Vesktop, a desktop app aiming to give you a snappier Discord Experience + * Copyright (c) 2023 Vendicated and Vencord contributors + */ + +const digitRegex = "([\\d.%]+)"; +const validFormats = ["rgb", "hsl", "hwb", "lab", "lch", "oklab", "oklch"] as const; + +const colorRegexes = [ + ...validFormats.map(fmt => new RegExp(`(${fmt})\\(${new Array(3).fill(digitRegex).join(" *, *")}\\)`)), + ...validFormats.map(fmt => new RegExp(`(${fmt})a\\(${new Array(4).fill(digitRegex).join(" *, *")}\\)`)), + ...validFormats.map(fmt => new RegExp(`(${fmt})\\(${new Array(3).fill(digitRegex).join(" +")}\\)`)), + ...validFormats.map( + fmt => new RegExp(`(${fmt})a\\(${new Array(3).fill(digitRegex).join(" +")} ?/ ?${digitRegex}\\)`) + ) +]; + +const hexRegex = /^#([\da-fA-F]{6})$/; +const hexAlphaRegex = /^#([\da-fA-F]{6})[\da-fA-F]{2}$/; + +export const alpha = (original: string, alpha: number): string => { + for (const regex of colorRegexes) { + const match = original.match(regex); + if (match) { + const [, format, a, b, c] = match; + return `${format}a(${a} ${b} ${c} / ${alpha})`; + } + } + + for (const regex of [hexRegex, hexAlphaRegex]) { + const match = original.match(regex); + if (match) { + const [, str] = match; + return `#${str}${Math.round(alpha * 255) + .toString(16) + .padStart(2, "0")}`; + } + } + + return original; +};