@odx/ui 5.5.0 → 6.0.0

package/scss/tab-bar.component.scss

@@ -1,22 +1,18 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 .odx-tab-bar {
   $root: &;
 
-  @include dimensions.height(2);
-
-  border-bottom: 1px solid;
-  border-bottom-color: var(--odx-control-outline-color-hover);
+  border-bottom: var(--odx-border-width-thin) solid;
+  border-bottom-color: var(--odx-color-stroke-neutral-subtle);
   display: flex;
+  min-block-size: var(--odx-control-height-lg);
   overflow: hidden;
   position: relative;
 
   &__inner {
-    $gradient-start: dimensions.get-size(1);
-    $gradient-end: dimensions.get-size(3);
+    $gradient-start: var(--odx-spacing-150);
+    $gradient-end: var(--odx-size-450);
     $mask-color: #000000;
 
     display: flex;
@@ -47,49 +43,49 @@
   }
 
   &__panel {
-    @include motion.transition(transform);
-    @include dimensions.padding-x(math.div(12, 24));
-
     display: flex;
     flex: 0 0 auto;
-    gap: dimensions.get-size(math.div(8, 24));
+    gap: var(--odx-spacing-50);
+    padding-inline: var(--odx-spacing-75);
     position: relative;
+    transition: var(--odx-motion-transition-default);
+    transition-property: transform;
   }
 
   &__action {
-    @include dimensions.height(2);
-    @include motion.transition(opacity width padding);
-    @include utils.center-content();
-
     background-color: transparent;
     cursor: pointer;
+    min-block-size: var(--odx-control-height-lg);
     opacity: 0;
     overflow: hidden;
     padding: 0;
     pointer-events: none;
     position: absolute;
     top: 0;
+    transition: var(--odx-motion-transition-default);
+    transition-property: opacity, width, padding;
     user-select: none;
     width: 0;
-    z-index: var(--odx-v-layer-2);
+    z-index: var(--odx-z-level-interactive);
 
-    &.is-active {
-      @include dimensions.padding(math.div(8, 24), (right, left));
+    @include utils.center-content();
 
+    &.is-active {
       opacity: 1;
+      padding-inline: var(--odx-control-spacing-inline-lg);
       pointer-events: all;
       transform: scaleX(1);
-      width: dimensions.get-size(1.5);
+      width: var(--odx-size-225);
     }
 
     .odx-icon {
-      @include dimensions.container(1, 1);
-
       align-items: center;
       color: var(--odx-c-highlight);
       display: flex;
-      font-size: dimensions.get-size(math.div(32, 24));
+      font-size: var(--odx-size-200);
+      height: var(--odx-size-150);
       justify-content: center;
+      width: var(--odx-size-150);
     }
 
     &--prev {
@@ -112,12 +108,11 @@
   }
 
   .odx-tab-bar__indicator {
-    @include dimensions.margin(math.div(4, 24), left);
-
     background-color: var(--odx-c-highlight);
+    block-size: var(--odx-spacing-25);
     bottom: -1px;
-    height: dimensions.get-size(math.div(4, 24));
-    width: dimensions.get-size(2) !important;
+    margin-inline-start: var(--odx-spacing-25);
+    width: var(--odx-size-300) !important;
   }
 
   &:focus-visible {

package/scss/table.component.scss

@@ -1,14 +1,7 @@
-@use 'sass:math';
-@use '../layout/helpers';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
-@use '../abstract/utils';
-@use '../abstract/motion';
-
 .odx-table {
   --odx-table-background-color: var(--white);
-  --odx-table-head-border-color: var(--gray-900);
-  --odx-table-cell-border-color: var(--gray-200);
+  --odx-table-head-border-color: var(--odx-color-stroke-neutral-strong);
+  --odx-table-cell-border-color: var(--odx-color-stroke-neutral-subtle);
   --odx-table-cell-background-color-hover: var(--blue-700-5);
   --odx-table-cell-background-color-striped: var(--gray-50);
   --odx-table-cell-background-color-active: var(--cyan-500-15);
@@ -24,16 +17,15 @@
 
   &__header-cell,
   &__cell {
-    @include dimensions.padding-x(0.5);
-
     border-bottom-style: solid;
     border-bottom-width: 1px;
+    padding-inline: var(--odx-size-125);
     text-align: left;
   }
 
   &__cell {
+    block-size: var(--odx-control-height-lg);
     border-bottom-color: var(--odx-table-cell-border-color);
-    height: dimensions.get-size(2);
     vertical-align: middle;
   }
 
@@ -42,14 +34,14 @@
   }
 
   &__header-row {
-    height: dimensions.get-size(2);
+    block-size: var(--odx-control-height-lg);
   }
 
   &__header-cell-title {
     align-items: center;
+    block-size: var(--odx-control-height-lg);
     display: flex;
-    gap: dimensions.get-size(math.div(8, 24));
-    height: dimensions.get-size(2);
+    gap: var(--odx-spacing-50);
     user-select: none;
 
     //  firefox patch for headers alignment, it needs some content to be able to align the header
@@ -64,13 +56,13 @@
   }
 
   &__header-cell {
-    @include typography.font-weight(medium);
-
     border-bottom-color: var(--odx-table-head-border-color);
+    font-weight: var(--odx-typography-font-weight-medium);
+    letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 
     .odx-form-field {
-      height: dimensions.get-size(2);
       justify-content: center;
+      min-block-size: var(--odx-control-height-lg);
       padding: 0;
 
       &__info {
@@ -88,7 +80,8 @@
   &__body {
     /* stylelint-disable-next-line no-descending-specificity */
     .odx-table__row {
-      @include motion.transition(background-color);
+      transition: var(--odx-motion-transition-default);
+      transition-property: background-color;
 
       &:hover {
         background-color: var(--odx-table-cell-background-color-hover);

package/scss/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/timepicker.component.scss

@@ -1,16 +1,11 @@
-@use 'sass:math';
 @use '../abstract/utils';
-@use '../layout/helpers';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
-@use '../abstract/motion';
 
 .odx-timepicker {
   $root: &;
 
   @include utils.vertical-center-content();
 
-  gap: dimensions.get-size(math.div(4, 24));
+  gap: var(--odx-spacing-25);
   justify-content: space-between;
   width: 100%;
 
@@ -19,7 +14,7 @@
   }
 
   &__trigger-wrapper {
-    gap: dimensions.get-size(math.div(1, 3));
+    gap: var(--odx-spacing-50);
   }
 
   input[odxTimepickerControl] {
@@ -27,9 +22,9 @@
     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;
     }
 
@@ -41,7 +36,7 @@
   &__option-list {
     display: flex;
     flex-direction: column;
-    max-height: calc(7 * dimensions.get-size(1.5) + var(--odx-vertical-rythm-base-size));
+    max-height: calc(var(--odx-vertical-rythm-base-size) * 11.5);
   }
 
   &-option {

package/scss/toast-item.component.scss

@@ -1,19 +1,14 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
-@use '../abstract/utils';
-
 .odx-toast-item {
-  --odx-c-default: var(--blue-50);
-  --odx-c-warning: var(--yellow-50);
-  --odx-c-danger: var(--red-00);
-  --odx-c-success: var(--green-00);
+  --odx-c-default: var(--odx-color-background-primary-subtle);
+  --odx-c-warning: var(--odx-color-background-warning-subtle);
+  --odx-c-danger: var(--odx-color-background-danger-subtle);
+  --odx-c-success: var(--odx-color-background-success-subtle);
   --odx-c-warning-strong: var(--yellow-500);
   --odx-c-danger-strong: var(--red-500);
 
   $root: &;
   $variants: default, warning, danger, success, warning-strong, danger-strong;
-  $gap: dimensions.get-size(math.div(12, 24));
+  $gap: var(--odx-spacing-75);
 
   border-radius: var(--odx-toast-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
@@ -27,9 +22,8 @@
   }
 
   &__text-content {
-    @include typography.font-size(-1);
-
     flex: 1;
+    font-size: var(--odx-typography-font-size-text-sm);
     overflow: auto;
   }
 
@@ -38,7 +32,7 @@
   }
 
   &__description {
-    max-height: dimensions.get-size(5);
+    max-block-size: calc(var(--odx-size-600) + var(--odx-spacing-150));
     overflow-wrap: break-word;
   }
 
@@ -76,13 +70,13 @@
   &--danger-strong {
     --odx-c-text: var(--white);
 
-    :root:has([odxTheme='dark'], .odx-theme-dark) & {
+    :root:has([odxTheme='dark'], .odx-dark-mode, .odx-theme-dark) & {
       --odx-c-text: var(--black);
     }
   }
 
   &--warning-strong {
-    :root:has([odxTheme='dark'], .odx-theme-dark) & {
+    :root:has([odxTheme='dark'], .odx-dark-mode, .odx-theme-dark) & {
       --odx-c-text: var(--white);
     }
   }

package/scss/toast.component.scss

@@ -1,18 +1,15 @@
-@use 'sass:math';
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/typography';
 
 .odx-toast-container {
-  --odx-toast-outer-offset: #{dimensions.get-size(math.div(8, 24))};
-  --odx-toast-border-radius: #{dimensions.get-size(math.div(6, 24))};
+  --odx-toast-outer-offset: var(--odx-spacing-50);
+  --odx-toast-border-radius: var(--odx-border-radius-md);
 
   background-color: transparent;
   border: none;
   display: flex;
   flex-direction: column;
-  margin: #{dimensions.get-size(math.div(4, 24))} var(--odx-toast-outer-offset) auto auto;
-  max-width: min(calc(100dvw - 2 * var(--odx-toast-outer-offset)), dimensions.get-size(20));
+  margin: var(--odx-spacing-25) var(--odx-toast-outer-offset) auto auto;
+  max-width: min(calc(100dvw - 2 * var(--odx-toast-outer-offset)), calc(var(--odx-vertical-rythm-base-size) * 20));
   overflow: clip;
   padding-top: var(--odx-toast-outer-offset);
 
@@ -25,7 +22,7 @@
   }
 
   @include breakpoints.up(phone) {
-    --odx-toast-outer-offset: #{dimensions.get-size(math.div(20, 24))};
+    --odx-toast-outer-offset: var(--odx-size-125);
 
     margin-top: 0;
   }

package/scss/toggle-button-group.component.scss

@@ -1,28 +1,27 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
 @use '../abstract/utils';
 
 .odx-toggle-button-group {
-  --odx-toggle-button-border-radius: 2px;
+  --odx-toggle-button-border-radius: var(--odx-border-radius-control);
 
   $root: &;
 
-  @include dimensions.height(2, 1.5);
-  @include dimensions.padding-x(math.div(6, 24));
-  @include motion.transition(background-color);
-  @include utils.center-content(true);
-
-  border-radius: var(--odx-v-border-radius-controls);
-  column-gap: dimensions.get-size(math.div(6, 24));
+  border-radius: var(--odx-border-radius-control);
+  column-gap: var(--odx-spacing-37);
+  margin-block: var(--odx-spacing-37);
+  min-block-size: var(--odx-control-height-md);
+  padding-inline: var(--odx-control-spacing-inline-md);
   position: relative;
-  z-index: var(--odx-v-layer-1);
+  transition: var(--odx-motion-transition-default);
+  transition-property: background-color;
+  z-index: var(--odx-z-level-base);
+
+  @include utils.center-content(true);
 
   &__indicator {
     @include utils.with-outline(var(--odx-v-outline-width-bold));
 
     background-color: var(--odx-c-highlight);
-    block-size: dimensions.get-size(math.div(28, 24));
+    block-size: var(--odx-size-175);
     border-radius: var(--odx-toggle-button-border-radius);
     outline-width: var(--odx-v-outline-width-bold);
 
@@ -48,7 +47,7 @@
 
   .odx-toggle-button {
     flex: 1 1 auto;
-    z-index: var(--odx-v-layer-2);
+    z-index: var(--odx-z-level-interactive);
   }
 
   &.has-error:not(.is-disabled, .is-readonly) {

package/scss/toggle-button.component.scss

@@ -1,20 +1,18 @@
-@use 'sass:math';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
 @use '../abstract/utils';
 
 .odx-toggle-button {
   $root: &;
 
-  @include motion.transition(color);
-  @include typography.font-size(0);
-  @include typography.font-weight(medium);
-  @include utils.vertical-center-content();
-
   color: currentcolor;
+  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);
+  transition: var(--odx-motion-transition-default);
+  transition-property: color;
   user-select: none;
 
+  @include utils.vertical-center-content();
+
   &.is-active {
     color: var(--odx-c-highlight-text);
   }
@@ -37,13 +35,14 @@
   }
 
   &__indicator {
-    @include motion.transition(background-color);
-    @include dimensions.padding-x(math.div(1, 3));
-    @include utils.vertical-center-content();
-
-    block-size: dimensions.get-size(math.div(28, 24));
+    block-size: var(--odx-size-175);
     border-radius: var(--odx-toggle-button-border-radius);
-    column-gap: dimensions.get-size(math.div(1, 6));
+    column-gap: var(--odx-spacing-25);
+    padding-inline: var(--odx-control-spacing-inline-lg);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color;
+
+    @include utils.vertical-center-content();
 
     #{$root}.is-readonly &,
     #{$root}.is-disabled &,
@@ -58,9 +57,8 @@
   }
 
   &__label {
-    @include dimensions.padding-y(math.div(1, 6));
-
     cursor: pointer;
+    padding-block: var(--odx-control-spacing-sm);
     text-align: center;
     width: 100%;
 

package/scss/tooltip.component.scss

@@ -1,26 +1,21 @@
-@use '../abstract/dimensions';
-@use '../abstract/utils';
-@use '../abstract/typography';
-
 :root {
-  --odx-tooltip-background-color: var(--blue-800);
+  --odx-tooltip-background-color: var(--odx-color-background-level-3);
   --odx-tooltip-color: var(--odx-c-text-inverse);
-  --odx-tooltip-size-small: #{dimensions.get-size(5)};
-  --odx-tooltip-size-medium: #{dimensions.get-size(10)};
-  --odx-tooltip-size-large: #{dimensions.get-size(15)};
+  --odx-tooltip-size-small: var(--odx-layout-width-xs);
+  --odx-tooltip-size-medium: var(--odx-layout-width-sm);
+  --odx-tooltip-size-large: var(--odx-layout-width-md);
 }
 
 .odx-tooltip {
   $sizes: small, medium, large;
 
-  @include dimensions.padding(0.5);
-  @include typography.font-size(-1);
-
   background-color: var(--odx-tooltip-background-color);
-  border-radius: var(--odx-v-border-radius);
+  border-radius: var(--odx-border-radius-md);
   color: var(--odx-tooltip-color);
   display: block;
+  font-size: var(--odx-typography-font-size-text-sm);
   overflow: hidden;
+  padding: var(--odx-spacing-75);
 
   @each $size in $sizes {
     &--#{$size} {
@@ -31,7 +26,7 @@
   &-overlay {
     .odx-cdk-connected-overlay-arrow {
       background-color: var(--odx-tooltip-background-color);
-      z-index: var(--odx-v-layer-1);
+      z-index: var(--odx-z-level-foreground);
     }
   }
 }

package/scss/variables/_color-palettes-dark.scss

@@ -1,53 +1,53 @@
 @use '../abstract/utils';
 
 @include utils.theme-selector(dark) {
-  --white: #293642;
-  --white-dark: #060a12;
-  --black: #ffffff;
-  --black-20: #{rgba(#000000, 60%)};
-
-  --focus-bg: #284e68;
-
-  --white-60: #{rgba(var(--white), 0.6)};
-
-  --gray-50: #2e3d49;
-  --gray-100: #344351;
-  --gray-200: #3e5160;
-  --gray-300: #495e6e;
-  --gray-400: #556c7c;
-  --gray-500: #607a8a;
-  --gray-600: #6d8797;
-  --gray-700: #7d94a1;
-  --gray-800: #e9eef4;
-  --gray-900: #9cacb4;
-
-  --blue-50: #455e85;
-  --blue-50-5: #{rgba(#455e85, 0.1)};
-  --blue-100: #043c95;
-  --blue-600: #a8c4f0;
-  --blue-700: #cbe9ff;
-  --blue-700-5: #{rgba(#cbe9ff, 0.1)};
-  --blue-700-10: #{rgba(#cbe9ff, 0.2)};
-  --blue-900: #d5e2f6;
-
-  --cyan-50: #002766;
-  --cyan-100: #003c66;
-  --cyan-200: #00508a;
-  --cyan-300: #0065ad;
-  --cyan-400: #007ad1;
-  --cyan-600: #1fa2ff;
-  --cyan-700: #47b3ff;
-  --cyan-800: #70c4ff;
-  --cyan-900: #9dd7ff;
-
-  --red-00: #4b3138;
-  --red-50: #724956;
-  --red-100: #bc0000;
-  --red-700: #ff9898;
-  --red-800: #ffb4b4;
-  --red-900: #ffe0e3;
-
-  --yellow-50: #5f5439;
-
-  --green-00: #355e54;
+  --white: var(--odx-palette-coolgray-130);
+  --white-dark: var(--odx-palette-black);
+  --black: var(--odx-palette-white);
+  --black-20: var(--odx-palette-black-60);
+
+  --focus-bg: var(--odx-palette-cyan-90);
+
+  --white-60: var(--odx-palette-coolgray-120);
+
+  --gray-50: var(--odx-palette-coolgray-120);
+  --gray-100: var(--odx-palette-coolgray-110);
+  --gray-200: var(--odx-palette-coolgray-100);
+  --gray-300: var(--odx-palette-coolgray-90);
+  --gray-400: var(--odx-palette-coolgray-80);
+  --gray-500: var(--odx-palette-coolgray-70);
+  --gray-600: var(--odx-palette-coolgray-60);
+  --gray-700: var(--odx-palette-coolgray-50);
+  --gray-800: var(--odx-palette-coolgray-10);
+  --gray-900: var(--odx-palette-sandgray-70);
+
+  --blue-50: var(--odx-palette-blue-70);
+  --blue-50-5: var(--odx-palette-blue-80-5);
+  --blue-100: var(--odx-palette-blue-70);
+  --blue-600: var(--odx-palette-blue-20);
+  --blue-700: var(--odx-palette-blue-10);
+  --blue-700-5: var(--odx-palette-blue-80-5);
+  --blue-700-10: var(--odx-palette-blue-80-15);
+  --blue-900: var(--odx-palette-blue-10);
+
+  --cyan-50: var(--odx-palette-blue-80);
+  --cyan-100: var(--odx-palette-cyan-100);
+  --cyan-200: var(--odx-palette-cyan-90);
+  --cyan-300: var(--odx-palette-cyan-80);
+  --cyan-400: var(--odx-palette-cyan-70);
+  --cyan-600: var(--odx-palette-cyan-50);
+  --cyan-700: var(--odx-palette-cyan-40);
+  --cyan-800: var(--odx-palette-cyan-30);
+  --cyan-900: var(--odx-palette-cyan-20);
+
+  --red-00: var(--odx-palette-red-100);
+  --red-50: var(--odx-palette-red-90);
+  --red-100: var(--odx-palette-red-80);
+  --red-700: var(--odx-palette-red-20);
+  --red-800: var(--odx-palette-red-10);
+  --red-900: var(--odx-palette-red-00);
+
+  --yellow-50: var(--odx-palette-yellow-100);
+
+  --green-00: var(--odx-palette-green-90);
 }