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

package/scss/components/button.component.scss

@@ -0,0 +1,123 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use 'avatar.component' as avatar;
+@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);
+
+  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);
+      }
+
+      &: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 {
+    background-color: transparent;
+    color: var(--odx-c-link);
+    outline-width: 1px;
+
+    &:hover {
+      background-color: var(--blue-700-5);
+      color: var(--odx-c-link-hover);
+    }
+
+    &:active {
+      color: var(--odx-c-link-active);
+    }
+
+    &: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,116 @@
+@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-input-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/content-box.component.scss

@@ -0,0 +1,50 @@
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+
+.odx-content-box {
+  background-color: var(--odx-c-background-content);
+  display: block;
+
+  &__header,
+  &__footer {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+
+    > * {
+      flex: 1 1 auto;
+    }
+  }
+
+  &__header {
+    @include dimensions.padding(1, ('top', 'right', 'left'));
+    @include breakpoints.down(phone) {
+      @include dimensions.padding(0.5, ('top', 'right', 'left'));
+    }
+  }
+
+  &__footer {
+    @include dimensions.padding(1, ('right', 'bottom', 'left'));
+    @include breakpoints.down(phone) {
+      @include dimensions.padding(0.5, ('right', 'bottom', 'left'));
+    }
+  }
+
+  &__content {
+    @include dimensions.padding(1);
+    @include breakpoints.down(phone) {
+      @include dimensions.padding(0.5);
+    }
+  }
+
+  .odx-area-header ~ &__content {
+    padding-top: 0;
+  }
+
+  .odx-area-header {
+    @include dimensions.padding(1, ('top', 'bottom'));
+    @include breakpoints.down(phone) {
+      @include dimensions.padding(0.5, ('top', 'bottom'));
+    }
+  }
+}

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

@@ -0,0 +1,204 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+$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 {
+  --odx-form-field-hint-color: var(--gray-500);
+}
+
+.odx-form,
+.odx-form-group {
+  --odx-grid-gutter: #{dimensions.get-size(0.5)};
+
+  row-gap: 0;
+}
+
+.odx-form-field {
+  $root: &;
+  $control-selector: '> *:not(.odx-form-field__prefix, .odx-form-field__suffix)';
+
+  @include dimensions.padding($form-field-label-height, top);
+
+  color: var(--odx-input-control-color);
+  display: flex;
+  flex-direction: column;
+  vertical-align: top;
+
+  &__label,
+  &__info {
+    @include dimensions.padding-x($form-field-inner-padding);
+
+    display: block;
+    flex: 1 1 auto;
+  }
+
+  &__prefix,
+  &__suffix {
+    @include dimensions.height(1.5);
+    @include motion.transition(color);
+    @include utils.vertical-center-content(true);
+
+    flex: 0 0 auto;
+
+    #{$root}.is-disabled & {
+      color: var(--odx-input-control-color-disabled);
+    }
+  }
+
+  &__prefix:not(:empty) {
+    @include dimensions.padding($form-field-inner-padding, left);
+  }
+
+  &__suffix:not(:empty) {
+    @include dimensions.padding($form-field-inner-padding, right);
+  }
+
+  &-label {
+    @include typography.prevent-text-overflow();
+
+    display: block;
+    max-width: 100%;
+  }
+
+  &__label {
+    @include dimensions.line-height($form-field-label-height);
+    @include dimensions.margin(-$form-field-label-height, 'top');
+    @include typography.font-size(-1);
+
+    display: flex;
+    user-select: none;
+
+    #{$root}--required:not(.is-readonly, .is-disabled) &::after {
+      @include typography.font-size(0);
+
+      color: var(--odx-c-error-text);
+      content: '*';
+      margin-left: 2px;
+      vertical-align: top;
+    }
+  }
+
+  &__control {
+    @include dimensions.min-height(1.5);
+    @include motion.transition(background-color color outline-color);
+    @include utils.with-outline();
+    @include utils.focus-state(true, true, $focus-within-selector: $control-selector);
+
+    background-color: var(--odx-input-control-background-color);
+    border-radius: var(--odx-v-border-radius-controls);
+    display: flex;
+    outline-color: var(--odx-input-control-outline-color);
+    overflow: hidden;
+    position: relative;
+
+    &::after {
+      @include motion.transition(background-color);
+
+      background-color: transparent;
+      bottom: 0;
+      content: '';
+      display: block;
+      height: 1px;
+      left: 0;
+      position: absolute;
+      width: 100%;
+      z-index: 1;
+    }
+
+    #{$control-selector} {
+      @include dimensions.padding-x($form-field-inner-padding);
+      @include typography.font-weight(medium);
+
+      vertical-align: middle;
+      width: 100%;
+
+      &::placeholder {
+        @include typography.font-weight(normal);
+
+        color: var(--odx-input-control-placeholder-color);
+        opacity: 1;
+      }
+    }
+
+    > textarea {
+      @include dimensions.padding(0.25, top);
+
+      height: dimensions.get-size(3);
+      resize: vertical;
+    }
+
+    > select {
+      border-right: dimensions.get-size(0.25) solid transparent;
+    }
+
+    &:hover {
+      background-color: var(--odx-input-control-background-color-hover);
+      outline-color: var(--odx-input-control-outline-color-hover);
+    }
+
+    #{$root}.has-error & {
+      background-color: var(--odx-input-control-background-color-error);
+      outline-color: var(--odx-input-control-outline-color-error);
+
+      &:hover {
+        background-color: var(--odx-input-control-background-color);
+      }
+
+      &::after {
+        background-color: var(--odx-input-control-color-error);
+      }
+    }
+
+    #{$root}.is-disabled &,
+    #{$root}.is-readonly & {
+      &::after {
+        background-color: transparent;
+      }
+    }
+
+    #{$root}.is-disabled & {
+      background-color: var(--odx-input-control-background-color-disabled);
+      color: var(--odx-input-control-color-disabled);
+      outline-color: var(--odx-input-control-outline-color-disabled);
+
+      #{$control-selector} {
+        @include utils.non-interactive;
+      }
+    }
+
+    #{$root}.is-readonly & {
+      background-color: var(--odx-input-control-background-color-readonly);
+      color: var(--odx-input-control-color-readonly);
+      outline-color: var(--odx-input-control-outline-color-readonly);
+    }
+  }
+
+  &__info {
+    @include dimensions.min-height($form-field-hint-height);
+    @include dimensions.line-height($form-field-hint-height);
+    @include motion.transition(opacity);
+    @include typography.font-size(-2);
+
+    color: var(--odx-form-field-hint-color);
+    text-align: right;
+  }
+}
+
+.odx-form-group,
+.odx-form-field {
+  &.is-readonly .odx-form-field__info {
+    @include utils.non-interactive();
+
+    opacity: 0;
+  }
+}
+
+.odx-form-field-error {
+  color: var(--odx-input-control-color-error);
+}

package/scss/components/header.component.scss

@@ -0,0 +1,40 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '../layout/typography' as *;
+
+.odx-header {
+  @include dimensions.padding(math.div(20, 24), 'left');
+  @include dimensions.padding(0.5, 'right');
+  @include dimensions.height(2);
+  @include utils.vertical-center-content();
+
+  background-color: var(--odx-c-background-content);
+
+  .odx-main-menu-button {
+    margin-left: dimensions.get-size(-1 * math.div(1, 3));
+    margin-right: dimensions.get-size(0.5);
+  }
+
+  &__title,
+  .odx-logo {
+    margin-right: auto;
+  }
+
+  &__title {
+    @extend .odx-title;
+    @extend .odx-title--6;
+    @include typography.prevent-text-overflow();
+  }
+
+  .odx-action-group:not(:last-child) {
+    border-right: 1px solid var(--odx-c-seperator);
+    margin-right: dimensions.get-size(0.5);
+    padding-right: dimensions.get-size(0.5);
+  }
+
+  &__title ~ .odx-logo {
+    display: none;
+  }
+}

package/scss/components/icon.component.scss

@@ -0,0 +1,35 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+
+$icon-sizes: (small math.div(2, 3) 1, large math.div(4, 3) 2);
+
+.odx-icon {
+  @include dimensions.container(1);
+  @include utils.center-content(true);
+
+  direction: ltr;
+  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} {
+      @include dimensions.container($factor, $size_factor);
+
+      font-size: dimensions.get-size($size_factor);
+    }
+  }
+
+  &--inline {
+    @include dimensions.margin-y(0);
+
+    font-size: inherit;
+    height: auto;
+    line-height: inherit;
+    vertical-align: -0.15em;
+    width: auto;
+  }
+}

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

@@ -1,16 +1,18 @@
-@use '../../base/mixins' as mx;
+@use '../abstract/motion';
+@use '../abstract/utils';
 
 .odx-link {
-  @include mx.interactive();
-  @include mx.transition(color background-color outline);
+  @include motion.transition(color background-color outline);
+  @include utils.interactive();
 
   border-radius: var(--odx-v-border-radius-controls);
   color: var(--odx-c-link);
   padding: 0 2px;
   position: relative;
+  user-select: auto;
 
   &::before {
-    @include mx.transition(width);
+    @include motion.transition(width);
 
     background-color: currentcolor;
     bottom: 1px;

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

@@ -1,4 +1,4 @@
-@use '../../modules/vertical-rythm' as vr;
+@use '../abstract/dimensions';
 
 :root {
   --odx-logo-color: var(--odx-c-primary);
@@ -6,22 +6,23 @@
 }
 
 .odx-logo {
-  @include vr.height(1);
+  @include dimensions.height(1);
 
   aspect-ratio: 2.5 / 1;
   background-color: var(--odx-logo-color);
   display: inline-block;
   mask-image: url('../assets/images/logo.svg');
+  mask-repeat: no-repeat;
 
   &--inverse {
     background-color: var(--odx-logo-color-inverse);
   }
 
   &--medium {
-    @include vr.height(2, 1.5);
+    @include dimensions.height(2, 1.5);
   }
 
   &--large {
-    @include vr.height(3, 2.5);
+    @include dimensions.height(3, 2.5);
   }
 }

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

@@ -0,0 +1,7 @@
+@use 'button.component';
+
+.odx-main-menu-button {
+  @extend .odx-button--ghost;
+
+  color: inherit;
+}

package/scss/components/{main-menu/components/main-menu-item.component.scss → main-menu-item.component.scss}

@@ -1,7 +1,8 @@
 @use 'sass:math';
-@use '../../../modules/vertical-rythm' as vr;
-@use '../../../modules/typography' as t;
-@use '../../../base/mixins' as mx;
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+@use '../abstract/typography';
 
 :root {
   --odx-main-menu-item-background-color: transparent;
@@ -12,17 +13,17 @@
 }
 
 .odx-main-menu-item {
-  @include mx.interactive();
-  @include mx.transition(color background-color outline);
-  @include mx.vertical-center-content();
-  @include t.prevent-text-overflow();
-  @include vr.height(3, math.div(7, 3));
-  @include vr.padding-x(math.div(2, 3));
+  @include dimensions.height(3, math.div(7, 3));
+  @include dimensions.padding-x(math.div(2, 3));
+  @include motion.transition(color background-color outline);
+  @include utils.interactive();
+  @include utils.vertical-center-content();
+  @include typography.font-weight(medium);
+  @include typography.prevent-text-overflow();
 
   background-color: transparent;
   border-radius: var(--odx-v-border-radius);
   color: var(--odx-main-menu-item-text-color);
-  font-weight: var(--odx-t-font-weight-medium);
 
   &:hover {
     background-color: var(--odx-main-menu-item-background-color-hover);
@@ -39,7 +40,7 @@
   }
 
   > .odx-icon {
-    @include vr.margin(math.div(1, 3), right);
-    @include vr.margin(math.div(-1, 3), left);
+    @include dimensions.margin(math.div(1, 3), right);
+    @include dimensions.margin(math.div(-1, 3), left);
   }
 }