cswimr/Vencord
1
0
Fork 0
forked from CoastalCommitsArchival/github.com-Vendicated-Vencord
Code Pull requests Packages 1 Wiki Activity

updated DiscordColorways

Browse source
This commit is contained in:
Seaswimmer 2024-04-24 14:44:47 -04:00
parent 2dd955f57c
commit 7977e917a1
Signed by: cswimr
GPG key ID: 1EBC234EEDA901AE
9 changed files with 107 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/userplugins/DiscordColorways/components/CreatorModal.tsx
View file

@ -29,7 +29,7 @@ import { ColorPicker } from "..";
import { knownThemeVars } from "../constants";
import { generateCss, getPreset } from "../css";
import { Colorway } from "../types";
import { getHex, hexToString, hslToHex, rgbToHex } from "../utils";
import { colorToHex, getHex, hexToString } from "../utils";
import ConflictingColorsModal from "./ConflictingColorsModal";
import ThemePreviewCategory from "./ThemePreview";
export default function ({
@ -355,22 +355,7 @@ export default function ({
setSecondaryColor,
setTertiaryColor
];
hexToString(colorwayID).split(/,#/).forEach((color: string, i: number) => {
var colorType = "hex";
if (color.includes("hsl")) {
colorType = "hsl";
} else if (color.includes("rgb")) {
colorType = "rgb";
}
color = color.replaceAll(",", "").replace(/.+?\(/, "").replace(")", "").replaceAll(/[ \t]+\/[ \t]+/g, " ").replaceAll("%", "");
if (colorType === "hsl") {
color = hslToHex(Number(color.split(" ")[0]), Number(color.split(" ")[1]), Number(color.split(" ")[2]));
}
if (colorType === "rgb") {
color = rgbToHex(Number(color.split(" ")[0]), Number(color.split(" ")[1]), Number(color.split(" ")[2]));
}
setColor[i](color.replace("#", ""));
});
hexToString(colorwayID).split(/,#/).forEach((color: string, i: number) => setColor[i](colorToHex(color)));
props.onClose();
}
}}

17
src/userplugins/DiscordColorways/components/InfoModal.tsx
View file

@ -18,6 +18,7 @@ import { Button, Clipboard, Forms, Text, Toasts } from "@webpack/common";
import { ColorwayCSS } from "..";
import { generateCss } from "../css";
import { Colorway } from "../types";
import { colorToHex } from "../utils";
import ThemePreviewCategory from "./ThemePreview";
export default function ({
@ -187,12 +188,11 @@ export default function ({
look={Button.Looks.FILLED}
onClick={async () => {
const customColorways = await DataStore.get("customColorways");
const actveColorwayID = await DataStore.get("actveColorwayID");
const customColorwaysArray: Colorway[] = [];
customColorways.map((color: Colorway, i: number) => {
if (customColorways.length > 0) {
if (color.name === colorwayProps.name) {
color["dc-import"] = generateCss(color.primary.split("#")[1] || "313338", color.secondary.split("#")[1] || "2b2d31", color.tertiary.split("#")[1] || "1e1f22", color.accent.split("#")[1] || "5865f2", true, true);
color["dc-import"] = generateCss(colorToHex(color.primary) || "313338", colorToHex(color.secondary) || "2b2d31", colorToHex(color.tertiary) || "1e1f22", colorToHex(color.accent) || "5865f2", true, true);
customColorwaysArray.push(color);
} else {
customColorwaysArray.push(color);
@ -200,11 +200,6 @@ export default function ({
if (++i === customColorways.length) {
DataStore.set("customColorways", customColorwaysArray);
}
if (actveColorwayID === colorwayProps.name) {
DataStore.set("actveColorway", color["dc-import"]);
DataStore.set("actveColorwayID", color.name);
ColorwayCSS.set(color["dc-import"]);
}
modalProps.onClose();
loadUIProps();
}
@ -233,23 +228,17 @@ export default function ({
const colorways = data.flatMap(json => json.colorways);
const customColorways = await DataStore.get("customColorways");
const actveColorwayID = await DataStore.get("actveColorwayID");
const customColorwaysArray: Colorway[] = [];
colorways.map((color: Colorway, i: number) => {
if (colorways.length > 0) {
if (color.name === colorwayProps.name) {
color.name += " (Custom)";
color["dc-import"] = generateCss(color.primary.split("#")[1] || "313338", color.secondary.split("#")[1] || "2b2d31", color.tertiary.split("#")[1] || "1e1f22", color.accent.split("#")[1] || "5865f2", true, true);
color["dc-import"] = generateCss(colorToHex(color.primary) || "313338", colorToHex(color.secondary) || "2b2d31", colorToHex(color.tertiary) || "1e1f22", colorToHex(color.accent) || "5865f2", true, true);
customColorwaysArray.push(color);
}
if (++i === colorways.length) {
DataStore.set("customColorways", [...customColorways, ...customColorwaysArray]);
}
if (actveColorwayID === colorwayProps.name) {
DataStore.set("actveColorway", color["dc-import"]);
DataStore.set("actveColorwayID", color.name);
ColorwayCSS.set(color["dc-import"]);
}
modalProps.onClose();
loadUIProps();
}

16
src/userplugins/DiscordColorways/components/SelectorModal.tsx
View file

@ -8,6 +8,7 @@
import * as DataStore from "@api/DataStore";
import { ModalContent, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
import { findByPropsLazy } from "@webpack";
import {
Button,
Forms,
@ -27,12 +28,14 @@ import { ColorwayCSS } from "..";
import { defaultColorwaySource, fallbackColorways } from "../constants";
import { generateCss } from "../css";
import { Colorway } from "../types";
import { getHex } from "../utils";
import { colorToHex } from "../utils";
import ColorPickerModal from "./ColorPicker";
import CreatorModal from "./CreatorModal";
import { CloseIcon } from "./Icons";
import ColorwayInfoModal from "./InfoModal";
const { SelectionCircle } = findByPropsLazy("SelectionCircle");
export default function ({
modalProps,
}: {
@ -362,7 +365,7 @@ export default function ({
return (
<Tooltip text={color.name}>
{({ onMouseEnter, onMouseLeave }) => <div
className={"discordColorway" + (currentColorway === color.name ? " active" : "")}
className={"discordColorway" + (currentColorway === color.name ? "" : "")}
id={"colorway-" + color.name}
data-last-official={ind + 1 === colorways.length}
onMouseEnter={onMouseEnter}
@ -426,10 +429,10 @@ export default function ({
DataStore.set("actveColorwayID", color.name);
if (onDemandWays) {
const demandedColorway = generateCss(
getHex(color.primary).split("#")[1],
getHex(color.secondary).split("#")[1],
getHex(color.tertiary).split("#")[1],
getHex(color.accent).split("#")[1],
colorToHex(color.primary),
colorToHex(color.secondary),
colorToHex(color.tertiary),
colorToHex(color.accent),
onDemandWaysTintedText,
onDemandWaysDiscordSaturation
);
@ -448,6 +451,7 @@ export default function ({
style={{ backgroundColor: color[colorItm] }}
/>)}
</div>
{currentColorway === color.name && <SelectionCircle />}
</div>}
</Tooltip>
);

30
src/userplugins/DiscordColorways/components/SettingsTabs/ManageColorwaysPage.tsx
View file

@ -125,5 +125,35 @@ export default function () {
</Button>
</Flex>
</Forms.FormSection>
<Forms.FormDivider className={Margins.top8 + " " + Margins.bottom8} />
<Forms.FormSection title="Developer Options:">
<Button
size={Button.Sizes.SMALL}
onClick={async () => {
const colorwaySourceFiles = await DataStore.get(
"colorwaySourceFiles"
);
const responses: Response[] = await Promise.all(
colorwaySourceFiles.map((url: string) =>
fetch(url)
)
);
const data = await Promise.all(
responses.map((res: Response) =>
res.json().then(dt => { return { colorways: dt.colorways, url: res.url }; }).catch(() => { return { colorways: [], url: res.url }; })
));
const colorwaysArr: Colorway[] = data.flatMap(json => json.url === defaultColorwaySource ? json.colorways : []);
colorwaysArr.forEach((color: Colorway) => {
if (IS_DISCORD_DESKTOP) {
DiscordNative.fileManager.saveWithDialog(generateCss(color.primary.split("#")[1] || "313338", color.secondary.split("#")[1] || "2b2d31", color.tertiary.split("#")[1] || "1e1f22", color.accent.split("#")[1] || "5865f2", true, true), `import_${color.name.replaceAll(" ", "-").replaceAll("'", "")}.css`);
} else {
saveFile(new File([generateCss(color.primary.split("#")[1] || "313338", color.secondary.split("#")[1] || "2b2d31", color.tertiary.split("#")[1] || "1e1f22", color.accent.split("#")[1] || "5865f2", true, true)], `import_${color.name.replaceAll(" ", "-").replaceAll("'", "")}.css`, { type: "text/plain;charset=utf-8" }));
}
});
}}>
Update all official Colorways and export
</Button>
</Forms.FormSection>
</SettingsTab>;
}

71
src/userplugins/DiscordColorways/components/SettingsTabs/SelectorPage.tsx
View file

@ -10,6 +10,7 @@ import * as DataStore from "@api/DataStore";
import { Flex } from "@components/Flex";
import { SettingsTab } from "@components/VencordSettings/shared";
import { openModal } from "@utils/modal";
import { findByPropsLazy } from "@webpack";
import {
Button,
Forms,
@ -25,11 +26,15 @@ import {
import { ColorwayCSS } from "../..";
import { defaultColorwaySource, fallbackColorways } from "../../constants";
import { generateCss } from "../../css";
import { Colorway } from "../../types";
import { colorToHex } from "../../utils";
import ColorPickerModal from "../ColorPicker";
import CreatorModal from "../CreatorModal";
import ColorwayInfoModal from "../InfoModal";
const { SelectionCircle } = findByPropsLazy("SelectionCircle");
export default function ({
visibleTabProps = "all",
}: {
@ -321,7 +326,7 @@ export default function ({
{({ onMouseEnter, onMouseLeave }) => {
return (
<div
className={"discordColorway" + (currentColorway === color.name ? " active" : "")}
className="discordColorway"
id={"colorway-" + color.name}
data-last-official={
ind + 1 === colorways.length
@ -378,43 +383,40 @@ export default function ({
</div>
<div
className="discordColorwayPreviewColorContainer"
onClick={() => {
if (
currentColorway ===
color.name
) {
DataStore.set(
"actveColorwayID",
null
);
DataStore.set(
"actveColorway",
null
);
onClick={async () => {
const [
onDemandWays,
onDemandWaysTintedText,
onDemandWaysDiscordSaturation
] = await DataStore.getMany([
"onDemandWays",
"onDemandWaysTintedText",
"onDemandWaysDiscordSaturation"
]);
if (currentColorway === color.name) {
DataStore.set("actveColorwayID", null);
DataStore.set("actveColorway", null);
ColorwayCSS.remove();
} else {
DataStore.set(
"actveColorwayID",
color.name
);
DataStore.set(
"actveColorway",
color["dc-import"]
);
ColorwayCSS.set(
color["dc-import"]
DataStore.set("activeColorwayColors", color.colors);
DataStore.set("actveColorwayID", color.name);
if (onDemandWays) {
const demandedColorway = generateCss(
colorToHex(color.primary),
colorToHex(color.secondary),
colorToHex(color.tertiary),
colorToHex(color.accent),
onDemandWaysTintedText,
onDemandWaysDiscordSaturation
);
DataStore.set("actveColorway", demandedColorway);
ColorwayCSS.set(demandedColorway);
} else {
DataStore.set("actveColorway", color["dc-import"]);
ColorwayCSS.set(color["dc-import"]);
}
DataStore.get(
"actveColorwayID"
).then(
(
actveColorwayID: string
) =>
setCurrentColorway(
actveColorwayID
)
);
}
setCurrentColorway(await DataStore.get("actveColorwayID") as string);
}}
>
{colors.map((colorItm) => {
@ -429,6 +431,7 @@ export default function ({
);
})}
</div>
{currentColorway === color.name && <SelectionCircle />}
</div>
);
}}

6
src/userplugins/DiscordColorways/css.ts
View file

@ -6,7 +6,7 @@
import { Plugins } from "Vencord";
import { HexToHSL } from "./utils";
import { colorToHex, HexToHSL } from "./utils";
export const colorVariables: string[] = [
"brand-100",
@ -405,6 +405,10 @@ function gradientBase(accentColor?: string, discordSaturation = false) {
}
export function generateCss(primaryColor: string, secondaryColor: string, tertiaryColor: string, accentColor: string, tintedText: boolean, discordSaturation: boolean) {
primaryColor = colorToHex(primaryColor);
secondaryColor = colorToHex(secondaryColor);
tertiaryColor = colorToHex(tertiaryColor);
accentColor = colorToHex(accentColor);
const colorwayCss = `/*Automatically Generated - Colorway Creator V${(Plugins.plugins.DiscordColorways as any).creatorVersion}*/
:root:root {
--brand-100-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${discordSaturation ? Math.round(((HexToHSL("#" + accentColor)[1] / 100) * (100 + BrandSatDiffs[100])) * 10) / 10 : HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[100]) * 10) / 10, 0)};

4
src/userplugins/DiscordColorways/index.tsx
View file

@ -95,8 +95,8 @@ export const ColorwayCSS = {
};
export const versionData = {
pluginVersion: "5.6.1",
creatorVersion: "1.18",
pluginVersion: "5.6.2",
creatorVersion: "1.18.1",
};
export default definePlugin({

8
src/userplugins/DiscordColorways/style.css
View file

@ -268,18 +268,10 @@
max-height: unset !important;
}
.colorwayCreator-colorPreviews:has(>.colorways-creator-module-warning) {
background-color: transparent;
}
.colorways-creator-module-warning {
color: var(--brand-500);
}
.colorways-creator-module-warning~.colorways-creator-module-warning {
display: none;
}
.colorwayCreator-colorPreviews>[class^="colorSwatch"],
.colorwayCreator-colorPreviews>[class^="colorSwatch"]>[class^="swatch"] {
width: 100%;

17
src/userplugins/DiscordColorways/utils.ts
View file

@ -131,3 +131,20 @@ export function rgbToHex(r: number, g: number, b: number) {
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
export function colorToHex(color: string) {
var colorType = "hex";
if (color.includes("hsl")) {
colorType = "hsl";
} else if (color.includes("rgb")) {
colorType = "rgb";
}
color = color.replaceAll(",", "").replace(/.+?\(/, "").replace(")", "").replaceAll(/[ \t]+\/[ \t]+/g, " ").replaceAll("%", "").replaceAll("/", "");
if (colorType === "hsl") {
color = hslToHex(Number(color.split(" ")[0]), Number(color.split(" ")[1]), Number(color.split(" ")[2]));
}
if (colorType === "rgb") {
color = rgbToHex(Number(color.split(" ")[0]), Number(color.split(" ")[1]), Number(color.split(" ")[2]));
}
return color.replace("#", "");
}