@odx/ui 4.10.3 → 4.10.5

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 (19) 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.scss +1 -1
  5. package/scss/_colors-dark.scss +4 -2
  6. package/scss/_colors.scss +5 -4
  7. package/scss/_controls.scss +5 -0
  8. package/scss/checkbox.component.scss +5 -0
  9. package/scss/components/checkbox.component.scss +5 -0
  10. package/scss/components/link.component.scss +4 -0
  11. package/scss/components/radio-button.component.scss +5 -0
  12. package/scss/components/switch.component.scss +10 -0
  13. package/scss/link.component.scss +4 -0
  14. package/scss/radio-button.component.scss +5 -0
  15. package/scss/switch.component.scss +10 -0
  16. package/scss/variables/_color-palettes.scss +1 -1
  17. package/scss/variables/_colors-dark.scss +4 -2
  18. package/scss/variables/_colors.scss +5 -4
  19. package/scss/variables/_controls.scss +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/ui",
3
- "version": "4.10.3",
3
+ "version": "4.10.5",
4
4
  "author": "Drägerwerk AG & Co.KGaA",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "peerDependencies": {
package/scss/_color-palettes.scss CHANGED
@@ -39,7 +39,7 @@
39
39
  --cyan-300: #47b3ff;
40
40
  --cyan-400: #1fa2ff;
41
41
  --cyan-500: #0091f7;
42
- --cyan-600: #007ad1;
42
+ --cyan-600: #0077cc;
43
43
  --cyan-700: #0065ad;
44
44
  --cyan-800: #00508a;
45
45
  --cyan-900: #003c66;
package/scss/_colors-dark.scss CHANGED
@@ -7,10 +7,12 @@
7
7
  --odx-c-text: var(--blue-900);
8
8
  --odx-c-text-inverse: var(--black);
9
9
 
10
- --odx-c-link: var(--cyan-700);
10
+ // TODO: Change to ODX color palette (without light/dark base colors)
11
+ --odx-c-link: var(--cyan-900);
11
12
  --odx-c-link-hover: var(--cyan-800);
12
- --odx-c-link-active: var(--cyan-900);
13
+ --odx-c-link-active: var(--cyan-700);
13
14
  --odx-c-link-disabled: var(--gray-400);
15
+ --odx-c-link-visited: var(--blue-900);
14
16
 
15
17
  --odx-c-error: var(--red-00);
16
18
  --odx-c-error-outline: var(--red-50);
package/scss/_colors.scss CHANGED
@@ -6,10 +6,11 @@
6
6
  --odx-c-text-inverse: var(--white);
7
7
  --odx-c-text-disabled: var(--gray-500);
8
8
 
9
- --odx-c-link: var(--odx-c-highlight);
10
- --odx-c-link-hover: var(--odx-c-highlight-hover);
11
- --odx-c-link-active: var(--odx-c-highlight-active);
12
- --odx-c-link-disabled: var(--odx-c-text-disabled);
9
+ --odx-c-link: var(--cyan-600);
10
+ --odx-c-link-hover: var(--cyan-700);
11
+ --odx-c-link-active: var(--cyan-800);
12
+ --odx-c-link-disabled: var(--gray-500);
13
+ --odx-c-link-visited: var(--blue-700);
13
14
 
14
15
  --odx-c-error: var(--red-00);
15
16
  --odx-c-error-outline: var(--red-50);
package/scss/_controls.scss CHANGED
@@ -15,6 +15,9 @@
15
15
  --odx-control-background-color-disabled: var(--gray-100);
16
16
  --odx-control-outline-color-disabled: transparent;
17
17
 
18
+ --odx-control-background-color-disabled-selected: var(--gray-600);
19
+ --odx-control-color-disabled-selected: var(--gray-200);
20
+
18
21
  --odx-control-color-readonly: var(--odx-control-color);
19
22
  --odx-control-background-color-readonly: transparent;
20
23
  --odx-control-outline-color-readonly: var(--odx-control-color);
@@ -41,6 +44,8 @@
41
44
  --odx-input-control-background-color-disabled: var(--gray-50);
42
45
  --odx-input-control-outline-color-disabled: transparent;
43
46
 
47
+ --odx-input-control-background-color-disabled-selected: var(--gray-500);
48
+
44
49
  --odx-input-control-color-readonly: var(--odx-control-color);
45
50
  --odx-input-control-background-color-readonly: transparent;
46
51
  --odx-input-control-outline-color-readonly: var(--odx-control-outline-color);
package/scss/checkbox.component.scss CHANGED
@@ -86,6 +86,11 @@
86
86
  }
87
87
  }
88
88
 
89
+ #{$root}.is-active.is-disabled & {
90
+ background-color: var(--odx-input-control-background-color-disabled-selected);
91
+ color: var(--odx-control-color-disabled-selected);
92
+ }
93
+
89
94
  #{$root}.has-error & {
90
95
  background-color: var(--odx-control-background-color-error);
91
96
  color: var(--odx-control-color-error);
package/scss/components/checkbox.component.scss CHANGED
@@ -86,6 +86,11 @@
86
86
  }
87
87
  }
88
88
 
89
+ #{$root}.is-active.is-disabled & {
90
+ background-color: var(--odx-input-control-background-color-disabled-selected);
91
+ color: var(--odx-control-color-disabled-selected);
92
+ }
93
+
89
94
  #{$root}.has-error & {
90
95
  background-color: var(--odx-control-background-color-error);
91
96
  color: var(--odx-control-color-error);
package/scss/components/link.component.scss CHANGED
@@ -20,6 +20,10 @@
20
20
  color: var(--odx-c-link-active);
21
21
  }
22
22
 
23
+ &:visited {
24
+ color: var(--odx-c-link-visited);
25
+ }
26
+
23
27
  &.is-disabled {
24
28
  color: var(--odx-c-link-disabled);
25
29
  pointer-events: none;
package/scss/components/radio-button.component.scss CHANGED
@@ -99,6 +99,11 @@
99
99
  outline-color: var(--odx-control-outline-color-error-hover);
100
100
  }
101
101
 
102
+ #{$root}.is-disabled.is-active & {
103
+ background-color: var(--odx-control-background-color-disabled-selected);
104
+ color: var(--odx-c-secondary-text-disabled);
105
+ }
106
+
102
107
  #{$root}.is-disabled & {
103
108
  background-color: var(--odx-control-background-color-disabled);
104
109
  color: var(--odx-control-color-disabled);
package/scss/components/switch.component.scss CHANGED
@@ -141,6 +141,16 @@
141
141
  }
142
142
  }
143
143
 
144
+ #{$root}.is-disabled.is-active &,
145
+ #{$root}.is-disabled ~ #{$root}__input:checked,
146
+ #{$root}.is-disabled ~ #{$root}__input:indeterminate {
147
+ @include indicator-color(var(--odx-control-background-color-disabled-selected));
148
+
149
+ &::before {
150
+ @include indicator-color(var(--odx-control-background-color-disabled-selected));
151
+ }
152
+ }
153
+
144
154
  #{$root}.is-disabled:not(.is-active) & {
145
155
  @include indicator-color(var(--odx-control-background-color-disabled));
146
156
 
package/scss/link.component.scss CHANGED
@@ -20,6 +20,10 @@
20
20
  color: var(--odx-c-link-active);
21
21
  }
22
22
 
23
+ &:visited {
24
+ color: var(--odx-c-link-visited);
25
+ }
26
+
23
27
  &.is-disabled {
24
28
  color: var(--odx-c-link-disabled);
25
29
  pointer-events: none;
package/scss/radio-button.component.scss CHANGED
@@ -99,6 +99,11 @@
99
99
  outline-color: var(--odx-control-outline-color-error-hover);
100
100
  }
101
101
 
102
+ #{$root}.is-disabled.is-active & {
103
+ background-color: var(--odx-control-background-color-disabled-selected);
104
+ color: var(--odx-c-secondary-text-disabled);
105
+ }
106
+
102
107
  #{$root}.is-disabled & {
103
108
  background-color: var(--odx-control-background-color-disabled);
104
109
  color: var(--odx-control-color-disabled);
package/scss/switch.component.scss CHANGED
@@ -141,6 +141,16 @@
141
141
  }
142
142
  }
143
143
 
144
+ #{$root}.is-disabled.is-active &,
145
+ #{$root}.is-disabled ~ #{$root}__input:checked,
146
+ #{$root}.is-disabled ~ #{$root}__input:indeterminate {
147
+ @include indicator-color(var(--odx-control-background-color-disabled-selected));
148
+
149
+ &::before {
150
+ @include indicator-color(var(--odx-control-background-color-disabled-selected));
151
+ }
152
+ }
153
+
144
154
  #{$root}.is-disabled:not(.is-active) & {
145
155
  @include indicator-color(var(--odx-control-background-color-disabled));
146
156
 
package/scss/variables/_color-palettes.scss CHANGED
@@ -39,7 +39,7 @@
39
39
  --cyan-300: #47b3ff;
40
40
  --cyan-400: #1fa2ff;
41
41
  --cyan-500: #0091f7;
42
- --cyan-600: #007ad1;
42
+ --cyan-600: #0077cc;
43
43
  --cyan-700: #0065ad;
44
44
  --cyan-800: #00508a;
45
45
  --cyan-900: #003c66;
package/scss/variables/_colors-dark.scss CHANGED
@@ -7,10 +7,12 @@
7
7
  --odx-c-text: var(--blue-900);
8
8
  --odx-c-text-inverse: var(--black);
9
9
 
10
- --odx-c-link: var(--cyan-700);
10
+ // TODO: Change to ODX color palette (without light/dark base colors)
11
+ --odx-c-link: var(--cyan-900);
11
12
  --odx-c-link-hover: var(--cyan-800);
12
- --odx-c-link-active: var(--cyan-900);
13
+ --odx-c-link-active: var(--cyan-700);
13
14
  --odx-c-link-disabled: var(--gray-400);
15
+ --odx-c-link-visited: var(--blue-900);
14
16
 
15
17
  --odx-c-error: var(--red-00);
16
18
  --odx-c-error-outline: var(--red-50);
package/scss/variables/_colors.scss CHANGED
@@ -6,10 +6,11 @@
6
6
  --odx-c-text-inverse: var(--white);
7
7
  --odx-c-text-disabled: var(--gray-500);
8
8
 
9
- --odx-c-link: var(--odx-c-highlight);
10
- --odx-c-link-hover: var(--odx-c-highlight-hover);
11
- --odx-c-link-active: var(--odx-c-highlight-active);
12
- --odx-c-link-disabled: var(--odx-c-text-disabled);
9
+ --odx-c-link: var(--cyan-600);
10
+ --odx-c-link-hover: var(--cyan-700);
11
+ --odx-c-link-active: var(--cyan-800);
12
+ --odx-c-link-disabled: var(--gray-500);
13
+ --odx-c-link-visited: var(--blue-700);
13
14
 
14
15
  --odx-c-error: var(--red-00);
15
16
  --odx-c-error-outline: var(--red-50);
package/scss/variables/_controls.scss CHANGED
@@ -15,6 +15,9 @@
15
15
  --odx-control-background-color-disabled: var(--gray-100);
16
16
  --odx-control-outline-color-disabled: transparent;
17
17
 
18
+ --odx-control-background-color-disabled-selected: var(--gray-600);
19
+ --odx-control-color-disabled-selected: var(--gray-200);
20
+
18
21
  --odx-control-color-readonly: var(--odx-control-color);
19
22
  --odx-control-background-color-readonly: transparent;
20
23
  --odx-control-outline-color-readonly: var(--odx-control-color);
@@ -41,6 +44,8 @@
41
44
  --odx-input-control-background-color-disabled: var(--gray-50);
42
45
  --odx-input-control-outline-color-disabled: transparent;
43
46
 
47
+ --odx-input-control-background-color-disabled-selected: var(--gray-500);
48
+
44
49
  --odx-input-control-color-readonly: var(--odx-control-color);
45
50
  --odx-input-control-background-color-readonly: transparent;
46
51
  --odx-input-control-outline-color-readonly: var(--odx-control-outline-color);