@odx/ui 5.5.0 → 6.0.0

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

package/scss/components/button.component.scss

@@ -1,57 +1,61 @@
-@use 'sass:map';
 @use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
 @use '../abstract/utils';
 @use 'avatar.component' as avatar;
 @use 'dropdown.component' as dropdown;
 @use 'icon.component';
 
 .odx-button {
+  --odx-c-confirmation-text: var(--odx-color-foreground-rest-static);
+  --odx-c-success-text: var(--odx-color-foreground-rest-static);
+
   $variants: secondary, primary, highlight, success, danger, confirmation, ghost;
   $icon-margin: 0.25;
 
   @extend .odx-button--secondary;
-  @include dimensions.height(2, 1.5);
-  @include dimensions.padding-x(2 * $icon-margin);
-  @include motion.transition(background-color color);
-  @include typography.font-size(0);
-  @include typography.font-weight(medium);
-  @include utils.center-content(true);
-  @include utils.interactive();
 
   appearance: none;
-  border-radius: var(--odx-v-border-radius-controls);
-  min-width: dimensions.get-size(1.5);
+  block-size: var(--odx-control-height-md);
+  border-radius: var(--odx-border-radius-control);
+  font-size: var(--odx-typography-font-size-text-md);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+  margin-block: var(--odx-spacing-37);
+  min-width: var(--odx-size-225);
   overflow-wrap: anywhere;
   overflow-y: clip;
+  padding-inline: var(--odx-spacing-75);
+  transition: var(--odx-motion-transition-default);
+  transition-property: background-color, color;
   vertical-align: middle;
 
+  @include utils.center-content(true);
+  @include utils.interactive();
+
   &:not(:has(> .odx-icon, > .odx-avatar)) {
-    min-width: dimensions.get-size(3);
+    min-width: var(--odx-size-450);
   }
 
   > .odx-icon {
-    @include dimensions.margin-x(-$icon-margin);
+    margin-inline: calc(-1 * var(--odx-spacing-37));
   }
 
   > .odx-icon[alignLeft] {
-    @include dimensions.margin($icon-margin, right);
+    margin-inline-end: var(--odx-spacing-37);
   }
 
   > .odx-icon[alignRight] {
-    @include dimensions.margin($icon-margin, left);
+    margin-inline-start: var(--odx-spacing-37);
   }
 
   > .odx-avatar {
     @include avatar.avatar-size(1.5, math.div(32, 24), -1, 1);
-    @include dimensions.margin-x(-2 * $icon-margin);
+
+    margin-inline: calc(-1 * var(--odx-spacing-75));
   }
 
   &[data-breakpoint]:has(> .odx-icon, > .odx-avatar) {
-    min-width: dimensions.get-size(1.5);
+    min-width: var(--odx-size-225);
   }
 
   @each $breakpoint in breakpoints.get-breakpoint-names() {
@@ -60,7 +64,7 @@
         font-size: 0;
 
         > .odx-icon {
-          @include dimensions.margin-x(-$icon-margin);
+          margin-inline: calc(-1 * var(--odx-spacing-37));
         }
       }
     }
@@ -92,47 +96,46 @@
   &--small {
     $icon-margin: math.div(1, 8);
 
-    @include dimensions.height(1);
-    @include dimensions.padding-x(2 * $icon-margin);
-    @include typography.font-size(-1);
-
-    line-height: dimensions.get-size(1);
-    min-width: dimensions.get-size(1);
+    block-size: var(--odx-spacing-150);
+    font-size: var(--odx-typography-font-size-text-sm);
+    line-height: var(--odx-spacing-150);
+    min-width: var(--odx-size-150);
+    padding-inline: var(--odx-control-spacing-inline-md);
 
     &:not(:has(> .odx-icon, > .odx-avatar)) {
-      min-width: dimensions.get-size(2);
+      min-width: var(--odx-size-300);
     }
 
     > .odx-icon {
-      @include dimensions.margin-x(-2 * $icon-margin);
+      margin-inline: calc(-1 * var(--odx-spacing-37));
     }
 
     > .odx-icon[alignLeft] {
-      @include dimensions.margin($icon-margin, right);
+      margin-inline-end: calc(var(--odx-spacing-37) / 2);
     }
 
     > .odx-icon[alignRight] {
-      @include dimensions.margin($icon-margin, left);
+      margin-inline-start: calc(var(--odx-spacing-37) / 2);
     }
   }
 
   &--large {
     $icon-margin: 0.5;
 
-    @include dimensions.height(2, 2);
-    @include dimensions.padding-x(2 * $icon-margin);
-    @include typography.font-size(1);
+    block-size: var(--odx-control-height-lg);
+    font-size: var(--odx-typography-font-size-heading-md);
+    padding-inline: var(--odx-spacing-150);
 
     > .odx-icon {
-      @include dimensions.margin-x(-$icon-margin * math.div(2, 3));
+      margin-inline: calc(-1 * var(--odx-spacing-50));
     }
 
     > .odx-icon[alignLeft] {
-      @include dimensions.margin($icon-margin * math.div(2, 3), right);
+      margin-inline-end: var(--odx-spacing-50);
     }
 
     > .odx-icon[alignRight] {
-      @include dimensions.margin($icon-margin * math.div(2, 3), left);
+      margin-inline-start: var(--odx-spacing-50);
     }
   }
 }

package/scss/components/calendar.component.scss

@@ -1,7 +1,3 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
 @use '../abstract/utils';
 
 .odx-calendar {
@@ -17,18 +13,19 @@
   }
 
   &-header {
-    @include motion.transition(background-color color border-radius);
-    @include utils.vertical-center-content();
-    @include typography.font-weight(normal);
-
     background-color: var(--odx-c-background-content);
     border-bottom: 1px solid var(--odx-input-control-outline-color);
+    font-weight: var(--odx-typography-font-weight-normal);
+    letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color, border-radius;
+
+    @include utils.vertical-center-content();
 
     .odx-action-group {
+      margin-block-end: var(--odx-spacing-25);
+      margin-block-start: 0;
       width: 100%;
-
-      @include dimensions.margin(0, top);
-      @include dimensions.margin(math.div(4, 24), bottom);
     }
 
     &__title {
@@ -37,18 +34,21 @@
   }
 
   &-cell {
-    @include dimensions.container(1.5);
-    @include motion.transition(background-color color border-radius box-shadow);
-    @include utils.interactive();
-    @include typography.font-weight(normal);
-
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     cursor: pointer;
+    font-weight: var(--odx-typography-font-weight-normal);
+    height: var(--odx-size-225);
+    letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
     position: relative;
     text-align: center;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color, border-radius, box-shadow;
     vertical-align: middle;
+    width: var(--odx-size-225);
     z-index: 1;
 
+    @include utils.interactive();
+
     &--adjacent,
     &.is-disabled {
       color: var(--odx-input-control-color-disabled);
@@ -62,12 +62,13 @@
     }
 
     &:hover:not(.is-in-any-range) {
-      background-color: var(--blue-700-10);
+      background-color: var(--odx-input-control-background-color);
     }
 
     &--is-current,
     &.is-selected:not(.is-in-any-range) {
-      @include typography.font-weight(medium);
+      font-weight: var(--odx-typography-font-weight-medium);
+      letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
     }
 
     &.is-selected:not(.is-in-any-range) {
@@ -82,36 +83,36 @@
   &-month {
     #{$root}__table {
       border-collapse: separate;
-      border-spacing: dimensions.get-size(math.div(4, 24));
-
-      @include dimensions.margin-x(math.div(-4, 24));
+      border-spacing: var(--odx-spacing-25);
+      margin-inline: var(--odx-spacing-negative-25);
     }
 
     #{$root}__weekdays {
-      @include typography.font-weight(semibold);
-      @include typography.font-size(-1);
-      @include utils.non-interactive();
-
+      font-size: var(--odx-typography-font-size-text-sm);
+      font-weight: var(--odx-typography-font-weight-semibold);
+      letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
       text-align: center;
 
-      td {
-        @include dimensions.container(1.5);
+      @include utils.non-interactive();
 
+      td {
+        height: var(--odx-size-225);
         vertical-align: middle;
+        width: var(--odx-size-225);
       }
     }
 
     #{$root}-cell {
       &--is-current::after {
-        @include dimensions.container(1);
-        @include dimensions.margin(0.25);
-
-        background-color: var(--blue-700-15);
-        border-radius: 50%;
+        background-color: var(--odx-input-control-background-color);
+        border-radius: var(--odx-border-radius-circle);
         content: '';
+        height: var(--odx-size-150);
         left: 0;
+        margin: var(--odx-spacing-37);
         position: absolute;
         top: 0;
+        width: var(--odx-size-150);
         z-index: -1;
       }
 
@@ -127,20 +128,22 @@
       }
 
       &--is-range-start {
-        @include typography.font-weight(medium);
+        font-weight: var(--odx-typography-font-weight-medium);
+        letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 
         &::before {
-          border-bottom-left-radius: var(--odx-v-border-radius-controls);
-          border-top-left-radius: var(--odx-v-border-radius-controls);
+          border-bottom-left-radius: var(--odx-border-radius-control);
+          border-top-left-radius: var(--odx-border-radius-control);
         }
       }
 
       &--is-range-end {
-        @include typography.font-weight(medium);
+        font-weight: var(--odx-typography-font-weight-medium);
+        letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 
         &::before {
-          border-bottom-right-radius: var(--odx-v-border-radius-controls);
-          border-top-right-radius: var(--odx-v-border-radius-controls);
+          border-bottom-right-radius: var(--odx-border-radius-control);
+          border-top-right-radius: var(--odx-border-radius-control);
         }
       }
 
@@ -160,22 +163,24 @@
       }
 
       &--is-preview-range-start {
-        @include typography.font-weight(medium);
+        font-weight: var(--odx-typography-font-weight-medium);
+        letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 
         &::before {
           background-color: var(--odx-c-selected);
-          border-bottom-left-radius: var(--odx-v-border-radius-controls);
-          border-top-left-radius: var(--odx-v-border-radius-controls);
+          border-bottom-left-radius: var(--odx-border-radius-control);
+          border-top-left-radius: var(--odx-border-radius-control);
         }
       }
 
       &--is-preview-range-end {
-        @include typography.font-weight(medium);
+        font-weight: var(--odx-typography-font-weight-medium);
+        letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 
         &::before {
           background-color: var(--odx-c-selected);
-          border-bottom-right-radius: var(--odx-v-border-radius-controls);
-          border-top-right-radius: var(--odx-v-border-radius-controls);
+          border-bottom-right-radius: var(--odx-border-radius-control);
+          border-top-right-radius: var(--odx-border-radius-control);
         }
       }
 
@@ -189,7 +194,7 @@
   &-years {
     #{$root}-cell {
       &--is-current {
-        background-color: var(--blue-700-10);
+        background-color: var(--odx-input-control-background-color);
       }
     }
   }
@@ -197,25 +202,24 @@
   &-year {
     #{$root}__body {
       display: inline-table;
-
-      @include dimensions.margin-y(1.75);
+      margin-block: calc(var(--odx-spacing-100) * 2 + var(--odx-spacing-50) + var(--odx-spacing-12));
     }
 
     #{$root}__table {
-      @include dimensions.margin(1.42, bottom);
+      margin-block-end: calc(var(--odx-spacing-100) * 2 + var(--odx-spacing-12));
     }
 
     #{$root}__season {
       display: grid;
-      grid-gap: 50px;
+      grid-gap: var(--odx-size-300);
       grid-template-columns: repeat(3, 1fr);
       margin: 2px 0;
-
-      @include dimensions.padding-x(1.16);
+      padding-inline: calc(var(--odx-spacing-150) + var(--odx-spacing-25));
     }
 
     #{$root}-cell {
-      @include dimensions.container(math.div(5, 3));
+      height: var(--odx-size-250);
+      width: var(--odx-size-250);
     }
   }
 
@@ -226,14 +230,14 @@
 
     #{$root}__year-row {
       display: grid;
-      grid-gap: 36px;
+      grid-gap: var(--odx-size-225);
       grid-template-columns: repeat(3, 1fr);
       margin: 2px 0;
     }
 
     #{$root}-cell {
-      height: dimensions.get-size(math.div(5, 3));
-      width: dimensions.get-size(2);
+      block-size: var(--odx-size-250);
+      inline-size: var(--odx-control-height-lg);
     }
   }
 }

package/scss/components/card.component.scss

@@ -1,7 +1,4 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/typography';
 @use '../abstract/utils';
 @use '../layout/typography' as *;
@@ -20,24 +17,25 @@
   $root: &;
   $main-padding: var(--odx-card-main-padding);
 
-  --odx-card-main-padding: #{dimensions.get-size(math.div(12, 24))};
-  --odx-card-gap: #{dimensions.get-size(math.div(12, 24))};
+  --odx-card-main-padding: var(--odx-spacing-75);
+  --odx-card-gap: var(--odx-spacing-75);
 
   background-color: var(--odx-c-background-content);
   behavior: button;
   border: var(--odx-v-outline-width-bold) solid transparent;
-  border-radius: var(--odx-v-border-radius);
+  border-radius: var(--odx-border-radius-md);
   container-name: card-root;
   container-type: inline-size;
   display: block;
   padding: $main-padding;
   position: relative;
+  transition: var(--odx-motion-transition-default);
+  transition-property: box-shadow, color, border-color;
 
-  @include motion.transition(box-shadow color border-color);
   @include utils.interactive();
 
   &--image-card {
-    --odx-card-main-padding: #{dimensions.get-size(1)};
+    --odx-card-main-padding: var(--odx-spacing-150);
 
     overflow: clip;
   }
@@ -63,15 +61,13 @@
 
     #{$root}--launch-tile &,
     #{$root}--launch-tile-centered & {
-      @include dimensions.padding-y(0.5);
-      @include dimensions.padding-x(math.div(8, 24));
-
-      gap: dimensions.get-size(math.div(16, 24));
+      gap: var(--odx-spacing-100);
+      padding-block: var(--odx-size-125);
+      padding-inline: var(--odx-control-spacing-inline-lg);
 
       @include breakpoints.up(phone) {
-        @include dimensions.padding(1, bottom);
-
-        gap: dimensions.get-size(1);
+        gap: var(--odx-spacing-150);
+        padding-block-end: var(--odx-spacing-150);
       }
     }
   }
@@ -122,16 +118,16 @@
 
   .odx-chip-list-row:has(.odx-chip) {
     left: $main-padding;
-    padding: dimensions.get-size(math.div(6, 24)) 0;
+    padding: var(--odx-spacing-37) 0;
     position: absolute;
     top: $main-padding;
-    width: calc(100% - dimensions.get-size(math.div(40, 24)) - #{$main-padding} - dimensions.get-size(math.div(30, 24)));
-    z-index: var(--odx-v-layer-2);
+    width: calc(100% - var(--odx-size-250) - #{$main-padding} - calc(var(--odx-vertical-rythm-base-size) * (30 / 24)));
+    z-index: var(--odx-z-level-foreground);
   }
 
   &__content {
     #{$root}--default & {
-      padding-right: dimensions.get-size(math.div(40, 24));
+      padding-right: var(--odx-size-250);
     }
 
     #{$root}--launch-tile &,
@@ -145,28 +141,32 @@
 
   &__title {
     #{$root}--default & {
-      padding-right: dimensions.get-size(math.div(36, 24));
+      padding-right: var(--odx-size-225);
     }
 
     #{$root}--launch-tile & {
       @include breakpoints.container-down(card-root, phone) {
-        margin-inline-end: dimensions.get-size(math.div(36, 24));
+        margin-inline-end: var(--odx-size-225);
       }
     }
 
     #{$root}--launch-tile &,
     #{$root}--launch-tile-centered & {
-      font-size: dimensions.get-size(math.div(20, 24));
-      line-height: dimensions.get-size(math.div(30, 24));
+      font-size: var(--odx-size-125);
+      font-weight: var(--odx-typography-font-weight-medium);
+      letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+      line-height: calc(var(--odx-spacing-150) + var(--odx-spacing-25) + var(--odx-spacing-12));
       overflow-wrap: anywhere;
 
-      @include typography.font-weight(medium);
       @include typography.line-clamp(3);
 
       @include breakpoints.up(phone) {
-        @include dimensions.margin-y(math.div(9, 24));
+        font-size: calc(var(--odx-size-125) + var(--odx-spacing-25));
+        margin-block: calc(var(--odx-spacing-75) - var(--odx-spacing-12));
+      }
 
-        font-size: dimensions.get-size(math.div(25, 24));
+      @include breakpoints.container-down(card-root, phone) {
+        margin-inline-end: var(--odx-size-225);
       }
     }
   }
@@ -200,11 +200,11 @@
       padding-right: unset;
 
       #{$root}--launch-tile & {
-        @include dimensions.padding-y(1);
+        padding-block: var(--odx-size-250);
       }
 
       #{$root}--launch-tile-centered & {
-        gap: dimensions.get-size(math.div(16, 24));
+        gap: var(--odx-spacing-100);
       }
     }
   }
@@ -212,21 +212,19 @@
   .odx-avatar {
     flex: 0 0 auto;
     height: var(--odx-card-avatar-size);
+    margin-block: var(--odx-spacing-25);
     width: var(--odx-card-avatar-size);
 
-    @include dimensions.margin-y(math.div(4, 24));
-
     @include breakpoints.up(phone) {
-      margin: dimensions.get-size(math.div(4, 24)) auto 0;
+      margin: var(--odx-spacing-25) auto 0;
     }
   }
 
   &__footer {
-    @include dimensions.padding-x(0.5);
-
     display: flex;
-    gap: dimensions.get-size(math.div(12, 24));
+    gap: var(--odx-spacing-75);
     justify-content: flex-end;
+    padding-inline: var(--odx-size-125);
 
     #{$root}--default & {
       display: block;
@@ -242,7 +240,7 @@
         justify-content: center;
       }
 
-      padding-bottom: dimensions.get-size(math.div(12, 24));
+      padding-bottom: var(--odx-spacing-75);
     }
 
     .odx-button {