@odx/ui 2.10.1 → 2.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "2.10.1",
+  "version": "2.11.1",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/3rdparty/ag-grid/theme.scss

@@ -18,7 +18,7 @@
   --ag-checkbox-indeterminate-color: var(--odx-control-color-selected);
   --ag-checkbox-checked-color: var(--odx-control-color-selected);
 
-  --ag-font-family: 'Pangea';
+  --ag-font-family: var(--odx-typography-font-family);
   --ag-font-size: var(--odx-typography-base-size);
 
   --ag-icon-size: #{typography.get-font-size(1)};

package/scss/abstract/_motion.scss

@@ -1,12 +1,14 @@
 @use 'sass:list';
 
-@mixin transition($properties, $duration: var(--odx-v-transition-duration), $delay: 0ms) {
+@mixin transition($properties, $duration: var(--odx-v-transition-duration), $delay: 0ms, $timing-function: var(--odx-v-transition-easing-fn)) {
   $props: ();
 
   @each $prop in $properties {
     $props: list.append($props, $prop, comma);
   }
 
-  transition: all $duration $delay var(--odx-v-transition-easing-fn);
+  transition-delay: $delay;
+  transition-duration: $duration;
   transition-property: $props;
+  transition-timing-function: $timing-function;
 }

package/scss/charts/theme.scss

@@ -46,6 +46,6 @@ body {
   --charts-text-color: var(--odx-c-text);
   --charts-background-color: var(--odx-c-background-content);
 
-  --charts-font-family: 'Pangea';
+  --charts-font-family: var(--odx-typography-font-family);
   --charts-font-size: var(--odx-typography-base-size);
 }

package/scss/components/badge.component.scss

@@ -7,6 +7,10 @@ body {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
+.odx-badge-overlay {
+  z-index: var(--odx-v-layer-1);
+}
+
 .odx-badge {
   $badge-size: dimensions.get-size(math.div(2, 3));
 
@@ -21,7 +25,6 @@ body {
   min-width: $badge-size;
   outline: 1px solid transparent;
   vertical-align: middle;
-  z-index: var(--odx-v-layer-1);
 
   &,
   &--highlight {

package/scss/components/button.component.scss

@@ -79,6 +79,7 @@
       }
 
       &#{dropdown.$dropdown-open-selector},
+      &.is-active,
       &:active {
         background-color: var(--odx-c-#{$variant}-active);
       }
@@ -107,6 +108,7 @@
     }
 
     &#{dropdown.$dropdown-open-selector},
+    &.is-active,
     &:focus-visible,
     &:active {
       background-color: var(--odx-c-focus);

package/scss/components/expandable-list-item.component.scss

@@ -1,78 +1,55 @@
 @use 'sass:math';
+@use '../abstract/utils';
 @use '../abstract/motion';
 @use '../abstract/dimensions';
 
 .odx-expandable-list-item {
   $root: &;
+  $list-item-selector: '> #{$root}__header .odx-list-item';
 
-  display: block;
-  position: relative;
-
-  &::before {
-    @include motion.transition(border-color);
-
-    border-bottom: 1px solid var(--gray-200);
-    content: '';
+  &__header {
     display: block;
-    left: dimensions.get-size(math.div(1, 3));
-    position: absolute;
-    top: 0;
-    width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
-  }
+    position: relative;
 
-  &:hover,
-  &:focus-visible,
-  &:first-child {
-    &::before {
-      border-bottom-color: transparent;
+    > .odx-list-item {
+      @include dimensions.padding(math.div(52, 24), right);
     }
   }
 
-  &--danger + &::before,
-  &:hover + &::before {
-    border-color: transparent;
-  }
+  &__action {
+    margin: 0;
+    position: absolute;
+    right: dimensions.get-size(math.div(8, 24));
+    top: 50%;
+    transform: translateY(-50%);
 
-  &--danger {
-    &::before {
-      border-bottom-color: transparent;
+    .odx-icon {
+      @include motion.transition(transform);
     }
   }
 
-  &--expanded {
-    &::before {
-      border-bottom-color: transparent;
+  &__slot {
+    .odx-list #{$root}:first-child #{$list-item-selector},
+    .odx-list .odx-list-item:first-child {
+      --separator-color: var(--odx-c-separator);
     }
   }
 
-  &__content {
-    flex: 1;
-  }
-
-  &__expand-icon {
-    @include motion.transition(transform);
-
-    position: relative;
-
-    #{$root}--expanded & {
-      transform: scaleY(-1);
+  &:has(#{$list-item-selector}--danger) {
+    #{$root}__action {
+      .odx-button {
+        color: var(--odx-c-danger-text);
+      }
     }
   }
 
-  &__slot {
-    #{$root}:last-child & {
-      .odx-list-item:last-child::after {
-        border-bottom: 1px solid var(--gray-200);
-        bottom: 0;
-        content: '';
-        display: block;
-        position: absolute;
-        width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
-      }
-    }
+  &:first-child #{$list-item-selector} {
+    --separator-color: transparent;
+  }
 
-    .odx-list-item__content {
-      @include dimensions.padding(math.div(36, 24), left);
+  &--expanded {
+    > #{$root}__header #{$root}__action .odx-button .odx-icon {
+      transform: scaleY(-1);
     }
   }
 }

package/scss/components/form-field.component.scss

@@ -95,6 +95,7 @@ body {
     @include utils.with-outline();
     @include utils.focus-state(true, true, 'input');
     @include utils.focus-state(true, true, 'textarea');
+    @include utils.focus-state(true, true, '.odx-select');
 
     background-color: var(--odx-input-control-background-color);
     border-radius: var(--odx-v-border-radius-controls);

package/scss/components/inline-message.component.scss

@@ -10,7 +10,8 @@
 
   $variants: default, warning, danger, success;
 
-  @include dimensions.padding(math.div(10, 24));
+  @include dimensions.padding-x(math.div(10, 24));
+  @include dimensions.padding-y(math.div(12, 24));
 
   display: flex;
   gap: dimensions.get-size(math.div(10, 24));

package/scss/components/list-item.component.scss

@@ -7,18 +7,22 @@
 .odx-list-item {
   $root: &;
 
-  @include dimensions.padding-x(math.div(1, 3));
+  --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 outline-color color);
   @include utils.interactive(false);
+  @include utils.with-outline-bold();
   @include utils.vertical-center-content();
 
   background-color: transparent;
   border-radius: var(--odx-v-border-radius-controls);
-  gap: dimensions.get-size(math.div(1, 3));
+  gap: dimensions.get-size(math.div(8, 24));
   position: relative;
 
-  > [odxListSuffix] {
+  > [odxListSuffix],
+  > [odxListItemSuffix] {
     margin-left: auto;
   }
 
@@ -29,30 +33,28 @@
   &::before {
     @include motion.transition(border-color);
 
-    border-bottom: 1px solid var(--odx-c-separator);
+    border-bottom: 1px solid var(--separator-color);
     content: '';
     display: block;
     position: absolute;
+    right: dimensions.get-size(math.div(8, 24));
     top: 0;
-    width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
+    width: calc(100% - #{dimensions.get-size(math.div(16, 24))});
   }
 
   &:hover,
-  &:focus-visible,
-  &:first-child {
-    &::before {
-      border-bottom-color: transparent;
-    }
+  &:focus-visible {
+    --separator-color: transparent !important;
   }
 
   &:hover {
     background-color: var(--odx-c-ghost-hover);
   }
 
-  &--danger + &::before,
-  &--selected + &::before,
-  &:hover + &::before {
-    border-color: transparent;
+  &--danger + &,
+  &.is-selected + &,
+  &:hover + & {
+    --separator-color: transparent !important;
   }
 
   &.is-disabled {
@@ -62,16 +64,11 @@
 
   &--danger {
     --odx-c-focus: var(--odx-c-danger);
-
-    @include utils.with-outline-bold();
+    --separator-color: transparent !important;
 
     background-color: var(--odx-c-danger);
     color: var(--odx-c-danger-text);
 
-    &::before {
-      border-bottom-color: transparent;
-    }
-
     &:hover {
       background-color: var(--odx-c-danger-hover);
     }
@@ -81,12 +78,10 @@
     }
   }
 
-  &--selected {
-    background-color: var(--odx-c-selected);
+  &.is-selected {
+    --separator-color: transparent !important;
 
-    &::before {
-      border-bottom-color: transparent;
-    }
+    background-color: var(--odx-c-selected);
 
     &:hover {
       background-color: var(--odx-c-selected-hover);

package/scss/components/list.component.scss

@@ -1,3 +1,27 @@
+@use 'sass:math';
+@use 'sass:selector';
+@use '../abstract/dimensions';
+
 .odx-list {
   display: block;
+
+  $self: &;
+
+  @for $i from 1 through 10 {
+    #{$self} .odx-list-item {
+      @include dimensions.padding(math.div(8, 24) + ($i * math.div(32, 24)), left);
+
+      &:first-child {
+        --separator-color: var(--odx-c-separator);
+      }
+    }
+
+    $self: #{$self + ' ' + &};
+  }
+
+  > .odx-list-item {
+    &:first-child {
+      --separator-color: transparent;
+    }
+  }
 }

package/scss/components/main-menu.component.scss

@@ -28,6 +28,8 @@ body {
   --odx-area-header-title-color: var(--odx-main-menu-highlight-color);
   --odx-area-header-subtitle-color: var(--odx-c-text-inverse);
 
+  z-index: var(--odx-v-layer-5);
+
   &__inner {
     background-color: var(--odx-main-menu-background-color);
     color: var(--odx-main-menu-text-color);

package/scss/layout/_typography.scss

@@ -4,21 +4,21 @@
 @use '../abstract/typography';
 
 @font-face {
-  font-family: Pangea;
+  font-family: PangeaText;
   font-style: normal;
   font-weight: normal;
   src: url('../assets/fonts/PangeaText-RegularWeb.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: Pangea;
+  font-family: PangeaText;
   font-style: normal;
   font-weight: 500;
   src: url('../assets/fonts/PangeaText-MediumWeb.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: Pangea;
+  font-family: PangeaText;
   font-style: normal;
   font-weight: bold;
   src: url('../assets/fonts/PangeaText-SemiBoldWeb.woff2') format('woff2');
@@ -34,7 +34,7 @@ html body {
   @include typography.font-weight(normal);
 
   color: var(--odx-c-text);
-  font-family: Pangea, sans-serif;
+  font-family: var(--odx-typography-font-family);
 }
 
 .odx-title,

package/scss/variables/_typography.scss

@@ -1,6 +1,7 @@
 @use '../abstract/breakpoints';
 
 :root {
+  --odx-typography-font-family: 'PangeaText', 'Arial', sans-serif;
   --odx-typography-base-size: 1.6rem; // clamp(1.4rem, 0.667vw + 1rem, 1.6rem);
   --odx-typography-base-line-height: 1.5;
   --odx-typography-font-weight-normal: normal;