050dd1cdcc
* eslint: migrate to defineConfig and add no-multiple-empty-lines rule * chore: fix multiple empty lines
123 lines
3.2 KiB
TypeScript
123 lines
3.2 KiB
TypeScript
/*
|
|
* Vencord, a Discord client mod
|
|
* Copyright (c) 2025 Vendicated and contributors
|
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
|
*/
|
|
|
|
import "./BaseText.css";
|
|
|
|
import { classNameFactory } from "@utils/css";
|
|
import { classes } from "@utils/misc";
|
|
import type { Text as DiscordText } from "@vencord/discord-types";
|
|
import type { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
|
|
const textCls = classNameFactory("vc-text-");
|
|
|
|
export const TextSizes = {
|
|
xxs: "0.625rem",
|
|
xs: "0.75rem",
|
|
sm: "0.875rem",
|
|
md: "1rem",
|
|
lg: "1.25rem",
|
|
xl: "1.5rem",
|
|
xxl: "2rem"
|
|
} as const;
|
|
|
|
export const TextWeights = {
|
|
thin: "100",
|
|
extralight: "200",
|
|
light: "300",
|
|
normal: "400",
|
|
medium: "500",
|
|
semibold: "600",
|
|
bold: "700",
|
|
extrabold: "800",
|
|
} as const;
|
|
|
|
export const TextColors = {
|
|
"text-default": "var(--text-default)",
|
|
"text-muted": "var(--text-muted)",
|
|
"text-link": "var(--text-link)",
|
|
"text-danger": "var(--text-feedback-critical)",
|
|
"text-brand": "var(--text-brand)",
|
|
"text-strong": "var(--text-strong)",
|
|
"text-subtle": "var(--text-subtle)",
|
|
"control-text-critical": "var(--control-text-critical-secondary-default)",
|
|
"control-text-primary": "var(--control-text-primary-default)",
|
|
} as const;
|
|
|
|
export function generateTextCss() {
|
|
let css = "";
|
|
|
|
for (const [size, value] of Object.entries(TextSizes)) {
|
|
css += `.${textCls(size)}{font-size:${value};}`;
|
|
}
|
|
|
|
for (const [weight, value] of Object.entries(TextWeights)) {
|
|
css += `.${textCls(weight)}{font-weight:${value};}`;
|
|
}
|
|
|
|
return css;
|
|
}
|
|
|
|
export type TextSize = keyof typeof TextSizes;
|
|
export type TextWeight = keyof typeof TextWeights;
|
|
export type TextColor = keyof typeof TextColors;
|
|
export type TextTag = "div" | "span" | "p" | `h${1 | 2 | 3 | 4 | 5 | 6}`;
|
|
|
|
export type BaseTextProps<Tag extends TextTag = "div"> = ComponentPropsWithoutRef<Tag> & {
|
|
size?: TextSize;
|
|
weight?: TextWeight;
|
|
color?: TextColor;
|
|
tag?: Tag;
|
|
};
|
|
|
|
export function BaseText<T extends TextTag = "div">(props: BaseTextProps<T>): ReactNode {
|
|
const {
|
|
size = "md",
|
|
weight = "normal",
|
|
color,
|
|
tag: Tag = "div",
|
|
children,
|
|
className,
|
|
style,
|
|
...restProps
|
|
} = props;
|
|
|
|
return (
|
|
<Tag
|
|
className={classes(textCls("base", size, weight), className)}
|
|
style={{
|
|
...style,
|
|
...(color && { color: TextColors[color] })
|
|
}}
|
|
{...restProps}
|
|
>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
}
|
|
|
|
// #region Old compatibility
|
|
|
|
export const TextCompat: DiscordText = function TextCompat({ color, variant, ...restProps }) {
|
|
const newBaseTextProps = restProps as BaseTextProps;
|
|
|
|
if (variant) {
|
|
const [left, right] = variant.split("/");
|
|
if (left && right) {
|
|
const size = left.split("-").pop();
|
|
newBaseTextProps.size = size as TextSize;
|
|
newBaseTextProps.weight = right as TextWeight;
|
|
}
|
|
}
|
|
|
|
if (color) {
|
|
newBaseTextProps.style ??= {};
|
|
newBaseTextProps.style.color = `var(--${color}, var(--text-default))`;
|
|
}
|
|
|
|
return <BaseText {...newBaseTextProps} />;
|
|
};
|
|
|
|
// #endregion
|