@x-plat/design-system 0.5.42 → 0.5.44

package/dist/layout/index.css

@@ -426,10 +426,10 @@
   --system-info-700: var(--primitive-blue-700);
   --system-info-800: var(--primitive-blue-800);
   --system-info-900: var(--primitive-blue-900);
-  --system-link-400: var(--primitive-purple-400);
-  --system-link-500: var(--primitive-purple-500);
-  --system-link-600: var(--primitive-purple-600);
-  --system-link-700: var(--primitive-purple-700);
+  --system-link-400: var(--primitive-deep-purple-400);
+  --system-link-500: var(--primitive-deep-purple-500);
+  --system-link-600: var(--primitive-deep-purple-600);
+  --system-link-700: var(--primitive-deep-purple-700);
 }
 :root {
   --semantic-text-strong: var(--brand-neutral-900);
@@ -463,7 +463,7 @@
   --semantic-surface-warning-default: var(--system-warning-600);
   --semantic-surface-warning-strong: var(--system-warning-700);
   --semantic-surface-info-subtle: var(--system-info-50);
-  --semantic-surface-info-default: var(--system-info-400);
+  --semantic-surface-info-default: var(--system-info-600);
   --semantic-surface-info-strong: var(--system-info-700);
   --semantic-border-default: var(--brand-neutral-200);
   --semantic-border-subtle: var(--brand-neutral-100);
@@ -472,16 +472,16 @@
   --semantic-border-brand: var(--brand-primary-600);
   --semantic-border-success: var(--system-success-300);
   --semantic-border-error: var(--system-error-300);
-  --semantic-border-warning: var(--system-warning-500);
+  --semantic-border-warning: var(--system-warning-300);
   --semantic-border-info: var(--system-info-300);
   --semantic-icon-strong: var(--brand-neutral-700);
   --semantic-icon-subtle: var(--brand-neutral-500);
   --semantic-icon-inverse: var(--brand-base-white);
   --semantic-icon-brand: var(--brand-primary-600);
-  --semantic-icon-success: var(--system-success-400);
+  --semantic-icon-success: var(--system-success-600);
   --semantic-icon-error: var(--system-error-600);
   --semantic-icon-warning: var(--system-warning-600);
-  --semantic-icon-info: var(--system-info-400);
+  --semantic-icon-info: var(--system-info-600);
   --semantic-icon-disabled: var(--brand-neutral-300);
   --semantic-emphasis-brand: var(--brand-primary-800);
   --semantic-emphasis-success: var(--system-success-800);
@@ -526,6 +526,518 @@
   --semantic-categorical-8-fill: var(--brand-categorical-8-400);
   --semantic-categorical-8-text: var(--brand-categorical-8-600);
 }
+:root {
+  --typo-font-family-sans:
+    Pretendard,
+    -apple-system,
+    sans-serif;
+  --typo-font-family-serif:
+    Noto Serif KR,
+    Georgia,
+    serif;
+  --typo-font-family-suit:
+    SUIT,
+    -apple-system,
+    sans-serif;
+  --typo-weight-regular: 400;
+  --typo-weight-medium: 500;
+  --typo-weight-semibold: 600;
+  --typo-weight-bold: 700;
+  --typo-size-display-1: 48px;
+  --typo-size-display-2: 36px;
+  --typo-size-title-1: 28px;
+  --typo-size-title-2: 24px;
+  --typo-size-heading-1: 20px;
+  --typo-size-heading-2: 18px;
+  --typo-size-compact-body-1: 17px;
+  --typo-size-compact-body-2: 15px;
+  --typo-size-compact-label-1: 14px;
+  --typo-size-compact-label-2: 12px;
+  --typo-size-compact-caption-1: 11px;
+  --typo-size-compact-caption-2: 11px;
+  --typo-size-default-body-1: 18px;
+  --typo-size-default-body-2: 17px;
+  --typo-size-default-label-1: 16px;
+  --typo-size-default-label-2: 14px;
+  --typo-size-default-caption-1: 13px;
+  --typo-size-default-caption-2: 12px;
+  --typo-size-airy-body-1: 20px;
+  --typo-size-airy-body-2: 19px;
+  --typo-size-airy-label-1: 18px;
+  --typo-size-airy-label-2: 16px;
+  --typo-size-airy-caption-1: 14px;
+  --typo-size-airy-caption-2: 13px;
+  --typo-lh-display-1: 62px;
+  --typo-lh-display-2: 48px;
+  --typo-lh-title-1: 38px;
+  --typo-lh-title-2: 34px;
+  --typo-lh-compact-heading-1: 26px;
+  --typo-lh-compact-heading-2: 24px;
+  --typo-lh-compact-body-1: 24px;
+  --typo-lh-compact-body-2: 22px;
+  --typo-lh-compact-label-1: 20px;
+  --typo-lh-compact-label-2: 18px;
+  --typo-lh-compact-caption-1: 16px;
+  --typo-lh-compact-caption-2: 16px;
+  --typo-lh-default-heading-1: 30px;
+  --typo-lh-default-heading-2: 28px;
+  --typo-lh-default-body-1: 26px;
+  --typo-lh-default-body-2: 24px;
+  --typo-lh-default-label-1: 24px;
+  --typo-lh-default-label-2: 22px;
+  --typo-lh-default-caption-1: 18px;
+  --typo-lh-default-caption-2: 18px;
+  --typo-lh-airy-heading-1: 34px;
+  --typo-lh-airy-heading-2: 32px;
+  --typo-lh-airy-body-1: 30px;
+  --typo-lh-airy-body-2: 28px;
+  --typo-lh-airy-label-1: 28px;
+  --typo-lh-airy-label-2: 26px;
+  --typo-lh-airy-caption-1: 22px;
+  --typo-lh-airy-caption-2: 20px;
+  --typo-ls-tight: -0.02em;
+  --typo-ls-normal: 0;
+  --typo-ls-wide: 0.02em;
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  :root {
+    --typo-size-display-1: 40px;
+    --typo-size-display-2: 32px;
+    --typo-size-title-1: 26px;
+    --typo-size-title-2: 22px;
+    --typo-size-heading-1: 19px;
+    --typo-size-heading-2: 17px;
+    --typo-size-compact-body-1: 16px;
+    --typo-size-compact-body-2: 15px;
+    --typo-size-compact-label-1: 14px;
+    --typo-size-compact-label-2: 12px;
+    --typo-size-compact-caption-1: 11px;
+    --typo-size-compact-caption-2: 11px;
+    --typo-size-default-body-1: 17px;
+    --typo-size-default-body-2: 16px;
+    --typo-size-default-label-1: 16px;
+    --typo-size-default-label-2: 14px;
+    --typo-size-default-caption-1: 13px;
+    --typo-size-default-caption-2: 12px;
+    --typo-size-airy-body-1: 19px;
+    --typo-size-airy-body-2: 17px;
+    --typo-size-airy-label-1: 17px;
+    --typo-size-airy-label-2: 15px;
+    --typo-size-airy-caption-1: 14px;
+    --typo-size-airy-caption-2: 13px;
+    --typo-lh-display-1: 52px;
+    --typo-lh-display-2: 42px;
+    --typo-lh-title-1: 36px;
+    --typo-lh-title-2: 32px;
+    --typo-lh-compact-heading-1: 24px;
+    --typo-lh-compact-heading-2: 22px;
+    --typo-lh-compact-body-1: 24px;
+    --typo-lh-compact-body-2: 22px;
+    --typo-lh-compact-label-1: 20px;
+    --typo-lh-compact-label-2: 18px;
+    --typo-lh-compact-caption-1: 16px;
+    --typo-lh-compact-caption-2: 16px;
+    --typo-lh-default-heading-1: 28px;
+    --typo-lh-default-heading-2: 26px;
+    --typo-lh-default-body-1: 26px;
+    --typo-lh-default-body-2: 24px;
+    --typo-lh-default-label-1: 24px;
+    --typo-lh-default-label-2: 22px;
+    --typo-lh-default-caption-1: 18px;
+    --typo-lh-default-caption-2: 18px;
+    --typo-lh-airy-heading-1: 32px;
+    --typo-lh-airy-heading-2: 28px;
+    --typo-lh-airy-body-1: 30px;
+    --typo-lh-airy-body-2: 28px;
+    --typo-lh-airy-label-1: 28px;
+    --typo-lh-airy-label-2: 26px;
+    --typo-lh-airy-caption-1: 22px;
+    --typo-lh-airy-caption-2: 20px;
+    --typo-ls-tight: -0.02em;
+    --typo-ls-normal: 0;
+    --typo-ls-wide: 0.02em;
+  }
+}
+@media (min-width: 0px) and (max-width: 768px) {
+  :root {
+    --typo-size-display-1: 32px;
+    --typo-size-display-2: 28px;
+    --typo-size-title-1: 24px;
+    --typo-size-title-2: 20px;
+    --typo-size-heading-1: 18px;
+    --typo-size-heading-2: 17px;
+    --typo-size-compact-body-1: 16px;
+    --typo-size-compact-body-2: 13px;
+    --typo-size-compact-label-1: 14px;
+    --typo-size-compact-label-2: 12px;
+    --typo-size-compact-caption-1: 11px;
+    --typo-size-compact-caption-2: 11px;
+    --typo-size-default-body-1: 17px;
+    --typo-size-default-body-2: 14px;
+    --typo-size-default-label-1: 16px;
+    --typo-size-default-label-2: 14px;
+    --typo-size-default-caption-1: 13px;
+    --typo-size-default-caption-2: 12px;
+    --typo-size-airy-body-1: 19px;
+    --typo-size-airy-body-2: 16px;
+    --typo-size-airy-label-1: 16px;
+    --typo-size-airy-label-2: 14px;
+    --typo-size-airy-caption-1: 14px;
+    --typo-size-airy-caption-2: 13px;
+    --typo-lh-display-1: 42px;
+    --typo-lh-display-2: 38px;
+    --typo-lh-title-1: 34px;
+    --typo-lh-title-2: 30px;
+    --typo-lh-compact-heading-1: 24px;
+    --typo-lh-compact-heading-2: 22px;
+    --typo-lh-compact-body-1: 24px;
+    --typo-lh-compact-body-2: 22px;
+    --typo-lh-compact-label-1: 20px;
+    --typo-lh-compact-label-2: 18px;
+    --typo-lh-compact-caption-1: 16px;
+    --typo-lh-compact-caption-2: 16px;
+    --typo-lh-default-heading-1: 28px;
+    --typo-lh-default-heading-2: 26px;
+    --typo-lh-default-body-1: 26px;
+    --typo-lh-default-body-2: 24px;
+    --typo-lh-default-label-1: 24px;
+    --typo-lh-default-label-2: 22px;
+    --typo-lh-default-caption-1: 18px;
+    --typo-lh-default-caption-2: 18px;
+    --typo-lh-airy-heading-1: 32px;
+    --typo-lh-airy-heading-2: 28px;
+    --typo-lh-airy-body-1: 30px;
+    --typo-lh-airy-body-2: 28px;
+    --typo-lh-airy-label-1: 28px;
+    --typo-lh-airy-label-2: 26px;
+    --typo-lh-airy-caption-1: 22px;
+    --typo-lh-airy-caption-2: 20px;
+    --typo-ls-tight: -0.01em;
+    --typo-ls-normal: 0;
+    --typo-ls-wide: 0.02em;
+  }
+}
+:root {
+  --typo-brand-font-family-font: var(--typo-font-family-sans);
+  --typo-brand-size-display-1: var(--typo-size-display-1);
+  --typo-brand-size-display-2: var(--typo-size-display-2);
+  --typo-brand-size-title-1: var(--typo-size-title-1);
+  --typo-brand-size-title-2: var(--typo-size-title-2);
+  --typo-brand-size-heading-1: var(--typo-size-heading-1);
+  --typo-brand-size-heading-2: var(--typo-size-heading-2);
+  --typo-brand-size-body-1: var(--typo-size-default-body-1);
+  --typo-brand-size-body-2: var(--typo-size-default-body-2);
+  --typo-brand-size-label-1: var(--typo-size-default-label-1);
+  --typo-brand-size-label-2: var(--typo-size-default-label-2);
+  --typo-brand-size-caption-1: var(--typo-size-default-caption-1);
+  --typo-brand-size-caption-2: var(--typo-size-default-caption-2);
+  --typo-brand-line-height-display-1: var(--typo-lh-display-1);
+  --typo-brand-line-height-display-2: var(--typo-lh-display-2);
+  --typo-brand-line-height-title-1: var(--typo-lh-title-1);
+  --typo-brand-line-height-title-2: var(--typo-lh-title-2);
+  --typo-brand-line-height-heading-1: var(--typo-lh-default-heading-1);
+  --typo-brand-line-height-heading-2: var(--typo-lh-default-heading-2);
+  --typo-brand-line-height-body-1: var(--typo-lh-default-body-1);
+  --typo-brand-line-height-body-2: var(--typo-lh-default-body-2);
+  --typo-brand-line-height-label-1: var(--typo-lh-default-label-1);
+  --typo-brand-line-height-label-2: var(--typo-lh-default-label-2);
+  --typo-brand-line-height-caption-1: var(--typo-lh-default-caption-1);
+  --typo-brand-line-height-caption-2: var(--typo-lh-default-caption-2);
+  --typo-brand-weight-regular: var(--typo-weight-regular);
+  --typo-brand-weight-medium: var(--typo-weight-medium);
+  --typo-brand-weight-semibold: var(--typo-weight-semibold);
+  --typo-brand-weight-bold: var(--typo-weight-bold);
+  --typo-brand-letter-spacing-display-1: var(--typo-ls-tight);
+  --typo-brand-letter-spacing-display-2: var(--typo-ls-tight);
+  --typo-brand-letter-spacing-title-1: var(--typo-ls-tight);
+  --typo-brand-letter-spacing-title-2: var(--typo-ls-tight);
+  --typo-brand-letter-spacing-heading-1: var(--typo-ls-tight);
+  --typo-brand-letter-spacing-heading-2: var(--typo-ls-tight);
+  --typo-brand-letter-spacing-body-1: var(--typo-ls-normal);
+  --typo-brand-letter-spacing-body-2: var(--typo-ls-normal);
+  --typo-brand-letter-spacing-label-1: var(--typo-ls-normal);
+  --typo-brand-letter-spacing-label-2: var(--typo-ls-wide);
+  --typo-brand-letter-spacing-caption-1: var(--typo-ls-wide);
+  --typo-brand-letter-spacing-caption-2: var(--typo-ls-wide);
+}
+:root {
+  --semantic-typo-display-1-b-font: var(--typo-brand-font-family-font);
+  --semantic-typo-display-1-b-size: var(--typo-brand-size-display-1);
+  --semantic-typo-display-1-b-lh: var(--typo-brand-line-height-display-1);
+  --semantic-typo-display-1-b-weight: var(--typo-brand-weight-bold);
+  --semantic-typo-display-1-b-ls: var(--typo-brand-letter-spacing-display-1);
+  --semantic-typo-display-1-sb-font: var(--typo-brand-font-family-font);
+  --semantic-typo-display-1-sb-size: var(--typo-brand-size-display-1);
+  --semantic-typo-display-1-sb-lh: var(--typo-brand-line-height-display-1);
+  --semantic-typo-display-1-sb-weight: var(--typo-brand-weight-semibold);
+  --semantic-typo-display-1-sb-ls: var(--typo-brand-letter-spacing-display-1);
+  --semantic-typo-display-2-b-font: var(--typo-brand-font-family-font);
+  --semantic-typo-display-2-b-size: var(--typo-brand-size-display-2);
+  --semantic-typo-display-2-b-lh: var(--typo-brand-line-height-display-2);
+  --semantic-typo-display-2-b-weight: var(--typo-brand-weight-bold);
+  --semantic-typo-display-2-b-ls: var(--typo-brand-letter-spacing-display-2);
+  --semantic-typo-display-2-sb-font: var(--typo-brand-font-family-font);
+  --semantic-typo-display-2-sb-size: var(--typo-brand-size-display-2);
+  --semantic-typo-display-2-sb-lh: var(--typo-brand-line-height-display-2);
+  --semantic-typo-display-2-sb-weight: var(--typo-brand-weight-semibold);
+  --semantic-typo-display-2-sb-ls: var(--typo-brand-letter-spacing-display-2);
+  --semantic-typo-title-1-sb-font: var(--typo-brand-font-family-font);
+  --semantic-typo-title-1-sb-size: var(--typo-brand-size-title-1);
+  --semantic-typo-title-1-sb-lh: var(--typo-brand-line-height-title-1);
+  --semantic-typo-title-1-sb-weight: var(--typo-brand-weight-semibold);
+  --semantic-typo-title-1-sb-ls: var(--typo-brand-letter-spacing-title-1);
+  --semantic-typo-title-1-m-font: var(--typo-brand-font-family-font);
+  --semantic-typo-title-1-m-size: var(--typo-brand-size-title-1);
+  --semantic-typo-title-1-m-lh: var(--typo-brand-line-height-title-1);
+  --semantic-typo-title-1-m-weight: var(--typo-brand-weight-medium);
+  --semantic-typo-title-1-m-ls: var(--typo-brand-letter-spacing-title-1);
+  --semantic-typo-title-2-sb-font: var(--typo-brand-font-family-font);
+  --semantic-typo-title-2-sb-size: var(--typo-brand-size-title-2);
+  --semantic-typo-title-2-sb-lh: var(--typo-brand-line-height-title-2);
+  --semantic-typo-title-2-sb-weight: var(--typo-brand-weight-semibold);
+  --semantic-typo-title-2-sb-ls: var(--typo-brand-letter-spacing-title-2);
+  --semantic-typo-title-2-m-font: var(--typo-brand-font-family-font);
+  --semantic-typo-title-2-m-size: var(--typo-brand-size-title-2);
+  --semantic-typo-title-2-m-lh: var(--typo-brand-line-height-title-2);
+  --semantic-typo-title-2-m-weight: var(--typo-brand-weight-medium);
+  --semantic-typo-title-2-m-ls: var(--typo-brand-letter-spacing-title-2);
+  --semantic-typo-heading-1-sb-font: var(--typo-brand-font-family-font);
+  --semantic-typo-heading-1-sb-size: var(--typo-brand-size-heading-1);
+  --semantic-typo-heading-1-sb-lh: var(--typo-brand-line-height-heading-1);
+  --semantic-typo-heading-1-sb-weight: var(--typo-brand-weight-semibold);
+  --semantic-typo-heading-1-sb-ls: var(--typo-brand-letter-spacing-heading-1);
+  --semantic-typo-heading-1-m-font: var(--typo-brand-font-family-font);
+  --semantic-typo-heading-1-m-size: var(--typo-brand-size-heading-1);
+  --semantic-typo-heading-1-m-lh: var(--typo-brand-line-height-heading-1);
+  --semantic-typo-heading-1-m-weight: var(--typo-brand-weight-medium);
+  --semantic-typo-heading-1-m-ls: var(--typo-brand-letter-spacing-heading-1);
+  --semantic-typo-heading-2-m-font: var(--typo-brand-font-family-font);
+  --semantic-typo-heading-2-m-size: var(--typo-brand-size-heading-2);
+  --semantic-typo-heading-2-m-lh: var(--typo-brand-line-height-heading-2);
+  --semantic-typo-heading-2-m-weight: var(--typo-brand-weight-medium);
+  --semantic-typo-heading-2-m-ls: var(--typo-brand-letter-spacing-heading-2);
+  --semantic-typo-body-1-sb-font: var(--typo-brand-font-family-font);
+  --semantic-typo-body-1-sb-size: var(--typo-brand-size-body-1);
+  --semantic-typo-body-1-sb-lh: var(--typo-brand-line-height-body-1);
+  --semantic-typo-body-1-sb-weight: var(--typo-brand-weight-semibold);
+  --semantic-typo-body-1-sb-ls: var(--typo-brand-letter-spacing-body-1);
+  --semantic-typo-body-1-m-font: var(--typo-brand-font-family-font);
+  --semantic-typo-body-1-m-size: var(--typo-brand-size-body-1);
+  --semantic-typo-body-1-m-lh: var(--typo-brand-line-height-body-1);
+  --semantic-typo-body-1-m-weight: var(--typo-brand-weight-medium);
+  --semantic-typo-body-1-m-ls: var(--typo-brand-letter-spacing-body-1);
+  --semantic-typo-body-1-r-font: var(--typo-brand-font-family-font);
+  --semantic-typo-body-1-r-size: var(--typo-brand-size-body-1);
+  --semantic-typo-body-1-r-lh: var(--typo-brand-line-height-body-1);
+  --semantic-typo-body-1-r-weight: var(--typo-brand-weight-regular);
+  --semantic-typo-body-1-r-ls: var(--typo-brand-letter-spacing-body-1);
+  --semantic-typo-body-2-m-font: var(--typo-brand-font-family-font);
+  --semantic-typo-body-2-m-size: var(--typo-brand-size-body-2);
+  --semantic-typo-body-2-m-lh: var(--typo-brand-line-height-body-2);
+  --semantic-typo-body-2-m-weight: var(--typo-brand-weight-medium);
+  --semantic-typo-body-2-m-ls: var(--typo-brand-letter-spacing-body-2);
+  --semantic-typo-body-2-r-font: var(--typo-brand-font-family-font);
+  --semantic-typo-body-2-r-size: var(--typo-brand-size-body-2);
+  --semantic-typo-body-2-r-lh: var(--typo-brand-line-height-body-2);
+  --semantic-typo-body-2-r-weight: var(--typo-brand-weight-regular);
+  --semantic-typo-body-2-r-ls: var(--typo-brand-letter-spacing-body-2);
+  --semantic-typo-label-1-sb-font: var(--typo-brand-font-family-font);
+  --semantic-typo-label-1-sb-size: var(--typo-brand-size-label-1);
+  --semantic-typo-label-1-sb-lh: var(--typo-brand-line-height-label-1);
+  --semantic-typo-label-1-sb-weight: var(--typo-brand-weight-semibold);
+  --semantic-typo-label-1-sb-ls: var(--typo-brand-letter-spacing-label-1);
+  --semantic-typo-label-1-m-font: var(--typo-brand-font-family-font);
+  --semantic-typo-label-1-m-size: var(--typo-brand-size-label-1);
+  --semantic-typo-label-1-m-lh: var(--typo-brand-line-height-label-1);
+  --semantic-typo-label-1-m-weight: var(--typo-brand-weight-medium);
+  --semantic-typo-label-1-m-ls: var(--typo-brand-letter-spacing-label-1);
+  --semantic-typo-label-2-sb-font: var(--typo-brand-font-family-font);
+  --semantic-typo-label-2-sb-size: var(--typo-brand-size-label-2);
+  --semantic-typo-label-2-sb-lh: var(--typo-brand-line-height-label-2);
+  --semantic-typo-label-2-sb-weight: var(--typo-brand-weight-semibold);
+  --semantic-typo-label-2-sb-ls: var(--typo-brand-letter-spacing-label-2);
+  --semantic-typo-label-2-m-font: var(--typo-brand-font-family-font);
+  --semantic-typo-label-2-m-size: var(--typo-brand-size-label-2);
+  --semantic-typo-label-2-m-lh: var(--typo-brand-line-height-label-2);
+  --semantic-typo-label-2-m-weight: var(--typo-brand-weight-medium);
+  --semantic-typo-label-2-m-ls: var(--typo-brand-letter-spacing-label-2);
+  --semantic-typo-caption-1-sb-font: var(--typo-brand-font-family-font);
+  --semantic-typo-caption-1-sb-size: var(--typo-brand-size-caption-1);
+  --semantic-typo-caption-1-sb-lh: var(--typo-brand-line-height-caption-1);
+  --semantic-typo-caption-1-sb-weight: var(--typo-brand-weight-semibold);
+  --semantic-typo-caption-1-sb-ls: var(--typo-brand-letter-spacing-caption-1);
+  --semantic-typo-caption-1-r-font: var(--typo-brand-font-family-font);
+  --semantic-typo-caption-1-r-size: var(--typo-brand-size-caption-1);
+  --semantic-typo-caption-1-r-lh: var(--typo-brand-line-height-caption-1);
+  --semantic-typo-caption-1-r-weight: var(--typo-brand-weight-regular);
+  --semantic-typo-caption-1-r-ls: var(--typo-brand-letter-spacing-caption-1);
+  --semantic-typo-caption-2-r-font: var(--typo-brand-font-family-font);
+  --semantic-typo-caption-2-r-size: var(--typo-brand-size-caption-2);
+  --semantic-typo-caption-2-r-lh: var(--typo-brand-line-height-caption-2);
+  --semantic-typo-caption-2-r-weight: var(--typo-brand-weight-regular);
+  --semantic-typo-caption-2-r-ls: var(--typo-brand-letter-spacing-caption-2);
+}
+.typo-display-1-b {
+  font-family: var(--semantic-typo-display-1-b-font);
+  font-size: var(--semantic-typo-display-1-b-size);
+  line-height: var(--semantic-typo-display-1-b-lh);
+  font-weight: var(--semantic-typo-display-1-b-weight);
+  letter-spacing: var(--semantic-typo-display-1-b-ls);
+}
+.typo-display-1-sb {
+  font-family: var(--semantic-typo-display-1-sb-font);
+  font-size: var(--semantic-typo-display-1-sb-size);
+  line-height: var(--semantic-typo-display-1-sb-lh);
+  font-weight: var(--semantic-typo-display-1-sb-weight);
+  letter-spacing: var(--semantic-typo-display-1-sb-ls);
+}
+.typo-display-2-b {
+  font-family: var(--semantic-typo-display-2-b-font);
+  font-size: var(--semantic-typo-display-2-b-size);
+  line-height: var(--semantic-typo-display-2-b-lh);
+  font-weight: var(--semantic-typo-display-2-b-weight);
+  letter-spacing: var(--semantic-typo-display-2-b-ls);
+}
+.typo-display-2-sb {
+  font-family: var(--semantic-typo-display-2-sb-font);
+  font-size: var(--semantic-typo-display-2-sb-size);
+  line-height: var(--semantic-typo-display-2-sb-lh);
+  font-weight: var(--semantic-typo-display-2-sb-weight);
+  letter-spacing: var(--semantic-typo-display-2-sb-ls);
+}
+.typo-title-1-sb {
+  font-family: var(--semantic-typo-title-1-sb-font);
+  font-size: var(--semantic-typo-title-1-sb-size);
+  line-height: var(--semantic-typo-title-1-sb-lh);
+  font-weight: var(--semantic-typo-title-1-sb-weight);
+  letter-spacing: var(--semantic-typo-title-1-sb-ls);
+}
+.typo-title-1-m {
+  font-family: var(--semantic-typo-title-1-m-font);
+  font-size: var(--semantic-typo-title-1-m-size);
+  line-height: var(--semantic-typo-title-1-m-lh);
+  font-weight: var(--semantic-typo-title-1-m-weight);
+  letter-spacing: var(--semantic-typo-title-1-m-ls);
+}
+.typo-title-2-sb {
+  font-family: var(--semantic-typo-title-2-sb-font);
+  font-size: var(--semantic-typo-title-2-sb-size);
+  line-height: var(--semantic-typo-title-2-sb-lh);
+  font-weight: var(--semantic-typo-title-2-sb-weight);
+  letter-spacing: var(--semantic-typo-title-2-sb-ls);
+}
+.typo-title-2-m {
+  font-family: var(--semantic-typo-title-2-m-font);
+  font-size: var(--semantic-typo-title-2-m-size);
+  line-height: var(--semantic-typo-title-2-m-lh);
+  font-weight: var(--semantic-typo-title-2-m-weight);
+  letter-spacing: var(--semantic-typo-title-2-m-ls);
+}
+.typo-heading-1-sb {
+  font-family: var(--semantic-typo-heading-1-sb-font);
+  font-size: var(--semantic-typo-heading-1-sb-size);
+  line-height: var(--semantic-typo-heading-1-sb-lh);
+  font-weight: var(--semantic-typo-heading-1-sb-weight);
+  letter-spacing: var(--semantic-typo-heading-1-sb-ls);
+}
+.typo-heading-1-m {
+  font-family: var(--semantic-typo-heading-1-m-font);
+  font-size: var(--semantic-typo-heading-1-m-size);
+  line-height: var(--semantic-typo-heading-1-m-lh);
+  font-weight: var(--semantic-typo-heading-1-m-weight);
+  letter-spacing: var(--semantic-typo-heading-1-m-ls);
+}
+.typo-heading-2-m {
+  font-family: var(--semantic-typo-heading-2-m-font);
+  font-size: var(--semantic-typo-heading-2-m-size);
+  line-height: var(--semantic-typo-heading-2-m-lh);
+  font-weight: var(--semantic-typo-heading-2-m-weight);
+  letter-spacing: var(--semantic-typo-heading-2-m-ls);
+}
+.typo-body-1-sb {
+  font-family: var(--semantic-typo-body-1-sb-font);
+  font-size: var(--semantic-typo-body-1-sb-size);
+  line-height: var(--semantic-typo-body-1-sb-lh);
+  font-weight: var(--semantic-typo-body-1-sb-weight);
+  letter-spacing: var(--semantic-typo-body-1-sb-ls);
+}
+.typo-body-1-m {
+  font-family: var(--semantic-typo-body-1-m-font);
+  font-size: var(--semantic-typo-body-1-m-size);
+  line-height: var(--semantic-typo-body-1-m-lh);
+  font-weight: var(--semantic-typo-body-1-m-weight);
+  letter-spacing: var(--semantic-typo-body-1-m-ls);
+}
+.typo-body-1-r {
+  font-family: var(--semantic-typo-body-1-r-font);
+  font-size: var(--semantic-typo-body-1-r-size);
+  line-height: var(--semantic-typo-body-1-r-lh);
+  font-weight: var(--semantic-typo-body-1-r-weight);
+  letter-spacing: var(--semantic-typo-body-1-r-ls);
+}
+.typo-body-2-m {
+  font-family: var(--semantic-typo-body-2-m-font);
+  font-size: var(--semantic-typo-body-2-m-size);
+  line-height: var(--semantic-typo-body-2-m-lh);
+  font-weight: var(--semantic-typo-body-2-m-weight);
+  letter-spacing: var(--semantic-typo-body-2-m-ls);
+}
+.typo-body-2-r {
+  font-family: var(--semantic-typo-body-2-r-font);
+  font-size: var(--semantic-typo-body-2-r-size);
+  line-height: var(--semantic-typo-body-2-r-lh);
+  font-weight: var(--semantic-typo-body-2-r-weight);
+  letter-spacing: var(--semantic-typo-body-2-r-ls);
+}
+.typo-label-1-sb {
+  font-family: var(--semantic-typo-label-1-sb-font);
+  font-size: var(--semantic-typo-label-1-sb-size);
+  line-height: var(--semantic-typo-label-1-sb-lh);
+  font-weight: var(--semantic-typo-label-1-sb-weight);
+  letter-spacing: var(--semantic-typo-label-1-sb-ls);
+}
+.typo-label-1-m {
+  font-family: var(--semantic-typo-label-1-m-font);
+  font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
+}
+.typo-label-2-sb {
+  font-family: var(--semantic-typo-label-2-sb-font);
+  font-size: var(--semantic-typo-label-2-sb-size);
+  line-height: var(--semantic-typo-label-2-sb-lh);
+  font-weight: var(--semantic-typo-label-2-sb-weight);
+  letter-spacing: var(--semantic-typo-label-2-sb-ls);
+}
+.typo-label-2-m {
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+}
+.typo-caption-1-sb {
+  font-family: var(--semantic-typo-caption-1-sb-font);
+  font-size: var(--semantic-typo-caption-1-sb-size);
+  line-height: var(--semantic-typo-caption-1-sb-lh);
+  font-weight: var(--semantic-typo-caption-1-sb-weight);
+  letter-spacing: var(--semantic-typo-caption-1-sb-ls);
+}
+.typo-caption-1-r {
+  font-family: var(--semantic-typo-caption-1-r-font);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
+}
+.typo-caption-2-r {
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+}
 .semantic-text-strong {
   --ds-color: var(--semantic-text-strong);
 }