@odx/ui 5.5.0 → 6.0.0

package/scss/components/main-menu-item.component.scss

@@ -1,55 +1,46 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/utils';
 @use '../abstract/typography';
 
 :root {
   --odx-main-menu-item-background-color: transparent;
-  --odx-main-menu-item-background-color-hover: var(--white-5);
-  --odx-main-menu-item-background-color-active: var(--odx-c-focus);
   --odx-main-menu-item-text-color: inherit;
-  --odx-main-menu-item-text-color-disabled: var(--odx-c-primary-text-disabled);
-}
-
-@include utils.theme-selector(dark) {
-  --odx-main-menu-item-background-color-active: var(--cyan-500-15);
-  --odx-main-menu-item-text-color-disabled: var(--blue-500);
 }
 
 .odx-main-menu-item {
-  @include dimensions.padding(math.div(2, 3));
-  @include motion.transition(color background-color);
-  @include utils.interactive();
-  @include typography.font-weight(medium);
-  @include typography.prevent-text-overflow();
-
   background-color: transparent;
-  border-radius: var(--odx-v-border-radius);
+  border-radius: var(--odx-border-radius-md);
   color: var(--odx-main-menu-item-text-color);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
   line-height: 1;
+  padding: var(--odx-spacing-100);
+  transition: var(--odx-motion-transition-default);
+  transition-property: color, background-color;
+
+  @include utils.interactive();
+  @include typography.prevent-text-overflow();
 
   &:hover {
-    background-color: var(--odx-main-menu-item-background-color-hover);
+    background-color: var(--odx-color-background-transparent-hover);
   }
 
   &.is-selected,
   &:active {
-    background-color: var(--odx-main-menu-item-background-color-active);
+    background-color: var(--odx-color-background-transparent-selected);
   }
 
   &.is-disabled,
   &:disabled {
     background-color: transparent;
-    color: var(--odx-main-menu-item-text-color-disabled);
+    color: var(--odx-c-link-disabled);
   }
 
   > .odx-icon {
-    @include dimensions.margin(math.div(1, 3), right);
-    @include dimensions.margin(math.div(-1, 3), left);
+    margin-inline-end: var(--odx-spacing-50);
+    margin-inline-start: var(--odx-spacing-negative-50);
   }
 
   &:focus-visible {
-    background-color: var(--odx-main-menu-item-background-color-active);
+    background-color: var(--odx-color-background-transparent-selected);
   }
 }

package/scss/components/main-menu.component.scss

@@ -1,42 +1,25 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/typography';
-@use '../abstract/motion';
 @use 'button.component';
 @use 'main-menu-button.component';
 @use 'main-menu-item.component';
 
 :root {
   --odx-main-menu-max-width: 100dvw;
-  --odx-main-menu-background-color: var(--odx-c-primary);
-  --odx-main-menu-text-color: var(--odx-c-primary-text);
+  --odx-main-menu-text-color: var(--odx-color-foreground-inverse-static);
 
   @include breakpoints.up(phone) {
     --odx-main-menu-max-width: min(100dvw, 384px);
   }
 }
 
-@include utils.theme-selector(dark) {
-  --odx-main-menu-background-color: var(--cyan-50);
-  --odx-main-menu-text-color: var(--black);
-
-  .odx-main-menu {
-    --odx-c-focus-inner: var(--cyan-50);
-  }
-}
-
 .odx-main-menu {
-  --odx-c-focus-inner: var(--blue-700);
-
+  --odx-c-link-disabled: var(--odx-color-foreground-disabled-on-brand);
   --odx-area-header-title-color: var(--odx-main-menu-text-color);
   --odx-area-header-subtitle-color: var(--odx-main-menu-text-color);
 
   &__inner {
-    @include motion.transition(transform);
-
-    background-color: var(--odx-main-menu-background-color);
+    background-color: var(--odx-color-background-brand);
     box-shadow: var(--odx-v-box-shadow-layer-1);
     color: var(--odx-main-menu-text-color);
     display: grid;
@@ -45,9 +28,11 @@
     max-height: 100dvh;
     max-width: var(--odx-main-menu-max-width);
     transform: translateX(-100%);
+    transition: var(--odx-motion-transition-default);
     transition-behavior: allow-discrete;
+    transition-property: transform, overlay;
     width: 100%;
-    z-index: var(--odx-v-layer-6);
+    z-index: var(--odx-z-level-topmost);
 
     &::backdrop {
       backdrop-filter: blur(var(--odx-v-backdrop-blur));
@@ -66,8 +51,8 @@
   }
 
   &__actions {
-    @include dimensions.height(2);
-    @include dimensions.margin-x(0.5);
+    block-size: var(--odx-control-height-lg);
+    margin-inline: var(--odx-spacing-75);
   }
 
   &__header,
@@ -86,15 +71,14 @@
     --odx-v-scrollbar-thumb-color: var(--blue-400);
     --odx-v-scrollbar-thumb-color-hover: var(--blue-500);
 
-    @include dimensions.padding-x(0.5);
-    @include dimensions.padding-y(math.div(2, 24));
-    @include dimensions.margin(1, top);
-
     display: flex;
     flex-direction: column;
-    max-width: calc(var(--odx-main-menu-max-width) + dimensions.get-size(2));
-    min-height: dimensions.get-size(5);
+    margin-block-start: var(--odx-spacing-150);
+    max-width: calc(var(--odx-main-menu-max-width) + var(--odx-size-300));
+    min-block-size: calc(var(--odx-size-600) + var(--odx-spacing-150));
     overflow: auto;
+    padding-block: var(--odx-spacing-12);
+    padding-inline: var(--odx-size-75);
 
     > * {
       flex: 0 0 auto;
@@ -103,42 +87,45 @@
 
   &__info {
     @extend .odx-text;
-    @include dimensions.padding-x(1);
-    @include dimensions.padding-y(0.5);
 
-    column-gap: dimensions.get-size(1);
+    column-gap: var(--odx-spacing-150);
     display: flex;
     flex-wrap: wrap;
+    padding-block: var(--odx-size-75);
+    padding-inline: var(--odx-size-150);
 
     @include breakpoints.up(tablet) {
-      @include dimensions.padding-y(1);
+      padding-block: var(--odx-size-250);
     }
   }
 
   &__footer {
-    @include dimensions.line-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: dimensions.get-size(0.5);
+    gap: var(--odx-spacing-75);
     grid-template-columns: 1fr auto;
+    line-height: var(--odx-spacing-150);
+    padding-block-end: calc(var(--odx-spacing-100) * 2);
+    padding-block-start: var(--odx-spacing-100);
+    padding-inline: var(--odx-size-150);
     user-select: none;
 
     > .odx-text {
-      @include dimensions.line-height(math.div(12, 24));
-
+      line-height: var(--odx-typography-line-height-text-sm);
       opacity: 0.3;
       word-wrap: break-word;
     }
   }
 
   .odx-link {
+    &:hover {
+      text-decoration: none;
+    }
+
     &:visited,
     &:hover {
-      color: var(--odx-c-link);
+      color: var(--odx-color-foreground-inverse-static);
     }
   }
 }

package/scss/components/mainfilter-group.component.scss

@@ -1,15 +1,12 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/typography';
 @use '../abstract/utils';
-@use '../abstract/motion';
 
 @include utils.theme-selector(dark) {
   .odx-mainfilter-group {
     --odx-input-control-outline-color: var(--blue-900);
     --odx-input-control-outline-color-hover: var(--blue-900);
     --odx-c-highlight: var(--blue-900);
-    --odx-c-highlight-text: var(--white);
+    --odx-c-highlight-text: var(--odx-color-foreground-inverse-static);
     --odx-c-focus-outline: var(--cyan-800);
     --odx-c-focus: var(--focus-bg);
   }
@@ -27,6 +24,7 @@
   --odx-c-focus-outline: var(--cyan-700);
   --odx-c-focus: var(--cyan-50);
   --odx-c-highlight-active: var(--odx-c-focus-outline);
+  --main-filter-label-padding: 0 var(--odx-spacing-12) var(--odx-border-width-thin);
 
   .odx-form-field {
     flex: 0;
@@ -34,40 +32,38 @@
 
     &__control {
       .odx-form-field-control {
-        min-width: dimensions.get-size(math.div(150, 24));
+        min-width: var(--odx-size-1000);
 
         &.odx-spinbox {
-          min-width: dimensions.get-size(math.div(172, 24));
+          min-width: var(--odx-size-1000);
         }
       }
     }
 
     &__label {
-      @include dimensions.padding-x(math.div(3, 24));
-
       background-color: var(--odx-input-control-background-color);
-      line-height: dimensions.get-size(math.div(14, 24));
+      line-height: var(--odx-typography-line-height-text-xs);
       margin-top: 0;
+      padding: 0;
       position: absolute;
       right: 0;
-      right: dimensions.get-size(math.div(8, 24));
-      top: dimensions.get-size(math.div(12, 24));
+      right: var(--odx-spacing-50);
+      top: var(--odx-spacing-75);
       z-index: 1;
     }
 
     &:has(.odx-spinbox) {
       .odx-form-field__label {
-        right: dimensions.get-size(math.div(36, 24));
+        right: var(--odx-size-225);
       }
     }
 
     &-label {
-      @include dimensions.padding-y(math.div(2, 24));
-
-      border-radius: var(--odx-v-border-radius-controls);
+      border-radius: var(--odx-border-radius-control);
       display: inline-block;
-      font-size: dimensions.get-size(math.div(10, 24));
+      font-size: var(--odx-typography-font-size-text-xs);
       line-height: 1;
+      padding: var(--main-filter-label-padding);
     }
 
     &__hint {
@@ -77,31 +73,31 @@
 
   .odx-button {
     @include utils.interactive();
-    @include motion.transition(box-shadow);
 
-    margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+    margin-top: var(--odx-size-125);
     outline-offset: -1px;
     outline-width: var(--odx-v-outline-width);
     overflow: visible;
     position: relative;
+    transition: var(--odx-motion-transition-default);
+    transition-property: box-shadow;
 
     &::before {
-      @include dimensions.padding-x(math.div(3, 24));
-      @include dimensions.padding-y(math.div(2, 24));
-      @include typography.prevent-text-overflow();
-
       background-color: var(--odx-input-control-background-color);
-      border-radius: var(--odx-v-border-radius-controls);
+      border-radius: var(--odx-border-radius-control);
       content: attr(label);
       display: inline-block;
-      font-size: dimensions.get-size(math.div(10, 24));
+      font-size: var(--odx-typography-font-size-text-xs);
       font-weight: var(--odx-typography-font-weight-normal);
       line-height: 1;
       margin-top: 0;
+      padding: var(--main-filter-label-padding);
       position: absolute;
-      right: dimensions.get-size(math.div(8, 24));
-      top: dimensions.get-size(math.div(-7, 24));
+      right: var(--odx-spacing-50);
+      top: var(--odx-spacing-negative-50);
       z-index: 1;
+
+      @include typography.prevent-text-overflow();
     }
   }
 
@@ -143,7 +139,7 @@
     }
 
     .odx-button {
-      margin-top: 0 !important;
+      margin: 0 !important;
       outline: none;
 
       &::before {

package/scss/components/menu.component.scss

@@ -1,16 +1,12 @@
-@use '../abstract/dimensions';
-@use 'sass:math';
-
 .odx-menu {
   display: block;
 
   > .odx-action-group {
-    @include dimensions.padding-y(math.div(2, 24));
-
     display: flex;
     flex-direction: column;
     height: auto;
     margin: 0;
+    padding-block: var(--odx-spacing-12);
 
     > .odx-button {
       justify-content: flex-start;
@@ -20,12 +16,12 @@
   }
 
   &__title:not(:empty) {
-    margin-bottom: dimensions.get-size(math.div(12, 24));
+    margin-bottom: var(--odx-spacing-75);
   }
 
   &--tile {
-    $avatar-size: dimensions.get-size(math.div(48, 24));
-    $grid-gap: dimensions.get-size(math.div(8, 24));
+    $avatar-size: var(--odx-size-300);
+    $grid-gap: var(--odx-spacing-50);
 
     .odx-avatar {
       height: $avatar-size;
@@ -41,12 +37,12 @@
 
       .odx-button {
         flex-direction: column;
-        font-size: dimensions.get-size(math.div(13, 24));
+        font-size: calc(var(--odx-typography-base-size) * 0.8125);
         font-weight: var(--odx-typography-font-weight-normal);
         height: unset;
-        line-height: dimensions.get-size(math.div(20, 24));
+        line-height: var(--odx-size-125);
         padding: $grid-gap;
-        width: dimensions.get-size(math.div(100, 24));
+        width: calc(var(--odx-size-600) + var(--odx-spacing-25));
       }
     }
   }

package/scss/components/mirror-bar-chart.component.scss

@@ -1,7 +1,7 @@
 .odx-mirror-bar-chart {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+  gap: var(--odx-spacing-150);
   width: 100%;
 
   &__title {
@@ -25,7 +25,7 @@
   &__controls {
     display: flex;
     flex-direction: column;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    gap: var(--odx-spacing-75);
   }
 }
 

package/scss/components/modal.component.scss

@@ -1,23 +1,18 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/breakpoints';
-@use '../abstract/motion';
-@use '../abstract/typography';
-@use '../abstract/utils';
 
-$modal-padding: math.div(12, 24);
+$modal-padding: var(--odx-spacing-75);
 
 .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)};
-  --odx-modal-margin-bottom: #{dimensions.get-size(0.5)};
+  --odx-modal-margin-y: #{calc(var(--odx-vertical-rythm-base-size) * 2)};
+  --odx-modal-margin-x: var(--odx-spacing-50);
+  --odx-modal-max-width: calc(var(--odx-layout-width-lg) * 1.5);
+  --odx-modal-margin-bottom: var(--odx-spacing-75);
 
   $root: &;
 
   background: transparent;
   border: 0;
-  border-radius: var(--odx-v-border-radius);
+  border-radius: var(--odx-border-radius-md);
   box-shadow: var(--odx-v-box-shadow-layer-2);
   color: var(--odx-c-text);
   margin-top: var(--odx-modal-margin-y);
@@ -27,10 +22,10 @@ $modal-padding: math.div(12, 24);
 
   &::backdrop,
   &:modal {
-    @include motion.transition(opacity visibility overlay transform);
-
     opacity: 0;
+    transition: var(--odx-motion-transition-default);
     transition-behavior: allow-discrete;
+    transition-property: opacity, visibility, overlay, transform;
   }
 
   &::backdrop {
@@ -55,11 +50,11 @@ $modal-padding: math.div(12, 24);
     }
 
     &[open]:modal:not(#{$root}--sidesheet) {
-      transform: translateY(#{dimensions.get-size(math.div(8, 24))});
+      transform: translateY(var(--odx-spacing-50));
     }
 
     &[open]:modal#{$root}--sidesheet {
-      transform: translateX(#{dimensions.get-size(math.div(8, 4))});
+      transform: translateX(var(--odx-size-300));
     }
   }
 
@@ -75,24 +70,28 @@ $modal-padding: math.div(12, 24);
     }
 
     &[open]:modal:not(#{$root}--sidesheet) {
-      transform: translateY(#{dimensions.get-size(math.div(8, 24))});
+      transform: translateY(var(--odx-spacing-50));
     }
 
     &[open]:modal#{$root}--sidesheet {
-      transform: translateX(#{dimensions.get-size(math.div(8, 4))});
+      transform: translateX(var(--odx-size-300));
     }
   }
 
   &.odx-modal--xsmall {
-    --odx-modal-max-width: #{dimensions.get-size(15)};
+    --odx-modal-max-width: calc(var(--odx-layout-width-xs) * 1.7);
+  }
+
+  &.odx-modal--small {
+    --odx-modal-max-width: calc(var(--odx-layout-width-sm) * 2);
   }
 
   &.odx-modal--medium {
-    --odx-modal-max-width: #{dimensions.get-size(30)};
+    --odx-modal-max-width: calc(var(--odx-layout-width-md) * 1.5);
   }
 
   &.odx-modal--large {
-    --odx-modal-max-width: #{dimensions.get-size(50)};
+    --odx-modal-max-width: calc(var(--odx-layout-width-lg) * 1.5);
   }
 
   &--sidesheet {
@@ -108,7 +107,7 @@ $modal-padding: math.div(12, 24);
     }
 
     @include breakpoints.up(phone) {
-      margin-right: dimensions.get-size(0.5);
+      margin-right: var(--odx-spacing-75);
     }
 
     @include breakpoints.down(phone) {
@@ -117,19 +116,18 @@ $modal-padding: math.div(12, 24);
   }
 
   @include breakpoints.up(phone) {
-    --odx-modal-margin-y: #{dimensions.get-size(3)};
-    --odx-modal-margin-x: #{dimensions.get-size(1)};
-    --odx-modal-margin-bottom: #{dimensions.get-size(1)};
+    --odx-modal-margin-y: #{calc(var(--odx-vertical-rythm-base-size) * 3)};
+    --odx-modal-margin-x: var(--odx-spacing-150);
+    --odx-modal-margin-bottom: var(--odx-spacing-150);
   }
 
   &__container {
-    @include dimensions.padding-x(1);
-
     background-color: var(--odx-c-background-content);
-    border-radius: var(--odx-v-border-radius);
+    border-radius: var(--odx-border-radius-md);
     display: flex;
     flex-direction: column;
     max-height: calc(100dvh - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+    padding-inline: var(--odx-size-150);
 
     #{$root}--with-component & > * {
       display: contents;
@@ -143,26 +141,24 @@ $modal-padding: math.div(12, 24);
   }
 
   &__header {
-    @include dimensions.min-height(2.5);
-    @include dimensions.padding($modal-padding, top);
+    min-block-size: calc(var(--odx-control-height-lg) + var(--odx-spacing-75));
+    padding-block-start: $modal-padding;
 
     > .odx-area-header {
-      @include dimensions.margin-x(-0.5);
-
       flex: 1 1 auto;
+      margin-inline: var(--odx-spacing-negative-75);
       max-width: 100%;
 
       @include breakpoints.up(phone) {
-        @include dimensions.margin(-1, left);
+        margin-inline-start: calc(var(--odx-spacing-negative-75) * 2);
       }
     }
   }
 
   &__content {
-    @include dimensions.padding-y($modal-padding);
-
     display: block;
     overflow: auto;
+    padding-block: $modal-padding;
 
     #{$root}--sidesheet & {
       flex: 1;
@@ -170,11 +166,10 @@ $modal-padding: math.div(12, 24);
   }
 
   &__footer {
-    @include dimensions.height(2.5);
-    @include dimensions.padding($modal-padding, bottom);
-
-    gap: dimensions.get-size(math.div(16, 24));
+    block-size: calc(var(--odx-control-height-lg) + var(--odx-spacing-75));
+    gap: var(--odx-spacing-100);
     margin-left: auto;
+    padding-block-end: $modal-padding;
 
     > .odx-button {
       display: flex;
@@ -185,21 +180,20 @@ $modal-padding: math.div(12, 24);
 .odx-modal-hero {
   $variants: success, danger, confirmation;
 
-  @include dimensions.min-height(2.5);
-  @include dimensions.padding(0.5, top);
-
   display: flex;
   flex-direction: column;
+  min-block-size: calc(var(--odx-control-height-lg) + var(--odx-spacing-75));
+  padding-block-start: var(--odx-spacing-75);
   position: relative;
 
   &__dismiss {
     position: absolute;
     right: 0;
-    top: dimensions.get-size(0.5);
+    top: var(--odx-spacing-75);
   }
 
   &__icon {
-    margin: dimensions.get-size(0.5) auto auto;
+    margin: var(--odx-spacing-75) auto auto;
   }
 
   &__title {

package/scss/components/multi-axis-box-plot.component.scss

@@ -10,7 +10,7 @@
   &__title {
     align-items: center;
     display: flex;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+    gap: var(--odx-spacing-37);
   }
 
   &__label {
@@ -25,7 +25,7 @@
     height: calc(var(--odx-vertical-rythm-base-size) * 2.0312);
     margin: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
     position: relative;
-    z-index: var(--odx-v-layer-1);
+    z-index: var(--odx-z-level-base);
 
     canvas {
       height: 100% !important;

package/scss/components/navigation-back.component.scss

@@ -1,14 +1,13 @@
 @use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 .odx-navigation-back {
-  border-radius: var(--odx-v-border-radius-controls);
-  height: dimensions.get-size(1.5);
-  width: dimensions.get-size(1.5);
+  block-size: var(--odx-control-height-md);
+  border-radius: var(--odx-border-radius-control);
+  inline-size: var(--odx-control-height-md);
+  transition: var(--odx-motion-transition-default);
+  transition-property: background-color;
 
-  @include motion.transition(background-color);
   @include utils.center-content(true);
   @include utils.interactive();