@odx/ui 1.0.0-rc.1 → 1.0.0-rc.11

package/scss/components/{avatar/avatar.component.scss → avatar.component.scss}

@@ -1,30 +1,31 @@
 @use 'sass:math';
-@use '../../modules/breakpoints' as br;
-@use '../../modules/vertical-rythm' as vr;
-@use '../../modules/typography' as t;
-@use '../../base/mixins' as mx;
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
 
 @mixin avatar-size($size-factor, $line-height-factor, $font-size, $icon-factor) {
-  @include vr.container($size-factor, $line-height-factor);
-  @include t.font-size($font-size);
+  @include dimensions.container($size-factor, $line-height-factor);
+  @include typography.font-size($font-size);
 
   > .odx-icon,
   > .odx-icon[class*='odx-icon--'] {
-    @include vr.container($icon-factor);
+    @include dimensions.container($icon-factor);
 
-    font-size: vr.get-size($icon-factor);
+    font-size: dimensions.get-size($icon-factor);
   }
 }
 
 .odx-avatar {
-  @include mx.center-content(true);
-  @include t.prevent-text-overflow();
+  @include utils.center-content(true);
+  @include typography.font-weight(medium);
+  @include typography.prevent-text-overflow();
 
   background-color: var(--blue-700-10);
   border-radius: 50%;
   color: var(--odx-c-text);
-  font-weight: var(--odx-t-font-weight-medium);
   position: relative;
+  user-select: none;
   vertical-align: middle;
 
   &--small {
@@ -34,7 +35,7 @@
   &--medium {
     @include avatar-size(2, 1.5, 0, 1);
 
-    @include br.up(tablet) {
+    @include breakpoints.up(tablet) {
       @include avatar-size(3, math.div(64, 24), 2, 1.5);
     }
   }
@@ -42,11 +43,15 @@
   &--large {
     @include avatar-size(3, math.div(64, 24), 2, 1.5);
 
-    @include br.up(tablet) {
+    @include breakpoints.up(tablet) {
       @include avatar-size(4, 4, 4, 2.25);
     }
   }
 
+  &--rectangle {
+    border-radius: var(--odx-v-border-radius-controls);
+  }
+
   img {
     height: 100%;
     left: 0;

package/scss/components/{badge/badge.component.scss → badge.component.scss}

@@ -1,42 +1,28 @@
 @use 'sass:math';
-@use '../../base/mixins' as mx;
-@use '../../modules/typography' as t;
-@use '../../modules/vertical-rythm' as vr;
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
 
 :root {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
 .odx-badge {
-  $badge-size: vr.get-size(math.div(2, 3));
+  $badge-size: dimensions.get-size(math.div(2, 3));
 
-  @include mx.center-content(true);
-  @include mx.non-interactive();
-  @include t.font-size(-2);
-  @include vr.padding-x(math.div(1, 8));
+  @include dimensions.padding-x(math.div(1, 8));
+  @include utils.center-content(true);
+  @include utils.non-interactive();
+  @include typography.font-size(-2);
+  @include typography.font-weight(medium);
 
   border-radius: $badge-size;
-  box-sizing: border-box;
-  font-weight: var(--odx-t-font-weight-medium);
   height: $badge-size;
-  left: 0;
   min-width: $badge-size;
   outline: 1px solid transparent;
-  top: 0;
+  vertical-align: middle;
   z-index: 9999;
 
-  &::before {
-    content: attr(data-value);
-  }
-
-  &[data-value='0'] {
-    display: none;
-  }
-
-  &[data-value^='-']::before {
-    content: '';
-  }
-
   &,
   &--highlight {
     background-color: var(--odx-c-highlight);
@@ -56,4 +42,9 @@
   &--contrast {
     outline-color: var(--odx-badge-contrast-color);
   }
+
+  .odx-badge-overlay > & {
+    display: flex;
+    margin: calc(#{$badge-size} / -2);
+  }
 }

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

@@ -0,0 +1,99 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+@mixin buttons-radius($vertical: false, $reversed: false) {
+  $start: 'first';
+  $end: 'last';
+
+  @if $reversed {
+    $start: 'last';
+    $end: 'first';
+  }
+
+  @if $vertical {
+    margin: 0;
+
+    &:#{$start}-child {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:#{$end}-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  } @else {
+    &:#{$start}-child {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &:#{$end}-child {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  &:not(:first-child, :last-child) {
+    border-radius: 0;
+  }
+}
+
+.odx-button-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: dimensions.get-size(math.div(2, 24));
+
+  &--reverse {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+
+  &--reverse#{&}--vertical#{&}--block {
+    flex-direction: column-reverse;
+    justify-content: flex-end;
+  }
+
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+
+  &:not(#{&}--vertical)#{&}--align-right {
+    justify-content: flex-end;
+  }
+
+  &:not(#{&}--vertical)#{&}--align-right#{&}--reverse {
+    justify-content: flex-start;
+  }
+
+  &:not(#{&}--vertical, #{&}--reverse) > .odx-button {
+    @include buttons-radius();
+  }
+
+  &:not(#{&}--vertical)#{&}--reverse > .odx-button {
+    @include buttons-radius(false, true);
+  }
+
+  &--vertical {
+    @include dimensions.margin-y(math.div(10, 24));
+
+    flex-direction: column;
+
+    > .odx-button {
+      @include dimensions.height(math.div(35, 24));
+    }
+  }
+
+  &:not(#{&}--reverse)#{&}--vertical {
+    > .odx-button {
+      @include buttons-radius(true);
+    }
+  }
+
+  &#{&}--reverse#{&}--vertical {
+    > .odx-button {
+      @include buttons-radius(true, true);
+    }
+  }
+}

package/scss/components/button.component.scss

@@ -0,0 +1,129 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use 'avatar.component' as avatar;
+@use 'dropdown.component' as dropdown;
+@use 'icon.component';
+
+.odx-button {
+  $variants: secondary, primary, highlight, success, danger, confirmation;
+  $icon-margin: 0.25;
+
+  @extend .odx-button--secondary;
+  @include dimensions.height(2, 1.5);
+  @include dimensions.padding-x(2 * $icon-margin);
+  @include motion.transition(background-color color outline);
+  @include typography.prevent-text-overflow();
+  @include typography.font-size(0);
+  @include typography.font-weight(medium);
+  @include utils.center-content(true);
+  @include utils.interactive($with-background: false);
+  @include utils.with-outline-bold();
+
+  border-radius: var(--odx-v-border-radius-controls);
+  min-width: dimensions.get-size(1.5);
+  vertical-align: middle;
+
+  &:not(:has(> .odx-icon, > .odx-avatar)) {
+    min-width: dimensions.get-size(3);
+  }
+
+  > .odx-icon {
+    @include dimensions.margin-x(-$icon-margin);
+  }
+
+  > .odx-icon[alignLeft] {
+    @include dimensions.margin($icon-margin, right);
+  }
+
+  > .odx-icon[alignRight] {
+    @include dimensions.margin($icon-margin, left);
+  }
+
+  > .odx-avatar {
+    @include avatar.avatar-size(1.5, math.div(32, 24), 0, 1);
+    @include dimensions.margin-x(-2 * $icon-margin);
+  }
+
+  &--highlight:focus-visible {
+    outline-color: var(--blue-400);
+  }
+
+  @each $variant in $variants {
+    &--#{$variant} {
+      background-color: var(--odx-c-#{$variant});
+      color: var(--odx-c-#{$variant}-text);
+
+      &:hover {
+        background-color: var(--odx-c-#{$variant}-hover);
+      }
+
+      &#{dropdown.$dropdown-open-selector},
+      &:active {
+        background-color: var(--odx-c-#{$variant}-active);
+      }
+
+      &:disabled,
+      &.is-disabled {
+        background-color: var(--odx-c-#{$variant}-disabled);
+        color: var(--odx-c-#{$variant}-text-disabled);
+      }
+    }
+  }
+
+  &--ghost {
+    @include utils.with-outline();
+
+    background-color: transparent;
+    color: var(--odx-c-link);
+
+    &:hover {
+      background-color: var(--blue-700-5);
+      color: var(--odx-c-link-hover);
+    }
+
+    &:active {
+      color: var(--odx-c-link-active);
+    }
+
+    &#{dropdown.$dropdown-open-selector},
+    &:focus-visible,
+    &:active {
+      background-color: var(--odx-c-focus);
+    }
+
+    &:disabled,
+    &.is-disabled {
+      background-color: transparent;
+      color: var(--odx-c-link-disabled);
+    }
+  }
+
+  &--small {
+    $icon-margin: math.div(1, 8);
+
+    @include dimensions.height(1);
+    @include dimensions.padding-x(2 * $icon-margin);
+    @include typography.font-size(-1);
+
+    min-width: dimensions.get-size(1);
+
+    &:not(:has(> .odx-icon, > .odx-avatar)) {
+      min-width: dimensions.get-size(2);
+    }
+
+    > .odx-icon {
+      @include dimensions.margin-x(-2 * $icon-margin);
+    }
+
+    > .odx-icon[alignLeft] {
+      @include dimensions.margin($icon-margin, right);
+    }
+
+    > .odx-icon[alignRight] {
+      @include dimensions.margin($icon-margin, left);
+    }
+  }
+}

package/scss/components/checkbox.component.scss

@@ -0,0 +1,117 @@
+@use 'sass:math';
+@use '../layout/helpers';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use '../abstract/motion';
+
+.odx-checkbox {
+  $root: &;
+
+  color: var(--odx-c-text);
+  display: inline-block;
+
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
+  }
+
+  &.is-readonly {
+    @include utils.non-interactive();
+  }
+
+  &__label {
+    @include dimensions.line-height(1);
+    @include motion.transition(background-color color outline-color);
+    @include typography.font-size(0);
+    @include utils.interactive($focus-within: true);
+
+    border-radius: var(--odx-v-border-radius-controls);
+    color: inherit;
+    display: inline-flex;
+    min-height: dimensions.get-size(1);
+    padding: 0 2px;
+    user-select: auto;
+    vertical-align: top;
+
+    #{$root}.is-disabled & {
+      cursor: default;
+    }
+  }
+
+  &__input {
+    @include utils.visually-hidden();
+  }
+
+  &__indicator {
+    @include dimensions.container(1, math.div(20, 24));
+    @include motion.transition(background-color color outline-color);
+    @include utils.center-content(true);
+    @include utils.with-outline();
+
+    background-color: var(--odx-control-background-color);
+    border-radius: var(--odx-v-border-radius-controls);
+    color: var(--odx-control-color-selected);
+    flex: 0 0 auto;
+    outline-color: var(--odx-control-outline-color);
+    padding: 1px;
+
+    > .odx-icon {
+      $checkmark-size: math.div(18, 24);
+
+      @include dimensions.container($checkmark-size);
+      @include motion.transition(opacity);
+
+      font-size: dimensions.get-size($checkmark-size);
+      opacity: 0;
+    }
+
+    #{$root}:hover & {
+      background-color: var(--odx-control-background-color-hover);
+      outline-color: var(--odx-control-outline-color-hover);
+    }
+
+    #{$root}.is-active &,
+    #{$root}__input:indeterminate ~ &,
+    #{$root}__input:checked ~ & {
+      background-color: var(--odx-control-background-color-selected);
+      outline-color: var(--odx-control-outline-color-selected);
+
+      > .odx-icon {
+        opacity: 1;
+      }
+    }
+
+    #{$root}.has-error & {
+      background-color: var(--odx-control-background-color-error);
+      color: var(--odx-control-color-error);
+      outline-color: var(--odx-control-outline-color-error);
+    }
+
+    #{$root}.has-error:hover & {
+      outline-color: var(--odx-control-outline-color-error-hover);
+    }
+
+    #{$root}.is-disabled & {
+      background-color: var(--odx-control-background-color-disabled);
+      color: var(--odx-control-color-disabled);
+      outline-color: var(--odx-control-outline-color-disabled);
+    }
+
+    #{$root}.is-readonly & {
+      background-color: var(--odx-control-background-color-readonly);
+      color: var(--odx-control-color-readonly);
+      outline-color: var(--odx-control-outline-color-readonly);
+    }
+  }
+
+  &__content {
+    @include dimensions.margin(0.5, left);
+
+    padding-left: 2px;
+
+    &:empty {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}

package/scss/components/chip.component.scss

@@ -0,0 +1,52 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../abstract/typography';
+
+$sizes: 'small' 1 -1, 'medium' 1.5 0;
+$variants: 'secondary', 'highlight', 'success', 'danger';
+
+.odx-chip {
+  $root: &;
+
+  @include typography.font-weight(medium);
+  @include motion.transition(background-color color);
+
+  display: inline-flex;
+  gap: dimensions.get-size(math.div(4, 24));
+  user-select: none;
+
+  &__content {
+    @include typography.prevent-text-overflow();
+  }
+
+  &__action {
+    @include utils.center-content();
+    @include motion.transition(background-color color outline);
+
+    border-radius: 50%;
+    margin: 0;
+  }
+
+  @each $size, $size-factor, $font-size-factor in $sizes {
+    &--#{$size} {
+      @include dimensions.padding-x(math.div($size-factor, 3));
+      @include dimensions.line-height($size-factor);
+      @include typography.font-size($font-size-factor);
+
+      border-radius: dimensions.get-size(math.div($size-factor, 2));
+
+      #{$root}__action {
+        @include dimensions.margin(math.div($size-factor, -3), 'right');
+      }
+    }
+  }
+
+  @each $variant in $variants {
+    &--#{$variant} {
+      background-color: var(--odx-c-#{$variant});
+      color: var(--odx-c-#{$variant}-text);
+    }
+  }
+}