@odx/ui 5.5.0 → 6.0.1

package/scss/components/chart-footer.component.scss

@@ -1,21 +1,21 @@
-.odx-chart-footer {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.75);
-  justify-content: flex-end;
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-  width: 100%;
-
-  .legend-item {
-    align-items: center;
-    display: flex;
-    font-size: calc(var(--odx-typography-base-size) * 0.875);
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
-  }
-
-  .legend-dot {
-    border-radius: 50%;
-    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
-    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
-  }
-}
+.odx-chart-footer {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-100);
+  justify-content: flex-end;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .legend-item {
+    align-items: center;
+    display: flex;
+    font-size: calc(var(--odx-typography-base-size) * 0.875);
+    gap: var(--odx-control-spacing-inline-md);
+  }
+
+  .legend-dot {
+    border-radius: 50%;
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+  }
+}

package/scss/components/chart-header.component.scss

@@ -1,49 +1,49 @@
-.odx-chart-header {
-  display: flex;
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-  width: 100%;
-
-  .odx-chart-header__actions {
-    display: none;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-    margin-left: auto;
-  }
-}
-
-.odx-chart-header--center {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  justify-content: center;
-  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-}
-
-.odx-chart-header--split,
-.odx-chart-header--controls,
-.odx-chart-header--toggle,
-.odx-chart-header--textlink {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  justify-content: space-between;
-  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-
-  .odx-chart-header__actions {
-    align-items: center;
-    display: flex;
-  }
-}
-
-.odx-chart-header--controls {
-  .odx-chart-header__actions form {
-    align-items: center;
-    display: flex;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-
-    .odx-select__trigger {
-      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
-    }
-  }
-}
+.odx-chart-header {
+  display: flex;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .odx-chart-header__actions {
+    display: none;
+    gap: var(--odx-spacing-75);
+    margin-left: auto;
+  }
+}
+
+.odx-chart-header--center {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-75);
+  justify-content: center;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+}
+
+.odx-chart-header--split,
+.odx-chart-header--controls,
+.odx-chart-header--toggle,
+.odx-chart-header--textlink {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-75);
+  justify-content: space-between;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+
+  .odx-chart-header__actions {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.odx-chart-header--controls {
+  .odx-chart-header__actions form {
+    align-items: center;
+    display: flex;
+    gap: var(--odx-spacing-75);
+
+    .odx-select__trigger {
+      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
+    }
+  }
+}

package/scss/components/checkbox.component.scss

@@ -1,10 +1,5 @@
-@use 'sass:math';
-@use '../layout/helpers';
 @use '../layout/typography' as *;
-@use '../abstract/dimensions';
-@use '../abstract/typography';
 @use '../abstract/utils';
-@use '../abstract/motion';
 
 .odx-checkbox {
   $root: &;
@@ -21,15 +16,16 @@
   }
 
   &__label {
-    @include dimensions.line-height(1);
-    @include motion.transition(background-color color);
-    @include typography.font-size(0);
-
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     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;
     vertical-align: top;
 
@@ -47,30 +43,31 @@
   }
 
   &__indicator {
-    @include dimensions.container(1, math.div(20, 24));
-    @include motion.transition(background-color color);
-    @include utils.center-content(true);
-
-    @include utils.with-outline() {
-      outline-offset: var(--odx-v-outline-width-bold);
-    }
-
     background-color: var(--odx-control-background-color);
     border: var(--odx-v-outline-width) solid var(--odx-control-outline-color);
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     box-shadow: 0 0 0 var(--odx-v-outline-width-bold) transparent;
-    color: var(--odx-control-color-selected);
+    color: var(--odx-color-foreground-inverse-static);
     flex: 0 0 auto;
+    height: var(--odx-size-125);
+    margin-block: var(--odx-spacing-12);
     padding: 1px;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
+    width: var(--odx-size-125);
 
-    > .odx-icon {
-      $checkmark-size: math.div(18, 24);
+    @include utils.center-content(true);
 
-      @include dimensions.container($checkmark-size);
-      @include motion.transition(opacity);
+    @include utils.with-outline() {
+      outline-offset: var(--odx-v-outline-width-bold);
+    }
 
-      font-size: dimensions.get-size($checkmark-size);
+    > .odx-icon {
+      font-size: calc(var(--odx-control-addon-size-xs) + 2px);
+      height: calc(var(--odx-vertical-rythm-base-size) * 3 / 4);
       opacity: 0;
+      transition: var(--odx-motion-transition-default);
+      transition-property: opacity;
     }
 
     #{$root}:hover & {
@@ -94,6 +91,10 @@
       color: var(--odx-control-color-disabled-selected);
     }
 
+    #{$root}.is-active:not(.is-disabled):hover & {
+      background-color: var(--odx-color-background-control-selected-hover);
+    }
+
     #{$root}.has-error & {
       background-color: var(--odx-control-background-color-error);
       color: var(--odx-control-color-error);
@@ -123,10 +124,9 @@
   }
 
   &__content {
-    @include dimensions.margin(0.5, left);
-
     display: flex;
     flex-direction: column;
+    margin-inline-start: var(--odx-spacing-75);
     padding-left: 2px;
 
     &:empty {
@@ -136,9 +136,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/chip-list.component.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
-@use '../abstract/dimensions';
 
-$form-field-inner-padding: math.div(8, 24);
+$form-field-inner-padding: var(--odx-spacing-50);
 
 .odx-chip-list {
   $root: &;
@@ -12,12 +11,12 @@ $form-field-inner-padding: math.div(8, 24);
 
   &-row {
     &:has(.odx-chip) {
-      @include dimensions.padding($form-field-inner-padding, ('top', 'left', 'right'));
-      @include dimensions.padding(math.div(4, 24), ('bottom'));
-
       display: flex;
       flex-wrap: wrap;
-      gap: dimensions.get-size($form-field-inner-padding);
+      gap: var(--odx-spacing-50);
+      padding-block-end: var(--odx-spacing-25);
+      padding-block-start: $form-field-inner-padding;
+      padding-inline: $form-field-inner-padding;
     }
   }
 }

package/scss/components/chip.component.scss

@@ -1,21 +1,23 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/motion';
 @use '../abstract/typography';
 
-$sizes: (small 1 -1 math.div(16, 24), medium 1.5 0 1);
+$sizes: (small 1 -1 var(--odx-size-100), medium 1.5 0 var(--odx-size-150));
 $variants: secondary, highlight, success, danger, warning, confirmation;
 
 .odx-chip {
-  $root: &;
+  --odx-c-warning-text: var(--odx-color-foreground-rest-static);
+  --odx-c-confirmation-text: var(--odx-color-foreground-rest-static);
+  --odx-c-success-text: var(--odx-color-foreground-rest-static);
 
-  @include typography.font-weight(medium);
-  @include motion.transition(background-color color);
+  $root: &;
 
   display: inline-flex;
-  gap: dimensions.get-size(math.div(4, 24));
-  min-width: dimensions.get-size(math.div(32, 24));
+  font-weight: var(--odx-typography-font-weight-medium);
+  gap: var(--odx-spacing-25);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+  min-width: var(--odx-size-200);
+  transition: var(--odx-motion-transition-default);
+  transition-property: background-color, color;
   user-select: none;
 
   &:not(#{$root}--secondary) {
@@ -28,10 +30,11 @@ $variants: secondary, highlight, success, danger, warning, confirmation;
 
   &__action {
     @include utils.center-content();
-    @include motion.transition(background-color color);
 
-    border-radius: 50%;
+    border-radius: var(--odx-border-radius-circle);
     margin: 0;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
 
     &:focus-visible {
       box-shadow: 0 0 0 var(--odx-v-outline-box-shadow-width) var(--odx-c-focus-inner);
@@ -55,18 +58,28 @@ $variants: secondary, highlight, success, danger, warning, confirmation;
 
   @each $size, $size-factor, $font-size-factor, $icon-size in $sizes {
     &--#{$size} {
-      @include dimensions.padding-x(math.div($size-factor, 3));
-      @include dimensions.line-height($size-factor);
-      @include typography.font-size($font-size-factor);
+      $font-size-token: var(--odx-typography-font-size-text-md);
+      $action-margin-token: var(--odx-spacing-negative-50);
+
+      @if $font-size-factor == -1 {
+        $font-size-token: var(--odx-typography-font-size-text-sm);
+      }
+
+      @if $size-factor == 1.5 {
+        $action-margin-token: var(--odx-spacing-negative-75);
+      }
 
-      border-radius: dimensions.get-size(math.div($size-factor, 2));
+      border-radius: var(--odx-border-radius-circle);
+      font-size: $font-size-token;
+      line-height: calc(var(--odx-vertical-rythm-base-size) * #{$size-factor});
+      padding-inline: var(--odx-control-spacing-inline-lg);
 
       #{$root}__action {
-        @include dimensions.margin(math.div($size-factor, -3), 'right');
+        margin-inline-end: $action-margin-token;
       }
 
       > .odx-icon {
-        font-size: dimensions.get-size($icon-size);
+        font-size: $icon-size;
       }
     }
   }

package/scss/components/circle-chart-table.component.scss

@@ -5,7 +5,7 @@
 
   &__container {
     display: flex;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+    gap: var(--odx-spacing-150);
     padding: calc(var(--odx-vertical-rythm-base-size) * 0.5);
     width: 100%;
   }

package/scss/components/circular-progress.component.scss

@@ -1,6 +1,3 @@
-@use '../abstract/motion';
-@use '../abstract/dimensions';
-
 @keyframes odx-circular-progress-indicator-animation {
   0% {
     stroke-dashoffset: 100;
@@ -44,11 +41,11 @@
   }
 
   &__indicator {
-    @include motion.transition(stroke-dashoffset);
-
     stroke: var(--odx-c-highlight);
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
+    transition: var(--odx-motion-transition-default);
+    transition-property: stroke-dashoffset;
   }
 
   &--indeterminate {
@@ -62,14 +59,16 @@
   }
 
   &--small {
-    @include dimensions.height(2, 1.5);
+    block-size: var(--odx-control-height-md);
+    margin-block: var(--odx-spacing-37);
   }
 
   &--medium {
-    @include dimensions.height(3, 2.5);
+    block-size: calc(var(--odx-control-height-lg) + var(--odx-spacing-75));
+    margin-block: var(--odx-spacing-37);
   }
 
   &--large {
-    @include dimensions.height(4, 4);
+    block-size: var(--odx-size-600);
   }
 }

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

package/scss/components/expandable-list-item.component.scss

@@ -1,7 +1,4 @@
-@use 'sass:math';
 @use '../abstract/utils';
-@use '../abstract/motion';
-@use '../abstract/dimensions';
 
 .odx-expandable-list-item {
   $root: &;
@@ -10,21 +7,24 @@
   &__header {
     display: block;
     position: relative;
+    z-index: var(--odx-z-level-base);
 
     > .odx-list-item {
-      @include dimensions.padding(math.div(52, 24), right);
+      padding-inline-end: calc(var(--odx-spacing-100) * 2 + var(--odx-size-125));
     }
   }
 
   &__action {
     margin: 0;
     position: absolute;
-    right: dimensions.get-size(math.div(8, 24));
+    right: var(--odx-spacing-50);
     top: 50%;
     transform: translateY(-50%);
+    z-index: var(--odx-z-level-interactive);
 
     .odx-icon {
-      @include motion.transition(transform);
+      transition: var(--odx-motion-transition-default);
+      transition-property: transform;
     }
   }
 

package/scss/components/footer.component.scss

@@ -1,10 +1,9 @@
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 @use '../abstract/typography';
 @use '../abstract/utils';
 
 :root {
-  --odx-footer-min-height: #{dimensions.get-size(10)};
+  --odx-footer-min-height: #{calc(var(--odx-vertical-rythm-base-size) * 10)};
   --odx-footer-background-color: var(--odx-c-background-content);
   --odx-footer-text-color: var(--odx-c-text);
   --odx-footer-description-color: var(--odx-c-text-disabled);
@@ -31,12 +30,11 @@
   display: flex;
   margin-block-start: auto;
   min-height: var(--odx-footer-min-height);
-
-  @include dimensions.padding(1);
+  padding: var(--odx-spacing-150);
 
   &__inner,
   &__navigation {
-    row-gap: #{dimensions.get-size(0.25)};
+    row-gap: var(--odx-spacing-37);
   }
 
   &__content {
@@ -55,7 +53,7 @@
 
   &__navigation {
     align-items: center;
-    column-gap: #{dimensions.get-size(1)};
+    column-gap: var(--odx-spacing-150);
     display: flex;
     flex-wrap: wrap;
     grid-area: navigation;
@@ -73,11 +71,11 @@
 
   &__description {
     color: var(--odx-footer-description-color);
+    font-size: var(--odx-typography-font-size-text-sm);
     grid-area: meta;
     user-select: none;
 
     @include utils.non-interactive();
-    @include typography.font-size(-1);
 
     @include breakpoints.up(phone) {
       text-align: right;