@odx/ui 5.5.0 → 6.0.1

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 {

package/scss/charts/components/mirror-bar-chart.component.scss

@@ -1,7 +1,7 @@
 .odx-mirror-bar-chart {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+  gap: var(--odx-spacing-150);
   width: 100%;
 
   &__title {
@@ -25,7 +25,7 @@
   &__controls {
     display: flex;
     flex-direction: column;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    gap: var(--odx-spacing-75);
   }
 }
 

package/scss/charts/components/multi-axis-box-plot.component.scss

@@ -10,7 +10,7 @@
   &__title {
     align-items: center;
     display: flex;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+    gap: var(--odx-spacing-37);
   }
 
   &__label {
@@ -25,7 +25,7 @@
     height: calc(var(--odx-vertical-rythm-base-size) * 2.0312);
     margin: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
     position: relative;
-    z-index: var(--odx-v-layer-1);
+    z-index: var(--odx-z-level-base);
 
     canvas {
       height: 100% !important;

package/scss/checkbox.component.scss

@@ -1,10 +1,5 @@
-@use 'sass:math';
-@use '../layout/helpers';
 @use '../layout/typography' as *;
-@use '../abstract/dimensions';
-@use '../abstract/typography';
 @use '../abstract/utils';
-@use '../abstract/motion';
 
 .odx-checkbox {
   $root: &;
@@ -21,15 +16,16 @@
   }
 
   &__label {
-    @include dimensions.line-height(1);
-    @include motion.transition(background-color color);
-    @include typography.font-size(0);
-
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     color: inherit;
+    cursor: pointer;
     display: inline-flex;
-    min-height: dimensions.get-size(1);
+    font-size: var(--odx-typography-font-size-text-md);
+    line-height: var(--odx-typography-line-height-text-md);
+    min-block-size: var(--odx-spacing-150);
     padding: 0 2px;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
     user-select: auto;
     vertical-align: top;
 
@@ -47,30 +43,31 @@
   }
 
   &__indicator {
-    @include dimensions.container(1, math.div(20, 24));
-    @include motion.transition(background-color color);
-    @include utils.center-content(true);
-
-    @include utils.with-outline() {
-      outline-offset: var(--odx-v-outline-width-bold);
-    }
-
     background-color: var(--odx-control-background-color);
     border: var(--odx-v-outline-width) solid var(--odx-control-outline-color);
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     box-shadow: 0 0 0 var(--odx-v-outline-width-bold) transparent;
-    color: var(--odx-control-color-selected);
+    color: var(--odx-color-foreground-inverse-static);
     flex: 0 0 auto;
+    height: var(--odx-size-125);
+    margin-block: var(--odx-spacing-12);
     padding: 1px;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
+    width: var(--odx-size-125);
 
-    > .odx-icon {
-      $checkmark-size: math.div(18, 24);
+    @include utils.center-content(true);
 
-      @include dimensions.container($checkmark-size);
-      @include motion.transition(opacity);
+    @include utils.with-outline() {
+      outline-offset: var(--odx-v-outline-width-bold);
+    }
 
-      font-size: dimensions.get-size($checkmark-size);
+    > .odx-icon {
+      font-size: calc(var(--odx-control-addon-size-xs) + 2px);
+      height: calc(var(--odx-vertical-rythm-base-size) * 3 / 4);
       opacity: 0;
+      transition: var(--odx-motion-transition-default);
+      transition-property: opacity;
     }
 
     #{$root}:hover & {
@@ -94,6 +91,10 @@
       color: var(--odx-control-color-disabled-selected);
     }
 
+    #{$root}.is-active:not(.is-disabled):hover & {
+      background-color: var(--odx-color-background-control-selected-hover);
+    }
+
     #{$root}.has-error & {
       background-color: var(--odx-control-background-color-error);
       color: var(--odx-control-color-error);
@@ -123,10 +124,9 @@
   }
 
   &__content {
-    @include dimensions.margin(0.5, left);
-
     display: flex;
     flex-direction: column;
+    margin-inline-start: var(--odx-spacing-75);
     padding-left: 2px;
 
     &:empty {
@@ -136,9 +136,8 @@
   }
 
   &__required {
-    @include typography.font-size(0);
-
     color: var(--odx-c-error-text);
+    font-size: var(--odx-typography-font-size-text-md);
     margin-left: 2px;
     vertical-align: top;
 

package/scss/chip-list.component.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
-@use '../abstract/dimensions';
 
-$form-field-inner-padding: math.div(8, 24);
+$form-field-inner-padding: var(--odx-spacing-50);
 
 .odx-chip-list {
   $root: &;
@@ -12,12 +11,12 @@ $form-field-inner-padding: math.div(8, 24);
 
   &-row {
     &:has(.odx-chip) {
-      @include dimensions.padding($form-field-inner-padding, ('top', 'left', 'right'));
-      @include dimensions.padding(math.div(4, 24), ('bottom'));
-
       display: flex;
       flex-wrap: wrap;
-      gap: dimensions.get-size($form-field-inner-padding);
+      gap: var(--odx-spacing-50);
+      padding-block-end: var(--odx-spacing-25);
+      padding-block-start: $form-field-inner-padding;
+      padding-inline: $form-field-inner-padding;
     }
   }
 }

package/scss/chip.component.scss

@@ -1,21 +1,23 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/motion';
 @use '../abstract/typography';
 
-$sizes: (small 1 -1 math.div(16, 24), medium 1.5 0 1);
+$sizes: (small 1 -1 var(--odx-size-100), medium 1.5 0 var(--odx-size-150));
 $variants: secondary, highlight, success, danger, warning, confirmation;
 
 .odx-chip {
-  $root: &;
+  --odx-c-warning-text: var(--odx-color-foreground-rest-static);
+  --odx-c-confirmation-text: var(--odx-color-foreground-rest-static);
+  --odx-c-success-text: var(--odx-color-foreground-rest-static);
 
-  @include typography.font-weight(medium);
-  @include motion.transition(background-color color);
+  $root: &;
 
   display: inline-flex;
-  gap: dimensions.get-size(math.div(4, 24));
-  min-width: dimensions.get-size(math.div(32, 24));
+  font-weight: var(--odx-typography-font-weight-medium);
+  gap: var(--odx-spacing-25);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+  min-width: var(--odx-size-200);
+  transition: var(--odx-motion-transition-default);
+  transition-property: background-color, color;
   user-select: none;
 
   &:not(#{$root}--secondary) {
@@ -28,10 +30,11 @@ $variants: secondary, highlight, success, danger, warning, confirmation;
 
   &__action {
     @include utils.center-content();
-    @include motion.transition(background-color color);
 
-    border-radius: 50%;
+    border-radius: var(--odx-border-radius-circle);
     margin: 0;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
 
     &:focus-visible {
       box-shadow: 0 0 0 var(--odx-v-outline-box-shadow-width) var(--odx-c-focus-inner);
@@ -55,18 +58,28 @@ $variants: secondary, highlight, success, danger, warning, confirmation;
 
   @each $size, $size-factor, $font-size-factor, $icon-size in $sizes {
     &--#{$size} {
-      @include dimensions.padding-x(math.div($size-factor, 3));
-      @include dimensions.line-height($size-factor);
-      @include typography.font-size($font-size-factor);
+      $font-size-token: var(--odx-typography-font-size-text-md);
+      $action-margin-token: var(--odx-spacing-negative-50);
+
+      @if $font-size-factor == -1 {
+        $font-size-token: var(--odx-typography-font-size-text-sm);
+      }
+
+      @if $size-factor == 1.5 {
+        $action-margin-token: var(--odx-spacing-negative-75);
+      }
 
-      border-radius: dimensions.get-size(math.div($size-factor, 2));
+      border-radius: var(--odx-border-radius-circle);
+      font-size: $font-size-token;
+      line-height: calc(var(--odx-vertical-rythm-base-size) * #{$size-factor});
+      padding-inline: var(--odx-control-spacing-inline-lg);
 
       #{$root}__action {
-        @include dimensions.margin(math.div($size-factor, -3), 'right');
+        margin-inline-end: $action-margin-token;
       }
 
       > .odx-icon {
-        font-size: dimensions.get-size($icon-size);
+        font-size: $icon-size;
       }
     }
   }

package/scss/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/circular-progress.component.scss

@@ -1,6 +1,3 @@
-@use '../abstract/motion';
-@use '../abstract/dimensions';
-
 @keyframes odx-circular-progress-indicator-animation {
   0% {
     stroke-dashoffset: 100;
@@ -44,11 +41,11 @@
   }
 
   &__indicator {
-    @include motion.transition(stroke-dashoffset);
-
     stroke: var(--odx-c-highlight);
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
+    transition: var(--odx-motion-transition-default);
+    transition-property: stroke-dashoffset;
   }
 
   &--indeterminate {
@@ -62,14 +59,16 @@
   }
 
   &--small {
-    @include dimensions.height(2, 1.5);
+    block-size: var(--odx-control-height-md);
+    margin-block: var(--odx-spacing-37);
   }
 
   &--medium {
-    @include dimensions.height(3, 2.5);
+    block-size: calc(var(--odx-control-height-lg) + var(--odx-spacing-75));
+    margin-block: var(--odx-spacing-37);
   }
 
   &--large {
-    @include dimensions.height(4, 4);
+    block-size: var(--odx-size-600);
   }
 }