@odx/ui 1.0.0-rc.1

package/scss/components/avatar/avatar.component.scss

@@ -0,0 +1,59 @@
+@use 'sass:math';
+@use '../../modules/breakpoints' as br;
+@use '../../modules/vertical-rythm' as vr;
+@use '../../modules/typography' as t;
+@use '../../base/mixins' as mx;
+
+@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);
+
+  > .odx-icon,
+  > .odx-icon[class*='odx-icon--'] {
+    @include vr.container($icon-factor);
+
+    font-size: vr.get-size($icon-factor);
+  }
+}
+
+.odx-avatar {
+  @include mx.center-content(true);
+  @include t.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;
+  vertical-align: middle;
+
+  &--small {
+    @include avatar-size(2, 1.5, 0, 1);
+  }
+
+  &--medium {
+    @include avatar-size(2, 1.5, 0, 1);
+
+    @include br.up(tablet) {
+      @include avatar-size(3, math.div(64, 24), 2, 1.5);
+    }
+  }
+
+  &--large {
+    @include avatar-size(3, math.div(64, 24), 2, 1.5);
+
+    @include br.up(tablet) {
+      @include avatar-size(4, 4, 4, 2.25);
+    }
+  }
+
+  img {
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+  }
+}

package/scss/components/badge/badge.component.scss

@@ -0,0 +1,59 @@
+@use 'sass:math';
+@use '../../base/mixins' as mx;
+@use '../../modules/typography' as t;
+@use '../../modules/vertical-rythm' as vr;
+
+:root {
+  --odx-badge-contrast-color: var(--odx-c-background-content);
+}
+
+.odx-badge {
+  $badge-size: vr.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));
+
+  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;
+  z-index: 9999;
+
+  &::before {
+    content: attr(data-value);
+  }
+
+  &[data-value='0'] {
+    display: none;
+  }
+
+  &[data-value^='-']::before {
+    content: '';
+  }
+
+  &,
+  &--highlight {
+    background-color: var(--odx-c-highlight);
+    color: var(--odx-c-highlight-text);
+  }
+
+  &--danger {
+    background-color: var(--odx-c-danger);
+    color: var(--odx-c-danger-text);
+  }
+
+  &--confirmation {
+    background-color: var(--odx-c-confirmation);
+    color: var(--odx-c-confirmation-text);
+  }
+
+  &--contrast {
+    outline-color: var(--odx-badge-contrast-color);
+  }
+}

package/scss/components/button/button.component.scss

@@ -0,0 +1,94 @@
+@use 'sass:math';
+@use '../../modules/vertical-rythm' as vr;
+@use '../../modules/typography' as t;
+@use '../../base/mixins' as mx;
+@use '../avatar/avatar.component' as ac;
+
+.odx-button {
+  $variants: secondary, primary, highlight, success, danger, confirmation;
+
+  @extend .odx-button--secondary;
+  @include t.prevent-text-overflow();
+  @include mx.transition(background-color color outline);
+  @include mx.center-content(true);
+  @include mx.interactive($with-background: false);
+  @include vr.height(2, 1.5);
+  @include vr.padding-x(0.5);
+
+  border-radius: var(--odx-v-border-radius-controls);
+  font-weight: var(--odx-t-font-weight-medium);
+  min-width: vr.get-size(1.5);
+  outline-width: 2px;
+
+  &:not(:has(> .odx-icon, > .odx-avatar)) {
+    min-width: vr.get-size(3);
+  }
+
+  > .odx-icon {
+    @include vr.margin-x(-0.25);
+  }
+
+  > .odx-icon[alignLeft] {
+    @include vr.margin(0.25, right);
+  }
+
+  > .odx-icon[alignRight] {
+    @include vr.margin(0.25, left);
+  }
+
+  > .odx-avatar {
+    @include vr.margin-x(-0.5);
+    @include ac.avatar-size(2, math.div(32, 24), 0, 1);
+  }
+
+  &--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);
+    }
+  }
+}

package/scss/components/checkbox/checkbox.component.scss

@@ -0,0 +1,130 @@
+@use 'sass:math';
+@use '../../modules/vertical-rythm' as vr;
+@use '../../modules/typography' as t;
+@use '../../base/mixins' as mx;
+@use '../../helpers';
+
+:root {
+  --odx-checkbox-color: var(--odx-c-highlight-text);
+  --odx-checkbox-color-disabled: var(--odx-c-control-text-disabled);
+
+  --odx-checkbox-background-color: var(--odx-c-control);
+  --odx-checkbox-background-color-active: var(--odx-c-highlight);
+  --odx-checkbox-background-color-disabled: var(--odx-c-control-disabled);
+  --odx-checkbox-background-color-readonly: var(--white);
+
+  --odx-checkbox-border-color: var(--odx-c-control-disabled);
+  --odx-checkbox-border-color-active: var(--odx-c-highlight);
+  --odx-checkbox-border-color-hover: var(--odx-c-control-hover);
+  --odx-checkbox-border-color-readonly: var(--odx-c-control-disabled);
+
+  --odx-checkbox-label-color: var(--odx-c-text);
+  --odx-checkbox-label-color-disabled: var(--odx-c-text-disabled);
+}
+
+.odx-checkbox {
+  $root: &;
+
+  color: var(--odx-checkbox-label-color);
+  display: block;
+
+  &.is-disabled,
+  &.is-readonly {
+    @include mx.non-interactive();
+  }
+
+  &.is-disabled {
+    color: var(--odx-checkbox-label-color-disabled);
+  }
+
+  &__label {
+    @include mx.interactive($focus-within: true);
+    @include vr.line-height(1);
+    @include mx.transition(background-color color outline);
+    @include t.font-size(0);
+
+    border-radius: var(--odx-v-border-radius-controls);
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    min-height: vr.get-size(1);
+    padding: 0 2px;
+    vertical-align: top;
+  }
+
+  &__input {
+    @extend .visually-hidden;
+  }
+
+  &__indicator {
+    @include vr.container(1, math.div(20, 24));
+    @include mx.transition(background-color border-color);
+
+    background-color: var(--odx-checkbox-background-color);
+    border: 1px solid var(--odx-checkbox-border-color);
+    border-radius: var(--odx-v-border-radius-controls);
+    box-sizing: border-box;
+    color: var(--odx-checkbox-color);
+    flex: 0 0 auto;
+
+    > .odx-icon {
+      $checkmark-size: math.div(18, 24);
+      @include vr.container($checkmark-size);
+
+      display: none;
+      font-size: vr.get-size($checkmark-size);
+    }
+
+    #{$root}:hover & {
+      border-color: var(--odx-checkbox-border-color-hover);
+    }
+
+    #{$root}.is-active &,
+    #{$root}__input:indeterminate ~ &,
+    #{$root}__input:checked ~ & {
+      background-color: var(--odx-checkbox-background-color-active);
+      border-color: var(--odx-checkbox-border-color-active);
+    }
+
+    #{$root}.has-error & {
+      background-color: var(--odx-c-error);
+      border-color: var(--odx-c-error-outline);
+      color: var(--odx-c-error-text);
+    }
+
+    #{$root}.has-error:hover & {
+      border-color: var(--odx-c-error-outline-hover);
+    }
+
+    #{$root}.is-disabled & {
+      background-color: var(--odx-checkbox-background-color-disabled);
+      border-color: transparent;
+      color: var(--odx-checkbox-color-disabled);
+    }
+
+    #{$root}.is-readonly & {
+      background-color: var(--odx-checkbox-background-color-readonly);
+      border-color: var(--odx-checkbox-border-color-readonly);
+      color: inherit;
+    }
+  }
+
+  &__content {
+    @include vr.margin(0.5, left);
+
+    padding-left: 2px;
+
+    &:empty {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &.is-active,
+  &__input:indeterminate,
+  &__input:checked {
+    ~ .odx-checkbox__indicator > .odx-icon {
+      display: block;
+    }
+  }
+}

package/scss/components/content-box/content-box.component.scss

@@ -0,0 +1,50 @@
+@use '../../modules/breakpoints' as br;
+@use '../../modules/vertical-rythm' as vr;
+
+.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 vr.padding(1, ('top', 'right', 'left'));
+    @include br.down(phone) {
+      @include vr.padding(0.5, ('top', 'right', 'left'));
+    }
+  }
+
+  &__footer {
+    @include vr.padding(1, ('right', 'bottom', 'left'));
+    @include br.down(phone) {
+      @include vr.padding(0.5, ('right', 'bottom', 'left'));
+    }
+  }
+
+  &__content {
+    @include vr.padding(1);
+    @include br.down(phone) {
+      @include vr.padding(0.5);
+    }
+  }
+
+  .odx-area-header ~ &__content {
+    padding-top: 0;
+  }
+
+  .odx-area-header {
+    @include vr.padding(1, ('top', 'bottom'));
+    @include br.down(phone) {
+      @include vr.padding(0.5, ('top', 'bottom'));
+    }
+  }
+}

package/scss/components/header/header.component.scss

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

package/scss/components/icon/icon.component.scss

@@ -0,0 +1,38 @@
+@use 'sass:math';
+@use '../../modules/vertical-rythm' as vr;
+
+$icon-sizes: (small math.div(2, 3) 1, large math.div(4, 3) 2);
+
+.odx-icon {
+  @include vr.container(1);
+
+  direction: ltr;
+  display: inline-block;
+  font-feature-settings: 'liga';
+  font-size: vr.get-size(1);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  overflow: hidden;
+  position: relative;
+  text-rendering: auto;
+  text-transform: none;
+  white-space: nowrap;
+
+  @each $size, $size_factor, $factor in $icon-sizes {
+    &.odx-icon--#{$size} {
+      @include vr.container($factor, $size_factor);
+
+      font-size: vr.get-size($size_factor);
+    }
+  }
+
+  &.odx-icon--inline {
+    font-size: inherit;
+    height: auto;
+    width: auto;
+  }
+}

package/scss/components/link/link.component.scss

@@ -0,0 +1,50 @@
+@use '../../base/mixins' as mx;
+
+.odx-link {
+  @include mx.interactive();
+  @include mx.transition(color background-color outline);
+
+  border-radius: var(--odx-v-border-radius-controls);
+  color: var(--odx-c-link);
+  padding: 0 2px;
+  position: relative;
+
+  &::before {
+    @include mx.transition(width);
+
+    background-color: currentcolor;
+    bottom: 1px;
+    content: '';
+    height: 1px;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 0;
+  }
+
+  &:visited {
+    color: var(--odx-c-link-visited);
+  }
+
+  &:hover {
+    color: var(--odx-c-link-hover);
+
+    &::before {
+      width: 98%;
+    }
+  }
+
+  &:active {
+    color: var(--odx-c-link-active);
+  }
+
+  &.is-disabled {
+    color: var(--odx-c-link-disabled);
+    pointer-events: none;
+    text-decoration: none;
+
+    &::before {
+      content: none;
+    }
+  }
+}

package/scss/components/logo/logo.component.scss

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

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

@@ -0,0 +1,7 @@
+@use '../../button/button.component';
+
+.odx-main-menu-button {
+  @extend .odx-button--ghost;
+
+  color: var(--odx-c-control-text);
+}

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

@@ -0,0 +1,45 @@
+@use 'sass:math';
+@use '../../../modules/vertical-rythm' as vr;
+@use '../../../modules/typography' as t;
+@use '../../../base/mixins' as mx;
+
+:root {
+  --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);
+}
+
+.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));
+
+  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);
+  }
+
+  &:active {
+    background-color: var(--odx-main-menu-item-background-color-active);
+  }
+
+  &.is-disabled,
+  &:disabled {
+    background-color: transparent;
+    color: var(--odx-main-menu-item-text-color-disabled);
+  }
+
+  > .odx-icon {
+    @include vr.margin(math.div(1, 3), right);
+    @include vr.margin(math.div(-1, 3), left);
+  }
+}