@odx/ui 5.3.5 → 5.4.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 (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/core-theme.css +1 -1
  3. package/package.json +1 -1
  4. package/scss/_color-palettes-dark.scss +50 -11
  5. package/scss/_color-palettes.scss +94 -42
  6. package/scss/components/mainfilter-group.component.scss +1 -0
  7. package/scss/components/select.component.scss +0 -4
  8. package/scss/mainfilter-group.component.scss +1 -0
  9. package/scss/select.component.scss +0 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/ui",
3
- "version": "5.3.5",
3
+ "version": "5.4.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,14 +1,53 @@
1
- @use '../../abstract/utils';
1
+ @use '../abstract/utils';
2
2
 
3
3
  @include utils.theme-selector(dark) {
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);
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;
14
53
  }
package/scss/_color-palettes.scss CHANGED
@@ -1,44 +1,96 @@
1
1
  :root {
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;
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;
44
96
  }
package/scss/components/mainfilter-group.component.scss CHANGED
@@ -46,6 +46,7 @@
46
46
  @include dimensions.padding-x(math.div(3, 24));
47
47
 
48
48
  background-color: var(--odx-input-control-background-color);
49
+ line-height: dimensions.get-size(math.div(14, 24));
49
50
  margin-top: 0;
50
51
  position: absolute;
51
52
  right: 0;
package/scss/components/select.component.scss CHANGED
@@ -31,10 +31,6 @@
31
31
  }
32
32
  }
33
33
 
34
- &__clear {
35
- margin-inline-start: auto;
36
- }
37
-
38
34
  &__placeholder,
39
35
  &__value {
40
36
  @include dimensions.padding-y(math.div(4, 24));
package/scss/mainfilter-group.component.scss CHANGED
@@ -46,6 +46,7 @@
46
46
  @include dimensions.padding-x(math.div(3, 24));
47
47
 
48
48
  background-color: var(--odx-input-control-background-color);
49
+ line-height: dimensions.get-size(math.div(14, 24));
49
50
  margin-top: 0;
50
51
  position: absolute;
51
52
  right: 0;
package/scss/select.component.scss CHANGED
@@ -31,10 +31,6 @@
31
31
  }
32
32
  }
33
33
 
34
- &__clear {
35
- margin-inline-start: auto;
36
- }
37
-
38
34
  &__placeholder,
39
35
  &__value {
40
36
  @include dimensions.padding-y(math.div(4, 24));