@odx/ui 5.4.0 → 6.0.0

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);
   }
 }

package/scss/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/components/accordion-item.component.scss

@@ -1,35 +1,34 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
 @use '../abstract/utils';
 
 .odx-accordion-item {
   $root: &;
 
-  @include motion.transition(color);
-  @include dimensions.padding(math.div(6, 24), top);
-  @include dimensions.padding(math.div(5, 24), bottom);
-
-  border-bottom: 1px solid var(--odx-input-control-outline-color);
+  border-bottom: var(--odx-border-width-thin) solid var(--odx-input-control-outline-color);
   display: block;
+  padding-block-end: calc(var(--odx-control-spacing-md) - var(--odx-border-width-thin));
+  padding-block-start: var(--odx-control-spacing-md);
+  transition: var(--odx-motion-transition-default);
+  transition-property: color;
 
   &__panel {
-    @include dimensions.padding-x(math.div(8, 24));
-    @include dimensions.line-height(1.5, 1);
-    @include motion.transition(background-color);
     @include utils.interactive();
 
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     display: grid;
     grid-template-columns: 1fr auto;
+    line-height: var(--odx-typography-line-height-text-md);
+    padding-block: var(--odx-control-spacing-inline-md);
+    padding-inline: var(--odx-control-spacing-inline-lg);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color;
 
     &:hover {
-      background-color: var(--blue-700-5);
+      background-color: var(--odx-color-background-transparent-hover);
     }
 
     #{$root}--expanded > & {
-      @include typography.font-weight(medium);
+      font-weight: var(--odx-typography-font-weight-medium);
+      letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 
       #{$root}__icon {
         transform: rotateX(180deg);
@@ -38,18 +37,18 @@
   }
 
   &__icon {
-    @include motion.transition(transform);
-
     transform: rotate(0deg);
+    transition: var(--odx-motion-transition-default);
+    transition-property: transform;
   }
 
   &__slot {
-    @include motion.transition(grid-template-rows);
-    @include dimensions.padding-x(math.div(8, 24));
-
     display: grid;
     grid-template-rows: 0fr;
     overflow: hidden;
+    padding-inline: var(--odx-control-spacing-inline-md);
+    transition: var(--odx-motion-transition-default);
+    transition-property: grid-template-rows;
 
     #{$root}--expanded > & {
       grid-template-rows: 1fr;
@@ -61,17 +60,17 @@
     }
 
     &-content {
-      @include motion.transition(opacity visibility);
-
       min-height: 0;
       opacity: 0;
+      transition: var(--odx-motion-transition-default);
+      transition-property: opacity, visibility;
       visibility: hidden;
 
       &::before,
       &::after {
         content: '';
         display: block;
-        height: dimensions.get-size(math.div(8, 24));
+        height: var(--odx-spacing-37);
         width: 100%;
       }
     }

package/scss/components/action-group.component.scss

@@ -1,12 +1,12 @@
-@use '../abstract/dimensions';
 @use '../abstract/utils';
 @use 'button.component';
 
 .odx-action-group {
-  @include dimensions.height(2, 1.5);
-  @include utils.vertical-center-content(true);
+  block-size: var(--odx-control-height-md);
+  gap: var(--odx-spacing-layout-sm);
+  margin-block: var(--odx-spacing-37);
 
-  gap: dimensions.get-size(0.25);
+  @include utils.vertical-center-content(true);
 
   &--reverse {
     flex-direction: row-reverse;
@@ -16,10 +16,10 @@
     /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
     @extend .odx-button--ghost;
 
-    color: var(--odx-c-text);
+    color: inherit;
 
     &:hover {
-      color: var(--odx-c-text);
+      color: inherit;
     }
   }
 }

package/scss/components/anchor-navigation.component.scss

@@ -1,6 +1,3 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 .odx-anchor-navigation {
@@ -9,7 +6,7 @@
   $root: &;
 
   display: flex;
-  gap: dimensions.get-size(math.div(8, 24));
+  gap: var(--odx-spacing-layout-sm);
 
   &:is(:not(#{$root}--vertical)) {
     box-shadow: inset 0 calc(var(--odx-v-outline-width-bold) * -1) 0 0 var(--odx-control-outline-color);
@@ -22,25 +19,25 @@
   }
 
   &-item {
-    @include motion.transition(border-color background-color);
-
     display: inline-flex;
-    min-width: dimensions.get-size(math.div(80, 24));
+    min-width: var(--odx-size-500);
+    transition: var(--odx-motion-transition-default);
+    transition-property: border-color, background-color;
 
     &:has([aria-current='page']) {
       --active-link-indicator-color: var(--odx-c-link-active);
     }
 
     .odx-link {
-      @include dimensions.padding-x(math.div(12, 24));
-      @include dimensions.padding-y(math.div(6, 24));
       @include utils.interactive();
 
       color: var(--odx-c-text);
       display: flex;
+      padding-block: var(--odx-control-spacing-inline-md);
+      padding-inline: var(--odx-spacing-layout-md);
 
       &:not(:empty) {
-        gap: dimensions.get-size(math.div(4, 24));
+        gap: var(--odx-spacing-layout-sm);
       }
 
       &[aria-current='page'] {