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

updated submodules

Browse source
This commit is contained in:
Seaswimmer 2024-06-30 14:08:22 -04:00
parent 5061de8d0b
commit 605f0fd9f3
Signed by: cswimr
GPG key ID: 3813315477F26F82
11 changed files with 524 additions and 432 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/userplugins/DontLeak

@ -1 +1 @@
Subproject commit 2197a18924c6de334aa52da4a69f544436ce8029 Subproject commit 294e9313b43425221534254069164d6d04cfb93a

65
src/userplugins/discordColorways/components/ColorwayCreatorSettingsModal.tsx Normal file
View file

@ -0,0 +1,65 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2024 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
import { Button, Forms, ScrollerThin, Switch, Text, useState } from "@webpack/common";
import { getPreset } from "../css";
export default function ({ modalProps, onSettings, presetId, hasTintedText, hasDiscordSaturation }: { modalProps: ModalProps, presetId: string, hasTintedText: boolean, hasDiscordSaturation: boolean, onSettings: ({ presetId, tintedText, discordSaturation }: { presetId: string, tintedText: boolean, discordSaturation: boolean; }) => void; }) {
const [tintedText, setTintedText] = useState<boolean>(hasTintedText);
const [discordSaturation, setDiscordSaturation] = useState<boolean>(hasDiscordSaturation);
const [preset, setPreset] = useState<string>(presetId);
return <ModalRoot {...modalProps} className="colorwaysPresetPicker">
<ModalHeader><Text variant="heading-lg/semibold" tag="h1">Creator Settings</Text></ModalHeader>
<ModalContent className="colorwaysPresetPicker-content">
<div className="colorwaysCreator-settingCat" style={{ marginBottom: "20px" }}>
<Forms.FormTitle style={{ marginBottom: "0" }}>
Presets:
</Forms.FormTitle>
<ScrollerThin orientation="vertical" className="colorwaysCreator-settingsList" paddingFix style={{ paddingRight: "2px" }}>
{Object.values(getPreset()).map(pre => {
return <div className="colorwaysCreator-settingItm colorwaysCreator-preset" onClick={() => {
setPreset(pre.id);
}}>
<svg aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor" />
{preset === pre.id && <circle cx="12" cy="12" r="5" className="radioIconForeground-3wH3aU" fill="currentColor" />}
</svg>
<Text variant="eyebrow" tag="h5">{pre.name}</Text>
</div>;
})}
</ScrollerThin>
</div>
<Switch value={tintedText} onChange={setTintedText}>Use colored text</Switch>
<Switch value={discordSaturation} onChange={setDiscordSaturation} hideBorder style={{ marginBottom: "0" }}>Use Discord's saturation</Switch>
</ModalContent>
<ModalFooter>
<Button
style={{ marginLeft: 8 }}
color={Button.Colors.BRAND_NEW}
size={Button.Sizes.MEDIUM}
onClick={() => {
onSettings({ presetId: preset, discordSaturation: discordSaturation, tintedText: tintedText });
modalProps.onClose();
}}
>
Finish
</Button>
<Button
style={{ marginLeft: 8 }}
color={Button.Colors.PRIMARY}
size={Button.Sizes.MEDIUM}
look={Button.Looks.OUTLINED}
onClick={() => {
modalProps.onClose();
}}
>
Cancel
</Button>
</ModalFooter>
</ModalRoot>;
}

98
src/userplugins/discordColorways/components/CreatorModal.tsx
View file

@ -16,8 +16,6 @@ import {
import { import {
Button, Button,
Forms, Forms,
ScrollerThin,
Switch,
Text, Text,
TextInput, TextInput,
useEffect, useEffect,
@ -27,9 +25,10 @@ import {
import { ColorPicker } from ".."; import { ColorPicker } from "..";
import { knownThemeVars } from "../constants"; import { knownThemeVars } from "../constants";
import { generateCss, getPreset } from "../css"; import { generateCss, getPreset, gradientPresetIds, pureGradientBase } from "../css";
import { Colorway } from "../types"; import { Colorway } from "../types";
import { colorToHex, getHex, hexToString } from "../utils"; import { colorToHex, getHex, hexToString } from "../utils";
import ColorwayCreatorSettingsModal from "./ColorwayCreatorSettingsModal";
import ConflictingColorsModal from "./ConflictingColorsModal"; import ConflictingColorsModal from "./ConflictingColorsModal";
import InputColorwayIdModal from "./InputColorwayIdModal"; import InputColorwayIdModal from "./InputColorwayIdModal";
import ThemePreviewCategory from "./ThemePreview"; import ThemePreviewCategory from "./ThemePreview";
@ -122,7 +121,7 @@ export default function ({
onChange={setColorwayName} onChange={setColorwayName}
/> />
<div className="colorwaysCreator-settingCat"> <div className="colorwaysCreator-settingCat">
<Forms.FormTitle style={{ marginBottom: 0 }}> <Forms.FormTitle style={{ marginBottom: "0" }}>
Colors: Colors:
</Forms.FormTitle> </Forms.FormTitle>
<div className="colorwayCreator-colorPreviews"> <div className="colorwayCreator-colorPreviews">
@ -142,61 +141,38 @@ export default function ({
})} })}
</div> </div>
</div> </div>
<div className={`colorwaysCreator-settingCat${collapsedSettings ? " colorwaysCreator-settingCat-collapsed" : ""}`}> <div
<div className="colorwaysCreator-setting"
className="colorwaysCreator-settingItm colorwaysCreator-settingHeader" onClick={() => openModal((props: ModalProps) => <ColorwayCreatorSettingsModal
onClick={() => setCollapsedSettings(!collapsedSettings)}> modalProps={props}
<Forms.FormTitle style={{ marginBottom: 0 }}>Settings</Forms.FormTitle> hasDiscordSaturation={discordSaturation}
<svg className="expand-3Nh1P5 transition-30IQBn directionDown-2w0MZz" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" role="img"> hasTintedText={tintedText}
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true" /> presetId={preset}
</svg> onSettings={({ presetId, tintedText, discordSaturation }) => {
</div> setPreset(presetId);
<ScrollerThin orientation="vertical" className="colorwaysCreator-settingsList" paddingFix> setPresetColorArray(getPreset()[presetId].colors);
<div className="colorwaysCreator-settingItm" onClick={() => setTintedText(!tintedText)}> setDiscordSaturation(discordSaturation);
<Text variant="eyebrow" tag="h5">Use colored text</Text> setTintedText(tintedText);
<Switch value={tintedText} onChange={setTintedText} hideBorder={true} style={{ marginBottom: 0 }} /> }} />)}>
</div> <Forms.FormTitle style={{ marginBottom: 0 }}>Settings & Presets</Forms.FormTitle>
<div className="colorwaysCreator-settingItm" onClick={() => setDiscordSaturation(!discordSaturation)}> <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" role="img" style={{ rotate: "-90deg" }}>
<Text variant="eyebrow" tag="h5">Use Discord's saturation</Text> <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true" />
<Switch value={discordSaturation} onChange={setDiscordSaturation} hideBorder={true} style={{ marginBottom: 0 }} /> </svg>
</div>
</ScrollerThin>
</div> </div>
<div className={`colorwaysCreator-settingCat${collapsedPresets ? " colorwaysCreator-settingCat-collapsed" : ""}`}> <ThemePreviewCategory
<div isCollapsed={false}
className="colorwaysCreator-settingItm colorwaysCreator-settingHeader" accent={"#" + accentColor}
onClick={() => setCollapsedPresets(!collapsedPresets)}> primary={"#" + primaryColor}
<Forms.FormTitle style={{ marginBottom: 0 }}>Presets</Forms.FormTitle> secondary={"#" + secondaryColor}
<svg className="expand-3Nh1P5 transition-30IQBn directionDown-2w0MZz" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" role="img"> tertiary={"#" + tertiaryColor}
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true" /> noContainer
</svg> previewCSS={gradientPresetIds.includes(getPreset()[preset].id) ? pureGradientBase + `.colorwaysPreview-modal,.colorwaysPreview-wrapper {--gradient-theme-bg: linear-gradient(${(getPreset(
</div> primaryColor,
<ScrollerThin orientation="vertical" className="colorwaysCreator-settingsList"> secondaryColor,
<div className="colorwaysCreator-settingItm colorwaysCreator-preset" onClick={() => { tertiaryColor,
setPreset("default"); accentColor
setPresetColorArray(["primary", "secondary", "tertiary", "accent"]); )[preset].preset(discordSaturation) as { full: string, base: string; }).base})}` : ""}
}}> />
<svg aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor" />
{preset === "default" && <circle cx="12" cy="12" r="5" className="radioIconForeground-3wH3aU" fill="currentColor" />}
</svg>
<Text variant="eyebrow" tag="h5">Default</Text>
</div>
{Object.values(getPreset()).map(pre => {
return <div className="colorwaysCreator-settingItm colorwaysCreator-preset" onClick={() => {
setPreset(pre.id);
setPresetColorArray(pre.colors);
}}>
<svg aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor" />
{preset === pre.id && <circle cx="12" cy="12" r="5" className="radioIconForeground-3wH3aU" fill="currentColor" />}
</svg>
<Text variant="eyebrow" tag="h5">{pre.name}</Text>
</div>;
})}
</ScrollerThin>
</div>
<ThemePreviewCategory isCollapsed={false} accent={"#" + accentColor} primary={"#" + primaryColor} secondary={"#" + secondaryColor} tertiary={"#" + tertiaryColor} />
</ModalContent> </ModalContent>
<ModalFooter> <ModalFooter>
<Button <Button
@ -216,7 +192,7 @@ export default function ({
discordSaturation discordSaturation
); );
} else { } else {
(getPreset()[preset].id === "gradientType1" || getPreset()[preset].id === "gradientType2") ? gradientPresetIds.includes(getPreset()[preset].id) ?
customColorwayCSS = getPreset( customColorwayCSS = getPreset(
primaryColor, primaryColor,
secondaryColor, secondaryColor,
@ -239,8 +215,8 @@ export default function ({
colors: presetColorArray, colors: presetColorArray,
author: UserStore.getCurrentUser().username, author: UserStore.getCurrentUser().username,
authorID: UserStore.getCurrentUser().id, authorID: UserStore.getCurrentUser().id,
isGradient: getPreset()[preset].id === "gradientType1" || getPreset()[preset].id === "gradientType2", isGradient: gradientPresetIds.includes(getPreset()[preset].id),
linearGradient: (getPreset()[preset].id === "gradientType1" || getPreset()[preset].id === "gradientType2") ? getPreset( linearGradient: gradientPresetIds.includes(getPreset()[preset].id) ? getPreset(
primaryColor, primaryColor,
secondaryColor, secondaryColor,
tertiaryColor, tertiaryColor,

415
src/userplugins/discordColorways/components/InfoModal.tsx
View file

@ -5,20 +5,21 @@
*/ */
import * as DataStore from "@api/DataStore"; import * as DataStore from "@api/DataStore";
import { Flex } from "@components/Flex";
import { openUserProfile } from "@utils/discord"; import { openUserProfile } from "@utils/discord";
import { import {
ModalCloseButton,
ModalContent, ModalContent,
ModalFooter,
ModalHeader, ModalHeader,
ModalProps, ModalProps,
ModalRoot, ModalRoot,
} from "@utils/modal"; } from "@utils/modal";
import { Button, Clipboard, Forms, Text, Toasts } from "@webpack/common"; import { Button, Clipboard, Forms, Text, Toasts, useState } from "@webpack/common";
import { ColorwayCSS } from ".."; import { ColorwayCSS } from "..";
import { generateCss } from "../css"; import { generateCss, pureGradientBase } from "../css";
import { Colorway } from "../types"; import { Colorway } from "../types";
import { colorToHex } from "../utils"; import { colorToHex, stringToHex } from "../utils";
import ThemePreviewCategory from "./ThemePreview"; import ThemePreviewCategory from "./ThemePreview";
export default function ({ export default function ({
@ -38,227 +39,209 @@ export default function ({
"secondary", "secondary",
"tertiary", "tertiary",
]; ];
return ( const [collapsedCSS, setCollapsedCSS] = useState(true);
<ModalRoot {...modalProps} className="colorwayCreator-modal"> return <ModalRoot {...modalProps} className="colorwayCreator-modal">
<ModalHeader> <ModalHeader>
<Text variant="heading-lg/semibold" tag="h1"> <Text variant="heading-lg/semibold" tag="h1" style={{ marginRight: "auto" }}>
Colorway Details: {colorwayProps.name} Colorway Details: {colorwayProps.name}
</Text> </Text>
</ModalHeader> <ModalCloseButton onClick={() => modalProps.onClose()} />
<ModalContent> </ModalHeader>
<div className="colorwayInfo-wrapper"> <ModalContent>
<div className="colorwayInfo-colorSwatches"> <div className="colorwayInfo-wrapper">
{colors.map(color => { <div className="colorwayInfo-colorSwatches">
return ( {colors.map(color => <div
<div className="colorwayInfo-colorSwatch"
className="colorwayInfo-colorSwatch" style={{ backgroundColor: colorwayProps[color] }}
style={{ onClick={() => {
backgroundColor: colorwayProps[color], Clipboard.copy(colorwayProps[color]);
}} Toasts.show({
onClick={() => { message: "Copied color successfully",
Clipboard.copy(colorwayProps[color]); type: 1,
Toasts.show({ id: "copy-colorway-color-notify",
message: });
"Copied color successfully", }}
type: 1, />)}
id: "copy-colorway-color-notify", </div>
}); <div className="colorwayInfo-row colorwayInfo-author">
}} <Flex style={{ gap: "10px", width: "100%", alignItems: "center" }}>
></div> <Forms.FormTitle style={{ marginBottom: 0, width: "100%" }}>Properties:</Forms.FormTitle>
);
})}
</div>
<div className="colorwayInfo-row colorwayInfo-author">
<Forms.FormTitle style={{ marginBottom: 0 }}>
Author:
</Forms.FormTitle>
<Button <Button
color={Button.Colors.PRIMARY} color={Button.Colors.PRIMARY}
size={Button.Sizes.MEDIUM} size={Button.Sizes.MEDIUM}
look={Button.Looks.FILLED} look={Button.Looks.OUTLINED}
style={{ flex: "0 0 auto", maxWidth: "236px" }}
onClick={() => { onClick={() => {
openUserProfile(colorwayProps.authorID); openUserProfile(colorwayProps.authorID);
}} }}
> >
{colorwayProps.author} Author: {colorwayProps.author}
</Button> </Button>
</div> <Button
<div className="colorwayInfo-row colorwayInfo-css"> color={Button.Colors.PRIMARY}
<Forms.FormTitle style={{ marginBottom: 0 }}> size={Button.Sizes.MEDIUM}
CSS: look={Button.Looks.OUTLINED}
</Forms.FormTitle> style={{ flex: "0 0 auto" }}
<Text onClick={() => {
variant="code" const colorwayIDArray = `${colorwayProps.accent},${colorwayProps.primary},${colorwayProps.secondary},${colorwayProps.tertiary}`;
selectable={true} const colorwayID = stringToHex(colorwayIDArray);
className="colorwayInfo-cssCodeblock" Clipboard.copy(colorwayID);
Toasts.show({
message: "Copied Colorway ID Successfully",
type: 1,
id: "copy-colorway-id-notify",
});
}}
> >
{colorwayProps["dc-import"]} Copy Colorway ID
</Text> </Button>
</div> {discrimProps && <Button
<ThemePreviewCategory color={Button.Colors.RED}
isCollapsed={true} size={Button.Sizes.MEDIUM}
className="colorwayInfo-lastCat" look={Button.Looks.FILLED}
accent={colorwayProps.accent} style={{ flex: "0 0 auto" }}
primary={colorwayProps.primary} onClick={async () => {
secondary={colorwayProps.secondary} const customColorways = await DataStore.get("customColorways");
tertiary={colorwayProps.tertiary} const actveColorwayID = await DataStore.get("actveColorwayID");
></ThemePreviewCategory> const customColorwaysArray: Colorway[] = [];
customColorways.map((color: Colorway, i: number) => {
if (customColorways.length > 0) {
if (color.name !== colorwayProps.name) {
customColorwaysArray.push(color);
}
if (++i === customColorways.length) {
DataStore.set("customColorways", customColorwaysArray);
}
if (actveColorwayID === colorwayProps.name) {
DataStore.set("actveColorway", null);
DataStore.set("actveColorwayID", null);
ColorwayCSS.set("");
}
modalProps.onClose();
loadUIProps();
}
});
}}
>
Delete
</Button>}
</Flex>
</div> </div>
</ModalContent> <div className={"colorwayInfo-row colorwayInfo-css" + (collapsedCSS ? " colorwaysCreator-settingCat-collapsed" : "")}>
<ModalFooter> <Flex style={{ gap: "10px", width: "100%", alignItems: "center" }}>
{discrimProps && <Button <Forms.FormTitle style={{ marginBottom: 0, width: "100%" }}>CSS:</Forms.FormTitle>
style={{ marginLeft: 8 }} <Button
color={Button.Colors.RED} color={Button.Colors.PRIMARY}
size={Button.Sizes.MEDIUM} size={Button.Sizes.MEDIUM}
look={Button.Looks.FILLED} look={Button.Looks.OUTLINED}
onClick={async () => { style={{ flex: "0 0 auto" }}
const customColorways = await DataStore.get("customColorways"); onClick={() => setCollapsedCSS(!collapsedCSS)}
const actveColorwayID = await DataStore.get("actveColorwayID"); >
const customColorwaysArray: Colorway[] = []; {collapsedCSS ? "Show" : "Hide"}
customColorways.map((color: Colorway, i: number) => { </Button>
if (customColorways.length > 0) { <Button
if (color.name !== colorwayProps.name) { color={Button.Colors.PRIMARY}
customColorwaysArray.push(color); size={Button.Sizes.MEDIUM}
} look={Button.Looks.OUTLINED}
if (++i === customColorways.length) { style={{ flex: "0 0 auto" }}
DataStore.set("customColorways", customColorwaysArray); onClick={() => {
} Clipboard.copy(colorwayProps["dc-import"]);
if (actveColorwayID === colorwayProps.name) { Toasts.show({
DataStore.set("actveColorway", null); message: "Copied CSS to Clipboard",
DataStore.set("actveColorwayID", null); type: 1,
ColorwayCSS.set(""); id: "copy-colorway-css-notify",
} });
modalProps.onClose(); }}
loadUIProps(); >
} Copy
}); </Button>
}} {discrimProps ? <Button
> color={Button.Colors.PRIMARY}
Delete... size={Button.Sizes.MEDIUM}
</Button>} look={Button.Looks.OUTLINED}
<Button style={{ flex: "0 0 auto" }}
style={{ marginLeft: 8 }} onClick={async () => {
color={Button.Colors.PRIMARY} const customColorways = await DataStore.get("customColorways");
size={Button.Sizes.MEDIUM} const customColorwaysArray: Colorway[] = [];
look={Button.Looks.OUTLINED} customColorways.map((color: Colorway, i: number) => {
onClick={() => { if (customColorways.length > 0) {
const stringToHex = (str: string) => { if (color.name === colorwayProps.name) {
let hex = ""; color["dc-import"] = generateCss(colorToHex(color.primary) || "313338", colorToHex(color.secondary) || "2b2d31", colorToHex(color.tertiary) || "1e1f22", colorToHex(color.accent) || "5865f2", true, true);
for (let i = 0; i < str.length; i++) { customColorwaysArray.push(color);
const charCode = str.charCodeAt(i); } else {
const hexValue = charCode.toString(16); customColorwaysArray.push(color);
}
if (++i === customColorways.length) {
DataStore.set("customColorways", customColorwaysArray);
}
modalProps.onClose();
loadUIProps();
}
});
}}
>
Update
</Button> : <Button
color={Button.Colors.PRIMARY}
size={Button.Sizes.MEDIUM}
look={Button.Looks.OUTLINED}
style={{ flex: "0 0 auto" }}
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 colorways = data.flatMap(json => json.colorways);
// Pad with zeros to ensure two-digit representation const customColorways = await DataStore.get("customColorways");
hex += hexValue.padStart(2, "0"); const customColorwaysArray: Colorway[] = [];
} colorways.map((color: Colorway, i: number) => {
return hex; if (colorways.length > 0) {
}; if (color.name === colorwayProps.name) {
const colorwayIDArray = `${colorwayProps.accent},${colorwayProps.primary},${colorwayProps.secondary},${colorwayProps.tertiary}`; color.name += " (Custom)";
const colorwayID = stringToHex(colorwayIDArray); color["dc-import"] = generateCss(colorToHex(color.primary) || "313338", colorToHex(color.secondary) || "2b2d31", colorToHex(color.tertiary) || "1e1f22", colorToHex(color.accent) || "5865f2", true, true);
Clipboard.copy(colorwayID); customColorwaysArray.push(color);
Toasts.show({ }
message: "Copied Colorway ID Successfully", if (++i === colorways.length) {
type: 1, DataStore.set("customColorways", [...customColorways, ...customColorwaysArray]);
id: "copy-colorway-id-notify", }
}); modalProps.onClose();
}} loadUIProps();
> }
Copy Colorway ID });
</Button> }}
<Button >
style={{ marginLeft: 8 }} Update
color={Button.Colors.PRIMARY} </Button>}
size={Button.Sizes.MEDIUM} </Flex>
look={Button.Looks.OUTLINED} <Text
onClick={() => { variant="code"
Clipboard.copy(colorwayProps["dc-import"]); selectable={true}
Toasts.show({ className="colorwayInfo-cssCodeblock"
message: "Copied CSS to Clipboard", >
type: 1, {colorwayProps["dc-import"]}
id: "copy-colorway-css-notify", </Text>
}); </div>
}} <ThemePreviewCategory
> isCollapsed={true}
Copy CSS className="colorwayInfo-lastCat"
</Button> accent={colorwayProps.accent}
{discrimProps ? <Button primary={colorwayProps.primary}
style={{ marginLeft: 8 }} secondary={colorwayProps.secondary}
color={Button.Colors.PRIMARY} tertiary={colorwayProps.tertiary}
size={Button.Sizes.MEDIUM} noContainer
look={Button.Looks.OUTLINED} previewCSS={colorwayProps.isGradient ? pureGradientBase + `.colorwaysPreview-modal,.colorwaysPreview-wrapper {--gradient-theme-bg: linear-gradient(${colorwayProps.linearGradient})}` : ""}
onClick={async () => { />
const customColorways = await DataStore.get("customColorways"); </div>
const customColorwaysArray: Colorway[] = []; <div style={{ width: "100%", height: "20px" }} />
customColorways.map((color: Colorway, i: number) => { </ModalContent>
if (customColorways.length > 0) { </ModalRoot>;
if (color.name === colorwayProps.name) {
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);
}
if (++i === customColorways.length) {
DataStore.set("customColorways", customColorwaysArray);
}
modalProps.onClose();
loadUIProps();
}
});
}}
>
Update CSS
</Button> : <Button
style={{ marginLeft: 8 }}
color={Button.Colors.PRIMARY}
size={Button.Sizes.MEDIUM}
look={Button.Looks.OUTLINED}
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 colorways = data.flatMap(json => json.colorways);
const customColorways = await DataStore.get("customColorways");
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(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]);
}
modalProps.onClose();
loadUIProps();
}
});
}}
>
Update CSS (Local)
</Button>}
<Button
style={{ marginLeft: 8 }}
color={Button.Colors.PRIMARY}
size={Button.Sizes.MEDIUM}
look={Button.Looks.OUTLINED}
onClick={() => {
modalProps.onClose();
}}
>
Cancel
</Button>
</ModalFooter>
</ModalRoot>
);
} }

15
src/userplugins/discordColorways/components/SettingsTabs/SettingsPage.tsx
View file

@ -9,7 +9,7 @@ import { Flex } from "@components/Flex";
import { CopyIcon } from "@components/Icons"; import { CopyIcon } from "@components/Icons";
import { Link } from "@components/Link"; import { Link } from "@components/Link";
import { SettingsTab } from "@components/VencordSettings/shared"; import { SettingsTab } from "@components/VencordSettings/shared";
import { ModalContent, ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal"; import { ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal";
import { import {
Button, Button,
Clipboard, Clipboard,
@ -87,18 +87,17 @@ export default function () {
onClick={() => { onClick={() => {
openModal(props => { openModal(props => {
var colorwaySource = ""; var colorwaySource = "";
return <ModalRoot {...props}> return <ModalRoot {...props} className="colorwaySourceModal">
<ModalHeader> <ModalHeader>
<Text variant="heading-lg/semibold" tag="h1"> <Text variant="heading-lg/semibold" tag="h1">
Add a source: Add a source:
</Text> </Text>
</ModalHeader> </ModalHeader>
<ModalContent> <TextInput
<TextInput placeholder="Enter a valid URL..."
placeholder="Enter a valid URL..." onChange={e => colorwaySource = e}
onChange={e => colorwaySource = e} style={{ margin: "8px", width: "calc(100% - 16px)" }}
/> />
</ModalContent>
<ModalFooter> <ModalFooter>
<Button <Button
style={{ marginLeft: 8 }} style={{ marginLeft: 8 }}

78
src/userplugins/discordColorways/components/ThemePreview.tsx
View file

@ -7,8 +7,7 @@
import { ModalProps, ModalRoot, openModal } from "@utils/modal"; import { ModalProps, ModalRoot, openModal } from "@utils/modal";
import { import {
Forms, Forms,
Text, Text
useState
} from "@webpack/common"; } from "@webpack/common";
import { HexToHSL } from "../utils"; import { HexToHSL } from "../utils";
@ -21,7 +20,8 @@ export default function ({
tertiary, tertiary,
className, className,
isCollapsed, isCollapsed,
previewCSS previewCSS,
noContainer
}: { }: {
accent: string, accent: string,
primary: string, primary: string,
@ -29,9 +29,9 @@ export default function ({
tertiary: string, tertiary: string,
className?: string, className?: string,
isCollapsed: boolean, isCollapsed: boolean,
previewCSS?: string; previewCSS?: string,
noContainer?: boolean;
}) { }) {
const [collapsed, setCollapsed] = useState<boolean>(isCollapsed);
function ThemePreview({ function ThemePreview({
accent, accent,
primary, primary,
@ -50,7 +50,7 @@ export default function ({
return ( return (
<div <div
className="colorwaysPreview-wrapper" className="colorwaysPreview-wrapper"
style={{ background: `var(--bg-overlay-app-frame, ${tertiary})` }} style={{ background: `var(--dc-overlay-app-frame, ${tertiary})` }}
> >
<div className="colorwaysPreview-titlebar" /> <div className="colorwaysPreview-titlebar" />
<div className="colorwaysPreview-body"> <div className="colorwaysPreview-body">
@ -58,9 +58,9 @@ export default function ({
<div className="colorwayPreview-guild"> <div className="colorwayPreview-guild">
<div <div
className="colorwayPreview-guildItem" className="colorwayPreview-guildItem"
style={{ background: `var(--bg-guild-button, ${primary})` }} style={{ background: `var(--dc-guild-button, ${primary})` }}
onMouseEnter={e => e.currentTarget.style.background = accent} onMouseEnter={e => e.currentTarget.style.background = accent}
onMouseLeave={e => e.currentTarget.style.background = `var(--bg-guild-button, ${primary})`} onMouseLeave={e => e.currentTarget.style.background = `var(--dc-guild-button, ${primary})`}
onClick={() => { onClick={() => {
if (isModal) { if (isModal) {
modalProps?.onClose(); modalProps?.onClose();
@ -106,25 +106,25 @@ export default function ({
<div className="colorwayPreview-guild"> <div className="colorwayPreview-guild">
<div <div
className="colorwayPreview-guildItem" className="colorwayPreview-guildItem"
style={{ background: `var(--bg-guild-button, ${primary})` }} style={{ background: `var(--dc-guild-button, ${primary})` }}
onMouseEnter={e => e.currentTarget.style.background = accent} onMouseEnter={e => e.currentTarget.style.background = accent}
onMouseLeave={e => e.currentTarget.style.background = `var(--bg-guild-button, ${primary})`} onMouseLeave={e => e.currentTarget.style.background = `var(--dc-guild-button, ${primary})`}
/> />
</div> </div>
<div className="colorwayPreview-guild"> <div className="colorwayPreview-guild">
<div <div
className="colorwayPreview-guildItem" className="colorwayPreview-guildItem"
style={{ background: `var(--bg-guild-button, ${primary})` }} style={{ background: `var(--dc-guild-button, ${primary})` }}
onMouseEnter={e => e.currentTarget.style.background = accent} onMouseEnter={e => e.currentTarget.style.background = accent}
onMouseLeave={e => e.currentTarget.style.background = `var(--bg-guild-button, ${primary})`} onMouseLeave={e => e.currentTarget.style.background = `var(--dc-guild-button, ${primary})`}
/> />
</div> </div>
</div> </div>
<div className="colorwayPreview-channels" style={{ background: `var(--bg-overlay-3, ${secondary})` }}> <div className="colorwayPreview-channels" style={{ background: `var(--dc-overlay-3, ${secondary})` }}>
<div <div
className="colorwayPreview-userArea" className="colorwayPreview-userArea"
style={{ style={{
background: `var(--bg-secondary-alt, hsl(${HexToHSL(secondary)[0]} ${HexToHSL(secondary)[1]}% ${Math.max(HexToHSL(secondary)[2] - 3.6, 0)}%))` background: `var(--dc-secondary-alt, hsl(${HexToHSL(secondary)[0]} ${HexToHSL(secondary)[1]}% ${Math.max(HexToHSL(secondary)[2] - 3.6, 0)}%))`
}} }}
/> />
<div className="colorwayPreview-filler" /> <div className="colorwayPreview-filler" />
@ -145,11 +145,11 @@ export default function ({
</Text> </Text>
</div> </div>
</div> </div>
<div className="colorwayPreview-chat" style={{ background: `var(--bg-overlay-chat, ${primary})` }}> <div className="colorwayPreview-chat" style={{ background: `var(--dc-overlay-chat, ${primary})` }}>
<div <div
className="colorwayPreview-chatBox" className="colorwayPreview-chatBox"
style={{ style={{
background: `var(--bg-overlay-3, hsl(${HexToHSL(primary)[0]} ${HexToHSL(primary)[1]}% ${Math.min(HexToHSL(primary)[2] + 3.6, 100)}%))` background: `var(--dc-overlay-3, hsl(${HexToHSL(primary)[0]} ${HexToHSL(primary)[1]}% ${Math.min(HexToHSL(primary)[2] + 3.6, 100)}%))`
}} }}
/> />
<div className="colorwayPreview-filler" /> <div className="colorwayPreview-filler" />
@ -162,35 +162,12 @@ export default function ({
); );
} }
return ( return (
<div className={`${collapsed ? "colorwaysPreview colorwaysPreview-collapsed" : "colorwaysPreview"} ${className || ""}`}> !noContainer ? <div className="colorwaysPreview">
<div <Forms.FormTitle
className="colorwaysCreator-settingItm colorwaysCreator-settingHeader" style={{ marginBottom: 0 }}
onClick={() => setCollapsed(!collapsed)}
> >
<Forms.FormTitle Preview
style={{ marginBottom: 0 }} </Forms.FormTitle>
>
Preview
</Forms.FormTitle>
<svg
className="expand-3Nh1P5 transition-30IQBn directionDown-2w0MZz"
width="24"
height="24"
viewBox="0 0 24 24"
aria-hidden="true"
role="img"
>
<path
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M7 10L12 15 17 10"
aria-hidden="true"
/>
</svg>
</div>
<style> <style>
{previewCSS} {previewCSS}
</style> </style>
@ -200,6 +177,17 @@ export default function ({
secondary={secondary} secondary={secondary}
tertiary={tertiary} tertiary={tertiary}
/> />
</div> </div> : <>
<style>
{".colorwaysPreview-wrapper {color: var(--header-secondary); box-shadow: var(--legacy-elevation-border);}" + previewCSS}
</style>
<ThemePreview
accent={accent}
primary={primary}
secondary={secondary}
tertiary={tertiary}
/>
</>
); );
} }

151
src/userplugins/discordColorways/css.ts
View file

@ -291,67 +291,67 @@ const BrandLightDiffs = {
}; };
export const pureGradientBase = ` export const pureGradientBase = `
.theme-dark :is(.colorwaysPreview-modal, .colorwaysPreview) { .theme-dark :is(.colorwaysPreview-modal, .colorwaysPreview-wrapper) {
--bg-overlay-color: 0 0 0; --dc-overlay-color: 0 0 0;
--bg-overlay-color-inverse: 255 255 255; --dc-overlay-color-inverse: 255 255 255;
--bg-overlay-opacity-1: 0.85; --dc-overlay-opacity-1: 0.85;
--bg-overlay-opacity-2: 0.8; --dc-overlay-opacity-2: 0.8;
--bg-overlay-opacity-3: 0.7; --dc-overlay-opacity-3: 0.7;
--bg-overlay-opacity-4: 0.5; --dc-overlay-opacity-4: 0.5;
--bg-overlay-opacity-5: 0.4; --dc-overlay-opacity-5: 0.4;
--bg-overlay-opacity-6: 0.1; --dc-overlay-opacity-6: 0.1;
--bg-overlay-opacity-hover: 0.5; --dc-overlay-opacity-hover: 0.5;
--bg-overlay-opacity-hover-inverse: 0.08; --dc-overlay-opacity-hover-inverse: 0.08;
--bg-overlay-opacity-active: 0.45; --dc-overlay-opacity-active: 0.45;
--bg-overlay-opacity-active-inverse: 0.1; --dc-overlay-opacity-active-inverse: 0.1;
--bg-overlay-opacity-selected: 0.4; --dc-overlay-opacity-selected: 0.4;
--bg-overlay-opacity-selected-inverse: 0.15; --dc-overlay-opacity-selected-inverse: 0.15;
--bg-overlay-opacity-chat: 0.8; --dc-overlay-opacity-chat: 0.8;
--bg-overlay-opacity-home: 0.85; --dc-overlay-opacity-home: 0.85;
--bg-overlay-opacity-home-card: 0.8; --dc-overlay-opacity-home-card: 0.8;
--bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-4); --dc-overlay-opacity-app-frame: var(--dc-overlay-opacity-4);
--bg-guild-button: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); --dc-guild-button: rgb(var(--dc-overlay-color-inverse)/var(--dc-overlay-opacity-6));
--bg-secondary-alt: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-secondary-alt: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-3)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-3))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-chat-header: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-chat-header: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-2)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-2))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
} }
.theme-light :is(.colorwaysPreview-modal, .colorwaysPreview) { .theme-light :is(.colorwaysPreview-modal, .colorwaysPreview-wrapper) {
--bg-overlay-color: 255 255 255; --dc-overlay-color: 255 255 255;
--bg-overlay-color-inverse: 0 0 0; --dc-overlay-color-inverse: 0 0 0;
--bg-overlay-opacity-1: 0.9; --dc-overlay-opacity-1: 0.9;
--bg-overlay-opacity-2: 0.8; --dc-overlay-opacity-2: 0.8;
--bg-overlay-opacity-3: 0.7; --dc-overlay-opacity-3: 0.7;
--bg-overlay-opacity-4: 0.6; --dc-overlay-opacity-4: 0.6;
--bg-overlay-opacity-5: 0.3; --dc-overlay-opacity-5: 0.3;
--bg-overlay-opacity-6: 0.15; --dc-overlay-opacity-6: 0.15;
--bg-overlay-opacity-hover: 0.7; --dc-overlay-opacity-hover: 0.7;
--bg-overlay-opacity-hover-inverse: 0.02; --dc-overlay-opacity-hover-inverse: 0.02;
--bg-overlay-opacity-active: 0.65; --dc-overlay-opacity-active: 0.65;
--bg-overlay-opacity-active-inverse: 0.03; --dc-overlay-opacity-active-inverse: 0.03;
--bg-overlay-opacity-selected: 0.6; --dc-overlay-opacity-selected: 0.6;
--bg-overlay-opacity-selected-inverse: 0.04; --dc-overlay-opacity-selected-inverse: 0.04;
--bg-overlay-opacity-chat: 0.9; --dc-overlay-opacity-chat: 0.9;
--bg-overlay-opacity-home: 0.7; --dc-overlay-opacity-home: 0.7;
--bg-overlay-opacity-home-card: 0.9; --dc-overlay-opacity-home-card: 0.9;
--bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-5); --dc-overlay-opacity-app-frame: var(--dc-overlay-opacity-5);
--bg-guild-button: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)); --dc-guild-button: rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-3));
--bg-secondary-alt: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-secondary-alt: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-1)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-1))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-chat-header: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-chat-header: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-1)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-1))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
} }
.colorwaysPreview-modal, .colorwaysPreview-modal,
.colorwaysPreview { .colorwaysPreview-wrapper {
--bg-overlay-1: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-1: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-1)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-1))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-2: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-2: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-2)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-2))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-3: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-3: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-3)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-3))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-4: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-4)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-4))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-4: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-4)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-4))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-5: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-5)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-5))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-5: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-5)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-5))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-6: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-6: linear-gradient(rgb(var(--dc-overlay-color-inverse)/var(--dc-overlay-opacity-6)),rgb(var(--dc-overlay-color-inverse)/var(--dc-overlay-opacity-6))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-hover: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-hover-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-hover-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-hover)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-hover))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-hover: linear-gradient(rgb(var(--dc-overlay-color-inverse)/var(--dc-overlay-opacity-hover-inverse)),rgb(var(--dc-overlay-color-inverse)/var(--dc-overlay-opacity-hover-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-hover)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-hover))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-active: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-active-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-active-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-active)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-active))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-active: linear-gradient(rgb(var(--dc-overlay-color-inverse)/var(--dc-overlay-opacity-active-inverse)),rgb(var(--dc-overlay-color-inverse)/var(--dc-overlay-opacity-active-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-active)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-active))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-selected: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-selected-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-selected-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-selected)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-selected))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-selected: linear-gradient(rgb(var(--dc-overlay-color-inverse)/var(--dc-overlay-opacity-selected-inverse)),rgb(var(--dc-overlay-color-inverse)/var(--dc-overlay-opacity-selected-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-selected)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-selected))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-chat: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-chat)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-chat))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-chat: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-chat)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-chat))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-home: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-home: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-home)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-home))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-home-card: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home-card)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home-card))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-home-card: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-home-card)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-home-card))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
--bg-overlay-app-frame: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-app-frame)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-app-frame))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover; --dc-overlay-app-frame: linear-gradient(rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-app-frame)),rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-app-frame))) fixed 0 0/cover,var(--gradient-theme-bg) fixed 0 0/cover;
}`; }`;
@ -669,6 +669,14 @@ export function getPreset(primaryColor?: string, secondaryColor?: string, tertia
}`; }`;
} }
function cyan2(discordSaturation = false) {
return `:root:root {
--cyan-accent-color: ${"#" + accentColor};
--cyan-background-primary: hsl(${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + primaryColor)[1]}%) ${HexToHSL("#" + primaryColor)[2]}%/60%);
--cyan-second-layer: hsl(${HexToHSL("#" + tertiaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + tertiaryColor)[1]}%) ${Math.min(HexToHSL("#" + tertiaryColor)[2] + (3.6 * 2), 100)}%/60%);
}`;
}
function virtualBoy(discordSaturation = false) { function virtualBoy(discordSaturation = false) {
return `:root:root { return `:root:root {
--VBaccent: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${HexToHSL("#" + accentColor)[2]}%; --VBaccent: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${HexToHSL("#" + accentColor)[2]}%;
@ -789,17 +797,29 @@ export function getPreset(primaryColor?: string, secondaryColor?: string, tertia
} }
return { return {
default: {
name: "Default",
preset: generateCss,
id: "default",
colors: ["accent", "primary", "secondary", "tertiary"]
},
cyan: { cyan: {
name: "Cyan", name: "Cyan",
preset: cyan, preset: cyan,
id: "cyan", id: "cyan",
colors: ["primary", "secondary", "accent"] colors: ["accent", "primary", "secondary"]
},
cyan2: {
name: "Cyan 2",
preset: cyan2,
id: "cyan2",
colors: ["accent", "primary", "secondary"]
}, },
virtualBoy: { virtualBoy: {
name: "Virtual Boy", name: "Virtual Boy",
preset: virtualBoy, preset: virtualBoy,
id: "virtualBoy", id: "virtualBoy",
colors: ["tertiary", "accent"] colors: ["accent", "tertiary"]
}, },
modular: { modular: {
name: "Modular", name: "Modular",
@ -811,19 +831,19 @@ export function getPreset(primaryColor?: string, secondaryColor?: string, tertia
name: "Solana", name: "Solana",
preset: solana, preset: solana,
id: "solana", id: "solana",
colors: ["primary", "accent"] colors: ["accent", "primary"]
}, },
gradientType1: { gradientType1: {
name: "Gradient Type 1", name: "Gradient Type 1",
preset: gradientType1, preset: gradientType1,
id: "gradientType1", id: "gradientType1",
colors: ["primary", "secondary", "tertiary", "accent"] colors: ["accent", "primary", "secondary", "tertiary"]
}, },
gradientType2: { gradientType2: {
name: "Gradient Type 2", name: "Gradient Type 2",
preset: gradientType2, preset: gradientType2,
id: "gradientType2", id: "gradientType2",
colors: ["primary", "secondary", "accent"] colors: ["accent", "primary", "secondary"]
}, },
hueRotation: { hueRotation: {
name: "Hue Rotation", name: "Hue Rotation",
@ -839,3 +859,8 @@ export function getPreset(primaryColor?: string, secondaryColor?: string, tertia
} }
}; };
} }
export const gradientPresetIds = [
"gradientType1",
"gradientType2"
];

46
src/userplugins/discordColorways/index.tsx
View file

@ -35,7 +35,7 @@ export let ColorPicker: React.FunctionComponent<ColorPickerProps> = () => {
(async function () { (async function () {
const [ const [
customColorways, customColorways,
colorwaySourcesFiles, colorwaySourceFiles,
showColorwaysButton, showColorwaysButton,
onDemandWays, onDemandWays,
onDemandWaysTintedText, onDemandWaysTintedText,
@ -53,29 +53,20 @@ export let ColorPicker: React.FunctionComponent<ColorPickerProps> = () => {
"onDemandWaysColorArray" "onDemandWaysColorArray"
]); ]);
if (!customColorways) const defaults = [
DataStore.set("customColorways", []); { name: "customColorways", checkedValue: customColorways, defaults: [] },
{ name: "colorwaySourceFiles", checkedValue: colorwaySourceFiles, defaults: [defaultColorwaySource] },
{ name: "showColorwaysButton", checkedValue: showColorwaysButton, defaults: false },
{ name: "onDemandWays", checkedValue: onDemandWays, defaults: false },
{ name: "onDemandWaysTintedText", checkedValue: onDemandWaysTintedText, defaults: true },
{ name: "useThinMenuButton", checkedValue: useThinMenuButton, defaults: false },
{ name: "onDemandWaysDiscordSaturation", checkedValue: onDemandWaysDiscordSaturation, defaults: false },
{ name: "onDemandWaysColorArray", checkedValue: onDemandWaysColorArray, defaults: ["313338", "2b2d31", "1e1f22", "5865f2"] }
];
if (!colorwaySourcesFiles) defaults.forEach(({ name, checkedValue, defaults }) => {
DataStore.set("colorwaySourceFiles", [defaultColorwaySource]); if (!checkedValue) DataStore.set(name, defaults);
});
if (!showColorwaysButton)
DataStore.set("showColorwaysButton", false);
if (!onDemandWays)
DataStore.set("onDemandWays", false);
if (!onDemandWaysTintedText)
DataStore.set("onDemandWaysTintedText", true);
if (!useThinMenuButton)
DataStore.set("useThinMenuButton", false);
if (!onDemandWaysDiscordSaturation)
DataStore.set("onDemandWaysDiscordSaturation", false);
if (!onDemandWaysColorArray)
DataStore.set("onDemandWaysColorArray", ["313338", "2b2d31", "1e1f22", "5865f2"]);
})(); })();
@ -94,14 +85,13 @@ export const ColorwayCSS = {
}; };
export const versionData = { export const versionData = {
pluginVersion: "5.6.4.2", pluginVersion: "5.6.5.1",
creatorVersion: "1.18.3", creatorVersion: "1.19",
}; };
export default definePlugin({ export default definePlugin({
name: "DiscordColorways", name: "DiscordColorways",
description: description: "A plugin that offers easy access to simple color schemes/themes for Discord, also known as Colorways",
"A plugin that offers easy access to simple color schemes/themes for Discord, also known as Colorways",
authors: [{ authors: [{
name: "DaBluLite", name: "DaBluLite",
id: 582170007505731594n id: 582170007505731594n
@ -160,7 +150,7 @@ export default definePlugin({
return [ return [
{ {
section: SectionTypes.HEADER, section: SectionTypes.HEADER,
label: "DiscordColorways", label: "Discord Colorways",
className: "vc-settings-header" className: "vc-settings-header"
}, },
{ {

82
src/userplugins/discordColorways/style.css
View file

File diff suppressed because one or more lines are too long

2
src/userplugins/vc-message-logger-enhanced

@ -1 +1 @@
Subproject commit cfd92553bb9b3f291fc437b1717096a4c967e45b Subproject commit 080c28c740ad0300b758a782f2cda9d758a78e88

2
src/userplugins/vc-timezones

@ -1 +1 @@
Subproject commit ffa0dec6ca94c999d7264d35ddc074f92d3c6575 Subproject commit 9d631c5a86cdd0a976483a1bba05b8bd7331de97