Migrate Off Forms

src/api/Notifications/notificationLog.tsx

@@ -19,11 +19,14 @@
 import * as DataStore from "@api/DataStore";
 import { Settings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
+import { Button } from "@components/Button";
 import { Flex } from "@components/Flex";
+import { Heading } from "@components/Heading";
+import { Paragraph } from "@components/Paragraph";
 import { openNotificationSettingsModal } from "@components/settings/tabs/vencord/NotificationSettings";
 import { closeModal, ModalCloseButton, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
-import { Alerts, Button, Forms, ListScrollerThin, React, Text, Timestamp, useEffect, useReducer, useState } from "@webpack/common";
+import { Alerts, ListScrollerThin, React, Timestamp, useEffect, useReducer, useState } from "@webpack/common";
 import { nanoid } from "nanoid";
 import type { DispatchWithoutAction } from "react";
 
@@ -132,9 +135,9 @@ export function NotificationLog({ log, pending }: { log: PersistentNotificationD
         return (
             <div className={cl("container")}>
                 <div className={cl("empty")} />
-                <Forms.FormText style={{ textAlign: "center" }}>
+                <Paragraph style={{ textAlign: "center" }}>
                     No notifications yet
-                </Forms.FormText>
+                </Paragraph>
             </div>
         );
 
@@ -156,7 +159,7 @@ function LogModal({ modalProps, close }: { modalProps: ModalProps; close(): void
     return (
         <ModalRoot {...modalProps} size={ModalSize.LARGE} className={cl("modal")}>
             <ModalHeader>
-                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Notification Log</Text>
+                <Heading style={{ flexGrow: 1 }}>Notification Log</Heading>
                 <ModalCloseButton onClick={close} />
             </ModalHeader>
 
@@ -172,7 +175,7 @@ function LogModal({ modalProps, close }: { modalProps: ModalProps; close(): void
 
                     <Button
                         disabled={log.length === 0}
-                        color={Button.Colors.RED}
+                        color="dangerPrimary"
                         onClick={() => {
                             Alerts.show({
                                 title: "Are you sure?",

src/components/settings/AddonCard.tsx

@@ -19,9 +19,11 @@
 import "./AddonCard.css";
 
 import { classNameFactory } from "@api/Styles";
+import { BaseText } from "@components/BaseText";
 import { AddonBadge } from "@components/settings/PluginBadge";
+import { Span } from "@components/Span";
 import { Switch } from "@components/Switch";
-import { Text, useRef } from "@webpack/common";
+import { useRef } from "@webpack/common";
 import type { MouseEventHandler, ReactNode } from "react";
 
 const cl = classNameFactory("vc-addon-");
@@ -53,7 +55,7 @@ export function AddonCard({ disabled, isNew, name, infoButton, footer, author, e
         >
             <div className={cl("header")}>
                 <div className={cl("name-author")}>
-                    <Text variant="text-md/bold" className={cl("name")}>
+                    <BaseText weight="bold" className={cl("name")}>
                         <div ref={titleContainerRef} className={cl("title-container")}>
                             <div
                                 ref={titleRef}
@@ -70,12 +72,12 @@ export function AddonCard({ disabled, isNew, name, infoButton, footer, author, e
                             </div>
                         </div>
                         {isNew && <AddonBadge text="NEW" color="#ED4245" />}
-                    </Text>
+                    </BaseText>
 
                     {!!author && (
-                        <Text variant="text-md/normal" className={cl("author")}>
+                        <BaseText className={cl("author")}>
                             {author}
-                        </Text>
+                        </BaseText>
                     )}
                 </div>
 
@@ -88,7 +90,7 @@ export function AddonCard({ disabled, isNew, name, infoButton, footer, author, e
                 />
             </div>
 
-            <Text className={cl("note")} variant="text-sm/normal">{description}</Text>
+            <Span className={cl("note")}>{description}</Span>
 
             {footer}
         </div>

src/components/settings/DonateButton.tsx

@@ -16,20 +16,18 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Button, ButtonVariant } from "@components/Button";
 import { Heart } from "@components/Heart";
-import { ButtonProps } from "@vencord/discord-types";
-import { Button } from "@webpack/common";
 
 export default function DonateButton({
-    look = Button.Looks.LINK,
-    color = Button.Colors.TRANSPARENT,
+    variant = "secondary",
     ...props
-}: Partial<ButtonProps>) {
+}) {
     return (
         <Button
             {...props}
-            look={look}
-            color={color}
+            type="button"
+            variant={variant as ButtonVariant}
             onClick={() => VencordNative.native.openExternal("https://github.com/sponsors/Vendicated")}
             className="vc-donate-button"
         >

src/components/settings/SpecialCard.tsx

@@ -21,7 +21,9 @@ import "./SpecialCard.css";
 import { classNameFactory } from "@api/Styles";
 import { Card } from "@components/Card";
 import { Divider } from "@components/Divider";
-import { Clickable, Forms } from "@webpack/common";
+import { Heading } from "@components/Heading";
+import { Paragraph } from "@components/Paragraph";
+import { Clickable } from "@webpack/common";
 import type { PropsWithChildren } from "react";
 
 const cl = classNameFactory("vc-special-");
@@ -47,9 +49,9 @@ export function SpecialCard({ title, subtitle, description, cardImage, backgroun
         <Card className={cl("card", "card-special")} style={cardStyle}>
             <div className={cl("card-flex")}>
                 <div className={cl("card-flex-main")}>
-                    <Forms.FormTitle className={cl("title")} tag="h5">{title}</Forms.FormTitle>
-                    <Forms.FormText className={cl("subtitle")}>{subtitle}</Forms.FormText>
-                    <Forms.FormText className={cl("text")}>{description}</Forms.FormText>
+                    <Heading className={cl("title")} tag="h5">{title}</Heading>
+                    <Paragraph className={cl("subtitle")}>{subtitle}</Paragraph>
+                    <Paragraph className={cl("text")}>{description}</Paragraph>
 
                     {children}
                 </div>
@@ -68,9 +70,9 @@ export function SpecialCard({ title, subtitle, description, cardImage, backgroun
                 <>
                     <Divider className={cl("seperator")} />
                     <Clickable onClick={onClick} className={cl("hyperlink")}>
-                        <Forms.FormText className={cl("hyperlink-text")}>
+                        <Paragraph className={cl("hyperlink-text")}>
                             {buttonTitle}
-                        </Forms.FormText>
+                        </Paragraph>
                     </Clickable>
                 </>
             )}

src/components/settings/tabs/patchHelper/FullPatchInput.tsx

@@ -4,9 +4,10 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { Paragraph } from "@components/Paragraph";
 import { Margins } from "@utils/margins";
 import { Patch, ReplaceFn } from "@utils/types";
-import { Forms, TextArea, useEffect, useRef, useState } from "@webpack/common";
+import { TextArea, useEffect, useRef, useState } from "@webpack/common";
 
 export interface FullPatchInputProps {
     setFind(v: string): void;
@@ -68,16 +69,16 @@ export function FullPatchInput({ setFind, setParsedFind, setMatch, setReplacemen
 
     return (
         <>
-            <Forms.FormText className={Margins.bottom8}>
+            <Paragraph className={Margins.bottom8}>
                 Paste your full JSON patch here to fill out the fields
-            </Forms.FormText>
+            </Paragraph>
             <TextArea
                 inputRef={textAreaRef}
                 value={patch}
                 onChange={setPatch}
                 onBlur={update}
             />
-            {error !== "" && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
+            {error !== "" && <Paragraph style={{ color: "var(--text-danger)" }}>{error}</Paragraph>}
         </>
     );
 }

src/components/settings/tabs/patchHelper/PatchPreview.tsx

@@ -4,11 +4,14 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { Button } from "@components/Button";
+import { Heading } from "@components/Heading";
+import { Paragraph } from "@components/Paragraph";
 import { Margins } from "@utils/margins";
 import { canonicalizeMatch, canonicalizeReplace } from "@utils/patches";
 import { makeCodeblock } from "@utils/text";
 import { ReplaceFn } from "@utils/types";
-import { Button, Forms, Parser, useMemo, useState } from "@webpack/common";
+import { Parser, useMemo, useState } from "@webpack/common";
 import type { Change } from "diff";
 
 // Do not include diff in non dev builds (side effects import)
@@ -53,7 +56,7 @@ function Match({ matchResult }: { matchResult: RegExpMatchArray | null; }) {
 
     return (
         <>
-            <Forms.FormTitle>Match</Forms.FormTitle>
+            <Heading>Match</Heading>
             <div style={{ userSelect: "text" }}>{Parser.parse(fullMatch)}</div>
             <div style={{ userSelect: "text" }}>{Parser.parse(groups)}</div>
         </>
@@ -83,7 +86,7 @@ function Diff({ diff }: { diff: Change[] | null; }) {
 
     return (
         <>
-            <Forms.FormTitle>Diff</Forms.FormTitle>
+            <Heading>Diff</Heading>
             {diffLines}
         </>
     );
@@ -118,7 +121,7 @@ export function PatchPreview({ module, match, replacement, setReplacementError }
 
     return (
         <>
-            <Forms.FormTitle>Module {id}</Forms.FormTitle>
+            <Heading>Module {id}</Heading>
 
             <Match matchResult={matchResult} />
             <Diff diff={diff} />
@@ -140,9 +143,9 @@ export function PatchPreview({ module, match, replacement, setReplacementError }
             )}
 
             {compileResult && (
-                <Forms.FormText style={{ color: compileResult[0] ? "var(--status-positive)" : "var(--text-danger)" }}>
+                <Paragraph style={{ color: compileResult[0] ? "var(--status-positive)" : "var(--text-danger)" }}>
                     {compileResult[1]}
-                </Forms.FormText>
+                </Paragraph>
             )}
         </>
     );

src/components/settings/tabs/patchHelper/ReplacementInput.tsx

@@ -5,8 +5,10 @@
  */
 
 import { FormSwitch } from "@components/FormSwitch";
+import { Heading } from "@components/Heading";
+import { Paragraph } from "@components/Paragraph";
 import { Margins } from "@utils/margins";
-import { Forms, Parser, TextInput, useEffect, useState } from "@webpack/common";
+import { Parser, TextInput, useEffect, useState } from "@webpack/common";
 
 const RegexGuide = {
     "\\i": "Special regex escape sequence that matches identifiers (varnames, classnames, etc.)",
@@ -52,20 +54,20 @@ export function ReplacementInput({ replacement, setReplacement, replacementError
     return (
         <>
             {/* FormTitle adds a class if className is not set, so we set it to an empty string to prevent that */}
-            <Forms.FormTitle className="">Replacement</Forms.FormTitle>
+            <Heading className="">Replacement</Heading>
             <TextInput
                 value={replacement?.toString()}
                 onChange={onChange}
                 error={error ?? replacementError}
             />
             {!isFunc && (
                 <div>
-                    <Forms.FormTitle className={Margins.top8}>Cheat Sheet</Forms.FormTitle>
+                    <Heading className={Margins.top8}>Cheat Sheet</Heading>
 
                     {Object.entries(RegexGuide).map(([placeholder, desc]) => (
-                        <Forms.FormText key={placeholder}>
+                        <Paragraph key={placeholder}>
                             {Parser.parse("`" + placeholder + "`")}: {desc}
-                        </Forms.FormText>
+                        </Paragraph>
                     ))}
                 </div>
             )}

src/components/settings/tabs/patchHelper/index.tsx

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Button } from "@components/Button";
 import { CodeBlock } from "@components/CodeBlock";
 import { Divider } from "@components/Divider";
 import { Flex } from "@components/Flex";
@@ -27,7 +28,7 @@ import { Margins } from "@utils/margins";
 import { stripIndent } from "@utils/text";
 import { ReplaceFn } from "@utils/types";
 import { search } from "@webpack";
-import { Button, React, TextInput, useMemo, useState } from "@webpack/common";
+import { React, TextInput, useMemo, useState } from "@webpack/common";
 
 import { FullPatchInput } from "./FullPatchInput";
 import { PatchPreview } from "./PatchPreview";

src/components/settings/tabs/plugins/ContributorModal.tsx

@@ -9,13 +9,15 @@ import "./ContributorModal.css";
 import { useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
+import { HeadingPrimary } from "@components/Heading";
 import { Link } from "@components/Link";
+import { Paragraph } from "@components/Paragraph";
 import { DevsById } from "@utils/constants";
 import { fetchUserProfile } from "@utils/discord";
 import { classes, pluralise } from "@utils/misc";
 import { ModalContent, ModalRoot, openModal } from "@utils/modal";
 import { User } from "@vencord/discord-types";
-import { Forms, showToast, useEffect, useMemo, UserProfileStore, useStateFromStores } from "@webpack/common";
+import { showToast, useEffect, useMemo, UserProfileStore, useStateFromStores } from "@webpack/common";
 
 import Plugins from "~plugins";
 
@@ -70,7 +72,7 @@ function ContributorModal({ user }: { user: User; }) {
                     src={user.getAvatarURL(void 0, 512, true)}
                     alt=""
                 />
-                <Forms.FormTitle tag="h2" className={cl("name")}>{user.username}</Forms.FormTitle>
+                <HeadingPrimary className={cl("name")}>{user.username}</HeadingPrimary>
 
                 <div className={classes("vc-settings-modal-links", cl("links"))}>
                     {website && (
@@ -89,13 +91,13 @@ function ContributorModal({ user }: { user: User; }) {
             </div>
 
             {plugins.length ? (
-                <Forms.FormText>
+                <Paragraph>
                     This person has {ContributedHyperLink} to {pluralise(plugins.length, "plugin")}!
-                </Forms.FormText>
+                </Paragraph>
             ) : (
-                <Forms.FormText>
+                <Paragraph>
                     This person has not made any plugins. They likely {ContributedHyperLink} to Vencord in other ways!
-                </Forms.FormText>
+                </Paragraph>
             )}
 
             {!!plugins.length && (