@ds-autonomie/web-components 2.16.0 → 2.18.0

package/cdn/themes/dsa-wc-theme.css

@@ -16,10 +16,10 @@
   --dsa-wc-alert-border-color: var(--dsa-color-border-default);
   --dsa-wc-alert-border-width: 1px;
   --dsa-wc-alert-text-gap: 0.5rem;
-  --dsa-wc-alert-title-font: var(--dsa-font-medium-bold);
+  --dsa-wc-alert-title-font: var(--dsa-font-body-m-bold);
   --dsa-wc-alert-title-color: var(--dsa-color-alert-on-background-title);
   --dsa-wc-alert-title-padding-top: 0.125rem;
-  --dsa-wc-alert-message-font: var(--dsa-font-medium-normal);
+  --dsa-wc-alert-message-font: var(--dsa-font-body-m-normal);
   --dsa-wc-alert-primary-icon-color: var(--dsa-color-alert-on-background-info);
   --dsa-wc-alert-primary-message-color: var(
     --dsa-color-alert-on-background-text-default
@@ -65,15 +65,15 @@
   --dsa-wc-alert-small-icon-size: 1.25rem;
   --dsa-wc-alert-small-icon-margin-inline: 0.75rem;
   --dsa-wc-alert-small-text-gap: 0.25rem;
-  --dsa-wc-alert-small-title-font: var(--dsa-font-small-bold);
+  --dsa-wc-alert-small-title-font: var(--dsa-font-body-s-bold);
   --dsa-wc-alert-small-title-padding-top: 0.125rem;
-  --dsa-wc-alert-small-message-font: var(--dsa-font-small-normal);
+  --dsa-wc-alert-small-message-font: var(--dsa-font-body-s-normal);
   --dsa-wc-callout-padding: var(--dsa-spacing-16) var(--dsa-spacing-24);
   --dsa-wc-callout-border-radius: 0px 3px 3px 0px;
   --dsa-wc-callout-text-gap: var(--dsa-spacing-8);
-  --dsa-wc-callout-title-font: var(--dsa-font-large-bold);
+  --dsa-wc-callout-title-font: var(--dsa-font-title-s-bold);
   --dsa-wc-callout-title-color: var(--dsa-color-text-on-base-primary);
-  --dsa-wc-callout-message-font: var(--dsa-font-medium-normal);
+  --dsa-wc-callout-message-font: var(--dsa-font-body-m-normal);
   --dsa-wc-callout-message-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-callout-border-left-width: var(--dsa-border-6);
   --dsa-wc-callout-default-border-color: var(
@@ -86,11 +86,11 @@
   );
   --dsa-wc-dialog-overlay: var(--dsa-color-surface-overlay);
   --dsa-wc-dialog-overlay-opacity: 0.4;
-  --dsa-wc-dialog-font: var(--dsa-font-medium-normal);
+  --dsa-wc-dialog-font: var(--dsa-font-body-m-normal);
   --dsa-wc-dialog-size: 36.25rem;
   --dsa-wc-dialog-size-small: 23.125rem;
   --dsa-wc-dialog-size-large: 50rem;
-  --dsa-wc-dialog-header-title-font: var(--dsa-font-medium-bold);
+  --dsa-wc-dialog-header-title-font: var(--dsa-font-body-m-bold);
   --dsa-wc-dialog-header-title-padding: 20px 0;
   --dsa-wc-dialog-header-icon-size: 1.5rem;
   --dsa-wc-dialog-header-actions-gap: var(--dsa-spacing-4);
@@ -110,9 +110,9 @@
   --dsa-wc-dialog-panel-gutter: var(--dsa-spacing-40);
   --dsa-wc-dialog-panel-box-shadow: var(--dsa-wc-shadow-x-large);
   --dsa-wc-dialog-footer-border: 1px solid var(--dsa-color-border-default);
-  --dsa-wc-form-font: var(--dsa-font-medium-normal);
-  --dsa-wc-form-font-small: var(--dsa-font-small-normal);
-  --dsa-wc-form-font-large: var(--dsa-font-large-normal);
+  --dsa-wc-form-font: var(--dsa-font-label-m-normal);
+  --dsa-wc-form-font-small: var(--dsa-font-label-s-normal);
+  --dsa-wc-form-font-large: var(--dsa-font-label-l-normal);
   --dsa-wc-form-border-radius: var(--dsa-spacing-4);
   --dsa-wc-form-input-height: 2.5rem;
   --dsa-wc-form-input-height-small: 1.875rem;
@@ -135,8 +135,8 @@
   --dsa-wc-fieldset-border-color: var(--dsa-color-border-default);
   --dsa-wc-fieldset-border-color-contrasted: var(--dsa-color-border-contrasted);
   --dsa-wc-fieldset-legend-color: var(--dsa-color-text-on-base-primary);
-  --dsa-wc-fieldset-title-font: var(--dsa-font-large-bold);
-  --dsa-wc-fieldset-subtitle-font: var(--dsa-font-small-normal);
+  --dsa-wc-fieldset-title-font: var(--dsa-font-title-s-bold);
+  --dsa-wc-fieldset-subtitle-font: var(--dsa-font-body-s-normal);
   --dsa-wc-checkbox-color: var(--dsa-color-checkbox-primary);
   --dsa-wc-checkbox-color-disabled: var(--dsa-color-checkbox-disabled);
   --dsa-wc-checkbox-color-active: var(
@@ -147,9 +147,9 @@
     --dsa-color-checkbox-box-checked-read-only-on-border
   );
   --dsa-wc-checkbox-background-color: var(--dsa-color-background-base);
-  --dsa-wc-checkbox-font: var(--dsa-font-medium-normal);
-  --dsa-wc-checkbox-font-small: var(--dsa-font-small-normal);
-  --dsa-wc-checkbox-font-large: var(--dsa-font-large-normal);
+  --dsa-wc-checkbox-font: var(--dsa-font-label-m-normal);
+  --dsa-wc-checkbox-font-small: var(--dsa-font-label-s-normal);
+  --dsa-wc-checkbox-font-large: var(--dsa-font-label-l-normal);
   --dsa-wc-checkbox-size: 1.125rem;
   --dsa-wc-checkbox-size-small: 0.875rem;
   --dsa-wc-checkbox-size-large: 1.375rem;
@@ -177,9 +177,9 @@
   --dsa-wc-radio-border-color-readonly: var(--dsa-color-radio-read-only-border);
   --dsa-wc-radio-color-readonly: var(--dsa-color-radio-read-only-on-border);
   --dsa-wc-radio-color-hover: var(--dsa-color-radio-hover);
-  --dsa-wc-radio-label-font: var(--dsa-font-medium-normal);
-  --dsa-wc-radio-label-font-small: var(--dsa-font-small-normal);
-  --dsa-wc-radio-label-font-large: var(--dsa-font-large-normal);
+  --dsa-wc-radio-label-font: var(--dsa-font-label-m-normal);
+  --dsa-wc-radio-label-font-small: var(--dsa-font-label-s-normal);
+  --dsa-wc-radio-label-font-large: var(--dsa-font-label-l-normal);
   --dsa-wc-radio-label-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-radio-label-color-disabled: var(--dsa-color-text-on-base-disabled);
   --dsa-wc-radio-size: 1.125rem;
@@ -318,9 +318,9 @@
     --dsa-color-switch-background-hover
   );
   --dsa-wc-switch-border-color-hover: var(--dsa-color-switch-border-hover);
-  --dsa-wc-switch-font-small: var(--dsa-font-small-normal);
-  --dsa-wc-switch-font-medium: var(--dsa-font-medium-normal);
-  --dsa-wc-switch-font-large: var(--dsa-font-large-normal);
+  --dsa-wc-switch-font-small: var(--dsa-font-label-s-normal);
+  --dsa-wc-switch-font-medium: var(--dsa-font-label-m-normal);
+  --dsa-wc-switch-font-large: var(--dsa-font-label-l-normal);
   --dsa-wc-switch-size-small: 1.75rem;
   --dsa-wc-switch-size-medium: 2rem;
   --dsa-wc-switch-size-large: 2.5rem;
@@ -337,9 +337,9 @@
   --dsa-wc-selectable-card-vertical-gap: 12.5px;
   --dsa-wc-selectable-card-content-gap: var(--dsa-spacing-16);
   --dsa-wc-selectable-card-text-gap: var(--dsa-spacing-4);
-  --dsa-wc-selectable-card-label-font: var(--dsa-font-medium-bold);
+  --dsa-wc-selectable-card-label-font: var(--dsa-font-body-m-bold);
   --dsa-wc-selectable-card-label-color: var(--dsa-color-text-on-base-primary);
-  --dsa-wc-selectable-card-description-font: var(--dsa-font-small-normal);
+  --dsa-wc-selectable-card-description-font: var(--dsa-font-body-s-normal);
   --dsa-wc-selectable-card-description-color: var(
     --dsa-color-text-on-base-secondary
   );
@@ -382,8 +382,8 @@
   --dsa-wc-selectable-card-error-border-color: var(
     --dsa-color-checkbox-button-unchecked-error-border
   );
-  --dsa-wc-tab-font: var(--dsa-font-small-normal);
-  --dsa-wc-tab-font-active-tab: var(--dsa-font-small-bold);
+  --dsa-wc-tab-font: var(--dsa-font-body-s-normal);
+  --dsa-wc-tab-font-active-tab: var(--dsa-font-body-s-bold);
   --dsa-wc-tab-border-radius: 0px;
   --dsa-wc-tab-color: var(--dsa-color-tab-default);
   --dsa-wc-tab-color-disabled: var(--dsa-color-tab-disabled);
@@ -420,8 +420,8 @@
   --dsa-wc-icon-button-size--xlarge: 1.5rem;
   --dsa-wc-icon-button-size--2xlarge: 2.25rem;
   --dsa-wc-card-color: var(--dsa-color-card-on-background);
-  --dsa-wc-card-body-font: var(--dsa-font-medium-normal);
-  --dsa-wc-card-title-font: var(--dsa-font-medium-bold);
+  --dsa-wc-card-body-font: var(--dsa-font-body-m-normal);
+  --dsa-wc-card-title-font: var(--dsa-font-body-m-bold);
   --dsa-wc-card-border-width: 1px;
   --dsa-wc-card-border-color: var(--dsa-color-border-default);
   --dsa-wc-card-border-color-contrasted: var(--dsa-color-border-contrasted);
@@ -440,13 +440,13 @@
   --dsa-wc-card-content-medium-body-padding: var(--dsa-spacing-16);
   --dsa-wc-card-content-small-body-padding: var(--dsa-spacing-16);
   --dsa-wc-card-content-filled-background-color: var(--dsa-color-surface-layer);
-  --dsa-wc-card-content-large-title-font: var(--dsa-font-x-large-bold);
-  --dsa-wc-card-content-medium-title-font: var(--dsa-font-large-bold);
-  --dsa-wc-card-content-small-title-font: var(--dsa-font-medium-bold);
-  --dsa-wc-card-content-subtitle-font: var(--dsa-font-medium-bold);
-  --dsa-wc-card-content-small-subtitle-font: var(--dsa-font-small-bold);
-  --dsa-wc-card-content-content-font: var(--dsa-font-medium-normal);
-  --dsa-wc-card-content-small-content-font: var(--dsa-font-small-normal);
+  --dsa-wc-card-content-large-title-font: var(--dsa-font-title-xl-bold);
+  --dsa-wc-card-content-medium-title-font: var(--dsa-font-title-m-bold);
+  --dsa-wc-card-content-small-title-font: var(--dsa-font-title-s-bold);
+  --dsa-wc-card-content-subtitle-font: var(--dsa-font-body-m-bold);
+  --dsa-wc-card-content-small-subtitle-font: var(--dsa-font-body-m-bold);
+  --dsa-wc-card-content-content-font: var(--dsa-font-body-m-normal);
+  --dsa-wc-card-content-small-content-font: var(--dsa-font-body-m-normal);
   --dsa-wc-card-content-title-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-card-content-subtitle-text-color: var(
     --dsa-color-text-on-base-secondary
@@ -478,13 +478,13 @@
   --dsa-wc-download-card-left-bar-color: var(
     --dsa-color-primitive-colors-identity-purple-500
   );
-  --dsa-wc-download-card-link-font: var(--dsa-font-large-bold);
+  --dsa-wc-download-card-link-font: var(--dsa-font-title-s-bold);
   --dsa-wc-download-card-link-color: var(--dsa-color-text-on-base-primary);
-  --dsa-wc-download-card-description-font: var(--dsa-font-medium-normal);
+  --dsa-wc-download-card-description-font: var(--dsa-font-body-m-normal);
   --dsa-wc-download-card-description-color: var(
     --dsa-color-text-on-base-secondary
   );
-  --dsa-wc-download-card-document-info-font: var(--dsa-font-small-normal);
+  --dsa-wc-download-card-document-info-font: var(--dsa-font-body-s-normal);
   --dsa-wc-download-card-document-info-color: var(
     --dsa-color-text-on-base-secondary
   );
@@ -508,14 +508,14 @@
   --dsa-wc-menu-border-radius: var(--dsa-spacing-4);
   --dsa-wc-menu-padding: var(--dsa-spacing-8) 0;
   --dsa-wc-menu-divider-spacing: 0.5rem;
-  --dsa-wc-menu-item-font: var(--dsa-font-small-normal);
-  --dsa-wc-menu-item-font-current: var(--dsa-font-small-bold);
+  --dsa-wc-menu-item-font: var(--dsa-font-body-s-normal);
+  --dsa-wc-menu-item-font-current: var(--dsa-font-body-s-bold);
   --dsa-wc-menu-item-min-height: 2.5rem;
-  --dsa-wc-menu-item-small-font: var(--dsa-font-x-small-normal);
-  --dsa-wc-menu-item-small-font-current: var(--dsa-font-x-small-bold);
+  --dsa-wc-menu-item-small-font: var(--dsa-font-body-xs-normal);
+  --dsa-wc-menu-item-small-font-current: var(--dsa-font-body-xs-bold);
   --dsa-wc-menu-item-small-min-height: 2rem;
-  --dsa-wc-menu-item-large-font: var(--dsa-font-medium-normal);
-  --dsa-wc-menu-item-large-font-current: var(--dsa-font-medium-bold);
+  --dsa-wc-menu-item-large-font: var(--dsa-font-body-m-normal);
+  --dsa-wc-menu-item-large-font-current: var(--dsa-font-body-m-bold);
   --dsa-wc-menu-item-large-min-height: 3.125rem;
   --dsa-wc-menu-item-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-menu-item-disabled-color: var(--dsa-color-text-on-base-disabled);
@@ -543,7 +543,7 @@
     --dsa-color-menu-menu-item-hover-background
   );
   --dsa-wc-menu-item-checked-color: var(--dsa-color-menu-menu-item-selected);
-  --dsa-wc-menu-label-font: var(--dsa-font-small-bold);
+  --dsa-wc-menu-label-font: var(--dsa-font-body-s-bold);
   --dsa-wc-menu-label-color: var(--dsa-color-text-on-base-secondary);
   --dsa-wc-menu-label-background-color: var(--dsa-color-surface-layer);
   --dsa-wc-menu-label-padding: 0.5rem 1.25rem;
@@ -579,7 +579,7 @@
     --dsa-color-primitive-colors-identity-purple-200
   );
   --dsa-wc-option-disabled-color: var(--dsa-color-text-on-base-disabled);
-  --dsa-wc-option-font: var(--dsa-font-small-normal);
+  --dsa-wc-option-font: var(--dsa-font-body-s-normal);
   --dsa-wc-option-icon-size: 1.25rem;
   --dsa-wc-option-medium-padding-y: var(--dsa-spacing-12);
   --dsa-wc-option-padding-left: var(--dsa-spacing-4);
@@ -587,13 +587,13 @@
   --dsa-wc-option-padding: var(--dsa-wc-option-medium-padding-y)
     var(--dsa-wc-option-padding-right) var(--dsa-wc-option-medium-padding-y)
     var(--dsa-wc-option-padding-left);
-  --dsa-wc-option-small-font: var(--dsa-font-x-small-normal);
+  --dsa-wc-option-small-font: var(--dsa-font-body-xs-normal);
   --dsa-wc-option-small-icon-size: 1.125rem;
   --dsa-wc-option-small-padding-y: var(--dsa-spacing-8);
   --dsa-wc-option-small-padding: var(--dsa-wc-option-small-padding-y)
     var(--dsa-wc-option-padding-right) var(--dsa-wc-option-small-padding-y)
     var(--dsa-wc-option-padding-left);
-  --dsa-wc-option-large-font: var(--dsa-font-medium-normal);
+  --dsa-wc-option-large-font: var(--dsa-font-body-m-normal);
   --dsa-wc-option-large-icon-size: 1.5rem;
   --dsa-wc-option-large-padding-y: var(--dsa-spacing-12);
   --dsa-wc-option-large-padding: var(--dsa-wc-option-large-padding-y)
@@ -604,8 +604,8 @@
     var(--dsa-spacing-8);
   --dsa-wc-option-prefix-suffix-inline-padding: var(--dsa-spacing-8);
   --dsa-wc-option-large-prefix-suffix-inline-padding: var(--dsa-spacing-12);
-  --dsa-wc-badge-small-font: var(--dsa-font-2x-small-bold);
-  --dsa-wc-badge-medium-font: var(--dsa-font-x-small-bold);
+  --dsa-wc-badge-small-font: var(--dsa-font-body-2-xs-bold);
+  --dsa-wc-badge-medium-font: var(--dsa-font-body-xs-bold);
   --dsa-wc-badge-dot-small-padding: 0.25rem;
   --dsa-wc-badge-dot-medium-padding: 0.5rem;
   --dsa-wc-badge-text-small-padding: 0.1875rem 0.3125rem;
@@ -1276,7 +1276,7 @@
   --dsa-wc-button-danger-on-contrasted-menu-loading-spinner-indicator-color: var(
     --dsa-color-spinner-on-base-danger-on-background
   );
-  --dsa-wc-dropdown-font: var(--dsa-font-medium-normal);
+  --dsa-wc-dropdown-font: var(--dsa-font-body-m-normal);
   --dsa-wc-dropdown-panel-background: var(--dsa-color-background-base);
   --dsa-wc-dropdown-panel-box-shadow: var(--dsa-wc-shadow-small);
   --dsa-wc-dropdown-panel-border-radius: var(--dsa-spacing-4);
@@ -1285,13 +1285,13 @@
   --dsa-wc-scrollbar-radius: var(--dsa-radius-4);
   --dsa-wc-tag-border-radius: var(--dsa-radius-32);
   --dsa-wc-tag-icon-spacing: var(--dsa-spacing-4);
-  --dsa-wc-tag-small-font-size: var(--dsa-font-x-small-normal);
+  --dsa-wc-tag-small-font-size: var(--dsa-font-body-xs-normal);
   --dsa-wc-tag-small-height: 1.5rem;
   --dsa-wc-tag-small-padding: 0 0.5rem;
-  --dsa-wc-tag-medium-font-size: var(--dsa-font-small-normal);
+  --dsa-wc-tag-medium-font-size: var(--dsa-font-body-s-normal);
   --dsa-wc-tag-medium-height: 2rem;
   --dsa-wc-tag-medium-padding: 0 0.75rem;
-  --dsa-wc-tag-large-font-size: var(--dsa-font-medium-normal);
+  --dsa-wc-tag-large-font-size: var(--dsa-font-body-m-normal);
   --dsa-wc-tag-large-height: 2.5rem;
   --dsa-wc-tag-large-padding: 0 1rem;
   --dsa-wc-tag-green-700-on-base: var(--dsa-color-tag-simple-green-on-dark);
@@ -1443,7 +1443,7 @@
   --dsa-wc-tag-button-active-active-border-color: var(
     --dsa-color-tag-cliquable-active-pressed-border
   );
-  --dsa-wc-breadcrumb-item-font: var(--dsa-font-small-normal);
+  --dsa-wc-breadcrumb-item-font: var(--dsa-font-body-s-normal);
   --dsa-wc-breadcrumb-item-color: var(
     --dsa-color-button-on-base-navigation-active
   );
@@ -1468,7 +1468,7 @@
   --dsa-wc-split-panel-icon-padding: 0.5rem 0.125rem;
   --dsa-wc-split-panel-width: 4px;
   --dsa-wc-split-panel-hit-area: 24px;
-  --dsa-wc-progress-ring-font: var(--dsa-font-small-normal);
+  --dsa-wc-progress-ring-font: var(--dsa-font-body-s-normal);
   --dsa-wc-progress-ring-color: var(--dsa-color-progress-ring-label);
   --dsa-wc-progress-ring-content-color: var(
     --dsa-color-progress-ring-ring-on-background
@@ -1486,19 +1486,19 @@
   --dsa-wc-input-padding-y: var(--dsa-spacing-8);
   --dsa-wc-input-padding: var(--dsa-wc-input-padding-y)
     var(--dsa-wc-input-padding-x);
-  --dsa-wc-input-text-field-font: var(--dsa-font-small-normal);
-  --dsa-wc-input-text-field-font-small: var(--dsa-font-x-small-normal);
-  --dsa-wc-input-text-field-font-large: var(--dsa-font-medium-normal);
-  --dsa-wc-input-label-font: var(--dsa-font-small-normal);
-  --dsa-wc-input-label-font-small: var(--dsa-font-x-small-normal);
-  --dsa-wc-input-label-font-large: var(--dsa-font-medium-normal);
+  --dsa-wc-input-text-field-font: var(--dsa-font-body-s-normal);
+  --dsa-wc-input-text-field-font-small: var(--dsa-font-body-xs-normal);
+  --dsa-wc-input-text-field-font-large: var(--dsa-font-body-m-normal);
+  --dsa-wc-input-label-font: var(--dsa-font-label-m-normal);
+  --dsa-wc-input-label-font-small: var(--dsa-font-label-s-normal);
+  --dsa-wc-input-label-font-large: var(--dsa-font-label-l-normal);
   --dsa-wc-input-label-color-error: var(--dsa-color-text-on-base-error);
   --dsa-wc-input-label-color-disabled: var(
     --dsa-color-input-text-field-disabled
   );
-  --dsa-wc-input-helper-font: var(--dsa-font-small-normal);
-  --dsa-wc-input-helper-font-small: var(--dsa-font-x-small-normal);
-  --dsa-wc-input-helper-font-large: var(--dsa-font-medium-normal);
+  --dsa-wc-input-helper-font: var(--dsa-font-body-s-normal);
+  --dsa-wc-input-helper-font-small: var(--dsa-font-body-xs-normal);
+  --dsa-wc-input-helper-font-large: var(--dsa-font-body-m-normal);
   --dsa-wc-input-border-width: 1px;
   --dsa-wc-input-border-radius: var(--dsa-spacing-4);
   --dsa-wc-input-icon-color: var(--dsa-color-icon-default);
@@ -1678,7 +1678,7 @@
   --dsa-wc-input-time-picker-unit-selected-color: var(
     --dsa-color-primitive-colors-identity-purple-500
   );
-  --dsa-wc-input-time-picker-unit-font: var(--dsa-font-small-normal);
+  --dsa-wc-input-time-picker-unit-font: var(--dsa-font-body-s-normal);
   --dsa-wc-input-time-picker-unit-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-input-otp-single-fields-gap: var(--dsa-spacing-8);
   --dsa-wc-input-otp-single-field-width-small: 1.5rem;
@@ -1705,9 +1705,9 @@
   --dsa-wc-error-text-on-floating-menu-color: var(
     --dsa-color-text-on-floatting-menu-error
   );
-  --dsa-wc-error-text-font: var(--dsa-font-x-small-normal);
-  --dsa-wc-error-text-font-small: var(--dsa-font-2x-small-normal);
-  --dsa-wc-error-text-font-large: var(--dsa-font-small-normal);
+  --dsa-wc-error-text-font: var(--dsa-font-body-xs-normal);
+  --dsa-wc-error-text-font-small: var(--dsa-font-body-2-xs-normal);
+  --dsa-wc-error-text-font-large: var(--dsa-font-body-s-normal);
   --dsa-wc-success-text-color: var(
     --dsa-color-primitive-colors-feedback-success-500
   );
@@ -1716,15 +1716,15 @@
   );
   --dsa-wc-error-message-panel-container-x-padding: var(--dsa-spacing-32);
   --dsa-wc-error-message-panel-y-padding: var(--dsa-spacing-16);
-  --dsa-wc-error-message-panel-title-font: var(--dsa-font-large-bold);
+  --dsa-wc-error-message-panel-title-font: var(--dsa-font-title-s-bold);
   --dsa-wc-error-message-panel-title-color: var(
     --dsa-color-text-on-base-primary
   );
-  --dsa-wc-error-message-panel-error-code-font: var(--dsa-font-medium-bold);
+  --dsa-wc-error-message-panel-error-code-font: var(--dsa-font-body-m-bold);
   --dsa-wc-error-message-panel-error-code-color: var(
     --dsa-color-text-on-base-secondary
   );
-  --dsa-wc-error-message-panel-description-font: var(--dsa-font-medium-normal);
+  --dsa-wc-error-message-panel-description-font: var(--dsa-font-body-m-normal);
   --dsa-wc-error-message-panel-description-color: var(
     --dsa-color-text-on-base-primary
   );
@@ -1732,7 +1732,7 @@
   --dsa-wc-accordion-header-border-radius: 3px;
   --dsa-wc-accordion-header-open-border-radius: 3px 3px 0px 0px;
   --dsa-wc-accordion-padding: 1rem;
-  --dsa-wc-accordion-font: var(--dsa-font-medium-normal);
+  --dsa-wc-accordion-font: var(--dsa-font-body-m-normal);
   --dsa-wc-accordion-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-accordion-background-color: var(--dsa-color-background-base);
   --dsa-wc-accordion-border-color: var(--dsa-color-accordion-default-border);
@@ -1751,8 +1751,8 @@
     --dsa-color-primitive-colors-neutral-200
   );
   --dsa-wc-accordion-summary-padding: 7px 0px;
-  --dsa-wc-accordion-summary-font: var(--dsa-font-large-bold);
-  --dsa-wc-accordion-small-summary-font: var(--dsa-font-medium-bold);
+  --dsa-wc-accordion-summary-font: var(--dsa-font-title-s-bold);
+  --dsa-wc-accordion-small-summary-font: var(--dsa-font-body-m-bold);
   --dsa-wc-accordion-hover-border-color: var(--dsa-color-border-hover);
   --dsa-wc-accordion-header-hover-background-color: var(
     --dsa-color-accordion-hover-background
@@ -1761,9 +1761,9 @@
   --dsa-wc-select-padding-y: var(--dsa-spacing-4);
   --dsa-wc-select-padding: var(--dsa-wc-select-padding-y)
     var(--dsa-wc-select-padding-x);
-  --dsa-wc-select-input-font: var(--dsa-font-small-normal);
-  --dsa-wc-select-input-font-small: var(--dsa-font-x-small-normal);
-  --dsa-wc-select-input-font-large: var(--dsa-font-medium-normal);
+  --dsa-wc-select-input-font: var(--dsa-font-body-s-normal);
+  --dsa-wc-select-input-font-small: var(--dsa-font-body-xs-normal);
+  --dsa-wc-select-input-font-large: var(--dsa-font-body-m-normal);
   --dsa-wc-select-listbox-divider-spacing: 0.5rem;
   --dsa-wc-select-listbox-padding-inline: 1.75rem;
   --dsa-wc-select-listbox-margin-top: 0.5rem;
@@ -1794,9 +1794,9 @@
   );
   --dsa-wc-multiselect-tag-border-radius: var(--dsa-radius-4);
   --dsa-wc-multiselect-tag-padding-inline: var(--dsa-spacing-4);
-  --dsa-wc-combobox-input-font: var(--dsa-font-small-normal);
-  --dsa-wc-combobox-input-font-small: var(--dsa-font-x-small-normal);
-  --dsa-wc-combobox-input-font-large: var(--dsa-font-medium-normal);
+  --dsa-wc-combobox-input-font: var(--dsa-font-body-s-normal);
+  --dsa-wc-combobox-input-font-small: var(--dsa-font-body-xs-normal);
+  --dsa-wc-combobox-input-font-large: var(--dsa-font-body-m-normal);
   --dsa-wc-combobox-listbox-divider-spacing: 0.5rem;
   --dsa-wc-combobox-listbox-padding-inline: 1.75rem;
   --dsa-wc-combobox-listbox-border-radius: 0.25rem;
@@ -1805,7 +1805,7 @@
   --dsa-wc-combobox-listbox-border-color: var(--dsa-color-border-default);
   --dsa-wc-combobox-listbox-background-color: var(--dsa-color-background-base);
   --dsa-wc-combobox-empty-label-color: var(--dsa-color-text-on-base-secondary);
-  --dsa-wc-combobox-empty-label-font: var(--dsa-font-small-normal);
+  --dsa-wc-combobox-empty-label-font: var(--dsa-font-body-s-normal);
   --dsa-wc-combobox-icon-margin: 0.75rem;
   --dsa-wc-combobox-expand-icon-error-color: var(
     --dsa-color-icon-on-base-error
@@ -1820,17 +1820,17 @@
   --dsa-wc-drawer-filters-spacing: 0.75rem;
   --dsa-wc-drawer-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-drawer-header-padding: 1.25rem 1rem;
-  --dsa-wc-drawer-header-font: var(--dsa-font-medium-bold);
+  --dsa-wc-drawer-header-font: var(--dsa-font-body-m-bold);
   --dsa-wc-drawer-header-actions-gap: 0.25rem;
   --dsa-wc-drawer-filters-header-min-height: 64px;
-  --dsa-wc-drawer-content-font: var(--dsa-font-medium-normal);
+  --dsa-wc-drawer-content-font: var(--dsa-font-body-m-normal);
   --dsa-wc-drawer-footer-border-top: 1px solid var(--dsa-color-border-default);
   --dsa-wc-drawer-footer-button-margin-inline-end: 0.5rem;
   --dsa-wc-tooltip-arrow-size: 6px;
   --dsa-wc-tooltip-arrow-color: var(--dsa-color-tooltip-background);
   --dsa-wc-tooltip-border-radius: var(--dsa-radius-4);
   --dsa-wc-tooltip-background-color: var(--dsa-color-tooltip-background);
-  --dsa-wc-tooltip-font: var(--dsa-font-medium-normal);
+  --dsa-wc-tooltip-font: var(--dsa-font-body-m-normal);
   --dsa-wc-tooltip-color: var(--dsa-color-tooltip-on-background);
   --dsa-wc-tooltip-padding: var(--dsa-spacing-8) var(--dsa-spacing-12);
   --dsa-wc-tree-indent-guide-color: var(--dsa-color-divider-background);
@@ -1842,7 +1842,7 @@
   --dsa-wc-tree-item-icon-padding: var(--dsa-spacing-4);
   --dsa-wc-tree-item-icon-margin-end: var(--dsa-spacing-4);
   --dsa-wc-tree-item-color: var(--dsa-color-tree-item-on-background);
-  --dsa-wc-tree-item-font: var(--dsa-font-medium-normal);
+  --dsa-wc-tree-item-font: var(--dsa-font-body-m-normal);
   --dsa-wc-tree-item-selected-background-color: var(
     --dsa-color-tree-item-selected-background
   );
@@ -1860,7 +1860,7 @@
     --dsa-color-progress-bar-on-indicator-label
   );
   --dsa-wc-progress-bar-border-radius: var(--dsa-spacing-32);
-  --dsa-wc-progress-bar-font: var(--dsa-font-x-small-bold);
+  --dsa-wc-progress-bar-font: var(--dsa-font-body-xs-bold);
   --dsa-wc-progress-bar-height: 1rem;
   --dsa-wc-spinner-track-width: var(--dsa-spacing-4);
   --dsa-wc-spinner-on-base-track-color: var(
@@ -1886,13 +1886,13 @@
   --dsa-wc-avatar-border-radius: 50%;
   --dsa-wc-avatar-border: solid 2px var(--dsa-color-avatar-border);
   --dsa-wc-avatar-small-size: 1.25rem;
-  --dsa-wc-avatar-small-font: var(--dsa-font-x-small-normal);
+  --dsa-wc-avatar-small-font: var(--dsa-font-body-xs-normal);
   --dsa-wc-avatar-medium-size: 2rem;
-  --dsa-wc-avatar-medium-font: var(--dsa-font-small-normal);
+  --dsa-wc-avatar-medium-font: var(--dsa-font-body-s-normal);
   --dsa-wc-avatar-large-size: 2.5rem;
-  --dsa-wc-avatar-large-font: var(--dsa-font-medium-normal);
+  --dsa-wc-avatar-large-font: var(--dsa-font-body-m-normal);
   --dsa-wc-avatar-x-large-size: 3rem;
-  --dsa-wc-avatar-x-large-font: var(--dsa-font-large-normal);
+  --dsa-wc-avatar-x-large-font: var(--dsa-font-title-s-normal);
   --dsa-wc-avatar-group-margin-left: -0.75rem;
   --dsa-wc-stepper-color-progress-complete: var(
     --dsa-color-stepper-indicator-line-complete
@@ -1919,10 +1919,10 @@
     --dsa-color-stepper-indicator-icon-complete-background
   );
   --dsa-wc-stepper-color-index: var(--dsa-color-text-on-base-secondary);
-  --dsa-wc-stepper-font-index: var(--dsa-font-2x-small-normal);
+  --dsa-wc-stepper-font-index: var(--dsa-font-body-2-xs-normal);
   --dsa-wc-stepper-color-title: var(--dsa-color-text-on-base-primary);
-  --dsa-wc-stepper-font-title: var(--dsa-font-medium-bold);
-  --dsa-wc-stepper-font-content: var(--dsa-font-x-small-normal);
+  --dsa-wc-stepper-font-title: var(--dsa-font-body-m-bold);
+  --dsa-wc-stepper-font-content: var(--dsa-font-body-xs-normal);
   --dsa-wc-stepper-color-content: var(--dsa-color-text-on-base-secondary);
   --dsa-wc-stepper-icon-border-width: 1.4px;
   --dsa-wc-stepper-icon-border-style: solid;
@@ -1974,12 +1974,12 @@
   --dsa-wc-link-document-info-floating-menu-color: var(
     --dsa-color-file-download-link-on-floatting-menu-document-info
   );
-  --dsa-wc-link-font-x-large: var(--dsa-font-x-large-normal);
-  --dsa-wc-link-font-large: var(--dsa-font-large-normal);
-  --dsa-wc-link-font: var(--dsa-font-medium-normal);
-  --dsa-wc-link-font-small: var(--dsa-font-small-normal);
-  --dsa-wc-link-font-x-small: var(--dsa-font-x-small-normal);
-  --dsa-wc-link-font-2x-small: var(--dsa-font-2x-small-normal);
+  --dsa-wc-link-font-x-large: var(--dsa-font-title-xl-normal);
+  --dsa-wc-link-font-large: var(--dsa-font-title-s-normal);
+  --dsa-wc-link-font: var(--dsa-font-body-m-normal);
+  --dsa-wc-link-font-small: var(--dsa-font-body-s-normal);
+  --dsa-wc-link-font-x-small: var(--dsa-font-body-xs-normal);
+  --dsa-wc-link-font-2x-small: var(--dsa-font-body-2-xs-normal);
   --dsa-wc-range-slider-background: var(
     --dsa-color-primitive-colors-neutral-200
   );
@@ -2004,7 +2004,7 @@
   --dsa-wc-skip-link-padding-y: var(--dsa-spacing-12);
   --dsa-wc-skip-link-list-padding: var(--dsa-spacing-0);
   --dsa-wc-skip-link-list-gap: var(--dsa-spacing-16);
-  --dsa-wc-skip-link-item-font: var(--dsa-font-medium-bold);
+  --dsa-wc-skip-link-item-font: var(--dsa-font-body-m-bold);
   --dsa-wc-skip-link-item-padding: var(--dsa-spacing-12);
   --dsa-wc-skip-link-item-radius: var(--dsa-radius-4);
   --dsa-wc-skip-link-item-color: var(--dsa-color-skip-link-on-background-link);
@@ -2014,18 +2014,18 @@
   --dsa-wc-skip-link-item-color-active: var(
     --dsa-color-button-on-base-navigation-active
   );
-  --dsa-wc-file-upload-label-font-small: var(--dsa-font-small-bold);
-  --dsa-wc-file-upload-label-font-medium: var(--dsa-font-medium-bold);
-  --dsa-wc-file-upload-label-font-large: var(--dsa-font-large-bold);
-  --dsa-wc-file-upload-description-font-small: var(--dsa-font-x-small-normal);
-  --dsa-wc-file-upload-description-font-medium: var(--dsa-font-small-normal);
-  --dsa-wc-file-upload-description-font-large: var(--dsa-font-medium-normal);
-  --dsa-wc-file-upload-help-text-font-small: var(--dsa-font-x-small-normal);
-  --dsa-wc-file-upload-help-text-font-medium: var(--dsa-font-small-normal);
-  --dsa-wc-file-upload-help-text-font-large: var(--dsa-font-medium-normal);
-  --dsa-wc-file-upload-error-text-font-small: var(--dsa-font-x-small-normal);
-  --dsa-wc-file-upload-error-text-font-medium: var(--dsa-font-small-normal);
-  --dsa-wc-file-upload-error-text-font-large: var(--dsa-font-medium-normal);
+  --dsa-wc-file-upload-label-font-small: var(--dsa-font-label-s-bold);
+  --dsa-wc-file-upload-label-font-medium: var(--dsa-font-label-m-bold);
+  --dsa-wc-file-upload-label-font-large: var(--dsa-font-label-l-bold);
+  --dsa-wc-file-upload-description-font-small: var(--dsa-font-body-xs-normal);
+  --dsa-wc-file-upload-description-font-medium: var(--dsa-font-body-s-normal);
+  --dsa-wc-file-upload-description-font-large: var(--dsa-font-body-m-normal);
+  --dsa-wc-file-upload-help-text-font-small: var(--dsa-font-body-xs-normal);
+  --dsa-wc-file-upload-help-text-font-medium: var(--dsa-font-body-s-normal);
+  --dsa-wc-file-upload-help-text-font-large: var(--dsa-font-body-m-normal);
+  --dsa-wc-file-upload-error-text-font-small: var(--dsa-font-body-xs-normal);
+  --dsa-wc-file-upload-error-text-font-medium: var(--dsa-font-body-s-normal);
+  --dsa-wc-file-upload-error-text-font-large: var(--dsa-font-body-m-normal);
   --dsa-wc-file-upload-clear-icon-small-size: 0.875rem;
   --dsa-wc-file-upload-clear-icon-medium-size: 1rem;
   --dsa-wc-file-upload-clear-icon-large-size: 1.25rem;
@@ -2047,19 +2047,19 @@
   --dsa-wc-footer-logo-height-desktop: 50px;
   --dsa-wc-footer-content-block-spacing: var(--dsa-spacing-16);
   --dsa-wc-footer-content-block-max-width: 800px;
-  --dsa-wc-footer-content-block-title-font: var(--dsa-font-medium-bold);
+  --dsa-wc-footer-content-block-title-font: var(--dsa-font-body-m-bold);
   --dsa-wc-footer-content-block-title-color: var(
     --dsa-color-text-on-base-secondary
   );
   --dsa-wc-footer-content-block-title-margin: 0px;
-  --dsa-wc-footer-content-block-content-font: var(--dsa-font-small-normal);
+  --dsa-wc-footer-content-block-content-font: var(--dsa-font-body-s-normal);
   --dsa-wc-footer-content-block-content-color: var(
     --dsa-color-text-on-base-secondary
   );
   --dsa-wc-footer-content-block-content-margin: 0px;
   --dsa-wc-footer-mandatory-mentions-spacing: var(--dsa-spacing-8);
   --dsa-wc-footer-mandatory-mentions-vertical-size: 12px;
-  --dsa-wc-footer-mandatory-mentions-text-font: var(--dsa-font-x-small-normal);
+  --dsa-wc-footer-mandatory-mentions-text-font: var(--dsa-font-body-xs-normal);
   --dsa-wc-footer-mandatory-mentions-text-color: var(
     --dsa-color-text-on-base-secondary
   );
@@ -2067,9 +2067,9 @@
   --dsa-wc-footer-sitemap-spacing: var(--dsa-spacing-8);
   --dsa-wc-footer-sitemap-list-spacing: var(--dsa-spacing-16);
   --dsa-wc-footer-sitemap-list-vertical-spacing: var(--dsa-spacing-4);
-  --dsa-wc-footer-sitemap-label-font: var(--dsa-font-medium-bold);
+  --dsa-wc-footer-sitemap-label-font: var(--dsa-font-body-m-bold);
   --dsa-wc-footer-sitemap-label-color: var(--dsa-color-text-on-base-secondary);
-  --dsa-wc-footer-sitemap-list-font: var(--dsa-font-small-normal);
+  --dsa-wc-footer-sitemap-list-font: var(--dsa-font-body-s-normal);
   --dsa-wc-footer-sitemap-label-margin: 0px;
   --dsa-wc-header-background: var(--dsa-color-background-base);
   --dsa-wc-header-box-shadow: var(--dsa-wc-shadow-large);
@@ -2088,11 +2088,11 @@
   --dsa-wc-header-sitename-color: var(
     --dsa-color-primitive-colors-identity-purple-500
   );
-  --dsa-wc-header-sitename-font-mobile: var(--dsa-font-small-bold);
-  --dsa-wc-header-sitename-font-desktop: var(--dsa-font-medium-bold);
+  --dsa-wc-header-sitename-font-mobile: var(--dsa-font-body-s-bold);
+  --dsa-wc-header-sitename-font-desktop: var(--dsa-font-body-m-bold);
   --dsa-wc-header-baseline-color: var(--dsa-color-text-on-base-primary);
-  --dsa-wc-header-baseline-font-mobile: var(--dsa-font-x-small-normal);
-  --dsa-wc-header-baseline-font-desktop: var(--dsa-font-small-normal);
+  --dsa-wc-header-baseline-font-mobile: var(--dsa-font-body-xs-normal);
+  --dsa-wc-header-baseline-font-desktop: var(--dsa-font-body-s-normal);
   --dsa-wc-header-search-max-width: 800px;
   --dsa-wc-header-modern-cnsa-logo-width-mobile: 68px;
   --dsa-wc-header-modern-cnsa-logo-width-desktop: 84px;
@@ -2115,15 +2115,15 @@
   --dsa-wc-page-header-padding-x-desktop: 80px;
   --dsa-wc-page-header-title-icon-size-mobile: 2.5rem;
   --dsa-wc-page-header-title-icon-size-desktop: 2rem;
-  --dsa-wc-page-header-title-font-mobile: var(--dsa-font-large-bold);
-  --dsa-wc-page-header-title-font-desktop: var(--dsa-font-x-large-bold);
-  --dsa-wc-page-header-subtitle-font: var(--dsa-font-medium-normal);
-  --dsa-wc-page-header-secondary-text-font: var(--dsa-font-small-normal);
+  --dsa-wc-page-header-title-font-mobile: var(--dsa-font-title-s-bold);
+  --dsa-wc-page-header-title-font-desktop: var(--dsa-font-title-xl-bold);
+  --dsa-wc-page-header-subtitle-font: var(--dsa-font-body-m-normal);
+  --dsa-wc-page-header-secondary-text-font: var(--dsa-font-body-s-normal);
   --dsa-wc-page-header-secondary-text-color: var(
     --dsa-color-text-on-base-secondary
   );
   --dsa-wc-profile-button-border-radius: 40px;
-  --dsa-wc-profile-button-font: var(--dsa-font-small-normal);
+  --dsa-wc-profile-button-font: var(--dsa-font-body-s-normal);
   --dsa-wc-profile-button-background: var(--dsa-color-background-base);
   --dsa-wc-profile-button-background-hover: var(
     --dsa-color-primitive-colors-neutral-100
@@ -2155,7 +2155,7 @@
   --dsa-wc-table-header-cell-skeleton-sheen-color: var(
     --dsa-color-primitive-colors-neutral-300
   );
-  --dsa-wc-table-header-row-font: var(--dsa-font-small-bold);
+  --dsa-wc-table-header-row-font: var(--dsa-font-body-s-bold);
   --dsa-wc-table-header-row-background: var(
     --dsa-color-table-header-cell-default-background
   );
@@ -2165,7 +2165,7 @@
   --dsa-wc-table-cell-border-color: var(--dsa-color-divider-background);
   --dsa-wc-table-cell-border-size: 1px;
   --dsa-wc-table-row-background: var(--dsa-color-background-base);
-  --dsa-wc-table-row-font: var(--dsa-font-small-normal);
+  --dsa-wc-table-row-font: var(--dsa-font-body-s-normal);
   --dsa-wc-table-row-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-table-row-hover-background: var(
     --dsa-color-primitive-colors-identity-purple-100
@@ -2197,7 +2197,7 @@
     hsla(0, 0%, 60%, 0.25);
   --dsa-wc-table-expanded-row-bottom-shadow: inset 0px -11px 10px -12px
     hsla(0, 0%, 60%, 0.25);
-  --dsa-wc-pagination-font: var(--dsa-font-small-normal);
+  --dsa-wc-pagination-font: var(--dsa-font-body-s-normal);
   --dsa-wc-pagination-height-desktop: 56px;
   --dsa-wc-pagination-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-pagination-button-border: solid 1px var(--dsa-color-border-default);
@@ -2213,14 +2213,14 @@
   --dsa-wc-pagination-button-selected-color: hsla(265, 90%, 39%, 1);
   --dsa-wc-pagination-button-disabled-color: hsla(0, 0%, 40%, 1);
   --dsa-wc-pagination-select-border-color: var(--dsa-color-border-default);
-  --dsa-wc-pagination-select-font: var(--dsa-font-x-small-normal);
-  --dsa-wc-pagination-compact-font: var(--dsa-font-medium-normal);
+  --dsa-wc-pagination-select-font: var(--dsa-font-body-xs-normal);
+  --dsa-wc-pagination-compact-font: var(--dsa-font-body-m-normal);
   --dsa-wc-pagination-compact-button-size: 40px;
-  --dsa-wc-filter-button-label-font: var(--dsa-font-small-normal);
+  --dsa-wc-filter-button-label-font: var(--dsa-font-body-s-normal);
   --dsa-wc-filter-button-label-color: var(
     --dsa-wc-input-on-base-text-field-placeholder-color
   );
-  --dsa-wc-filter-button-value-font: var(--dsa-font-small-bold);
+  --dsa-wc-filter-button-value-font: var(--dsa-font-body-s-bold);
   --dsa-wc-filter-button-value-color: var(
     --dsa-color-primitive-colors-identity-purple-500
   );
@@ -2259,11 +2259,11 @@
   --dsa-wc-calendar-radius: var(--dsa-radius-4);
   --dsa-wc-calendar-background-color: var(--dsa-color-background-base);
   --dsa-wc-calendar-font-color: var(--dsa-color-text-on-base-primary);
-  --dsa-wc-calendar-font: var(--dsa-font-small-normal);
+  --dsa-wc-calendar-font: var(--dsa-font-body-s-normal);
   --dsa-wc-calendar-header-padding: var(--dsa-spacing-16);
-  --dsa-wc-calendar-header-font: var(--dsa-font-small-normal);
+  --dsa-wc-calendar-header-font: var(--dsa-font-body-s-normal);
   --dsa-wc-calendar-header-color: var(--dsa-color-datepicker-on-background-day);
-  --dsa-wc-calendar-cell-font: var(--dsa-font-small-normal);
+  --dsa-wc-calendar-cell-font: var(--dsa-font-body-s-normal);
   --dsa-wc-calendar-cell-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-calendar-cell-size: 2.25rem;
   --dsa-wc-calendar-cell-padding: var(--dsa-spacing-8);
@@ -2276,7 +2276,7 @@
   --dsa-wc-calendar-month-year-color: var(
     --dsa-color-primitive-colors-neutral-800
   );
-  --dsa-wc-calendar-month-year-font: var(--dsa-font-medium-normal);
+  --dsa-wc-calendar-month-year-font: var(--dsa-font-body-m-normal);
   --dsa-wc-calendar-cell-selected-color: var(
     --dsa-color-primitive-colors-identity-purple-500
   );
@@ -2293,7 +2293,7 @@
     --dsa-color-table-toolbar-border-active
   );
   --dsa-wc-filter-date-border-radius: var(--dsa-radius-4);
-  --dsa-wc-filter-date-font: var(--dsa-font-small-normal);
+  --dsa-wc-filter-date-font: var(--dsa-font-body-s-normal);
   --dsa-wc-filter-date-background-color: var(
     --dsa-color-table-toolbar-background
   );
@@ -2322,7 +2322,7 @@
   --dsa-wc-filter-date-panel-border-color: var(--dsa-color-border-default);
   --dsa-wc-filter-date-panel-padding: var(--dsa-spacing-16);
   --dsa-wc-filter-date-panel-border-radius: var(--dsa-radius-4);
-  --dsa-wc-navbar-font: var(--dsa-font-small-normal);
+  --dsa-wc-navbar-font: var(--dsa-font-body-s-normal);
   --dsa-wc-navbar-button-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-navbar-button-height-desktop: 48px;
   --dsa-wc-navbar-button-height-mobile: 38px;
@@ -2332,7 +2332,7 @@
   --dsa-wc-navbar-link-padding-mobile: var(--dsa-spacing-10)
     var(--dsa-spacing-40) var(--dsa-spacing-10) var(--dsa-spacing-16);
   --dsa-wc-navbar-button-background-hover: var(--dsa-color-background-hover);
-  --dsa-wc-navbar-button-font-active: var(--dsa-font-small-bold);
+  --dsa-wc-navbar-button-font-active: var(--dsa-font-body-s-bold);
   --dsa-wc-navbar-button-color-active: var(
     --dsa-color-primitive-colors-identity-purple-500
   );
@@ -2347,11 +2347,13 @@
   --dsa-wc-table-of-contents-label-color: var(
     --dsa-color-table-of-content-text-title
   );
-  --dsa-wc-table-of-contents-label-font: var(--dsa-font-small-bold);
+  --dsa-wc-table-of-contents-label-font: var(--dsa-font-body-s-bold);
   --dsa-wc-table-of-contents-current-section-color: var(
     --dsa-color-table-of-content-text-active-anchor
   );
-  --dsa-wc-table-of-contents-current-section-font: var(--dsa-font-small-normal);
+  --dsa-wc-table-of-contents-current-section-font: var(
+    --dsa-font-body-s-normal
+  );
   --dsa-wc-table-of-contents-content-background: var(
     --dsa-color-background-base
   );
@@ -2375,15 +2377,15 @@
   --dsa-wc-quote-details-color: var(--dsa-color-text-on-base-secondary);
   --dsa-wc-quote-border-color: var(--dsa-color-quote-border);
   --dsa-wc-quote-background-color: var(--dsa-color-quote-background);
-  --dsa-wc-quote-blockquote-font: var(--dsa-font-x-large-normal);
-  --dsa-wc-quote-source-font: var(--dsa-font-x-large-bold);
-  --dsa-wc-quote-details-font: var(--dsa-font-medium-normal);
-  --dsa-wc-quote-blockquote-font-small: var(--dsa-font-large-normal);
-  --dsa-wc-quote-source-font-small: var(--dsa-font-large-bold);
-  --dsa-wc-quote-details-font-small: var(--dsa-font-small-normal);
-  --dsa-wc-search-small-input-font: var(--dsa-font-small-normal);
-  --dsa-wc-search-medium-input-font: var(--dsa-font-medium-normal);
-  --dsa-wc-search-large-input-font: var(--dsa-font-medium-normal);
+  --dsa-wc-quote-blockquote-font: var(--dsa-font-title-xl-normal);
+  --dsa-wc-quote-source-font: var(--dsa-font-title-xl-bold);
+  --dsa-wc-quote-details-font: var(--dsa-font-body-m-normal);
+  --dsa-wc-quote-blockquote-font-small: var(--dsa-font-title-s-normal);
+  --dsa-wc-quote-source-font-small: var(--dsa-font-title-s-bold);
+  --dsa-wc-quote-details-font-small: var(--dsa-font-body-s-normal);
+  --dsa-wc-search-small-input-font: var(--dsa-font-body-s-normal);
+  --dsa-wc-search-medium-input-font: var(--dsa-font-body-m-normal);
+  --dsa-wc-search-large-input-font: var(--dsa-font-body-m-normal);
   --dsa-wc-search-input-color: var(--dsa-color-search-text-field-default-input);
   --dsa-wc-search-placeholder-color: var(
     --dsa-color-search-text-field-default-placeholder
@@ -2488,6 +2490,26 @@
   --dsa-wc-breakpoint-medium: 905px;
   --dsa-wc-breakpoint-large: 1240px;
   --dsa-wc-breakpoint-x-large: 1440px;
+  --dsa-font-2x-small-bold: var(--dsa-font-body-2-xs-bold);
+  --dsa-font-2x-small-normal: var(--dsa-font-body-2-xs-normal);
+  --dsa-font-x-small-bold: var(--dsa-font-body-xs-bold);
+  --dsa-font-x-small-bold-underline: var(--dsa-font-body-xs-bold-underline);
+  --dsa-font-x-small-normal: var(--dsa-font-body-xs-normal);
+  --dsa-font-small-bold: var(--dsa-font-body-s-bold);
+  --dsa-font-small-normal: var(--dsa-font-body-s-normal);
+  --dsa-font-small-normal-underline: var(--dsa-font-body-s-normal-underline);
+  --dsa-font-medium-bold: var(--dsa-font-body-m-bold);
+  --dsa-font-medium-normal: var(--dsa-font-body-m-normal);
+  --dsa-font-large-bold: var(--dsa-font-title-s-bold);
+  --dsa-font-large-normal: var(--dsa-font-title-s-normal);
+  --dsa-font-x-large-bold: var(--dsa-font-title-xl-bold);
+  --dsa-font-x-large-normal: var(--dsa-font-title-xl-normal);
+  --dsa-font-2x-large-bold: var(--dsa-font-display-s-bold);
+  --dsa-font-2x-large-normal: var(--dsa-font-display-s-normal);
+  --dsa-font-3x-large-bold: var(--dsa-font-display-m-bold);
+  --dsa-font-3x-large-normal: var(--dsa-font-display-m-normal);
+  --dsa-font-4x-large-bold: var(--dsa-font-display-xl-bold);
+  --dsa-font-4x-large-normal: var(--dsa-font-display-xl-normal);
 }
 
 .dsa-scroll-lock {
@@ -2535,21 +2557,21 @@
 .dsa-link--with-prefix.dsa-link--with-suffix > dsa-icon:last-of-type {
   margin-right: 0;
 }
-.dsa-link--on-sitemap {
+.dsa-link.dsa-link--on-sitemap {
   transition: none;
   border-bottom-style: none;
   color: var(--dsa-color-text-on-layer-primary);
 }
-.dsa-link--on-contrasted {
+.dsa-link.dsa-link--on-contrasted {
   color: var(--dsa-wc-link-on-contrasted-color);
 }
-.dsa-link--on-layer {
+.dsa-link.dsa-link--on-layer {
   color: var(--dsa-wc-link-on-layer-color);
 }
-.dsa-link--floating-menu {
+.dsa-link.dsa-link--floating-menu {
   color: var(--dsa-wc-link-floating-menu-color);
 }
-.dsa-link--standalone {
+.dsa-link.dsa-link--standalone {
   border-bottom: transparent;
 }
 .dsa-link:hover {
@@ -2558,63 +2580,48 @@
     var(--dsa-wc-link-underline-thickness) *
       var(--dsa-wc-link-hover-underline-thickness-multiplier)
   );
-  margin-bottom: 0;
-}
-.dsa-link--with-prefix:hover,
-.dsa-link--with-suffix:hover {
-  border-bottom-color: unset;
-  color: var(--dsa-wc-link-hover-on-base-color);
 }
-.dsa-link--on-sitemap:hover {
+.dsa-link.dsa-link--on-sitemap:hover {
   border-bottom-style: solid;
   border-bottom-width: var(--dsa-wc-link-underline-thickness);
-  color: var(--dsa-color-text-on-layer-primary);
 }
-.dsa-link--on-contrasted:hover {
+.dsa-link.dsa-link--on-contrasted:hover {
   color: var(--dsa-wc-link-hover-on-contrasted-color);
 }
-.dsa-link--on-layer:hover {
+.dsa-link.dsa-link--on-layer:hover {
   color: var(--dsa-wc-link-hover-on-layer-color);
 }
-.dsa-link--floating-menu:hover {
+.dsa-link.dsa-link--floating-menu:hover {
   color: var(--dsa-wc-link-hover-floating-menu-color);
 }
 .dsa-link:visited {
   color: var(--dsa-wc-link-visited-on-base-color);
 }
-.dsa-link--with-prefix:visited,
-.dsa-link--with-suffix:visited {
+.dsa-link.dsa-link--on-sitemap:visited {
   color: var(--dsa-wc-link-visited-on-base-color);
 }
-.dsa-link--on-sitemap:visited {
-  color: var(--dsa-wc-link-visited-on-base-color);
-}
-.dsa-link--on-contrasted:visited {
+.dsa-link.dsa-link--on-contrasted:visited {
   color: var(--dsa-wc-link-visited-on-contrasted-color);
 }
-.dsa-link--on-layer:visited {
+.dsa-link.dsa-link--on-layer:visited {
   color: var(--dsa-wc-link-visited-on-layer-color);
 }
-.dsa-link--floating-menu:visited {
+.dsa-link.dsa-link--floating-menu:visited {
   color: var(--dsa-wc-link-visited-floating-menu-color);
 }
 .dsa-link:active {
   color: var(--dsa-wc-link-active-on-base-color);
 }
-.dsa-link--with-prefix:active,
-.dsa-link--with-suffix:active {
+.dsa-link.dsa-link--on-sitemap:active {
   color: var(--dsa-wc-link-active-on-base-color);
 }
-.dsa-link--on-sitemap:active {
-  color: var(--dsa-wc-link-active-on-base-color);
-}
-.dsa-link--on-contrasted:active {
+.dsa-link.dsa-link--on-contrasted:active {
   color: var(--dsa-wc-link-active-on-contrasted-color);
 }
-.dsa-link--on-layer:active {
+.dsa-link.dsa-link--on-layer:active {
   color: var(--dsa-wc-link-active-on-layer-color);
 }
-.dsa-link--floating-menu:active {
+.dsa-link.dsa-link--floating-menu:active {
   color: var(--dsa-wc-link-active-floating-menu-color);
 }
 .dsa-link:focus-visible {
@@ -2647,8 +2654,7 @@
   display: grid;
   gap: var(--dsa-grid-gap);
   grid-template-columns: repeat(4, 1fr);
-  margin-left: var(--dsa-grid-padding);
-  margin-right: var(--dsa-grid-padding);
+  margin-inline: var(--dsa-grid-padding);
 }
 .dsa-grid-container-with-sidebar {
   --dsa-grid-with-sidebar-gap: 24px;
@@ -2656,8 +2662,7 @@
   display: grid;
   gap: var(--dsa-grid-with-sidebar-gap);
   grid-template-columns: repeat(8, 1fr);
-  margin-left: var(--dsa-grid-with-sidebar-padding);
-  margin-right: var(--dsa-grid-with-sidebar-padding);
+  margin-inline: var(--dsa-grid-with-sidebar-padding);
 }
 @media only screen and (min-width: 600px) {
   .dsa-grid-container {
@@ -2706,8 +2711,7 @@
   width: 328px;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  margin-left: 16px;
-  margin-right: 16px;
+  margin-inline: 16px;
 }
 
 .dsa-table {
@@ -2753,13 +2757,6 @@
   border-block-end: var(--dsa-wc-table-cell-border-size) solid
     var(--dsa-wc-table-cell-border-color);
 }
-.dsa-table-header-cell {
-  padding: var(--dsa-wc-table-header-cell-padding-y)
-    var(--dsa-wc-table-header-cell-padding-x);
-}
-.dsa-table-cell {
-  padding: var(--dsa-wc-table-cell-padding-y) var(--dsa-wc-table-cell-padding-x);
-}
 .dsa-table-header-cell--hover {
   background: var(--dsa-wc-table-header-cell-background-hover);
 }