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 { knownThemeVars } from "../constants";
import { generateCss, getPreset } from "../css"; import { generateCss, getPreset } from "../css";
import { Colorway } from "../types"; import { Colorway } from "../types";
import { getHex, hexToString, hslToHex, rgbToHex } from "../utils"; import { colorToHex, getHex, hexToString } from "../utils";
import ConflictingColorsModal from "./ConflictingColorsModal"; import ConflictingColorsModal from "./ConflictingColorsModal";
import ThemePreviewCategory from "./ThemePreview"; import ThemePreviewCategory from "./ThemePreview";
export default function ({ export default function ({
@ -355,22 +355,7 @@ export default function ({
setSecondaryColor, setSecondaryColor,
setTertiaryColor setTertiaryColor
]; ];
hexToString(colorwayID).split(/,#/).forEach((color: string, i: number) => { hexToString(colorwayID).split(/,#/).forEach((color: string, i: number) => setColor[i](colorToHex(color)));
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("#", ""));
});
props.onClose(); 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 { ColorwayCSS } from "..";
import { generateCss } from "../css"; import { generateCss } from "../css";
import { Colorway } from "../types"; import { Colorway } from "../types";
import { colorToHex } from "../utils";
import ThemePreviewCategory from "./ThemePreview"; import ThemePreviewCategory from "./ThemePreview";
export default function ({ export default function ({
@ -187,12 +188,11 @@ export default function ({
look={Button.Looks.FILLED} look={Button.Looks.FILLED}
onClick={async () => { onClick={async () => {
const customColorways = await DataStore.get("customColorways"); const customColorways = await DataStore.get("customColorways");
const actveColorwayID = await DataStore.get("actveColorwayID");
const customColorwaysArray: Colorway[] = []; const customColorwaysArray: Colorway[] = [];
customColorways.map((color: Colorway, i: number) => { customColorways.map((color: Colorway, i: number) => {
if (customColorways.length > 0) { if (customColorways.length > 0) {
if (color.name === colorwayProps.name) { 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); customColorwaysArray.push(color);
} else { } else {
customColorwaysArray.push(color); customColorwaysArray.push(color);
@ -200,11 +200,6 @@ export default function ({
if (++i === customColorways.length) { if (++i === customColorways.length) {
DataStore.set("customColorways", customColorwaysArray); 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(); modalProps.onClose();
loadUIProps(); loadUIProps();
} }
@ -233,23 +228,17 @@ export default function ({
const colorways = data.flatMap(json => json.colorways); const colorways = data.flatMap(json => json.colorways);
const customColorways = await DataStore.get("customColorways"); const customColorways = await DataStore.get("customColorways");
const actveColorwayID = await DataStore.get("actveColorwayID");
const customColorwaysArray: Colorway[] = []; const customColorwaysArray: Colorway[] = [];
colorways.map((color: Colorway, i: number) => { colorways.map((color: Colorway, i: number) => {
if (colorways.length > 0) { if (colorways.length > 0) {
if (color.name === colorwayProps.name) { if (color.name === colorwayProps.name) {
color.name += " (Custom)"; 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); customColorwaysArray.push(color);
} }
if (++i === colorways.length) { if (++i === colorways.length) {
DataStore.set("customColorways", [...customColorways, ...customColorwaysArray]); 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(); modalProps.onClose();
loadUIProps(); loadUIProps();
} }

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

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

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

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

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

@ -6,7 +6,7 @@
import { Plugins } from "Vencord"; import { Plugins } from "Vencord";
import { HexToHSL } from "./utils"; import { colorToHex, HexToHSL } from "./utils";
export const colorVariables: string[] = [ export const colorVariables: string[] = [
"brand-100", "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) { 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}*/ const colorwayCss = `/*Automatically Generated - Colorway Creator V${(Plugins.plugins.DiscordColorways as any).creatorVersion}*/
:root:root { :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)}; --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 = { export const versionData = {
pluginVersion: "5.6.1", pluginVersion: "5.6.2",
creatorVersion: "1.18", creatorVersion: "1.18.1",
}; };
export default definePlugin({ export default definePlugin({

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

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