@odx/ui 5.5.0 → 6.0.0

package/scss/components/form-field.component.scss

@@ -1,21 +1,15 @@
 @use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/typography';
 @use '../abstract/utils';
 
-$form-field-label-height: math.div(20, 24);
-$form-field-hint-height: math.div(16, 24);
-$form-field-inner-padding: math.div(8, 24);
-
 :root {
   --odx-form-field-hint-color: var(--gray-500);
 }
 
 .odx-form,
 .odx-form-group {
-  --odx-grid-gutter: #{dimensions.get-size(0.5)};
-  --odx-form-field-horizontal-label-width: #{dimensions.get-size(math.div(150, 24))};
+  --odx-grid-gutter: var(--odx-spacing-75);
+  --odx-form-field-horizontal-label-width: var(--odx-size-150);
 
   row-gap: 0;
 }
@@ -24,40 +18,41 @@ $form-field-inner-padding: math.div(8, 24);
   $root: &;
   $control-selector: '.odx-form-field-control';
 
-  @include dimensions.padding($form-field-label-height, top);
-
   color: var(--odx-input-control-color);
   display: flex;
   flex-direction: column;
+  padding-block-start: var(--odx-size-125);
   vertical-align: top;
 
+  --form-field-after-bg: transparent;
+
   &__label,
   &__info {
-    @include dimensions.padding-x($form-field-inner-padding);
-
     display: block;
     flex: 1 1 auto;
+    padding-inline: var(--odx-control-spacing-inline-lg);
   }
 
   &__prefix,
   &__suffix {
-    @include dimensions.height(1.5);
-    @include motion.transition(color);
     @include utils.vertical-center-content(true);
 
+    block-size: var(--odx-control-height-md);
     flex: 0 0 auto;
+    transition: var(--odx-motion-transition-default);
+    transition-property: color;
 
     #{$root}.is-disabled & {
-      color: var(--odx-input-control-color-disabled);
+      color: var(--odx-color-foreground-disabled-rest);
     }
   }
 
   &__prefix:not(:empty) {
-    @include dimensions.padding($form-field-inner-padding, left);
+    padding-inline-start: var(--odx-spacing-50);
   }
 
   &__suffix:not(:empty) {
-    @include dimensions.padding($form-field-inner-padding, right);
+    padding-inline-end: var(--odx-spacing-50);
   }
 
   &-label {
@@ -67,10 +62,9 @@ $form-field-inner-padding: math.div(8, 24);
   }
 
   &__label {
-    @include dimensions.line-height($form-field-label-height);
-    @include dimensions.margin(-$form-field-label-height, 'top');
-    @include typography.font-size(-1);
-
+    font-size: var(--odx-control-font-size-sm);
+    line-height: var(--odx-size-125);
+    margin-block-start: calc(var(--odx-spacing-negative-50) * 2 - var(--odx-spacing-25));
     user-select: none;
 
     #{$root}:not(#{$root}--horizontal, #{$root}--simple) & {
@@ -78,8 +72,7 @@ $form-field-inner-padding: math.div(8, 24);
     }
 
     &-is-required {
-      @include typography.font-size(0);
-
+      font-size: var(--odx-control-font-size-md);
       margin-left: 2px;
       vertical-align: top;
 
@@ -90,62 +83,77 @@ $form-field-inner-padding: math.div(8, 24);
   }
 
   &__control {
-    @include dimensions.min-height(1.5);
-    @include motion.transition(background-color color);
-    @include utils.focus-state($focus-within: true, $focus-within-selector: 'input');
-    @include utils.focus-state($focus-within: true, $focus-within-selector: 'textarea');
-    @include utils.focus-state($focus-within: true, $focus-within-selector: '.odx-select');
+    @include utils.focus-state(
+      $focus-within: true,
+      $focus-within-selector: (
+        'input',
+        'textarea',
+        '.odx-select',
+      )
+    ) {
+      &::after {
+        --form-field-after-bg: transparent;
+      }
+    }
 
     background-color: var(--odx-input-control-background-color);
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     display: flex;
+    min-block-size: var(--odx-control-height-md);
     outline-color: var(--odx-input-control-outline-color);
     outline-offset: calc(-1 * var(--odx-v-outline-width));
     outline-width: var(--odx-v-outline-width);
     overflow: hidden;
     position: relative;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
 
     &::after {
-      @include motion.transition(background-color);
-
-      background-color: transparent;
+      background-color: var(--form-field-after-bg);
       bottom: 0;
       content: '';
       display: block;
       height: 1px;
       left: 0;
       position: absolute;
+      transition: var(--odx-motion-transition-default);
+      transition-property: background-color;
       width: 100%;
-      z-index: var(--odx-v-layer-1);
+      z-index: var(--odx-z-level-foreground);
     }
 
     #{$control-selector} {
+      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);
       vertical-align: middle;
       width: 100%;
-
-      @include dimensions.padding-x($form-field-inner-padding);
-      @include typography.font-weight(medium);
     }
 
     #{$control-selector},
     input {
       &::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;
       }
     }
 
-    > textarea {
-      @include dimensions.padding-y(0.25);
+    .is-disabled & {
+      input::placeholder {
+        color: var(--odx-input-control-color-disabled);
+      }
+    }
 
-      height: dimensions.get-size(3);
+    > textarea {
+      block-size: calc(var(--odx-size-300) + var(--odx-spacing-150));
+      padding-block: var(--odx-control-spacing-md);
       resize: vertical;
     }
 
     > select {
-      border-right: dimensions.get-size(0.25) solid transparent;
+      border-right: var(--odx-spacing-37) solid transparent;
     }
 
     &:hover {
@@ -155,14 +163,14 @@ $form-field-inner-padding: math.div(8, 24);
 
     #{$root}.has-error & {
       background-color: var(--odx-input-control-background-color-error);
-      outline-color: var(--odx-input-control-outline-color-error);
+      outline-color: var(--odx-palette-red-20);
 
       &:hover {
         background-color: var(--odx-input-control-background-color);
       }
 
       &::after {
-        background-color: var(--odx-input-control-color-error);
+        --form-field-after-bg: var(--odx-input-control-color-error);
       }
     }
 
@@ -188,7 +196,7 @@ $form-field-inner-padding: math.div(8, 24);
 
     #{$root}.is-disabled & {
       background-color: var(--odx-input-control-background-color-disabled);
-      color: var(--odx-input-control-color-disabled);
+      color: var(--odx-color-foreground-disabled-rest);
       outline-color: var(--odx-input-control-outline-color-disabled);
 
       #{$control-selector} {
@@ -208,20 +216,21 @@ $form-field-inner-padding: math.div(8, 24);
   }
 
   &__info {
-    @include dimensions.min-height($form-field-hint-height);
-    @include dimensions.line-height($form-field-hint-height);
-    @include motion.transition(opacity);
-    @include typography.font-size(-2);
-
     color: var(--odx-form-field-hint-color);
+    font-size: var(--odx-typography-font-size-text-xs);
+    line-height: var(--odx-spacing-100);
+    margin: 0;
+    min-height: var(--odx-spacing-100);
+    padding: 0;
     text-align: right;
+    transition: var(--odx-motion-transition-default);
+    transition-property: opacity;
   }
 
   &--simple {
+    margin-block: var(--odx-spacing-37);
     padding: 0;
 
-    @include dimensions.margin-y(0.25);
-
     #{$root}__label,
     #{$root}__info {
       display: none;
@@ -229,15 +238,13 @@ $form-field-inner-padding: math.div(8, 24);
   }
 
   &--horizontal {
-    @include dimensions.padding(math.div(8, 24), top);
-
     flex-direction: row;
+    padding-block-start: var(--odx-spacing-50);
 
     #{$root}__label {
-      @include dimensions.margin(0.25, top);
-
-      flex: 0 0 var(--odx-form-field-horizontal-label-width);
-      max-width: var(--odx-form-field-horizontal-label-width);
+      flex: 0 0 var(--odx-size-900);
+      margin-block-start: var(--odx-spacing-37);
+      max-width: var(--odx-size-900);
       padding-left: 0;
     }
 

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

@@ -1,10 +1,3 @@
-@use 'sass:math';
-@use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/utils';
-@use '../abstract/typography';
-@use '../layout/typography' as *;
-
 .odx-header-navigation {
   $root: &;
 
@@ -12,9 +5,8 @@
   border-block-start: 1px solid var(--odx-c-separator);
   display: block;
   margin-block-start: -1px;
-
-  @include dimensions.padding-x(0.5);
-  @include dimensions.padding-y(0.25);
+  padding-block: var(--odx-control-spacing-md);
+  padding-inline: var(--odx-size-125);
 
   &__inner {
     flex-wrap: wrap;

package/scss/components/header.component.scss

@@ -1,21 +1,19 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
 @use '../abstract/typography';
 @use '../layout/typography' as *;
 
 .odx-header {
-  @include dimensions.padding(math.div(20, 24), 'inline-start');
-  @include dimensions.padding(0.5, 'inline-end');
-  @include dimensions.min-height(2);
   @include utils.vertical-center-content();
 
   background-color: var(--odx-c-background-content);
+  min-block-size: var(--odx-control-height-lg);
+  padding-inline-end: var(--odx-spacing-75);
+  padding-inline-start: var(--odx-size-125);
 
   .odx-main-menu-button {
-    margin-inline-end: dimensions.get-size(0.5);
-    margin-inline-start: dimensions.get-size(-1 * math.div(1, 3));
+    margin-inline-end: var(--odx-spacing-75);
+    margin-inline-start: var(--odx-spacing-negative-50);
   }
 
   > * {
@@ -25,7 +23,7 @@
 
   &__content {
     &:has(&-container:not(:empty)) {
-      @include dimensions.padding-x(0.5);
+      padding-inline: var(--odx-size-125);
     }
 
     margin-inline-end: auto;
@@ -44,7 +42,7 @@
 
   &__title {
     @extend .odx-heading;
-    @extend .odx-heading-6;
+    @extend .odx-heading-5;
     @include typography.prevent-text-overflow();
 
     overflow: hidden;
@@ -52,13 +50,13 @@
 
   .odx-action-group:not(:last-child) {
     border-inline-end: 1px solid var(--odx-c-separator);
-    margin-inline-end: dimensions.get-size(0.5);
-    padding-inline-end: dimensions.get-size(0.5);
+    margin-inline-end: var(--odx-spacing-75);
+    padding-inline-end: var(--odx-spacing-75);
   }
 
   &:has(> .odx-heading) > .odx-logo {
     display: none;
-    margin-inline-end: dimensions.get-size(0.5);
+    margin-inline-end: var(--odx-spacing-75);
 
     @include breakpoints.up(tablet) {
       display: block;
@@ -67,7 +65,7 @@
 
   .odx-search-bar {
     &:not(:last-child) {
-      margin-inline-end: dimensions.get-size(0.5);
+      margin-inline-end: var(--odx-spacing-75);
     }
   }
 }

package/scss/components/icon.component.scss

@@ -1,16 +1,16 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/utils';
-
-$icon-sizes: (small math.div(16, 24) 1, large math.div(32, 24) 2, xlarge math.div(48, 24) 2);
+$icon-sizes: (
+  small: var(--odx-size-100),
+  large: var(--odx-size-200),
+  xlarge: var(--odx-size-300),
+);
 
 .odx-icon {
   flex: 0 0 auto;
-  font-size: dimensions.get-size(1);
+  font-size: var(--odx-size-150);
 
-  @each $size, $size_factor, $factor in $icon-sizes {
+  @each $size, $font-size in $icon-sizes {
     &--#{$size} {
-      font-size: dimensions.get-size($size_factor);
+      font-size: $font-size;
     }
   }
 

package/scss/components/inline-message.component.scss

@@ -1,20 +1,15 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
-
 .odx-inline-message {
-  --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);
 
   $variants: default, warning, danger, success;
 
-  @include dimensions.padding-x(math.div(10, 24));
-  @include dimensions.padding-y(math.div(12, 24));
-
   display: flex;
-  gap: dimensions.get-size(math.div(10, 24));
+  gap: var(--odx-spacing-75);
+  padding-block: var(--odx-spacing-75);
+  padding-inline: calc(var(--odx-spacing-50) + var(--odx-spacing-12));
 
   @each $variant in $variants {
     &--#{$variant} {
@@ -23,12 +18,11 @@
   }
 
   &--danger {
-    color: var(--red-700);
+    color: var(--odx-color-foreground-danger-rest);
   }
 
   &__content {
-    @include typography.font-size(-1);
-
+    font-size: var(--odx-typography-font-size-text-sm);
     overflow: hidden;
   }
 }

package/scss/components/line-timeframes-chart.component.scss

@@ -1,7 +1,7 @@
 .odx-line-timeframes-chart {
   .odx-line-timeframes-chart__container {
     display: flex;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+    gap: var(--odx-spacing-150);
     width: 100%;
   }
 
@@ -22,18 +22,18 @@
     &-items {
       display: flex;
       flex-direction: column;
-      gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+      gap: var(--odx-spacing-75);
     }
 
     &-item {
       display: flex;
       flex-direction: column;
-      gap: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+      gap: var(--odx-spacing-25);
 
       &-header {
         align-items: center;
         display: flex;
-        gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+        gap: var(--odx-spacing-37);
       }
 
       &-dot {

package/scss/components/link.component.scss

@@ -1,16 +1,16 @@
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 .odx-link {
-  @include motion.transition(color background-color);
-  @include utils.interactive($with-box-shadow: false);
-
-  border-radius: var(--odx-v-border-radius-controls);
+  border-radius: var(--odx-border-radius-control);
   color: var(--odx-c-link);
   padding: 0 calc(var(--odx-v-outline-width-bold) + var(--odx-v-outline-box-shadow-width));
   position: relative;
+  transition: var(--odx-motion-transition-default);
+  transition-property: color, background-color;
   user-select: auto;
 
+  @include utils.interactive($with-box-shadow: false);
+
   &:hover {
     color: var(--odx-c-link-hover);
     text-decoration: underline;

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

@@ -1,26 +1,24 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/motion';
-@use '../abstract/typography';
 
 .odx-list-item {
+  @include utils.interactive();
+  @include utils.vertical-center-content();
+
   $root: &;
   $muted-selector: #{$root}--muted;
   $variants: danger, warning;
 
   --separator-color: var(--odx-c-separator);
 
-  @include dimensions.padding-x(math.div(8, 24));
-  @include dimensions.line-height(2, 1);
-  @include motion.transition(border-bottom-color background-color color box-shadow);
-  @include utils.interactive();
-  @include utils.vertical-center-content();
-
   background-color: transparent;
-  border-radius: var(--odx-v-border-radius-controls);
-  gap: dimensions.get-size(math.div(8, 24));
+  border-radius: var(--odx-border-radius-control);
+  gap: var(--odx-spacing-50);
+  line-height: var(--odx-typography-line-height-text-lg);
+  padding-block: var(--odx-spacing-75);
+  padding-inline: var(--odx-control-spacing-inline-lg);
   position: relative;
+  transition: var(--odx-motion-transition-default);
+  transition-property: border-bottom-color, background-color, color, box-shadow;
 
   > [odxListSuffix],
   > [odxListItemSuffix] {
@@ -33,21 +31,21 @@
   }
 
   &::before {
-    @include motion.transition(border-color);
-
     border-bottom: 1px solid var(--separator-color);
     content: '';
     display: block;
     position: absolute;
-    right: dimensions.get-size(math.div(8, 24));
+    right: var(--odx-spacing-50);
     top: 0;
-    width: calc(100% - #{dimensions.get-size(math.div(16, 24))});
-    z-index: var(--odx-v-layer-1);
+    transition: var(--odx-motion-transition-default);
+    transition-property: border-color;
+    width: calc(100% - var(--odx-spacing-100));
+    z-index: var(--odx-z-level-base);
   }
 
   &:hover,
   &:focus-visible {
-    z-index: var(--odx-v-layer-2);
+    z-index: var(--odx-z-level-interactive);
     &:not(#{$muted-selector}) {
       --separator-color: transparent !important;
     }

package/scss/components/list.component.scss

@@ -1,6 +1,4 @@
-@use 'sass:math';
 @use 'sass:selector';
-@use '../abstract/dimensions';
 
 .odx-list {
   display: block;
@@ -9,7 +7,7 @@
 
   @for $i from 1 through 10 {
     #{$self} .odx-list-item {
-      @include dimensions.padding(math.div(8, 24) + ($i * math.div(32, 24)), left);
+      padding-inline-start: calc(var(--odx-spacing-50) + #{$i} * var(--odx-spacing-100) * 2);
 
       &:first-child {
         --separator-color: var(--odx-c-separator);

package/scss/components/loading-spinner.component.scss

@@ -1,5 +1,3 @@
-@use 'sass:math';
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 :root {
@@ -27,14 +25,14 @@
     scroll-behavior: contain;
     top: 0;
     width: 100%;
-    z-index: var(--odx-v-layer-2);
+    z-index: var(--odx-z-level-overlay);
   }
 
   &__backdrop {
-    @include motion.transition(background-color);
-
     background-color: transparent;
     opacity: 0.8;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color;
   }
 
   .odx-circular-progress {
@@ -44,7 +42,7 @@
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    z-index: var(--odx-v-layer-3);
+    z-index: var(--odx-z-level-topmost);
 
     &__indicator {
       stroke: var(--odx-c-primary);

package/scss/components/logo.component.scss

@@ -1,20 +1,14 @@
-@use '../abstract/dimensions';
 @use '../abstract/utils';
 
 :root {
   --odx-logo-color: var(--odx-c-primary);
-  --odx-logo-color-inverse: var(--odx-c-text-inverse);
-}
-
-@include utils.theme-selector(dark) {
-  --odx-logo-color: var(--odx-c-text-inverse);
+  --odx-logo-color-inverse: var(--odx-palette-white);
 }
 
 .odx-logo {
-  @include dimensions.height(1);
-
   aspect-ratio: 2.5 / 1;
   background-color: var(--odx-logo-color);
+  block-size: var(--odx-spacing-150);
   display: inline-block;
   mask-image: url('../assets/images/logo.svg');
   mask-repeat: no-repeat;
@@ -24,10 +18,12 @@
   }
 
   &--medium {
-    @include dimensions.height(2, 1.5);
+    block-size: var(--odx-control-height-md);
+    margin-block: var(--odx-spacing-37);
   }
 
   &--large {
-    @include dimensions.height(3, 2.5);
+    block-size: calc(var(--odx-control-height-lg) + var(--odx-spacing-75));
+    margin-block: var(--odx-spacing-37);
   }
 }