@odx/ui 5.5.0 → 6.0.1

package/scss/components/notification-center.component.scss

@@ -1,23 +1,19 @@
-@use '../abstract/dimensions';
-@use '../abstract/typography';
-
 .odx-notification-center-overlay {
-  --odx-cdk-connected-overlay-min-height-modified: #{dimensions.get-size(9)};
-  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), #{dimensions.get-size(15)});
+  --odx-cdk-connected-overlay-min-height-modified: #{calc(var(--odx-vertical-rythm-base-size) * 9)};
+  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), #{calc(var(--odx-vertical-rythm-base-size) * 15)});
 }
 
 .odx-notification-center {
-  --odx-notification-center-padding-x: #{dimensions.get-size(0.5)};
-  --odx-notification-center-padding-y: #{dimensions.get-size(0.5)};
-  --odx-notification-center-header-height: #{dimensions.get-size(2)};
-  --odx-notification-center-footer-height: #{dimensions.get-size(2.5)};
+  --odx-notification-center-padding-x: var(--odx-spacing-75);
+  --odx-notification-center-padding-y: var(--odx-spacing-75);
+  --odx-notification-center-header-height: #{calc(var(--odx-vertical-rythm-base-size) * 2)};
+  --odx-notification-center-footer-height: #{calc(var(--odx-vertical-rythm-base-size) * 2.5)};
 
   background-color: var(--odx-c-background-content);
 
   &__header,
   &__footer {
     background-color: inherit;
-    border-radius: var(--odx-v-border-radius);
     left: 0;
     margin-right: var(--odx-notification-center-padding-x);
     padding-left: var(--odx-notification-center-padding-x);
@@ -29,13 +25,13 @@
   &__header {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    font-size: var(--odx-typography-font-size-text-md);
+    font-weight: var(--odx-typography-font-weight-semibold);
     height: var(--odx-notification-center-header-height);
+    letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
     line-height: var(--odx-notification-center-header-height);
     top: 0;
     user-select: none;
-
-    @include typography.font-size(0);
-    @include typography.font-weight(semibold);
   }
 
   &__content {
@@ -44,16 +40,16 @@
     padding-top: calc(var(--odx-notification-center-header-height) - var(--odx-notification-center-padding-y));
 
     > .odx-list-item {
-      border-radius: 0;
+      border-radius: var(--odx-border-radius-none);
 
       &:first-child {
-        border-top-left-radius: var(--odx-v-border-radius-controls);
-        border-top-right-radius: var(--odx-v-border-radius-controls);
+        border-top-left-radius: var(--odx-border-radius-control);
+        border-top-right-radius: var(--odx-border-radius-control);
       }
 
       &:last-child {
-        border-bottom-left-radius: var(--odx-v-border-radius-controls);
-        border-bottom-right-radius: var(--odx-v-border-radius-controls);
+        border-bottom-left-radius: var(--odx-border-radius-control);
+        border-bottom-right-radius: var(--odx-border-radius-control);
       }
     }
   }

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

@@ -1,27 +1,23 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
 
 .odx-notification-item {
   $root: &;
 
-  column-gap: dimensions.get-size(math.div(16, 24));
+  column-gap: var(--odx-spacing-100);
   display: grid;
   grid-template-areas: 'avatar title actions' '. description .';
   grid-template-columns: auto 1fr auto;
   grid-template-rows: auto auto;
-  min-width: dimensions.get-size(10);
-
-  @include dimensions.padding-x(0.25);
+  min-width: calc(var(--odx-vertical-rythm-base-size) * 10);
+  padding-inline: var(--odx-control-spacing-inline-md);
 
   @include breakpoints.up(phone) {
-    max-width: dimensions.get-size(16);
+    max-width: calc(var(--odx-vertical-rythm-base-size) * 16);
   }
 
   &__title,
   &__description {
-    @include dimensions.line-height(1);
+    line-height: var(--odx-typography-line-height-text-md);
   }
 
   &__title {
@@ -30,9 +26,8 @@
   }
 
   &__description {
+    font-size: var(--odx-typography-font-size-text-xs);
     grid-area: description;
-
-    @include typography.font-size(-2);
   }
 
   &__actions {

package/scss/components/option.component.scss

@@ -1,16 +1,12 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
-
 .odx-option {
-  @include dimensions.line-height(1.5, 1);
-  @include dimensions.margin(math.div(4, 24), bottom);
-  @include dimensions.padding-x(0.5);
-  @include motion.transition(background-color color);
-  @include typography.font-weight(normal);
-
-  border-radius: var(--odx-v-border-radius-controls);
+  border-radius: var(--odx-border-radius-control);
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  line-height: var(--odx-typography-line-height-text-lg);
+  margin-block-end: var(--odx-spacing-25);
+  padding: calc(var(--odx-spacing-12) * 3) var(--odx-spacing-75);
+  transition: var(--odx-motion-transition-default);
+  transition-property: background-color, color;
   user-select: none;
 
   &:not(.is-disabled) {
@@ -23,7 +19,7 @@
 
   &.is-active,
   &:hover:not(.is-disabled) {
-    background-color: var(--gray-50);
+    background-color: var(--odx-color-background-transparent-hover);
   }
 
   &.is-selected {
@@ -35,7 +31,7 @@
   }
 
   > .odx-checkbox {
-    @include dimensions.margin(math.div(8, 24), right);
+    margin-inline-end: var(--odx-spacing-50);
   }
 
   &--select-all {
@@ -48,7 +44,7 @@
       height: 0;
       left: 0;
       position: absolute;
-      top: calc(100% + #{dimensions.get-size(math.div(4, 24))});
+      top: calc(100% + var(--odx-spacing-25));
       width: 100%;
     }
   }

package/scss/components/paginator.component.scss

@@ -1,5 +1,4 @@
 @use 'sass:math';
-@use '../abstract/dimensions';
 
 .odx-paginator {
   align-items: center;
@@ -7,21 +6,19 @@
   justify-content: flex-end;
 
   &:has(.odx-paginator__summary) {
-    grid-gap: dimensions.get-size(1.5);
+    grid-gap: var(--odx-size-225);
     grid-template-columns: auto auto;
   }
 
   &__navigation {
     align-items: center;
     display: flex;
-
-    @include dimensions.margin-y(math.div(8, 24));
+    margin-block: var(--odx-spacing-50);
   }
 
   .odx-action-group {
-    @include dimensions.height(1);
-
-    grid-gap: dimensions.get-size(0.5);
+    grid-gap: var(--odx-spacing-75);
+    min-block-size: var(--odx-spacing-150);
   }
 
   .odx-button {
@@ -29,6 +26,6 @@
   }
 
   &__range {
-    @include dimensions.margin-x(math.div(16, 24));
+    margin-inline: var(--odx-spacing-100);
   }
 }

package/scss/components/progress.component.scss

@@ -1,7 +1,3 @@
-@use 'sass:math';
-@use '../abstract/motion';
-@use '../abstract/dimensions';
-
 @keyframes progress-indeterminate-animation {
   from {
     transform: translateX(-100%);
@@ -13,18 +9,16 @@
 }
 
 .odx-progress {
-  @include dimensions.height(1, math.div(4, 24));
-
   background: var(--gray-100);
+  block-size: var(--odx-spacing-25);
   display: block;
+  margin-block: calc(var(--odx-spacing-75) - var(--odx-spacing-12));
   outline: 1px solid var(--gray-200);
   outline-offset: -1px;
   overflow: hidden;
   position: relative;
 
   &__indicator {
-    @include motion.transition(transform);
-
     background-color: var(--odx-c-highlight);
     display: block;
     height: 100%;
@@ -32,6 +26,8 @@
     position: absolute;
     top: 0;
     transform-origin: 0 0;
+    transition: var(--odx-motion-transition-default);
+    transition-property: transform;
     width: 100%;
   }
 

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

@@ -1,8 +1,4 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
 @use '../abstract/utils';
-@use '../abstract/motion';
 @use '../layout/typography' as *;
 
 .odx-radio-button {
@@ -20,21 +16,22 @@
   }
 
   &__label {
-    @include dimensions.line-height(1);
-    @include motion.transition(background-color color);
-    @include typography.font-size(0);
-
-    border-radius: dimensions.get-size(1);
+    border-radius: var(--odx-spacing-150);
     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;
 
     #{$root}--with-label & {
-      border-bottom-right-radius: calc(2 * var(--odx-v-border-radius-controls));
-      border-top-right-radius: calc(2 * var(--odx-v-border-radius-controls));
+      border-bottom-right-radius: calc(2 * var(--odx-border-radius-control));
+      border-top-right-radius: calc(2 * var(--odx-border-radius-control));
     }
 
     #{$root}.is-disabled & {
@@ -60,27 +57,31 @@
   }
 
   &__indicator {
-    @include dimensions.container(1, math.div(20, 24));
-    @include motion.transition(background-color color border-color);
-    @include utils.center-content();
-
     background-color: var(--odx-control-background-color);
     border: transparent solid var(--odx-v-outline-width);
-    border-radius: 50%;
+    border-radius: var(--odx-border-radius-circle);
     box-shadow: inset 0 0 0 0 var(--odx-c-focus-inner);
     color: var(--odx-control-color-selected);
     flex: 0 0 auto;
+    height: var(--odx-size-125);
+    margin-block: var(--odx-spacing-12);
     outline: var(--odx-v-outline-width-bold) solid transparent;
     padding: 1px;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color, border-color;
+    width: var(--odx-size-125);
 
-    &::before {
-      @include dimensions.container(math.div(4, 24));
-      @include motion.transition(transform);
+    @include utils.center-content();
 
+    &::before {
       background-color: currentcolor;
-      border-radius: 50%;
+      border-radius: var(--odx-border-radius-circle);
       content: '';
+      height: var(--odx-size-25);
       transform: scale(0);
+      transition: var(--odx-motion-transition-default);
+      transition-property: transform;
+      width: var(--odx-size-25);
     }
 
     #{$root}:hover & {
@@ -127,10 +128,9 @@
   }
 
   &__content {
-    @include dimensions.margin(0.5, left);
-
     display: flex;
     flex-direction: column;
+    margin-inline-start: var(--odx-spacing-75);
     padding-left: 2px;
 
     &:empty {

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

@@ -1,14 +1,12 @@
-@use '../abstract/dimensions';
 
 .odx-radio-group {
-  @include dimensions.padding-y(0.5);
-
   align-items: flex-start;
   display: flex;
   flex-direction: column;
+  padding-block: var(--odx-size-125);
 
   &--horizontal {
-    column-gap: dimensions.get-size(0.5);
+    column-gap: var(--odx-spacing-75);
     flex-flow: row wrap;
   }
 }

package/scss/components/rail-navigation-item.component.scss

@@ -1,28 +1,26 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/typography';
 @use '../abstract/utils';
 @use './icon.component';
 
 .odx-rail-navigation-item {
-  $root: &;
-
-  @include motion.transition(background-color color);
-  @include dimensions.padding(math.div(8, 24));
   @include utils.interactive();
 
+  $root: &;
+
   align-items: center;
   background-color: unset;
-  border-radius: dimensions.get-size(math.div(3, 24));
+  border-radius: var(--odx-border-radius-control);
   box-sizing: border-box;
   display: flex;
   justify-content: center;
+  padding: var(--odx-spacing-50);
   text-align: left;
+  transition: var(--odx-motion-transition-default);
+  transition-property: background-color, color;
 
   &:hover {
-    background-color: var(--blue-700-5);
+    background-color: var(--odx-color-background-transparent-hover);
   }
 
   &.is-selected {
@@ -41,33 +39,33 @@
 
   &__container {
     @include typography.prevent-text-overflow();
-    @include motion.transition(width padding-left opacity);
 
     opacity: 0;
+    transition: var(--odx-motion-transition-default);
+    transition-property: width, padding-left, opacity;
     width: 0;
 
     .odx-rail-navigation--bar & {
+      @include typography.line-clamp(2);
+
+      font-size: var(--odx-typography-font-size-text-xs);
+      line-height: calc(var(--odx-vertical-rythm-base-size) * 2 / 3);
       margin: auto 0;
       opacity: unset;
       padding: 0 !important;
       white-space: unset;
       width: unset !important;
 
-      @include typography.line-clamp(2);
-      @include typography.font-size(-2);
-      @include dimensions.line-height(math.div(2, 3));
-
       @include breakpoints.up(phone) {
-        @include typography.font-size(-1);
-        @include dimensions.line-height(1);
+        font-size: var(--odx-typography-font-size-text-sm);
+        line-height: var(--odx-size-150);
       }
     }
 
     .odx-rail-navigation.is-open &:not(:empty) {
-      @include dimensions.padding(math.div(8, 24), left);
-
       opacity: 1;
-      width: calc(var(--odx-rail-navigation-max-width) - dimensions.get-size(math.div(64, 24)));
+      padding-inline-start: var(--odx-spacing-50);
+      width: calc(var(--odx-rail-navigation-max-width) - var(--odx-size-400));
     }
   }
 
@@ -78,16 +76,15 @@
   .odx-rail-navigation--bar & {
     flex: 1;
     flex-direction: column;
+    padding-inline: var(--odx-spacing-25);
     text-align: center;
 
-    @include dimensions.padding-x(math.div(4, 24));
-
     > .odx-icon {
       @extend .odx-icon;
     }
 
     @include breakpoints.up(phone) {
-      @include dimensions.padding-x(math.div(8, 24));
+      padding-inline: var(--odx-control-spacing-inline-lg);
     }
 
     &:has(#{$root}__container:empty) {

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

@@ -1,6 +1,3 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/breakpoints';
 
 .odx-rail-navigation {
@@ -13,17 +10,15 @@
   flex-direction: column;
   height: 100%;
   justify-content: space-between;
-
-  @include dimensions.padding-x(math.div(8, 24));
-  @include dimensions.padding-y(1);
+  padding-block: var(--odx-size-250);
+  padding-inline: var(--odx-control-spacing-inline-lg);
 
   &__content {
-    @include dimensions.padding(math.div(2, 24));
-
     display: flex;
     flex-direction: column;
-    gap: dimensions.get-size(math.div(12, 24));
+    gap: var(--odx-spacing-75);
     overflow: auto;
+    padding: var(--odx-spacing-12);
 
     #{$root}--bar & {
       flex-direction: row;
@@ -34,7 +29,8 @@
 
   &__expand {
     > .odx-icon {
-      @include motion.transition(transform);
+      transition: var(--odx-motion-transition-default);
+      transition-property: transform;
 
       #{$root}.is-open & {
         transform: rotateY(180deg);
@@ -49,7 +45,6 @@
   &--bar {
     background-color: var(--odx-c-background-content);
     display: flex;
-
-    @include dimensions.padding(math.div(4, 24), top bottom);
+    padding-block: var(--odx-control-spacing-sm);
   }
 }

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

@@ -1,24 +1,19 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
 @use '../abstract/utils';
 
 .odx-rich-list-item-header {
   $root: &;
 
   align-items: center;
-  column-gap: dimensions.get-size(math.div(16, 24));
+  column-gap: var(--odx-spacing-100);
   display: flex;
   flex: 1;
   user-select: none;
 
   &__title {
-    @include typography.font-size(-1);
-    @include dimensions.line-height(math.div(20, 24));
-
     flex: 1;
-    max-height: dimensions.get-size(math.div(36, 24));
+    font-size: var(--odx-typography-font-size-text-sm);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 5 / 6);
+    max-block-size: var(--odx-control-height-md);
     overflow: hidden;
     text-align: center;
   }

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

@@ -1,22 +1,15 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
-@use '../abstract/utils';
-
 .odx-rich-list-item {
   $root: &;
   $parent: odx-rich-list;
 
-  @include dimensions.padding-x(math.div(8, 24));
+  border-bottom: 1px solid var(--odx-input-control-outline-color);
+  display: block;
+  padding-inline: var(--odx-control-spacing-inline-lg);
 
   .#{$parent}:not(.#{$parent}--condensed) > & {
-    @include dimensions.padding-y(math.div(8, 24));
+    padding-block: var(--odx-control-spacing-lg);
   }
 
-  border-bottom: 1px solid var(--odx-input-control-outline-color);
-  display: block;
-
   &.is-disabled {
     .odx-rich-list-item-header {
       color: var(--odx-c-text-disabled);
@@ -29,15 +22,14 @@
   }
 
   &__header {
-    column-gap: dimensions.get-size(math.div(16, 24));
+    column-gap: var(--odx-spacing-100);
     display: flex;
   }
 
   &__slot {
-    @include dimensions.margin(math.div(8, 24), top);
-    @include dimensions.padding(math.div(16, 24));
-
+    margin-block-start: var(--odx-spacing-50);
     overflow: hidden;
+    padding: var(--odx-spacing-100);
   }
 
   &--empty {
@@ -47,10 +39,10 @@
   }
 
   &__icon {
-    @include motion.transition(transform);
-
     position: relative;
     transform: rotate(0);
+    transition: var(--odx-motion-transition-default);
+    transition-property: transform;
 
     #{$root}--expanded & {
       transform: rotateX(180deg);

package/scss/components/search-bar.component.scss

@@ -1,47 +1,45 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/typography';
-@use '../abstract/motion';
 
 .odx-search-bar {
-  @include dimensions.min-height(1.5);
-  @include motion.transition(background-color color);
   @include utils.focus-state($focus-within: true, $focus-within-selector: 'input');
 
   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;
 
   &:not(:has(input[odxSearchBarControl])) {
     display: none;
   }
 
   &__prefix {
-    @include dimensions.height(1.5);
-    @include motion.transition(color);
     @include utils.vertical-center-content(true);
-    @include dimensions.padding(math.div(8, 24), 'inline-start');
 
     flex: 0 0 auto;
+    min-block-size: var(--odx-control-height-md);
+    padding-inline-start: var(--odx-spacing-50);
+    transition: var(--odx-motion-transition-default);
+    transition-property: color;
   }
 
   &__input {
-    @include dimensions.padding-x(math.div(8, 24));
-    @include typography.font-weight(medium);
-
+    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%;
 
     &::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;
     }
   }