@x-plat/design-system 0.5.43 → 0.5.45

package/dist/components/index.css

@@ -438,6 +438,7 @@
   --semantic-text-subtle: var(--brand-neutral-700);
   --semantic-text-muted: var(--brand-neutral-500);
   --semantic-text-brand: var(--brand-primary-700);
+  --semantic-text-brand-secondary: var(--brand-secondary-700);
   --semantic-text-disabled: var(--brand-neutral-400);
   --semantic-text-inverse: var(--brand-base-white);
   --semantic-text-success: var(--system-success-700);
@@ -455,6 +456,9 @@
   --semantic-surface-brand-subtle: var(--brand-primary-50);
   --semantic-surface-brand-default: var(--brand-primary-600);
   --semantic-surface-brand-strong: var(--brand-primary-700);
+  --semantic-surface-brand-secondary-subtle: var(--brand-secondary-50);
+  --semantic-surface-brand-secondary-default: var(--brand-secondary-600);
+  --semantic-surface-brand-secondary-strong: var(--brand-secondary-700);
   --semantic-surface-success-subtle: var(--system-success-50);
   --semantic-surface-success-default: var(--system-success-400);
   --semantic-surface-success-strong: var(--system-success-700);
@@ -472,6 +476,7 @@
   --semantic-border-strong: var(--brand-neutral-400);
   --semantic-border-disabled: var(--brand-neutral-300);
   --semantic-border-brand: var(--brand-primary-600);
+  --semantic-border-brand-secondary: var(--brand-secondary-600);
   --semantic-border-success: var(--system-success-300);
   --semantic-border-error: var(--system-error-300);
   --semantic-border-warning: var(--system-warning-300);
@@ -480,12 +485,14 @@
   --semantic-icon-subtle: var(--brand-neutral-500);
   --semantic-icon-inverse: var(--brand-base-white);
   --semantic-icon-brand: var(--brand-primary-600);
+  --semantic-icon-brand-secondary: var(--brand-secondary-600);
   --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-600);
   --semantic-icon-disabled: var(--brand-neutral-300);
   --semantic-emphasis-brand: var(--brand-primary-800);
+  --semantic-emphasis-brand-secondary: var(--brand-secondary-800);
   --semantic-emphasis-success: var(--system-success-800);
   --semantic-emphasis-error: var(--system-error-800);
   --semantic-emphasis-warning: var(--system-warning-800);
@@ -528,6 +535,516 @@
   --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;
+  --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);
+}
+@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 {
+  --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);
 }
@@ -540,6 +1057,9 @@
 .semantic-text-brand {
   --ds-color: var(--semantic-text-brand);
 }
+.semantic-text-brand-secondary {
+  --ds-color: var(--semantic-text-brand-secondary);
+}
 .semantic-text-disabled {
   --ds-color: var(--semantic-text-disabled);
 }
@@ -591,6 +1111,15 @@
 .semantic-surface-brand-strong {
   --ds-color: var(--semantic-surface-brand-strong);
 }
+.semantic-surface-brand-secondary-subtle {
+  --ds-color: var(--semantic-surface-brand-secondary-subtle);
+}
+.semantic-surface-brand-secondary-default {
+  --ds-color: var(--semantic-surface-brand-secondary-default);
+}
+.semantic-surface-brand-secondary-strong {
+  --ds-color: var(--semantic-surface-brand-secondary-strong);
+}
 .semantic-surface-success-subtle {
   --ds-color: var(--semantic-surface-success-subtle);
 }
@@ -642,6 +1171,9 @@
 .semantic-border-brand {
   --ds-color: var(--semantic-border-brand);
 }
+.semantic-border-brand-secondary {
+  --ds-color: var(--semantic-border-brand-secondary);
+}
 .semantic-border-success {
   --ds-color: var(--semantic-border-success);
 }
@@ -666,6 +1198,9 @@
 .semantic-icon-brand {
   --ds-color: var(--semantic-icon-brand);
 }
+.semantic-icon-brand-secondary {
+  --ds-color: var(--semantic-icon-brand-secondary);
+}
 .semantic-icon-success {
   --ds-color: var(--semantic-icon-success);
 }
@@ -684,6 +1219,9 @@
 .semantic-emphasis-brand {
   --ds-color: var(--semantic-emphasis-brand);
 }
+.semantic-emphasis-brand-secondary {
+  --ds-color: var(--semantic-emphasis-brand-secondary);
+}
 .semantic-emphasis-success {
   --ds-color: var(--semantic-emphasis-success);
 }