feat: xs and xl support for labels

Author: lorant-one

packages/core/src/styles/typography.scss

@@ -163,6 +163,11 @@ h1, h2, h3, h4, h5, h6, p {
         font-weight: var(--font-weight-label-default);
     }
 
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-label-xl) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xl) * var(--line-height-label-multiplier));
+    }
+
     &.font-l, & > .font-l {
         font-size:   calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
         line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
@@ -177,6 +182,11 @@ h1, h2, h3, h4, h5, h6, p {
         font-size:   calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
         line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
     }
+
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-label-xs) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xs) * var(--line-height-label-multiplier));
+    }
 }
 
 .font-code {
@@ -190,6 +200,11 @@ h1, h2, h3, h4, h5, h6, p {
         font-weight: var(--font-weight-code-default);
     }
 
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-label-xl) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xl) * var(--line-height-label-multiplier));
+    }
+
     &.font-l, & > .font-l {
         font-size:   calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
         line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
@@ -204,4 +219,9 @@ h1, h2, h3, h4, h5, h6, p {
         font-size:   calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
         line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
     }
+
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-label-xs) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xs) * var(--line-height-label-multiplier));
+    }
 }

packages/core/src/tokens/typography.scss

@@ -41,9 +41,11 @@
     --font-size-body-s:            0.875rem;
     --font-size-body-xs:           0.75rem;
 
+    --font-size-label-xl:          1.125rem;
     --font-size-label-l:           1rem;
     --font-size-label-m:           0.925rem;
     --font-size-label-s:           0.825rem;
+    --font-size-label-xs:          0.75rem;
 
     /* LINE HEIGHT */
     --line-height-display-xl:      5rem;
@@ -64,9 +66,11 @@
     --line-height-body-s:          1.125rem;
     --line-height-body-xs:         1rem;
 
+    --line-height-label-xl:        1.5rem;
     --line-height-label-l:         1.25rem;
     --line-height-label-m:         1.25rem;
     --line-height-label-s:         1rem;
+    --line-height-label-xs:        0.875rem;
 }
 
 @include breakpoints.m {