@1024pix/pix-ui 48.6.0 → 48.6.2

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 (15) hide show
  1. package/addon/styles/_pix-banner.scss +37 -9
  2. package/addon/styles/_pix-button-base.scss +0 -9
  3. package/addon/styles/_pix-collapsible.scss +1 -2
  4. package/addon/styles/_pix-icon-button.scss +3 -3
  5. package/addon/styles/_pix-indicator-card.scss +6 -6
  6. package/addon/styles/_pix-input-password.scss +1 -1
  7. package/addon/styles/_pix-input.scss +12 -9
  8. package/addon/styles/_pix-label-wrapped.scss +0 -2
  9. package/addon/styles/_pix-message.scss +0 -5
  10. package/addon/styles/_pix-multi-select.scss +2 -2
  11. package/addon/styles/_pix-select.scss +3 -3
  12. package/addon/styles/_pix-toast.scss +13 -13
  13. package/addon/styles/_pix-toggle.scss +0 -4
  14. package/addon/styles/_pix-tooltip.scss +0 -1
  15. package/package.json +1 -1
package/addon/styles/_pix-banner.scss CHANGED
@@ -32,9 +32,9 @@
32
32
  &--information {
33
33
  color: var(--pix-info-700);
34
34
  background-color: var(--pix-info-50);
35
- fill: var(--pix-info-700);
36
35
 
37
36
  .pix-icon-button {
37
+ color: currentcolor;
38
38
  background-color: var(--pix-info-50);
39
39
 
40
40
  &:hover:enabled,
@@ -52,9 +52,9 @@
52
52
  &--warning {
53
53
  color: var(--pix-warning-700);
54
54
  background-color: var(--pix-warning-50);
55
- fill: var(--pix-warning-700);
56
55
 
57
56
  .pix-icon-button {
57
+ color: currentcolor;
58
58
  background-color: var(--pix-warning-50);
59
59
 
60
60
  &:hover:enabled,
@@ -72,9 +72,9 @@
72
72
  &--error {
73
73
  color: var(--pix-error-700);
74
74
  background-color: var(--pix-error-50);
75
- fill: var(--pix-error-700);
76
75
 
77
76
  .pix-icon-button {
77
+ color: currentcolor;
78
78
  background-color: var(--pix-error-50);
79
79
 
80
80
  &:hover:enabled,
@@ -92,18 +92,46 @@
92
92
  &--communication {
93
93
  color: var(--pix-neutral-0);
94
94
  background-color: var(--pix-primary-500);
95
- fill: var(--pix-neutral-0);
96
95
 
97
- &-orga {
96
+ .pix-icon-button {
97
+ color: currentcolor;
98
+
99
+ &:hover:enabled,
100
+ &:focus:enabled,
101
+ &:active:enabled {
102
+ background-color: var(--pix-primary-300);
103
+ }
104
+ }
105
+ }
106
+
107
+ &--communication-orga {
98
108
  color: var(--pix-neutral-0);
99
109
  background-color: var(--pix-orga-500);
100
- fill: var(--pix-neutral-0);
110
+
111
+ .pix-icon-button {
112
+ color: currentcolor;
113
+
114
+ &:hover:enabled,
115
+ &:focus:enabled,
116
+ &:active:enabled {
117
+ background-color: var(--pix-communication-light);
118
+ }
119
+ }
101
120
  }
102
121
 
103
- &-certif {
122
+ &--communication-certif {
104
123
  color: var(--pix-neutral-0);
105
124
  background-color: var(--pix-certif-500);
106
- fill: var(--pix-neutral-0);
125
+
126
+ .pix-icon-button {
127
+ color: currentcolor;
128
+
129
+ &:hover:enabled,
130
+ &:focus:enabled,
131
+ &:active:enabled {
132
+ background-color: var(--pix-content-light);
133
+ }
134
+ }
107
135
  }
108
136
  }
109
- }
137
+
package/addon/styles/_pix-button-base.scss CHANGED
@@ -30,7 +30,6 @@
30
30
  &--primary {
31
31
  color: var(--pix-neutral-0);
32
32
  background-color: var(--pix-primary-500);
33
- fill: var(--pix-neutral-0);
34
33
 
35
34
  &:not([aria-disabled="true"]) {
36
35
  &:hover {
@@ -54,13 +53,11 @@
54
53
  &--primary-bis {
55
54
  color: var(--pix-neutral-900);
56
55
  background-color: var(--pix-secondary-500);
57
- fill: var(--pix-neutral-900);
58
56
 
59
57
  &:not([aria-disabled="true"]) {
60
58
  &:hover {
61
59
  color: var(--pix-neutral-0);
62
60
  background-color: var(--pix-secondary-700);
63
- fill: var(--pix-neutral-0);
64
61
  }
65
62
 
66
63
  &:focus,
@@ -69,14 +66,12 @@
69
66
  background-color: var(--pix-secondary-700);
70
67
  outline: 1px solid var(--pix-neutral-0);
71
68
  outline-offset: -4px;
72
- fill: var(--pix-neutral-0);
73
69
  }
74
70
 
75
71
  &:active {
76
72
  color: var(--pix-neutral-0);
77
73
  background-color: var(--pix-secondary-900);
78
74
  outline: none;
79
- fill: var(--pix-neutral-0);
80
75
  }
81
76
  }
82
77
  }
@@ -85,7 +80,6 @@
85
80
  color: var(--pix-primary-700);
86
81
  background-color: transparent;
87
82
  border: 2px solid var(--pix-primary-700);
88
- fill: var(--pix-primary-700);
89
83
 
90
84
  &:not([aria-disabled="true"]) {
91
85
  &:hover {
@@ -115,7 +109,6 @@
115
109
  color: var(--pix-neutral-800);
116
110
  text-decoration: underline;
117
111
  background-color: transparent;
118
- fill: var(--pix-neutral-800);
119
112
 
120
113
  &:not([aria-disabled="true"]) {
121
114
  &:hover,
@@ -133,7 +126,6 @@
133
126
  &--success {
134
127
  color: var(--pix-neutral-0);
135
128
  background-color: var(--pix-success-500);
136
- fill: var(--pix-neutral-0);
137
129
 
138
130
  &:not([aria-disabled="true"]) {
139
131
  &:hover {
@@ -157,7 +149,6 @@
157
149
  &--error {
158
150
  color: var(--pix-neutral-0);
159
151
  background-color: var(--pix-error-500);
160
- fill: var(--pix-neutral-0);
161
152
 
162
153
  &:not([aria-disabled="true"]) {
163
154
  &:hover {
package/addon/styles/_pix-collapsible.scss CHANGED
@@ -38,7 +38,6 @@
38
38
  font-size: 1rem;
39
39
  line-height: 1.25;
40
40
  border: none;
41
- fill: var(--pix-neutral-800);
42
41
 
43
42
  &:hover,
44
43
  &[aria-expanded='true'] {
@@ -59,7 +58,7 @@
59
58
 
60
59
  &__icon {
61
60
  margin-right: var(--pix-spacing-2x);
62
- fill: var(--pix-neutral-500);
61
+ color: var(--pix-neutral-500);
63
62
  }
64
63
  }
65
64
 
package/addon/styles/_pix-icon-button.scss CHANGED
@@ -6,12 +6,12 @@
6
6
  min-width: 2.375rem;
7
7
  height: 2.375rem;
8
8
  padding: 0;
9
+ color: var(--pix-neutral-800);
9
10
  background-color: transparent;
10
11
  border: none;
11
12
  border-radius: 50%;
12
13
  outline: none;
13
14
  cursor: pointer;
14
- fill: var(--pix-neutral-800);
15
15
 
16
16
  &__icon {
17
17
  width: 1.35rem;
@@ -34,16 +34,16 @@
34
34
  }
35
35
 
36
36
  &:focus:enabled {
37
+ color: var(--pix-neutral-0);
37
38
  background-color: var(--pix-neutral-800);
38
39
  outline: 1px solid var(--pix-neutral-0);
39
40
  outline-offset: -3px;
40
- fill: var(--pix-neutral-0);
41
41
  }
42
42
 
43
43
  &:active:enabled {
44
+ color: var(--pix-neutral-800);
44
45
  background-color: var(--pix-neutral-100);
45
46
  outline: 0;
46
- fill: var(--pix-neutral-800);
47
47
  }
48
48
 
49
49
  &--background {
package/addon/styles/_pix-indicator-card.scss CHANGED
@@ -17,31 +17,31 @@
17
17
 
18
18
  &--grey,
19
19
  &--neutral {
20
+ color: var(--pix-neutral-500);
20
21
  background-color: var(--pix-neutral-20);
21
- fill: var(--pix-neutral-500);
22
22
  }
23
23
 
24
24
  &--blue,
25
25
  &--primary {
26
+ color: var(--pix-primary-700);
26
27
  background-color: var(--pix-primary-10);
27
- fill: var(--pix-primary-700);
28
28
  }
29
29
 
30
30
  &--green,
31
31
  &--success {
32
+ color: var(--pix-success-700);
32
33
  background-color: var(--pix-success-50);
33
- fill: var(--pix-success-700);
34
34
  }
35
35
 
36
36
  &--purple,
37
37
  &--tertiary {
38
+ color: var(--pix-tertiary-900);
38
39
  background-color: var(--pix-tertiary-100);
39
- fill: var(--pix-tertiary-900);
40
40
  }
41
41
 
42
42
  &--warning {
43
+ color: var(--pix-warning-700);
43
44
  background-color: var(--pix-warning-50);
44
- fill: var(--pix-warning-700);
45
45
  }
46
46
  }
47
47
 
@@ -93,6 +93,6 @@
93
93
  width: 1rem;
94
94
  height:1rem;
95
95
  margin: 0 var(--pix-spacing-2x);
96
- fill: var(--pix-neutral-500);
96
+ color: var(--pix-neutral-500);
97
97
  }
98
98
  }
package/addon/styles/_pix-input-password.scss CHANGED
@@ -69,8 +69,8 @@
69
69
  width: 1rem;
70
70
  height: 1rem;
71
71
  padding: 2px;
72
+ color: var(--pix-neutral-0);
72
73
  border-radius: 50%;
73
- fill: var(--pix-neutral-0);
74
74
  }
75
75
 
76
76
  &__error-icon {
package/addon/styles/_pix-input.scss CHANGED
@@ -44,17 +44,20 @@
44
44
  width: 100%;
45
45
  border: 1px solid var(--pix-neutral-500);
46
46
 
47
- &--error {
48
- @extend %pix-form-error-state;
49
- }
50
-
51
- &--success {
52
- @extend %pix-form-success-state;
53
- }
54
-
55
47
  &::placeholder {
56
48
  color: var(--pix-neutral-500);
57
49
  }
58
-
59
50
  }
60
51
  }
52
+
53
+ .pix-input .pix-input__input--error {
54
+ @extend %pix-form-error-state;
55
+
56
+ padding-right: 2rem;
57
+ }
58
+
59
+ .pix-input .pix-input__input--success {
60
+ @extend %pix-form-success-state;
61
+
62
+ padding-right: 2rem;
63
+ }
package/addon/styles/_pix-label-wrapped.scss CHANGED
@@ -32,7 +32,6 @@
32
32
  --state-border-color: var(--pix-success-300);
33
33
 
34
34
  color: var(--pix-success-700);
35
- fill: var(--pix-success-700);
36
35
  }
37
36
 
38
37
  &.pix-label-wrapped--state-error {
@@ -40,7 +39,6 @@
40
39
  --state-border-color: var(--pix-error-500);
41
40
 
42
41
  color: var(--pix-error-700);
43
- fill: var(--pix-error-700);
44
42
  }
45
43
 
46
44
  & .pix-label-wrapped__state-icon {
package/addon/styles/_pix-message.scss CHANGED
@@ -13,30 +13,25 @@
13
13
  &.pix-message--info {
14
14
  color: var(--pix-info-700);
15
15
  background-color: var(--pix-info-50);
16
- fill: var(--pix-info-700);
17
16
  }
18
17
 
19
18
  &.pix-message--alert {
20
19
  color: var(--pix-error-700);
21
20
  background-color: var(--pix-error-50);
22
- fill: var(--pix-info-700);
23
21
  }
24
22
 
25
23
  &.pix-message--error {
26
24
  color: var(--pix-error-700);
27
25
  background-color: var(--pix-error-50);
28
- fill: var(--pix-error-700);
29
26
  }
30
27
 
31
28
  &.pix-message--success {
32
29
  color: var(--pix-success-700);
33
30
  background-color: var(--pix-success-50);
34
- fill: var(--pix-success-700);
35
31
  }
36
32
 
37
33
  &.pix-message--warning {
38
34
  color: var(--pix-warning-700);
39
35
  background-color: var(--pix-warning-50);
40
- fill: var(--pix-warning-700);
41
36
  }
42
37
  }
package/addon/styles/_pix-multi-select.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  &__search-icon {
36
- fill: var(--pix-neutral-900);
36
+ color: var(--pix-neutral-900);
37
37
  }
38
38
 
39
39
  &__title {
@@ -58,8 +58,8 @@
58
58
  &__dropdown-icon {
59
59
  @extend %pix-body-s;
60
60
 
61
+ color: var(--pix-neutral-900);
61
62
  pointer-events: none;
62
- fill: var(--pix-neutral-900);
63
63
  }
64
64
  }
65
65
 
package/addon/styles/_pix-select.scss CHANGED
@@ -103,7 +103,7 @@
103
103
  cursor: pointer;
104
104
 
105
105
  &__icon {
106
- fill: var(--pix-neutral-900);
106
+ color: var(--pix-neutral-900);
107
107
  }
108
108
 
109
109
  &--error {
@@ -119,8 +119,8 @@
119
119
  &__dropdown-icon {
120
120
  @extend %pix-body-s;
121
121
 
122
+ color: var(--pix-neutral-900);
122
123
  pointer-events: none;
123
- fill: var(--pix-neutral-900);
124
124
  }
125
125
  }
126
126
 
@@ -198,6 +198,6 @@
198
198
 
199
199
  &__icon {
200
200
  margin: auto var(--pix-spacing-1x);
201
- fill: var(--pix-neutral-100)
201
+ color: var(--pix-neutral-100)
202
202
  }
203
203
  }
package/addon/styles/_pix-toast.scss CHANGED
@@ -49,7 +49,7 @@
49
49
  }
50
50
 
51
51
  .pix-toast__icon {
52
- fill: var(--pix-neutral-0);
52
+ color: var(--pix-neutral-0);
53
53
 
54
54
  &--error {
55
55
  background-color: var(--pix-error-700);
@@ -74,12 +74,12 @@
74
74
 
75
75
  .pix-toast__close-button {
76
76
  &--error {
77
- fill: var(--pix-error-700);
77
+ color: var(--pix-error-700);
78
78
 
79
79
  &:hover:enabled,
80
80
  &:active:enabled, {
81
- background-color: var(--pix-error-700);
82
- fill: var(--pix-neutral-0);
81
+ color: currentcolor;
82
+ background-color: var(--pix-error-100);
83
83
  }
84
84
 
85
85
  &:focus:enabled {
@@ -88,12 +88,12 @@
88
88
  }
89
89
 
90
90
  &--success {
91
- fill: var(--pix-success-700);
91
+ color: var(--pix-success-700);
92
92
 
93
93
  &:hover:enabled,
94
94
  &:active:enabled, {
95
- background-color: var(--pix-success-700);
96
- fill: var(--pix-neutral-0);
95
+ color: currentcolor;
96
+ background-color: var(--pix-success-100);
97
97
  }
98
98
 
99
99
  &:focus:enabled {
@@ -102,12 +102,12 @@
102
102
  }
103
103
 
104
104
  &--information {
105
- fill: var(--pix-info-700);
105
+ color: var(--pix-info-700);
106
106
 
107
107
  &:hover:enabled,
108
108
  &:active:enabled, {
109
- background-color: var(--pix-info-700);
110
- fill: var(--pix-neutral-0);
109
+ color: currentcolor;
110
+ background-color: var(--pix-info-100);
111
111
  }
112
112
 
113
113
  &:focus:enabled {
@@ -116,12 +116,12 @@
116
116
  }
117
117
 
118
118
  &--warning {
119
- fill: var(--pix-warning-700);
119
+ color: var(--pix-warning-700);
120
120
 
121
121
  &:hover:enabled,
122
122
  &:active:enabled, {
123
- background-color: var(--pix-warning-700);
124
- fill: var(--pix-neutral-0);
123
+ color: currentcolor;
124
+ background-color: var(--pix-warning-100);
125
125
  }
126
126
 
127
127
  &:focus:enabled {
package/addon/styles/_pix-toggle.scss CHANGED
@@ -40,13 +40,11 @@
40
40
  &__on {
41
41
  color: var(--pix-neutral-800);
42
42
  font-weight: var(--pix-font-normal);
43
- fill: var(--pix-neutral-800);
44
43
  }
45
44
 
46
45
  &__off {
47
46
  color: var(--pix-neutral-20);
48
47
  background-color: var(--pix-neutral-800);
49
- fill: var(--pix-neutral-20);
50
48
  }
51
49
 
52
50
  &--pressed {
@@ -55,14 +53,12 @@
55
53
  color: var(--pix-neutral-20);
56
54
  font-weight: inherit;
57
55
  background-color: var(--pix-neutral-800);
58
- fill: var(--pix-neutral-20);
59
56
  }
60
57
 
61
58
  &__off {
62
59
  color: var(--pix-neutral-800);
63
60
  font-weight: var(--pix-font-normal);
64
61
  background-color: transparent;
65
- fill: var(--pix-neutral-800);
66
62
  }
67
63
  }
68
64
  }
package/addon/styles/_pix-tooltip.scss CHANGED
@@ -48,7 +48,6 @@
48
48
  opacity: 0;
49
49
  transition: opacity 0.3s;
50
50
  pointer-events: none;
51
- fill: var(--pix-neutral-0);
52
51
 
53
52
  &--inline {
54
53
  white-space: nowrap;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "48.6.0",
3
+ "version": "48.6.2",
4
4
  "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
5
5
  "keywords": [
6
6
  "ember-addon"