@odx/ui 5.4.0 → 6.0.0

package/scss/components/select.component.scss

@@ -1,6 +1,3 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/typography';
 @use '../abstract/utils';
 
@@ -17,7 +14,7 @@
 
     cursor: pointer;
     flex: 1 1 100%;
-    gap: dimensions.get-size(math.div(1, 3));
+    gap: var(--odx-spacing-50);
     height: 100%;
     max-width: var(--odx-select-max-width);
     position: relative;
@@ -33,24 +30,24 @@
 
   &__placeholder,
   &__value {
-    @include dimensions.padding-y(math.div(4, 24));
     @include typography.prevent-text-overflow();
 
     display: flex;
     flex: 1 1 auto;
-    gap: dimensions.get-size(math.div(4, 24));
+    gap: var(--odx-spacing-25);
     overflow: hidden;
+    padding-block: var(--odx-control-spacing-sm);
     user-select: none;
   }
 
   &__placeholder {
-    @include typography.font-weight(normal);
-
     color: var(--odx-input-control-color);
+    font-weight: var(--odx-typography-font-weight-normal);
+    letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
     opacity: 0.65;
 
     #{$root}.is-disabled & {
-      color: inherit;
+      color: var(--odx-input-control-color-disabled);
     }
   }
 
@@ -72,10 +69,10 @@
   }
 
   &__indicator {
-    @include motion.transition(transform opacity);
-    @include dimensions.margin(math.div(-2, 24), right);
-
+    margin-inline-end: var(--odx-spacing-negative-12);
     margin-left: auto;
+    transition: var(--odx-motion-transition-default);
+    transition-property: transform, opacity;
 
     #{$root}.is-readonly & {
       opacity: 0;

package/scss/components/slider.component.scss

@@ -1,6 +1,3 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 .odx-slider {
@@ -9,8 +6,8 @@
   --odx-control-background-color-hover: var(--cyan-600);
 
   $root: &;
-  $thumb-size: dimensions.get-size(math.div(20, 24));
-  $track-height: dimensions.get-size(math.div(4, 24));
+$thumb-size: var(--odx-size-125);
+$track-height: var(--odx-spacing-25);
 
   appearance: none;
   box-sizing: border-box;
@@ -24,28 +21,28 @@
     }
 
     background-color: var(--odx-control-background-color);
-    border-radius: 2px;
+    border-radius: var(--odx-border-radius-sm);
   }
 
   @mixin track-progress() {
-    border-radius: 2px;
+    border-radius: var(--odx-border-radius-sm);
     height: $track-height;
     position: relative;
   }
 
   @mixin thumb() {
-    @include motion.transition(background-color);
-
-    @include utils.with-outline() {
-      outline-color: var(--white);
-    }
-
     appearance: none;
     background-color: var(--odx-control-background-color-selected);
-    border-radius: 50%;
+    border-radius: var(--odx-border-radius-circle);
     height: $thumb-size;
     margin-top: calc(#{$thumb-size} / -2 + #{$track-height} / 2);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color;
     width: $thumb-size;
+
+    @include utils.with-outline() {
+      outline-color: var(--white);
+    }
   }
 
   @mixin thumb-focus() {

package/scss/components/spinbox.component.scss

@@ -1,16 +1,11 @@
-@use 'sass:math';
-@use '../layout/helpers';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
 @use '../abstract/utils';
-@use '../abstract/motion';
 
 .odx-form-field__control:has(.odx-spinbox) {
   background-color: transparent !important;
   outline-color: transparent !important;
 
   .odx-form-field-control {
-    @include dimensions.padding(math.div(2, 24));
+    padding: var(--odx-spacing-12);
   }
 
   &::after {
@@ -33,21 +28,18 @@
   align-items: stretch;
   display: flex;
   flex: 1;
-  gap: 1px;
+  gap: var(--odx-border-width-thin);
 
   &__input {
-    @include typography.font-weight(medium);
-    @include dimensions.padding-x(math.div(8, 24));
-
     appearance: textfield;
+    font-weight: var(--odx-typography-font-weight-medium);
+    letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+    padding-inline: var(--odx-control-spacing-inline-lg);
     text-align: center;
     width: 100%;
 
-    &::placeholder {
-      @include typography.font-weight(normal);
-
-      color: var(--odx-input-control-color);
-      opacity: 0.65;
+    #{$root}.is-disabled & {
+      color: var(--odx-input-control-color-disabled);
     }
 
     &::-webkit-inner-spin-button {
@@ -57,12 +49,13 @@
 
   &__input,
   &__action {
-    @include motion.transition(background-color border-color color);
-    @include utils.with-outline();
-
     background-color: var(--odx-input-control-background-color);
     border: 1px solid var(--odx-input-control-outline-color);
     position: relative;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, border-color, color;
+
+    @include utils.with-outline();
 
     #{$root}.has-error & {
       background-color: var(--odx-input-control-background-color-error);
@@ -70,12 +63,12 @@
     }
 
     #{$root} &:hover {
-      background-color: var(--odx-input-control-background-color-hover);
+      background-color: var(--odx-color-background-transparent-hover);
       border-color: var(--odx-input-control-outline-color-hover);
     }
 
     #{$root} &:active {
-      background-color: var(--odx-input-control-outline-color-hover);
+      background-color: var(--odx-color-background-transparent-pressed);
       border-color: var(--odx-input-control-outline-color-hover);
     }
 
@@ -85,7 +78,7 @@
     }
 
     #{$root} &:focus-visible {
-      border-radius: var(--odx-v-border-radius-controls);
+      border-radius: var(--odx-border-radius-control);
       border-width: 0;
       box-shadow: inset 0 0 0 calc(var(--odx-v-outline-width-bold) + var(--odx-v-outline-box-shadow-width)) var(--odx-c-focus-inner);
       outline-color: var(--odx-c-focus-outline);
@@ -96,16 +89,17 @@
       @include utils.non-interactive();
 
       background-color: var(--odx-input-control-background-color-disabled);
-      border-color: var(--odx-input-control-outline-color-disabled) !important;
-      color: var(--odx-input-control-color-disabled);
+      border-color: var(--odx-color-stroke-disabled-rest) !important;
     }
   }
 
   &__action {
-    border-radius: var(--odx-v-border-radius-controls);
-    flex: 0 0 dimensions.get-size(math.div(36, 24));
+    border-radius: var(--odx-border-radius-control);
+    display: grid;
+    flex: 0 0 var(--odx-size-225);
     height: 100%;
     margin: 0;
+    place-content: center;
 
     &::before {
       position: static;
@@ -128,5 +122,9 @@
 
       color: var(--odx-input-control-color-disabled);
     }
+
+    #{$root}.is-disabled & {
+      color: var(--odx-color-foreground-disabled-rest);
+    }
   }
 }

package/scss/components/switch.component.scss

@@ -1,28 +1,60 @@
-@use 'sass:math';
-@use '../layout/helpers';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
 @use '../abstract/utils';
-@use '../abstract/motion';
-
-@mixin track-color($background, $stroke: null) {
-  background-color: $background;
-
-  @if $stroke {
-    border-color: $stroke;
-  } @else {
-    border-color: $background;
-  }
-}
 
 .odx-switch {
   $root: &;
 
+  --switch-border-color: var(--odx-color-stroke-control-rest);
+  --switch-track-width: var(--odx-size-225);
+  --switch-track-height: var(--odx-size-50);
+  --switch-track-size: var(--odx-size-125);
+  --switch-border: var(--odx-border-width-thin) solid var(--switch-border-color);
+  --switch-thumb-position: calc((var(--switch-track-width) - var(--switch-track-size)) / 2 * -1);
+  --switch-mask-position: calc(var(--switch-thumb-position) - 1px);
+  --switch-icon-color: var(--odx-c-text);
+  --switch-thumb-bg-color: var(--odx-control-background-color);
+
   color: var(--odx-c-text);
   display: inline-block;
 
+  &:not(.is-disabled):hover {
+    --switch-thumb-bg-color: var(--odx-color-background-control-hover);
+    --switch-border-color: var(--odx-color-stroke-control-hover);
+  }
+
+  &.is-active,
+  &__input:indeterminate,
+  &__input:checked {
+    --switch-thumb-position: calc((var(--switch-track-width) - var(--switch-track-size)) / 2);
+    --switch-icon-color: var(--odx-color-foreground-inverse-static);
+    --switch-thumb-bg-color: var(--odx-control-background-color-selected);
+    --switch-border-color: var(--odx-control-background-color-selected);
+  }
+
+  &.is-active:not(.is-disabled):hover {
+    --switch-thumb-bg-color: var(--odx-color-background-control-selected-hover);
+    --switch-border-color: var(--odx-control-outline-color-hover);
+  }
+
   &.is-disabled {
     color: var(--odx-control-color-disabled);
+    --switch-thumb-bg-color: var(--odx-c-secondary-disabled);
+    --switch-border-color: var(--odx-c-secondary-disabled);
+  }
+
+  &.is-disabled.is-active,
+  &.is-disabled ~ #{$root}__input:checked,
+  &.is-disabled ~ #{$root}__input:indeterminate {
+    --switch-thumb-bg-color: var(--odx-color-background-disabled-selected);
+    --switch-border-color: var(--odx-color-background-disabled-selected);
+  }
+
+  &.has-error {
+    --switch-thumb-bg-color: var(--odx-input-control-background-color-error);
+  }
+
+  &.is-disabled:not(.is-active) {
+    --switch-thumb-bg-color: var(--odx-control-background-color-disabled);
+    --switch-border-color: var(--odx-control-background-color-disabled);
   }
 
   &.is-readonly {
@@ -30,16 +62,16 @@
   }
 
   &__label {
-    @include dimensions.line-height(1);
-    @include motion.transition(background-color color);
-    @include typography.font-size(0);
-
     align-items: center;
-    border-radius: dimensions.get-size(0.5);
     color: inherit;
+    cursor: pointer;
     display: inline-flex;
-    min-height: dimensions.get-size(1);
+    font-size: var(--odx-typography-font-size-text-md);
+    line-height: var(--odx-typography-line-height-text-md);
+    min-block-size: var(--odx-spacing-150);
     padding: 0 2px;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
     user-select: auto;
     user-select: none;
     vertical-align: top;
@@ -49,8 +81,8 @@
     }
 
     &: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);
+      border-bottom-right-radius: var(--odx-border-radius-control);
+      border-top-right-radius: var(--odx-border-radius-control);
     }
   }
 
@@ -58,122 +90,66 @@
     @include utils.visually-hidden();
 
     &:focus-visible {
-      ~ #{$root}__track #{$root}__thumb {
+      ~ #{$root}__thumb-container #{$root}__thumb {
         border-width: 0;
         box-shadow: inset 0 0 0 calc(var(--odx-v-outline-box-shadow-width)) var(--odx-c-focus-inner);
-        outline-color: var(--odx-c-focus-outline);
+        outline-color: var(--odx-color-stroke-focus-outer);
         outline-offset: 0;
         outline-width: var(--odx-v-outline-width-bold);
       }
     }
   }
 
-  &__track {
-    $track-width: dimensions.get-size(1.5);
-    $track-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);
-
-    background-color: var(--odx-control-background-color);
-    border: $border;
-    border-radius: calc(#{$track-height} / 2);
-    height: $track-height;
-    position: relative;
-    width: $track-width;
+  &__thumb-container {
+    display: grid;
+    grid-area: 1 / 1;
+    height: var(--switch-track-size);
+    margin: var(--odx-spacing-12);
+    place-items: center;
 
-    #{$root}__thumb {
-      @include motion.transition(background-color transform border-color);
-
-      @include utils.with-outline() {
-        outline-color: var(--odx-c-background-content);
-      }
-
-      align-items: center;
-      background-color: var(--odx-control-background-color);
-      border-radius: 50%;
-      box-sizing: border-box;
-      color: var(--odx-c-text);
-      display: flex;
-      font-size: dimensions.get-size(math.div(12, 24));
-      height: $track-size;
-      justify-content: center;
-      position: absolute;
-      top: calc(#{$track-size} / -2 + 50%);
-      transform: translateX(-1px);
-      width: $track-size;
-
-      #{$root}__icon {
-        font-size: dimensions.get-size(math.div(12, 24));
-      }
+    & > * {
+      grid-area: 1 / 1;
     }
+  }
 
-    #{$root}:hover & #{$root}__thumb {
-      background-color: var(--odx-control-background-color-hover);
-    }
-
-    #{$root}.is-active:not(.is-disabled):hover & #{$root}__thumb {
-      @include track-color(var(--odx-c-highlight-hover));
-    }
-
-    #{$root}.is-active &,
-    #{$root}__input:indeterminate ~ &,
-    #{$root}__input:checked ~ & {
-      @include track-color(var(--odx-control-background-color-selected));
-
-      #{$root}__thumb {
-        @include track-color(var(--odx-control-background-color-selected));
-
-        color: var(--odx-control-color-selected);
-        transform: translateX(calc((#{$track-width} - #{$track-size}) - 1px));
-      }
-    }
-
-    #{$root}.has-error & {
-      @include track-color(var(--odx-control-background-color-error));
-
-      #{$root}__thumb {
-        @include track-color(var(--odx-control-background-color-error));
-      }
-    }
-
-    #{$root}.has-error:hover & {
-      outline-color: var(--odx-control-outline-color-error-hover);
-    }
-
-    #{$root}.is-disabled & {
-      @include track-color(var(--odx-c-secondary-disabled));
-
-      #{$root}__thumb {
-        @include track-color(var(--odx-c-secondary-disabled));
-
-        outline-color: transparent;
-      }
+  &__thumb {
+    align-items: center;
+    background-color: var(--switch-thumb-bg-color);
+    border-radius: var(--odx-border-radius-circle);
+    box-sizing: border-box;
+    color: var(--switch-icon-color);
+    display: flex;
+    font-size: var(--odx-size-75);
+    height: var(--switch-track-size);
+    justify-content: center;
+    transform: translateX(calc(var(--switch-thumb-position)));
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, transform, border-color;
+    width: var(--switch-track-size);
+
+    @include utils.with-outline(var(--odx-border-width-thin)) {
+      outline-color: var(--switch-border-color);
     }
 
-    #{$root}.is-disabled.is-active &,
-    #{$root}.is-disabled ~ #{$root}__input:checked,
-    #{$root}.is-disabled ~ #{$root}__input:indeterminate {
-      @include track-color(var(--odx-control-background-color-disabled-selected));
-
-      #{$root}__thumb {
-        @include track-color(var(--odx-control-background-color-disabled-selected));
-      }
+    #{$root}__icon {
+      font-size: var(--odx-size-75);
     }
+  }
 
-    #{$root}.is-disabled:not(.is-active) & {
-      @include track-color(var(--odx-control-background-color-disabled));
-
-      #{$root}__thumb {
-        @include track-color(var(--odx-control-background-color-disabled));
-      }
-    }
+  &__track {
+    background-color: var(--switch-thumb-bg-color);
+    border: var(--switch-border);
+    border-radius: calc(var(--switch-track-height) / 2);
+    height: var(--switch-track-height);
+    mask-image: radial-gradient(circle closest-side at center, transparent calc(var(--switch-track-size) / 2 + var(--odx-border-width-thin)), black 0);
+    mask-position: calc(var(--switch-mask-position));
+    mask-size: calc(100% + 2 * var(--odx-border-width-thin));
+    transition: var(--odx-motion-transition-reduced);
+    width: var(--switch-track-width);
   }
 
   &__content {
-    @include dimensions.margin(0.5, left);
-
+    margin-inline-start: var(--odx-spacing-75);
     padding-left: 2px;
 
     &:empty {
@@ -183,9 +159,8 @@
   }
 
   &__required {
-    @include typography.font-size(0);
-
     color: var(--odx-c-error-text);
+    font-size: var(--odx-typography-font-size-text-md);
     margin-left: 2px;
     vertical-align: top;
 

package/scss/components/tab-bar-item.component.scss

@@ -1,24 +1,22 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
-@use '../abstract//utils';
+@use '../abstract/utils';
 
 .odx-tab-bar-item {
-  @include dimensions.height(2, math.div(32, 24));
-  @include dimensions.padding-x(math.div(4, 24));
-  @include utils.vertical-center-content();
-  @include motion.transition(background-color);
-  @include utils.with-outline();
-
   align-items: center;
   background-color: transparent;
-  border-radius: var(--odx-v-border-radius-controls);
+  border-radius: var(--odx-border-radius-control);
   cursor: pointer;
-  min-inline-size: dimensions.get-size(math.div(72, 24));
+  margin-block: var(--odx-spacing-50);
+  min-block-size: var(--odx-control-height-sm);
+  min-inline-size: var(--odx-size-450);
+  padding-inline: var(--odx-spacing-25);
   scroll-snap-align: center;
+  transition: var(--odx-motion-transition-default);
+  transition-property: background-color;
   user-select: none;
 
+  @include utils.vertical-center-content();
+  @include utils.with-outline();
+
   &__label {
     flex: 1;
   }
@@ -28,19 +26,19 @@
   }
 
   .odx-icon {
-    @include dimensions.container(1, 1);
-    @include dimensions.margin-x(math.div(4, 24));
-
-    font-size: dimensions.get-size(1);
+    font-size: var(--odx-size-150);
+    height: var(--odx-size-150);
+    margin-inline: var(--odx-spacing-25);
+    width: var(--odx-size-150);
 
     &:first-child {
       margin-inline-start: 0;
     }
 
     &:last-child:not(:first-child) {
-      @include motion.transition(color);
-
       margin-inline-end: 0;
+      transition: var(--odx-motion-transition-default);
+      transition-property: color;
 
       &:hover {
         color: var(--odx-c-highlight);

package/scss/components/tab-bar.component.scss

@@ -1,22 +1,18 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 .odx-tab-bar {
   $root: &;
 
-  @include dimensions.height(2);
-
-  border-bottom: 1px solid;
-  border-bottom-color: var(--odx-control-outline-color-hover);
+  border-bottom: var(--odx-border-width-thin) solid;
+  border-bottom-color: var(--odx-color-stroke-neutral-subtle);
   display: flex;
+  min-block-size: var(--odx-control-height-lg);
   overflow: hidden;
   position: relative;
 
   &__inner {
-    $gradient-start: dimensions.get-size(1);
-    $gradient-end: dimensions.get-size(3);
+    $gradient-start: var(--odx-spacing-150);
+    $gradient-end: var(--odx-size-450);
     $mask-color: #000000;
 
     display: flex;
@@ -47,49 +43,49 @@
   }
 
   &__panel {
-    @include motion.transition(transform);
-    @include dimensions.padding-x(math.div(12, 24));
-
     display: flex;
     flex: 0 0 auto;
-    gap: dimensions.get-size(math.div(8, 24));
+    gap: var(--odx-spacing-50);
+    padding-inline: var(--odx-spacing-75);
     position: relative;
+    transition: var(--odx-motion-transition-default);
+    transition-property: transform;
   }
 
   &__action {
-    @include dimensions.height(2);
-    @include motion.transition(opacity width padding);
-    @include utils.center-content();
-
     background-color: transparent;
     cursor: pointer;
+    min-block-size: var(--odx-control-height-lg);
     opacity: 0;
     overflow: hidden;
     padding: 0;
     pointer-events: none;
     position: absolute;
     top: 0;
+    transition: var(--odx-motion-transition-default);
+    transition-property: opacity, width, padding;
     user-select: none;
     width: 0;
-    z-index: var(--odx-v-layer-2);
+    z-index: var(--odx-z-level-interactive);
 
-    &.is-active {
-      @include dimensions.padding(math.div(8, 24), (right, left));
+    @include utils.center-content();
 
+    &.is-active {
       opacity: 1;
+      padding-inline: var(--odx-control-spacing-inline-lg);
       pointer-events: all;
       transform: scaleX(1);
-      width: dimensions.get-size(1.5);
+      width: var(--odx-size-225);
     }
 
     .odx-icon {
-      @include dimensions.container(1, 1);
-
       align-items: center;
       color: var(--odx-c-highlight);
       display: flex;
-      font-size: dimensions.get-size(math.div(32, 24));
+      font-size: var(--odx-size-200);
+      height: var(--odx-size-150);
       justify-content: center;
+      width: var(--odx-size-150);
     }
 
     &--prev {
@@ -112,12 +108,11 @@
   }
 
   .odx-tab-bar__indicator {
-    @include dimensions.margin(math.div(4, 24), left);
-
     background-color: var(--odx-c-highlight);
+    block-size: var(--odx-spacing-25);
     bottom: -1px;
-    height: dimensions.get-size(math.div(4, 24));
-    width: dimensions.get-size(2) !important;
+    margin-inline-start: var(--odx-spacing-25);
+    width: var(--odx-size-300) !important;
   }
 
   &:focus-visible {