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

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

@@ -1,11 +1,11 @@
 @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 '../button/button.component';
-@use 'components/main-menu-button.component';
-@use 'components/main-menu-item.component';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use 'button.component';
+@use 'main-menu-button.component';
+@use 'main-menu-item.component';
 
 :root {
   --odx-main-menu-max-width: 100vw;
@@ -13,7 +13,7 @@
   --odx-main-menu-text-color: var(--odx-c-primary-text);
   --odx-main-menu-highlight-color: var(--odx-c-highlight);
 
-  @include br.up(phone) {
+  @include breakpoints.up(phone) {
     --odx-main-menu-max-width: min(100vw, 384px);
   }
 }
@@ -37,7 +37,8 @@
   }
 
   &__overlay {
-    background-color: var(--odx-c-overlay);
+    backdrop-filter: blur(var(--odx-v-backdrop-blur));
+    background-color: var(--odx-c-backdrop);
     height: 100%;
     left: 0;
     position: absolute;
@@ -47,8 +48,8 @@
   }
 
   &__actions {
-    @include vr.height(2);
-    @include vr.margin-x(0.5);
+    @include dimensions.height(2);
+    @include dimensions.margin-x(0.5);
   }
 
   &__header,
@@ -64,12 +65,15 @@
   }
 
   &__content {
-    @include vr.padding-x(0.5);
+    --odx-v-scrollbar-thumb-color: var(--blue-400);
+    --odx-v-scrollbar-thumb-color-hover: var(--blue-500);
+
+    @include dimensions.padding-x(0.5);
 
     display: flex;
     flex-direction: column;
-    max-width: calc(var(--odx-main-menu-max-width) + vr.get-size(2));
-    min-height: vr.get-size(5);
+    max-width: calc(var(--odx-main-menu-max-width) + dimensions.get-size(2));
+    min-height: dimensions.get-size(5);
     overflow: auto;
 
     > * {
@@ -79,39 +83,42 @@
 
   &__info {
     @extend .odx-text;
-    @include vr.padding-x(1);
-    @include vr.padding-y(0.5);
+    @include dimensions.padding-x(1);
+    @include dimensions.padding-y(0.5);
 
-    column-gap: vr.get-size(1);
+    column-gap: dimensions.get-size(1);
     display: flex;
     flex-wrap: wrap;
 
-    @include br.up(tablet) {
-      @include vr.padding-y(1);
+    @include breakpoints.up(tablet) {
+      @include dimensions.padding-y(1);
     }
   }
 
   &__footer {
-    @include mx.center-content();
-    @include vr.height(1);
-    @include vr.padding-x(1);
-    @include vr.padding(math.div(16, 24), top);
-    @include vr.padding(math.div(32, 24), bottom);
+    @include dimensions.height(1);
+    @include dimensions.padding-x(1);
+    @include dimensions.padding(math.div(16, 24), top);
+    @include dimensions.padding(math.div(32, 24), bottom);
+    @include utils.center-content();
 
     display: grid;
-    gap: vr.get-size(0.5);
+    gap: dimensions.get-size(0.5);
     grid-template-columns: 1fr auto;
     user-select: none;
 
     > .odx-text {
-      @include vr.line-height(math.div(12, 24));
+      @include dimensions.line-height(math.div(12, 24));
 
       opacity: 0.3;
       word-wrap: break-word;
     }
   }
 
-  .odx-link:visited {
-    color: var(--odx-c-link);
+  .odx-link {
+    &:visited,
+    &:hover {
+      color: var(--odx-c-link);
+    }
   }
 }

package/scss/components/modal.component.scss

@@ -0,0 +1,85 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/breakpoints';
+
+.odx-modal {
+  --odx-modal-margin-y: #{dimensions.get-size(2)};
+  --odx-modal-margin-x: #{dimensions.get-size(math.div(8, 24))};
+  --odx-modal-max-width: #{dimensions.get-size(20)};
+
+  $root: &;
+  $modal-padding: math.div(12, 24);
+
+  backdrop-filter: blur(var(--odx-v-backdrop-blur));
+  background-color: var(--odx-c-backdrop-dark);
+  display: block;
+  height: 100%;
+  left: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+
+  @include breakpoints.up(phone) {
+    --odx-modal-margin-y: #{dimensions.get-size(3)};
+    --odx-modal-margin-x: #{dimensions.get-size(1)};
+  }
+
+  &__container {
+    @include dimensions.padding-x(math.div(16, 24));
+
+    background-color: var(--odx-c-background-content);
+    border-radius: var(--odx-v-border-radius);
+    box-shadow: var(--odx-v-backdrop-box-shadow-layer-2);
+    display: flex;
+    flex-direction: column;
+    margin: var(--odx-modal-margin-y) auto 0;
+    max-height: calc(100vh - 2 * var(--odx-modal-margin-y));
+    min-height: dimensions.get-size(7);
+    width: min(var(--odx-modal-max-width), calc(100vw - 2 * var(--odx-modal-margin-x)));
+
+    #{$root}--medium & {
+      --odx-modal-max-width: #{dimensions.get-size(30)};
+    }
+
+    #{$root}--large & {
+      --odx-modal-max-width: #{dimensions.get-size(50)};
+    }
+  }
+
+  &__header,
+  &__footer {
+    display: flex;
+    flex: 0 0 auto;
+  }
+
+  &__header {
+    @include dimensions.min-height(1);
+    @include dimensions.padding(math.div(12, 24), top);
+
+    > .odx-area-header {
+      @include dimensions.margin(-1, left);
+      @include dimensions.margin(-0.5, right);
+
+      flex: 1 1 auto;
+      max-width: 100%;
+    }
+  }
+
+  &__content {
+    @include dimensions.padding-y($modal-padding);
+
+    display: block;
+    overflow: auto;
+  }
+
+  &__footer {
+    --odx-grid-gutter: #{dimensions.get-size(math.div(16, 24))};
+    @include dimensions.height(2.5);
+    @include dimensions.padding($modal-padding, bottom);
+
+    justify-content: flex-end;
+  }
+}

package/scss/components/radio-button.component.scss

@@ -0,0 +1,120 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use '../abstract/motion';
+
+.odx-radio-button {
+  $root: &;
+
+  color: var(--odx-control-color);
+  display: 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);
+    @include typography.font-size(0);
+    @include utils.interactive($focus-within: true);
+
+    border-radius: dimensions.get-size(1);
+    color: inherit;
+    display: inline-flex;
+    min-height: dimensions.get-size(1);
+    padding: 0 2px;
+    user-select: auto;
+    vertical-align: top;
+
+    #{$root}--with-label & {
+      border-bottom-right-radius: calc(2 * var(--odx-v-border-radius-controls));
+      border-top-right-radius: calc(2 * var(--odx-v-border-radius-controls));
+    }
+
+    #{$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();
+    @include utils.with-outline();
+
+    background-color: var(--odx-control-background-color);
+    border-radius: 50%;
+    color: var(--odx-control-color-selected);
+    flex: 0 0 auto;
+    outline-color: var(--odx-control-outline-color);
+    padding: 1px;
+
+    &::before {
+      @include dimensions.container(math.div(4, 24));
+      @include motion.transition(transform);
+
+      background-color: currentcolor;
+      border-radius: 50%;
+      content: '';
+      transform: scale(0);
+    }
+
+    #{$root}:hover & {
+      background-color: var(--odx-control-background-color-hover);
+      outline-color: var(--odx-control-outline-color-hover);
+    }
+
+    #{$root}.is-active &,
+    #{$root}__input:checked ~ & {
+      background-color: var(--odx-control-background-color-selected);
+      outline-color: var(--odx-control-outline-color-selected);
+
+      &::before {
+        transform: scale(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/radio-group.component.scss

@@ -0,0 +1,14 @@
+@use '../abstract/dimensions';
+
+.odx-radio-group {
+  @include dimensions.padding-y(0.5);
+
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  &--horizontal {
+    column-gap: dimensions.get-size(0.5);
+    flex-flow: row wrap;
+  }
+}

package/scss/components/switch.component.scss

@@ -0,0 +1,163 @@
+@use 'sass:math';
+@use '../layout/helpers';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use '../abstract/motion';
+
+@mixin indicator-color($background, $stroke: null) {
+  background-color: $background;
+  @if ($stroke) {
+    border-color: $stroke;
+  } @else {
+    border-color: $background;
+  }
+}
+
+.odx-switch {
+  $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);
+
+    align-items: center;
+    border-radius: dimensions.get-size(0.5);
+    color: inherit;
+    display: inline-flex;
+    min-height: dimensions.get-size(1);
+    padding: 0 2px;
+    user-select: auto;
+    user-select: none;
+    vertical-align: top;
+
+    #{$root}.is-disabled & {
+      cursor: default;
+    }
+
+    &:has(#{$root}__content:not(:empty)) {
+      border-bottom-right-radius: var(--odx-v-border-radius-controls);
+      border-top-right-radius: var(--odx-v-border-radius-controls);
+    }
+  }
+
+  &__input {
+    @include utils.visually-hidden();
+
+    &:focus-visible {
+      ~ #{$root}__indicator:before {
+        box-shadow: 0 0 0 1px var(--odx-c-background-content);
+        outline-color: var(--odx-c-focus);
+      }
+    }
+  }
+
+  &__indicator {
+    $indicator-width: dimensions.get-size(1.5);
+    $indicator-height: dimensions.get-size(math.div(1, 6));
+    $track-size: dimensions.get-size(math.div(20, 24));
+    $border: 1px solid var(--odx-control-outline-color);
+
+    @include motion.transition(background-color color outline-color);
+
+    background-color: var(--odx-control-background-color);
+    border: $border;
+    border-radius: calc(#{$indicator-height} / 2);
+    color: var(--odx-control-color-selected);
+    height: $indicator-height;
+    position: relative;
+    width: $indicator-width;
+
+    &::before {
+      @include motion.transition(background-color transform border-color outline-color);
+
+      background-color: var(--odx-control-background-color);
+      border: $border;
+      border-radius: 50%;
+      box-sizing: border-box;
+      content: '';
+      display: block;
+      height: $track-size;
+      outline: var(--odx-v-outline);
+      outline-color: var(--odx-c-background-content);
+      position: absolute;
+      top: calc(#{$track-size} / -2 + 50%);
+      transform: translateX(-1px);
+      width: $track-size;
+    }
+
+    #{$root}:hover &::before {
+      background-color: var(--odx-control-background-color-hover);
+    }
+
+    #{$root}.is-active:hover &::before {
+      @include indicator-color(var(--odx-c-highlight-hover));
+    }
+
+    #{$root}.is-active &,
+    #{$root}__input:indeterminate ~ &,
+    #{$root}__input:checked ~ & {
+      @include indicator-color(var(--odx-control-background-color-selected));
+
+      &::before {
+        @include indicator-color(var(--odx-control-background-color-selected));
+
+        transform: translateX(calc((#{$indicator-width} - #{$track-size}) - 1px));
+      }
+    }
+
+    #{$root}.has-error & {
+      @include indicator-color(var(--odx-control-background-color-error));
+
+      &::before {
+        @include indicator-color(var(--odx-control-background-color-error));
+      }
+    }
+
+    #{$root}.has-error:hover & {
+      outline-color: var(--odx-control-outline-color-error-hover);
+    }
+
+    #{$root}.is-disabled & {
+      @include indicator-color(var(--odx-c-secondary-disabled));
+
+      &::before {
+        @include indicator-color(var(--odx-c-secondary-disabled));
+
+        outline-color: transparent;
+      }
+    }
+
+    #{$root}.is-disabled:not(.is-active) & {
+      @include indicator-color(var(--odx-control-background-color-disabled));
+
+      &::before {
+        @include indicator-color(var(--odx-control-background-color-disabled));
+      }
+    }
+  }
+
+  &__content {
+    @include dimensions.margin(0.5, left);
+
+    padding-left: 2px;
+
+    &:empty {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+.odx-toggle-button-group {
+  @include dimensions.height(2, 1.5);
+  @include dimensions.padding-x(math.div(6, 24));
+  @include motion.transition(background-color);
+  @include utils.center-content(true);
+  @include utils.with-outline();
+
+  border-radius: var(--odx-v-border-radius-controls);
+  column-gap: dimensions.get-size(math.div(6, 24));
+
+  &.has-error:not(.is-disabled, .is-readonly) {
+    background-color: var(--odx-c-error);
+    outline-color: var(--odx-c-error-outline);
+  }
+
+  &:not(.is-disabled, .is-readonly):hover,
+  &:focus-within:has(:focus-visible) {
+    background-color: var(--blue-700-5);
+  }
+}

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

@@ -0,0 +1,55 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-toggle-button {
+  @include dimensions.height(1);
+  @include motion.transition(background-color color outline);
+  @include typography.font-size(0);
+  @include utils.interactive($focus-within: true);
+
+  border-radius: 1px;
+  color: var(--odx-control-color);
+  display: block;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+
+  &.is-active,
+  &.is-active:focus-within {
+    --odx-c-focus-outline: var(--cyan-700);
+
+    background-color: var(--odx-control-background-color-selected);
+    color: var(--odx-control-color-selected);
+  }
+
+  &.is-disabled {
+    background-color: transparent;
+    color: var(--odx-input-control-color-disabled);
+  }
+
+  &.is-readonly {
+    background-color: var(--odx-control-background-color-readonly);
+    color: var(--odx-control-color-readonly);
+    cursor: default;
+  }
+
+  &.is-active.is-disabled {
+    background-color: var(--odx-control-background-color-disabled);
+    color: var(--odx-control-color-disabled);
+  }
+
+  &.is-active.is-readonly {
+    background-color: var(--odx-control-background-color-readonly);
+    color: var(--odx-control-color-readonly);
+    outline-color: var(--odx-control-outline-color-readonly);
+  }
+
+  &__label {
+    @include dimensions.padding-x(math.div(1, 3));
+
+    cursor: inherit;
+  }
+}

package/scss/core.scss

@@ -1,17 +1,4 @@
-@use 'base/reset';
-@use 'helpers';
-
-/*
-  Variables
-*/
-@use 'variables/color-palettes';
-@use 'variables/colors';
-@use 'variables/visuals';
-
-/*
-  Modules
-*/
-@use 'modules/breakpoints' with (
+@use 'abstract/breakpoints' with (
   $breakpoints: (
     'phone-s': 360px,
     'phone': 420px,
@@ -20,24 +7,41 @@
     'desktop': 1200px,
   )
 );
-@use 'modules/layout' as layout;
-@use 'modules/typography' as t;
-@use 'modules/vertical-rythm' as vr;
+@use 'variables';
+@use 'reset';
+
+/*
+Layout
+*/
+
+@use 'layout/base';
+@use 'layout/layout';
+@use 'layout/helpers';
+@use 'layout/typography';
 
 /*
   Components
 */
 
-@use 'components/action-group/action-group.component';
-@use 'components/area-header/area-header.component';
-@use 'components/avatar/avatar.component';
-@use 'components/badge/badge.component';
-@use 'components/button/button.component';
-@use 'components/checkbox/checkbox.component';
-@use 'components/content-box/content-box.component';
-@use 'components/icon/icon.component';
-@use 'components/link/link.component';
-@use 'components/logo/logo.component';
-@use 'components/main-menu/main-menu.component';
-@use 'components/header/header.component';
-@use 'components/radio-group/radio-group.component';
+@use 'components/accordion.component';
+@use 'components/accordion-item.component';
+@use 'components/action-group.component';
+@use 'components/area-header.component';
+@use 'components/avatar.component';
+@use 'components/badge.component';
+@use 'components/button-group.component';
+@use 'components/button.component';
+@use 'components/checkbox.component';
+@use 'components/content-box.component';
+@use 'components/form-field.component';
+@use 'components/header.component';
+@use 'components/icon.component';
+@use 'components/link.component';
+@use 'components/logo.component';
+@use 'components/main-menu.component';
+@use 'components/modal.component';
+@use 'components/radio-button.component';
+@use 'components/radio-group.component';
+@use 'components/switch.component.scss';
+@use 'components/toggle-button.component';
+@use 'components/toggle-button-group.component';

package/scss/layout/_base.scss

@@ -0,0 +1,29 @@
+@use '../abstract/utils';
+
+* {
+  scrollbar-color: var(--odx-v-scrollbar-thumb-color) var(--odx-v-scrollbar-track-color);
+}
+
+::-webkit-scrollbar {
+  appearance: none;
+  width: 12px;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--odx-v-scrollbar-track-color);
+}
+
+::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  background-color: var(--odx-v-scrollbar-thumb-color);
+  border-radius: var(--odx-v-border-radius);
+
+  &:hover {
+    background-color: var(--odx-v-scrollbar-thumb-color-hover);
+  }
+}