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

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

@@ -0,0 +1,53 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract//utils';
+
+.odx-tab-bar-item {
+  @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 motion.transition(background-color outline-color);
+
+  align-items: center;
+  background-color: transparent;
+  border-radius: var(--odx-v-border-radius-controls);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--blue-700-5);
+  }
+
+  .odx-icon {
+    @include dimensions.container(1, 1);
+    @include dimensions.margin-x(math.div(4, 24));
+
+    font-size: dimensions.get-size(1);
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      @include motion.transition(color);
+
+      margin-right: 0;
+
+      &:hover {
+        color: var(--odx-c-highlight);
+      }
+    }
+  }
+
+  &.is-disabled {
+    color: var(--odx-c-text-disabled);
+    pointer-events: none;
+
+    .odx-tab-bar-item__label {
+      pointer-events: none;
+    }
+  }
+}

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

@@ -0,0 +1,124 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+.odx-tab-bar {
+  $root: &;
+
+  @include dimensions.height(2);
+
+  border-bottom: 1px solid;
+  border-bottom-color: var(--odx-control-outline-color-hover);
+  display: flex;
+  overflow: hidden;
+  position: relative;
+
+  &__inner {
+    $gradient-start: dimensions.get-size(1);
+    $gradient-end: dimensions.get-size(3);
+    $mask-color: #000000;
+
+    display: flex;
+    width: 100%;
+
+    #{$root}--overflow-left & {
+      mask-image: linear-gradient(to right, transparent $gradient-start, $mask-color $gradient-end);
+    }
+
+    #{$root}--overflow-right & {
+      mask-image: linear-gradient(to right, $mask-color calc(100% - $gradient-end), transparent calc(100% - $gradient-start));
+    }
+
+    #{$root}--overflow-left#{$root}--overflow-right & {
+      mask-image: linear-gradient(
+        to right,
+        transparent $gradient-start,
+        $mask-color $gradient-end,
+        $mask-color calc(100% - $gradient-end),
+        transparent calc(100% - $gradient-start)
+      );
+    }
+  }
+
+  &__panel {
+    @include motion.transition(transform);
+    @include dimensions.padding-x(math.div(12, 24));
+
+    display: flex;
+    flex: 0 0 auto;
+    gap: dimensions.get-size(math.div(8, 24));
+    position: relative;
+  }
+
+  &__action {
+    @include dimensions.height(2);
+    @include motion.transition(opacity width padding);
+    @include utils.center-content();
+
+    background-color: transparent;
+    cursor: pointer;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    user-select: none;
+    width: 0;
+    z-index: 50;
+
+    &.is-active {
+      @include dimensions.padding(math.div(8, 24), (right, left));
+
+      opacity: 1;
+      pointer-events: all;
+      transform: scaleX(1);
+      width: dimensions.get-size(1.5);
+    }
+
+    .odx-icon {
+      @include dimensions.container(1, 1);
+
+      align-items: center;
+      color: var(--odx-c-highlight);
+      display: flex;
+      font-size: dimensions.get-size(math.div(32, 24));
+      justify-content: center;
+    }
+
+    &--prev {
+      justify-content: flex-start;
+      left: 0;
+      transform-origin: center left;
+    }
+
+    &--next {
+      justify-content: flex-end;
+      right: 0;
+      transform-origin: center right;
+    }
+
+    &:hover {
+      .odx-icon {
+        color: var(--odx-c-highlight-hover);
+      }
+    }
+  }
+
+  .odx-tab-bar__indicator {
+    @include dimensions.margin(math.div(8, 24), left);
+
+    background-color: var(--odx-c-highlight);
+    bottom: 0;
+    height: dimensions.get-size(math.div(4, 24));
+    width: dimensions.get-size(2) !important;
+  }
+
+  &:focus-visible {
+    .odx-tab-bar-item.is-active {
+      background-color: var(--odx-c-focus);
+      outline-color: var(--odx-c-focus-outline);
+    }
+  }
+}

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;
+  }
+}

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

@@ -7,11 +7,12 @@
   --odx-toggle-button-border-radius: 2px;
 
   $root: &;
+
   @include dimensions.height(2, 1.5);
   @include dimensions.padding-x(math.div(6, 24));
   @include motion.transition(background-color outline-color);
   @include utils.center-content(true);
-  @include utils.with-outline;
+  @include utils.with-outline();
 
   border-radius: var(--odx-v-border-radius-controls);
   column-gap: dimensions.get-size(math.div(6, 24));
@@ -19,7 +20,7 @@
 
   &__indicator {
     @include dimensions.height(2, 1);
-    @include utils.with-outline;
+    @include utils.with-outline();
 
     background-color: var(--odx-c-highlight);
     border-radius: var(--odx-toggle-button-border-radius);

package/scss/core.scss

@@ -38,6 +38,8 @@ Layout
 @use 'components/area-header.component';
 @use 'components/avatar.component';
 @use 'components/badge.component';
+@use 'components/bar.component';
+@use 'components/breadcrumbs.component';
 @use 'components/button-group.component';
 @use 'components/button.component';
 @use 'components/checkbox.component';
@@ -49,22 +51,29 @@ Layout
 @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.scss';
+@use 'components/loading-spinner.component';
 @use 'components/logo.component';
 @use 'components/main-menu.component';
+@use 'components/menu.component';
+@use 'components/menu-item.component';
 @use 'components/modal.component';
 @use 'components/progress.component';
 @use 'components/radio-button.component';
 @use 'components/radio-group.component';
 @use 'components/rail-navigation.component';
 @use 'components/rail-navigation-item.component';
-@use 'components/select.component.scss';
-@use 'components/slider.component.scss';
-@use 'components/spinbox.component.scss';
-@use 'components/switch.component.scss';
+@use 'components/select.component';
+@use 'components/slider.component';
+@use 'components/spinbox.component';
+@use 'components/switch.component';
+@use 'components/tab-bar-item.component';
+@use 'components/tab-bar.component';
+@use 'components/toast.component';
+@use 'components/toast-item.component';
 @use 'components/toggle-button.component';
 @use 'components/toggle-button-group.component';
 @use 'components/tooltip.component';

package/scss/layout/_description-list.scss

@@ -4,6 +4,7 @@
 
 .odx-description-list {
   $gap: dimensions.get-size(math.div(8, 24));
+
   @include dimensions.margin-y(0.5);
 
   column-gap: $gap;
@@ -24,6 +25,6 @@
   }
 
   dd {
-    font-weight: var(--odx-typography-font-weight-medium);
+    @include typography.font-weight(medium);
   }
 }

package/scss/layout/_helpers.scss

@@ -4,8 +4,13 @@
 @use '../abstract/utils';
 
 html body {
+  .odx-no-margin {
+    margin: 0;
+  }
+
   @each $size in (4, 8, 12, 16, 24, 36, 48) {
     $factor: math.div($size, 24);
+
     @each $direction in (top, right, bottom, left) {
       .odx-margin-#{$direction}-#{$size} {
         @include dimensions.margin($factor, $direction);
@@ -27,6 +32,7 @@ html body {
 
   @each $size in (4, 8, 12, 16, 24, 36, 48) {
     $factor: math.div($size, 24);
+
     @each $direction in (top, right, bottom, left) {
       .odx-padding-#{$direction}-#{$size} {
         @include dimensions.padding($factor, $direction);

package/scss/layout/_typography.scss

@@ -1,4 +1,3 @@
-/* stylelint-disable block-closing-brace-newline-after */
 @use 'sass:math';
 @use '../abstract/breakpoints';
 @use '../abstract/dimensions';
@@ -25,13 +24,17 @@
   src: url('../assets/fonts/PangeaText-SemiBoldWeb.woff2') format('woff2');
 }
 
+html {
+  font-size: 62.5%;
+}
+
 html body {
   @include dimensions.line-height(1);
   @include typography.font-size(0);
+  @include typography.font-weight(normal);
 
   color: var(--odx-c-text);
   font-family: Pangea, sans-serif;
-  font-weight: var(--odx-typography-font-weight-normal);
 }
 
 .odx-title,
@@ -97,8 +100,7 @@ html body {
 
 .odx-text {
   @include dimensions.line-height(1);
-
-  font-weight: var(--odx-typography-font-weight-normal);
+  @include typography.font-weight(normal);
 
   &--small {
     @include dimensions.line-height(1, math.div(20, 24));

package/scss/reset.scss

@@ -141,6 +141,7 @@ a {
   text-decoration: none;
 }
 
+button,
 select,
 input,
 textarea {

package/scss/variables/_colors.scss

@@ -27,7 +27,7 @@
   --odx-c-backdrop: var(--white-60);
   --odx-c-backdrop-dark: var(--blue-800-30);
 
-  --odx-c-backdrop-box-shadow: var(--blue-800-30);
+  --odx-c-box-shadow: var(--blue-800-30);
 
   --odx-c-seperator: var(--gray-200);
 

package/scss/variables/_typography.scss

@@ -1,7 +1,7 @@
 @use '../abstract/breakpoints';
 
 :root {
-  --odx-typography-base-size: 16px;
+  --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;
   --odx-typography-font-weight-normal-letter-spacing: 0;

package/scss/variables/_visuals.scss

@@ -3,7 +3,9 @@
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
 
   --odx-v-backdrop-blur: 3px;
-  --odx-v-backdrop-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-backdrop-box-shadow);
+
+  --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-transition-duration: 250ms;
   --odx-v-transition-easing-fn: ease;