updated submodules

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

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

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>;
}

View file

@ -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">
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>
<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>
<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,

View file

@ -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,79 +39,67 @@ export default function ({
"secondary",
"tertiary",
];
return (
<ModalRoot {...modalProps} className="colorwayCreator-modal">
const [collapsedCSS, setCollapsedCSS] = useState(true);
return <ModalRoot {...modalProps} className="colorwayCreator-modal">
<ModalHeader>
<Text variant="heading-lg/semibold" tag="h1">
<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 => {
return (
<div
{colors.map(color => <div
className="colorwayInfo-colorSwatch"
style={{
backgroundColor: colorwayProps[color],
}}
style={{ backgroundColor: colorwayProps[color] }}
onClick={() => {
Clipboard.copy(colorwayProps[color]);
Toasts.show({
message:
"Copied color successfully",
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>
<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>
</div>
</ModalContent>
<ModalFooter>
Copy Colorway ID
</Button>
{discrimProps && <Button
style={{ marginLeft: 8 }}
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");
@ -134,42 +123,27 @@ export default function ({
});
}}
>
Delete...
Delete
</Button>}
</Flex>
</div>
<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
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);
// 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",
});
}}
style={{ flex: "0 0 auto" }}
onClick={() => setCollapsedCSS(!collapsedCSS)}
>
Copy Colorway ID
{collapsedCSS ? "Show" : "Hide"}
</Button>
<Button
style={{ marginLeft: 8 }}
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({
@ -179,13 +153,13 @@ export default function ({
});
}}
>
Copy CSS
Copy
</Button>
{discrimProps ? <Button
style={{ marginLeft: 8 }}
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[] = [];
@ -206,12 +180,12 @@ export default function ({
});
}}
>
Update CSS
Update
</Button> : <Button
style={{ marginLeft: 8 }}
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"
@ -245,20 +219,29 @@ export default function ({
});
}}
>
Update CSS (Local)
Update
</Button>}
<Button
style={{ marginLeft: 8 }}
color={Button.Colors.PRIMARY}
size={Button.Sizes.MEDIUM}
look={Button.Looks.OUTLINED}
onClick={() => {
modalProps.onClose();
}}
</Flex>
<Text
variant="code"
selectable={true}
className="colorwayInfo-cssCodeblock"
>
Cancel
</Button>
</ModalFooter>
</ModalRoot>
);
{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>;
}

View file

@ -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}
style={{ margin: "8px", width: "calc(100% - 16px)" }}
/>
</ModalContent>
<ModalFooter>
<Button
style={{ marginLeft: 8 }}

View file

@ -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 }}
>
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>
{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}
/>
</>
);
}

View file

@ -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"
];

View file

@ -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