@odx/ui 1.0.0-rc.9 → 1.0.0

package/scss/components/card.component.scss

@@ -0,0 +1,174 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-card {
+  $root: &;
+  $main-padding: dimensions.get-size(math.div(12, 24));
+
+  @include motion.transition(box-shadow outline-color, color);
+  @include utils.interactive(false);
+  @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;
+  position: relative;
+
+  &.is-disabled * {
+    color: var(--odx-c-text-disabled);
+  }
+
+  &__container {
+    display: flex;
+    gap: $main-padding;
+
+    #{$root}--default & {
+      flex-direction: column;
+    }
+
+    @include breakpoints.up(phone) {
+      #{$root}--launch-tile-centered & {
+        flex-direction: column;
+      }
+    }
+  }
+
+  &__content {
+    padding-right: dimensions.get-size(math.div(40, 24));
+  }
+
+  &--default {
+    #{$root}__title {
+      line-height: dimensions.get-size(math.div(36, 24));
+      padding-right: dimensions.get-size(math.div(36, 24));
+
+      @include typography.font-weight(medium);
+    }
+  }
+
+  &:focus-visible,
+  &:hover,
+  &:focus-within:has(:focus-visible) {
+    box-shadow: var(--odx-v-box-shadow-layer-1);
+  }
+
+  &--launch-tile,
+  &--launch-tile-centered {
+    #{$root}__container {
+      @include dimensions.padding-y(0.5);
+      @include dimensions.padding-x(math.div(8, 24));
+
+      gap: dimensions.get-size(math.div(16, 24));
+
+      @include breakpoints.up(phone) {
+        @include dimensions.padding(1, bottom);
+
+        gap: dimensions.get-size(1);
+      }
+    }
+
+    .odx-avatar {
+      @include dimensions.container(math.div(64, 24));
+      @include dimensions.margin-y(math.div(4, 24));
+
+      flex: 0 0 auto;
+
+      @include breakpoints.up(phone) {
+        @include dimensions.container(math.div(128, 24));
+
+        margin: dimensions.get-size(math.div(4, 24)) auto 0;
+      }
+    }
+
+    #{$root}__title {
+      @include typography.font-weight(medium);
+
+      display: block;
+      font-size: dimensions.get-size(math.div(20, 24));
+      line-height: dimensions.get-size(math.div(30, 24));
+
+      @include breakpoints.up(phone) {
+        @include dimensions.margin-y(math.div(9, 24));
+
+        font-size: dimensions.get-size(math.div(25, 24));
+      }
+    }
+
+    #{$root}__subtitle {
+      display: block;
+    }
+
+    #{$root}__content {
+      flex: 1;
+    }
+  }
+
+  @include breakpoints.up(phone) {
+    &__content {
+      padding-right: unset;
+    }
+
+    &__title,
+    &__subtitle {
+      #{$root}--launch-tile-centered & {
+        text-align: center;
+      }
+    }
+
+    &__container {
+      padding-right: unset;
+
+      #{$root}--launch-tile & {
+        @include dimensions.padding-y(1);
+      }
+      #{$root}--launch-tile-centered & {
+        gap: dimensions.get-size(math.div(16, 24));
+      }
+    }
+  }
+
+  &__footer {
+    @include dimensions.padding-x(0.5);
+
+    display: flex;
+    gap: dimensions.get-size(math.div(12, 24));
+    justify-content: flex-end;
+
+    #{$root}--default & {
+      display: block;
+      margin-top: $main-padding;
+    }
+
+    @include breakpoints.up(phone) {
+      #{$root}--launch-tile-centered & {
+        justify-content: center;
+      }
+
+      padding-bottom: dimensions.get-size(math.div(12, 24));
+    }
+
+    .odx-button {
+      margin: 0;
+    }
+  }
+
+  .odx-card-menu {
+    margin: 0;
+    position: absolute;
+    right: $main-padding;
+    top: $main-padding;
+  }
+
+  &.is-disabled {
+    .odx-avatar {
+      color: var(--odx-c-text-disabled);
+      filter: saturate(0);
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+@use 'sass:math';
+@use '../abstract/motion';
+@use '../abstract/dimensions';
+
+.odx-expandable-list-item {
+  $root: &;
+
+  position: relative;
+
+  &::before {
+    @include motion.transition(border-color);
+
+    border-bottom: 1px solid var(--gray-200);
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:first-child {
+    &::before {
+      border-bottom-color: transparent;
+    }
+  }
+
+  &--danger + &::before,
+  &--expanded + &::before,
+  &:hover + &::before {
+    border-color: transparent;
+  }
+
+  &--danger {
+    &::before {
+      border-bottom-color: transparent;
+    }
+  }
+
+  &--expanded {
+    &::before {
+      border-bottom-color: transparent;
+    }
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__expand-icon {
+    @include motion.transition(transform);
+
+    position: relative;
+
+    #{$root}--expanded & {
+      transform: scaleY(-1);
+    }
+  }
+
+  &__slot {
+    .odx-list-item__content {
+      @include dimensions.padding(math.div(36, 24), left);
+    }
+  }
+}

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

@@ -8,7 +8,7 @@ $form-field-label-height: math.div(20, 24);
 $form-field-hint-height: math.div(16, 24);
 $form-field-inner-padding: math.div(8, 24);
 
-:root {
+body {
   --odx-form-field-hint-color: var(--gray-500);
 }
 
@@ -108,7 +108,7 @@ $form-field-inner-padding: math.div(8, 24);
       left: 0;
       position: absolute;
       width: 100%;
-      z-index: 1;
+      z-index: var(--odx-v-layer-1);
     }
 
     #{$control-selector} {
@@ -155,6 +155,19 @@ $form-field-inner-padding: math.div(8, 24);
       }
     }
 
+    #{$root}.has-warning & {
+      background-color: var(--odx-input-control-background-color-warning);
+      outline-color: var(--odx-input-control-outline-color-warning);
+
+      &:hover {
+        background-color: var(--odx-input-control-background-color-warning);
+      }
+
+      &::after {
+        background-color: var(--odx-input-control-color-warning);
+      }
+    }
+
     #{$root}.is-disabled &,
     #{$root}.is-readonly & {
       &::after {
@@ -192,6 +205,17 @@ $form-field-inner-padding: math.div(8, 24);
     color: var(--odx-form-field-hint-color);
     text-align: right;
   }
+
+  &--simple {
+    padding: 0;
+
+    @include dimensions.margin-y(0.25);
+
+    #{$root}__label,
+    #{$root}__info {
+      display: none;
+    }
+  }
 }
 
 .odx-form-field.is-readonly,
@@ -206,3 +230,7 @@ $form-field-inner-padding: math.div(8, 24);
 .odx-form-field-error {
   color: var(--odx-input-control-color-error);
 }
+
+.odx-form-field.has-warning .odx-form-field-error {
+  color: var(--odx-input-control-color-warning);
+}

package/scss/components/header.component.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '../abstract/breakpoints';
 @use '../abstract/dimensions';
 @use '../abstract/utils';
 @use '../abstract/typography';
@@ -17,8 +18,8 @@
     margin-right: dimensions.get-size(0.5);
   }
 
-  &__title,
-  .odx-logo {
+  > .odx-logo,
+  &__title {
     margin-right: auto;
   }
 
@@ -34,7 +35,12 @@
     padding-right: dimensions.get-size(0.5);
   }
 
-  &__title ~ .odx-logo {
+  &:has(.odx-title) > .odx-logo {
     display: none;
+    margin-right: dimensions.get-size(0.5);
+
+    @include breakpoints.up(tablet) {
+      display: block;
+    }
   }
 }

package/scss/components/icon.component.scss

@@ -8,12 +8,8 @@ $icon-sizes: (small math.div(16, 24) 1, large math.div(32, 24) 2, xlarge math.di
   @include dimensions.container(1);
   @include utils.center-content(true);
 
-  direction: ltr;
+  flex: 0 0 auto;
   font-size: dimensions.get-size(1);
-  text-rendering: auto;
-  text-transform: none;
-  user-select: none;
-  white-space: nowrap;
 
   @each $size, $size_factor, $factor in $icon-sizes {
     &--#{$size} {
@@ -27,9 +23,8 @@ $icon-sizes: (small math.div(16, 24) 1, large math.div(32, 24) 2, xlarge math.di
     @include dimensions.margin-y(0);
 
     font-size: inherit;
-    height: auto;
-    line-height: inherit;
-    vertical-align: -0.15em;
-    width: auto;
+    height: 0.8em;
+    line-height: 0.8em;
+    width: 0.8em;
   }
 }

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

@@ -4,6 +4,7 @@
 @use '../abstract/motion';
 @use '../abstract/typography';
 @use '../abstract/utils';
+@use './avatar.component' as avatar;
 
 .odx-launch-tile {
   $root: &;
@@ -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/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 {
@@ -45,7 +51,7 @@
     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;
+        }
+      }
+    }
+  }
+}