@odx/ui 1.0.0-rc.9 → 1.0.0

package/scss/components/menu.component.scss

@@ -1,4 +1,5 @@
 @use '../abstract/dimensions';
+@use 'sass:math';
 
 .odx-menu {
   display: block;
@@ -11,6 +12,41 @@
 
     > .odx-button {
       justify-content: flex-start;
+      margin: 0;
+      width: 100%;
+    }
+  }
+
+  &__title:not(:empty) {
+    margin-bottom: dimensions.get-size(math.div(12, 24));
+  }
+
+  &--tile {
+    $avatar-size: dimensions.get-size(math.div(48, 24));
+    $grid-gap: dimensions.get-size(math.div(8, 24));
+
+    .odx-avatar {
+      height: $avatar-size;
+      margin-bottom: $grid-gap;
+      width: $avatar-size;
+    }
+
+    .odx-action-group {
+      align-items: flex-start;
+      display: grid;
+      grid-gap: $grid-gap;
+      grid-template-columns: repeat(3, 1fr);
+
+      .odx-button {
+        flex-direction: column;
+        font-size: dimensions.get-size(math.div(13, 24));
+        font-weight: var(--odx-typography-font-weight-normal);
+        height: unset;
+        line-height: dimensions.get-size(math.div(20, 24));
+        padding: $grid-gap;
+        white-space: unset;
+        width: dimensions.get-size(math.div(100, 24));
+      }
     }
   }
 }

package/scss/components/modal.component.scss

@@ -10,23 +10,25 @@ $modal-padding: math.div(12, 24);
   --odx-modal-margin-y: #{dimensions.get-size(2)};
   --odx-modal-margin-x: #{dimensions.get-size(math.div(8, 24))};
   --odx-modal-max-width: #{dimensions.get-size(20)};
+  --odx-modal-margin-bottom: #{dimensions.get-size(0.5)};
 
   $root: &;
 
   backdrop-filter: blur(var(--odx-v-backdrop-blur));
   background-color: var(--odx-c-backdrop-dark);
   display: block;
-  height: 100%;
+  height: 100dvh;
   left: 0;
   overscroll-behavior: contain;
   position: fixed;
   top: 0;
-  width: 100%;
-  z-index: 1000;
+  width: 100dvw;
+  z-index: var(--odx-v-layer-4);
 
   @include breakpoints.up(phone) {
     --odx-modal-margin-y: #{dimensions.get-size(3)};
     --odx-modal-margin-x: #{dimensions.get-size(1)};
+    --odx-modal-margin-bottom: #{dimensions.get-size(1)};
   }
 
   &--sidesheet {
@@ -43,9 +45,13 @@ $modal-padding: math.div(12, 24);
     display: flex;
     flex-direction: column;
     margin: var(--odx-modal-margin-y) auto 0;
-    max-height: calc(100vh - 2 * var(--odx-modal-margin-y));
+    max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
     min-height: dimensions.get-size(7);
-    width: min(var(--odx-modal-max-width), calc(100vw - 2 * var(--odx-modal-margin-x)));
+    width: min(var(--odx-modal-max-width), calc(100% - 2 * var(--odx-modal-margin-x)));
+
+    #{$root}--xsmall & {
+      --odx-modal-max-width: #{dimensions.get-size(15)};
+    }
 
     #{$root}--medium & {
       --odx-modal-max-width: #{dimensions.get-size(30)};
@@ -58,9 +64,16 @@ $modal-padding: math.div(12, 24);
     #{$root}--sidesheet & {
       height: 100%;
       left: unset;
-      margin-right: dimensions.get-size(0.5);
-      max-height: calc(100vh - var(--odx-modal-margin-y) - #{dimensions.get-size(1)});
+      max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
       right: 0;
+
+      @include breakpoints.up(phone) {
+        margin-right: dimensions.get-size(0.5);
+      }
+
+      @include breakpoints.down(phone) {
+        --odx-modal-max-width: 100dvw !important;
+      }
     }
 
     #{$root}--with-component & > * {
@@ -79,11 +92,14 @@ $modal-padding: math.div(12, 24);
     @include dimensions.padding($modal-padding, top);
 
     > .odx-area-header {
-      @include dimensions.margin(-1, left);
-      @include dimensions.margin(-0.5, right);
+      @include dimensions.margin-x(-0.5);
 
       flex: 1 1 auto;
       max-width: 100%;
+
+      @include breakpoints.up(phone) {
+        @include dimensions.margin(-1, left);
+      }
     }
   }
 

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

@@ -0,0 +1,23 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+.odx-navigation-back {
+  border-radius: var(--odx-v-border-radius-controls);
+  height: dimensions.get-size(1.5);
+  width: dimensions.get-size(1.5);
+
+  @include motion.transition(background-color outline);
+  @include utils.center-content(true);
+  @include utils.interactive($with-background: true);
+
+  &:hover {
+    background-color: var(--blue-700-5);
+  }
+
+  &:active {
+    background-color: var(--cyan-500-15);
+    border: none;
+  }
+}

package/scss/components/select.component.scss

@@ -4,7 +4,7 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 
-:root {
+body {
   --odx-select-max-height: 220px;
 }
 
@@ -21,8 +21,10 @@
     width: 100%;
 
     #{$root}.is-readonly & {
-      cursor: text;
-      user-select: unset;
+      #{$root}__value {
+        cursor: text;
+        user-select: unset;
+      }
     }
   }
 
@@ -41,6 +43,10 @@
 
     color: var(--odx-input-control-color);
     opacity: 0.65;
+
+    #{$root}.is-disabled & {
+      color: inherit;
+    }
   }
 
   &__search {

package/scss/components/spinbox.component.scss

@@ -103,6 +103,10 @@
     margin: 0;
     outline: none;
 
+    &::before {
+      position: static;
+    }
+
     &:first-child {
       border-bottom-right-radius: 0;
       border-right: unset;

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

@@ -66,7 +66,7 @@
     top: 0;
     user-select: none;
     width: 0;
-    z-index: 50;
+    z-index: var(--odx-v-layer-1);
 
     &.is-active {
       @include dimensions.padding(math.div(8, 24), (right, left));

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

@@ -29,8 +29,6 @@
   }
 
   &__title {
-    @include typography.prevent-text-overflow();
-
     font-weight: var(--odx-typography-font-weight-bold);
   }
 

package/scss/components/toast.component.scss

@@ -9,13 +9,13 @@
   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));
+  max-width: min(calc(100dvw - 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;
+  z-index: var(--odx-v-layer-5);
 
   &__counter {
     align-self: center;

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

@@ -45,7 +45,8 @@
   }
 
   .odx-toggle-button {
-    z-index: 1;
+    flex: 1 1 auto;
+    z-index: var(--odx-v-layer-2);
   }
 
   &.has-error:not(.is-disabled, .is-readonly) {

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

@@ -14,7 +14,6 @@
   @include utils.vertical-center-content();
 
   color: currentcolor;
-  overflow: hidden;
   user-select: none;
 
   &.is-active {
@@ -38,32 +37,41 @@
     pointer-events: none;
   }
 
-  &__label {
+  &__indicator {
+    border-radius: var(--odx-toggle-button-border-radius);
+
     @include motion.transition(background-color outline-color);
     @include dimensions.padding-x(math.div(1, 3));
 
-    border-radius: var(--odx-toggle-button-border-radius);
-    cursor: pointer;
+    #{$root}.is-readonly &,
+    #{$root}.is-disabled &,
+    #{$root}-group.is-active &,
+    #{$root}-group.has-error & {
+      background-color: transparent;
+    }
 
     #{$root}-group:not(.is-active) & {
       @include utils.interactive($focus-within: true);
 
       background-color: var(--blue-700-5);
+    }
+  }
+
+  &__label {
+    @include dimensions.padding-y(0.25);
 
-      &:hover {
+    cursor: pointer;
+    text-align: center;
+    width: 100%;
+
+    #{$root}-group:not(.is-active) &:hover {
+      #{$root}__indicator {
         background-color: var(--blue-700-10);
       }
     }
 
-    #{$root}-group.is-active &:hover {
+    #{$root}-group.is-active &:hover #{$root}__indicator {
       background-color: var(--blue-700-5);
     }
-
-    #{$root}.is-readonly &,
-    #{$root}.is-disabled &,
-    #{$root}-group.is-active &,
-    #{$root}-group.has-error & {
-      background-color: transparent;
-    }
   }
 }

package/scss/components/tooltip.component.scss

@@ -1,6 +1,7 @@
 @use '../abstract/dimensions';
+@use '../abstract/utils';
 
-:root {
+body {
   --odx-tooltip-background-color: var(--blue-800);
   --odx-tooltip-color: var(--odx-c-text-inverse);
   --odx-tooltip-size-small: #{dimensions.get-size(5)};
@@ -28,7 +29,7 @@
   &-overlay {
     .odx-cdk-connected-overlay-arrow {
       background-color: var(--odx-tooltip-background-color);
-      z-index: -1;
+      z-index: var(--odx-v-layer-1);
     }
   }
 }

package/scss/core.scss

@@ -1,12 +1,3 @@
-@use 'abstract/breakpoints' with (
-  $breakpoints: (
-    'phone-s': 360px,
-    'phone': 420px,
-    'tablet': 768px,
-    'desktop-s': 960px,
-    'desktop': 1200px,
-  )
-);
 @use 'variables';
 @use 'reset';
 
@@ -28,6 +19,11 @@ Layout
 @use 'cdk/active-indicator';
 @use 'cdk/connected-overlay';
 
+/*
+  Skeleton
+*/
+@use 'skeleton/skeleton';
+
 /*
   Components
 */
@@ -42,25 +38,27 @@ Layout
 @use 'components/breadcrumbs.component';
 @use 'components/button-group.component';
 @use 'components/button.component';
+@use 'components/card.component';
 @use 'components/checkbox.component';
 @use 'components/chip.component';
 @use 'components/circular-progress.component';
 @use 'components/content-box.component';
 @use 'components/dropdown.component';
+@use 'components/expandable-list-item.component';
 @use 'components/form-field.component';
 @use 'components/header.component';
 @use 'components/icon.component';
 @use 'components/inline-message.component';
-@use 'components/launch-tile.component';
 @use 'components/link.component';
 @use 'components/list.component';
 @use 'components/list-item.component';
 @use 'components/loading-spinner.component';
 @use 'components/logo.component';
+@use 'components/mainfilter-group.component';
 @use 'components/main-menu.component';
 @use 'components/menu.component';
-@use 'components/menu-item.component';
 @use 'components/modal.component';
+@use 'components/navigation-back.component';
 @use 'components/progress.component';
 @use 'components/radio-button.component';
 @use 'components/radio-group.component';

package/scss/layout/_layout.scss

@@ -11,6 +11,10 @@ $columns: 12 !default;
 :root {
   --odx-grid-gutter: #{dimensions.get-size(1)};
   --odx-grid-gutter-small: #{dimensions.get-size(math.div(8, 24))};
+
+  @include breakpoints.down(phone) {
+    --odx-grid-gutter: var(--odx-grid-gutter-small);
+  }
 }
 
 #{create-selector(grid)},

package/scss/reset.scss

@@ -5,6 +5,7 @@
 
 * {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 
   &:focus-visible {
     outline: none;

package/scss/skeleton/_skeleton.scss

@@ -0,0 +1,49 @@
+@keyframes skeleton-animation {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0.5;
+  }
+}
+
+.odx-skeleton {
+  background-color: transparent;
+  color: transparent;
+  pointer-events: none;
+  position: relative;
+  user-select: none;
+
+  &::after {
+    animation: skeleton-animation ease-in-out 1s infinite alternate;
+    background-color: var(--gray-200);
+    border-radius: var(--odx-v-border-radius);
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &--text::before {
+    content: '\a0';
+  }
+
+  &--short::after {
+    width: 40%;
+  }
+
+  &--center::after {
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, 0);
+    width: 40%;
+  }
+
+  * {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/scss/variables/_color-palettes-dark.scss

@@ -0,0 +1,53 @@
+@use '../abstract/utils';
+
+body {
+  @include utils.dark-theme-selector() {
+    --white: #293642;
+    --white-dark: #060a12;
+    --black: #ffffff;
+
+    --focus-bg: #284e68;
+
+    --white-60: #{rgba(var(--white), 0.6)};
+
+    --gray-50: #2e3d49;
+    --gray-100: #344351;
+    --gray-200: #3e5160;
+    --gray-300: #495e6e;
+    --gray-400: #556c7c;
+    --gray-500: #607a8a;
+    --gray-600: #6d8797;
+    --gray-700: #7d94a1;
+    --gray-800: #e9eef4;
+    --gray-900: #9cacb4;
+
+    --blue-50: #455e85;
+    --blue-100: #043c95;
+    --blue-600: #a8c4f0;
+    --blue-700: #cbe9ff;
+    --blue-700-5: #{rgba(#cbe9ff, 0.1)};
+    --blue-700-10: #{rgba(#cbe9ff, 0.2)};
+    --blue-900: #d5e2f6;
+
+    --cyan-50: #002766;
+    --cyan-100: #003c66;
+    --cyan-200: #00508a;
+    --cyan-300: #0065ad;
+    --cyan-400: #007ad1;
+    --cyan-600: #1fa2ff;
+    --cyan-700: #47b3ff;
+    --cyan-800: #70c4ff;
+    --cyan-900: #9dd7ff;
+
+    --red-00: #4b3138;
+    --red-50: #724956;
+    --red-100: #bc0000;
+    --red-700: #ff9898;
+    --red-800: #ffb4b4;
+    --red-900: #ffe0e3;
+
+    --yellow-50: #5f5439;
+
+    --green-00: #355e54;
+  }
+}

package/scss/variables/_color-palettes.scss

@@ -1,4 +1,4 @@
-:root {
+body {
   --white: #ffffff;
   --black: #00060f;
 

package/scss/variables/_colors-dark.scss

@@ -0,0 +1,43 @@
+@use '../abstract/utils';
+
+body {
+  @include utils.dark-theme-selector() {
+    --odx-c-headline: var(--blue-900);
+
+    --odx-c-text: var(--blue-900);
+    --odx-c-text-inverse: var(--black);
+
+    --odx-c-link-disabled: var(--gray-400);
+
+    --odx-c-error: var(--red-00);
+    --odx-c-error-outline: var(--red-50);
+    --odx-c-error-outline-hover: var(--red-100);
+    --odx-c-error-text: var(--red-700);
+
+    --odx-c-focus: var(--focus-bg);
+    --odx-c-focus-outline: var(--cyan-200);
+    --odx-c-focus-outline-dark: var(--odx-c-focus-outline);
+
+    --odx-c-highlight-text: var(--black);
+
+    --odx-c-primary: var(--blue-900);
+    --odx-c-primary-hover: var(--blue-600);
+    --odx-c-primary-active: var(--blue-200);
+    --odx-c-primary-disabled: var(--odx-c-primary);
+    --odx-c-primary-text: var(--white);
+    --odx-c-primary-text-disabled: var(--blue-300);
+
+    --odx-c-secondary-text-disabled: var(--gray-100);
+
+    --odx-c-highlight-hover: var(--cyan-400);
+    --odx-c-highlight-active: var(--cyan-300);
+    --odx-c-highlight-text-disabled: var(--cyan-200);
+
+    --odx-c-danger-active: var(--red-100);
+    --odx-c-danger-text-disabled: var(--red-50);
+
+    --odx-c-success-text: var(--cyan-50);
+
+    --odx-c-confirmation-text: var(--cyan-50);
+  }
+}

package/scss/variables/_colors.scss

@@ -1,4 +1,4 @@
-:root {
+body {
   --odx-c-headline: var(--blue-700);
 
   --odx-c-text: var(--blue-700);
@@ -16,8 +16,14 @@
   --odx-c-error-outline-hover: var(--red-100);
   --odx-c-error-text: var(--red-600);
 
+  --odx-c-error-warning: var(--orange-100);
+  --odx-c-error-warning-outline: var(--orange-200);
+  --odx-c-error-warning-outline-hover: var(--orange-300);
+  --odx-c-error-warning-text: var(--orange-500);
+
   --odx-c-focus: var(--cyan-500-15);
-  --odx-c-focus-outline: var(--cyan-300);
+  --odx-c-focus-outline: var(--cyan-200);
+  --odx-c-focus-outline-dark: var(--cyan-400);
 
   --odx-c-selected: var(--cyan-500-15);
   --odx-c-selected-hover: var(--cyan-500-20);

package/scss/variables/_controls.scss

@@ -1,4 +1,4 @@
-:root {
+body {
   --odx-control-color: var(--odx-c-text);
   --odx-control-background-color: var(--gray-200);
   --odx-control-outline-color: var(--gray-300);
@@ -24,6 +24,11 @@
   --odx-control-outline-color-error: var(--odx-c-error-outline);
   --odx-control-outline-color-error-hover: var(--odx-c-error-outline-hover);
 
+  --odx-control-color-warning: var(--odx-c-error-warning-text);
+  --odx-control-background-color-warning: var(--odx-c-error-warning);
+  --odx-control-outline-color-warning: var(--odx-c-error-warning-outline);
+  --odx-control-outline-color-warning-hover: var(--odx-c-error-warning-outline-hover);
+
   --odx-input-control-color: var(--odx-c-text);
   --odx-input-control-background-color: var(--gray-100);
   --odx-input-control-outline-color: var(--gray-200);
@@ -44,4 +49,9 @@
   --odx-input-control-background-color-error: var(--odx-c-error);
   --odx-input-control-outline-color-error: var(--odx-c-error-outline);
   --odx-input-control-outline-color-error-hover: var(--odx-c-error-outline-hover);
+
+  --odx-input-control-color-warning: var(--odx-c-error-warning-text);
+  --odx-input-control-background-color-warning: var(--odx-c-error-warning);
+  --odx-input-control-outline-color-warning: var(--odx-c-error-warning-outline);
+  --odx-input-control-outline-color-warning-hover: var(--odx-c-error-warning-outline-hover);
 }

package/scss/variables/_index.scss

@@ -1,5 +1,7 @@
 @forward 'color-palettes';
+@forward 'color-palettes-dark';
 @forward 'colors';
+@forward 'colors-dark';
 @forward 'controls';
 @forward 'typography';
 @forward 'vertical-rythm';

package/scss/variables/_typography.scss

@@ -12,7 +12,7 @@
   --odx-typography-positive-font-scaling-factor: 1.125;
   --odx-typography-negative-font-scaling-factor: 1.2;
 
-  @include breakpoints.up(tablet) {
+  @include breakpoints.up(phone) {
     --odx-typography-positive-font-scaling-factor: 1.25;
   }
 }

package/scss/variables/_visuals.scss

@@ -1,4 +1,4 @@
-:root {
+body {
   --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
 
@@ -7,6 +7,12 @@
   --odx-v-box-shadow-layer-1: 0 2px 6px 0 var(--odx-c-box-shadow);
   --odx-v-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-box-shadow);
 
+  --odx-v-layer-1: 0;
+  --odx-v-layer-2: 10;
+  --odx-v-layer-3: 20;
+  --odx-v-layer-4: 9000;
+  --odx-v-layer-5: 9500;
+
   --odx-v-transition-duration: 250ms;
   --odx-v-transition-easing-fn: ease;
   --odx-v-outline-width: 1px;

package/core-icons.css

@@ -1,43 +0,0 @@
-@font-face {
-  font-display: block;
-  font-family: "core-icons";
-  src: url("./core-icons.woff2?2e34fa04b5d8933d0d0fd3cefa3aa4d5") format("woff2");
-}
-
-.odx-icon::before,
-[class^="odx-icon-"]::before,
-[class*=" odx-icon-"]::before {
-  font-family: core-icons !important;
-  font-style: normal;
-  font-weight: normal !important;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  vertical-align: top;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.odx-icon-add::before { content: "\f101"; }
-.odx-icon-arrow-left::before { content: "\f102"; }
-.odx-icon-arrow-right::before { content: "\f103"; }
-.odx-icon-attachment::before { content: "\f104"; }
-.odx-icon-calendar::before { content: "\f105"; }
-.odx-icon-check::before { content: "\f106"; }
-.odx-icon-chevron-down::before { content: "\f107"; }
-.odx-icon-chevron-left::before { content: "\f108"; }
-.odx-icon-chevron-right::before { content: "\f109"; }
-.odx-icon-chevron-up::before { content: "\f10a"; }
-.odx-icon-close::before { content: "\f10b"; }
-.odx-icon-danger::before { content: "\f10c"; }
-.odx-icon-identify::before { content: "\f10d"; }
-.odx-icon-indeterminate::before { content: "\f10e"; }
-.odx-icon-info::before { content: "\f10f"; }
-.odx-icon-menu::before { content: "\f110"; }
-.odx-icon-minus::before { content: "\f111"; }
-.odx-icon-more::before { content: "\f112"; }
-.odx-icon-placeholder::before { content: "\f113"; }
-.odx-icon-plus::before { content: "\f114"; }
-.odx-icon-tile-menu::before { content: "\f115"; }
-.odx-icon-user::before { content: "\f116"; }
-.odx-icon-warning::before { content: "\f117"; }