fix: add labels variants for Footnote and Caption

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -16,14 +16,13 @@ p.caption {
   text-decoration: var(--typography-Caption-Bold-textDecoration);
 }
 
-.uppercase {
-  font-family: var(--typography-Caption-Bold-fontFamily);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  font-weight: var(--typography-Caption-Bold-fontWeight);
-  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
-  line-height: var(--typography-Caption-Bold-lineHeight);
-  text-decoration: var(--typography-Caption-Bold-textDecoration);
-  text-transform: uppercase;
+.labels {
+  font-family: var(--typography-Caption-Labels-fontFamily);
+  font-size: var(--typography-Caption-Labels-fontSize);
+  font-weight: var(--typography-Caption-Labels-fontWeight);
+  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
+  line-height: var(--typography-Caption-Labels-lineHeight);
+  text-decoration: var(--typography-Caption-Labels-textDecoration);
 }
 
 .regular {
@@ -35,6 +34,10 @@ p.caption {
   text-decoration: var(--typography-Caption-Regular-textDecoration);
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
 .baseTextAccent {
   color: var(--Base-Text-Accent);
 }

components/TempDesignSystem/Text/Caption/index.tsx

@@ -12,6 +12,7 @@ export default function Caption({
   textAlign,
   textTransform,
   uppercase,
+  type,
   ...props
 }: CaptionProps) {
   const Comp = asChild ? Slot : "p"
@@ -20,6 +21,7 @@ export default function Caption({
         className,
         textTransform,
         uppercase,
+        type,
       })
     : captionVariants({
         className,
@@ -27,6 +29,7 @@ export default function Caption({
         textTransform,
         textAlign,
         uppercase,
+        type,
       })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Caption/variants.ts

@@ -4,6 +4,11 @@ import styles from "./caption.module.css"
 
 const config = {
   variants: {
+    type: {
+      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+    },
     color: {
       baseTextAccent: styles.baseTextAccent,
       black: styles.black,
@@ -19,8 +24,6 @@ const config = {
       disabled: styles.disabled,
     },
     textTransform: {
-      bold: styles.bold,
-      regular: styles.regular,
       uppercase: styles.uppercase,
     },
     textAlign: {
@@ -33,7 +36,7 @@ const config = {
   },
   defaultVariants: {
     color: "black",
-    textTransform: "regular",
+    type: "regular",
   },
 } as const
 
@@ -41,9 +44,12 @@ export const captionVariants = cva(styles.caption, config)
 
 const fontOnlyConfig = {
   variants: {
-    textTransform: {
-      bold: styles.bold,
+    type: {
       regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+    },
+    textTransform: {
       uppercase: styles.uppercase,
     },
     uppercase: {
@@ -51,7 +57,7 @@ const fontOnlyConfig = {
     },
   },
   defaultVariants: {
-    textTransform: "regular",
+    type: "regular",
   },
 } as const
 

components/TempDesignSystem/Text/Footnote/footnote.module.css

@@ -25,13 +25,16 @@
   text-decoration: var(--typography-Footnote-Regular-textDecoration);
 }
 
+.labels {
+  font-family: var(--typography-Footnote-Labels-fontFamily);
+  font-size: var(--typography-Footnote-Labels-fontSize);
+  font-weight: var(--typography-Footnote-Labels-fontWeight);
+  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
+  line-height: var(--typography-Footnote-Labels-lineHeight);
+  text-decoration: var(--typography-Footnote-Labels-textDecoration);
+}
+
 .uppercase {
-  font-family: var(--typography-Footnote-Regular-fontFamily);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  font-weight: var(--typography-Footnote-Bold-fontWeight);
-  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
-  line-height: var(--typography-Footnote-Regular-lineHeight);
-  text-decoration: var(--typography-Footnote-Regular-textDecoration);
   text-transform: uppercase;
 }
 

components/TempDesignSystem/Text/Footnote/index.tsx

@@ -11,20 +11,23 @@ export default function Footnote({
   fontOnly = false,
   textAlign,
   textTransform,
+  type,
   ...props
 }: FootnoteProps) {
   const Comp = asChild ? Slot : "p"
   const classNames = fontOnly
     ? footnoteFontOnlyVariants({
-      className,
-      textAlign,
-      textTransform,
-    })
+        className,
+        textAlign,
+        textTransform,
+        type,
+      })
     : footnoteVariants({
-      className,
-      color,
-      textAlign,
-      textTransform,
-    })
+        className,
+        color,
+        textAlign,
+        textTransform,
+        type,
+      })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -4,6 +4,11 @@ import styles from "./footnote.module.css"
 
 const config = {
   variants: {
+    type: {
+      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+    },
     color: {
       black: styles.black,
       burgundy: styles.burgundy,
@@ -18,13 +23,11 @@ const config = {
       left: styles.left,
     },
     textTransform: {
-      bold: styles.bold,
-      regular: styles.regular,
       uppercase: styles.uppercase,
     },
   },
   defaultVariants: {
-    textTransform: "regular",
+    type: "regular",
   },
 } as const
 
@@ -32,18 +35,21 @@ export const footnoteVariants = cva(styles.footnote, config)
 
 const fontOnlyConfig = {
   variants: {
+    type: {
+      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+    },
     textAlign: {
       center: styles.center,
       left: styles.left,
     },
     textTransform: {
-      bold: styles.bold,
-      regular: styles.regular,
       uppercase: styles.uppercase,
     },
   },
   defaultVariants: {
-    textTransform: "regular",
+    type: "regular",
   },
 } as const