@odx/ui 5.4.0 → 6.0.0

package/scss/card.component.scss

@@ -1,7 +1,4 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/typography';
 @use '../abstract/utils';
 @use '../layout/typography' as *;
@@ -20,24 +17,25 @@
   $root: &;
   $main-padding: var(--odx-card-main-padding);
 
-  --odx-card-main-padding: #{dimensions.get-size(math.div(12, 24))};
-  --odx-card-gap: #{dimensions.get-size(math.div(12, 24))};
+  --odx-card-main-padding: var(--odx-spacing-75);
+  --odx-card-gap: var(--odx-spacing-75);
 
   background-color: var(--odx-c-background-content);
   behavior: button;
   border: var(--odx-v-outline-width-bold) solid transparent;
-  border-radius: var(--odx-v-border-radius);
+  border-radius: var(--odx-border-radius-md);
   container-name: card-root;
   container-type: inline-size;
   display: block;
   padding: $main-padding;
   position: relative;
+  transition: var(--odx-motion-transition-default);
+  transition-property: box-shadow, color, border-color;
 
-  @include motion.transition(box-shadow color border-color);
   @include utils.interactive();
 
   &--image-card {
-    --odx-card-main-padding: #{dimensions.get-size(1)};
+    --odx-card-main-padding: var(--odx-spacing-150);
 
     overflow: clip;
   }
@@ -63,15 +61,13 @@
 
     #{$root}--launch-tile &,
     #{$root}--launch-tile-centered & {
-      @include dimensions.padding-y(0.5);
-      @include dimensions.padding-x(math.div(8, 24));
-
-      gap: dimensions.get-size(math.div(16, 24));
+      gap: var(--odx-spacing-100);
+      padding-block: var(--odx-size-125);
+      padding-inline: var(--odx-control-spacing-inline-lg);
 
       @include breakpoints.up(phone) {
-        @include dimensions.padding(1, bottom);
-
-        gap: dimensions.get-size(1);
+        gap: var(--odx-spacing-150);
+        padding-block-end: var(--odx-spacing-150);
       }
     }
   }
@@ -82,29 +78,56 @@
     display: block;
     margin: $img-margin $img-margin 0 $img-margin;
     max-height: var(--odx-card-image-max-height);
-    max-width: max-content;
+
+    /* allow the image container to span the card width (including the card padding)
+     so aspect-ratio can compute height. We compute width as 100% + 2 * padding
+     and keep the negative margins so the element visually spans the card edges. */
+    max-width: none;
     overflow: clip;
+    width: calc(100% + (#{$main-padding} * 2));
+
+    &__img {
+      aspect-ratio: var(--odx-card-image-aspect-ratio);
+      display: block;
+      max-height: var(--odx-card-image-max-height);
+      overflow: hidden;
+      position: relative; /* required for ngOptimizedImage's img[fill] */
+      width: 100%;
+    }
+
+    /* Fallback when aspect-ratio is "auto": ensure the image area has a usable height
+       so ngSrc[fill] (absolutely positioned img) has a non-zero container. The
+       host gets the class `has-aspect-auto` from the component when
+       imageRatio resolves to 'auto'. The fallback height can be overridden by
+       setting --odx-card-image-fallback-height. */
+    &.has-aspect-auto.has-fill {
+      #{$root}-image__img {
+        max-height: var(--odx-card-image-max-height);
+        min-height: var(--odx-card-image-fallback-height, 200px);
+      }
+    }
 
     img {
       aspect-ratio: var(--odx-card-image-aspect-ratio);
       display: block;
       height: auto;
       max-width: 100%;
-      object-fit: cover;
+      object-fit: var(--odx-card-image-object-fit);
     }
   }
 
   .odx-chip-list-row:has(.odx-chip) {
     left: $main-padding;
-    padding: dimensions.get-size(math.div(6, 24)) 0;
+    padding: var(--odx-spacing-37) 0;
     position: absolute;
     top: $main-padding;
-    width: calc(100% - dimensions.get-size(math.div(40, 24)) - #{$main-padding} - dimensions.get-size(math.div(30, 24)));
+    width: calc(100% - var(--odx-size-250) - #{$main-padding} - calc(var(--odx-vertical-rythm-base-size) * (30 / 24)));
+    z-index: var(--odx-z-level-foreground);
   }
 
   &__content {
     #{$root}--default & {
-      padding-right: dimensions.get-size(math.div(40, 24));
+      padding-right: var(--odx-size-250);
     }
 
     #{$root}--launch-tile &,
@@ -118,26 +141,32 @@
 
   &__title {
     #{$root}--default & {
-      padding-right: dimensions.get-size(math.div(36, 24));
+      padding-right: var(--odx-size-225);
+    }
+
+    #{$root}--launch-tile & {
+      @include breakpoints.container-down(card-root, phone) {
+        margin-inline-end: var(--odx-size-225);
+      }
     }
 
     #{$root}--launch-tile &,
     #{$root}--launch-tile-centered & {
-      font-size: dimensions.get-size(math.div(20, 24));
-      line-height: dimensions.get-size(math.div(30, 24));
+      font-size: var(--odx-size-125);
+      font-weight: var(--odx-typography-font-weight-medium);
+      letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+      line-height: calc(var(--odx-spacing-150) + var(--odx-spacing-25) + var(--odx-spacing-12));
       overflow-wrap: anywhere;
 
-      @include typography.font-weight(medium);
       @include typography.line-clamp(3);
 
       @include breakpoints.up(phone) {
-        @include dimensions.margin-y(math.div(9, 24));
-
-        font-size: dimensions.get-size(math.div(25, 24));
+        font-size: calc(var(--odx-size-125) + var(--odx-spacing-25));
+        margin-block: calc(var(--odx-spacing-75) - var(--odx-spacing-12));
       }
 
       @include breakpoints.container-down(card-root, phone) {
-        margin-inline-end: dimensions.get-size(math.div(36, 24));
+        margin-inline-end: var(--odx-size-225);
       }
     }
   }
@@ -171,11 +200,11 @@
       padding-right: unset;
 
       #{$root}--launch-tile & {
-        @include dimensions.padding-y(1);
+        padding-block: var(--odx-size-250);
       }
 
       #{$root}--launch-tile-centered & {
-        gap: dimensions.get-size(math.div(16, 24));
+        gap: var(--odx-spacing-100);
       }
     }
   }
@@ -183,21 +212,19 @@
   .odx-avatar {
     flex: 0 0 auto;
     height: var(--odx-card-avatar-size);
+    margin-block: var(--odx-spacing-25);
     width: var(--odx-card-avatar-size);
 
-    @include dimensions.margin-y(math.div(4, 24));
-
     @include breakpoints.up(phone) {
-      margin: dimensions.get-size(math.div(4, 24)) auto 0;
+      margin: var(--odx-spacing-25) auto 0;
     }
   }
 
   &__footer {
-    @include dimensions.padding-x(0.5);
-
     display: flex;
-    gap: dimensions.get-size(math.div(12, 24));
+    gap: var(--odx-spacing-75);
     justify-content: flex-end;
+    padding-inline: var(--odx-size-125);
 
     #{$root}--default & {
       display: block;
@@ -213,7 +240,7 @@
         justify-content: center;
       }
 
-      padding-bottom: dimensions.get-size(math.div(12, 24));
+      padding-bottom: var(--odx-spacing-75);
     }
 
     .odx-button {

package/scss/cdk/active-indicator.scss

@@ -1,13 +1,11 @@
-@use '../abstract/motion';
-
 .odx-cdk-active-indicator {
-  @include motion.transition(all);
-
   opacity: 0;
   pointer-events: none;
   position: absolute;
   transform-origin: 0 0;
-  z-index: var(--odx-v-layer-1);
+  transition: var(--odx-motion-transition-default);
+  transition-property: all;
+  z-index: var(--odx-z-level-foreground);
 
   &--horizontal {
     left: 0;

package/scss/cdk/connected-overlay.scss

@@ -1,12 +1,4 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
-@use '../abstract/utils';
-
 .odx-cdk-connected-overlay {
-  @include motion.transition(opacity visibility overlay);
-
   background: transparent;
   border: 0;
   color: var(--odx-c-text);
@@ -16,7 +8,9 @@
   padding: 0;
   position: fixed;
   transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
+  transition: var(--odx-motion-transition-default);
   transition-behavior: allow-discrete;
+  transition-property: opacity, visibility, overlay;
 
   &.force-hidden {
     display: none;
@@ -56,8 +50,8 @@
 }
 
 .odx-cdk-connected-overlay-arrow {
-  height: dimensions.get-size(0.5);
+  block-size: var(--odx-spacing-75);
+  inline-size: var(--odx-spacing-75);
   position: fixed;
   transform: rotate(45deg);
-  width: dimensions.get-size(0.5);
 }

package/scss/chart-footer.component.scss

@@ -1,21 +1,21 @@
-.odx-chart-footer {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.75);
-  justify-content: flex-end;
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-  width: 100%;
-
-  .legend-item {
-    align-items: center;
-    display: flex;
-    font-size: calc(var(--odx-typography-base-size) * 0.875);
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
-  }
-
-  .legend-dot {
-    border-radius: 50%;
-    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
-    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
-  }
-}
+.odx-chart-footer {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-100);
+  justify-content: flex-end;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .legend-item {
+    align-items: center;
+    display: flex;
+    font-size: calc(var(--odx-typography-base-size) * 0.875);
+    gap: var(--odx-control-spacing-inline-md);
+  }
+
+  .legend-dot {
+    border-radius: 50%;
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+  }
+}

package/scss/chart-header.component.scss

@@ -1,49 +1,49 @@
-.odx-chart-header {
-  display: flex;
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-  width: 100%;
-
-  .odx-chart-header__actions {
-    display: none;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-    margin-left: auto;
-  }
-}
-
-.odx-chart-header--center {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  justify-content: center;
-  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-}
-
-.odx-chart-header--split,
-.odx-chart-header--controls,
-.odx-chart-header--toggle,
-.odx-chart-header--textlink {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  justify-content: space-between;
-  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-
-  .odx-chart-header__actions {
-    align-items: center;
-    display: flex;
-  }
-}
-
-.odx-chart-header--controls {
-  .odx-chart-header__actions form {
-    align-items: center;
-    display: flex;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-
-    .odx-select__trigger {
-      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
-    }
-  }
-}
+.odx-chart-header {
+  display: flex;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .odx-chart-header__actions {
+    display: none;
+    gap: var(--odx-spacing-75);
+    margin-left: auto;
+  }
+}
+
+.odx-chart-header--center {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-75);
+  justify-content: center;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+}
+
+.odx-chart-header--split,
+.odx-chart-header--controls,
+.odx-chart-header--toggle,
+.odx-chart-header--textlink {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-75);
+  justify-content: space-between;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+
+  .odx-chart-header__actions {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.odx-chart-header--controls {
+  .odx-chart-header__actions form {
+    align-items: center;
+    display: flex;
+    gap: var(--odx-spacing-75);
+
+    .odx-select__trigger {
+      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
+    }
+  }
+}

package/scss/charts/colors/_color-palettes.scss

@@ -1,34 +1,34 @@
 :root {
-  --odx-charts-series-blue-500: var(--blue-500);
-  --odx-charts-series-cyan-500: var(--cyan-500);
-  --odx-charts-series-aqua-500: #15dcc4;
-  --odx-charts-series-ocean-500: #1cb4d8;
-  --odx-charts-series-indigo-500: #6a53e6;
-  --odx-charts-series-purple-500: #8f32e2;
-  --odx-charts-series-berry-500: #ee1b80;
-  --odx-charts-series-violet-500: #b318d4;
-  --odx-charts-series-gray-medium-50-500: var(--draeger-cool-gray-50);
-  --odx-charts-series-gray-medium-25-500: var(--draeger-cool-gray-25);
+  --odx-charts-series-blue-500: var(--odx-color-chart-brand-blue);
+  --odx-charts-series-cyan-500: var(--odx-color-chart-brand-cyan);
+  --odx-charts-series-aqua-500: var(--odx-color-chart-additional-aqua);
+  --odx-charts-series-ocean-500: var(--odx-color-chart-additional-ocean);
+  --odx-charts-series-indigo-500: var(--odx-color-chart-additional-indigo);
+  --odx-charts-series-purple-500: var(--odx-color-chart-additional-purple);
+  --odx-charts-series-berry-500: var(--odx-color-chart-additional-berry);
+  --odx-charts-series-violet-500: var(--odx-color-chart-additional-violet);
+  --odx-charts-series-gray-medium-50-500: var(--odx-color-chart-brand-gray);
+  --odx-charts-series-gray-medium-25-500: var(--odx-color-chart-brand-gray-subtle);
 
-  --odx-charts-series-blue-700: var(--blue-700);
-  --odx-charts-series-cyan-700: var(--cyan-700);
-  --odx-charts-series-aqua-700: #09a491;
-  --odx-charts-series-ocean-700: #1c8093;
-  --odx-charts-series-indigo-700: #523cd2;
-  --odx-charts-series-purple-700: #751fc7;
-  --odx-charts-series-berry-700: #cd0b68;
-  --odx-charts-series-violet-700: #9a0aaf;
-  --odx-charts-series-gray-75-dark-700: var(--draeger-cool-gray-75);
-  --odx-charts-series-gray-50-dark-700: var(--draeger-cool-gray-50);
+  --odx-charts-series-blue-700: var(--odx-color-chart-brand-blue-strong);
+  --odx-charts-series-cyan-700: var(--odx-color-chart-brand-cyan-strong);
+  --odx-charts-series-aqua-700: var(--odx-color-chart-additional-aqua-strong);
+  --odx-charts-series-ocean-700: var(--odx-color-chart-additional-ocean-strong);
+  --odx-charts-series-indigo-700: var(--odx-color-chart-additional-indigo-strong);
+  --odx-charts-series-purple-700: var(--odx-color-chart-additional-purple-strong);
+  --odx-charts-series-berry-700: var(--odx-color-chart-additional-berry-strong);
+  --odx-charts-series-violet-700: var(--odx-color-chart-additional-violet-strong);
+  --odx-charts-series-gray-75-dark-700: var(--odx-color-chart-brand-gray-strong);
+  --odx-charts-series-gray-50-dark-700: var(--odx-color-chart-brand-gray);
 
-  --odx-charts-series-blue-100: #a8c4f0;
-  --odx-charts-series-cyan-100: #9dd7ff;
-  --odx-charts-series-aqua-100: #9af4ea;
-  --odx-charts-series-ocean-100: #a0dcff;
-  --odx-charts-series-indigo-100: #a99ded;
-  --odx-charts-series-purple-100: #c693f4;
-  --odx-charts-series-violet-100: #e08ff2;
-  --odx-charts-series-berry-100: #f0a7cb;
+  --odx-charts-series-blue-100: var(--odx-color-chart-brand-blue-subtle);
+  --odx-charts-series-cyan-100: var(--odx-color-chart-brand-cyan-subtle);
+  --odx-charts-series-aqua-100: var(--odx-color-chart-additional-aqua-subtle);
+  --odx-charts-series-ocean-100: var(--odx-color-chart-additional-ocean-subtle);
+  --odx-charts-series-indigo-100: var(--odx-color-chart-additional-indigo-subtle);
+  --odx-charts-series-purple-100: var(--odx-color-chart-additional-purple-subtle);
+  --odx-charts-series-violet-100: var(--odx-color-chart-additional-violet-subtle);
+  --odx-charts-series-berry-100: var(--odx-color-chart-additional-berry-subtle);
 
   --odx-charts-border-color: var(--odx-c-separator);
   --odx-charts-text-color: var(--odx-c-text);
@@ -37,8 +37,8 @@
   --odx-charts-font-family: var(--odx-typography-font-family);
   --odx-charts-font-size: var(--odx-typography-base-size);
 
-  --draeger-cool-gray-15: #cdd2d7;
-  --draeger-cool-gray-25: #b4b9be;
-  --draeger-cool-gray-50: #878c91;
-  --draeger-cool-gray-75: #5a646e;
+  --draeger-cool-gray-15: var(--odx-palette-coolgray-30);
+  --draeger-cool-gray-25: var(--odx-palette-coolgray-40);
+  --draeger-cool-gray-50: var(--odx-palette-coolgray-70);
+  --draeger-cool-gray-75: var(--odx-palette-coolgray-90);
 }

package/scss/charts/components/chart-footer.component.scss

@@ -1,21 +1,21 @@
-.odx-chart-footer {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.75);
-  justify-content: flex-end;
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-  width: 100%;
-
-  .legend-item {
-    align-items: center;
-    display: flex;
-    font-size: calc(var(--odx-typography-base-size) * 0.875);
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
-  }
-
-  .legend-dot {
-    border-radius: 50%;
-    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
-    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
-  }
-}
+.odx-chart-footer {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-100);
+  justify-content: flex-end;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .legend-item {
+    align-items: center;
+    display: flex;
+    font-size: calc(var(--odx-typography-base-size) * 0.875);
+    gap: var(--odx-control-spacing-inline-md);
+  }
+
+  .legend-dot {
+    border-radius: 50%;
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+  }
+}

package/scss/charts/components/chart-header.component.scss

@@ -1,49 +1,49 @@
-.odx-chart-header {
-  display: flex;
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-  width: 100%;
-
-  .odx-chart-header__actions {
-    display: none;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-    margin-left: auto;
-  }
-}
-
-.odx-chart-header--center {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  justify-content: center;
-  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-}
-
-.odx-chart-header--split,
-.odx-chart-header--controls,
-.odx-chart-header--toggle,
-.odx-chart-header--textlink {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  justify-content: space-between;
-  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-
-  .odx-chart-header__actions {
-    align-items: center;
-    display: flex;
-  }
-}
-
-.odx-chart-header--controls {
-  .odx-chart-header__actions form {
-    align-items: center;
-    display: flex;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-
-    .odx-select__trigger {
-      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
-    }
-  }
-}
+.odx-chart-header {
+  display: flex;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .odx-chart-header__actions {
+    display: none;
+    gap: var(--odx-spacing-75);
+    margin-left: auto;
+  }
+}
+
+.odx-chart-header--center {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-75);
+  justify-content: center;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+}
+
+.odx-chart-header--split,
+.odx-chart-header--controls,
+.odx-chart-header--toggle,
+.odx-chart-header--textlink {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-75);
+  justify-content: space-between;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+
+  .odx-chart-header__actions {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.odx-chart-header--controls {
+  .odx-chart-header__actions form {
+    align-items: center;
+    display: flex;
+    gap: var(--odx-spacing-75);
+
+    .odx-select__trigger {
+      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
+    }
+  }
+}

package/scss/charts/components/circle-chart-table.component.scss

@@ -5,7 +5,7 @@
 
   &__container {
     display: flex;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+    gap: var(--odx-spacing-150);
     padding: calc(var(--odx-vertical-rythm-base-size) * 0.5);
     width: 100%;
   }

package/scss/charts/components/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 {