@odx/ui 5.5.0 → 6.0.1

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

package/scss/_dimensions.scss

@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'sass:map';
+@warn 'DEPRECATED: The dimension helpers in "_dimensions.scss" are deprecated and will be removed in the next version. Please migrate off these mixins and functions.';
 
 @function _get-line-height-factor($factor, $line-height-factor) {
   @if not $line-height-factor {
@@ -24,39 +26,50 @@
   @return calc(var(--odx-vertical-rythm-base-size) * $factor);
 }
 
+$sides-map: (
+  top: block-start,
+  right: inline-end,
+  bottom: block-end,
+  left: inline-start,
+);
+
 @mixin margin($factor, $directions: ('top', 'right', 'bottom', 'left')) {
+  $size: get-size($factor);
+
   @each $side in $directions {
-    margin-#{$side}: get-size($factor);
+    $logical-side: map.get($sides-map, $side);
+
+    @if $logical-side {
+      margin-#{$logical-side}: $size;
+    }
   }
 }
 
 @mixin margin-x($factor: 1) {
-  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
-
   @include margin($factor, ('right', 'left'));
 }
 
 @mixin margin-y($factor: 1) {
-  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
-
   @include margin($factor, ('top', 'bottom'));
 }
 
 @mixin padding($factor, $directions: ('top', 'right', 'bottom', 'left')) {
+  $size: get-size($factor);
+
   @each $side in $directions {
-    padding-#{$side}: get-size($factor);
+    $logical-side: map.get($sides-map, $side);
+
+    @if $logical-side {
+      padding-#{$logical-side}: $size;
+    }
   }
 }
 
 @mixin padding-x($factor: 1) {
-  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
-
   @include padding($factor, ('right', 'left'));
 }
 
 @mixin padding-y($factor: 1) {
-  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
-
   @include padding($factor, ('top', 'bottom'));
 }
 

package/scss/_helpers.scss

@@ -1,54 +1,73 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
 @use '../abstract/utils';
 
+$spacing-token-map: (
+  4: var(--odx-spacing-25),
+  8: var(--odx-spacing-50),
+  12: var(--odx-spacing-75),
+  16: var(--odx-spacing-100),
+  24: var(--odx-spacing-150),
+  36: var(--odx-size-225),
+  48: var(--odx-size-300)
+);
+
 html body {
   .odx-no-margin {
     margin: 0;
   }
 
-  @each $size in (4, 8, 12, 16, 24, 36, 48) {
-    $factor: math.div($size, 24);
-
+  @each $size, $token in $spacing-token-map {
     @each $direction in (top, right, bottom, left) {
       .odx-margin-#{$direction}-#{$size} {
-        @include dimensions.margin($factor, $direction);
+        @if $direction == top {
+          margin-block-start: $token;
+        } @else if $direction == bottom {
+          margin-block-end: $token;
+        } @else if $direction == left {
+          margin-inline-start: $token;
+        } @else if $direction == right {
+          margin-inline-end: $token;
+        }
       }
     }
 
     .odx-margin-x-#{$size} {
-      @include dimensions.margin-x($factor);
+      margin-inline: $token;
     }
 
     .odx-margin-y-#{$size} {
-      @include dimensions.margin-y($factor);
+      margin-block: $token;
     }
 
     .odx-margin-#{$size} {
-      @include dimensions.margin($factor);
+      margin: $token;
     }
   }
 
-  @each $size in (4, 8, 12, 16, 24, 36, 48) {
-    $factor: math.div($size, 24);
-
+  @each $size, $token in $spacing-token-map {
     @each $direction in (top, right, bottom, left) {
       .odx-padding-#{$direction}-#{$size} {
-        @include dimensions.padding($factor, $direction);
+        @if $direction == top {
+          padding-block-start: $token;
+        } @else if $direction == bottom {
+          padding-block-end: $token;
+        } @else if $direction == left {
+          padding-inline-start: $token;
+        } @else if $direction == right {
+          padding-inline-end: $token;
+        }
       }
     }
 
     .odx-padding-x-#{$size} {
-      @include dimensions.padding-x($factor);
+      padding-inline: $token;
     }
 
     .odx-padding-y-#{$size} {
-      @include dimensions.padding-y($factor);
+      padding-block: $token;
     }
 
     .odx-padding-#{$size} {
-      @include dimensions.padding($factor);
+      padding: $token;
     }
   }
 
@@ -58,24 +77,27 @@ html body {
 
   hr,
   .odx-separator {
-    @include dimensions.height(1, math.div(1, 24));
-
     background-color: var(--odx-c-separator);
+    block-size: var(--odx-border-width-thin);
     border: 0;
+    margin-block: var(--odx-spacing-50);
   }
 
   .odx-fs-normal {
-    @include typography.font-weight(normal);
+    font-weight: var(--odx-typography-font-weight-normal);
+    letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
   }
 
   .odx-fs-medium {
-    @include typography.font-weight(medium);
+    font-weight: var(--odx-typography-font-weight-medium);
+    letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
   }
 
   b,
   strong,
   .odx-fs-bold {
-    @include typography.font-weight(semibold);
+    font-weight: var(--odx-typography-font-weight-semibold);
+    letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
   }
 
   em,

package/scss/_layout.scss

@@ -1,6 +1,4 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 
 $columns: 12 !default;
 
@@ -9,8 +7,8 @@ $columns: 12 !default;
 }
 
 :root {
-  --odx-grid-gutter: #{dimensions.get-size(1)};
-  --odx-grid-gutter-small: #{dimensions.get-size(math.div(8, 24))};
+  --odx-grid-gutter: var(--odx-size-150);
+  --odx-grid-gutter-small: var(--odx-size-50);
 
   @include breakpoints.down(phone) {
     --odx-grid-gutter: var(--odx-grid-gutter-small);

package/scss/_skeleton.scss

@@ -18,7 +18,7 @@
   &::after {
     animation: skeleton-animation ease-in-out 1s infinite alternate;
     background-color: var(--gray-200);
-    border-radius: var(--odx-v-border-radius);
+    border-radius: var(--odx-border-radius-md);
     content: '';
     height: 100%;
     left: 0;

package/scss/_text-list.scss

@@ -1,18 +1,15 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-
 .odx-text-list,
 .odx-text-list ol,
 .odx-text-list ul {
-  @include dimensions.margin-y(0.5);
-  @include dimensions.padding(1, left);
+  margin-block: var(--odx-spacing-75);
+  padding-inline-start: var(--odx-spacing-150);
 
   ul,
   ol {
-    @include dimensions.margin(0);
+    margin: 0;
   }
 
   li {
-    @include dimensions.margin(math.div(-1, 24), left);
+    margin-inline-start: calc(var(--odx-vertical-rythm-base-size) * -1 / 24);
   }
 }

package/scss/_typography.scss

@@ -1,14 +1,11 @@
 @use '../abstract/breakpoints';
 
 :root {
-  --odx-typography-font-family: 'Draeger Pangea Text', 'Arial', sans-serif;
-  --odx-typography-base-size: 1.6rem; // clamp(1.4rem, 0.667vw + 1rem, 1.6rem);
-  --odx-typography-base-line-height: 1.5;
-  --odx-typography-font-weight-normal: 400;
+  --odx-typography-font-family: var(--odx-typography-font-family-base), 'Arial', sans-serif;
+  --odx-typography-base-size: var(--odx-typography-font-size-base);
+  --odx-typography-base-line-height: var(--odx-typography-line-height-base);
   --odx-typography-font-weight-normal-letter-spacing: 0;
-  --odx-typography-font-weight-medium: 500;
   --odx-typography-font-weight-medium-letter-spacing: -0.19px;
-  --odx-typography-font-weight-semibold: 600;
   --odx-typography-font-weight-semibold-letter-spacing: 0;
   --odx-typography-font-weight-bold: var(--odx-typography-font-weight-semibold);
   --odx-typography-font-weight-bold-letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);

package/scss/_utils.scss

@@ -1,4 +1,6 @@
+@use 'sass:list';
 @use 'sass:math';
+@use 'sass:meta';
 
 @function css-pow($value, $exponent) {
   $css-value: 1;
@@ -79,6 +81,16 @@
 
   @if $focus-within {
     @if $focus-within-selector {
+      @if meta.type-of($focus-within-selector) == 'list' {
+        $selector-list: $focus-within-selector;
+
+        @if list.separator($selector-list) != comma {
+          $selector-list: list.join((), $selector-list, $separator: comma);
+        }
+
+        $focus-within-selector: ':is(#{$selector-list})';
+      }
+
       $focus-within-selector: '#{$focus-within-selector}:focus-visible';
     } @else {
       $focus-within-selector: ':focus-visible';
@@ -122,6 +134,7 @@
 
 @mixin theme-selector($theme: dark) {
   :root:has([odxTheme='#{$theme}']),
+  :root:has(.odx-#{$theme}-mode),
   :root:has(.odx-theme-#{$theme}) {
     @content;
   }

package/scss/_vertical-rythm.scss

@@ -1,3 +1,3 @@
 :root {
-  --odx-vertical-rythm-base-size: calc(var(--odx-typography-base-line-height) * var(--odx-typography-base-size));
+  --odx-vertical-rythm-base-size: var(--odx-typography-base-line-height);
 }

package/scss/_visuals.scss

@@ -3,10 +3,10 @@
   --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
 
-  --odx-v-backdrop-blur: 3px;
+  --odx-v-backdrop-blur: var(--odx-elevation-backdrop-blur);
 
-  --odx-v-box-shadow-layer-1: 0 2px 6px 0 var(--odx-c-box-shadow);
-  --odx-v-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-box-shadow);
+  --odx-v-box-shadow-layer-1: var(--odx-elevation-shadow-level-1);
+  --odx-v-box-shadow-layer-2: var(--odx-elevation-shadow-level-2);
 
   --odx-v-layer-1: 0;
   --odx-v-layer-2: 10;
@@ -15,10 +15,10 @@
   --odx-v-layer-5: 9500;
   --odx-v-layer-6: 9900;
 
-  --odx-v-transition-duration: 250ms;
+  --odx-v-transition-duration: var(--odx-motion-duration-default);
   --odx-v-transition-easing-fn: ease;
-  --odx-v-outline-width: 1px;
-  --odx-v-outline-width-bold: 2px;
+  --odx-v-outline-width: var(--odx-border-width-thin);
+  --odx-v-outline-width-bold: var(--odx-border-width-thick);
   --odx-v-outline-box-shadow-width: 1px;
 
   --odx-v-scrollbar-track-color: transparent;

package/scss/abstract/_breakpoints.scss

@@ -30,19 +30,31 @@ $breakpoints: (
   $keys: get-breakpoint-names();
   $index: list.index($keys, $breakpoint);
 
-  @return if($index < list.length($keys), list.nth($keys, $index + 1), null);
+  @if $index < list.length($keys) {
+    @return list.nth($keys, $index + 1);
+  }
+
+  @return null;
 }
 
 @function _get-min-value($breakpoint) {
   $value: get-breakpoint-value($breakpoint);
 
-  @return if($value != 0, $value, null);
+  @if $value != 0 {
+    @return $value;
+  }
+
+  @return null;
 }
 
 @function _get-max-value($breakpoint) {
   $value: get-breakpoint-value($breakpoint);
 
-  @return if($value > 0, $value - 1, null);
+  @if $value > 0 {
+    @return $value - 1;
+  }
+
+  @return null;
 }
 
 @mixin up($breakpoint) {

package/scss/abstract/_dimensions.scss

@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'sass:map';
+@warn 'DEPRECATED: The dimension helpers in "_dimensions.scss" are deprecated and will be removed in the next version. Please migrate off these mixins and functions.';
 
 @function _get-line-height-factor($factor, $line-height-factor) {
   @if not $line-height-factor {
@@ -24,39 +26,50 @@
   @return calc(var(--odx-vertical-rythm-base-size) * $factor);
 }
 
+$sides-map: (
+  top: block-start,
+  right: inline-end,
+  bottom: block-end,
+  left: inline-start,
+);
+
 @mixin margin($factor, $directions: ('top', 'right', 'bottom', 'left')) {
+  $size: get-size($factor);
+
   @each $side in $directions {
-    margin-#{$side}: get-size($factor);
+    $logical-side: map.get($sides-map, $side);
+
+    @if $logical-side {
+      margin-#{$logical-side}: $size;
+    }
   }
 }
 
 @mixin margin-x($factor: 1) {
-  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
-
   @include margin($factor, ('right', 'left'));
 }
 
 @mixin margin-y($factor: 1) {
-  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
-
   @include margin($factor, ('top', 'bottom'));
 }
 
 @mixin padding($factor, $directions: ('top', 'right', 'bottom', 'left')) {
+  $size: get-size($factor);
+
   @each $side in $directions {
-    padding-#{$side}: get-size($factor);
+    $logical-side: map.get($sides-map, $side);
+
+    @if $logical-side {
+      padding-#{$logical-side}: $size;
+    }
   }
 }
 
 @mixin padding-x($factor: 1) {
-  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
-
   @include padding($factor, ('right', 'left'));
 }
 
 @mixin padding-y($factor: 1) {
-  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
-
   @include padding($factor, ('top', 'bottom'));
 }
 

package/scss/abstract/_utils.scss

@@ -1,4 +1,6 @@
+@use 'sass:list';
 @use 'sass:math';
+@use 'sass:meta';
 
 @function css-pow($value, $exponent) {
   $css-value: 1;
@@ -79,6 +81,16 @@
 
   @if $focus-within {
     @if $focus-within-selector {
+      @if meta.type-of($focus-within-selector) == 'list' {
+        $selector-list: $focus-within-selector;
+
+        @if list.separator($selector-list) != comma {
+          $selector-list: list.join((), $selector-list, $separator: comma);
+        }
+
+        $focus-within-selector: ':is(#{$selector-list})';
+      }
+
       $focus-within-selector: '#{$focus-within-selector}:focus-visible';
     } @else {
       $focus-within-selector: ':focus-visible';
@@ -122,6 +134,7 @@
 
 @mixin theme-selector($theme: dark) {
   :root:has([odxTheme='#{$theme}']),
+  :root:has(.odx-#{$theme}-mode),
   :root:has(.odx-theme-#{$theme}) {
     @content;
   }

package/scss/accordion-item.component.scss

@@ -1,35 +1,34 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
 @use '../abstract/utils';
 
 .odx-accordion-item {
   $root: &;
 
-  @include motion.transition(color);
-  @include dimensions.padding(math.div(6, 24), top);
-  @include dimensions.padding(math.div(5, 24), bottom);
-
-  border-bottom: 1px solid var(--odx-input-control-outline-color);
+  border-bottom: var(--odx-border-width-thin) solid var(--odx-input-control-outline-color);
   display: block;
+  padding-block-end: calc(var(--odx-control-spacing-md) - var(--odx-border-width-thin));
+  padding-block-start: var(--odx-control-spacing-md);
+  transition: var(--odx-motion-transition-default);
+  transition-property: color;
 
   &__panel {
-    @include dimensions.padding-x(math.div(8, 24));
-    @include dimensions.line-height(1.5, 1);
-    @include motion.transition(background-color);
     @include utils.interactive();
 
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     display: grid;
     grid-template-columns: 1fr auto;
+    line-height: var(--odx-typography-line-height-text-md);
+    padding-block: var(--odx-control-spacing-inline-md);
+    padding-inline: var(--odx-control-spacing-inline-lg);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color;
 
     &:hover {
-      background-color: var(--blue-700-5);
+      background-color: var(--odx-color-background-transparent-hover);
     }
 
     #{$root}--expanded > & {
-      @include typography.font-weight(medium);
+      font-weight: var(--odx-typography-font-weight-medium);
+      letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 
       #{$root}__icon {
         transform: rotateX(180deg);
@@ -38,18 +37,18 @@
   }
 
   &__icon {
-    @include motion.transition(transform);
-
     transform: rotate(0deg);
+    transition: var(--odx-motion-transition-default);
+    transition-property: transform;
   }
 
   &__slot {
-    @include motion.transition(grid-template-rows);
-    @include dimensions.padding-x(math.div(8, 24));
-
     display: grid;
     grid-template-rows: 0fr;
     overflow: hidden;
+    padding-inline: var(--odx-control-spacing-inline-md);
+    transition: var(--odx-motion-transition-default);
+    transition-property: grid-template-rows;
 
     #{$root}--expanded > & {
       grid-template-rows: 1fr;
@@ -61,17 +60,17 @@
     }
 
     &-content {
-      @include motion.transition(opacity visibility);
-
       min-height: 0;
       opacity: 0;
+      transition: var(--odx-motion-transition-default);
+      transition-property: opacity, visibility;
       visibility: hidden;
 
       &::before,
       &::after {
         content: '';
         display: block;
-        height: dimensions.get-size(math.div(8, 24));
+        height: var(--odx-spacing-37);
         width: 100%;
       }
     }

package/scss/action-group.component.scss

@@ -1,12 +1,12 @@
-@use '../abstract/dimensions';
 @use '../abstract/utils';
 @use 'button.component';
 
 .odx-action-group {
-  @include dimensions.height(2, 1.5);
-  @include utils.vertical-center-content(true);
+  block-size: var(--odx-control-height-md);
+  gap: var(--odx-spacing-layout-sm);
+  margin-block: var(--odx-spacing-37);
 
-  gap: dimensions.get-size(0.25);
+  @include utils.vertical-center-content(true);
 
   &--reverse {
     flex-direction: row-reverse;
@@ -16,10 +16,10 @@
     /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
     @extend .odx-button--ghost;
 
-    color: var(--odx-c-text);
+    color: inherit;
 
     &:hover {
-      color: var(--odx-c-text);
+      color: inherit;
     }
   }
 }

package/scss/active-indicator.scss

@@ -1,13 +1,11 @@
-@use '../abstract/motion';
-
 .odx-cdk-active-indicator {
-  @include motion.transition(all);
-
   opacity: 0;
   pointer-events: none;
   position: absolute;
   transform-origin: 0 0;
-  z-index: var(--odx-v-layer-1);
+  transition: var(--odx-motion-transition-default);
+  transition-property: all;
+  z-index: var(--odx-z-level-foreground);
 
   &--horizontal {
     left: 0;