@odx/ui 5.4.0 → 5.5.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 (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/core-theme.css +1 -1
  3. package/package.json +1 -1
  4. package/scss/_color-palettes-dark.scss +11 -50
  5. package/scss/_color-palettes.scss +42 -94
  6. package/scss/card.component.scss +35 -6
  7. package/scss/components/card.component.scss +35 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/ui",
3
- "version": "5.4.0",
3
+ "version": "5.5.0",
4
4
  "author": "Drägerwerk AG & Co.KGaA",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "peerDependencies": {
package/scss/_color-palettes-dark.scss CHANGED
@@ -1,53 +1,14 @@
1
- @use '../abstract/utils';
1
+ @use '../../abstract/utils';
2
2
 
3
3
  @include utils.theme-selector(dark) {
4
- --white: #293642;
5
- --white-dark: #060a12;
6
- --black: #ffffff;
7
- --black-20: #{rgba(#000000, 60%)};
8
-
9
- --focus-bg: #284e68;
10
-
11
- --white-60: #{rgba(var(--white), 0.6)};
12
-
13
- --gray-50: #2e3d49;
14
- --gray-100: #344351;
15
- --gray-200: #3e5160;
16
- --gray-300: #495e6e;
17
- --gray-400: #556c7c;
18
- --gray-500: #607a8a;
19
- --gray-600: #6d8797;
20
- --gray-700: #7d94a1;
21
- --gray-800: #e9eef4;
22
- --gray-900: #9cacb4;
23
-
24
- --blue-50: #455e85;
25
- --blue-50-5: #{rgba(#455e85, 0.1)};
26
- --blue-100: #043c95;
27
- --blue-600: #a8c4f0;
28
- --blue-700: #cbe9ff;
29
- --blue-700-5: #{rgba(#cbe9ff, 0.1)};
30
- --blue-700-10: #{rgba(#cbe9ff, 0.2)};
31
- --blue-900: #d5e2f6;
32
-
33
- --cyan-50: #002766;
34
- --cyan-100: #003c66;
35
- --cyan-200: #00508a;
36
- --cyan-300: #0065ad;
37
- --cyan-400: #007ad1;
38
- --cyan-600: #1fa2ff;
39
- --cyan-700: #47b3ff;
40
- --cyan-800: #70c4ff;
41
- --cyan-900: #9dd7ff;
42
-
43
- --red-00: #4b3138;
44
- --red-50: #724956;
45
- --red-100: #bc0000;
46
- --red-700: #ff9898;
47
- --red-800: #ffb4b4;
48
- --red-900: #ffe0e3;
49
-
50
- --yellow-50: #5f5439;
51
-
52
- --green-00: #355e54;
4
+ --odx-charts-series-blue-700: var(--odx-charts-series-blue-100);
5
+ --odx-charts-series-cyan-700: var(--odx-charts-series-cyan-100);
6
+ --odx-charts-series-aqua-700: var(--odx-charts-series-aqua-100);
7
+ --odx-charts-series-ocean-700: var(--odx-charts-series-ocean-100);
8
+ --odx-charts-series-indigo-700: var(--odx-charts-series-indigo-100);
9
+ --odx-charts-series-purple-700: var(--odx-charts-series-purple-100);
10
+ --odx-charts-series-berry-700: var(--odx-charts-series-berry-100);
11
+ --odx-charts-series-violet-700: var(--odx-charts-series-violet-100);
12
+ --odx-charts-series-gray-75-dark-700: var(--draeger-cool-gray-15);
13
+ --odx-charts-series-gray-50-dark-700: var(--draeger-cool-gray-25);
53
14
  }
package/scss/_color-palettes.scss CHANGED
@@ -1,96 +1,44 @@
1
1
  :root {
2
- --white: #ffffff;
3
- --black: #00060f;
4
- --black-20: #{rgba(#000000, 20%)};
5
-
6
- --white-5: #{rgba(#ffffff, 5%)};
7
- --white-60: #{rgba(#ffffff, 60%)};
8
-
9
- --gray-50: #f5f7fa;
10
- --gray-100: #e9eef4;
11
- --gray-200: #dde5ee;
12
- --gray-300: #c7d3e0;
13
- --gray-400: #b2c1d2;
14
- --gray-500: #9eb0c2;
15
- --gray-600: #8b9fb1;
16
- --gray-700: #798ea0;
17
- --gray-800: #697c8c;
18
- --gray-900: #5d6a74;
19
-
20
- --blue-50: #d5e2f6;
21
- --blue-100: #a8c4f0;
22
- --blue-200: #79a5ec;
23
- --blue-300: #4786eb;
24
- --blue-400: #1f65d7;
25
- --blue-500: #0a51c2;
26
- --blue-600: #043c95;
27
- --blue-700: #002766;
28
- --blue-800: #001433;
29
- --blue-900: #000205;
30
-
31
- --blue-700-5: #{rgba(#002766, 5%)};
32
- --blue-700-10: #{rgba(#002766, 10%)};
33
- --blue-700-15: #{rgba(#002766, 15%)};
34
- --blue-800-30: #{rgba(#001433, 30%)};
35
-
36
- --cyan-50: #cbe9ff;
37
- --cyan-100: #9dd7ff;
38
- --cyan-200: #70c4ff;
39
- --cyan-300: #47b3ff;
40
- --cyan-400: #1fa2ff;
41
- --cyan-500: #0091f7;
42
- --cyan-600: #0077cc;
43
- --cyan-700: #0065ad;
44
- --cyan-800: #00508a;
45
- --cyan-900: #003c66;
46
-
47
- --cyan-500-5: #{rgba(#0091f7, 5%)};
48
- --cyan-500-15: #{rgba(#0091f7, 15%)};
49
- --cyan-500-20: #{rgba(#0091f7, 20%)};
50
-
51
- --red-00: #ffe0e3;
52
- --red-50: #ffb4b4;
53
- --red-100: #ff9898;
54
- --red-200: #ff7b7b;
55
- --red-300: #ff5c5c;
56
- --red-400: #ff2020;
57
- --red-500: #f30303;
58
- --red-600: #d70202;
59
- --red-700: #bc0000;
60
- --red-800: #970000;
61
- --red-900: #700000;
62
-
63
- --yellow-50: #fffad7;
64
- --yellow-100: #fff7b8;
65
- --yellow-200: #fff18a;
66
- --yellow-300: #ffed72;
67
- --yellow-400: #ffea46;
68
- --yellow-500: #ffe300;
69
- --yellow-600: #e7cc00;
70
- --yellow-700: #bea800;
71
- --yellow-800: #988600;
72
- --yellow-900: #7c6d00;
73
-
74
- --green-00: #d1ffdf;
75
- --green-50: #b7ffc6;
76
- --green-100: #93ffaa;
77
- --green-200: #6aff8b;
78
- --green-300: #36ff62;
79
- --green-400: #0bf23e;
80
- --green-500: #00dd31;
81
- --green-600: #00c92c;
82
- --green-700: #00aa25;
83
- --green-800: #00851d;
84
- --green-900: #006616;
85
-
86
- --orange-50: #fff6ed;
87
- --orange-100: #ffebd6;
88
- --orange-200: #ffd4a8;
89
- --orange-300: #ffd4a8;
90
- --orange-400: #ffa64d;
91
- --orange-500: #ff8f1f;
92
- --orange-600: #f57a00;
93
- --orange-700: #cc6600;
94
- --orange-800: #a35200;
95
- --orange-900: #7a3d00;
2
+ --odx-charts-series-blue-500: var(--blue-500);
3
+ --odx-charts-series-cyan-500: var(--cyan-500);
4
+ --odx-charts-series-aqua-500: #15dcc4;
5
+ --odx-charts-series-ocean-500: #1cb4d8;
6
+ --odx-charts-series-indigo-500: #6a53e6;
7
+ --odx-charts-series-purple-500: #8f32e2;
8
+ --odx-charts-series-berry-500: #ee1b80;
9
+ --odx-charts-series-violet-500: #b318d4;
10
+ --odx-charts-series-gray-medium-50-500: var(--draeger-cool-gray-50);
11
+ --odx-charts-series-gray-medium-25-500: var(--draeger-cool-gray-25);
12
+
13
+ --odx-charts-series-blue-700: var(--blue-700);
14
+ --odx-charts-series-cyan-700: var(--cyan-700);
15
+ --odx-charts-series-aqua-700: #09a491;
16
+ --odx-charts-series-ocean-700: #1c8093;
17
+ --odx-charts-series-indigo-700: #523cd2;
18
+ --odx-charts-series-purple-700: #751fc7;
19
+ --odx-charts-series-berry-700: #cd0b68;
20
+ --odx-charts-series-violet-700: #9a0aaf;
21
+ --odx-charts-series-gray-75-dark-700: var(--draeger-cool-gray-75);
22
+ --odx-charts-series-gray-50-dark-700: var(--draeger-cool-gray-50);
23
+
24
+ --odx-charts-series-blue-100: #a8c4f0;
25
+ --odx-charts-series-cyan-100: #9dd7ff;
26
+ --odx-charts-series-aqua-100: #9af4ea;
27
+ --odx-charts-series-ocean-100: #a0dcff;
28
+ --odx-charts-series-indigo-100: #a99ded;
29
+ --odx-charts-series-purple-100: #c693f4;
30
+ --odx-charts-series-violet-100: #e08ff2;
31
+ --odx-charts-series-berry-100: #f0a7cb;
32
+
33
+ --odx-charts-border-color: var(--odx-c-separator);
34
+ --odx-charts-text-color: var(--odx-c-text);
35
+ --odx-charts-background-color: var(--odx-c-background-content);
36
+
37
+ --odx-charts-font-family: var(--odx-typography-font-family);
38
+ --odx-charts-font-size: var(--odx-typography-base-size);
39
+
40
+ --draeger-cool-gray-15: #cdd2d7;
41
+ --draeger-cool-gray-25: #b4b9be;
42
+ --draeger-cool-gray-50: #878c91;
43
+ --draeger-cool-gray-75: #5a646e;
96
44
  }
package/scss/card.component.scss CHANGED
@@ -82,15 +82,41 @@
82
82
  display: block;
83
83
  margin: $img-margin $img-margin 0 $img-margin;
84
84
  max-height: var(--odx-card-image-max-height);
85
- max-width: max-content;
85
+
86
+ /* allow the image container to span the card width (including the card padding)
87
+ so aspect-ratio can compute height. We compute width as 100% + 2 * padding
88
+ and keep the negative margins so the element visually spans the card edges. */
89
+ max-width: none;
86
90
  overflow: clip;
91
+ width: calc(100% + (#{$main-padding} * 2));
92
+
93
+ &__img {
94
+ aspect-ratio: var(--odx-card-image-aspect-ratio);
95
+ display: block;
96
+ max-height: var(--odx-card-image-max-height);
97
+ overflow: hidden;
98
+ position: relative; /* required for ngOptimizedImage's img[fill] */
99
+ width: 100%;
100
+ }
101
+
102
+ /* Fallback when aspect-ratio is "auto": ensure the image area has a usable height
103
+ so ngSrc[fill] (absolutely positioned img) has a non-zero container. The
104
+ host gets the class `has-aspect-auto` from the component when
105
+ imageRatio resolves to 'auto'. The fallback height can be overridden by
106
+ setting --odx-card-image-fallback-height. */
107
+ &.has-aspect-auto.has-fill {
108
+ #{$root}-image__img {
109
+ max-height: var(--odx-card-image-max-height);
110
+ min-height: var(--odx-card-image-fallback-height, 200px);
111
+ }
112
+ }
87
113
 
88
114
  img {
89
115
  aspect-ratio: var(--odx-card-image-aspect-ratio);
90
116
  display: block;
91
117
  height: auto;
92
118
  max-width: 100%;
93
- object-fit: cover;
119
+ object-fit: var(--odx-card-image-object-fit);
94
120
  }
95
121
  }
96
122
 
@@ -100,6 +126,7 @@
100
126
  position: absolute;
101
127
  top: $main-padding;
102
128
  width: calc(100% - dimensions.get-size(math.div(40, 24)) - #{$main-padding} - dimensions.get-size(math.div(30, 24)));
129
+ z-index: var(--odx-v-layer-2);
103
130
  }
104
131
 
105
132
  &__content {
@@ -121,6 +148,12 @@
121
148
  padding-right: dimensions.get-size(math.div(36, 24));
122
149
  }
123
150
 
151
+ #{$root}--launch-tile & {
152
+ @include breakpoints.container-down(card-root, phone) {
153
+ margin-inline-end: dimensions.get-size(math.div(36, 24));
154
+ }
155
+ }
156
+
124
157
  #{$root}--launch-tile &,
125
158
  #{$root}--launch-tile-centered & {
126
159
  font-size: dimensions.get-size(math.div(20, 24));
@@ -135,10 +168,6 @@
135
168
 
136
169
  font-size: dimensions.get-size(math.div(25, 24));
137
170
  }
138
-
139
- @include breakpoints.container-down(card-root, phone) {
140
- margin-inline-end: dimensions.get-size(math.div(36, 24));
141
- }
142
171
  }
143
172
  }
144
173
 
package/scss/components/card.component.scss CHANGED
@@ -82,15 +82,41 @@
82
82
  display: block;
83
83
  margin: $img-margin $img-margin 0 $img-margin;
84
84
  max-height: var(--odx-card-image-max-height);
85
- max-width: max-content;
85
+
86
+ /* allow the image container to span the card width (including the card padding)
87
+ so aspect-ratio can compute height. We compute width as 100% + 2 * padding
88
+ and keep the negative margins so the element visually spans the card edges. */
89
+ max-width: none;
86
90
  overflow: clip;
91
+ width: calc(100% + (#{$main-padding} * 2));
92
+
93
+ &__img {
94
+ aspect-ratio: var(--odx-card-image-aspect-ratio);
95
+ display: block;
96
+ max-height: var(--odx-card-image-max-height);
97
+ overflow: hidden;
98
+ position: relative; /* required for ngOptimizedImage's img[fill] */
99
+ width: 100%;
100
+ }
101
+
102
+ /* Fallback when aspect-ratio is "auto": ensure the image area has a usable height
103
+ so ngSrc[fill] (absolutely positioned img) has a non-zero container. The
104
+ host gets the class `has-aspect-auto` from the component when
105
+ imageRatio resolves to 'auto'. The fallback height can be overridden by
106
+ setting --odx-card-image-fallback-height. */
107
+ &.has-aspect-auto.has-fill {
108
+ #{$root}-image__img {
109
+ max-height: var(--odx-card-image-max-height);
110
+ min-height: var(--odx-card-image-fallback-height, 200px);
111
+ }
112
+ }
87
113
 
88
114
  img {
89
115
  aspect-ratio: var(--odx-card-image-aspect-ratio);
90
116
  display: block;
91
117
  height: auto;
92
118
  max-width: 100%;
93
- object-fit: cover;
119
+ object-fit: var(--odx-card-image-object-fit);
94
120
  }
95
121
  }
96
122
 
@@ -100,6 +126,7 @@
100
126
  position: absolute;
101
127
  top: $main-padding;
102
128
  width: calc(100% - dimensions.get-size(math.div(40, 24)) - #{$main-padding} - dimensions.get-size(math.div(30, 24)));
129
+ z-index: var(--odx-v-layer-2);
103
130
  }
104
131
 
105
132
  &__content {
@@ -121,6 +148,12 @@
121
148
  padding-right: dimensions.get-size(math.div(36, 24));
122
149
  }
123
150
 
151
+ #{$root}--launch-tile & {
152
+ @include breakpoints.container-down(card-root, phone) {
153
+ margin-inline-end: dimensions.get-size(math.div(36, 24));
154
+ }
155
+ }
156
+
124
157
  #{$root}--launch-tile &,
125
158
  #{$root}--launch-tile-centered & {
126
159
  font-size: dimensions.get-size(math.div(20, 24));
@@ -135,10 +168,6 @@
135
168
 
136
169
  font-size: dimensions.get-size(math.div(25, 24));
137
170
  }
138
-
139
- @include breakpoints.container-down(card-root, phone) {
140
- margin-inline-end: dimensions.get-size(math.div(36, 24));
141
- }
142
171
  }
143
172
  }
144
173