@odx/ui 4.7.1 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @odx/ui
 
+## 4.8.0
+
+### Minor Changes
+
+- da36d27: - Font weights of Display (former Headlines) are now adjusted to follow Figma guidelines
+  - It is now more clear that maximum font weight we use is the semibold of Pangea (600)
+  - Changed headlines, headings, paragraphs (plural) to display, heading, paragraph (singular)
+
 ## 4.7.1
 
 ### Patch Changes

package/ag-grid-theme.css

@@ -209,7 +209,7 @@
 }
 .ag-theme-odx .ag-paging-panel .ag-paging-row-summary-panel-number,
 .ag-theme-odx .ag-paging-panel .ag-paging-number {
-  font-weight: var(--odx-typography-font-weight-bold);
+  font-weight: var(--odx-typography-font-weight-semibold);
 }
 .ag-theme-odx .ag-checkbox-input {
   background-color: var(--odx-control-background-color);

package/core-theme.css

@@ -135,6 +135,7 @@
 }
 
 :root {
+  --odx-c-display: var(--blue-700);
   --odx-c-headline: var(--blue-700);
   --odx-c-text: var(--blue-700);
   --odx-c-text-inverse: var(--white);
@@ -215,6 +216,7 @@
 
 :root:has([odxTheme=dark]),
 :root:has(.odx-theme-dark) {
+  --odx-c-display: var(--blue-900);
   --odx-c-headline: var(--blue-900);
   --odx-c-text: var(--blue-900);
   --odx-c-text-inverse: var(--black);
@@ -301,12 +303,14 @@
   --odx-typography-font-family: "PangeaText", "Arial", sans-serif;
   --odx-typography-base-size: 1.6rem;
   --odx-typography-base-line-height: 1.5;
-  --odx-typography-font-weight-normal: normal;
+  --odx-typography-font-weight-normal: 400;
   --odx-typography-font-weight-normal-letter-spacing: 0;
   --odx-typography-font-weight-medium: 500;
   --odx-typography-font-weight-medium-letter-spacing: -0.19px;
-  --odx-typography-font-weight-bold: bold;
-  --odx-typography-font-weight-bold-letter-spacing: 0;
+  --odx-typography-font-weight-semibold: 600;
+  --odx-typography-font-weight-semibold-letter-spacing: 0;
+  --odx-typography-font-weight-bold: var(--odx-typography-font-weight-semibold);
+  --odx-typography-font-weight-bold-letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
   --odx-typography-positive-font-scaling-factor: 1.125;
   --odx-typography-negative-font-scaling-factor: 1.2;
 }
@@ -546,7 +550,7 @@ body,
 @font-face {
   font-family: PangeaText;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
   src: url(5eabf29514e9649c8c73.woff2) format("woff2");
 }
 @font-face {
@@ -558,7 +562,7 @@ body,
 @font-face {
   font-family: PangeaText;
   font-style: normal;
-  font-weight: bold;
+  font-weight: 600;
   src: url(eb2051d1f9da906e0b3e.woff2) format("woff2");
 }
 html {
@@ -576,29 +580,38 @@ html body {
   font-family: var(--odx-typography-font-family);
 }
 
-.odx-title, .odx-header__title, .odx-area-header__title, .odx-content h1, .odx-content h2, .odx-content h3, .odx-content h4, .odx-content h5, .odx-content h6, .odx-subtitle, .odx-area-header__subtitle,
+/* Deprecated .odx-title. Use .odx-heading instead. Keeping the old classes for compatibility. */
+.odx-heading, .odx-header__title, .odx-area-header__title, .odx-content h1, .odx-content h2, .odx-content h3, .odx-content h4, .odx-content h5, .odx-content h6,
+.odx-title,
+.odx-subtitle,
 [class*=odx-subtitle-],
+[class*=odx-heading-],
 [class*=odx-title-] {
-  font-weight: var(--odx-typography-font-weight-bold);
-  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
-  color: var(--odx-c-headline);
+  font-weight: var(--odx-typography-font-weight-semibold);
+  letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
+  color: var(--odx-c-display);
 }
 
-.odx-subtitle, .odx-area-header__subtitle,
+/* Deprecated odx-subtitle. Subtitles were removed from figma. Keeping the old classes for compatibility. */
+.odx-subtitle,
 [class*=odx-subtitle-] {
   font-weight: var(--odx-typography-font-weight-normal);
   letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
 }
 
-.odx-title-1, .odx-content h1,
+.odx-heading-1, .odx-content h1,
+.odx-title-1,
 .odx-subtitle-1 {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1.6667);
   font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 }
 @media (min-width: 768px) {
-  .odx-title-1, .odx-content h1,
+  .odx-heading-1, .odx-content h1,
+  .odx-title-1,
   .odx-subtitle-1 {
     padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
     padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
@@ -606,7 +619,14 @@ html body {
   }
 }
 
-.odx-title-2, .odx-area-header--xlarge .odx-area-header__title, .odx-content h2,
+.odx-heading-2, .odx-area-header--xlarge .odx-area-header__title, .odx-content h2,
+.odx-title-2 {
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+}
+
+.odx-heading-2, .odx-area-header--xlarge .odx-area-header__title, .odx-content h2,
+.odx-title-2,
 .odx-subtitle-2 {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.25);
@@ -614,7 +634,8 @@ html body {
   font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
 }
 @media (min-width: 768px) {
-  .odx-title-2, .odx-area-header--xlarge .odx-area-header__title, .odx-content h2,
+  .odx-heading-2, .odx-area-header--xlarge .odx-area-header__title, .odx-content h2,
+  .odx-title-2,
   .odx-subtitle-2 {
     padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.375);
     padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.375);
@@ -622,7 +643,8 @@ html body {
   }
 }
 
-.odx-title-3, .odx-content h3,
+.odx-heading-3, .odx-content h3,
+.odx-title-3,
 .odx-subtitle-3 {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
@@ -630,7 +652,8 @@ html body {
   font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
 }
 @media (min-width: 768px) {
-  .odx-title-3, .odx-content h3,
+  .odx-heading-3, .odx-content h3,
+  .odx-title-3,
   .odx-subtitle-3 {
     padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.125);
     padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.125);
@@ -638,7 +661,8 @@ html body {
   }
 }
 
-.odx-title-4, .odx-error-page__title, .odx-area-header--large .odx-area-header__title, .odx-content h4,
+.odx-heading-4, .odx-error-page__title, .odx-area-header--large .odx-area-header__title, .odx-content h4,
+.odx-title-4,
 .odx-subtitle-4 {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.375);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.375);
@@ -646,25 +670,25 @@ html body {
   font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
 }
 
-.odx-title-5, .odx-area-header--medium .odx-area-header__title, .odx-content h5,
-.odx-subtitle-5,
-.odx-area-header--xlarge .odx-area-header__subtitle {
+.odx-heading-5, .odx-area-header--medium .odx-area-header__title, .odx-area-header--xlarge .odx-area-header__subtitle, .odx-content h5,
+.odx-title-5,
+.odx-subtitle-5 {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
   font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)));
 }
 
-.odx-title-6, .odx-header__title, .odx-area-header__title, .odx-content h6,
-.odx-subtitle-6,
-.odx-area-header__subtitle {
+.odx-heading-6, .odx-header__title, .odx-area-header__title, .odx-content h6,
+.odx-title-6,
+.odx-subtitle-6 {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
   font-size: calc(var(--odx-typography-base-size) * 1);
 }
 
-.odx-text, .odx-content p {
+.odx-text, .odx-area-header__subtitle, .odx-content p {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
@@ -683,14 +707,22 @@ html body {
   line-height: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)*1/var(--odx-typography-negative-font-scaling-factor)));
 }
+.odx-text--emphasized {
+  font-weight: var(--odx-typography-font-weight-semibold);
+  letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
+}
 
+/* .odx-headline is deprecated, use .odx-display instead */
+.odx-display,
 .odx-headline,
+[class*=odx-display-],
 [class*=odx-headline-] {
-  color: var(--odx-c-headline);
-  font-weight: var(--odx-typography-font-weight-normal);
-  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  color: var(--odx-c-display);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 }
 
+.odx-display-sm,
 .odx-headline-sm {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
@@ -698,6 +730,7 @@ html body {
   font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
 }
 @media (min-width: 480px) {
+  .odx-display-sm,
   .odx-headline-sm {
     padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
     padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
@@ -705,6 +738,7 @@ html body {
   }
 }
 
+.odx-display-md,
 .odx-headline-md {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.125);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.125);
@@ -712,6 +746,7 @@ html body {
   font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
 }
 @media (min-width: 480px) {
+  .odx-display-md,
   .odx-headline-md {
     padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
     padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
@@ -719,6 +754,7 @@ html body {
   }
 }
 
+.odx-display-lg,
 .odx-headline-lg {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.0417);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0417);
@@ -726,6 +762,7 @@ html body {
   font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
 }
 @media (min-width: 480px) {
+  .odx-display-lg,
   .odx-headline-lg {
     padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
     padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
@@ -733,6 +770,7 @@ html body {
   }
 }
 
+.odx-display-xl,
 .odx-headline-xl {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
@@ -740,6 +778,7 @@ html body {
   font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
 }
 @media (min-width: 480px) {
+  .odx-display-xl,
   .odx-headline-xl {
     padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
     padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
@@ -2014,8 +2053,8 @@ html body .odx-fs-medium {
 html body b,
 html body strong,
 html body .odx-fs-bold {
-  font-weight: var(--odx-typography-font-weight-bold);
-  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
+  font-weight: var(--odx-typography-font-weight-semibold);
+  letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
 }
 html body em,
 html body .odx-fs-italic {
@@ -2744,8 +2783,8 @@ html body .odx-fs-italic {
 }
 
 :root {
-  --odx-area-header-title-color: var(--odx-c-headline);
-  --odx-area-header-subtitle-color: var(--odx-c-headline);
+  --odx-area-header-title-color: var(--odx-c-display);
+  --odx-area-header-subtitle-color: var(--odx-c-display);
 }
 
 .odx-area-header {
@@ -2843,10 +2882,6 @@ html body .odx-fs-italic {
     padding-top: calc(var(--odx-vertical-rythm-base-size) * 1);
   }
 }
-.odx-area-header--xlarge .odx-area-header__title {
-  font-weight: var(--odx-typography-font-weight-medium);
-  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
-}
 @media (min-width: 768px) {
   .odx-area-header--xlarge .odx-avatar {
     margin-top: calc(var(--odx-vertical-rythm-base-size) * -0.5);
@@ -3028,8 +3063,8 @@ html body .odx-fs-italic {
   color: var(--odx-c-link);
 }
 .odx-breadcrumbs .odx-link:last-child, .odx-breadcrumbs .odx-link:last-child:visited {
-  font-weight: var(--odx-typography-font-weight-bold);
-  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
+  font-weight: var(--odx-typography-font-weight-semibold);
+  letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
   color: var(--odx-c-text);
 }
 
@@ -3123,8 +3158,8 @@ html body .odx-fs-italic {
 .odx-brand-logo {
   color: inherit;
   display: inline-block;
-  font-weight: var(--odx-typography-font-weight-bold);
-  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
+  font-weight: var(--odx-typography-font-weight-semibold);
+  letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
 }
 .odx-brand-logo::before {
   color: var(--odx-c-highlight);
@@ -3429,8 +3464,8 @@ html body .odx-fs-italic {
   margin-left: calc(var(--odx-vertical-rythm-base-size) * -0.1666);
 }
 .odx-calendar-month .odx-calendar__weekdays {
-  font-weight: var(--odx-typography-font-weight-bold);
-  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
+  font-weight: var(--odx-typography-font-weight-semibold);
+  letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
   font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)));
   outline-color: transparent;
   pointer-events: none;
@@ -4475,12 +4510,12 @@ html body .odx-fs-italic {
   margin-inline-end: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-inline-end: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
-.odx-header:has(> .odx-title, > .odx-header__title) > .odx-logo {
+.odx-header:has(> .odx-heading, > .odx-header__title) > .odx-logo {
   display: none;
   margin-inline-end: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
 @media (min-width: 768px) {
-  .odx-header:has(> .odx-title, > .odx-header__title) > .odx-logo {
+  .odx-header:has(> .odx-heading, > .odx-header__title) > .odx-logo {
     display: block;
   }
 }
@@ -5546,8 +5581,8 @@ html body .odx-fs-italic {
      -moz-user-select: none;
           user-select: none;
   font-size: calc(var(--odx-typography-base-size) * 1);
-  font-weight: var(--odx-typography-font-weight-bold);
-  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
+  font-weight: var(--odx-typography-font-weight-semibold);
+  letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
 }
 .odx-notification-center__content {
   display: grid;
@@ -6950,7 +6985,7 @@ html body .odx-fs-italic {
   overflow: auto;
 }
 .odx-toast-item__title {
-  font-weight: var(--odx-typography-font-weight-bold);
+  font-weight: var(--odx-typography-font-weight-semibold);
 }
 .odx-toast-item__description {
   max-height: calc(var(--odx-vertical-rythm-base-size) * 5);
@@ -7391,7 +7426,7 @@ html body .odx-fs-italic {
 }
 .odx-wizard-step__icon {
   font-size: calc(var(--odx-vertical-rythm-base-size) * 0.5417);
-  font-weight: var(--odx-typography-font-weight-bold);
+  font-weight: var(--odx-typography-font-weight-semibold);
   height: calc(var(--odx-vertical-rythm-base-size) * 0.5417);
   visibility: hidden;
   width: calc(var(--odx-vertical-rythm-base-size) * 0.5417);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "4.7.1",
+  "version": "4.8.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/3rdparty/ag-grid/theme.scss

@@ -241,7 +241,7 @@
   .ag-paging-panel {
     .ag-paging-row-summary-panel-number,
     .ag-paging-number {
-      font-weight: var(--odx-typography-font-weight-bold);
+      font-weight: var(--odx-typography-font-weight-semibold);
     }
   }
 

package/scss/components/area-header.component.scss

@@ -7,8 +7,8 @@
 @use '../layout/typography' as *;
 
 :root {
-  --odx-area-header-title-color: var(--odx-c-headline);
-  --odx-area-header-subtitle-color: var(--odx-c-headline);
+  --odx-area-header-title-color: var(--odx-c-display);
+  --odx-area-header-subtitle-color: var(--odx-c-display);
 }
 
 .odx-area-header {
@@ -51,8 +51,8 @@
   }
 
   &__title {
-    @extend .odx-title;
-    @extend .odx-title-6;
+    @extend .odx-heading;
+    @extend .odx-heading-6;
 
     color: var(--odx-area-header-title-color);
     font-weight: 600;
@@ -60,8 +60,7 @@
 
   &__subtitle {
     @include typography.prevent-text-overflow();
-    @extend .odx-subtitle;
-    @extend .odx-subtitle-6;
+    @extend .odx-text;
 
     color: var(--odx-area-header-subtitle-color);
   }
@@ -104,7 +103,7 @@
     }
 
     .odx-area-header__title {
-      @extend .odx-title-5;
+      @extend .odx-heading-5;
     }
   }
 
@@ -112,7 +111,7 @@
     @include dimensions.padding-y(0.5);
 
     .odx-area-header__title {
-      @extend .odx-title-4;
+      @extend .odx-heading-4;
 
       @include breakpoints.down(tablet) {
         @include dimensions.line-height(1);
@@ -138,12 +137,11 @@
     }
 
     .odx-area-header__title {
-      @extend .odx-title-2;
-      @include typography.font-weight(medium);
+      @extend .odx-heading-2;
     }
 
     .odx-area-header__subtitle {
-      @extend .odx-subtitle-5;
+      @extend .odx-heading-5;
     }
 
     .odx-avatar {

package/scss/components/brand-logo.component.scss

@@ -4,7 +4,7 @@
   color: inherit;
   display: inline-block;
 
-  @include typography.font-weight(bold);
+  @include typography.font-weight(semibold);
 
   &::before {
     color: var(--odx-c-highlight);

package/scss/components/breadcrumbs.component.scss

@@ -37,7 +37,7 @@
 
     &:last-child,
     &:last-child:visited {
-      @include typography.font-weight(bold);
+      @include typography.font-weight(semibold);
 
       color: var(--odx-c-text);
     }

package/scss/components/calendar.component.scss

@@ -90,7 +90,7 @@
     }
 
     #{$root}__weekdays {
-      @include typography.font-weight(bold);
+      @include typography.font-weight(semibold);
       @include typography.font-size(-1);
       @include utils.non-interactive();
 

package/scss/components/error-page.component.scss

@@ -12,7 +12,7 @@
   flex-direction: column;
 
   &__title {
-    @extend .odx-title-4;
+    @extend .odx-heading-4;
   }
 
   &__container {

package/scss/components/header.component.scss

@@ -43,8 +43,8 @@
   }
 
   &__title {
-    @extend .odx-title;
-    @extend .odx-title-6;
+    @extend .odx-heading;
+    @extend .odx-heading-6;
     @include typography.prevent-text-overflow();
 
     overflow: hidden;
@@ -56,7 +56,7 @@
     padding-inline-end: dimensions.get-size(0.5);
   }
 
-  &:has(> .odx-title) > .odx-logo {
+  &:has(> .odx-heading) > .odx-logo {
     display: none;
     margin-inline-end: dimensions.get-size(0.5);
 

package/scss/components/notification-center.component.scss

@@ -35,7 +35,7 @@
     user-select: none;
 
     @include typography.font-size(0);
-    @include typography.font-weight(bold);
+    @include typography.font-weight(semibold);
   }
 
   &__content {

package/scss/components/toast-item.component.scss

@@ -31,7 +31,7 @@
   }
 
   &__title {
-    font-weight: var(--odx-typography-font-weight-bold);
+    font-weight: var(--odx-typography-font-weight-semibold);
   }
 
   &__description {

package/scss/components/wizard-step.component.scss

@@ -236,7 +236,7 @@
 
   &__icon {
     font-size: $icon-size;
-    font-weight: var(--odx-typography-font-weight-bold);
+    font-weight: var(--odx-typography-font-weight-semibold);
     height: $icon-size;
     visibility: hidden;
     width: $icon-size;

package/scss/layout/_content.scss

@@ -5,8 +5,8 @@
 .odx-content {
   @for $i from 1 through 6 {
     h#{$i} {
-      @extend .odx-title;
-      @extend .odx-title-#{$i};
+      @extend .odx-heading;
+      @extend .odx-heading-#{$i};
     }
   }
 

package/scss/layout/_helpers.scss

@@ -75,7 +75,7 @@ html body {
   b,
   strong,
   .odx-fs-bold {
-    @include typography.font-weight(bold);
+    @include typography.font-weight(semibold);
   }
 
   em,

package/scss/layout/_typography.scss

@@ -6,7 +6,7 @@
 @font-face {
   font-family: PangeaText;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
   src: url('../assets/fonts/PangeaText-RegularWeb.woff2') format('woff2');
 }
 
@@ -20,7 +20,7 @@
 @font-face {
   font-family: PangeaText;
   font-style: normal;
-  font-weight: bold;
+  font-weight: 600;
   src: url('../assets/fonts/PangeaText-SemiBoldWeb.woff2') format('woff2');
 }
 
@@ -37,29 +37,41 @@ html body {
   font-family: var(--odx-typography-font-family);
 }
 
+/* Deprecated .odx-title. Use .odx-heading instead. Keeping the old classes for compatibility. */
+.odx-heading,
 .odx-title,
+[class*='odx-heading-'],
 [class*='odx-title-'] {
-  @include typography.font-weight(bold);
+  @include typography.font-weight(semibold);
 
-  color: var(--odx-c-headline);
+  color: var(--odx-c-display);
 }
 
+/* Deprecated odx-subtitle. Subtitles were removed from figma. Keeping the old classes for compatibility. */
 .odx-subtitle,
 [class*='odx-subtitle-'] {
   @extend .odx-title;
   @include typography.font-weight(normal);
 }
 
+.odx-heading-1,
 .odx-title-1,
 .odx-subtitle-1 {
   @include dimensions.line-height(2, math.div(40, 24));
   @include typography.font-size(5);
+  @include typography.font-weight(medium);
 
   @include breakpoints.up(tablet) {
     @include dimensions.line-height(3, math.div(64, 24));
   }
 }
 
+.odx-heading-2,
+.odx-title-2 {
+  @include typography.font-weight(medium);
+}
+
+.odx-heading-2,
 .odx-title-2,
 .odx-subtitle-2 {
   @include dimensions.line-height(2, 1.5);
@@ -70,6 +82,7 @@ html body {
   }
 }
 
+.odx-heading-3,
 .odx-title-3,
 .odx-subtitle-3 {
   @include dimensions.line-height(2, math.div(32, 24));
@@ -80,18 +93,21 @@ html body {
   }
 }
 
+.odx-heading-4,
 .odx-title-4,
 .odx-subtitle-4 {
   @include dimensions.line-height(2, math.div(30, 24));
   @include typography.font-size(2);
 }
 
+.odx-heading-5,
 .odx-title-5,
 .odx-subtitle-5 {
   @include dimensions.line-height(1);
   @include typography.font-size(1);
 }
 
+.odx-heading-6,
 .odx-title-6,
 .odx-subtitle-6 {
   @include dimensions.line-height(1);
@@ -111,15 +127,23 @@ html body {
     @include dimensions.line-height(1, math.div(16, 24));
     @include typography.font-size(-2);
   }
+
+  &--emphasized {
+    @include typography.font-weight(semibold);
+  }
 }
 
+/* .odx-headline is deprecated, use .odx-display instead */
+.odx-display,
 .odx-headline,
+[class*='odx-display-'],
 [class*='odx-headline-'] {
-  color: var(--odx-c-headline);
+  color: var(--odx-c-display);
 
-  @include typography.font-weight(normal);
+  @include typography.font-weight(medium);
 }
 
+.odx-display-sm,
 .odx-headline-sm {
   @include dimensions.line-height(2, math.div(40, 24));
   @include typography.font-size(5);
@@ -129,6 +153,7 @@ html body {
   }
 }
 
+.odx-display-md,
 .odx-headline-md {
   @include dimensions.line-height(2, math.div(42, 24));
   @include typography.font-size(6);
@@ -138,6 +163,7 @@ html body {
   }
 }
 
+.odx-display-lg,
 .odx-headline-lg {
   @include dimensions.line-height(2, math.div(46, 24));
   @include typography.font-size(7);
@@ -147,6 +173,7 @@ html body {
   }
 }
 
+.odx-display-xl,
 .odx-headline-xl {
   @include dimensions.line-height(2);
   @include typography.font-size(8);

package/scss/variables/_colors-dark.scss

@@ -1,7 +1,8 @@
 @use '../abstract/utils';
 
 @include utils.theme-selector(dark) {
-  --odx-c-headline: var(--blue-900);
+  --odx-c-display: var(--blue-900);
+  --odx-c-headline: var(--blue-900); // deprecated. Use --odx-c-display instead
 
   --odx-c-text: var(--blue-900);
   --odx-c-text-inverse: var(--black);

package/scss/variables/_colors.scss

@@ -1,5 +1,6 @@
 :root {
-  --odx-c-headline: var(--blue-700);
+  --odx-c-display: var(--blue-700);
+  --odx-c-headline: var(--blue-700); // deprecated. Use --odx-c-display instead
 
   --odx-c-text: var(--blue-700);
   --odx-c-text-inverse: var(--white);

package/scss/variables/_typography.scss

@@ -4,12 +4,14 @@
   --odx-typography-font-family: 'PangeaText', 'Arial', sans-serif;
   --odx-typography-base-size: 1.6rem; // clamp(1.4rem, 0.667vw + 1rem, 1.6rem);
   --odx-typography-base-line-height: 1.5;
-  --odx-typography-font-weight-normal: normal;
+  --odx-typography-font-weight-normal: 400;
   --odx-typography-font-weight-normal-letter-spacing: 0;
   --odx-typography-font-weight-medium: 500;
   --odx-typography-font-weight-medium-letter-spacing: -0.19px;
-  --odx-typography-font-weight-bold: bold;
-  --odx-typography-font-weight-bold-letter-spacing: 0;
+  --odx-typography-font-weight-semibold: 600;
+  --odx-typography-font-weight-semibold-letter-spacing: 0;
+  --odx-typography-font-weight-bold: var(--odx-typography-font-weight-semibold);
+  --odx-typography-font-weight-bold-letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
   --odx-typography-positive-font-scaling-factor: 1.125;
   --odx-typography-negative-font-scaling-factor: 1.2;