@odx/ui 5.5.0 → 6.0.0

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'] {

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

@@ -1,6 +1,4 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
 @use '../abstract/typography';
 @use 'avatar.component';
@@ -12,20 +10,21 @@
 }
 
 .odx-area-header {
-  @include dimensions.padding-x(0.5);
+  padding-block: var(--odx-spacing-layout-md);
+  padding-inline: var(--odx-size-125);
 
   @include breakpoints.up(phone) {
-    @include dimensions.padding-x(1);
+    padding-inline: var(--odx-size-150);
   }
 
   &,
   &__container {
-    column-gap: dimensions.get-size(math.div(20, 24));
+    column-gap: var(--odx-size-125);
     display: flex;
 
     .odx-navigation-back {
-      @include dimensions.margin(-0.75, right);
-      @include dimensions.margin(math.div(5, 24), top);
+      margin-block-start: var(--odx-spacing-25);
+      margin-inline-end: var(--odx-spacing-negative-37);
     }
   }
 
@@ -52,7 +51,7 @@
 
   &__title {
     @extend .odx-heading;
-    @extend .odx-heading-6;
+    @extend .odx-heading-5;
 
     color: var(--odx-area-header-title-color);
     font-weight: 600;
@@ -61,10 +60,10 @@
   &__subtitle {
     @extend .odx-text;
     @include typography.prevent-text-overflow();
-    @include typography.font-size(-1);
-    @include dimensions.line-height(math.div(16, 24));
 
     color: var(--odx-area-header-subtitle-color);
+    font-size: var(--odx-typography-font-size-text-sm);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 2 / 3);
   }
 
   .odx-avatar,
@@ -77,12 +76,12 @@
     @include utils.vertical-center-content();
 
     flex-wrap: wrap;
-    min-height: dimensions.get-size(2);
+    min-block-size: var(--odx-control-height-lg);
   }
 
   &--small {
     .odx-area-header__container {
-      column-gap: dimensions.get-size(math.div(16, 24));
+      column-gap: var(--odx-spacing-100);
     }
   }
 
@@ -107,33 +106,36 @@
 
   &--medium {
     @include breakpoints.up(tablet) {
-      @include dimensions.padding-y(0.5);
+      padding-inline: var(--odx-size-150);
     }
 
     .odx-area-header__title {
-      @extend .odx-heading-5;
+      @extend .odx-heading-4;
+
+      padding-block: 0;
     }
 
     .odx-area-header__subtitle {
-      @include typography.font-size(-1);
-      @include dimensions.line-height(math.div(20, 24));
+      font-size: var(--odx-typography-font-size-text-sm);
+      line-height: calc(var(--odx-vertical-rythm-base-size) * 5 / 6);
     }
   }
 
   &--large {
-    @include dimensions.padding-y(0.5);
+    padding-inline: var(--odx-size-150);
 
     .odx-area-header__title {
-      @extend .odx-heading-4;
+      @extend .odx-heading-3;
 
       @include breakpoints.down(tablet) {
-        @include dimensions.line-height(1);
+        line-height: var(--odx-size-150);
+        padding-block: 0;
       }
     }
 
     .odx-area-header__subtitle {
-      @include typography.font-size(0);
-      @include dimensions.line-height(1);
+      font-size: var(--odx-typography-font-size-text-md);
+      line-height: var(--odx-size-150);
     }
 
     .odx-avatar {
@@ -142,32 +144,32 @@
   }
 
   &--xlarge {
-    @include dimensions.padding-y(0.5);
+    padding-block: var(--odx-size-125);
 
     @include breakpoints.up(tablet) {
-      @include dimensions.padding-y(1);
-
-      gap: dimensions.get-size(1);
+      gap: var(--odx-spacing-150);
+      padding-block: var(--odx-size-250);
 
       .odx-area-header__container {
-        @include dimensions.padding(1, top);
+        padding-block-start: var(--odx-spacing-150);
       }
     }
 
     .odx-area-header__title {
-      @extend .odx-heading-2;
+      @extend .odx-heading-1;
     }
 
     .odx-area-header__subtitle {
-      @extend .odx-heading-5;
-      @include dimensions.line-height(1);
+      @extend .odx-heading-4;
+
+      line-height: var(--odx-size-150);
     }
 
     .odx-avatar {
       @extend .odx-avatar--large;
 
       @include breakpoints.up(tablet) {
-        @include dimensions.margin(-0.5, top);
+        margin-block-start: var(--odx-spacing-negative-75);
       }
     }
 
@@ -175,7 +177,7 @@
       align-self: flex-end;
 
       @include breakpoints.up(tablet) {
-        @include dimensions.margin(-0.5, bottom);
+        margin-block-end: var(--odx-spacing-negative-75);
       }
     }
   }

package/scss/components/autocomplete.component.scss

@@ -1,5 +1,3 @@
-@use '../abstract/dimensions';
-
 .odx-autocomplete {
   &__trigger {
     height: 100%;
@@ -7,8 +5,7 @@
 
   &__control {
     height: 100%;
+    min-block-size: var(--odx-control-height-md);
     width: 100%;
-
-    @include dimensions.min-height(1.5);
   }
 }

package/scss/components/avatar.component.scss

@@ -1,33 +1,74 @@
 @use 'sass:math';
+@use 'sass:map';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
 @use '../abstract/typography';
 
+$avatar-font-size-map: (
+  -2: var(--odx-typography-font-size-text-xs),
+  -1: var(--odx-typography-font-size-text-sm),
+  0: var(--odx-typography-font-size-text-md),
+  1: var(--odx-typography-font-size-heading-md),
+  2: var(--odx-typography-font-size-heading-lg),
+  3: var(--odx-typography-font-size-heading-xl),
+  4: var(--odx-typography-font-size-heading-xxl)
+);
+
 @mixin avatar-size($size-factor, $line-height-factor, $font-size, $icon-factor) {
-  @include dimensions.container($size-factor, $line-height-factor);
-  @include typography.font-size($font-size);
+  $resolved-line-height-factor: $size-factor;
+
+  @if $line-height-factor {
+    $resolved-line-height-factor: $line-height-factor;
+  }
+
+  $line-size: calc(var(--odx-vertical-rythm-base-size) * #{$resolved-line-height-factor});
+  $margin-factor: math.div($size-factor - $resolved-line-height-factor, 2);
+  $margin-size: calc(var(--odx-vertical-rythm-base-size) * #{$margin-factor});
+  $font-size-token: map.get($avatar-font-size-map, $font-size);
+
+  @if not $font-size-token {
+    $font-size-token: var(--odx-typography-font-size-text-md);
+  }
+
+  font-size: $font-size-token;
+  height: $line-size;
+  margin-block: $margin-size;
+  width: $line-size;
 
   > .odx-icon,
   > .odx-icon[class*='odx-icon--'] {
-    @include dimensions.container($icon-factor);
+    $icon-size-token: null;
+
+    @if $icon-factor == 1 {
+      $icon-size-token: var(--odx-size-150);
+    } @else if $icon-factor == 1.5 {
+      $icon-size-token: var(--odx-size-225);
+    } @else if $icon-factor == 2.25 {
+      $icon-size-token: var(--odx-typography-font-size-display-lg);
+    } @else {
+      $icon-size-token: calc(var(--odx-vertical-rythm-base-size) * #{$icon-factor});
+    }
 
-    font-size: dimensions.get-size($icon-factor);
+    font-size: $icon-size-token;
+    height: $icon-size-token;
+    width: $icon-size-token;
   }
 }
 
 .odx-avatar {
   @include utils.center-content(true);
-  @include typography.font-weight(medium);
-  @include typography.prevent-text-overflow();
 
-  background-color: var(--blue-700-10);
-  border-radius: 50%;
+  background-color: var(--odx-color-background-neutral-rest);
+  border-radius: var(--odx-border-radius-circle);
   color: var(--odx-c-text);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
   position: relative;
   user-select: none;
   vertical-align: middle;
 
+  @include typography.prevent-text-overflow();
+
   &--small {
     @include avatar-size(2, 1.5, 0, 1);
   }
@@ -49,7 +90,7 @@
   }
 
   &--rectangle {
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
   }
 
   &:has(img) {
@@ -63,6 +104,6 @@
     position: absolute;
     top: 0;
     width: 100%;
-    z-index: var(--odx-v-layer-1);
+    z-index: var(--odx-z-level-foreground);
   }
 }

package/scss/components/badge.component.scss

@@ -1,31 +1,29 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/typography';
 
 :root {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
 .odx-badge {
-  $badge-size: dimensions.get-size(math.div(2, 3));
+  $badge-size: var(--odx-spacing-100);
 
-  @include dimensions.padding-x(math.div(1, 8));
-  @include utils.center-content(true);
-  @include utils.non-interactive();
-  @include typography.font-size(-2);
-  @include typography.font-weight(medium);
-
-  border-radius: $badge-size;
+  border-radius: var(--odx-border-radius-circle);
+  font-size: var(--odx-typography-font-size-text-xs);
+  font-weight: var(--odx-typography-font-weight-medium);
   height: $badge-size;
-  min-width: $badge-size;
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+  min-width: calc(#{$badge-size} * 1.01);
   outline: 1px solid transparent;
+  padding-inline: calc(var(--odx-spacing-37) / 2);
   vertical-align: middle;
 
+  @include utils.center-content(true);
+  @include utils.non-interactive();
+
   &,
   &--highlight {
     background-color: var(--odx-c-highlight);
-    color: var(--odx-c-highlight-text);
+    color: var(--odx-color-foreground-inverse-static);
   }
 
   &--danger {

package/scss/components/bar.component.scss

@@ -1,8 +1,4 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/typography';
-@use '../abstract/motion';
 @use './dropdown.component' as dropdown;
 
 :root {
@@ -21,28 +17,28 @@
 }
 
 .odx-bar {
-  @include dimensions.padding-x(math.div(12, 24));
-  @include dimensions.padding-y(math.div(6, 24));
-
   align-items: center;
   background-color: var(--odx-bar-background-color);
-  border-radius: dimensions.get-size(math.div(6, 24));
+  border-radius: var(--odx-border-radius-md);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   color: var(--odx-bar-text-color);
   display: inline-flex;
-  gap: dimensions.get-size(math.div(12, 24));
+  gap: var(--odx-spacing-75);
+  padding-block: var(--odx-control-spacing-md);
+  padding-inline: var(--odx-spacing-75);
   width: max-content;
 
   &-button {
-    @include motion.transition(background-color color);
-    @include utils.interactive();
-
     align-items: center;
     background-color: var(--odx-bar-background-color);
-    border-radius: var(--odx-v-border-radius-controls);
+    block-size: var(--odx-control-height-md);
+    border-radius: var(--odx-border-radius-control);
     display: inline-flex;
-    font-size: dimensions.get-size(math.div(4, 3));
-    height: dimensions.get-size(math.div(36, 24));
+    font-size: var(--odx-size-200);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
+
+    @include utils.interactive();
 
     &:hover {
       background-color: var(--odx-bar-background-color-hover);
@@ -54,11 +50,11 @@
     }
 
     &--default {
-      @include dimensions.padding-x(math.div(28, 24));
+      padding-inline: var(--odx-spacing-150);
     }
 
     &--small {
-      @include dimensions.padding-x(math.div(2, 24));
+      padding-inline: var(--odx-spacing-12);
     }
 
     &.is-disabled {
@@ -73,7 +69,7 @@
   }
 
   .odx-bar-parent & {
-    bottom: dimensions.get-size(math.div(16, 24));
+    bottom: var(--odx-spacing-100);
     left: 50%;
     position: absolute;
     transform: translateX(-50%);

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

@@ -1,10 +1,8 @@
-@use '../abstract/typography';
-
 .odx-brand-logo {
   color: inherit;
   display: inline-block;
-
-  @include typography.font-weight(semibold);
+  font-weight: var(--odx-typography-font-weight-semibold);
+  letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
 
   &::before {
     color: var(--odx-c-highlight);