updated submodules
This commit is contained in:
parent
5061de8d0b
commit
605f0fd9f3
GPG key ID:
3813315477F26F82
11 changed files with 524 additions and 432 deletions
|
|
@ -1 +1 @@
|
|||
Subproject commit 2197a18924c6de334aa52da4a69f544436ce8029
|
||||
Subproject commit 294e9313b43425221534254069164d6d04cfb93a
|
||||
|
|
@ -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>;
|
||||
}
|
||||
|
|
@ -16,8 +16,6 @@ import {
|
|||
import {
|
||||
Button,
|
||||
Forms,
|
||||
ScrollerThin,
|
||||
Switch,
|
||||
Text,
|
||||
TextInput,
|
||||
useEffect,
|
||||
|
|
@ -27,9 +25,10 @@ import {
|
|||
|
||||
import { ColorPicker } from "..";
|
||||
import { knownThemeVars } from "../constants";
|
||||
import { generateCss, getPreset } from "../css";
|
||||
import { generateCss, getPreset, gradientPresetIds, pureGradientBase } from "../css";
|
||||
import { Colorway } from "../types";
|
||||
import { colorToHex, getHex, hexToString } from "../utils";
|
||||
import ColorwayCreatorSettingsModal from "./ColorwayCreatorSettingsModal";
|
||||
import ConflictingColorsModal from "./ConflictingColorsModal";
|
||||
import InputColorwayIdModal from "./InputColorwayIdModal";
|
||||
import ThemePreviewCategory from "./ThemePreview";
|
||||
|
|
@ -122,7 +121,7 @@ export default function ({
|
|||
onChange={setColorwayName}
|
||||
/>
|
||||
<div className="colorwaysCreator-settingCat">
|
||||
<Forms.FormTitle style={{ marginBottom: 0 }}>
|
||||
<Forms.FormTitle style={{ marginBottom: "0" }}>
|
||||
Colors:
|
||||
</Forms.FormTitle>
|
||||
<div className="colorwayCreator-colorPreviews">
|
||||
|
|
@ -142,61 +141,38 @@ export default function ({
|
|||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`colorwaysCreator-settingCat${collapsedSettings ? " colorwaysCreator-settingCat-collapsed" : ""}`}>
|
||||
<div
|
||||
className="colorwaysCreator-settingItm colorwaysCreator-settingHeader"
|
||||
onClick={() => setCollapsedSettings(!collapsedSettings)}>
|
||||
<Forms.FormTitle style={{ marginBottom: 0 }}>Settings</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>
|
||||
<ScrollerThin orientation="vertical" className="colorwaysCreator-settingsList" paddingFix>
|
||||
<div className="colorwaysCreator-settingItm" onClick={() => setTintedText(!tintedText)}>
|
||||
<Text variant="eyebrow" tag="h5">Use colored text</Text>
|
||||
<Switch value={tintedText} onChange={setTintedText} hideBorder={true} style={{ marginBottom: 0 }} />
|
||||
</div>
|
||||
<div className="colorwaysCreator-settingItm" onClick={() => setDiscordSaturation(!discordSaturation)}>
|
||||
<Text variant="eyebrow" tag="h5">Use Discord's saturation</Text>
|
||||
<Switch value={discordSaturation} onChange={setDiscordSaturation} hideBorder={true} style={{ marginBottom: 0 }} />
|
||||
</div>
|
||||
</ScrollerThin>
|
||||
<div
|
||||
className="colorwaysCreator-setting"
|
||||
onClick={() => openModal((props: ModalProps) => <ColorwayCreatorSettingsModal
|
||||
modalProps={props}
|
||||
hasDiscordSaturation={discordSaturation}
|
||||
hasTintedText={tintedText}
|
||||
presetId={preset}
|
||||
onSettings={({ presetId, tintedText, discordSaturation }) => {
|
||||
setPreset(presetId);
|
||||
setPresetColorArray(getPreset()[presetId].colors);
|
||||
setDiscordSaturation(discordSaturation);
|
||||
setTintedText(tintedText);
|
||||
}} />)}>
|
||||
<Forms.FormTitle style={{ marginBottom: 0 }}>Settings & Presets</Forms.FormTitle>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" role="img" style={{ rotate: "-90deg" }}>
|
||||
<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>
|
||||
<div className={`colorwaysCreator-settingCat${collapsedPresets ? " colorwaysCreator-settingCat-collapsed" : ""}`}>
|
||||
<div
|
||||
className="colorwaysCreator-settingItm colorwaysCreator-settingHeader"
|
||||
onClick={() => setCollapsedPresets(!collapsedPresets)}>
|
||||
<Forms.FormTitle style={{ marginBottom: 0 }}>Presets</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>
|
||||
<ScrollerThin orientation="vertical" className="colorwaysCreator-settingsList">
|
||||
<div className="colorwaysCreator-settingItm colorwaysCreator-preset" onClick={() => {
|
||||
setPreset("default");
|
||||
setPresetColorArray(["primary", "secondary", "tertiary", "accent"]);
|
||||
}}>
|
||||
<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} />
|
||||
<ThemePreviewCategory
|
||||
isCollapsed={false}
|
||||
accent={"#" + accentColor}
|
||||
primary={"#" + primaryColor}
|
||||
secondary={"#" + secondaryColor}
|
||||
tertiary={"#" + tertiaryColor}
|
||||
noContainer
|
||||
previewCSS={gradientPresetIds.includes(getPreset()[preset].id) ? pureGradientBase + `.colorwaysPreview-modal,.colorwaysPreview-wrapper {--gradient-theme-bg: linear-gradient(${(getPreset(
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
tertiaryColor,
|
||||
accentColor
|
||||
)[preset].preset(discordSaturation) as { full: string, base: string; }).base})}` : ""}
|
||||
/>
|
||||
</ModalContent>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
|
|
@ -216,7 +192,7 @@ export default function ({
|
|||
discordSaturation
|
||||
);
|
||||
} else {
|
||||
(getPreset()[preset].id === "gradientType1" || getPreset()[preset].id === "gradientType2") ?
|
||||
gradientPresetIds.includes(getPreset()[preset].id) ?
|
||||
customColorwayCSS = getPreset(
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
|
|
@ -239,8 +215,8 @@ export default function ({
|
|||
colors: presetColorArray,
|
||||
author: UserStore.getCurrentUser().username,
|
||||
authorID: UserStore.getCurrentUser().id,
|
||||
isGradient: getPreset()[preset].id === "gradientType1" || getPreset()[preset].id === "gradientType2",
|
||||
linearGradient: (getPreset()[preset].id === "gradientType1" || getPreset()[preset].id === "gradientType2") ? getPreset(
|
||||
isGradient: gradientPresetIds.includes(getPreset()[preset].id),
|
||||
linearGradient: gradientPresetIds.includes(getPreset()[preset].id) ? getPreset(
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
tertiaryColor,
|
||||
|
|
|
|||
|
|
@ -5,20 +5,21 @@
|
|||
*/
|
||||
|
||||
import * as DataStore from "@api/DataStore";
|
||||
import { Flex } from "@components/Flex";
|
||||
import { openUserProfile } from "@utils/discord";
|
||||
import {
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalProps,
|
||||
ModalRoot,
|
||||
} 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 { generateCss } from "../css";
|
||||
import { generateCss, pureGradientBase } from "../css";
|
||||
import { Colorway } from "../types";
|
||||
import { colorToHex } from "../utils";
|
||||
import { colorToHex, stringToHex } from "../utils";
|
||||
import ThemePreviewCategory from "./ThemePreview";
|
||||
|
||||
export default function ({
|
||||
|
|
@ -38,227 +39,209 @@ export default function ({
|
|||
"secondary",
|
||||
"tertiary",
|
||||
];
|
||||
return (
|
||||
<ModalRoot {...modalProps} className="colorwayCreator-modal">
|
||||
<ModalHeader>
|
||||
<Text variant="heading-lg/semibold" tag="h1">
|
||||
Colorway Details: {colorwayProps.name}
|
||||
</Text>
|
||||
</ModalHeader>
|
||||
<ModalContent>
|
||||
<div className="colorwayInfo-wrapper">
|
||||
<div className="colorwayInfo-colorSwatches">
|
||||
{colors.map(color => {
|
||||
return (
|
||||
<div
|
||||
className="colorwayInfo-colorSwatch"
|
||||
style={{
|
||||
backgroundColor: colorwayProps[color],
|
||||
}}
|
||||
onClick={() => {
|
||||
Clipboard.copy(colorwayProps[color]);
|
||||
Toasts.show({
|
||||
message:
|
||||
"Copied color successfully",
|
||||
type: 1,
|
||||
id: "copy-colorway-color-notify",
|
||||
});
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="colorwayInfo-row colorwayInfo-author">
|
||||
<Forms.FormTitle style={{ marginBottom: 0 }}>
|
||||
Author:
|
||||
</Forms.FormTitle>
|
||||
const [collapsedCSS, setCollapsedCSS] = useState(true);
|
||||
return <ModalRoot {...modalProps} className="colorwayCreator-modal">
|
||||
<ModalHeader>
|
||||
<Text variant="heading-lg/semibold" tag="h1" style={{ marginRight: "auto" }}>
|
||||
Colorway Details: {colorwayProps.name}
|
||||
</Text>
|
||||
<ModalCloseButton onClick={() => modalProps.onClose()} />
|
||||
</ModalHeader>
|
||||
<ModalContent>
|
||||
<div className="colorwayInfo-wrapper">
|
||||
<div className="colorwayInfo-colorSwatches">
|
||||
{colors.map(color => <div
|
||||
className="colorwayInfo-colorSwatch"
|
||||
style={{ backgroundColor: colorwayProps[color] }}
|
||||
onClick={() => {
|
||||
Clipboard.copy(colorwayProps[color]);
|
||||
Toasts.show({
|
||||
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" }}>
|
||||
<Forms.FormTitle style={{ marginBottom: 0, width: "100%" }}>Properties:</Forms.FormTitle>
|
||||
<Button
|
||||
color={Button.Colors.PRIMARY}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
look={Button.Looks.FILLED}
|
||||
look={Button.Looks.OUTLINED}
|
||||
style={{ flex: "0 0 auto", maxWidth: "236px" }}
|
||||
onClick={() => {
|
||||
openUserProfile(colorwayProps.authorID);
|
||||
}}
|
||||
>
|
||||
{colorwayProps.author}
|
||||
Author: {colorwayProps.author}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="colorwayInfo-row colorwayInfo-css">
|
||||
<Forms.FormTitle style={{ marginBottom: 0 }}>
|
||||
CSS:
|
||||
</Forms.FormTitle>
|
||||
<Text
|
||||
variant="code"
|
||||
selectable={true}
|
||||
className="colorwayInfo-cssCodeblock"
|
||||
<Button
|
||||
color={Button.Colors.PRIMARY}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
look={Button.Looks.OUTLINED}
|
||||
style={{ flex: "0 0 auto" }}
|
||||
onClick={() => {
|
||||
const colorwayIDArray = `${colorwayProps.accent},${colorwayProps.primary},${colorwayProps.secondary},${colorwayProps.tertiary}`;
|
||||
const colorwayID = stringToHex(colorwayIDArray);
|
||||
Clipboard.copy(colorwayID);
|
||||
Toasts.show({
|
||||
message: "Copied Colorway ID Successfully",
|
||||
type: 1,
|
||||
id: "copy-colorway-id-notify",
|
||||
});
|
||||
}}
|
||||
>
|
||||
{colorwayProps["dc-import"]}
|
||||
</Text>
|
||||
</div>
|
||||
<ThemePreviewCategory
|
||||
isCollapsed={true}
|
||||
className="colorwayInfo-lastCat"
|
||||
accent={colorwayProps.accent}
|
||||
primary={colorwayProps.primary}
|
||||
secondary={colorwayProps.secondary}
|
||||
tertiary={colorwayProps.tertiary}
|
||||
></ThemePreviewCategory>
|
||||
Copy Colorway ID
|
||||
</Button>
|
||||
{discrimProps && <Button
|
||||
color={Button.Colors.RED}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
look={Button.Looks.FILLED}
|
||||
style={{ flex: "0 0 auto" }}
|
||||
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) {
|
||||
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>
|
||||
</ModalContent>
|
||||
<ModalFooter>
|
||||
{discrimProps && <Button
|
||||
style={{ marginLeft: 8 }}
|
||||
color={Button.Colors.RED}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
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) {
|
||||
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>}
|
||||
<Button
|
||||
style={{ marginLeft: 8 }}
|
||||
color={Button.Colors.PRIMARY}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
look={Button.Looks.OUTLINED}
|
||||
onClick={() => {
|
||||
const stringToHex = (str: string) => {
|
||||
let hex = "";
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
const charCode = str.charCodeAt(i);
|
||||
const hexValue = charCode.toString(16);
|
||||
<div className={"colorwayInfo-row colorwayInfo-css" + (collapsedCSS ? " colorwaysCreator-settingCat-collapsed" : "")}>
|
||||
<Flex style={{ gap: "10px", width: "100%", alignItems: "center" }}>
|
||||
<Forms.FormTitle style={{ marginBottom: 0, width: "100%" }}>CSS:</Forms.FormTitle>
|
||||
<Button
|
||||
color={Button.Colors.PRIMARY}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
look={Button.Looks.OUTLINED}
|
||||
style={{ flex: "0 0 auto" }}
|
||||
onClick={() => setCollapsedCSS(!collapsedCSS)}
|
||||
>
|
||||
{collapsedCSS ? "Show" : "Hide"}
|
||||
</Button>
|
||||
<Button
|
||||
color={Button.Colors.PRIMARY}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
look={Button.Looks.OUTLINED}
|
||||
style={{ flex: "0 0 auto" }}
|
||||
onClick={() => {
|
||||
Clipboard.copy(colorwayProps["dc-import"]);
|
||||
Toasts.show({
|
||||
message: "Copied CSS to Clipboard",
|
||||
type: 1,
|
||||
id: "copy-colorway-css-notify",
|
||||
});
|
||||
}}
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
{discrimProps ? <Button
|
||||
color={Button.Colors.PRIMARY}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
look={Button.Looks.OUTLINED}
|
||||
style={{ flex: "0 0 auto" }}
|
||||
onClick={async () => {
|
||||
const customColorways = await DataStore.get("customColorways");
|
||||
const customColorwaysArray: Colorway[] = [];
|
||||
customColorways.map((color: Colorway, i: number) => {
|
||||
if (customColorways.length > 0) {
|
||||
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
|
||||
</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
|
||||
hex += hexValue.padStart(2, "0");
|
||||
}
|
||||
return hex;
|
||||
};
|
||||
const colorwayIDArray = `${colorwayProps.accent},${colorwayProps.primary},${colorwayProps.secondary},${colorwayProps.tertiary}`;
|
||||
const colorwayID = stringToHex(colorwayIDArray);
|
||||
Clipboard.copy(colorwayID);
|
||||
Toasts.show({
|
||||
message: "Copied Colorway ID Successfully",
|
||||
type: 1,
|
||||
id: "copy-colorway-id-notify",
|
||||
});
|
||||
}}
|
||||
>
|
||||
Copy Colorway ID
|
||||
</Button>
|
||||
<Button
|
||||
style={{ marginLeft: 8 }}
|
||||
color={Button.Colors.PRIMARY}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
look={Button.Looks.OUTLINED}
|
||||
onClick={() => {
|
||||
Clipboard.copy(colorwayProps["dc-import"]);
|
||||
Toasts.show({
|
||||
message: "Copied CSS to Clipboard",
|
||||
type: 1,
|
||||
id: "copy-colorway-css-notify",
|
||||
});
|
||||
}}
|
||||
>
|
||||
Copy CSS
|
||||
</Button>
|
||||
{discrimProps ? <Button
|
||||
style={{ marginLeft: 8 }}
|
||||
color={Button.Colors.PRIMARY}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
look={Button.Looks.OUTLINED}
|
||||
onClick={async () => {
|
||||
const customColorways = await DataStore.get("customColorways");
|
||||
const customColorwaysArray: Colorway[] = [];
|
||||
customColorways.map((color: Colorway, i: number) => {
|
||||
if (customColorways.length > 0) {
|
||||
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>
|
||||
);
|
||||
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
|
||||
</Button>}
|
||||
</Flex>
|
||||
<Text
|
||||
variant="code"
|
||||
selectable={true}
|
||||
className="colorwayInfo-cssCodeblock"
|
||||
>
|
||||
{colorwayProps["dc-import"]}
|
||||
</Text>
|
||||
</div>
|
||||
<ThemePreviewCategory
|
||||
isCollapsed={true}
|
||||
className="colorwayInfo-lastCat"
|
||||
accent={colorwayProps.accent}
|
||||
primary={colorwayProps.primary}
|
||||
secondary={colorwayProps.secondary}
|
||||
tertiary={colorwayProps.tertiary}
|
||||
noContainer
|
||||
previewCSS={colorwayProps.isGradient ? pureGradientBase + `.colorwaysPreview-modal,.colorwaysPreview-wrapper {--gradient-theme-bg: linear-gradient(${colorwayProps.linearGradient})}` : ""}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ width: "100%", height: "20px" }} />
|
||||
</ModalContent>
|
||||
</ModalRoot>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { Flex } from "@components/Flex";
|
|||
import { CopyIcon } from "@components/Icons";
|
||||
import { Link } from "@components/Link";
|
||||
import { SettingsTab } from "@components/VencordSettings/shared";
|
||||
import { ModalContent, ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal";
|
||||
import { ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal";
|
||||
import {
|
||||
Button,
|
||||
Clipboard,
|
||||
|
|
@ -87,18 +87,17 @@ export default function () {
|
|||
onClick={() => {
|
||||
openModal(props => {
|
||||
var colorwaySource = "";
|
||||
return <ModalRoot {...props}>
|
||||
return <ModalRoot {...props} className="colorwaySourceModal">
|
||||
<ModalHeader>
|
||||
<Text variant="heading-lg/semibold" tag="h1">
|
||||
Add a source:
|
||||
</Text>
|
||||
</ModalHeader>
|
||||
<ModalContent>
|
||||
<TextInput
|
||||
placeholder="Enter a valid URL..."
|
||||
onChange={e => colorwaySource = e}
|
||||
/>
|
||||
</ModalContent>
|
||||
<TextInput
|
||||
placeholder="Enter a valid URL..."
|
||||
onChange={e => colorwaySource = e}
|
||||
style={{ margin: "8px", width: "calc(100% - 16px)" }}
|
||||
/>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
style={{ marginLeft: 8 }}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,7 @@
|
|||
import { ModalProps, ModalRoot, openModal } from "@utils/modal";
|
||||
import {
|
||||
Forms,
|
||||
Text,
|
||||
useState
|
||||
Text
|
||||
} from "@webpack/common";
|
||||
|
||||
import { HexToHSL } from "../utils";
|
||||
|
|
@ -21,7 +20,8 @@ export default function ({
|
|||
tertiary,
|
||||
className,
|
||||
isCollapsed,
|
||||
previewCSS
|
||||
previewCSS,
|
||||
noContainer
|
||||
}: {
|
||||
accent: string,
|
||||
primary: string,
|
||||
|
|
@ -29,9 +29,9 @@ export default function ({
|
|||
tertiary: string,
|
||||
className?: string,
|
||||
isCollapsed: boolean,
|
||||
previewCSS?: string;
|
||||
previewCSS?: string,
|
||||
noContainer?: boolean;
|
||||
}) {
|
||||
const [collapsed, setCollapsed] = useState<boolean>(isCollapsed);
|
||||
function ThemePreview({
|
||||
accent,
|
||||
primary,
|
||||
|
|
@ -50,7 +50,7 @@ export default function ({
|
|||
return (
|
||||
<div
|
||||
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-body">
|
||||
|
|
@ -58,9 +58,9 @@ export default function ({
|
|||
<div className="colorwayPreview-guild">
|
||||
<div
|
||||
className="colorwayPreview-guildItem"
|
||||
style={{ background: `var(--bg-guild-button, ${primary})` }}
|
||||
style={{ background: `var(--dc-guild-button, ${primary})` }}
|
||||
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={() => {
|
||||
if (isModal) {
|
||||
modalProps?.onClose();
|
||||
|
|
@ -106,25 +106,25 @@ export default function ({
|
|||
<div className="colorwayPreview-guild">
|
||||
<div
|
||||
className="colorwayPreview-guildItem"
|
||||
style={{ background: `var(--bg-guild-button, ${primary})` }}
|
||||
style={{ background: `var(--dc-guild-button, ${primary})` }}
|
||||
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 className="colorwayPreview-guild">
|
||||
<div
|
||||
className="colorwayPreview-guildItem"
|
||||
style={{ background: `var(--bg-guild-button, ${primary})` }}
|
||||
style={{ background: `var(--dc-guild-button, ${primary})` }}
|
||||
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-channels" style={{ background: `var(--bg-overlay-3, ${secondary})` }}>
|
||||
<div className="colorwayPreview-channels" style={{ background: `var(--dc-overlay-3, ${secondary})` }}>
|
||||
<div
|
||||
className="colorwayPreview-userArea"
|
||||
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" />
|
||||
|
|
@ -145,11 +145,11 @@ export default function ({
|
|||
</Text>
|
||||
</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
|
||||
className="colorwayPreview-chatBox"
|
||||
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" />
|
||||
|
|
@ -162,35 +162,12 @@ export default function ({
|
|||
);
|
||||
}
|
||||
return (
|
||||
<div className={`${collapsed ? "colorwaysPreview colorwaysPreview-collapsed" : "colorwaysPreview"} ${className || ""}`}>
|
||||
<div
|
||||
className="colorwaysCreator-settingItm colorwaysCreator-settingHeader"
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
!noContainer ? <div className="colorwaysPreview">
|
||||
<Forms.FormTitle
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<Forms.FormTitle
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
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>
|
||||
Preview
|
||||
</Forms.FormTitle>
|
||||
<style>
|
||||
{previewCSS}
|
||||
</style>
|
||||
|
|
@ -200,6 +177,17 @@ export default function ({
|
|||
secondary={secondary}
|
||||
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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -291,67 +291,67 @@ const BrandLightDiffs = {
|
|||
};
|
||||
|
||||
export const pureGradientBase = `
|
||||
.theme-dark :is(.colorwaysPreview-modal, .colorwaysPreview) {
|
||||
--bg-overlay-color: 0 0 0;
|
||||
--bg-overlay-color-inverse: 255 255 255;
|
||||
--bg-overlay-opacity-1: 0.85;
|
||||
--bg-overlay-opacity-2: 0.8;
|
||||
--bg-overlay-opacity-3: 0.7;
|
||||
--bg-overlay-opacity-4: 0.5;
|
||||
--bg-overlay-opacity-5: 0.4;
|
||||
--bg-overlay-opacity-6: 0.1;
|
||||
--bg-overlay-opacity-hover: 0.5;
|
||||
--bg-overlay-opacity-hover-inverse: 0.08;
|
||||
--bg-overlay-opacity-active: 0.45;
|
||||
--bg-overlay-opacity-active-inverse: 0.1;
|
||||
--bg-overlay-opacity-selected: 0.4;
|
||||
--bg-overlay-opacity-selected-inverse: 0.15;
|
||||
--bg-overlay-opacity-chat: 0.8;
|
||||
--bg-overlay-opacity-home: 0.85;
|
||||
--bg-overlay-opacity-home-card: 0.8;
|
||||
--bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-4);
|
||||
--bg-guild-button: rgb(var(--bg-overlay-color-inverse)/var(--bg-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;
|
||||
--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;
|
||||
.theme-dark :is(.colorwaysPreview-modal, .colorwaysPreview-wrapper) {
|
||||
--dc-overlay-color: 0 0 0;
|
||||
--dc-overlay-color-inverse: 255 255 255;
|
||||
--dc-overlay-opacity-1: 0.85;
|
||||
--dc-overlay-opacity-2: 0.8;
|
||||
--dc-overlay-opacity-3: 0.7;
|
||||
--dc-overlay-opacity-4: 0.5;
|
||||
--dc-overlay-opacity-5: 0.4;
|
||||
--dc-overlay-opacity-6: 0.1;
|
||||
--dc-overlay-opacity-hover: 0.5;
|
||||
--dc-overlay-opacity-hover-inverse: 0.08;
|
||||
--dc-overlay-opacity-active: 0.45;
|
||||
--dc-overlay-opacity-active-inverse: 0.1;
|
||||
--dc-overlay-opacity-selected: 0.4;
|
||||
--dc-overlay-opacity-selected-inverse: 0.15;
|
||||
--dc-overlay-opacity-chat: 0.8;
|
||||
--dc-overlay-opacity-home: 0.85;
|
||||
--dc-overlay-opacity-home-card: 0.8;
|
||||
--dc-overlay-opacity-app-frame: var(--dc-overlay-opacity-4);
|
||||
--dc-guild-button: rgb(var(--dc-overlay-color-inverse)/var(--dc-overlay-opacity-6));
|
||||
--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;
|
||||
--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) {
|
||||
--bg-overlay-color: 255 255 255;
|
||||
--bg-overlay-color-inverse: 0 0 0;
|
||||
--bg-overlay-opacity-1: 0.9;
|
||||
--bg-overlay-opacity-2: 0.8;
|
||||
--bg-overlay-opacity-3: 0.7;
|
||||
--bg-overlay-opacity-4: 0.6;
|
||||
--bg-overlay-opacity-5: 0.3;
|
||||
--bg-overlay-opacity-6: 0.15;
|
||||
--bg-overlay-opacity-hover: 0.7;
|
||||
--bg-overlay-opacity-hover-inverse: 0.02;
|
||||
--bg-overlay-opacity-active: 0.65;
|
||||
--bg-overlay-opacity-active-inverse: 0.03;
|
||||
--bg-overlay-opacity-selected: 0.6;
|
||||
--bg-overlay-opacity-selected-inverse: 0.04;
|
||||
--bg-overlay-opacity-chat: 0.9;
|
||||
--bg-overlay-opacity-home: 0.7;
|
||||
--bg-overlay-opacity-home-card: 0.9;
|
||||
--bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-5);
|
||||
--bg-guild-button: rgb(var(--bg-overlay-color)/var(--bg-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;
|
||||
--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;
|
||||
.theme-light :is(.colorwaysPreview-modal, .colorwaysPreview-wrapper) {
|
||||
--dc-overlay-color: 255 255 255;
|
||||
--dc-overlay-color-inverse: 0 0 0;
|
||||
--dc-overlay-opacity-1: 0.9;
|
||||
--dc-overlay-opacity-2: 0.8;
|
||||
--dc-overlay-opacity-3: 0.7;
|
||||
--dc-overlay-opacity-4: 0.6;
|
||||
--dc-overlay-opacity-5: 0.3;
|
||||
--dc-overlay-opacity-6: 0.15;
|
||||
--dc-overlay-opacity-hover: 0.7;
|
||||
--dc-overlay-opacity-hover-inverse: 0.02;
|
||||
--dc-overlay-opacity-active: 0.65;
|
||||
--dc-overlay-opacity-active-inverse: 0.03;
|
||||
--dc-overlay-opacity-selected: 0.6;
|
||||
--dc-overlay-opacity-selected-inverse: 0.04;
|
||||
--dc-overlay-opacity-chat: 0.9;
|
||||
--dc-overlay-opacity-home: 0.7;
|
||||
--dc-overlay-opacity-home-card: 0.9;
|
||||
--dc-overlay-opacity-app-frame: var(--dc-overlay-opacity-5);
|
||||
--dc-guild-button: rgb(var(--dc-overlay-color)/var(--dc-overlay-opacity-3));
|
||||
--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;
|
||||
--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 {
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
.colorwaysPreview-wrapper {
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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;
|
||||
--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) {
|
||||
return `:root:root {
|
||||
--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 {
|
||||
default: {
|
||||
name: "Default",
|
||||
preset: generateCss,
|
||||
id: "default",
|
||||
colors: ["accent", "primary", "secondary", "tertiary"]
|
||||
},
|
||||
cyan: {
|
||||
name: "Cyan",
|
||||
preset: cyan,
|
||||
id: "cyan",
|
||||
colors: ["primary", "secondary", "accent"]
|
||||
colors: ["accent", "primary", "secondary"]
|
||||
},
|
||||
cyan2: {
|
||||
name: "Cyan 2",
|
||||
preset: cyan2,
|
||||
id: "cyan2",
|
||||
colors: ["accent", "primary", "secondary"]
|
||||
},
|
||||
virtualBoy: {
|
||||
name: "Virtual Boy",
|
||||
preset: virtualBoy,
|
||||
id: "virtualBoy",
|
||||
colors: ["tertiary", "accent"]
|
||||
colors: ["accent", "tertiary"]
|
||||
},
|
||||
modular: {
|
||||
name: "Modular",
|
||||
|
|
@ -811,19 +831,19 @@ export function getPreset(primaryColor?: string, secondaryColor?: string, tertia
|
|||
name: "Solana",
|
||||
preset: solana,
|
||||
id: "solana",
|
||||
colors: ["primary", "accent"]
|
||||
colors: ["accent", "primary"]
|
||||
},
|
||||
gradientType1: {
|
||||
name: "Gradient Type 1",
|
||||
preset: gradientType1,
|
||||
id: "gradientType1",
|
||||
colors: ["primary", "secondary", "tertiary", "accent"]
|
||||
colors: ["accent", "primary", "secondary", "tertiary"]
|
||||
},
|
||||
gradientType2: {
|
||||
name: "Gradient Type 2",
|
||||
preset: gradientType2,
|
||||
id: "gradientType2",
|
||||
colors: ["primary", "secondary", "accent"]
|
||||
colors: ["accent", "primary", "secondary"]
|
||||
},
|
||||
hueRotation: {
|
||||
name: "Hue Rotation",
|
||||
|
|
@ -839,3 +859,8 @@ export function getPreset(primaryColor?: string, secondaryColor?: string, tertia
|
|||
}
|
||||
};
|
||||
}
|
||||
|
||||
export const gradientPresetIds = [
|
||||
"gradientType1",
|
||||
"gradientType2"
|
||||
];
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export let ColorPicker: React.FunctionComponent<ColorPickerProps> = () => {
|
|||
(async function () {
|
||||
const [
|
||||
customColorways,
|
||||
colorwaySourcesFiles,
|
||||
colorwaySourceFiles,
|
||||
showColorwaysButton,
|
||||
onDemandWays,
|
||||
onDemandWaysTintedText,
|
||||
|
|
@ -53,29 +53,20 @@ export let ColorPicker: React.FunctionComponent<ColorPickerProps> = () => {
|
|||
"onDemandWaysColorArray"
|
||||
]);
|
||||
|
||||
if (!customColorways)
|
||||
DataStore.set("customColorways", []);
|
||||
const defaults = [
|
||||
{ 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)
|
||||
DataStore.set("colorwaySourceFiles", [defaultColorwaySource]);
|
||||
|
||||
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"]);
|
||||
defaults.forEach(({ name, checkedValue, defaults }) => {
|
||||
if (!checkedValue) DataStore.set(name, defaults);
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
|
|
@ -94,14 +85,13 @@ export const ColorwayCSS = {
|
|||
};
|
||||
|
||||
export const versionData = {
|
||||
pluginVersion: "5.6.4.2",
|
||||
creatorVersion: "1.18.3",
|
||||
pluginVersion: "5.6.5.1",
|
||||
creatorVersion: "1.19",
|
||||
};
|
||||
|
||||
export default definePlugin({
|
||||
name: "DiscordColorways",
|
||||
description:
|
||||
"A plugin that offers easy access to simple color schemes/themes for Discord, also known as Colorways",
|
||||
description: "A plugin that offers easy access to simple color schemes/themes for Discord, also known as Colorways",
|
||||
authors: [{
|
||||
name: "DaBluLite",
|
||||
id: 582170007505731594n
|
||||
|
|
@ -160,7 +150,7 @@ export default definePlugin({
|
|||
return [
|
||||
{
|
||||
section: SectionTypes.HEADER,
|
||||
label: "DiscordColorways",
|
||||
label: "Discord Colorways",
|
||||
className: "vc-settings-header"
|
||||
},
|
||||
{
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
Subproject commit cfd92553bb9b3f291fc437b1717096a4c967e45b
|
||||
Subproject commit 080c28c740ad0300b758a782f2cda9d758a78e88
|
||||
|
|
@ -1 +1 @@
|
|||
Subproject commit ffa0dec6ca94c999d7264d35ddc074f92d3c6575
|
||||
Subproject commit 9d631c5a86cdd0a976483a1bba05b8bd7331de97
|
||||
Loading…
Reference in a new issue