@odx/ui 5.4.0 → 6.0.0

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);
       }
     }
   }
@@ -82,29 +78,56 @@
     display: block;
     margin: $img-margin $img-margin 0 $img-margin;
     max-height: var(--odx-card-image-max-height);
-    max-width: max-content;
+
+    /* allow the image container to span the card width (including the card padding)
+     so aspect-ratio can compute height. We compute width as 100% + 2 * padding
+     and keep the negative margins so the element visually spans the card edges. */
+    max-width: none;
     overflow: clip;
+    width: calc(100% + (#{$main-padding} * 2));
+
+    &__img {
+      aspect-ratio: var(--odx-card-image-aspect-ratio);
+      display: block;
+      max-height: var(--odx-card-image-max-height);
+      overflow: hidden;
+      position: relative; /* required for ngOptimizedImage's img[fill] */
+      width: 100%;
+    }
+
+    /* Fallback when aspect-ratio is "auto": ensure the image area has a usable height
+       so ngSrc[fill] (absolutely positioned img) has a non-zero container. The
+       host gets the class `has-aspect-auto` from the component when
+       imageRatio resolves to 'auto'. The fallback height can be overridden by
+       setting --odx-card-image-fallback-height. */
+    &.has-aspect-auto.has-fill {
+      #{$root}-image__img {
+        max-height: var(--odx-card-image-max-height);
+        min-height: var(--odx-card-image-fallback-height, 200px);
+      }
+    }
 
     img {
       aspect-ratio: var(--odx-card-image-aspect-ratio);
       display: block;
       height: auto;
       max-width: 100%;
-      object-fit: cover;
+      object-fit: var(--odx-card-image-object-fit);
     }
   }
 
   .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)));
+    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 &,
@@ -118,26 +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: 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: dimensions.get-size(math.div(25, 24));
+        font-size: calc(var(--odx-size-125) + var(--odx-spacing-25));
+        margin-block: calc(var(--odx-spacing-75) - var(--odx-spacing-12));
       }
 
       @include breakpoints.container-down(card-root, phone) {
-        margin-inline-end: dimensions.get-size(math.div(36, 24));
+        margin-inline-end: var(--odx-size-225);
       }
     }
   }
@@ -171,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);
       }
     }
   }
@@ -183,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;
@@ -213,7 +240,7 @@
         justify-content: center;
       }
 
-      padding-bottom: dimensions.get-size(math.div(12, 24));
+      padding-bottom: var(--odx-spacing-75);
     }
 
     .odx-button {

package/scss/components/chart-footer.component.scss

@@ -1,21 +1,21 @@
-.odx-chart-footer {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.75);
-  justify-content: flex-end;
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-  width: 100%;
-
-  .legend-item {
-    align-items: center;
-    display: flex;
-    font-size: calc(var(--odx-typography-base-size) * 0.875);
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
-  }
-
-  .legend-dot {
-    border-radius: 50%;
-    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
-    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
-  }
-}
+.odx-chart-footer {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-100);
+  justify-content: flex-end;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .legend-item {
+    align-items: center;
+    display: flex;
+    font-size: calc(var(--odx-typography-base-size) * 0.875);
+    gap: var(--odx-control-spacing-inline-md);
+  }
+
+  .legend-dot {
+    border-radius: 50%;
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+  }
+}

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

@@ -1,49 +1,49 @@
-.odx-chart-header {
-  display: flex;
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-  width: 100%;
-
-  .odx-chart-header__actions {
-    display: none;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-    margin-left: auto;
-  }
-}
-
-.odx-chart-header--center {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  justify-content: center;
-  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-}
-
-.odx-chart-header--split,
-.odx-chart-header--controls,
-.odx-chart-header--toggle,
-.odx-chart-header--textlink {
-  align-items: center;
-  display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  justify-content: space-between;
-  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
-
-  .odx-chart-header__actions {
-    align-items: center;
-    display: flex;
-  }
-}
-
-.odx-chart-header--controls {
-  .odx-chart-header__actions form {
-    align-items: center;
-    display: flex;
-    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-
-    .odx-select__trigger {
-      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
-    }
-  }
-}
+.odx-chart-header {
+  display: flex;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .odx-chart-header__actions {
+    display: none;
+    gap: var(--odx-spacing-75);
+    margin-left: auto;
+  }
+}
+
+.odx-chart-header--center {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-75);
+  justify-content: center;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+}
+
+.odx-chart-header--split,
+.odx-chart-header--controls,
+.odx-chart-header--toggle,
+.odx-chart-header--textlink {
+  align-items: center;
+  display: flex;
+  gap: var(--odx-spacing-75);
+  justify-content: space-between;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+
+  .odx-chart-header__actions {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.odx-chart-header--controls {
+  .odx-chart-header__actions form {
+    align-items: center;
+    display: flex;
+    gap: var(--odx-spacing-75);
+
+    .odx-select__trigger {
+      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
+    }
+  }
+}