@odx/ui 5.5.0 → 6.0.0

package/scss/layout/_helpers.scss

@@ -1,54 +1,73 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
 @use '../abstract/utils';
 
+$spacing-token-map: (
+  4: var(--odx-spacing-25),
+  8: var(--odx-spacing-50),
+  12: var(--odx-spacing-75),
+  16: var(--odx-spacing-100),
+  24: var(--odx-spacing-150),
+  36: var(--odx-size-225),
+  48: var(--odx-size-300)
+);
+
 html body {
   .odx-no-margin {
     margin: 0;
   }
 
-  @each $size in (4, 8, 12, 16, 24, 36, 48) {
-    $factor: math.div($size, 24);
-
+  @each $size, $token in $spacing-token-map {
     @each $direction in (top, right, bottom, left) {
       .odx-margin-#{$direction}-#{$size} {
-        @include dimensions.margin($factor, $direction);
+        @if $direction == top {
+          margin-block-start: $token;
+        } @else if $direction == bottom {
+          margin-block-end: $token;
+        } @else if $direction == left {
+          margin-inline-start: $token;
+        } @else if $direction == right {
+          margin-inline-end: $token;
+        }
       }
     }
 
     .odx-margin-x-#{$size} {
-      @include dimensions.margin-x($factor);
+      margin-inline: $token;
     }
 
     .odx-margin-y-#{$size} {
-      @include dimensions.margin-y($factor);
+      margin-block: $token;
     }
 
     .odx-margin-#{$size} {
-      @include dimensions.margin($factor);
+      margin: $token;
     }
   }
 
-  @each $size in (4, 8, 12, 16, 24, 36, 48) {
-    $factor: math.div($size, 24);
-
+  @each $size, $token in $spacing-token-map {
     @each $direction in (top, right, bottom, left) {
       .odx-padding-#{$direction}-#{$size} {
-        @include dimensions.padding($factor, $direction);
+        @if $direction == top {
+          padding-block-start: $token;
+        } @else if $direction == bottom {
+          padding-block-end: $token;
+        } @else if $direction == left {
+          padding-inline-start: $token;
+        } @else if $direction == right {
+          padding-inline-end: $token;
+        }
       }
     }
 
     .odx-padding-x-#{$size} {
-      @include dimensions.padding-x($factor);
+      padding-inline: $token;
     }
 
     .odx-padding-y-#{$size} {
-      @include dimensions.padding-y($factor);
+      padding-block: $token;
     }
 
     .odx-padding-#{$size} {
-      @include dimensions.padding($factor);
+      padding: $token;
     }
   }
 
@@ -58,24 +77,27 @@ html body {
 
   hr,
   .odx-separator {
-    @include dimensions.height(1, math.div(1, 24));
-
     background-color: var(--odx-c-separator);
+    block-size: var(--odx-border-width-thin);
     border: 0;
+    margin-block: var(--odx-spacing-50);
   }
 
   .odx-fs-normal {
-    @include typography.font-weight(normal);
+    font-weight: var(--odx-typography-font-weight-normal);
+    letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
   }
 
   .odx-fs-medium {
-    @include typography.font-weight(medium);
+    font-weight: var(--odx-typography-font-weight-medium);
+    letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
   }
 
   b,
   strong,
   .odx-fs-bold {
-    @include typography.font-weight(semibold);
+    font-weight: var(--odx-typography-font-weight-semibold);
+    letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
   }
 
   em,

package/scss/layout/_layout.scss

@@ -1,6 +1,4 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 
 $columns: 12 !default;
 
@@ -9,8 +7,8 @@ $columns: 12 !default;
 }
 
 :root {
-  --odx-grid-gutter: #{dimensions.get-size(1)};
-  --odx-grid-gutter-small: #{dimensions.get-size(math.div(8, 24))};
+  --odx-grid-gutter: var(--odx-size-150);
+  --odx-grid-gutter-small: var(--odx-size-50);
 
   @include breakpoints.down(phone) {
     --odx-grid-gutter: var(--odx-grid-gutter-small);

package/scss/layout/_text-list.scss

@@ -1,18 +1,15 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-
 .odx-text-list,
 .odx-text-list ol,
 .odx-text-list ul {
-  @include dimensions.margin-y(0.5);
-  @include dimensions.padding(1, left);
+  margin-block: var(--odx-spacing-75);
+  padding-inline-start: var(--odx-spacing-150);
 
   ul,
   ol {
-    @include dimensions.margin(0);
+    margin: 0;
   }
 
   li {
-    @include dimensions.margin(math.div(-1, 24), left);
+    margin-inline-start: calc(var(--odx-vertical-rythm-base-size) * -1 / 24);
   }
 }

package/scss/layout/_typography.scss

@@ -1,40 +1,16 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
-
-@font-face {
-  font-family: 'Draeger Pangea Text';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../assets/fonts/draeger-pangea-text-regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Draeger Pangea Text';
-  font-style: normal;
-  font-weight: 500;
-  src: url('../assets/fonts/draeger-pangea-text-medium.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Draeger Pangea Text';
-  font-style: normal;
-  font-weight: 600;
-  src: url('../assets/fonts/draeger-pangea-text-semibold.woff2') format('woff2');
-}
 
 html {
-  font-size: 62.5%;
+  font-size: var(--odx-typography-base-size);
 }
 
 html body {
-  @include dimensions.line-height(1);
-  @include typography.font-size(0);
-  @include typography.font-weight(normal);
-
   color: var(--odx-c-text);
   font-family: var(--odx-typography-font-family);
+  font-size: var(--odx-typography-font-size-text-md);
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  line-height: var(--odx-typography-line-height-text-md);
 }
 
 /* Deprecated .odx-title. Use .odx-heading instead. Keeping the old classes for compatibility. */
@@ -42,94 +18,107 @@ html body {
 .odx-title,
 [class*='odx-heading-'],
 [class*='odx-title-'] {
-  @include typography.font-weight(semibold);
-
   color: var(--odx-c-display);
+  font-weight: var(--odx-typography-font-weight-semibold);
+  letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
 }
 
 /* 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);
+
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
 }
 
 .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);
+  font-size: var(--odx-typography-font-size-heading-xxl);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+  line-height: var(--odx-typography-line-height-heading-xxl);
+  padding-block: var(--odx-control-spacing-sm);
 
   @include breakpoints.up(tablet) {
-    @include dimensions.line-height(3, math.div(64, 24));
+    padding-block: var(--odx-control-spacing-sm);
   }
 }
 
 .odx-heading-2,
 .odx-title-2 {
-  @include typography.font-weight(medium);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 }
 
 .odx-heading-2,
 .odx-title-2,
 .odx-subtitle-2 {
-  @include dimensions.line-height(2, 1.5);
-  @include typography.font-size(4);
+  font-size: var(--odx-typography-font-size-heading-xl);
+  line-height: var(--odx-typography-line-height-heading-xl);
+  padding-block: var(--odx-control-spacing-md);
 
   @include breakpoints.up(tablet) {
-    @include dimensions.line-height(3, math.div(54, 24));
+    padding-block: calc(var(--odx-vertical-rythm-base-size) * 3 / 8);
   }
 }
 
 .odx-heading-3,
 .odx-title-3,
 .odx-subtitle-3 {
-  @include dimensions.line-height(2, math.div(32, 24));
-  @include typography.font-size(3);
+  font-size: var(--odx-typography-font-size-heading-lg);
+  line-height: var(--odx-typography-line-height-heading-lg);
+  padding-block: var(--odx-control-spacing-lg);
 
   @include breakpoints.up(tablet) {
-    @include dimensions.line-height(2, math.div(42, 24));
+    padding-block: calc(var(--odx-vertical-rythm-base-size) / 8);
   }
 }
 
 .odx-heading-4,
 .odx-title-4,
 .odx-subtitle-4 {
-  @include dimensions.line-height(2, math.div(30, 24));
-  @include typography.font-size(2);
+  font-size: var(--odx-typography-font-size-heading-md);
+  line-height: var(--odx-typography-line-height-heading-md);
+  padding-block: calc(var(--odx-vertical-rythm-base-size) * 3 / 8);
 }
 
 .odx-heading-5,
 .odx-title-5,
 .odx-subtitle-5 {
-  @include dimensions.line-height(1);
-  @include typography.font-size(1);
+  font-size: var(--odx-typography-font-size-heading-sm);
+  line-height: var(--odx-typography-line-height-heading-sm);
 }
 
 .odx-heading-6,
 .odx-title-6,
 .odx-subtitle-6 {
-  @include dimensions.line-height(1);
-  @include typography.font-size(0);
+  font-size: var(--odx-typography-font-size-heading-xs);
+  line-height: var(--odx-typography-line-height-heading-xs);
 }
 
 .odx-text {
-  @include dimensions.line-height(1);
-  @include typography.font-weight(normal);
+  font-size: var(--odx-typography-font-size-text-md);
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  line-height: var(--odx-typography-line-height-text-md);
 
   &--small {
-    @include dimensions.line-height(1, math.div(20, 24));
-    @include typography.font-size(-1);
+    font-size: var(--odx-typography-font-size-text-sm);
+    line-height: var(--odx-typography-line-height-text-sm);
+    padding-block: var(--odx-spacing-12);
   }
 
   &--xsmall {
-    @include dimensions.line-height(1, math.div(16, 24));
-    @include typography.font-size(-2);
+    font-size: var(--odx-typography-font-size-text-xs);
+    line-height: var(--odx-typography-line-height-text-xs);
+    padding-block: var(--odx-control-spacing-sm);
   }
 
   &--emphasized {
-    @include typography.font-weight(semibold);
+    font-weight: var(--odx-typography-font-weight-semibold);
+    letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
   }
 }
 
@@ -139,46 +128,49 @@ html body {
 [class*='odx-display-'],
 [class*='odx-headline-'] {
   color: var(--odx-c-display);
-
-  @include typography.font-weight(medium);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 }
 
 .odx-display-sm,
 .odx-headline-sm {
-  @include dimensions.line-height(2, math.div(40, 24));
-  @include typography.font-size(5);
+  font-size: var(--odx-typography-font-size-display-sm);
+  line-height: var(--odx-typography-line-height-display-sm);
+  padding-block: var(--odx-control-spacing-sm);
 
   @include breakpoints.up(phone) {
-    @include dimensions.line-height(3, math.div(64, 24));
+    padding-block: var(--odx-control-spacing-sm);
   }
 }
 
 .odx-display-md,
 .odx-headline-md {
-  @include dimensions.line-height(2, math.div(42, 24));
-  @include typography.font-size(6);
+  font-size: var(--odx-typography-font-size-display-md);
+  line-height: var(--odx-typography-line-height-display-md);
+  padding-block: calc(var(--odx-vertical-rythm-base-size) * 3 / 8);
 
   @include breakpoints.up(phone) {
-    @include dimensions.line-height(4, math.div(80, 24));
+    padding-block: var(--odx-control-spacing-lg);
   }
 }
 
 .odx-display-lg,
 .odx-headline-lg {
-  @include dimensions.line-height(2, math.div(46, 24));
-  @include typography.font-size(7);
+  font-size: var(--odx-typography-font-size-display-lg);
+  line-height: var(--odx-typography-line-height-display-lg);
+  padding-block: calc(var(--odx-vertical-rythm-base-size) / 24);
 
   @include breakpoints.up(phone) {
-    @include dimensions.line-height(5, math.div(98, 24));
+    padding-block: calc(var(--odx-vertical-rythm-base-size) * 11 / 24);
   }
 }
 
 .odx-display-xl,
 .odx-headline-xl {
-  @include dimensions.line-height(2);
-  @include typography.font-size(8);
+  font-size: var(--odx-typography-font-size-display-xl);
+  line-height: var(--odx-typography-line-height-display-xl);
 
   @include breakpoints.up(phone) {
-    @include dimensions.line-height(5, math.div(98, 24));
+    padding-block: calc(var(--odx-vertical-rythm-base-size) * 11 / 24);
   }
 }

package/scss/line-timeframes-chart.component.scss

@@ -1,7 +1,7 @@
 .odx-line-timeframes-chart {
   .odx-line-timeframes-chart__container {
     display: flex;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+    gap: var(--odx-spacing-150);
     width: 100%;
   }
 
@@ -22,18 +22,18 @@
     &-items {
       display: flex;
       flex-direction: column;
-      gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+      gap: var(--odx-spacing-75);
     }
 
     &-item {
       display: flex;
       flex-direction: column;
-      gap: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+      gap: var(--odx-spacing-25);
 
       &-header {
         align-items: center;
         display: flex;
-        gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+        gap: var(--odx-spacing-37);
       }
 
       &-dot {

package/scss/link.component.scss

@@ -1,16 +1,16 @@
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 .odx-link {
-  @include motion.transition(color background-color);
-  @include utils.interactive($with-box-shadow: false);
-
-  border-radius: var(--odx-v-border-radius-controls);
+  border-radius: var(--odx-border-radius-control);
   color: var(--odx-c-link);
   padding: 0 calc(var(--odx-v-outline-width-bold) + var(--odx-v-outline-box-shadow-width));
   position: relative;
+  transition: var(--odx-motion-transition-default);
+  transition-property: color, background-color;
   user-select: auto;
 
+  @include utils.interactive($with-box-shadow: false);
+
   &:hover {
     color: var(--odx-c-link-hover);
     text-decoration: underline;

package/scss/list-item.component.scss

@@ -1,26 +1,24 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/motion';
-@use '../abstract/typography';
 
 .odx-list-item {
+  @include utils.interactive();
+  @include utils.vertical-center-content();
+
   $root: &;
   $muted-selector: #{$root}--muted;
   $variants: danger, warning;
 
   --separator-color: var(--odx-c-separator);
 
-  @include dimensions.padding-x(math.div(8, 24));
-  @include dimensions.line-height(2, 1);
-  @include motion.transition(border-bottom-color background-color color box-shadow);
-  @include utils.interactive();
-  @include utils.vertical-center-content();
-
   background-color: transparent;
-  border-radius: var(--odx-v-border-radius-controls);
-  gap: dimensions.get-size(math.div(8, 24));
+  border-radius: var(--odx-border-radius-control);
+  gap: var(--odx-spacing-50);
+  line-height: var(--odx-typography-line-height-text-lg);
+  padding-block: var(--odx-spacing-75);
+  padding-inline: var(--odx-control-spacing-inline-lg);
   position: relative;
+  transition: var(--odx-motion-transition-default);
+  transition-property: border-bottom-color, background-color, color, box-shadow;
 
   > [odxListSuffix],
   > [odxListItemSuffix] {
@@ -33,21 +31,21 @@
   }
 
   &::before {
-    @include motion.transition(border-color);
-
     border-bottom: 1px solid var(--separator-color);
     content: '';
     display: block;
     position: absolute;
-    right: dimensions.get-size(math.div(8, 24));
+    right: var(--odx-spacing-50);
     top: 0;
-    width: calc(100% - #{dimensions.get-size(math.div(16, 24))});
-    z-index: var(--odx-v-layer-1);
+    transition: var(--odx-motion-transition-default);
+    transition-property: border-color;
+    width: calc(100% - var(--odx-spacing-100));
+    z-index: var(--odx-z-level-base);
   }
 
   &:hover,
   &:focus-visible {
-    z-index: var(--odx-v-layer-2);
+    z-index: var(--odx-z-level-interactive);
     &:not(#{$muted-selector}) {
       --separator-color: transparent !important;
     }

package/scss/list.component.scss

@@ -1,6 +1,4 @@
-@use 'sass:math';
 @use 'sass:selector';
-@use '../abstract/dimensions';
 
 .odx-list {
   display: block;
@@ -9,7 +7,7 @@
 
   @for $i from 1 through 10 {
     #{$self} .odx-list-item {
-      @include dimensions.padding(math.div(8, 24) + ($i * math.div(32, 24)), left);
+      padding-inline-start: calc(var(--odx-spacing-50) + #{$i} * var(--odx-spacing-100) * 2);
 
       &:first-child {
         --separator-color: var(--odx-c-separator);

package/scss/loading-spinner.component.scss

@@ -1,5 +1,3 @@
-@use 'sass:math';
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 :root {
@@ -27,14 +25,14 @@
     scroll-behavior: contain;
     top: 0;
     width: 100%;
-    z-index: var(--odx-v-layer-2);
+    z-index: var(--odx-z-level-overlay);
   }
 
   &__backdrop {
-    @include motion.transition(background-color);
-
     background-color: transparent;
     opacity: 0.8;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color;
   }
 
   .odx-circular-progress {
@@ -44,7 +42,7 @@
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    z-index: var(--odx-v-layer-3);
+    z-index: var(--odx-z-level-topmost);
 
     &__indicator {
       stroke: var(--odx-c-primary);

package/scss/logo.component.scss

@@ -1,20 +1,14 @@
-@use '../abstract/dimensions';
 @use '../abstract/utils';
 
 :root {
   --odx-logo-color: var(--odx-c-primary);
-  --odx-logo-color-inverse: var(--odx-c-text-inverse);
-}
-
-@include utils.theme-selector(dark) {
-  --odx-logo-color: var(--odx-c-text-inverse);
+  --odx-logo-color-inverse: var(--odx-palette-white);
 }
 
 .odx-logo {
-  @include dimensions.height(1);
-
   aspect-ratio: 2.5 / 1;
   background-color: var(--odx-logo-color);
+  block-size: var(--odx-spacing-150);
   display: inline-block;
   mask-image: url('../assets/images/logo.svg');
   mask-repeat: no-repeat;
@@ -24,10 +18,12 @@
   }
 
   &--medium {
-    @include dimensions.height(2, 1.5);
+    block-size: var(--odx-control-height-md);
+    margin-block: var(--odx-spacing-37);
   }
 
   &--large {
-    @include dimensions.height(3, 2.5);
+    block-size: calc(var(--odx-control-height-lg) + var(--odx-spacing-75));
+    margin-block: var(--odx-spacing-37);
   }
 }