diff --git a/src/ui/text/text.helper.ts b/src/ui/text/text.helper.ts index 0c780cd4..ae6ce80b 100644 --- a/src/ui/text/text.helper.ts +++ b/src/ui/text/text.helper.ts @@ -3,18 +3,22 @@ import { Sprinkles } from "../../styles/rainbow-sprinkles.css"; export type Variant = "body" | "heading"; export type TextTransform = "ellipsis" | "underline" | "none"; -export function getVariantStyles(variant: Variant): Sprinkles { +export function getVariantStyles( + variant: Variant, + customFontFamily?: Sprinkles["fontFamily"] +): Sprinkles { if (variant === "body") { return { - fontFamily: "$body", + fontFamily: customFontFamily ?? "$body", fontSize: "$sm", fontWeight: "$normal", lineHeight: "$normal", }; } + if (variant === "heading") { return { - fontFamily: "$body", + fontFamily: customFontFamily ?? "$body", fontSize: "$md", fontWeight: "$semibold", lineHeight: "$tall", diff --git a/src/ui/text/text.lite.tsx b/src/ui/text/text.lite.tsx index ed299b74..99a4eb39 100644 --- a/src/ui/text/text.lite.tsx +++ b/src/ui/text/text.lite.tsx @@ -19,14 +19,13 @@ export default function Text(props: TextProps) { {...props.attributes} {...props.domAttributes} as={props.as} - {...getVariantStyles(props.variant ?? "body")} + {...getVariantStyles(props.variant ?? "body", props.fontFamily)} {...getTextTransformStyles({ ellipsis: props.ellipsis, underline: props.underline, })} className={props.className} color={props.color} - fontFamily={props.fontFamily} fontSize={props.fontSize} fontWeight={props.fontWeight} letterSpacing={props.letterSpacing}