@odx/ui 5.5.0 → 6.0.0

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

package/scss/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/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/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/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/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/layout/_application.scss

@@ -1,5 +1,4 @@
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 @use '../components/icon.component';
 @use './typography';
 
@@ -39,13 +38,14 @@
     flex: 1 1 0;
     overflow-x: hidden;
     overflow-y: auto;
+    padding-block-end: var(--odx-spacing-75);
+    padding-inline: var(--odx-spacing-75);
     scroll-behavior: smooth;
 
-    @include dimensions.padding(0.5, (bottom, left, right));
-
     @include breakpoints.up(phone) {
-      @include dimensions.padding(1, (bottom, left, right));
-      @include dimensions.padding(0.5, top);
+      padding-block-end: var(--odx-spacing-150);
+      padding-block-start: var(--odx-spacing-75);
+      padding-inline: var(--odx-spacing-150);
     }
   }
 }

package/scss/layout/_base.scss

@@ -30,7 +30,7 @@ body,
   ::-webkit-scrollbar-thumb {
     background-clip: content-box;
     background-color: var(--odx-v-scrollbar-thumb-color);
-    border-radius: var(--odx-v-border-radius);
+    border-radius: var(--odx-border-radius-md);
 
     &:hover {
       background-color: var(--odx-v-scrollbar-thumb-color-hover);

package/scss/layout/_description-list.scss

@@ -1,30 +1,24 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
-
 .odx-description-list {
-  $gap: dimensions.get-size(math.div(8, 24));
-
-  @include dimensions.margin-y(0.5);
-
-  column-gap: $gap;
+  column-gap: var(--odx-spacing-50);
   display: flex;
   flex: 0 0 100%;
   flex-wrap: wrap;
-  row-gap: calc(#{$gap} / 2);
+  margin-block: var(--odx-spacing-75);
+  row-gap: calc(var(--odx-spacing-50) / 2);
 
   dt,
   dd {
     align-items: flex-end;
     display: inline-flex;
-    flex: 0 0 calc(50% - #{$gap} / 2);
+    flex: 0 0 calc(50% - var(--odx-spacing-50) / 2);
   }
 
   dt {
-    @include typography.font-size(-1);
+    font-size: var(--odx-typography-font-size-text-sm);
   }
 
   dd {
-    @include typography.font-weight(medium);
+    font-weight: var(--odx-typography-font-weight-medium);
+    letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
   }
 }