@odx/ui 5.5.0 → 6.0.1

package/scss/variables/_visuals.scss

@@ -3,10 +3,10 @@
   --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: 3px;
+  --odx-v-backdrop-blur: var(--odx-elevation-backdrop-blur);
 
-  --odx-v-box-shadow-layer-1: 0 2px 6px 0 var(--odx-c-box-shadow);
-  --odx-v-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-box-shadow);
+  --odx-v-box-shadow-layer-1: var(--odx-elevation-shadow-level-1);
+  --odx-v-box-shadow-layer-2: var(--odx-elevation-shadow-level-2);
 
   --odx-v-layer-1: 0;
   --odx-v-layer-2: 10;
@@ -15,10 +15,10 @@
   --odx-v-layer-5: 9500;
   --odx-v-layer-6: 9900;
 
-  --odx-v-transition-duration: 250ms;
+  --odx-v-transition-duration: var(--odx-motion-duration-default);
   --odx-v-transition-easing-fn: ease;
-  --odx-v-outline-width: 1px;
-  --odx-v-outline-width-bold: 2px;
+  --odx-v-outline-width: var(--odx-border-width-thin);
+  --odx-v-outline-width-bold: var(--odx-border-width-thick);
   --odx-v-outline-box-shadow-width: 1px;
 
   --odx-v-scrollbar-track-color: transparent;

package/scss/wizard-step.component.scss

@@ -1,16 +1,12 @@
-@use 'sass:math';
-@use 'sass:color';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/motion';
 @use '../abstract/typography';
 
 .odx-wizard-step {
   $root: &;
   $parent-root: odx-wizard;
-  $step-size: dimensions.get-size(math.div(20, 24));
-  $icon-size: dimensions.get-size(math.div(13, 24));
-  $border-width: dimensions.get-size(math.div(2, 24));
+  $step-size: var(--odx-size-125);
+  $icon-size: var(--odx-spacing-75);
+  $border-width: var(--odx-spacing-12);
 
   cursor: pointer;
   display: none;
@@ -19,10 +15,9 @@
   overflow: hidden;
 
   .#{$parent-root}:not(.#{$parent-root}--vertical) & {
-    @include dimensions.padding(math.div(2, 24), 'top');
-
-    gap: dimensions.get-size(math.div(8, 24));
+    gap: var(--odx-spacing-50);
     min-width: var(--odx-horizontal-wizard-width);
+    padding-block-start: var(--odx-spacing-12);
   }
 
   &.is-disabled {
@@ -36,13 +31,14 @@
   &__label {
     @include typography.prevent-text-overflow();
     @include utils.with-outline(var(--odx-v-outline-width-bold));
-    @include motion.transition(background-color);
 
     align-self: center;
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     color: var(--odx-c-text-disabled);
     margin: 0 auto;
-    padding: 0 var(--odx-v-outline-width-bold);
+    padding: 0 var(--odx-spacing-25);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color;
     user-select: none;
 
     :is(#{$root}--valid, #{$root}--passed) & {
@@ -199,15 +195,15 @@
   }
 
   &__circle {
-    @include motion.transition(background-color color);
-
     align-items: center;
     border: $border-width solid var(--odx-c-secondary);
-    border-radius: 50%;
+    border-radius: var(--odx-border-radius-circle);
     color: var(--odx-c-text-disabled);
     display: flex;
     height: $step-size;
     justify-content: center;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
     width: $step-size;
 
     :is(#{$root}--touched, #{$root}--passed) & {
@@ -236,7 +232,7 @@
     align-items: center;
     flex: 0 0 var(--odx-vertical-wizard-height);
     flex-direction: row-reverse;
-    gap: dimensions.get-size(math.div(12, 24));
+    gap: var(--odx-spacing-75);
     justify-content: start;
   }
 }

package/scss/wizard.component.scss

@@ -1,10 +1,8 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/breakpoints';
 
 .odx-wizard {
-  --odx-horizontal-wizard-width: #{dimensions.get-size(math.div(100, 24))};
-  --odx-vertical-wizard-height: #{dimensions.get-size(math.div(70, 24))};
+  --odx-horizontal-wizard-width: var(--odx-size-700);
+  --odx-vertical-wizard-height: var(--odx-size-450);
 
   display: flex;