@odx/ui 1.0.0-rc.8 → 1.0.0-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "1.0.0-rc.8",
+  "version": "1.0.0-rc.9",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "files": [

package/scss/abstract/_dimensions.scss

@@ -1,9 +1,10 @@
 @use 'sass:math';
 
 @function _get-line-height-factor($factor, $line-height-factor) {
-  @if $line-height-factor == null {
+  @if not $line-height-factor {
     @return $factor;
   }
+
   @return $line-height-factor;
 }
 

package/scss/abstract/_motion.scss

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

package/scss/abstract/_utils.scss

@@ -66,6 +66,7 @@
 
 @mixin _focus-styles($with-background) {
   outline-color: var(--odx-c-focus-outline);
+
   @if $with-background {
     &,
     &:hover {
@@ -105,7 +106,7 @@
 }
 
 @mixin interactive($with-background: true, $focus-within: false) {
-  @include with-outline;
+  @include with-outline();
   @include focus-state($with-background, $focus-within);
 
   cursor: pointer;

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

@@ -16,10 +16,10 @@
     /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
     @extend .odx-button--ghost;
 
-    color: var(--odx-c-control-text);
+    color: var(--odx-c-text);
 
     &:hover {
-      color: var(--odx-c-control-text);
+      color: var(--odx-c-text);
     }
 
     &:focus-visible {

package/scss/components/avatar.component.scss

@@ -25,6 +25,7 @@
   border-radius: 50%;
   color: var(--odx-c-text);
   position: relative;
+  user-select: none;
   vertical-align: middle;
 
   &--small {

package/scss/components/bar.component.scss

@@ -0,0 +1,86 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '../abstract/motion';
+@use './dropdown.component' as dropdown;
+
+:root {
+  --odx-bar-background-color: var(--cyan-500);
+  --odx-bar-background-color-hover: var(--cyan-600);
+  --odx-bar-background-color-active: var(--cyan-700);
+  --odx-bar-text-color: var(--white);
+  --odx-bar-text-color-disabled: var(--cyan-700);
+}
+
+.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));
+  box-shadow: 0 2px 6px rgb(0 25 66 / 50%);
+  color: var(--odx-bar-text-color);
+  display: inline-flex;
+  gap: dimensions.get-size(math.div(12, 24));
+  width: max-content;
+
+  &-button {
+    $button: &;
+
+    @include motion.transition(background-color color outline);
+    @include utils.with-outline-bold();
+
+    align-items: center;
+    background-color: var(--odx-bar-background-color);
+    border-radius: var(--odx-v-border-radius-controls);
+    display: inline-flex;
+    font-size: dimensions.get-size(math.div(4, 3));
+    height: dimensions.get-size(math.div(36, 24));
+    outline-color: transparent;
+    outline-style: solid;
+
+    &:hover {
+      background-color: var(--odx-bar-background-color-hover);
+    }
+
+    &#{dropdown.$dropdown-open-selector},
+    &:active {
+      background-color: var(--odx-bar-background-color-active);
+    }
+
+    &:focus-visible {
+      outline-color: var(--odx-bar-background-color-active);
+    }
+
+    &--default {
+      @include dimensions.padding-x(math.div(28, 24));
+    }
+
+    &--small {
+      @include dimensions.padding-x(math.div(2, 24));
+    }
+
+    &.is-disabled {
+      @include utils.non-interactive();
+
+      color: var(--odx-bar-text-color-disabled);
+    }
+  }
+
+  &-label {
+    display: inline;
+  }
+
+  .odx-bar-parent & {
+    bottom: dimensions.get-size(math.div(16, 24));
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+  }
+}
+
+.odx-bar-parent {
+  position: relative;
+}

package/scss/components/breadcrumbs.component.scss

@@ -0,0 +1,26 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+
+.odx-breadcrumbs {
+  @include dimensions.padding-x(1);
+  @include dimensions.padding-y(math.div(12, 24));
+  @include utils.vertical-center-content();
+
+  flex-wrap: wrap;
+  gap: dimensions.get-size(math.div(8, 24));
+
+  .odx-link {
+    &:last-child {
+      @include typography.font-weight(bold);
+
+      color: var(--odx-c-text);
+    }
+  }
+
+  .odx-icon {
+    color: var(--gray-500);
+    font-size: dimensions.get-size(math.div(12, 24));
+  }
+}

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

@@ -4,6 +4,7 @@
 @mixin buttons-radius($vertical: false, $reversed: false) {
   $start: 'first';
   $end: 'last';
+
   @if $reversed {
     $start: 'last';
     $end: 'first';

package/scss/components/button.component.scss

@@ -4,6 +4,7 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 @use 'avatar.component' as avatar;
+@use 'dropdown.component' as dropdown;
 @use 'icon.component';
 
 .odx-button {
@@ -19,7 +20,7 @@
   @include typography.font-weight(medium);
   @include utils.center-content(true);
   @include utils.interactive($with-background: false);
-  @include utils.with-outline-bold;
+  @include utils.with-outline-bold();
 
   border-radius: var(--odx-v-border-radius-controls);
   min-width: dimensions.get-size(1.5);
@@ -59,6 +60,7 @@
         background-color: var(--odx-c-#{$variant}-hover);
       }
 
+      &#{dropdown.$dropdown-open-selector},
       &:active {
         background-color: var(--odx-c-#{$variant}-active);
       }
@@ -72,7 +74,7 @@
   }
 
   &--ghost {
-    @include utils.with-outline;
+    @include utils.with-outline();
 
     background-color: transparent;
     color: var(--odx-c-link);
@@ -86,6 +88,7 @@
       color: var(--odx-c-link-active);
     }
 
+    &#{dropdown.$dropdown-open-selector},
     &:focus-visible,
     &:active {
       background-color: var(--odx-c-focus);
@@ -100,6 +103,7 @@
 
   &--small {
     $icon-margin: math.div(1, 8);
+
     @include dimensions.height(1);
     @include dimensions.padding-x(2 * $icon-margin);
     @include typography.font-size(-1);

package/scss/components/checkbox.component.scss

@@ -57,6 +57,7 @@
 
     > .odx-icon {
       $checkmark-size: math.div(18, 24);
+
       @include dimensions.container($checkmark-size);
       @include motion.transition(opacity);
 

package/scss/components/chip.component.scss

@@ -9,6 +9,7 @@ $variants: 'secondary', 'highlight', 'success', 'danger';
 
 .odx-chip {
   $root: &;
+
   @include typography.font-weight(medium);
   @include motion.transition(background-color color);
 

package/scss/components/content-box.component.scss

@@ -17,34 +17,38 @@
   }
 
   &__header {
-    @include dimensions.padding(1, ('top', 'right', 'left'));
-    @include breakpoints.down(phone) {
-      @include dimensions.padding(0.5, ('top', 'right', 'left'));
+    @include dimensions.padding(0.5, ('top', 'right', 'left'));
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, ('top', 'right', 'left'));
     }
   }
 
   &__footer {
-    @include dimensions.padding(1, ('right', 'bottom', 'left'));
-    @include breakpoints.down(phone) {
-      @include dimensions.padding(0.5, ('right', 'bottom', 'left'));
+    @include dimensions.padding(0.5, ('right', 'bottom', 'left'));
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, ('right', 'bottom', 'left'));
     }
   }
 
   &__content {
-    @include dimensions.padding(1);
-    @include breakpoints.down(phone) {
-      @include dimensions.padding(0.5);
+    @include dimensions.padding(0.5);
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1);
     }
   }
 
-  .odx-area-header ~ &__content {
-    padding-top: 0;
-  }
+  > .odx-area-header {
+    @include dimensions.padding(0.5, ('top', 'bottom'));
 
-  .odx-area-header {
-    @include dimensions.padding(1, ('top', 'bottom'));
-    @include breakpoints.down(phone) {
-      @include dimensions.padding(0.5, ('top', 'bottom'));
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, ('top', 'bottom'));
     }
   }
+
+  & > .odx-area-header ~ &__content {
+    padding-top: 0;
+  }
 }

package/scss/components/dropdown.component.scss

@@ -1,10 +1,12 @@
 @use 'sass:math';
 @use '../abstract/dimensions';
 
+$dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
+
 .odx-dropdown {
   background-color: var(--odx-c-background-content);
   border-radius: var(--odx-v-border-radius);
-  box-shadow: var(--odx-v-backdrop-box-shadow-layer-2);
+  box-shadow: var(--odx-v-box-shadow-layer-2);
   display: block;
   min-height: inherit;
 

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

@@ -168,7 +168,7 @@ $form-field-inner-padding: math.div(8, 24);
       outline-color: var(--odx-input-control-outline-color-disabled);
 
       #{$control-selector} {
-        @include utils.non-interactive;
+        @include utils.non-interactive();
 
         &::placeholder {
           color: var(--odx-input-control-color-disabled);

package/scss/components/icon.component.scss

@@ -2,7 +2,7 @@
 @use '../abstract/dimensions';
 @use '../abstract/utils';
 
-$icon-sizes: (small math.div(2, 3) 1, large math.div(4, 3) 2);
+$icon-sizes: (small math.div(16, 24) 1, large math.div(32, 24) 2, xlarge math.div(48, 24) 2);
 
 .odx-icon {
   @include dimensions.container(1);

package/scss/components/launch-tile.component.scss

@@ -1,10 +1,9 @@
 @use 'sass:math';
 @use '../abstract/breakpoints';
+@use '../abstract/dimensions';
 @use '../abstract/motion';
+@use '../abstract/typography';
 @use '../abstract/utils';
-@use '../abstract/dimensions';
-
-// TODO: check distances
 
 .odx-launch-tile {
   $root: &;
@@ -15,6 +14,7 @@
   @include utils.with-outline-bold();
 
   background-color: var(--odx-c-background-content);
+  behavior: button;
   border-radius: var(--odx-v-border-radius);
   display: block;
   padding: $main-padding;
@@ -23,7 +23,7 @@
   &:focus-visible,
   &:hover,
   &:focus-within:has(:focus-visible) {
-    box-shadow: var(--odx-v-backdrop-box-shadow-layer-1);
+    box-shadow: var(--odx-v-box-shadow-layer-1);
   }
 
   &__container {
@@ -53,9 +53,9 @@
 
   &__title {
     @include dimensions.margin-y(math.div(9, 24));
+    @include typography.font-weight(medium);
 
     font-size: dimensions.get-size(math.div(20, 24));
-    font-weight: var(--odx-typography-font-weight-medium);
     line-height: dimensions.get-size(math.div(30, 24));
   }
 

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

@@ -63,7 +63,7 @@
   &--danger {
     --odx-c-focus: var(--odx-c-danger);
 
-    @include utils.with-outline-bold;
+    @include utils.with-outline-bold();
 
     background-color: var(--odx-c-danger);
     color: var(--odx-c-danger-text);

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

@@ -42,7 +42,7 @@
     background-color: var(--odx-c-backdrop);
     height: 100%;
     left: 0;
-    position: absolute;
+    position: fixed;
     top: 0;
     width: 100%;
     z-index: 8999;

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

@@ -0,0 +1,8 @@
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+.odx-menu-item {
+  margin: 0;
+  width: 100%;
+}

package/scss/components/menu.component.scss

@@ -0,0 +1,16 @@
+@use '../abstract/dimensions';
+
+.odx-menu {
+  display: block;
+
+  > .odx-action-group {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    margin: 0;
+
+    > .odx-button {
+      justify-content: flex-start;
+    }
+  }
+}

package/scss/components/modal.component.scss

@@ -1,6 +1,10 @@
 @use 'sass:math';
 @use '../abstract/dimensions';
 @use '../abstract/breakpoints';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+$modal-padding: math.div(12, 24);
 
 .odx-modal {
   --odx-modal-margin-y: #{dimensions.get-size(2)};
@@ -8,7 +12,6 @@
   --odx-modal-max-width: #{dimensions.get-size(20)};
 
   $root: &;
-  $modal-padding: math.div(12, 24);
 
   backdrop-filter: blur(var(--odx-v-backdrop-blur));
   background-color: var(--odx-c-backdrop-dark);
@@ -36,7 +39,7 @@
 
     background-color: var(--odx-c-background-content);
     border-radius: var(--odx-v-border-radius);
-    box-shadow: var(--odx-v-backdrop-box-shadow-layer-2);
+    box-shadow: var(--odx-v-box-shadow-layer-2);
     display: flex;
     flex-direction: column;
     margin: var(--odx-modal-margin-y) auto 0;
@@ -59,6 +62,10 @@
       max-height: calc(100vh - var(--odx-modal-margin-y) - #{dimensions.get-size(1)});
       right: 0;
     }
+
+    #{$root}--with-component & > * {
+      display: contents;
+    }
   }
 
   &__header,
@@ -68,8 +75,8 @@
   }
 
   &__header {
-    @include dimensions.min-height(1);
-    @include dimensions.padding(math.div(12, 24), top);
+    @include dimensions.min-height(2.5);
+    @include dimensions.padding($modal-padding, top);
 
     > .odx-area-header {
       @include dimensions.margin(-1, left);
@@ -99,3 +106,39 @@
     justify-content: flex-end;
   }
 }
+
+.odx-modal-hero {
+  $variants: success, danger, confirmation;
+
+  @include dimensions.min-height(2.5);
+  @include dimensions.padding(0.5, top);
+
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &__dismiss {
+    position: absolute;
+    right: 0;
+    top: dimensions.get-size(0.5);
+  }
+
+  &__icon {
+    margin: dimensions.get-size(0.5) auto auto;
+  }
+
+  &__title {
+    text-align: center;
+  }
+
+  ~ .odx-modal__content {
+    padding-top: 0;
+    text-align: center;
+  }
+
+  @each $variant in $variants {
+    &--#{$variant} &__icon {
+      color: var(--odx-c-#{$variant});
+    }
+  }
+}

package/scss/components/select.component.scss

@@ -55,10 +55,6 @@
 
     margin-left: auto;
 
-    #{$root}.is-open & {
-      transform: rotateX(180deg);
-    }
-
     #{$root}.is-readonly & {
       opacity: 0;
     }

package/scss/components/slider.component.scss

@@ -6,6 +6,7 @@
   --odx-control-outline-color: var(--gray-200);
   --odx-control-background-color: var(--gray-100);
   --odx-control-background-color-hover: var(--cyan-600);
+
   $root: &;
   $thumb-size: dimensions.get-size(math.div(20, 24));
   $track-height: dimensions.get-size(math.div(4, 24));

package/scss/components/switch.component.scss

@@ -7,7 +7,8 @@
 
 @mixin indicator-color($background, $stroke: null) {
   background-color: $background;
-  @if ($stroke) {
+
+  @if $stroke {
     border-color: $stroke;
   } @else {
     border-color: $background;

package/scss/components/tab-bar-item.component.scss

@@ -8,7 +8,7 @@
   @include dimensions.height(2, math.div(32, 24));
   @include dimensions.padding-x(math.div(4, 24));
   @include utils.vertical-center-content();
-  @include utils.with-outline;
+  @include utils.with-outline();
   @include motion.transition(background-color outline-color);
 
   align-items: center;

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

@@ -0,0 +1,79 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-toast-item {
+  --odx-c-default: var(--blue-50);
+  --odx-c-warning: var(--yellow-50);
+  --odx-c-danger: var(--red-00);
+  --odx-c-success: var(--green-00);
+
+  $root: &;
+  $variants: default, warning, danger, success;
+  $gap: dimensions.get-size(math.div(12, 24));
+
+  box-shadow: var(--odx-v-box-shadow-layer-1);
+  display: block;
+
+  &__content {
+    display: flex;
+    gap: $gap;
+    padding: $gap;
+  }
+
+  &__text-content {
+    @include typography.font-size(-1);
+
+    flex: 1;
+  }
+
+  &__title {
+    @include typography.prevent-text-overflow();
+
+    font-weight: var(--odx-typography-font-weight-bold);
+  }
+
+  &__description {
+    max-height: dimensions.get-size(5);
+    overflow: auto;
+  }
+
+  &__close {
+    @include utils.interactive(true);
+
+    background-color: transparent;
+    margin: 0;
+    margin-right: calc(#{$gap} / -2);
+    margin-top: calc(#{$gap} / -2);
+
+    &:hover {
+      background-color: var(--blue-700-5);
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: calc(#{$gap} / -2);
+    padding: 0 calc(#{$gap} / 2);
+  }
+
+  @each $variant in $variants {
+    &--#{$variant} {
+      background-color: var(--odx-c-#{$variant});
+    }
+  }
+
+  &--danger {
+    --odx-c-text: var(--red-700);
+    --odx-v-scrollbar-thumb-color: var(--odx-c-text);
+    --odx-v-scrollbar-thumb-color-hover: var(--red-800);
+
+    color: var(--odx-c-text);
+
+    #{$root}__close {
+      color: inherit;
+    }
+  }
+}

package/scss/components/toast.component.scss

@@ -0,0 +1,33 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+.odx-toast-container {
+  --odx-toast-outer-offset: #{dimensions.get-size(math.div(8, 24))};
+
+  display: flex;
+  flex-direction: column;
+  margin-top: dimensions.get-size(math.div(4, 24));
+  max-width: min(calc(100vw - 2 * var(--odx-toast-outer-offset)), dimensions.get-size(20));
+  padding-top: var(--odx-toast-outer-offset);
+  position: fixed;
+  right: var(--odx-toast-outer-offset);
+  top: 0;
+  width: 100%;
+  z-index: 10;
+
+  &__counter {
+    align-self: center;
+  }
+
+  .odx-toast-item {
+    margin-bottom: var(--odx-toast-outer-offset);
+  }
+
+  @include breakpoints.up(phone) {
+    --odx-toast-outer-offset: #{dimensions.get-size(math.div(20, 24))};
+
+    margin-top: 0;
+  }
+}