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

package/scss/variables/_typography.scss

@@ -0,0 +1,18 @@
+@use '../abstract/breakpoints';
+
+:root {
+  --odx-typography-base-size: 16px;
+  --odx-typography-base-line-height: 1.5;
+  --odx-typography-font-weight-normal: normal;
+  --odx-typography-font-weight-normal-letter-spacing: 0;
+  --odx-typography-font-weight-medium: 500;
+  --odx-typography-font-weight-medium-letter-spacing: -0.19px;
+  --odx-typography-font-weight-bold: bold;
+  --odx-typography-font-weight-bold-letter-spacing: 0;
+  --odx-typography-positive-font-scaling-factor: 1.125;
+  --odx-typography-negative-font-scaling-factor: 1.2;
+
+  @include breakpoints.up(tablet) {
+    --odx-typography-positive-font-scaling-factor: 1.25;
+  }
+}

package/scss/variables/_vertical-rythm.scss

@@ -0,0 +1,3 @@
+:root {
+  --odx-vertical-rythm-base-size: calc(var(--odx-typography-base-line-height) * var(--odx-typography-base-size));
+}

package/scss/variables/_visuals.scss

@@ -1,11 +1,16 @@
 :root {
-  --odx-v-border-radius: calc(var(--odx-t-base-size) * 0.375);
-  --odx-v-border-radius-controls: calc(var(--odx-t-base-size) * 0.19);
-  // --odx-v-shadow-layer-1: 0 2px 6px 0 rgba(var(--blue-500), 0.4);
-  // --odx-v-shadow-layer-2: 0 4px 12px 0 rgba(var(--blue-500), 0.3);
-  // --odx-v-shadow-layer-3: 0 6px 18px 0 rgba(var(--blue-500), 0.2);
-  // --odx-v-shadow-layer-4: 0 8px 24px 0 rgba(var(--blue-500), 0.1);
+  --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
+  --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
+
+  --odx-v-backdrop-blur: 5px;
+  --odx-v-backdrop-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-backdrop-box-shadow);
+
   --odx-v-transition-duration: 200ms;
   --odx-v-transition-easing-fn: ease;
-  --odx-v-focus-outline: 1px solid var(--odx-c-focus-outline);
+  --odx-v-outline: 1px solid transparent;
+  --odx-v-outline-offset: -1px;
+
+  --odx-v-scrollbar-track-color: transparent;
+  --odx-v-scrollbar-thumb-color: var(--gray-600);
+  --odx-v-scrollbar-thumb-color-hover: var(--gray-700);
 }

package/scss/_helpers.scss

@@ -1,15 +0,0 @@
-@use 'sass:math';
-@use 'base/mixins' as mx;
-@use 'modules/vertical-rythm' as vr;
-
-.visually-hidden {
-  @include mx.visually-hidden();
-}
-
-.seperator,
-hr {
-  @include vr.height(1, math.div(1, 24));
-
-  background-color: var(--odx-c-seperator);
-  border: 0;
-}

package/scss/base/_mixins.scss

@@ -1,3 +0,0 @@
-@forward 'mixins/container';
-@forward 'mixins/control';
-@forward 'mixins/transition';

package/scss/base/_utils.scss

@@ -1,19 +0,0 @@
-@use 'sass:math';
-
-@function css-pow($value, $exponent) {
-  $css-value: 1;
-
-  @if $exponent < 0 {
-    @for $i from 1 through math.abs($exponent) {
-      $css-value: $css-value + '*1/#{$value}';
-    }
-  }
-
-  @if $exponent > 0 {
-    @for $i from 1 through $exponent {
-      $css-value: $css-value + '*#{$value}';
-    }
-  }
-
-  @return calc(#{$css-value});
-}

package/scss/base/mixins/_container.scss

@@ -1,31 +0,0 @@
-/* stylelint-disable block-closing-brace-newline-after */
-@mixin center-content($inline: false) {
-  @if $inline {
-    display: inline-flex;
-  } @else {
-    display: flex;
-  }
-
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin vertical-center-content($inline: false) {
-  @if $inline {
-    display: inline-flex;
-  } @else {
-    display: flex;
-  }
-
-  align-items: center;
-}
-
-@mixin horizontal-center-content($inline: false) {
-  @if $inline {
-    display: inline-flex;
-  } @else {
-    display: flex;
-  }
-
-  justify-content: center;
-}

package/scss/base/mixins/_control.scss

@@ -1,50 +0,0 @@
-@mixin focus-state($with-background: true) {
-  outline-color: var(--odx-c-focus-outline);
-
-  @if $with-background {
-    background-color: var(--odx-c-focus);
-  }
-}
-
-@mixin interactive($with-background: true, $focus-within: false) {
-  cursor: pointer;
-  outline: var(--odx-v-focus-outline);
-  outline-color: transparent;
-  outline-offset: -1px;
-  user-select: none;
-
-  &:disabled,
-  &.is-disabled {
-    cursor: not-allowed;
-  }
-
-  @if $focus-within {
-    &.has-focus {
-      @include focus-state($with-background);
-    }
-
-    &:focus-within:has(:focus-visible) {
-      @include focus-state($with-background);
-    }
-  } @else {
-    &:focus-visible {
-      @include focus-state($with-background);
-    }
-  }
-}
-
-@mixin non-interactive() {
-  pointer-events: none;
-  user-select: none;
-}
-
-@mixin visually-hidden() {
-  appearance: none;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  outline: none !important;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}

package/scss/base/mixins/_transition.scss

@@ -1,10 +0,0 @@
-@mixin transition($properties, $delay: 0ms) {
-  $props: ();
-
-  @each $prop in $properties {
-    $props: append($props, $prop, comma);
-  }
-
-  transition: all var(--odx-v-transition-duration) $delay var(--odx-v-transition-easing-fn);
-  transition-property: $props;
-}

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

@@ -1,94 +0,0 @@
-@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

@@ -1,130 +0,0 @@
-@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

@@ -1,50 +0,0 @@
-@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

@@ -1,39 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-@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/main-menu/components/main-menu-button.component.scss

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

package/scss/components/radio-group/_radio-group.component.scss

@@ -1,145 +0,0 @@
-@use 'sass:math';
-@use '../../modules/vertical-rythm' as vr;
-@use '../../modules/typography' as t;
-@use '../../base/mixins' as mx;
-
-:root {
-  --odx-radio-button-color: var(--odx-c-highlight-text);
-  --odx-radio-button-color-disabled: var(--odx-c-control-text-disabled);
-
-  --odx-radio-button-background-color: var(--odx-c-control);
-  --odx-radio-button-background-color-active: var(--odx-c-highlight);
-  --odx-radio-button-background-color-disabled: var(--odx-c-control-disabled);
-  --odx-radio-button-background-color-readonly: var(--white);
-
-  --odx-radio-button-border-color: var(--odx-c-control-disabled);
-  --odx-radio-button-border-color-active: var(--odx-c-highlight);
-  --odx-radio-button-border-color-hover: var(--odx-c-control-hover);
-  --odx-radio-button-border-color-readonly: var(--odx-c-control-disabled);
-
-  --odx-radio-button-label-color: var(--odx-c-text);
-  --odx-radio-button-label-color-disabled: var(--odx-c-text-disabled);
-}
-
-.odx-radio-group {
-  @include vr.padding-y(0.5);
-
-  display: block;
-
-  &--horizontal {
-    column-gap: vr.get-size(0.5);
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
-
-.odx-radio-button {
-  $root: &;
-
-  color: var(--odx-radio-button-label-color);
-  display: block;
-
-  &.is-disabled,
-  &.is-readonly {
-    @include mx.non-interactive();
-  }
-
-  &.is-disabled {
-    color: var(--odx-radio-button-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);
-    border-radius: vr.get-size(0.5);
-    border-bottom-right-radius: var(--odx-v-border-radius-controls);
-    border-top-right-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 {
-    @include mx.visually-hidden();
-  }
-
-  &__indicator {
-    @include vr.container(1, math.div(20, 24));
-    @include mx.transition(background-color border-color);
-    @include mx.center-content();
-
-    background-color: var(--odx-radio-button-background-color);
-    border: 1px solid var(--odx-radio-button-border-color);
-    border-radius: 50%;
-    box-sizing: border-box;
-    color: var(--odx-radio-button-color);
-    flex: 0 0 auto;
-
-    &::before {
-      @include mx.transition(transform);
-      @include vr.container(math.div(4, 24));
-
-      background-color: currentcolor;
-      border-radius: 50%;
-      content: '';
-      transform: scale(0);
-    }
-
-    #{$root}:hover & {
-      border-color: var(--odx-radio-button-border-color-hover);
-    }
-
-    #{$root}__input:checked ~ & {
-      background-color: var(--odx-radio-button-background-color-active);
-      border-color: var(--odx-radio-button-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-radio-button-background-color-disabled);
-      border-color: transparent;
-      color: var(--odx-radio-button-color-disabled);
-    }
-
-    #{$root}.is-readonly & {
-      background-color: var(--odx-radio-button-background-color-readonly);
-      border-color: var(--odx-radio-button-border-color-readonly);
-      color: inherit;
-    }
-  }
-
-  &__content {
-    @include vr.margin(0.5, left);
-
-    padding-left: 2px;
-
-    &:empty {
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  &__input:checked ~ .odx-radio-button__indicator::before {
-    transform: scale(1);
-  }
-
-  &--no-label .odx-radio-button__label {
-    border-radius: vr.get-size(0.5);
-  }
-}