@odx/ui 6.2.1 → 7.0.1

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@odx/ui",
-  "version": "6.2.1",
+  "version": "7.0.1",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {
     "@odx/icons": "*"
   },
   "devDependencies": {
-    "autoprefixer": "10.4.21",
-    "cssnano": "7.0.6",
+    "autoprefixer": "10.4.22",
+    "cssnano": "7.1.2",
     "postcss-hover-media-feature": "1.0.2",
     "sass": "1.86.0",
     "vite": "6.2.4",
@@ -20,7 +20,8 @@
   "files": [
     "*.css",
     "CHANGELOG.md",
-    "scss"
+    "scss",
+    "assets"
   ],
   "publishConfig": {
     "access": "public",

package/scss/3rdparty/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/_breakpoints.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable container-name-pattern */
 /* stylelint-disable block-closing-brace-newline-after */
 @use 'sass:list';
 @use 'sass:map';

package/scss/_utils.scss

@@ -54,7 +54,7 @@
 @mixin visually-hidden() {
   appearance: none;
   border: 0;
-  clip: rect(0 0 0 0);
+  clip-path: rect(0 0 0 0);
   height: 1px;
   left: 0;
   margin: -1px;
@@ -116,11 +116,11 @@
 }
 
 @mixin interactive($with-box-shadow: true, $focus-within: false) {
-  @include focus-state($with-box-shadow, $focus-within);
-
   cursor: pointer;
   user-select: none;
 
+  @include focus-state($with-box-shadow, $focus-within);
+
   &:disabled,
   &.is-disabled {
     @include non-interactive();

package/scss/abstract/_breakpoints.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable container-name-pattern */
 /* stylelint-disable block-closing-brace-newline-after */
 @use 'sass:list';
 @use 'sass:map';

package/scss/abstract/_typography.scss

@@ -23,7 +23,7 @@
 }
 
 @mixin line-clamp($value) {
-  -webkit-box-orient: block-axis;
+  -webkit-box-orient: vertical;
   display: -webkit-box;
   -webkit-line-clamp: $value;
   overflow-y: clip;

package/scss/abstract/_utils.scss

@@ -54,7 +54,7 @@
 @mixin visually-hidden() {
   appearance: none;
   border: 0;
-  clip: rect(0 0 0 0);
+  clip-path: rect(0 0 0 0);
   height: 1px;
   left: 0;
   margin: -1px;
@@ -116,11 +116,11 @@
 }
 
 @mixin interactive($with-box-shadow: true, $focus-within: false) {
-  @include focus-state($with-box-shadow, $focus-within);
-
   cursor: pointer;
   user-select: none;
 
+  @include focus-state($with-box-shadow, $focus-within);
+
   &:disabled,
   &.is-disabled {
     @include non-interactive();