From cba15d56d362c3c08abe802e76b6002a11fbdba8 Mon Sep 17 00:00:00 2001 From: SeaswimmerTheFsh Date: Sat, 27 Apr 2024 13:51:49 -0400 Subject: [PATCH] updated DiscordColorways to v5.6.4.2 --- .../components/ColorPicker.tsx | 247 +++------- .../components/ColorwaysButton.tsx | 84 +--- .../components/CreatorModal.tsx | 212 ++++----- .../DiscordColorways/components/Divider.tsx | 15 - .../DiscordColorways/components/InfoModal.tsx | 10 +- .../components/InputColorwayIdModal.tsx | 49 ++ .../{SelectorModal.tsx => Selector.tsx} | 258 +++++----- .../SettingsTabs/ManageColorwaysPage.tsx | 30 -- .../components/SettingsTabs/SelectorPage.tsx | 445 ------------------ .../components/SettingsTabs/SettingsPage.tsx | 9 +- .../components/ThemePreview.tsx | 279 ++++++----- src/userplugins/DiscordColorways/constants.ts | 7 + src/userplugins/DiscordColorways/css.ts | 102 +++- src/userplugins/DiscordColorways/index.tsx | 37 +- src/userplugins/DiscordColorways/style.css | 151 ++---- src/userplugins/DiscordColorways/types.ts | 4 +- 16 files changed, 665 insertions(+), 1274 deletions(-) delete mode 100644 src/userplugins/DiscordColorways/components/Divider.tsx create mode 100644 src/userplugins/DiscordColorways/components/InputColorwayIdModal.tsx rename src/userplugins/DiscordColorways/components/{SelectorModal.tsx => Selector.tsx} (65%) delete mode 100644 src/userplugins/DiscordColorways/components/SettingsTabs/SelectorPage.tsx diff --git a/src/userplugins/DiscordColorways/components/ColorPicker.tsx b/src/userplugins/DiscordColorways/components/ColorPicker.tsx index 195eecb9..d4ae6adc 100644 --- a/src/userplugins/DiscordColorways/components/ColorPicker.tsx +++ b/src/userplugins/DiscordColorways/components/ColorPicker.tsx @@ -19,202 +19,73 @@ import { useState, } from "@webpack/common"; +import { mainColors } from "../constants"; import { colorVariables } from "../css"; - -interface ToolboxItem { - title: string; - onClick: () => void; - id?: string; - iconClassName?: string; -} - -const ColorVarItems: ToolboxItem[] = colorVariables.map((colorVariable: string) => { - return { - title: "Copy " + colorVariable, - onClick: () => { - function getHex(str: string): string { return Object.assign(document.createElement("canvas").getContext("2d") as {}, { fillStyle: str }).fillStyle; } - Clipboard.copy(getHex(getComputedStyle(document.body).getPropertyValue("--" + colorVariable))); - Toasts.show({ message: "Color " + colorVariable + " copied to clipboard", id: "toolbox-color-var-copied", type: 1 }); - }, - id: colorVariable - }; -}); - -const ToolboxItems: ToolboxItem[] = [ - { - title: "Copy Accent Color", - onClick: () => { - function getHex(str: string): string { - return Object.assign( - document.createElement("canvas").getContext("2d") as {}, - { fillStyle: str } - ).fillStyle; - } - Clipboard.copy( - getHex( - getComputedStyle(document.body).getPropertyValue( - "--brand-experiment" - ) - ) - ); - Toasts.show({ - message: "Accent color copied to clipboard", - id: "toolbox-accent-color-copied", - type: 1, - }); - }, - id: "colorways-toolbox_copy-accent", - iconClassName: "copy", - }, - { - title: "Copy Primary Color", - onClick: () => { - function getHex(str: string): string { - return Object.assign( - document.createElement("canvas").getContext("2d") as {}, - { fillStyle: str } - ).fillStyle; - } - Clipboard.copy( - getHex( - getComputedStyle(document.body).getPropertyValue( - "--background-primary" - ) - ) - ); - Toasts.show({ - message: "Primary color copied to clipboard", - id: "toolbox-primary-color-copied", - type: 1, - }); - }, - id: "colorways-toolbox_copy-primary", - iconClassName: "copy", - }, - { - title: "Copy Secondary Color", - onClick: () => { - function getHex(str: string): string { - return Object.assign( - document.createElement("canvas").getContext("2d") as {}, - { fillStyle: str } - ).fillStyle; - } - Clipboard.copy( - getHex( - getComputedStyle(document.body).getPropertyValue( - "--background-secondary" - ) - ) - ); - Toasts.show({ - message: "Secondary color copied to clipboard", - id: "toolbox-secondary-color-copied", - type: 1, - }); - }, - id: "colorways-toolbox_copy-secondary", - iconClassName: "copy", - }, - { - title: "Copy Tertiary Color", - onClick: () => { - function getHex(str: string): string { - return Object.assign( - document.createElement("canvas").getContext("2d") as {}, - { fillStyle: str } - ).fillStyle; - } - Clipboard.copy( - getHex( - getComputedStyle(document.body).getPropertyValue( - "--background-tertiary" - ) - ) - ); - Toasts.show({ - message: "Tertiary color copied to clipboard", - id: "toolbox-tertiary-color-copied", - type: 1, - }); - }, - id: "colorways-toolbox_copy-tertiary", - iconClassName: "copy", - } -]; +import { getHex } from "../utils"; export default function ({ modalProps }: { modalProps: ModalProps; }) { - const [colorVarItems, setColorVarItems] = useState(ColorVarItems); + const [ColorVars, setColorVars] = useState(colorVariables); const [collapsedSettings, setCollapsedSettings] = useState(true); - let results: ToolboxItem[]; + let results: string[]; function searchToolboxItems(e: string) { results = []; - ColorVarItems.find((ToolboxItem: ToolboxItem) => { - if (ToolboxItem.title.toLowerCase().includes(e.toLowerCase())) { - results.push(ToolboxItem); + colorVariables.find((colorVariable: string) => { + if (colorVariable.toLowerCase().includes(e.toLowerCase())) { + results.push(colorVariable); } }); - setColorVarItems(results); + setColorVars(results); } - return ( - - - { - searchToolboxItems(e); - if (e) { - setCollapsedSettings(false); - } else { - setCollapsedSettings(true); - } - }} - /> - - - - {colorVarItems.map((toolboxItem: ToolboxItem) => { - return ( -
- {toolboxItem.title} -
- ); - })} - - - {ToolboxItems.map((toolboxItem: ToolboxItem, i: number) =>
- - {toolboxItem.title} -
- )} - - - ); + return + + { + searchToolboxItems(e); + if (e) { + setCollapsedSettings(false); + } else { + setCollapsedSettings(true); + } + }} + /> + + + + {ColorVars.map((colorVariable: string) =>
{ + Clipboard.copy(getHex(getComputedStyle(document.body).getPropertyValue("--" + colorVariable))); + Toasts.show({ message: "Color " + colorVariable + " copied to clipboard", id: "toolbox-color-var-copied", type: 1 }); + }} style={{ "--brand-experiment": `var(--${colorVariable})` } as React.CSSProperties}> + {`Copy ${colorVariable}`} +
)} + + + {mainColors.map(mainColor =>
+ { + Clipboard.copy(getHex(getComputedStyle(document.body).getPropertyValue(mainColor.var))); + Toasts.show({ message: `${mainColor.title} color copied to clipboard`, id: `toolbox-${mainColor.name}-color-copied`, type: 1 }); + }} width={20} height={20} className="colorwayToolbox-listItemSVG" /> + {`Copy ${mainColor.title} Color`} +
+ )} + + ; } diff --git a/src/userplugins/DiscordColorways/components/ColorwaysButton.tsx b/src/userplugins/DiscordColorways/components/ColorwaysButton.tsx index dcb9109e..f63b0039 100644 --- a/src/userplugins/DiscordColorways/components/ColorwaysButton.tsx +++ b/src/userplugins/DiscordColorways/components/ColorwaysButton.tsx @@ -6,11 +6,11 @@ import * as DataStore from "@api/DataStore"; import { openModal } from "@utils/modal"; -import { FluxDispatcher, Text, Tooltip, useCallback, useEffect, useState } from "@webpack/common"; +import { FluxDispatcher, Text, Tooltip, useEffect, useState } from "@webpack/common"; import { FluxEvents } from "@webpack/types"; import { PalleteIcon } from "./Icons"; -import SelectorModal from "./SelectorModal"; +import Selector from "./Selector"; export default function ({ listItemClass = "ColorwaySelectorBtnContainer", @@ -34,10 +34,8 @@ export default function ({ setIsThin(useThinMenuButton); } - const cached_setButtonVisibility = useCallback(setButtonVisibility, []); - useEffect(() => { - cached_setButtonVisibility(); + setButtonVisibility(); }); FluxDispatcher.subscribe("COLORWAYS_UPDATE_BUTTON_HEIGHT" as FluxEvents, ({ isTall }) => { @@ -48,61 +46,23 @@ export default function ({ setVisibility(isVisible); }); - if (!isThin) { - return ( - Colorways - {"Active Colorway: " + activeColorway} - } position="right" tooltipContentClassName={listItemTooltipClass} - > - {({ onMouseEnter, onMouseLeave, onClick }) => { - return ( - <> - {visibility &&
-
{ - onMouseEnter(); - setActiveColorway(await DataStore.get("actveColorwayID") || "None"); - }} - onMouseLeave={onMouseLeave} - onClick={() => { - onClick(); - openModal(props => ); - }} - >
-
} - - ); - }} - - ); - } else { - return ( - Colorways - {"Active Colorway: " + activeColorway} - } position="right" tooltipContentClassName={listItemTooltipClass} - > - {({ onMouseEnter, onMouseLeave, onClick }) => { - return ( - <> - {visibility &&
-
{ - onMouseEnter(); - setActiveColorway(await DataStore.get("actveColorwayID") || "None"); - }} - onMouseLeave={onMouseLeave} - onClick={() => { - onClick(); - openModal(props => ); - }} - >Colorways
-
} - - ); - }} - - ); - } + return Colorways{"Active Colorway: " + activeColorway} : {"Active Colorway: " + activeColorway} + } position="right" tooltipContentClassName="colorwaysBtn-tooltipContent" + > + {({ onMouseEnter, onMouseLeave, onClick }) => visibility ?
+
{ + onMouseEnter(); + setActiveColorway(await DataStore.get("actveColorwayID") || "None"); + }} + onMouseLeave={onMouseLeave} + onClick={() => { + onClick(); + openModal((props: any) => ); + }} + >{isThin ? Colorways : }
+
: <>} + ; } diff --git a/src/userplugins/DiscordColorways/components/CreatorModal.tsx b/src/userplugins/DiscordColorways/components/CreatorModal.tsx index 748df6a8..82446edb 100644 --- a/src/userplugins/DiscordColorways/components/CreatorModal.tsx +++ b/src/userplugins/DiscordColorways/components/CreatorModal.tsx @@ -31,6 +31,7 @@ import { generateCss, getPreset } from "../css"; import { Colorway } from "../types"; import { colorToHex, getHex, hexToString } from "../utils"; import ConflictingColorsModal from "./ConflictingColorsModal"; +import InputColorwayIdModal from "./InputColorwayIdModal"; import ThemePreviewCategory from "./ThemePreview"; export default function ({ modalProps, @@ -51,26 +52,46 @@ export default function ({ const [collapsedSettings, setCollapsedSettings] = useState(true); const [collapsedPresets, setCollapsedPresets] = useState(true); const [preset, setPreset] = useState("default"); - const [presetColorArray, setPresetColorArray] = useState(["accent", "primary", "secondary", "tertiary"]); + const [presetColorArray, setPresetColorArray] = useState(["primary", "secondary", "tertiary", "accent"]); + + const colorProps = { + accent: { + get: accentColor, + set: setAccentColor, + name: "Accent" + }, + primary: { + get: primaryColor, + set: setPrimaryColor, + name: "Primary" + }, + secondary: { + get: secondaryColor, + set: setSecondaryColor, + name: "Secondary" + }, + tertiary: { + get: tertiaryColor, + set: setTertiaryColor, + name: "Tertiary" + } + }; useEffect(() => { const parsedID = colorwayID?.split("colorway:")[1]; if (parsedID) { - const allEqual = (arr: any[]) => arr.every(v => v === arr[0]); if (!parsedID) { throw new Error("Please enter a Colorway ID"); - } else if (parsedID.length < 62) { - throw new Error("Invalid Colorway ID"); } else if (!hexToString(parsedID).includes(",")) { throw new Error("Invalid Colorway ID"); - } else if (!allEqual(hexToString(parsedID).split(",").map((e: string) => e.match("#")!.length)) && hexToString(parsedID).split(",").map((e: string) => e.match("#")!.length)[0] !== 1) { - throw new Error("Invalid Colorway ID"); } else { - const colorArray: string[] = hexToString(parsedID).split(","); - setAccentColor(colorArray[0].split("#")[1]); - setPrimaryColor(colorArray[1].split("#")[1]); - setSecondaryColor(colorArray[2].split("#")[1]); - setTertiaryColor(colorArray[3].split("#")[1]); + const setColor = [ + setAccentColor, + setPrimaryColor, + setSecondaryColor, + setTertiaryColor + ]; + hexToString(parsedID).split(/,#/).forEach((color: string, i: number) => setColor[i](colorToHex(color))); } } }); @@ -100,62 +121,26 @@ export default function ({ value={colorwayName} onChange={setColorwayName} /> - - Colors: - -
- {presetColorArray.includes("primary") && - Primary} - color={parseInt(primaryColor, 16)} - onChange={(color: number) => { - let hexColor = color.toString(16); - while (hexColor.length < 6) { - hexColor = "0" + hexColor; - } - setPrimaryColor(hexColor); - }} - {...colorPickerProps} - />} - {presetColorArray.includes("secondary") && - Secondary} - color={parseInt(secondaryColor, 16)} - onChange={(color: number) => { - let hexColor = color.toString(16); - while (hexColor.length < 6) { - hexColor = "0" + hexColor; - } - setSecondaryColor(hexColor); - }} - {...colorPickerProps} - />} - {presetColorArray.includes("tertiary") && - Tertiary} - color={parseInt(tertiaryColor, 16)} - onChange={(color: number) => { - let hexColor = color.toString(16); - while (hexColor.length < 6) { - hexColor = "0" + hexColor; - } - setTertiaryColor(hexColor); - }} - {...colorPickerProps} - />} - {presetColorArray.includes("accent") && - Accent} - color={parseInt(accentColor, 16)} - onChange={(color: number) => { - let hexColor = color.toString(16); - while (hexColor.length < 6) { - hexColor = "0" + hexColor; - } - setAccentColor(hexColor); - }} - {...colorPickerProps} - />} +
+ + Colors: + +
+ {presetColorArray.map(presetColor => { + return {colorProps[presetColor].name}} + color={parseInt(colorProps[presetColor].get, 16)} + onChange={(color: number) => { + let hexColor = color.toString(16); + while (hexColor.length < 6) { + hexColor = "0" + hexColor; + } + colorProps[presetColor].set(hexColor); + }} + {...colorPickerProps} + />; + })} +
{ function setAllColors({ accent, primary, secondary, tertiary }: { accent: string, primary: string, secondary: string, tertiary: string; }) { setAccentColor(accent.split("#")[1]); @@ -324,60 +322,16 @@ export default function ({ style={{ marginLeft: 8 }} color={Button.Colors.PRIMARY} size={Button.Sizes.MEDIUM} - look={Button.Looks.FILLED} - onClick={() => { - let colorwayID: string; - function setColorwayID(e: string) { - colorwayID = e; - } - openModal(props => { - return ( - - - Colorway ID: - setColorwayID(e.currentTarget.value)} /> - - - - - - - ); - }); - }} + look={Button.Looks.OUTLINED} + onClick={() => openModal((props: any) => { + const setColor = [ + setAccentColor, + setPrimaryColor, + setSecondaryColor, + setTertiaryColor + ]; + hexToString(colorwayID).split(/,#/).forEach((color: string, i: number) => setColor[i](colorToHex(color))); + }} />)} > Enter Colorway ID @@ -385,7 +339,7 @@ export default function ({ style={{ marginLeft: 8 }} color={Button.Colors.PRIMARY} size={Button.Sizes.MEDIUM} - look={Button.Looks.FILLED} + look={Button.Looks.OUTLINED} onClick={() => { modalProps.onClose(); }} diff --git a/src/userplugins/DiscordColorways/components/Divider.tsx b/src/userplugins/DiscordColorways/components/Divider.tsx deleted file mode 100644 index ec27d0ac..00000000 --- a/src/userplugins/DiscordColorways/components/Divider.tsx +++ /dev/null @@ -1,15 +0,0 @@ -/* - * Vencord, a Discord client mod - * Copyright (c) 2024 Vendicated and contributors - * SPDX-License-Identifier: GPL-3.0-or-later - */ - -export default () => { - return
; -}; diff --git a/src/userplugins/DiscordColorways/components/InfoModal.tsx b/src/userplugins/DiscordColorways/components/InfoModal.tsx index eb5fac1c..5544ddef 100644 --- a/src/userplugins/DiscordColorways/components/InfoModal.tsx +++ b/src/userplugins/DiscordColorways/components/InfoModal.tsx @@ -140,7 +140,7 @@ export default function ({ style={{ marginLeft: 8 }} color={Button.Colors.PRIMARY} size={Button.Sizes.MEDIUM} - look={Button.Looks.FILLED} + look={Button.Looks.OUTLINED} onClick={() => { const stringToHex = (str: string) => { let hex = ""; @@ -169,7 +169,7 @@ export default function ({ style={{ marginLeft: 8 }} color={Button.Colors.PRIMARY} size={Button.Sizes.MEDIUM} - look={Button.Looks.FILLED} + look={Button.Looks.OUTLINED} onClick={() => { Clipboard.copy(colorwayProps["dc-import"]); Toasts.show({ @@ -185,7 +185,7 @@ export default function ({ style={{ marginLeft: 8 }} color={Button.Colors.PRIMARY} size={Button.Sizes.MEDIUM} - look={Button.Looks.FILLED} + look={Button.Looks.OUTLINED} onClick={async () => { const customColorways = await DataStore.get("customColorways"); const customColorwaysArray: Colorway[] = []; @@ -211,7 +211,7 @@ export default function ({ style={{ marginLeft: 8 }} color={Button.Colors.PRIMARY} size={Button.Sizes.MEDIUM} - look={Button.Looks.FILLED} + look={Button.Looks.OUTLINED} onClick={async () => { const colorwaySourceFiles = await DataStore.get( "colorwaySourceFiles" @@ -251,7 +251,7 @@ export default function ({ style={{ marginLeft: 8 }} color={Button.Colors.PRIMARY} size={Button.Sizes.MEDIUM} - look={Button.Looks.FILLED} + look={Button.Looks.OUTLINED} onClick={() => { modalProps.onClose(); }} diff --git a/src/userplugins/DiscordColorways/components/InputColorwayIdModal.tsx b/src/userplugins/DiscordColorways/components/InputColorwayIdModal.tsx new file mode 100644 index 00000000..6100529c --- /dev/null +++ b/src/userplugins/DiscordColorways/components/InputColorwayIdModal.tsx @@ -0,0 +1,49 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import { ModalContent, ModalFooter, ModalProps, ModalRoot } from "@utils/modal"; +import { Button, Forms, TextInput, useState } from "@webpack/common"; + +import { hexToString } from "../utils"; + +export default function ({ modalProps, onColorwayId }: { modalProps: ModalProps, onColorwayId: (colorwayID: string) => void; }) { + const [colorwayID, setColorwayID] = useState(""); + return + + Colorway ID: + setColorwayID(e.currentTarget.value)} /> + + + + + + ; +} diff --git a/src/userplugins/DiscordColorways/components/SelectorModal.tsx b/src/userplugins/DiscordColorways/components/Selector.tsx similarity index 65% rename from src/userplugins/DiscordColorways/components/SelectorModal.tsx rename to src/userplugins/DiscordColorways/components/Selector.tsx index 2c1e42d0..66df1138 100644 --- a/src/userplugins/DiscordColorways/components/SelectorModal.tsx +++ b/src/userplugins/DiscordColorways/components/Selector.tsx @@ -7,6 +7,8 @@ /* eslint-disable arrow-parens */ import * as DataStore from "@api/DataStore"; +import { Flex } from "@components/Flex"; +import { SettingsTab } from "@components/VencordSettings/shared"; import { ModalContent, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal"; import { findByPropsLazy } from "@webpack"; import { @@ -23,10 +25,11 @@ import { useEffect, useState, } from "@webpack/common"; +import { ReactNode } from "react"; import { ColorwayCSS } from ".."; import { defaultColorwaySource, fallbackColorways } from "../constants"; -import { generateCss } from "../css"; +import { generateCss, gradientBase } from "../css"; import { Colorway } from "../types"; import { colorToHex } from "../utils"; import ColorPickerModal from "./ColorPicker"; @@ -36,10 +39,46 @@ import ColorwayInfoModal from "./InfoModal"; const { SelectionCircle } = findByPropsLazy("SelectionCircle"); +function SelectorContainer({ children, isSettings, modalProps }: { children: ReactNode, isSettings?: boolean, modalProps: ModalProps; }) { + if (!isSettings) { + return + {children} + ; + } else { + return +
+ {children} +
+ ; + } +} + +function SelectorHeader({ children, isSettings }: { children: ReactNode, isSettings?: boolean; }) { + if (!isSettings) { + return + {children} + ; + } else { + return + {children} + ; + } +} + +function SelectorContent({ children, isSettings }: { children: ReactNode, isSettings?: boolean; }) { + if (!isSettings) { + return {children}; + } else { + return <>{children}; + } +} + export default function ({ modalProps, + isSettings }: { - modalProps: ModalProps; + modalProps: ModalProps, + isSettings?: boolean; }): JSX.Element | any { const [currentColorway, setCurrentColorway] = useState(""); const [colorways, setColorways] = useState([]); @@ -179,8 +218,8 @@ export default function ({ } return ( - - + + { - setVisibility(value); - }} isSelected={value => visibility === value} serialize={String} /> - [searchColorways, setSearchString].forEach(t => t(e))} - /> - - {({ onMouseEnter, onMouseLeave }) => { - return setShowReloadMenu(false)} - renderPopout={() => ReloadPopout(() => setShowReloadMenu(false))} - > - {(_, { isShown }) => ( - - )} - ; - }} - - - {({ onMouseEnter, onMouseLeave }) => } - - - {({ onMouseEnter, onMouseLeave }) => } - - -
-
- {visibleColorwayArray.length === 0 && - - No colorways... - - } - {visibleColorwayArray.map((color, ind) => { - var colors: Array = color.colors || [ - "accent", - "primary", - "secondary", - "tertiary", - ]; - return ( - - {({ onMouseEnter, onMouseLeave }) => { - return ( -
-
{ - openModal((props) => ( - - )); - }} - > -
- - - -
-
-
-
- - - - - - -
-
-
{ - const [ - onDemandWays, - onDemandWaysTintedText, - onDemandWaysDiscordSaturation - ] = await DataStore.getMany([ - "onDemandWays", - "onDemandWaysTintedText", - "onDemandWaysDiscordSaturation" - ]); - if (currentColorway === color.name) { - DataStore.set("actveColorwayID", null); - DataStore.set("actveColorway", null); - ColorwayCSS.remove(); - } else { - DataStore.set("activeColorwayColors", color.colors); - DataStore.set("actveColorwayID", color.name); - if (onDemandWays) { - const demandedColorway = generateCss( - colorToHex(color.primary), - colorToHex(color.secondary), - colorToHex(color.tertiary), - colorToHex(color.accent), - onDemandWaysTintedText, - onDemandWaysDiscordSaturation - ); - DataStore.set("actveColorway", demandedColorway); - ColorwayCSS.set(demandedColorway); - } else { - DataStore.set("actveColorway", color["dc-import"]); - ColorwayCSS.set(color["dc-import"]); - } - } - setCurrentColorway(await DataStore.get("actveColorwayID") as string); - }} - > - {colors.map((colorItm) => { - return ( -
- ); - })} -
- {currentColorway === color.name && } -
- ); - }} - - ); - })} -
-
- - ); -} diff --git a/src/userplugins/DiscordColorways/components/SettingsTabs/SettingsPage.tsx b/src/userplugins/DiscordColorways/components/SettingsTabs/SettingsPage.tsx index c6ef192a..73fadadd 100644 --- a/src/userplugins/DiscordColorways/components/SettingsTabs/SettingsPage.tsx +++ b/src/userplugins/DiscordColorways/components/SettingsTabs/SettingsPage.tsx @@ -27,7 +27,6 @@ import { versionData } from "userplugins/discordColorways"; import { defaultColorwaySource, fallbackColorways, knownColorwaySources } from "../../constants"; import { Colorway } from "../../types"; -import Divider from "../Divider"; import { CloseIcon } from "../Icons"; export default function () { @@ -165,7 +164,8 @@ export default function () { &&
)} - + Quick Switch (isCollapsed); + function ThemePreview({ + accent, + primary, + secondary, + tertiary, + isModal, + modalProps + }: { + accent: string, + primary: string, + secondary: string, + tertiary: string, + isModal?: boolean, + modalProps?: ModalProps; + }) { + return ( +
+
+
+
+
+
e.currentTarget.style.background = accent} + onMouseLeave={e => e.currentTarget.style.background = `var(--bg-guild-button, ${primary})`} + onClick={() => { + if (isModal) { + modalProps?.onClose(); + } else { + openModal((props: ModalProps) => + + + ); + } + }} + > + {isModal ? : } +
+
+
+
+
+
+
e.currentTarget.style.background = accent} + onMouseLeave={e => e.currentTarget.style.background = `var(--bg-guild-button, ${primary})`} + /> +
+
+
e.currentTarget.style.background = accent} + onMouseLeave={e => e.currentTarget.style.background = `var(--bg-guild-button, ${primary})`} + /> +
+
+
+
+
+
+ + Preview + +
+
+
+
+
+
+
+
+
+ ); + } return ( -
+
setCollapsed(!collapsed)} @@ -80,143 +203,3 @@ export default function ({
); } - -function ThemePreview({ - accent, - primary, - secondary, - tertiary, - previewCSS -}: { - accent: string, - primary: string, - secondary: string, - tertiary: string, - previewCSS?: string; -}) { - const [isFullscreen, setIsFullscreen] = useState(false); - return ( -
- -
-
-
-
-
-
e.currentTarget.style.backgroundColor = accent} - onMouseLeave={e => e.currentTarget.style.backgroundColor = primary} - onClick={e => { - if (!document.fullscreenElement) { - e.currentTarget - .parentElement - ?.parentElement - ?.parentElement - ?.parentElement - ?.requestFullscreen(); - } else { - document.exitFullscreen(); - } - setIsFullscreen(!isFullscreen); - }} - > - {isFullscreen ? : } -
-
-
-
-
-
-
{ e.currentTarget.style.backgroundColor = accent; }} - onMouseLeave={e => { e.currentTarget.style.backgroundColor = primary; }} - /> -
-
-
{ e.currentTarget.style.backgroundColor = accent; }} - onMouseLeave={e => { e.currentTarget.style.backgroundColor = primary; }} - /> -
-
-
-
-
-
- - Preview - -
-
-
-
-
-
-
-
-
-
- ); -} diff --git a/src/userplugins/DiscordColorways/constants.ts b/src/userplugins/DiscordColorways/constants.ts index 81cda963..2c7088b4 100644 --- a/src/userplugins/DiscordColorways/constants.ts +++ b/src/userplugins/DiscordColorways/constants.ts @@ -315,3 +315,10 @@ export const knownThemeVars = { } } }; + +export const mainColors = [ + { name: "accent", title: "Accent", var: "--brand-experiment" }, + { name: "primary", title: "Primary", var: "--background-primary" }, + { name: "secondary", title: "Secondary", var: "--background-secondary" }, + { name: "tertiary", title: "Tertiary", var: "--background-tertiary" } +]; diff --git a/src/userplugins/DiscordColorways/css.ts b/src/userplugins/DiscordColorways/css.ts index c21e6e13..a00b7117 100644 --- a/src/userplugins/DiscordColorways/css.ts +++ b/src/userplugins/DiscordColorways/css.ts @@ -6,7 +6,7 @@ import { Plugins } from "Vencord"; -import { colorToHex, HexToHSL } from "./utils"; +import { HexToHSL } from "./utils"; export const colorVariables: string[] = [ "brand-100", @@ -290,9 +290,73 @@ const BrandLightDiffs = { 900: -61.6 }; -function gradientBase(accentColor?: string, discordSaturation = false) { - return `@import url(//dablulite.github.io/css-snippets/NoLightInDark/import.css); -@import url(//dablulite.github.io/css-snippets/NitroThemesFix/import.css); +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-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; +} +.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; +}`; + + +export function gradientBase(accentColor?: string, discordSaturation = false) { + return `@import url(//dablulite.github.io/css-snippets/NitroThemesFix/import.css); .theme-dark { --bg-overlay-color: 0 0 0; --bg-overlay-color-inverse: 255 255 255; @@ -401,14 +465,11 @@ function gradientBase(accentColor?: string, discordSaturation = false) { --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(--custom-theme-background) 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(--custom-theme-background) 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(--custom-theme-background) 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(--custom-theme-background) 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(--custom-theme-background) fixed 0 0/cover; +}`; } export function generateCss(primaryColor: string, secondaryColor: string, tertiaryColor: string, accentColor: string, tintedText: boolean, discordSaturation: boolean) { - primaryColor = colorToHex(primaryColor); - secondaryColor = colorToHex(secondaryColor); - tertiaryColor = colorToHex(tertiaryColor); - accentColor = colorToHex(accentColor); const colorwayCss = `/*Automatically Generated - Colorway Creator V${(Plugins.plugins.DiscordColorways as any).creatorVersion}*/ :root:root { --brand-100-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${discordSaturation ? Math.round(((HexToHSL("#" + accentColor)[1] / 100) * (100 + BrandSatDiffs[100])) * 10) / 10 : HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[100]) * 10) / 10, 0)}; @@ -446,7 +507,9 @@ export function generateCss(primaryColor: string, secondaryColor: string, tertia --primary-600-hsl: ${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + primaryColor)[1]}%) ${HexToHSL("#" + primaryColor)[2]}%; --primary-560-hsl: ${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + primaryColor)[1]}%) ${Math.min(HexToHSL("#" + primaryColor)[2] + 3.6, 100)}%; --primary-530-hsl: ${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${discordSaturation ? Math.round(((HexToHSL("#" + primaryColor)[1] / 100) * (100 + PrimarySatDiffs[530])) * 10) / 10 : HexToHSL("#" + primaryColor)[1]}%) ${Math.min(HexToHSL("#" + primaryColor)[2] + (3.6 * 2), 100)}%; - --primary-500-hsl: ${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${discordSaturation ? Math.round(((HexToHSL("#" + primaryColor)[1] / 100) * (100 + PrimarySatDiffs[500])) * 10) / 10 : HexToHSL("#" + primaryColor)[1]}%) ${Math.min(HexToHSL("#" + primaryColor)[2] + (3.6 * 3), 100)}%;${tintedText ? `\n --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%; + --primary-500-hsl: ${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${discordSaturation ? Math.round(((HexToHSL("#" + primaryColor)[1] / 100) * (100 + PrimarySatDiffs[500])) * 10) / 10 : HexToHSL("#" + primaryColor)[1]}%) ${Math.min(HexToHSL("#" + primaryColor)[2] + (3.6 * 3), 100)}%; + --interactive-muted: hsl(${HexToHSL("#" + primaryColor)[0]} 0% ${Math.min(HexToHSL("#" + primaryColor)[2] + (3.6 * 3), 100)}%); + ${tintedText ? `--primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%; --primary-430: ${HexToHSL("#" + secondaryColor)[0] === 0 ? "gray" : ((HexToHSL("#" + secondaryColor)[2] < 80) ? "hsl(" + HexToHSL("#" + secondaryColor)[0] + `, calc(var(--saturation-factor, 1)*${discordSaturation ? Math.round(((HexToHSL("#" + primaryColor)[1] / 100) * (100 + PrimarySatDiffs[430])) * 10) / 10 : HexToHSL("#" + primaryColor)[1]}%), 90%)` : "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 20%)")}; --primary-400: ${HexToHSL("#" + secondaryColor)[0] === 0 ? "gray" : ((HexToHSL("#" + secondaryColor)[2] < 80) ? "hsl(" + HexToHSL("#" + secondaryColor)[0] + `, calc(var(--saturation-factor, 1)*${discordSaturation ? Math.round(((HexToHSL("#" + primaryColor)[1] / 100) * (100 + PrimarySatDiffs[400])) * 10) / 10 : HexToHSL("#" + primaryColor)[1]}%), 90%)` : "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 20%)")}; --primary-360: ${HexToHSL("#" + secondaryColor)[0] === 0 ? "gray" : ((HexToHSL("#" + secondaryColor)[2] < 80) ? "hsl(" + HexToHSL("#" + secondaryColor)[0] + `, calc(var(--saturation-factor, 1)*${discordSaturation ? Math.round(((HexToHSL("#" + primaryColor)[1] / 100) * (100 + PrimarySatDiffs[360])) * 10) / 10 : HexToHSL("#" + primaryColor)[1]}%), 90%)` : "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 20%)")};` : ""} @@ -635,15 +698,22 @@ export function getPreset(primaryColor?: string, secondaryColor?: string, tertia } function gradientType1(discordSaturation = false) { - return `${gradientBase(accentColor, discordSaturation)} - --custom-theme-background: linear-gradient(239.16deg, #${primaryColor} 10.39%, #${secondaryColor} 26.87%, #${tertiaryColor} 48.31%, hsl(${HexToHSL("#" + secondaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + secondaryColor)[1]}%) ${Math.min(HexToHSL("#" + secondaryColor)[2] + 3.6, 100)}%) 64.98%, #${primaryColor} 92.5%); -}`; + return { + full: `${gradientBase(accentColor, discordSaturation)} + :root:root { + --custom-theme-background: linear-gradient(239.16deg, #${primaryColor} 10.39%, #${secondaryColor} 26.87%, #${tertiaryColor} 48.31%, hsl(${HexToHSL("#" + secondaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + secondaryColor)[1]}%) ${Math.min(HexToHSL("#" + secondaryColor)[2] + 3.6, 100)}%) 64.98%, #${primaryColor} 92.5%); + }`, + base: `239.16deg, #${primaryColor} 10.39%, #${secondaryColor} 26.87%, #${tertiaryColor} 48.31%, hsl(${HexToHSL("#" + secondaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + secondaryColor)[1]}%) ${Math.min(HexToHSL("#" + secondaryColor)[2] + 3.6, 100)}%) 64.98%, #${primaryColor} 92.5%` + }; } function gradientType2(discordSaturation = false) { - return `${gradientBase(accentColor, discordSaturation)} - --custom-theme-background: linear-gradient(48.17deg, #${primaryColor} 11.21%, #${secondaryColor} 61.92%); -}`; + return { + full: `${gradientBase(accentColor, discordSaturation)} + :root:root { + --custom-theme-background: linear-gradient(48.17deg, #${primaryColor} 11.21%, #${secondaryColor} 61.92%); + }`, base: `48.17deg, #${primaryColor} 11.21%, #${secondaryColor} 61.92%` + }; } function hueRotation(discordSaturation = false) { diff --git a/src/userplugins/DiscordColorways/index.tsx b/src/userplugins/DiscordColorways/index.tsx index 189f20d2..5567cbe5 100644 --- a/src/userplugins/DiscordColorways/index.tsx +++ b/src/userplugins/DiscordColorways/index.tsx @@ -19,10 +19,9 @@ import { import ColorPickerModal from "./components/ColorPicker"; import ColorwaysButton from "./components/ColorwaysButton"; import CreatorModal from "./components/CreatorModal"; -import SelectorModal from "./components/SelectorModal"; +import Selector from "./components/Selector"; import ManageColorwaysPage from "./components/SettingsTabs/ManageColorwaysPage"; import OnDemandWaysPage from "./components/SettingsTabs/OnDemandPage"; -import SelectorPage from "./components/SettingsTabs/SelectorPage"; import SettingsPage from "./components/SettingsTabs/SettingsPage"; import Spinner from "./components/Spinner"; import { defaultColorwaySource } from "./constants"; @@ -95,8 +94,8 @@ export const ColorwayCSS = { }; export const versionData = { - pluginVersion: "5.6.2", - creatorVersion: "1.18.1", + pluginVersion: "5.6.4.2", + creatorVersion: "1.18.3", }; export default definePlugin({ @@ -111,7 +110,7 @@ export default definePlugin({ pluginVersion: versionData.pluginVersion, creatorVersion: versionData.creatorVersion, toolboxActions: { - "Change Colorway": () => openModal(props => ), + "Change Colorway": () => openModal(props => ), "Open Colorway Creator": () => openModal(props => ), "Open Color Stealer": () => openModal(props => ), "Open Settings": () => SettingsRouter.open("ColorwaysSettings"), @@ -152,12 +151,12 @@ export default definePlugin({ } } ], + set ColorPicker(e) { ColorPicker = e; }, makeSettingsCategories(SectionTypes: Record) { - console.log(SectionTypes); return [ { section: SectionTypes.HEADER, @@ -167,7 +166,7 @@ export default definePlugin({ { section: "ColorwaysSelector", label: "Colorways", - element: SelectorPage, + element: () => new Promise(() => true), transitionState: 1 }} />, className: "dc-colorway-selector" }, { @@ -202,22 +201,20 @@ export default definePlugin({ enableStyle(style); ColorwayCSS.set((await DataStore.get("actveColorway")) || ""); - addAccessory("colorways-btn", props => { - if (String(props.message.content).match(/colorway:[0-9a-f]{0,71}/)) - return ; - return null; - }); + addAccessory("colorways-btn", props => String(props.message.content).match(/colorway:[0-9a-f]{0,100}/) ? : null); }, stop() { removeServerListElement(ServerListRenderPosition.In, this.ColorwaysButton); - disableStyle(style); ColorwayCSS.remove(); removeAccessory("colorways-btn"); diff --git a/src/userplugins/DiscordColorways/style.css b/src/userplugins/DiscordColorways/style.css index 3245294c..e2ab8220 100644 --- a/src/userplugins/DiscordColorways/style.css +++ b/src/userplugins/DiscordColorways/style.css @@ -47,85 +47,26 @@ border-radius: 50%; width: 56px; height: 56px; - box-shadow: 0 0 0 1px var(--interactive-normal); + box-shadow: 0 0 0 1.5px var(--interactive-normal); box-sizing: border-box; } -.discordColorway::before { - content: ""; - position: absolute; - top: -2px; - left: -2px; - border-radius: 50%; - width: 64px; - height: 64px; - pointer-events: none; - transition: .15s; -} - -.discordColorway.active::before { - box-shadow: inset 0 0 0 2px var(--brand-500), inset 0 0 0 4px var(--background-primary); -} - .discordColorwayPreviewColor { - width: calc(50% - 2px); - height: calc(50% - 2px); -} - -.discordColorwayPreviewColor:first-child { - margin-top: 2px; - margin-left: 2px; - border-top-left-radius: 52px; -} - -.discordColorwayPreviewColor:nth-child(2) { - margin-top: 2px; - margin-right: 2px; - border-top-right-radius: 52px; -} - -.discordColorwayPreviewColor:nth-child(3) { - margin-bottom: 2px; - margin-left: 2px; - border-bottom-left-radius: 52px; -} - -.discordColorwayPreviewColor:nth-child(4) { - margin-bottom: 2px; - margin-right: 2px; - border-bottom-right-radius: 52px; + width: 50%; + height: 50%; } .discordColorwayPreviewColorContainer:not(:has(>.discordColorwayPreviewColor:nth-child(2)))>.discordColorwayPreviewColor { - height: calc(100% - 4px); - width: calc(100% - 4px); - margin: 2px; - border-radius: 52px; + height: 100%; + width: 100%; } .discordColorwayPreviewColorContainer:not(:has(>.discordColorwayPreviewColor:nth-child(3)))>.discordColorwayPreviewColor { - height: calc(100% - 4px); - margin-top: 2px; - margin-bottom: 2px; -} - -.discordColorwayPreviewColorContainer:not(:has(>.discordColorwayPreviewColor:nth-child(3)))>.discordColorwayPreviewColor:nth-child(1) { - border-top-left-radius: 52px; - border-bottom-left-radius: 52px; - margin-left: 2px; -} - -.discordColorwayPreviewColorContainer:not(:has(>.discordColorwayPreviewColor:nth-child(3)))>.discordColorwayPreviewColor:nth-child(2) { - border-top-right-radius: 52px; - border-bottom-right-radius: 52px; - margin-right: 2px; + height: 100%; } .discordColorwayPreviewColorContainer:not(:has(>.discordColorwayPreviewColor:nth-child(4)))>.discordColorwayPreviewColor:nth-child(3) { - width: calc(100% - 4px); - margin-right: 2px; - border-bottom-right-radius: 52px; - border-bottom-left-radius: 52px; + width: 100%; } .ColorwaySelectorWrapper { @@ -138,6 +79,10 @@ scrollbar-width: none !important; } +.ColorwaySelectorWrapper::-webkit-scrollbar { + width: 0; +} + .colorwaySelectorModal { width: 100% !important; min-width: 596px !important; @@ -163,42 +108,23 @@ width: 72px; } -.colorwayCheckIconContainer { - height: 20px; - width: 20px; - background-color: var(--brand-500); - position: absolute; - top: 0; - right: 0; - border-radius: 50%; - opacity: 0; - z-index: +1; -} - -.discordColorway.active .colorwayCheckIconContainer { - opacity: 1; -} - -.colorwayCheckIcon { - height: 20px; - width: 20px; - color: var(--white-500); -} - .colorwayInfoIconContainer { - height: 20px; - width: 20px; + height: 22px; + width: 22px; background-color: var(--brand-500); position: absolute; - top: 0; - left: 0; + top: -1px; + left: -1px; border-radius: 50%; opacity: 0; z-index: +1; + color: var(--white-500); + padding: 1px; + box-sizing: border-box; } .colorwayInfoIconContainer:hover { - background-color: var(--brand-700); + background-color: var(--brand-experiment-560); } .discordColorway:hover .colorwayInfoIconContainer { @@ -206,13 +132,6 @@ transition: .15s; } -.colorwayInfoIcon { - height: 20px; - width: 20px; - color: var(--white-500); - padding: 2px; -} - .colorwayCreator-swatch { display: flex; align-items: center; @@ -240,9 +159,7 @@ gap: 8px; position: relative; border-radius: 4px; - background-color: var(--background-secondary); box-sizing: border-box; - padding: 10px; } .colorwayCreator-colorInput { @@ -466,8 +383,8 @@ .colorwaysPreview-modal { max-width: unset !important; max-height: unset !important; - width: fit-content; - height: fit-content; + width: 90vw; + height: 90vh; } .colorwaysPreview-titlebar { @@ -652,7 +569,6 @@ width: 100%; height: 32px; flex: 1 0 auto; - transition: background-color .1s linear; font-family: var(--font-display); font-weight: 500; padding: 12px 16px; @@ -1001,13 +917,28 @@ box-sizing: border-box; min-height: 44px; align-items: center; - background-color: var(--background-secondary); +} + +.theme-dark .colorwaysSettings-colorwaySource { + background: var(--bg-overlay-3,var(--background-secondary)); +} + +.theme-light .colorwaysSettings-colorwaySource { + background: var(--bg-overlay-2,var(--background-secondary)); } .colorwaysSettings-colorwaySource:hover { background-color: var(--background-secondary-alt); } +.theme-dark .colorwaysSettings-colorwaySource:hover { + background: var(--bg-overlay-1,var(--background-secondary-alt)); +} + +.theme-light .colorwaysSettings-colorwaySource:hover { + background: var(--bg-overlay-3,var(--background-secondary-alt)); +} + .colorwaysSettings-modalRoot { min-width: 520px; } @@ -1204,3 +1135,11 @@ opacity: 0; user-select: none; } + +.dc-warning-card { + padding: 1em; + margin-bottom: 1em; + background-color: var(--info-warning-background); + border-color: var(--info-warning-foreground); + color: var(--info-warning-text); +} diff --git a/src/userplugins/DiscordColorways/types.ts b/src/userplugins/DiscordColorways/types.ts index 15fa776d..cbf08fa8 100644 --- a/src/userplugins/DiscordColorways/types.ts +++ b/src/userplugins/DiscordColorways/types.ts @@ -5,6 +5,7 @@ */ export interface Colorway { + [key: string]: any, name: string, "dc-import": string, accent: string, @@ -17,7 +18,8 @@ export interface Colorway { colors?: string[], isGradient?: boolean, sourceUrl?: string, - sourceName?: string; + sourceName?: string, + linearGradient?: string; } export interface ColorPickerProps {