@odx/ui 5.4.0 → 6.0.0

package/scss/components/table.component.scss

@@ -1,14 +1,7 @@
-@use 'sass:math';
-@use '../layout/helpers';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
-@use '../abstract/utils';
-@use '../abstract/motion';
-
 .odx-table {
   --odx-table-background-color: var(--white);
-  --odx-table-head-border-color: var(--gray-900);
-  --odx-table-cell-border-color: var(--gray-200);
+  --odx-table-head-border-color: var(--odx-color-stroke-neutral-strong);
+  --odx-table-cell-border-color: var(--odx-color-stroke-neutral-subtle);
   --odx-table-cell-background-color-hover: var(--blue-700-5);
   --odx-table-cell-background-color-striped: var(--gray-50);
   --odx-table-cell-background-color-active: var(--cyan-500-15);
@@ -24,16 +17,15 @@
 
   &__header-cell,
   &__cell {
-    @include dimensions.padding-x(0.5);
-
     border-bottom-style: solid;
     border-bottom-width: 1px;
+    padding-inline: var(--odx-size-125);
     text-align: left;
   }
 
   &__cell {
+    block-size: var(--odx-control-height-lg);
     border-bottom-color: var(--odx-table-cell-border-color);
-    height: dimensions.get-size(2);
     vertical-align: middle;
   }
 
@@ -42,14 +34,14 @@
   }
 
   &__header-row {
-    height: dimensions.get-size(2);
+    block-size: var(--odx-control-height-lg);
   }
 
   &__header-cell-title {
     align-items: center;
+    block-size: var(--odx-control-height-lg);
     display: flex;
-    gap: dimensions.get-size(math.div(8, 24));
-    height: dimensions.get-size(2);
+    gap: var(--odx-spacing-50);
     user-select: none;
 
     //  firefox patch for headers alignment, it needs some content to be able to align the header
@@ -64,13 +56,13 @@
   }
 
   &__header-cell {
-    @include typography.font-weight(medium);
-
     border-bottom-color: var(--odx-table-head-border-color);
+    font-weight: var(--odx-typography-font-weight-medium);
+    letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 
     .odx-form-field {
-      height: dimensions.get-size(2);
       justify-content: center;
+      min-block-size: var(--odx-control-height-lg);
       padding: 0;
 
       &__info {
@@ -88,7 +80,8 @@
   &__body {
     /* stylelint-disable-next-line no-descending-specificity */
     .odx-table__row {
-      @include motion.transition(background-color);
+      transition: var(--odx-motion-transition-default);
+      transition-property: background-color;
 
       &:hover {
         background-color: var(--odx-table-cell-background-color-hover);

package/scss/components/timepicker.component.scss

@@ -1,16 +1,11 @@
-@use 'sass:math';
 @use '../abstract/utils';
-@use '../layout/helpers';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
-@use '../abstract/motion';
 
 .odx-timepicker {
   $root: &;
 
   @include utils.vertical-center-content();
 
-  gap: dimensions.get-size(math.div(4, 24));
+  gap: var(--odx-spacing-25);
   justify-content: space-between;
   width: 100%;
 
@@ -19,7 +14,7 @@
   }
 
   &__trigger-wrapper {
-    gap: dimensions.get-size(math.div(1, 3));
+    gap: var(--odx-spacing-50);
   }
 
   input[odxTimepickerControl] {
@@ -27,9 +22,9 @@
     width: 100%;
 
     &::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;
     }
 
@@ -41,7 +36,7 @@
   &__option-list {
     display: flex;
     flex-direction: column;
-    max-height: calc(7 * dimensions.get-size(1.5) + var(--odx-vertical-rythm-base-size));
+    max-height: calc(var(--odx-vertical-rythm-base-size) * 11.5);
   }
 
   &-option {

package/scss/components/toast-item.component.scss

@@ -1,19 +1,14 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
-@use '../abstract/utils';
-
 .odx-toast-item {
-  --odx-c-default: var(--blue-50);
-  --odx-c-warning: var(--yellow-50);
-  --odx-c-danger: var(--red-00);
-  --odx-c-success: var(--green-00);
+  --odx-c-default: var(--odx-color-background-primary-subtle);
+  --odx-c-warning: var(--odx-color-background-warning-subtle);
+  --odx-c-danger: var(--odx-color-background-danger-subtle);
+  --odx-c-success: var(--odx-color-background-success-subtle);
   --odx-c-warning-strong: var(--yellow-500);
   --odx-c-danger-strong: var(--red-500);
 
   $root: &;
   $variants: default, warning, danger, success, warning-strong, danger-strong;
-  $gap: dimensions.get-size(math.div(12, 24));
+  $gap: var(--odx-spacing-75);
 
   border-radius: var(--odx-toast-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
@@ -27,9 +22,8 @@
   }
 
   &__text-content {
-    @include typography.font-size(-1);
-
     flex: 1;
+    font-size: var(--odx-typography-font-size-text-sm);
     overflow: auto;
   }
 
@@ -38,7 +32,7 @@
   }
 
   &__description {
-    max-height: dimensions.get-size(5);
+    max-block-size: calc(var(--odx-size-600) + var(--odx-spacing-150));
     overflow-wrap: break-word;
   }
 
@@ -76,13 +70,13 @@
   &--danger-strong {
     --odx-c-text: var(--white);
 
-    :root:has([odxTheme='dark'], .odx-theme-dark) & {
+    :root:has([odxTheme='dark'], .odx-dark-mode, .odx-theme-dark) & {
       --odx-c-text: var(--black);
     }
   }
 
   &--warning-strong {
-    :root:has([odxTheme='dark'], .odx-theme-dark) & {
+    :root:has([odxTheme='dark'], .odx-dark-mode, .odx-theme-dark) & {
       --odx-c-text: var(--white);
     }
   }

package/scss/components/toast.component.scss

@@ -1,18 +1,15 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
 
 .odx-toast-container {
-  --odx-toast-outer-offset: #{dimensions.get-size(math.div(8, 24))};
-  --odx-toast-border-radius: #{dimensions.get-size(math.div(6, 24))};
+  --odx-toast-outer-offset: var(--odx-spacing-50);
+  --odx-toast-border-radius: var(--odx-border-radius-md);
 
   background-color: transparent;
   border: none;
   display: flex;
   flex-direction: column;
-  margin: #{dimensions.get-size(math.div(4, 24))} var(--odx-toast-outer-offset) auto auto;
-  max-width: min(calc(100dvw - 2 * var(--odx-toast-outer-offset)), dimensions.get-size(20));
+  margin: var(--odx-spacing-25) var(--odx-toast-outer-offset) auto auto;
+  max-width: min(calc(100dvw - 2 * var(--odx-toast-outer-offset)), calc(var(--odx-vertical-rythm-base-size) * 20));
   overflow: clip;
   padding-top: var(--odx-toast-outer-offset);
 
@@ -25,7 +22,7 @@
   }
 
   @include breakpoints.up(phone) {
-    --odx-toast-outer-offset: #{dimensions.get-size(math.div(20, 24))};
+    --odx-toast-outer-offset: var(--odx-size-125);
 
     margin-top: 0;
   }

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

@@ -1,28 +1,27 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 .odx-toggle-button-group {
-  --odx-toggle-button-border-radius: 2px;
+  --odx-toggle-button-border-radius: var(--odx-border-radius-control);
 
   $root: &;
 
-  @include dimensions.height(2, 1.5);
-  @include dimensions.padding-x(math.div(6, 24));
-  @include motion.transition(background-color);
-  @include utils.center-content(true);
-
-  border-radius: var(--odx-v-border-radius-controls);
-  column-gap: dimensions.get-size(math.div(6, 24));
+  border-radius: var(--odx-border-radius-control);
+  column-gap: var(--odx-spacing-37);
+  margin-block: var(--odx-spacing-37);
+  min-block-size: var(--odx-control-height-md);
+  padding-inline: var(--odx-control-spacing-inline-md);
   position: relative;
-  z-index: var(--odx-v-layer-1);
+  transition: var(--odx-motion-transition-default);
+  transition-property: background-color;
+  z-index: var(--odx-z-level-base);
+
+  @include utils.center-content(true);
 
   &__indicator {
     @include utils.with-outline(var(--odx-v-outline-width-bold));
 
     background-color: var(--odx-c-highlight);
-    block-size: dimensions.get-size(math.div(28, 24));
+    block-size: var(--odx-size-175);
     border-radius: var(--odx-toggle-button-border-radius);
     outline-width: var(--odx-v-outline-width-bold);
 
@@ -48,7 +47,7 @@
 
   .odx-toggle-button {
     flex: 1 1 auto;
-    z-index: var(--odx-v-layer-2);
+    z-index: var(--odx-z-level-interactive);
   }
 
   &.has-error:not(.is-disabled, .is-readonly) {

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

@@ -1,20 +1,18 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
 @use '../abstract/utils';
 
 .odx-toggle-button {
   $root: &;
 
-  @include motion.transition(color);
-  @include typography.font-size(0);
-  @include typography.font-weight(medium);
-  @include utils.vertical-center-content();
-
   color: currentcolor;
+  font-size: var(--odx-typography-font-size-text-md);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+  transition: var(--odx-motion-transition-default);
+  transition-property: color;
   user-select: none;
 
+  @include utils.vertical-center-content();
+
   &.is-active {
     color: var(--odx-c-highlight-text);
   }
@@ -37,13 +35,14 @@
   }
 
   &__indicator {
-    @include motion.transition(background-color);
-    @include dimensions.padding-x(math.div(1, 3));
-    @include utils.vertical-center-content();
-
-    block-size: dimensions.get-size(math.div(28, 24));
+    block-size: var(--odx-size-175);
     border-radius: var(--odx-toggle-button-border-radius);
-    column-gap: dimensions.get-size(math.div(1, 6));
+    column-gap: var(--odx-spacing-25);
+    padding-inline: var(--odx-control-spacing-inline-lg);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color;
+
+    @include utils.vertical-center-content();
 
     #{$root}.is-readonly &,
     #{$root}.is-disabled &,
@@ -58,9 +57,8 @@
   }
 
   &__label {
-    @include dimensions.padding-y(math.div(1, 6));
-
     cursor: pointer;
+    padding-block: var(--odx-control-spacing-sm);
     text-align: center;
     width: 100%;
 

package/scss/components/tooltip.component.scss

@@ -1,26 +1,21 @@
-@use '../abstract/dimensions';
-@use '../abstract/utils';
-@use '../abstract/typography';
-
 :root {
-  --odx-tooltip-background-color: var(--blue-800);
+  --odx-tooltip-background-color: var(--odx-color-background-level-3);
   --odx-tooltip-color: var(--odx-c-text-inverse);
-  --odx-tooltip-size-small: #{dimensions.get-size(5)};
-  --odx-tooltip-size-medium: #{dimensions.get-size(10)};
-  --odx-tooltip-size-large: #{dimensions.get-size(15)};
+  --odx-tooltip-size-small: var(--odx-layout-width-xs);
+  --odx-tooltip-size-medium: var(--odx-layout-width-sm);
+  --odx-tooltip-size-large: var(--odx-layout-width-md);
 }
 
 .odx-tooltip {
   $sizes: small, medium, large;
 
-  @include dimensions.padding(0.5);
-  @include typography.font-size(-1);
-
   background-color: var(--odx-tooltip-background-color);
-  border-radius: var(--odx-v-border-radius);
+  border-radius: var(--odx-border-radius-md);
   color: var(--odx-tooltip-color);
   display: block;
+  font-size: var(--odx-typography-font-size-text-sm);
   overflow: hidden;
+  padding: var(--odx-spacing-75);
 
   @each $size in $sizes {
     &--#{$size} {
@@ -31,7 +26,7 @@
   &-overlay {
     .odx-cdk-connected-overlay-arrow {
       background-color: var(--odx-tooltip-background-color);
-      z-index: var(--odx-v-layer-1);
+      z-index: var(--odx-z-level-foreground);
     }
   }
 }

package/scss/components/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/components/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;
 

package/scss/connected-overlay.scss

@@ -1,12 +1,4 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
-@use '../abstract/utils';
-
 .odx-cdk-connected-overlay {
-  @include motion.transition(opacity visibility overlay);
-
   background: transparent;
   border: 0;
   color: var(--odx-c-text);
@@ -16,7 +8,9 @@
   padding: 0;
   position: fixed;
   transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
+  transition: var(--odx-motion-transition-default);
   transition-behavior: allow-discrete;
+  transition-property: opacity, visibility, overlay;
 
   &.force-hidden {
     display: none;
@@ -56,8 +50,8 @@
 }
 
 .odx-cdk-connected-overlay-arrow {
-  height: dimensions.get-size(0.5);
+  block-size: var(--odx-spacing-75);
+  inline-size: var(--odx-spacing-75);
   position: fixed;
   transform: rotate(45deg);
-  width: dimensions.get-size(0.5);
 }

package/scss/content-box.component.scss

@@ -1,5 +1,4 @@
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 
 .odx-content-box {
   background-color: var(--odx-c-background-content);
@@ -17,26 +16,30 @@
   }
 
   &__header {
-    @include dimensions.padding(0.5, ('top', 'right', 'left'));
+    padding-block-start: var(--odx-spacing-75);
+    padding-inline: var(--odx-spacing-75);
 
     @include breakpoints.up(phone) {
-      @include dimensions.padding(1, ('top', 'right', 'left'));
+      padding-block-start: var(--odx-spacing-150);
+      padding-inline: var(--odx-spacing-150);
     }
   }
 
   &__footer {
-    @include dimensions.padding(0.5, ('right', 'bottom', 'left'));
+    padding-block-end: var(--odx-spacing-75);
+    padding-inline: var(--odx-spacing-75);
 
     @include breakpoints.up(phone) {
-      @include dimensions.padding(1, ('right', 'bottom', 'left'));
+      padding-block-end: var(--odx-spacing-150);
+      padding-inline: var(--odx-spacing-150);
     }
   }
 
   &__content {
-    @include dimensions.padding(0.5);
+    padding: var(--odx-spacing-75);
 
     @include breakpoints.up(phone) {
-      @include dimensions.padding(1);
+      padding: var(--odx-spacing-150);
     }
   }
 

package/scss/core.scss

@@ -1,3 +1,5 @@
+@use '@odx/design-tokens/fonts';
+@use '@odx/design-tokens/css';
 @use 'variables';
 @use 'reset';
 

package/scss/datepicker.component.scss

@@ -1,5 +1,3 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
 
 .odx-datepicker {
@@ -8,7 +6,7 @@
   @include utils.vertical-center-content();
 
   &__trigger-wrapper {
-    gap: dimensions.get-size(math.div(1, 3));
+    gap: var(--odx-spacing-50);
     margin: 0 0 0 auto;
 
     > .odx-button {

package/scss/daterangepicker.component.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '../abstract/utils';
-@use '../abstract/dimensions';
 
 .odx-daterangepicker {
   $root: &;
@@ -8,7 +7,7 @@
   @include utils.vertical-center-content();
 
   &__trigger-wrapper {
-    gap: dimensions.get-size(math.div(1, 3));
+    gap: var(--odx-spacing-50);
     margin: 0 0 0 auto;
 
     > .odx-button {
@@ -36,7 +35,11 @@
   }
 
   &__separator {
-    @include dimensions.margin-x(0.25);
+    margin-inline: var(--odx-spacing-37);
+
+    #{$root}.is-disabled & {
+      color: var(--odx-input-control-color-disabled);
+    }
   }
 
   .odx-dropdown {

package/scss/dropdown.component.scss

@@ -1,32 +1,28 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-
 $dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
 
 .odx-dropdown {
   background-color: var(--odx-c-background-content);
-  border-radius: var(--odx-v-border-radius);
+  border-radius: var(--odx-border-radius-md);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
   max-width: var(--odx-select-max-width);
   min-height: inherit;
 
   &__inner {
-    @include dimensions.padding-x(0.5);
-
-    border-bottom: dimensions.get-size(0.5) solid transparent;
-    border-top: dimensions.get-size(0.5) solid transparent;
+    border-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5) solid transparent;
+    border-top: calc(var(--odx-vertical-rythm-base-size) * 0.5) solid transparent;
     max-height: inherit;
     min-height: inherit;
     overflow: auto;
     overscroll-behavior: contain;
+    padding-inline: calc(var(--odx-spacing-100) - var(--odx-spacing-12));
   }
 
   &__option-list {
     display: flex;
     flex-direction: column;
     max-height: var(--odx-select-max-height);
-    min-height: dimensions.get-size(1.5);
+    min-block-size: var(--odx-control-height-md);
   }
 }
 

package/scss/error-page.component.scss

@@ -1,18 +1,13 @@
-@use 'sass:math';
-@use '../abstract/utils';
-@use '../abstract/motion';
-@use '../abstract/dimensions';
 @use '../layout/typography';
 
 .odx-error-page {
-  @include dimensions.margin-x(1);
-
   display: flex;
   flex: 1;
   flex-direction: column;
+  margin-inline: var(--odx-spacing-150);
 
   &__title {
-    @extend .odx-heading-4;
+    @extend .odx-heading-3;
   }
 
   &__container {
@@ -25,22 +20,20 @@
   }
 
   &__icon-container {
-    @include dimensions.margin(1, bottom);
+    margin-block-end: var(--odx-spacing-150);
   }
 
   &__actions {
-    @include dimensions.margin(1, top);
-
     display: flex;
     flex-wrap: wrap;
     gap: var(--odx-grid-gutter);
     justify-content: center;
+    margin-block-start: var(--odx-spacing-150);
     width: 100%;
   }
 
   &__footer {
-    @include dimensions.padding(1, bottom);
-
+    padding-block-end: var(--odx-spacing-150);
     text-align: center;
   }
 }