Add item-title-suffix typography variant

src/components/atoms/typography.astro

@@ -1,13 +1,14 @@
 ---
 type TypographyVariant =
-  | 'item-title'
-  | 'item-subtitle'
-  | 'tile-title'
-  | 'tile-subtitle'
   | 'main-title'
   | 'main-subtitle'
   | 'section-title'
   | 'section-subtitle'
+  | 'item-title'
+  | 'item-title-suffix'
+  | 'item-subtitle'
+  | 'tile-title'
+  | 'tile-subtitle'
   | 'paragraph';
 
 const variantToElement = {
@@ -16,6 +17,7 @@ const variantToElement = {
   'section-title': 'h2',
   'section-subtitle': 'h3',
   'item-title': 'h3',
+  'item-title-suffix': 'span',
   'item-subtitle': 'p',
   'tile-title': 'h4',
   'tile-subtitle': 'p',
@@ -28,6 +30,7 @@ const variantToClassName = {
   'section-title': 'text-3xl font-extrabold text-gray-900',
   'section-subtitle': 'text-lg font-extrabold text-gray-900',
   'item-title': 'text-xl font-extrabold text-gray-900',
+  'item-title-suffix': 'text-xl font-medium text-gray-700',
   'item-subtitle': 'text-md font-medium text-gray-700',
   'tile-title': 'text-sm font-medium text-gray-700',
   'tile-subtitle': 'text-sm font-normal text-gray-500',

src/pages/playground/typography.astro

@@ -29,6 +29,10 @@ const text = 'A quick brown fox jumps over the lazy dog';
     <p class="mb-2 font-mono">item-title</p>
     <Typography variant="item-title">{text}</Typography>
   </div>
+  <div>
+    <p class="mb-2 font-mono">item-title-suffix</p>
+    <Typography variant="item-title-suffix">{text}</Typography>
+  </div>
   <div>
     <p class="mb-2 font-mono">item-subtitle</p>
     <Typography variant="item-subtitle">{text}</Typography>