@odx/ui 1.0.0-rc.8 → 1.0.0

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

@@ -1,10 +1,10 @@
 @use 'sass:math';
 @use '../abstract/breakpoints';
+@use '../abstract/dimensions';
 @use '../abstract/motion';
+@use '../abstract/typography';
 @use '../abstract/utils';
-@use '../abstract/dimensions';
-
-// TODO: check distances
+@use './avatar.component' as avatar;
 
 .odx-launch-tile {
   $root: &;
@@ -15,6 +15,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 +24,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 +54,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));
   }
 
@@ -89,7 +90,7 @@
     }
   }
 
-  .odx-action-group {
+  .odx-launch-tile-menu {
     margin: 0;
     position: absolute;
     right: $main-padding;
@@ -97,13 +98,13 @@
   }
 
   .odx-avatar {
-    @include dimensions.container(math.div(64, 24));
+    @include avatar.avatar-size(math.div(64, 24), math.div(64, 24), 2, math.div(48, 24));
     @include dimensions.margin-y(math.div(4, 24));
 
     flex: 0 0 auto;
 
     @include breakpoints.up(phone) {
-      @include dimensions.container(math.div(128, 24));
+      @include avatar.avatar-size(math.div(128, 24), math.div(128, 24), 4, math.div(76, 24));
 
       margin: dimensions.get-size(math.div(4, 24)) auto 0;
     }

package/scss/components/link.component.scss

@@ -1,6 +1,14 @@
 @use '../abstract/motion';
 @use '../abstract/utils';
 
+body {
+  @include utils.dark-theme-selector() {
+    --odx-c-link: var(--cyan-700);
+    --odx-c-link-hover: var(--cyan-800);
+    --odx-c-link-active: var(--cyan-900);
+  }
+}
+
 .odx-link {
   @include motion.transition(color background-color outline);
   @include utils.interactive();

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/loading-spinner.component.scss

@@ -2,6 +2,17 @@
 @use '../abstract/motion';
 @use '../abstract/utils';
 
+body {
+  --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
+
+  @include utils.dark-theme-selector() {
+    .odx-button {
+      --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
+    }
+    --odx-loading-spinner-track-stroke-color: var(--gray-200);
+  }
+}
+
 .odx-loading-spinner {
   $root: &;
 
@@ -15,7 +26,7 @@
     scroll-behavior: contain;
     top: 0;
     width: 100%;
-    z-index: 1;
+    z-index: var(--odx-v-layer-2);
   }
 
   &__backdrop {
@@ -32,10 +43,10 @@
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    z-index: 2;
+    z-index: var(--odx-v-layer-3);
 
     &__track {
-      stroke: var(--blue-700-15);
+      stroke: var(--odx-loading-spinner-track-stroke-color);
     }
   }
 

package/scss/components/logo.component.scss

@@ -1,8 +1,13 @@
 @use '../abstract/dimensions';
+@use '../abstract/utils';
 
-:root {
+body {
   --odx-logo-color: var(--odx-c-primary);
   --odx-logo-color-inverse: var(--odx-c-text-inverse);
+
+  @include utils.dark-theme-selector() {
+    --odx-logo-color: var(--odx-c-text-inverse);
+  }
 }
 
 .odx-logo {

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

@@ -4,4 +4,8 @@
   @extend .odx-button--ghost;
 
   color: inherit;
+
+  &:hover {
+    color: inherit;
+  }
 }

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

@@ -4,12 +4,17 @@
 @use '../abstract/utils';
 @use '../abstract/typography';
 
-:root {
+body {
   --odx-main-menu-item-background-color: transparent;
   --odx-main-menu-item-background-color-hover: var(--white-5);
   --odx-main-menu-item-background-color-active: var(--odx-c-focus);
   --odx-main-menu-item-text-color: inherit;
   --odx-main-menu-item-text-color-disabled: var(--odx-c-primary-text-disabled);
+
+  @include utils.dark-theme-selector() {
+    --odx-main-menu-item-background-color-active: var(--cyan-500-15);
+    --odx-main-menu-item-text-color-disabled: var(--blue-500);
+  }
 }
 
 .odx-main-menu-item {
@@ -44,4 +49,8 @@
     @include dimensions.margin(math.div(1, 3), right);
     @include dimensions.margin(math.div(-1, 3), left);
   }
+
+  &:focus-visible {
+    background-color: var(--odx-main-menu-item-background-color-active);
+  }
 }

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

@@ -7,14 +7,20 @@
 @use 'main-menu-button.component';
 @use 'main-menu-item.component';
 
-:root {
-  --odx-main-menu-max-width: 100vw;
+body {
+  --odx-main-menu-max-width: 100dvw;
   --odx-main-menu-background-color: var(--odx-c-primary);
   --odx-main-menu-text-color: var(--odx-c-primary-text);
   --odx-main-menu-highlight-color: var(--odx-c-highlight);
 
+  @include utils.dark-theme-selector() {
+    --odx-main-menu-background-color: var(--blue-800);
+    --odx-main-menu-text-color: var(--black);
+    --odx-main-menu-highlight-color: var(--cyan-500);
+  }
+
   @include breakpoints.up(phone) {
-    --odx-main-menu-max-width: min(100vw, 384px);
+    --odx-main-menu-max-width: min(100dvw, 384px);
   }
 }
 
@@ -29,12 +35,12 @@
     grid-template-rows: auto auto 1fr auto auto;
     height: 100%;
     left: 0;
-    max-height: 100vh;
+    max-height: 100dvh;
     max-width: var(--odx-main-menu-max-width);
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: 9000;
+    z-index: var(--odx-v-layer-4);
   }
 
   &__overlay {
@@ -42,10 +48,10 @@
     background-color: var(--odx-c-backdrop);
     height: 100%;
     left: 0;
-    position: absolute;
+    position: fixed;
     top: 0;
     width: 100%;
-    z-index: 8999;
+    z-index: calc(var(--odx-v-layer-4) - 1);
   }
 
   &__actions {
@@ -70,6 +76,7 @@
     --odx-v-scrollbar-thumb-color-hover: var(--blue-500);
 
     @include dimensions.padding-x(0.5);
+    @include dimensions.margin(1, top);
 
     display: flex;
     flex-direction: column;
@@ -97,7 +104,7 @@
   }
 
   &__footer {
-    @include dimensions.height(1);
+    @include dimensions.line-height(1);
     @include dimensions.padding-x(1);
     @include dimensions.padding(math.div(16, 24), top);
     @include dimensions.padding(math.div(32, 24), bottom);

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

@@ -0,0 +1,141 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+body {
+  @include utils.dark-theme-selector() {
+    .odx-mainfilter-group {
+      --odx-input-control-outline-color: var(--blue-900);
+      --odx-input-control-outline-color-hover: var(--blue-900);
+      --odx-c-highlight: var(--blue-900);
+      --odx-c-highlight-text: var(--white);
+      --odx-c-focus-outline: var(--cyan-800);
+      --odx-c-focus: var(--focus-bg);
+    }
+  }
+}
+
+.odx-mainfilter-group {
+  --odx-input-control-background-color: var(--gray-50);
+  --odx-input-control-outline-color: var(--blue-700);
+  --odx-c-highlight: var(--blue-700);
+  --odx-input-control-outline-color-hover: var(--blue-700);
+  --odx-input-control-background-color-hover: var(--gray-100);
+  --odx-c-secondary: var(--gray-50);
+  --odx-c-secondary-hover: var(--odx-input-control-background-color-hover);
+  --odx-c-secondary-active: var(--gray-200);
+  --odx-c-focus-outline: var(--cyan-700);
+  --odx-c-focus: var(--cyan-50);
+  --odx-c-highlight-active: var(--odx-c-focus-outline);
+
+  .odx-form-field {
+    flex: 0;
+    position: relative;
+
+    &__control {
+      .odx-form-field-control {
+        min-width: dimensions.get-size(math.div(150, 24));
+
+        &.odx-spinbox {
+          min-width: dimensions.get-size(math.div(172, 24));
+        }
+      }
+    }
+
+    &__label {
+      margin-top: 0;
+      position: absolute;
+      right: 0;
+      top: dimensions.get-size(math.div(12, 24));
+      z-index: 1;
+    }
+
+    &:has(.odx-spinbox) {
+      .odx-form-field__label {
+        right: dimensions.get-size(math.div(36, 24));
+      }
+    }
+
+    &-label {
+      @include dimensions.padding-x(math.div(3, 24));
+      @include dimensions.padding-y(math.div(2, 24));
+
+      background-color: var(--odx-input-control-background-color);
+      border-radius: var(--odx-v-border-radius-controls);
+      display: inline-block;
+      font-size: dimensions.get-size(math.div(10, 24));
+      line-height: 1;
+    }
+
+    &__hint {
+      display: none;
+    }
+  }
+
+  .odx-button {
+    margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+    outline-offset: -1px;
+    outline-width: var(--odx-v-outline-width);
+    overflow: visible;
+    position: relative;
+
+    &:not(:focus-visible) {
+      outline-color: var(--odx-input-control-outline-color);
+    }
+
+    &:focus-visible {
+      background-color: var(--odx-c-focus);
+    }
+
+    &::before {
+      @include dimensions.padding-x(math.div(3, 24));
+      @include dimensions.padding-y(math.div(2, 24));
+      @include typography.prevent-text-overflow();
+
+      background-color: var(--odx-input-control-background-color);
+      border-radius: var(--odx-v-border-radius-controls);
+      content: attr(label);
+      display: inline-block;
+      font-size: dimensions.get-size(math.div(10, 24));
+      font-weight: var(--odx-typography-font-weight-normal);
+      line-height: 1;
+      margin-top: 0;
+      position: absolute;
+      right: dimensions.get-size(math.div(8, 24));
+      top: dimensions.get-size(math.div(-7, 24));
+      z-index: 1;
+    }
+  }
+
+  .odx-spinbox {
+    .odx-spinbox__action {
+      &:hover {
+        border-color: var(--odx-input-control-outline-color);
+      }
+
+      &:active {
+        background-color: var(--odx-c-secondary-active);
+      }
+    }
+  }
+
+  .odx-toggle-button-group {
+    margin: 0;
+
+    &.is-active {
+      &:not(.is-disabled, .is-readonly):hover {
+        background-color: unset;
+      }
+
+      &:focus-within:has(:focus-visible) {
+        background-color: transparent;
+        outline-color: transparent;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}

package/scss/components/menu.component.scss

@@ -0,0 +1,52 @@
+@use '../abstract/dimensions';
+@use 'sass:math';
+
+.odx-menu {
+  display: block;
+
+  > .odx-action-group {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    margin: 0;
+
+    > .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

@@ -1,29 +1,34 @@
 @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)};
   --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: &;
-  $modal-padding: math.div(12, 24);
 
   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 {
@@ -36,13 +41,17 @@
 
     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;
-    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)};
@@ -55,9 +64,20 @@
     #{$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 & > * {
+      display: contents;
     }
   }
 
@@ -68,15 +88,18 @@
   }
 
   &__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);
-      @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);
+      }
     }
   }
 
@@ -99,3 +122,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/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 {
@@ -55,10 +61,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/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/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;