@odx/ui 7.0.1 → 7.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/core-theme.css +1 -1
  3. package/package.json +2 -2
  4. package/scss/_layout.scss +4 -0
  5. package/scss/autocomplete.component.scss +4 -0
  6. package/scss/components/autocomplete.component.scss +4 -0
  7. package/scss/components/form-field.component.scss +2 -0
  8. package/scss/components/modal.component.scss +3 -3
  9. package/scss/components/select.component.scss +3 -1
  10. package/scss/form-field.component.scss +2 -0
  11. package/scss/layout/_layout.scss +4 -0
  12. package/scss/modal.component.scss +3 -3
  13. package/scss/select.component.scss +3 -1
  14. package/scss/variables/_color-palettes.scss +6 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/ui",
3
- "version": "7.0.1",
3
+ "version": "7.2.0",
4
4
  "author": "Drägerwerk AG & Co.KGaA",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "peerDependencies": {
@@ -15,7 +15,7 @@
15
15
  "vite-plugin-static-copy": "2.3.0"
16
16
  },
17
17
  "dependencies": {
18
- "@odx/design-tokens": "^3.4.0"
18
+ "@odx/design-tokens": "^4.0.1"
19
19
  },
20
20
  "files": [
21
21
  "*.css",
package/scss/_layout.scss CHANGED
@@ -93,6 +93,10 @@ $columns: 12 !default;
93
93
  justify-content: space-between;
94
94
  }
95
95
 
96
+ &#{create-selector(direction-column)} {
97
+ flex-direction: column;
98
+ }
99
+
96
100
  &#{create-selector(wrap)} {
97
101
  flex-wrap: wrap;
98
102
  }
package/scss/autocomplete.component.scss CHANGED
@@ -1,9 +1,13 @@
1
+ @use '../abstract/typography';
2
+
1
3
  .odx-autocomplete {
2
4
  &__trigger {
3
5
  height: 100%;
4
6
  }
5
7
 
6
8
  &__control {
9
+ @include typography.prevent-text-overflow();
10
+
7
11
  height: 100%;
8
12
  min-block-size: var(--odx-control-height-md);
9
13
  width: 100%;
package/scss/components/autocomplete.component.scss CHANGED
@@ -1,9 +1,13 @@
1
+ @use '../abstract/typography';
2
+
1
3
  .odx-autocomplete {
2
4
  &__trigger {
3
5
  height: 100%;
4
6
  }
5
7
 
6
8
  &__control {
9
+ @include typography.prevent-text-overflow();
10
+
7
11
  height: 100%;
8
12
  min-block-size: var(--odx-control-height-md);
9
13
  width: 100%;
package/scss/components/form-field.component.scss CHANGED
@@ -123,6 +123,8 @@
123
123
  }
124
124
 
125
125
  #{$control-selector} {
126
+ @include typography.prevent-text-overflow();
127
+
126
128
  font-weight: var(--odx-typography-font-weight-medium);
127
129
  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
128
130
  padding-inline: var(--odx-control-spacing-inline-lg);
package/scss/components/modal.component.scss CHANGED
@@ -5,7 +5,7 @@ $modal-padding: var(--odx-spacing-75);
5
5
  .odx-modal {
6
6
  --odx-modal-margin-y: #{calc(var(--odx-vertical-rythm-base-size) * 2)};
7
7
  --odx-modal-margin-x: var(--odx-spacing-50);
8
- --odx-modal-max-width: calc(var(--odx-layout-width-lg) * 1.5);
8
+ --odx-modal-max-width: calc(var(--odx-layout-width-lg) * 2);
9
9
  --odx-modal-margin-bottom: var(--odx-spacing-75);
10
10
 
11
11
  $root: &;
@@ -87,11 +87,11 @@ $modal-padding: var(--odx-spacing-75);
87
87
  }
88
88
 
89
89
  &.odx-modal--medium {
90
- --odx-modal-max-width: calc(var(--odx-layout-width-md) * 1.5);
90
+ --odx-modal-max-width: calc(var(--odx-layout-width-md) * 2);
91
91
  }
92
92
 
93
93
  &.odx-modal--large {
94
- --odx-modal-max-width: calc(var(--odx-layout-width-lg) * 1.5);
94
+ --odx-modal-max-width: calc(var(--odx-layout-width-lg) * 2.625);
95
95
  }
96
96
 
97
97
  &--sidesheet {
package/scss/components/select.component.scss CHANGED
@@ -32,9 +32,11 @@
32
32
  &__value {
33
33
  @include typography.prevent-text-overflow();
34
34
 
35
- display: flex;
35
+ display: block;
36
36
  flex: 1 1 auto;
37
37
  gap: var(--odx-spacing-25);
38
+ max-width: 100%;
39
+ min-width: 0;
38
40
  overflow: hidden;
39
41
  padding-block: var(--odx-control-spacing-sm);
40
42
  user-select: none;
package/scss/form-field.component.scss CHANGED
@@ -123,6 +123,8 @@
123
123
  }
124
124
 
125
125
  #{$control-selector} {
126
+ @include typography.prevent-text-overflow();
127
+
126
128
  font-weight: var(--odx-typography-font-weight-medium);
127
129
  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
128
130
  padding-inline: var(--odx-control-spacing-inline-lg);
package/scss/layout/_layout.scss CHANGED
@@ -93,6 +93,10 @@ $columns: 12 !default;
93
93
  justify-content: space-between;
94
94
  }
95
95
 
96
+ &#{create-selector(direction-column)} {
97
+ flex-direction: column;
98
+ }
99
+
96
100
  &#{create-selector(wrap)} {
97
101
  flex-wrap: wrap;
98
102
  }
package/scss/modal.component.scss CHANGED
@@ -5,7 +5,7 @@ $modal-padding: var(--odx-spacing-75);
5
5
  .odx-modal {
6
6
  --odx-modal-margin-y: #{calc(var(--odx-vertical-rythm-base-size) * 2)};
7
7
  --odx-modal-margin-x: var(--odx-spacing-50);
8
- --odx-modal-max-width: calc(var(--odx-layout-width-lg) * 1.5);
8
+ --odx-modal-max-width: calc(var(--odx-layout-width-lg) * 2);
9
9
  --odx-modal-margin-bottom: var(--odx-spacing-75);
10
10
 
11
11
  $root: &;
@@ -87,11 +87,11 @@ $modal-padding: var(--odx-spacing-75);
87
87
  }
88
88
 
89
89
  &.odx-modal--medium {
90
- --odx-modal-max-width: calc(var(--odx-layout-width-md) * 1.5);
90
+ --odx-modal-max-width: calc(var(--odx-layout-width-md) * 2);
91
91
  }
92
92
 
93
93
  &.odx-modal--large {
94
- --odx-modal-max-width: calc(var(--odx-layout-width-lg) * 1.5);
94
+ --odx-modal-max-width: calc(var(--odx-layout-width-lg) * 2.625);
95
95
  }
96
96
 
97
97
  &--sidesheet {
package/scss/select.component.scss CHANGED
@@ -32,9 +32,11 @@
32
32
  &__value {
33
33
  @include typography.prevent-text-overflow();
34
34
 
35
- display: flex;
35
+ display: block;
36
36
  flex: 1 1 auto;
37
37
  gap: var(--odx-spacing-25);
38
+ max-width: 100%;
39
+ min-width: 0;
38
40
  overflow: hidden;
39
41
  padding-block: var(--odx-control-spacing-sm);
40
42
  user-select: none;
package/scss/variables/_color-palettes.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '@odx/design-tokens/css';
2
+
1
3
  :root {
2
4
  --white: var(--odx-palette-white);
3
5
  --black: var(--odx-palette-black);
@@ -100,18 +102,10 @@
100
102
  color: var(--odx-color-foreground-rest);
101
103
  }
102
104
 
103
- [odxTheme='light'] {
104
- color-scheme: light;
105
-
106
- * {
107
- color-scheme: light;
108
- }
105
+ :root:has([odxTheme='light']) {
106
+ @extend .odx-light-mode;
109
107
  }
110
108
 
111
- [odxTheme='dark'] {
112
- color-scheme: dark;
113
-
114
- * {
115
- color-scheme: dark;
116
- }
109
+ :root:has([odxTheme='dark']) {
110
+ @extend .odx-dark-mode;
117
111
  }