@odx/ui 6.2.1 → 7.0.0

package/scss/ag-grid/theme.scss

@@ -1,9 +1,9 @@
-@use '@odx/icons/core/core-utils' as icons;
 @use '../../abstract/dimensions';
 @use '../../abstract/typography';
 @use '../../abstract/motion';
 @use '../../abstract/utils';
 @use 'sass:math';
+@use '@odx/icons/scss' as odxIcons;
 
 .ag-theme-odx {
   --ag-border-color: var(--odx-c-separator);
@@ -21,60 +21,6 @@
   --ag-font-family: var(--odx-typography-font-family);
   --ag-font-size: var(--odx-typography-base-size);
 
-  --ag-icon-size: #{typography.get-font-size(1)};
-  --ag-icon-font-family: #{icons.get-font-family()};
-  --ag-icon-font-code-aggregation: '#{icons.get-icon-glyph(aggregation)}';
-  --ag-icon-font-code-arrows: '#{icons.get-icon-glyph(chevrons)}';
-  --ag-icon-font-code-asc: '#{icons.get-icon-glyph(ascending)}';
-  --ag-icon-font-code-cancel: '#{icons.get-icon-glyph(close)}';
-  --ag-icon-font-code-chart: '#{icons.get-icon-glyph(placeholder)}';
-  --ag-icon-font-code-checkbox-checked: '#{icons.get-icon-glyph(check)}';
-  --ag-icon-font-code-checkbox-indeterminate: '#{icons.get-icon-glyph(minus)}';
-  --ag-icon-font-code-checkbox-unchecked: '';
-  --ag-icon-font-code-color-picker: '#{icons.get-icon-glyph(colorpicker)}';
-  --ag-icon-font-code-columns: '#{icons.get-icon-glyph(column)}';
-  --ag-icon-font-code-contracted: '#{icons.get-icon-glyph(chevron-right)}';
-  --ag-icon-font-code-copy: '#{icons.get-icon-glyph(copy-content)}';
-  --ag-icon-font-code-cut: '#{icons.get-icon-glyph(cut)}';
-  --ag-icon-font-code-cross: '#{icons.get-icon-glyph(close)}';
-  --ag-icon-font-code-csv: '#{icons.get-icon-glyph(file)}';
-  --ag-icon-font-code-desc: '#{icons.get-icon-glyph(descending)}';
-  --ag-icon-font-code-excel: '#{icons.get-icon-glyph(file-excel)}';
-  --ag-icon-font-code-expanded: '#{icons.get-icon-glyph(chevron-left)}';
-  --ag-icon-font-code-eye-slash: '#{icons.get-icon-glyph(view-off)}';
-  --ag-icon-font-code-eye: '#{icons.get-icon-glyph(view)}';
-  --ag-icon-font-code-filter: '#{icons.get-icon-glyph(filter)}';
-  --ag-icon-font-code-first: '#{icons.get-icon-glyph(chevron-left-end)}';
-  --ag-icon-font-code-grip: '#{icons.get-icon-glyph(placeholder)}';
-  --ag-icon-font-code-group: '#{icons.get-icon-glyph(group)}';
-  --ag-icon-font-code-last: '#{icons.get-icon-glyph(chevron-right-end)}';
-  --ag-icon-font-code-left: '#{icons.get-icon-glyph(arrow-left)}';
-  --ag-icon-font-code-linked: '#{icons.get-icon-glyph(placeholder)}';
-  --ag-icon-font-code-loading: '#{icons.get-icon-glyph(loading)}';
-  --ag-icon-font-code-maximize: '#{icons.get-icon-glyph(maximize)}';
-  --ag-icon-font-code-menu: '#{icons.get-icon-glyph(menu)}';
-  --ag-icon-font-code-minimize: '#{icons.get-icon-glyph(minimize)}';
-  --ag-icon-font-code-next: '#{icons.get-icon-glyph(chevron-right)}';
-  --ag-icon-font-code-none: '#{icons.get-icon-glyph(sortable)}';
-  --ag-icon-font-code-not-allowed: '#{icons.get-icon-glyph(blocked)}';
-  --ag-icon-font-code-paste: '#{icons.get-icon-glyph(paste)}';
-  --ag-icon-font-code-pin: '#{icons.get-icon-glyph(pin)}';
-  --ag-icon-font-code-pivot: '#{icons.get-icon-glyph(placeholder)}';
-  --ag-icon-font-code-previous: '#{icons.get-icon-glyph(chevron-left)}';
-  --ag-icon-font-code-radio-button-off: '';
-  --ag-icon-font-code-radio-button-on: '';
-  --ag-icon-font-code-right: '#{icons.get-icon-glyph(arrow-right)}';
-  --ag-icon-font-code-save: '#{icons.get-icon-glyph(save)}';
-  --ag-icon-font-code-small-down: '#{icons.get-icon-glyph(chevron-down)}';
-  --ag-icon-font-code-small-left: '#{icons.get-icon-glyph(chevron-left)}';
-  --ag-icon-font-code-small-right: '#{icons.get-icon-glyph(chevron-right)}';
-  --ag-icon-font-code-small-up: '#{icons.get-icon-glyph(chevron-up)}';
-  --ag-icon-font-code-tick: '#{icons.get-icon-glyph(check)}';
-  --ag-icon-font-code-tree-closed: '#{icons.get-icon-glyph(chevron-right)}';
-  --ag-icon-font-code-tree-indeterminate: '#{icons.get-icon-glyph(minus)}';
-  --ag-icon-font-code-tree-open: '#{icons.get-icon-glyph(chevron-down)}';
-  --ag-icon-font-code-unlinked: '#{icons.get-icon-glyph(placeholder)}';
-
   --ag-grid-size: #{dimensions.get-size(0.25)};
   --ag-widget-vertical-spacing: #{dimensions.get-size(0.5)};
 
@@ -83,6 +29,8 @@
   --ag-table-line-height: #{dimensions.get-size(1.5)};
   --ag-list-item-height: #{dimensions.get-size(1.5)};
 
+  --ag-icon-size: var(--odx-size-125);
+
   input[class^='ag-'][type='text'] {
     background: var(--gray-100);
     border: var(--ag-borders-critical) var(--gray100);
@@ -380,4 +328,244 @@
       }
     }
   }
+
+  .ag-disabled {
+    --ag-icon-font-color: var(--ag-disabled-foreground-color);
+  }
+
+  .ag-icon {
+    &::before,
+    &::after {
+      content: none;
+    }
+
+    &-aggregation {
+      @include odxIcons.icon('core::aggregation');
+    }
+
+    &-arrows {
+      @include odxIcons.icon('core::chevrons');
+    }
+
+    &-asc {
+      @include odxIcons.icon('core::ascending');
+    }
+
+    &-cancel {
+      @include odxIcons.icon('core::cancel');
+    }
+
+    &-chart {
+      @include odxIcons.icon('core::bar-chart');
+    }
+
+    &-chevron-up {
+      @include odxIcons.icon('core::chevron-up');
+    }
+
+    &-chevron-down {
+      @include odxIcons.icon('core::chevron-down');
+    }
+
+    &-chevron-left {
+      @include odxIcons.icon('core::chevron-left');
+    }
+
+    &-chevron-right {
+      @include odxIcons.icon('core::chevron-right');
+    }
+
+    &-color-picker {
+      @include odxIcons.icon('core::colorpicker');
+    }
+
+    &-columns {
+      @include odxIcons.icon('core::column');
+    }
+
+    &-contracted {
+      @include odxIcons.icon('core::chevron-right');
+    }
+
+    &-copy {
+      @include odxIcons.icon('core::copy-content');
+    }
+
+    &-cut {
+      @include odxIcons.icon('core::cut');
+    }
+
+    &-cross {
+      @include odxIcons.icon('core::close');
+    }
+
+    &-csv {
+      @include odxIcons.icon('core::file-csv');
+    }
+
+    &-desc {
+      @include odxIcons.icon('core::descending');
+    }
+
+    &-down {
+      @include odxIcons.icon('core::arrow-down');
+    }
+
+    &-edit {
+      @include odxIcons.icon('core::edit');
+    }
+
+    &-excel {
+      @include odxIcons.icon('core::file-excel');
+    }
+
+    &-expanded {
+      @include odxIcons.icon('core::chevron-left');
+    }
+
+    &-eye-slash {
+      @include odxIcons.icon('core::view-off');
+    }
+
+    &-eye {
+      @include odxIcons.icon('core::view');
+    }
+
+    &-filter {
+      @include odxIcons.icon('core::filter');
+    }
+
+    &-first {
+      @include odxIcons.icon('core::chevron-left-end');
+    }
+
+    &-grip {
+      @include odxIcons.icon('core::rearrange');
+    }
+
+    &-group {
+      @include odxIcons.icon('core::group');
+    }
+
+    &-last {
+      @include odxIcons.icon('core::chevron-right-end');
+    }
+
+    &-left {
+      @include odxIcons.icon('core::arrow-left');
+    }
+
+    &-linked {
+      @include odxIcons.icon('core::link');
+    }
+
+    &-loading {
+      @include odxIcons.icon('core::loading');
+    }
+
+    &-maximize {
+      @include odxIcons.icon('core::maximize');
+    }
+
+    &-menu {
+      @include odxIcons.icon('core::menu');
+    }
+
+    &-menu-alt {
+      @include odxIcons.icon('core::more');
+    }
+
+    &-minimize {
+      @include odxIcons.icon('core::minimize');
+    }
+
+    &-minus {
+      @include odxIcons.icon('core::minus');
+    }
+
+    &-next {
+      @include odxIcons.icon('core::chevron-right');
+    }
+
+    &-none {
+      @include odxIcons.icon('core::sortable');
+    }
+
+    &-not-allowed {
+      @include odxIcons.icon('core::error');
+    }
+
+    &-paste {
+      @include odxIcons.icon('core::paste');
+    }
+
+    &-pin {
+      @include odxIcons.icon('core::pin');
+    }
+
+    &-pivot {
+      @include odxIcons.icon('core::table');
+    }
+
+    &-plus {
+      @include odxIcons.icon('core::plus');
+    }
+
+    &-previous {
+      @include odxIcons.icon('core::chevron-left');
+    }
+
+    &-right {
+      @include odxIcons.icon('core::arrow-right');
+    }
+
+    &-save {
+      @include odxIcons.icon('core::save');
+    }
+
+    &-small-down {
+      @include odxIcons.icon('core::chevron-down');
+    }
+
+    &-small-left {
+      @include odxIcons.icon('core::chevron-left');
+    }
+
+    &-small-right {
+      @include odxIcons.icon('core::chevron-right');
+    }
+
+    &-small-up {
+      @include odxIcons.icon('core::chevron-up');
+    }
+
+    &-tick {
+      @include odxIcons.icon('core::check');
+    }
+
+    &-tree-closed {
+      @include odxIcons.icon('core::chevron-right');
+    }
+
+    &-tree-indeterminate {
+      @include odxIcons.icon('core::minus');
+    }
+
+    &-tree-open {
+      @include odxIcons.icon('core::chevron-down');
+    }
+
+    &-unlinked {
+      @include odxIcons.icon('core::link-off');
+    }
+
+    &-up {
+      @include odxIcons.icon('core::arrow-up');
+    }
+
+    background: unset;
+    block-size: var(--ag-icon-size);
+    display: flex;
+    inline-size: var(--ag-icon-size);
+  }
 }

package/scss/breadcrumbs.component.scss

@@ -1,5 +1,5 @@
 @use '../abstract/utils';
-@use '@odx/icons/core/core-utils' as icons;
+@use '@odx/icons/scss' as odxIcons;
 
 .odx-breadcrumbs {
   flex-wrap: wrap;
@@ -10,21 +10,25 @@
   @include utils.vertical-center-content();
 
   .odx-link {
+    align-items: center;
+    display: inline-flex;
     white-space: nowrap;
 
     &:not(:last-child) {
-      margin-inline-end: var(--odx-size-125);
+      @include odxIcons.icon('core::chevron-right');
 
       &::after {
+        block-size: var(--odx-spacing-75);
         color: var(--gray-500);
-        content: icons.get-icon-glyph('chevron-right');
         display: inline-block;
-        font-family: icons.get-font-family();
-        font-size: var(--odx-size-75);
+        inline-size: var(--odx-spacing-75);
         margin-inline-start: var(--odx-spacing-75);
         pointer-events: none;
-        position: absolute;
       }
+
+      background: unset;
+      block-size: unset;
+      inline-size: unset;
     }
 
     &:visited {

package/scss/button.component.scss

@@ -49,9 +49,9 @@
   }
 
   > .odx-avatar {
-    @include avatar.avatar-size(1.5, math.div(32, 24), -1, 1);
-
     margin-inline: calc(-1 * var(--odx-spacing-75));
+
+    @include avatar.avatar-size(1.5, math.div(32, 24), -1, 1);
   }
 
   &[data-breakpoint]:has(> .odx-icon, > .odx-avatar) {

package/scss/calendar.component.scss

@@ -215,7 +215,7 @@
 
     #{$root}__season {
       display: grid;
-      grid-gap: var(--odx-size-300);
+      gap: var(--odx-size-300);
       grid-template-columns: repeat(3, 1fr);
       margin: 2px 0;
       padding-inline: calc(var(--odx-spacing-150) + var(--odx-spacing-25));
@@ -234,7 +234,7 @@
 
     #{$root}__year-row {
       display: grid;
-      grid-gap: var(--odx-size-225);
+      gap: var(--odx-size-225);
       grid-template-columns: repeat(3, 1fr);
       margin: 2px 0;
     }

package/scss/components/breadcrumbs.component.scss

@@ -1,5 +1,5 @@
 @use '../abstract/utils';
-@use '@odx/icons/core/core-utils' as icons;
+@use '@odx/icons/scss' as odxIcons;
 
 .odx-breadcrumbs {
   flex-wrap: wrap;
@@ -10,21 +10,25 @@
   @include utils.vertical-center-content();
 
   .odx-link {
+    align-items: center;
+    display: inline-flex;
     white-space: nowrap;
 
     &:not(:last-child) {
-      margin-inline-end: var(--odx-size-125);
+      @include odxIcons.icon('core::chevron-right');
 
       &::after {
+        block-size: var(--odx-spacing-75);
         color: var(--gray-500);
-        content: icons.get-icon-glyph('chevron-right');
         display: inline-block;
-        font-family: icons.get-font-family();
-        font-size: var(--odx-size-75);
+        inline-size: var(--odx-spacing-75);
         margin-inline-start: var(--odx-spacing-75);
         pointer-events: none;
-        position: absolute;
       }
+
+      background: unset;
+      block-size: unset;
+      inline-size: unset;
     }
 
     &:visited {

package/scss/components/button.component.scss

@@ -49,9 +49,9 @@
   }
 
   > .odx-avatar {
-    @include avatar.avatar-size(1.5, math.div(32, 24), -1, 1);
-
     margin-inline: calc(-1 * var(--odx-spacing-75));
+
+    @include avatar.avatar-size(1.5, math.div(32, 24), -1, 1);
   }
 
   &[data-breakpoint]:has(> .odx-icon, > .odx-avatar) {

package/scss/components/calendar.component.scss

@@ -215,7 +215,7 @@
 
     #{$root}__season {
       display: grid;
-      grid-gap: var(--odx-size-300);
+      gap: var(--odx-size-300);
       grid-template-columns: repeat(3, 1fr);
       margin: 2px 0;
       padding-inline: calc(var(--odx-spacing-150) + var(--odx-spacing-25));
@@ -234,7 +234,7 @@
 
     #{$root}__year-row {
       display: grid;
-      grid-gap: var(--odx-size-225);
+      gap: var(--odx-size-225);
       grid-template-columns: repeat(3, 1fr);
       margin: 2px 0;
     }

package/scss/components/form-field.component.scss

@@ -257,9 +257,9 @@
 .odx-form-field.is-readonly,
 .odx-form-group:has(.odx-form-field.is-readonly) {
   .odx-form-field__info {
-    @include utils.non-interactive();
-
     opacity: 0;
+
+    @include utils.non-interactive();
   }
 }
 

package/scss/components/icon.component.scss

@@ -1,20 +1,20 @@
 $icon-sizes: (
   small: var(--odx-size-100),
+  medium: var(--odx-size-150),
   large: var(--odx-size-200),
   xlarge: var(--odx-size-300),
 );
 
-.odx-icon {
+odx-icon {
   flex: 0 0 auto;
-  font-size: var(--odx-size-150);
 
   @each $size, $font-size in $icon-sizes {
-    &--#{$size} {
+    &[size='#{$size}'] {
       font-size: $font-size;
     }
   }
 
-  &--inline {
+  &[inline] {
     font-size: inherit;
     vertical-align: -0.1em;
   }

package/scss/components/logo.component.scss

@@ -10,7 +10,7 @@
   background-color: var(--odx-logo-color);
   block-size: var(--odx-spacing-150);
   display: inline-block;
-  mask-image: url('../assets/images/logo.svg');
+  mask-image: url('assets/images/logo.svg');
   mask-repeat: no-repeat;
 
   &--inverse {

package/scss/components/main-menu.component.scss

@@ -114,7 +114,7 @@
     > .odx-text {
       line-height: var(--odx-typography-line-height-text-sm);
       opacity: 0.3;
-      word-wrap: break-word;
+      overflow-wrap: break-word;
     }
   }
 

package/scss/components/menu.component.scss

@@ -32,7 +32,7 @@
     .odx-action-group {
       align-items: flex-start;
       display: grid;
-      grid-gap: $grid-gap;
+      gap: $grid-gap;
       grid-template-columns: repeat(3, 1fr);
 
       .odx-button {

package/scss/components/paginator.component.scss

@@ -6,7 +6,7 @@
   justify-content: flex-end;
 
   &:has(.odx-paginator__summary) {
-    grid-gap: var(--odx-size-225);
+    gap: var(--odx-size-225);
     grid-template-columns: auto auto;
   }
 
@@ -17,7 +17,7 @@
   }
 
   .odx-action-group {
-    grid-gap: var(--odx-spacing-75);
+    gap: var(--odx-spacing-75);
     min-block-size: var(--odx-spacing-150);
   }
 

package/scss/form-field.component.scss

@@ -257,9 +257,9 @@
 .odx-form-field.is-readonly,
 .odx-form-group:has(.odx-form-field.is-readonly) {
   .odx-form-field__info {
-    @include utils.non-interactive();
-
     opacity: 0;
+
+    @include utils.non-interactive();
   }
 }
 

package/scss/icon.component.scss

@@ -1,20 +1,20 @@
 $icon-sizes: (
   small: var(--odx-size-100),
+  medium: var(--odx-size-150),
   large: var(--odx-size-200),
   xlarge: var(--odx-size-300),
 );
 
-.odx-icon {
+odx-icon {
   flex: 0 0 auto;
-  font-size: var(--odx-size-150);
 
   @each $size, $font-size in $icon-sizes {
-    &--#{$size} {
+    &[size='#{$size}'] {
       font-size: $font-size;
     }
   }
 
-  &--inline {
+  &[inline] {
     font-size: inherit;
     vertical-align: -0.1em;
   }

package/scss/logo.component.scss

@@ -10,7 +10,7 @@
   background-color: var(--odx-logo-color);
   block-size: var(--odx-spacing-150);
   display: inline-block;
-  mask-image: url('../assets/images/logo.svg');
+  mask-image: url('assets/images/logo.svg');
   mask-repeat: no-repeat;
 
   &--inverse {

package/scss/main-menu.component.scss

@@ -114,7 +114,7 @@
     > .odx-text {
       line-height: var(--odx-typography-line-height-text-sm);
       opacity: 0.3;
-      word-wrap: break-word;
+      overflow-wrap: break-word;
     }
   }
 

package/scss/menu.component.scss

@@ -32,7 +32,7 @@
     .odx-action-group {
       align-items: flex-start;
       display: grid;
-      grid-gap: $grid-gap;
+      gap: $grid-gap;
       grid-template-columns: repeat(3, 1fr);
 
       .odx-button {

package/scss/paginator.component.scss

@@ -6,7 +6,7 @@
   justify-content: flex-end;
 
   &:has(.odx-paginator__summary) {
-    grid-gap: var(--odx-size-225);
+    gap: var(--odx-size-225);
     grid-template-columns: auto auto;
   }
 
@@ -17,7 +17,7 @@
   }
 
   .odx-action-group {
-    grid-gap: var(--odx-spacing-75);
+    gap: var(--odx-spacing-75);
     min-block-size: var(--odx-spacing-150);
   }