@odx/ui 5.5.0 → 6.0.0

package/scss/ag-grid/theme.scss

@@ -86,15 +86,16 @@
   input[class^='ag-'][type='text'] {
     background: var(--gray-100);
     border: var(--ag-borders-critical) var(--gray100);
-    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-medium-letter-spacing);
     line-height: var(--ag-table-line-height);
     padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
     padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color;
     vertical-align: middle;
 
-    @include motion.transition(background-color);
     @include utils.with-outline(var(--odx-v-outline-width));
 
     &::placeholder {
@@ -156,13 +157,13 @@
 
   .ag-standard-button {
     background-color: var(--odx-c-primary);
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     color: var(--odx-c-primary-text);
     height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
     min-width: calc(var(--odx-vertical-rythm-base-size) * 3);
     outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
     outline-width: var(--odx-v-outline-width-bold);
-    transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+    transition: var(--odx-motion-transition-default);
     transition-property: background-color, color, outline;
   }
 
@@ -252,7 +253,7 @@
     outline-color: var(--odx-control-outline-color);
     outline-offset: calc(-1 * var(--odx-v-outline-width));
     padding: 1px;
-    transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+    transition: var(--odx-motion-transition-default);
     transition-property: background-color, color, outline-color;
     width: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
 
@@ -333,16 +334,17 @@
     $input: '.ag-checkbox-input';
 
     background-color: var(--odx-control-background-color);
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     color: var(--odx-control-color-selected);
     flex: 0 0 auto;
     height: dimensions.get-size(math.div(20, 24));
     opacity: 1;
     outline-color: var(--odx-control-outline-color);
     padding: 1px;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
     width: dimensions.get-size(math.div(20, 24));
 
-    @include motion.transition(background-color color);
     @include utils.with-outline(var(--odx-v-outline-width));
 
     &:hover {

package/scss/anchor-navigation.component.scss

@@ -1,6 +1,3 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 .odx-anchor-navigation {
@@ -9,7 +6,7 @@
   $root: &;
 
   display: flex;
-  gap: dimensions.get-size(math.div(8, 24));
+  gap: var(--odx-spacing-layout-sm);
 
   &:is(:not(#{$root}--vertical)) {
     box-shadow: inset 0 calc(var(--odx-v-outline-width-bold) * -1) 0 0 var(--odx-control-outline-color);
@@ -22,25 +19,25 @@
   }
 
   &-item {
-    @include motion.transition(border-color background-color);
-
     display: inline-flex;
-    min-width: dimensions.get-size(math.div(80, 24));
+    min-width: var(--odx-size-500);
+    transition: var(--odx-motion-transition-default);
+    transition-property: border-color, background-color;
 
     &:has([aria-current='page']) {
       --active-link-indicator-color: var(--odx-c-link-active);
     }
 
     .odx-link {
-      @include dimensions.padding-x(math.div(12, 24));
-      @include dimensions.padding-y(math.div(6, 24));
       @include utils.interactive();
 
       color: var(--odx-c-text);
       display: flex;
+      padding-block: var(--odx-control-spacing-inline-md);
+      padding-inline: var(--odx-spacing-layout-md);
 
       &:not(:empty) {
-        gap: dimensions.get-size(math.div(4, 24));
+        gap: var(--odx-spacing-layout-sm);
       }
 
       &[aria-current='page'] {

package/scss/area-header.component.scss

@@ -1,6 +1,4 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
 @use '../abstract/typography';
 @use 'avatar.component';
@@ -12,20 +10,21 @@
 }
 
 .odx-area-header {
-  @include dimensions.padding-x(0.5);
+  padding-block: var(--odx-spacing-layout-md);
+  padding-inline: var(--odx-size-125);
 
   @include breakpoints.up(phone) {
-    @include dimensions.padding-x(1);
+    padding-inline: var(--odx-size-150);
   }
 
   &,
   &__container {
-    column-gap: dimensions.get-size(math.div(20, 24));
+    column-gap: var(--odx-size-125);
     display: flex;
 
     .odx-navigation-back {
-      @include dimensions.margin(-0.75, right);
-      @include dimensions.margin(math.div(5, 24), top);
+      margin-block-start: var(--odx-spacing-25);
+      margin-inline-end: var(--odx-spacing-negative-37);
     }
   }
 
@@ -52,7 +51,7 @@
 
   &__title {
     @extend .odx-heading;
-    @extend .odx-heading-6;
+    @extend .odx-heading-5;
 
     color: var(--odx-area-header-title-color);
     font-weight: 600;
@@ -61,10 +60,10 @@
   &__subtitle {
     @extend .odx-text;
     @include typography.prevent-text-overflow();
-    @include typography.font-size(-1);
-    @include dimensions.line-height(math.div(16, 24));
 
     color: var(--odx-area-header-subtitle-color);
+    font-size: var(--odx-typography-font-size-text-sm);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 2 / 3);
   }
 
   .odx-avatar,
@@ -77,12 +76,12 @@
     @include utils.vertical-center-content();
 
     flex-wrap: wrap;
-    min-height: dimensions.get-size(2);
+    min-block-size: var(--odx-control-height-lg);
   }
 
   &--small {
     .odx-area-header__container {
-      column-gap: dimensions.get-size(math.div(16, 24));
+      column-gap: var(--odx-spacing-100);
     }
   }
 
@@ -107,33 +106,36 @@
 
   &--medium {
     @include breakpoints.up(tablet) {
-      @include dimensions.padding-y(0.5);
+      padding-inline: var(--odx-size-150);
     }
 
     .odx-area-header__title {
-      @extend .odx-heading-5;
+      @extend .odx-heading-4;
+
+      padding-block: 0;
     }
 
     .odx-area-header__subtitle {
-      @include typography.font-size(-1);
-      @include dimensions.line-height(math.div(20, 24));
+      font-size: var(--odx-typography-font-size-text-sm);
+      line-height: calc(var(--odx-vertical-rythm-base-size) * 5 / 6);
     }
   }
 
   &--large {
-    @include dimensions.padding-y(0.5);
+    padding-inline: var(--odx-size-150);
 
     .odx-area-header__title {
-      @extend .odx-heading-4;
+      @extend .odx-heading-3;
 
       @include breakpoints.down(tablet) {
-        @include dimensions.line-height(1);
+        line-height: var(--odx-size-150);
+        padding-block: 0;
       }
     }
 
     .odx-area-header__subtitle {
-      @include typography.font-size(0);
-      @include dimensions.line-height(1);
+      font-size: var(--odx-typography-font-size-text-md);
+      line-height: var(--odx-size-150);
     }
 
     .odx-avatar {
@@ -142,32 +144,32 @@
   }
 
   &--xlarge {
-    @include dimensions.padding-y(0.5);
+    padding-block: var(--odx-size-125);
 
     @include breakpoints.up(tablet) {
-      @include dimensions.padding-y(1);
-
-      gap: dimensions.get-size(1);
+      gap: var(--odx-spacing-150);
+      padding-block: var(--odx-size-250);
 
       .odx-area-header__container {
-        @include dimensions.padding(1, top);
+        padding-block-start: var(--odx-spacing-150);
       }
     }
 
     .odx-area-header__title {
-      @extend .odx-heading-2;
+      @extend .odx-heading-1;
     }
 
     .odx-area-header__subtitle {
-      @extend .odx-heading-5;
-      @include dimensions.line-height(1);
+      @extend .odx-heading-4;
+
+      line-height: var(--odx-size-150);
     }
 
     .odx-avatar {
       @extend .odx-avatar--large;
 
       @include breakpoints.up(tablet) {
-        @include dimensions.margin(-0.5, top);
+        margin-block-start: var(--odx-spacing-negative-75);
       }
     }
 
@@ -175,7 +177,7 @@
       align-self: flex-end;
 
       @include breakpoints.up(tablet) {
-        @include dimensions.margin(-0.5, bottom);
+        margin-block-end: var(--odx-spacing-negative-75);
       }
     }
   }

package/scss/autocomplete.component.scss

@@ -1,5 +1,3 @@
-@use '../abstract/dimensions';
-
 .odx-autocomplete {
   &__trigger {
     height: 100%;
@@ -7,8 +5,7 @@
 
   &__control {
     height: 100%;
+    min-block-size: var(--odx-control-height-md);
     width: 100%;
-
-    @include dimensions.min-height(1.5);
   }
 }

package/scss/avatar.component.scss

@@ -1,33 +1,74 @@
 @use 'sass:math';
+@use 'sass:map';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
 @use '../abstract/typography';
 
+$avatar-font-size-map: (
+  -2: var(--odx-typography-font-size-text-xs),
+  -1: var(--odx-typography-font-size-text-sm),
+  0: var(--odx-typography-font-size-text-md),
+  1: var(--odx-typography-font-size-heading-md),
+  2: var(--odx-typography-font-size-heading-lg),
+  3: var(--odx-typography-font-size-heading-xl),
+  4: var(--odx-typography-font-size-heading-xxl)
+);
+
 @mixin avatar-size($size-factor, $line-height-factor, $font-size, $icon-factor) {
-  @include dimensions.container($size-factor, $line-height-factor);
-  @include typography.font-size($font-size);
+  $resolved-line-height-factor: $size-factor;
+
+  @if $line-height-factor {
+    $resolved-line-height-factor: $line-height-factor;
+  }
+
+  $line-size: calc(var(--odx-vertical-rythm-base-size) * #{$resolved-line-height-factor});
+  $margin-factor: math.div($size-factor - $resolved-line-height-factor, 2);
+  $margin-size: calc(var(--odx-vertical-rythm-base-size) * #{$margin-factor});
+  $font-size-token: map.get($avatar-font-size-map, $font-size);
+
+  @if not $font-size-token {
+    $font-size-token: var(--odx-typography-font-size-text-md);
+  }
+
+  font-size: $font-size-token;
+  height: $line-size;
+  margin-block: $margin-size;
+  width: $line-size;
 
   > .odx-icon,
   > .odx-icon[class*='odx-icon--'] {
-    @include dimensions.container($icon-factor);
+    $icon-size-token: null;
+
+    @if $icon-factor == 1 {
+      $icon-size-token: var(--odx-size-150);
+    } @else if $icon-factor == 1.5 {
+      $icon-size-token: var(--odx-size-225);
+    } @else if $icon-factor == 2.25 {
+      $icon-size-token: var(--odx-typography-font-size-display-lg);
+    } @else {
+      $icon-size-token: calc(var(--odx-vertical-rythm-base-size) * #{$icon-factor});
+    }
 
-    font-size: dimensions.get-size($icon-factor);
+    font-size: $icon-size-token;
+    height: $icon-size-token;
+    width: $icon-size-token;
   }
 }
 
 .odx-avatar {
   @include utils.center-content(true);
-  @include typography.font-weight(medium);
-  @include typography.prevent-text-overflow();
 
-  background-color: var(--blue-700-10);
-  border-radius: 50%;
+  background-color: var(--odx-color-background-neutral-rest);
+  border-radius: var(--odx-border-radius-circle);
   color: var(--odx-c-text);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
   position: relative;
   user-select: none;
   vertical-align: middle;
 
+  @include typography.prevent-text-overflow();
+
   &--small {
     @include avatar-size(2, 1.5, 0, 1);
   }
@@ -49,7 +90,7 @@
   }
 
   &--rectangle {
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
   }
 
   &:has(img) {
@@ -63,6 +104,6 @@
     position: absolute;
     top: 0;
     width: 100%;
-    z-index: var(--odx-v-layer-1);
+    z-index: var(--odx-z-level-foreground);
   }
 }

package/scss/badge.component.scss

@@ -1,31 +1,29 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/typography';
 
 :root {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
 .odx-badge {
-  $badge-size: dimensions.get-size(math.div(2, 3));
+  $badge-size: var(--odx-spacing-100);
 
-  @include dimensions.padding-x(math.div(1, 8));
-  @include utils.center-content(true);
-  @include utils.non-interactive();
-  @include typography.font-size(-2);
-  @include typography.font-weight(medium);
-
-  border-radius: $badge-size;
+  border-radius: var(--odx-border-radius-circle);
+  font-size: var(--odx-typography-font-size-text-xs);
+  font-weight: var(--odx-typography-font-weight-medium);
   height: $badge-size;
-  min-width: $badge-size;
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+  min-width: calc(#{$badge-size} * 1.01);
   outline: 1px solid transparent;
+  padding-inline: calc(var(--odx-spacing-37) / 2);
   vertical-align: middle;
 
+  @include utils.center-content(true);
+  @include utils.non-interactive();
+
   &,
   &--highlight {
     background-color: var(--odx-c-highlight);
-    color: var(--odx-c-highlight-text);
+    color: var(--odx-color-foreground-inverse-static);
   }
 
   &--danger {

package/scss/bar.component.scss

@@ -1,8 +1,4 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/typography';
-@use '../abstract/motion';
 @use './dropdown.component' as dropdown;
 
 :root {
@@ -21,28 +17,28 @@
 }
 
 .odx-bar {
-  @include dimensions.padding-x(math.div(12, 24));
-  @include dimensions.padding-y(math.div(6, 24));
-
   align-items: center;
   background-color: var(--odx-bar-background-color);
-  border-radius: dimensions.get-size(math.div(6, 24));
+  border-radius: var(--odx-border-radius-md);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   color: var(--odx-bar-text-color);
   display: inline-flex;
-  gap: dimensions.get-size(math.div(12, 24));
+  gap: var(--odx-spacing-75);
+  padding-block: var(--odx-control-spacing-md);
+  padding-inline: var(--odx-spacing-75);
   width: max-content;
 
   &-button {
-    @include motion.transition(background-color color);
-    @include utils.interactive();
-
     align-items: center;
     background-color: var(--odx-bar-background-color);
-    border-radius: var(--odx-v-border-radius-controls);
+    block-size: var(--odx-control-height-md);
+    border-radius: var(--odx-border-radius-control);
     display: inline-flex;
-    font-size: dimensions.get-size(math.div(4, 3));
-    height: dimensions.get-size(math.div(36, 24));
+    font-size: var(--odx-size-200);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
+
+    @include utils.interactive();
 
     &:hover {
       background-color: var(--odx-bar-background-color-hover);
@@ -54,11 +50,11 @@
     }
 
     &--default {
-      @include dimensions.padding-x(math.div(28, 24));
+      padding-inline: var(--odx-spacing-150);
     }
 
     &--small {
-      @include dimensions.padding-x(math.div(2, 24));
+      padding-inline: var(--odx-spacing-12);
     }
 
     &.is-disabled {
@@ -73,7 +69,7 @@
   }
 
   .odx-bar-parent & {
-    bottom: dimensions.get-size(math.div(16, 24));
+    bottom: var(--odx-spacing-100);
     left: 50%;
     position: absolute;
     transform: translateX(-50%);

package/scss/brand-logo.component.scss

@@ -1,10 +1,8 @@
-@use '../abstract/typography';
-
 .odx-brand-logo {
   color: inherit;
   display: inline-block;
-
-  @include typography.font-weight(semibold);
+  font-weight: var(--odx-typography-font-weight-semibold);
+  letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
 
   &::before {
     color: var(--odx-c-highlight);

package/scss/breadcrumbs.component.scss

@@ -1,33 +1,29 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
 @use '../abstract/utils';
-@use '../abstract/typography';
 @use '@odx/icons/core/core-utils' as icons;
 
 .odx-breadcrumbs {
-  @include dimensions.padding-x(1);
-  @include dimensions.padding-y(math.div(12, 24));
-  @include utils.vertical-center-content();
-
   flex-wrap: wrap;
-  gap: dimensions.get-size(math.div(8, 24));
+  gap: var(--odx-spacing-50);
+  padding-block: var(--odx-spacing-75);
+  padding-inline: var(--odx-size-250);
+
+  @include utils.vertical-center-content();
 
   .odx-link {
     white-space: nowrap;
 
     &:not(:last-child) {
-      @include dimensions.margin(math.div(20, 24), right);
+      margin-inline-end: var(--odx-size-125);
 
       &::after {
         color: var(--gray-500);
         content: icons.get-icon-glyph('chevron-right');
         display: inline-block;
         font-family: icons.get-font-family();
-        font-size: dimensions.get-size(math.div(12, 24));
+        font-size: var(--odx-size-75);
+        margin-inline-start: var(--odx-spacing-75);
         pointer-events: none;
         position: absolute;
-
-        @include dimensions.margin(math.div(12, 24), left);
       }
     }
 
@@ -37,9 +33,9 @@
 
     &:last-child,
     &:last-child:visited {
-      @include typography.font-weight(semibold);
-
       color: var(--odx-c-text);
+      font-weight: var(--odx-typography-font-weight-semibold);
+      letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
     }
   }
 }

package/scss/button-group.component.scss

@@ -1,6 +1,3 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-
 @mixin buttons-radius($vertical: false, $reversed: false) {
   $start: 'first';
   $end: 'last';
@@ -35,13 +32,13 @@
   }
 
   &:not(:first-of-type, :last-of-type) {
-    border-radius: 0;
+    border-radius: var(--odx-border-radius-none);
   }
 }
 
 .odx-button-group {
   display: inline-flex;
-  gap: dimensions.get-size(math.div(2, 24));
+  gap: var(--odx-spacing-12);
 
   &--reverse {
     flex-direction: row-reverse;
@@ -75,12 +72,11 @@
   }
 
   &--vertical {
-    @include dimensions.margin-y(math.div(10, 24));
-
     flex-direction: column;
+    margin-block: calc(var(--odx-spacing-75) - var(--odx-spacing-12));
 
     > .odx-button {
-      @include dimensions.height(math.div(35, 24));
+      min-block-size: calc(var(--odx-control-height-md) - (var(--odx-spacing-12) / 2));
     }
   }