chore: update design system and names of tokens

components/TempDesignSystem/Text/Subtitle/index.tsx

@@ -11,6 +11,7 @@ export default function Subtitle({
   color,
   textAlign,
   textTransform,
+  type,
   ...props
 }: SubtitleProps) {
   if (checkForEmptyChildren(props.children) === 0) {
@@ -22,6 +23,7 @@ export default function Subtitle({
     color,
     textAlign,
     textTransform,
+    type,
   })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Subtitle/subtitle.module.css

@@ -1,17 +1,32 @@
 .subtitle {
-  font-family: var(--typography-Subtitle-fontFamily);
-  font-size: clamp(
-    var(--typography-Subtitle-Mobile-fontSize),
-    0.3vw + 15px,
-    var(--typography-Subtitle-Desktop-fontSize)
-  );
-  font-weight: var(--typography-Subtitle-fontWeight);
-  letter-spacing: var(--typography-Subtitle-letterSpacing);
-  line-height: var(--typography-Subtitle-lineHeight);
   margin: var(--Spacing-x0);
   padding: var(--Spacing-x0);
 }
 
+.one {
+  font-family: var(--typography-Subtitle-1-fontFamily);
+  font-size: clamp(
+    var(--typography-Subtitle-1-Mobile-fontSize),
+    0.3vw + 15px,
+    var(--typography-Subtitle-1-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Subtitle-1-fontWeight);
+  letter-spacing: var(--typography-Subtitle-1-letterSpacing);
+  line-height: var(--typography-Subtitle-1-lineHeight);
+}
+
+.two {
+  font-family: var(--typography-Subtitle-2-fontFamily);
+  font-size: clamp(
+    var(--typography-Subtitle-2-Mobile-fontSize),
+    0.3vw + 15px,
+    var(--typography-Subtitle-2-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Subtitle-2-fontWeight);
+  letter-spacing: var(--typography-Subtitle-2-letterSpacing);
+  line-height: var(--typography-Subtitle-2-lineHeight);
+}
+
 .regular {
   text-transform: none;
 }

components/TempDesignSystem/Text/Subtitle/variants.ts

@@ -17,11 +17,16 @@ const config = {
       regular: styles.regular,
       uppercase: styles.uppercase,
     },
+    type: {
+      one: styles.one,
+      two: styles.two,
+    },
   },
   defaultVariants: {
     color: "burgundy",
     textAlign: "left",
     textTransform: "regular",
+    type: "one",
   },
 } as const