@1024pix/pix-ui 46.15.1 → 47.0.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 (47) hide show
  1. package/addon/components/pix-banner.hbs +3 -3
  2. package/addon/components/pix-banner.js +6 -6
  3. package/addon/components/pix-button.hbs +6 -6
  4. package/addon/components/pix-collapsible.hbs +12 -11
  5. package/addon/components/pix-icon-button.hbs +7 -3
  6. package/addon/components/pix-icon-button.js +9 -8
  7. package/addon/components/pix-icon.hbs +2 -0
  8. package/addon/components/pix-icon.js +1 -1
  9. package/addon/components/pix-indicator-card.hbs +11 -4
  10. package/addon/components/pix-indicator-card.js +2 -2
  11. package/addon/components/pix-input-password.hbs +4 -3
  12. package/addon/components/pix-input.hbs +2 -2
  13. package/addon/components/pix-label-wrapped.hbs +12 -2
  14. package/addon/components/pix-message.hbs +6 -1
  15. package/addon/components/pix-message.js +7 -13
  16. package/addon/components/pix-modal.hbs +1 -1
  17. package/addon/components/pix-multi-select.hbs +3 -3
  18. package/addon/components/pix-pagination.hbs +4 -4
  19. package/addon/components/pix-return-to.hbs +2 -2
  20. package/addon/components/pix-search-input.hbs +1 -1
  21. package/addon/components/pix-select.hbs +7 -7
  22. package/addon/components/pix-sidebar.hbs +1 -1
  23. package/addon/components/pix-toggle.hbs +5 -13
  24. package/addon/components/pix-tooltip.hbs +1 -1
  25. package/addon/helpers/icons.js +3 -4
  26. package/addon/styles/_pix-banner.scss +14 -8
  27. package/addon/styles/_pix-button-base.scss +9 -0
  28. package/addon/styles/_pix-button.scss +2 -1
  29. package/addon/styles/_pix-checkbox.scss +3 -4
  30. package/addon/styles/_pix-collapsible.scss +2 -4
  31. package/addon/styles/_pix-icon-button.scss +16 -11
  32. package/addon/styles/_pix-icon.scss +4 -0
  33. package/addon/styles/_pix-indicator-card.scss +14 -8
  34. package/addon/styles/_pix-input-password.scss +3 -4
  35. package/addon/styles/_pix-input.scss +3 -4
  36. package/addon/styles/_pix-label-wrapped.scss +2 -0
  37. package/addon/styles/_pix-message.scss +5 -0
  38. package/addon/styles/_pix-multi-select.scss +2 -2
  39. package/addon/styles/_pix-pagination.scss +1 -0
  40. package/addon/styles/_pix-return-to.scss +3 -2
  41. package/addon/styles/_pix-search-input.scss +3 -7
  42. package/addon/styles/_pix-select.scss +6 -2
  43. package/addon/styles/_pix-toggle.scss +14 -1
  44. package/addon/styles/_pix-tooltip.scss +12 -0
  45. package/addon/styles/addon.scss +2 -0
  46. package/package.json +1 -1
  47. package/public/svg/pix-sprite.svg +1 -1
package/addon/styles/_pix-button-base.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  &--primary {
31
31
  color: var(--pix-neutral-0);
32
32
  background-color: var(--pix-primary-500);
33
+ fill: var(--pix-neutral-0);
33
34
 
34
35
  &:not([aria-disabled="true"]) {
35
36
  &:hover {
@@ -53,11 +54,13 @@
53
54
  &--primary-bis {
54
55
  color: var(--pix-neutral-900);
55
56
  background-color: var(--pix-secondary-500);
57
+ fill: var(--pix-neutral-900);
56
58
 
57
59
  &:not([aria-disabled="true"]) {
58
60
  &:hover {
59
61
  color: var(--pix-neutral-0);
60
62
  background-color: var(--pix-secondary-700);
63
+ fill: var(--pix-neutral-0);
61
64
  }
62
65
 
63
66
  &:focus,
@@ -66,12 +69,14 @@
66
69
  background-color: var(--pix-secondary-700);
67
70
  outline: 1px solid var(--pix-neutral-0);
68
71
  outline-offset: -4px;
72
+ fill: var(--pix-neutral-0);
69
73
  }
70
74
 
71
75
  &:active {
72
76
  color: var(--pix-neutral-0);
73
77
  background-color: var(--pix-secondary-900);
74
78
  outline: none;
79
+ fill: var(--pix-neutral-0);
75
80
  }
76
81
  }
77
82
  }
@@ -80,6 +85,7 @@
80
85
  color: var(--pix-primary-700);
81
86
  background-color: transparent;
82
87
  border: 2px solid var(--pix-primary-700);
88
+ fill: var(--pix-primary-700);
83
89
 
84
90
  &:not([aria-disabled="true"]) {
85
91
  &:hover {
@@ -109,6 +115,7 @@
109
115
  color: var(--pix-neutral-800);
110
116
  text-decoration: underline;
111
117
  background-color: transparent;
118
+ fill: var(--pix-neutral-800);
112
119
 
113
120
  &:not([aria-disabled="true"]) {
114
121
  &:hover,
@@ -126,6 +133,7 @@
126
133
  &--success {
127
134
  color: var(--pix-neutral-0);
128
135
  background-color: var(--pix-success-500);
136
+ fill: var(--pix-neutral-0);
129
137
 
130
138
  &:not([aria-disabled="true"]) {
131
139
  &:hover {
@@ -149,6 +157,7 @@
149
157
  &--error {
150
158
  color: var(--pix-neutral-0);
151
159
  background-color: var(--pix-error-500);
160
+ fill: var(--pix-neutral-0);
152
161
 
153
162
  &:not([aria-disabled="true"]) {
154
163
  &:hover {
package/addon/styles/_pix-button.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  .pix-button__icon {
2
- height: 1rem;
2
+ width: 1.25rem;
3
+ height: 1.25rem;
3
4
 
4
5
  &--before {
5
6
  margin-right: var(--pix-spacing-2x);
package/addon/styles/_pix-checkbox.scss CHANGED
@@ -70,12 +70,12 @@
70
70
 
71
71
  &::after {
72
72
  position: absolute;
73
- background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3L0 4.5L5 9.5L13 1.5L11.5 0L5 6.5L1.5 3Z' fill='white'/%3E%3C/svg%3E%0A");
73
+ background-image: url('data:image/svg+xml,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m382-362.13 334.7-334.7q13.67-13.67 32.06-13.67t32.07 13.67q13.67 13.68 13.67 32.45t-13.67 32.45L414.07-264.41q-13.68 13.67-32.07 13.67t-32.07-13.67L178.41-435.93q-13.67-13.68-13.29-32.45t14.05-32.45q13.68-13.67 32.45-13.67t32.45 13.67z"/></svg>');
74
74
  background-repeat: no-repeat;
75
75
  background-position: center;
76
76
  background-size: contain;
77
77
  content: '';
78
- inset: 10%;
78
+ inset: 0%;
79
79
  }
80
80
  }
81
81
 
@@ -92,8 +92,7 @@
92
92
  }
93
93
 
94
94
  &::after {
95
- background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' fill='white'/%3E%3C/svg%3E%0A");
96
- inset: 15%;
95
+ background-image: url('data:image/svg+xml,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M277.37-434.5q-19.15 0-32.33-13.17-13.17-13.18-13.17-32.33t13.17-32.33q13.18-13.17 32.33-13.17h405.26q19.15 0 32.33 13.17 13.17 13.18 13.17 32.33t-13.17 32.33q-13.18 13.17-32.33 13.17z"/></svg>');
97
96
  }
98
97
  }
99
98
 
package/addon/styles/_pix-collapsible.scss CHANGED
@@ -38,6 +38,7 @@
38
38
  font-size: 1rem;
39
39
  line-height: 1.25;
40
40
  border: none;
41
+ fill: var(--pix-neutral-800);
41
42
 
42
43
  &:hover,
43
44
  &[aria-expanded='true'] {
@@ -58,17 +59,14 @@
58
59
 
59
60
  &__icon {
60
61
  margin-right: var(--pix-spacing-2x);
61
- color: var(--pix-neutral-500);
62
+ fill: var(--pix-neutral-500);
62
63
  }
63
64
  }
64
65
 
65
66
  .pix-collapsible-title-container {
66
67
 
67
68
  &__toggle-icon {
68
- width: 1rem;
69
- height: 1rem;
70
69
  margin-left: var(--pix-spacing-2x);
71
- padding: 0.5rem;
72
70
  border-radius: 50%;
73
71
  }
74
72
  }
package/addon/styles/_pix-icon-button.scss CHANGED
@@ -2,13 +2,26 @@
2
2
  display: inline-flex;
3
3
  align-items: center;
4
4
  justify-content: center;
5
+ width: 2.375rem;
6
+ min-width: 2.375rem;
7
+ height: 2.375rem;
5
8
  padding: 0;
6
- color: var(--pix-neutral-800);
7
9
  background-color: transparent;
8
10
  border: none;
9
11
  border-radius: 50%;
10
12
  outline: none;
11
13
  cursor: pointer;
14
+ fill: var(--pix-neutral-800);
15
+
16
+ &__icon {
17
+ width: 1.35rem;
18
+ height: 1.35rem;
19
+
20
+ &--small {
21
+ width: 1.18rem;
22
+ height: 1.18rem;
23
+ }
24
+ }
12
25
 
13
26
  &:disabled {
14
27
  cursor: not-allowed;
@@ -21,16 +34,16 @@
21
34
  }
22
35
 
23
36
  &:focus:enabled {
24
- color: var(--pix-neutral-0);
25
37
  background-color: var(--pix-neutral-800);
26
38
  outline: 1px solid var(--pix-neutral-0);
27
39
  outline-offset: -3px;
40
+ fill: var(--pix-neutral-0);
28
41
  }
29
42
 
30
43
  &:active:enabled {
31
- color: var(--pix-neutral-800);
32
44
  background-color: var(--pix-neutral-100);
33
45
  outline: 0;
46
+ fill: var(--pix-neutral-800);
34
47
  }
35
48
 
36
49
  &--background {
@@ -41,13 +54,5 @@
41
54
  width: 2rem;
42
55
  min-width: 2rem;
43
56
  height: 2rem;
44
- font-size: 1rem;
45
- }
46
-
47
- &--big {
48
- width: 2.375rem;
49
- min-width: 2.375rem;
50
- height: 2.375rem;
51
- font-size: 1.25rem;
52
57
  }
53
58
  }
package/addon/styles/_pix-icon.scss ADDED
@@ -0,0 +1,4 @@
1
+ .pix-icon {
2
+ width: 1.5rem;
3
+ height: 1.5rem;
4
+ }
package/addon/styles/_pix-indicator-card.scss CHANGED
@@ -8,44 +8,48 @@
8
8
  background-color: var(--pix-neutral-0);
9
9
  border-radius: 8px;
10
10
 
11
- &__icon {
11
+ &__icon-wrapper {
12
12
  display: flex;
13
13
  align-items: center;
14
14
  justify-content: center;
15
15
  min-width: 96px;
16
- font-size: 2.5rem;
17
16
  border-radius: 8px 0 0 8px;
18
17
 
19
18
  &--grey,
20
19
  &--neutral {
21
- color: var(--pix-neutral-500);
22
20
  background-color: var(--pix-neutral-20);
21
+ fill: var(--pix-neutral-500);
23
22
  }
24
23
 
25
24
  &--blue,
26
25
  &--primary {
27
- color: var(--pix-primary-700);
28
26
  background-color: var(--pix-primary-10);
27
+ fill: var(--pix-primary-700);
29
28
  }
30
29
 
31
30
  &--green,
32
31
  &--success {
33
- color: var(--pix-success-700);
34
32
  background-color: var(--pix-success-50);
33
+ fill: var(--pix-success-700);
35
34
  }
36
35
 
37
36
  &--purple,
38
37
  &--tertiary {
39
- color: var(--pix-tertiary-900);
40
38
  background-color: var(--pix-tertiary-100);
39
+ fill: var(--pix-tertiary-900);
41
40
  }
42
41
 
43
42
  &--warning {
44
- color: var(--pix-warning-700);
45
43
  background-color: var(--pix-warning-50);
44
+ fill: var(--pix-warning-700);
46
45
  }
47
46
  }
48
47
 
48
+ &__icon {
49
+ width: 2.5rem;
50
+ height: 2.5rem;
51
+ }
52
+
49
53
  &__content {
50
54
  display: flex;
51
55
  flex-direction: column;
@@ -86,7 +90,9 @@
86
90
  }
87
91
 
88
92
  &__tooltip-icon {
93
+ width: 1rem;
94
+ height:1rem;
89
95
  margin: 0 var(--pix-spacing-2x);
90
- color: var(--pix-neutral-500);
96
+ fill: var(--pix-neutral-500);
91
97
  }
92
98
  }
package/addon/styles/_pix-input-password.scss CHANGED
@@ -66,12 +66,11 @@
66
66
  &__icon {
67
67
  position: absolute;
68
68
  right: 12px;
69
- width: 10px;
70
- height: 10px;
69
+ width: 1rem;
70
+ height: 1rem;
71
71
  padding: 2px;
72
- color: var(--pix-neutral-0);
73
- font-size: 0.6rem;
74
72
  border-radius: 50%;
73
+ fill: var(--pix-neutral-0);
75
74
  }
76
75
 
77
76
  &__error-icon {
package/addon/styles/_pix-input.scss CHANGED
@@ -18,12 +18,11 @@
18
18
  position: absolute;
19
19
  right: 12px;
20
20
  bottom: calc(50% - 7px); // height/2 + padding
21
- width: 10px;
22
- height: 10px;
21
+ width: 1rem;
22
+ height: 1rem;
23
23
  padding: 2px;
24
- color: var(--pix-neutral-0);
25
- font-size: 0.6rem;
26
24
  border-radius: 50%;
25
+ fill: var(--pix-neutral-0);
27
26
 
28
27
  &.pix-input__error-icon {
29
28
  background: var(--pix-error-700);
package/addon/styles/_pix-label-wrapped.scss CHANGED
@@ -32,6 +32,7 @@
32
32
  --state-border-color: var(--pix-success-300);
33
33
 
34
34
  color: var(--pix-success-700);
35
+ fill: var(--pix-success-700);
35
36
  }
36
37
 
37
38
  &.pix-label-wrapped--state-error {
@@ -39,6 +40,7 @@
39
40
  --state-border-color: var(--pix-error-500);
40
41
 
41
42
  color: var(--pix-error-700);
43
+ fill: var(--pix-error-700);
42
44
  }
43
45
 
44
46
  & .pix-label-wrapped__state-icon {
package/addon/styles/_pix-message.scss CHANGED
@@ -13,25 +13,30 @@
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);
16
17
  }
17
18
 
18
19
  &.pix-message--alert {
19
20
  color: var(--pix-error-700);
20
21
  background-color: var(--pix-error-50);
22
+ fill: var(--pix-info-700);
21
23
  }
22
24
 
23
25
  &.pix-message--error {
24
26
  color: var(--pix-error-700);
25
27
  background-color: var(--pix-error-50);
28
+ fill: var(--pix-error-700);
26
29
  }
27
30
 
28
31
  &.pix-message--success {
29
32
  color: var(--pix-success-700);
30
33
  background-color: var(--pix-success-50);
34
+ fill: var(--pix-success-700);
31
35
  }
32
36
 
33
37
  &.pix-message--warning {
34
38
  color: var(--pix-warning-700);
35
39
  background-color: var(--pix-warning-50);
40
+ fill: var(--pix-warning-700);
36
41
  }
37
42
  }
package/addon/styles/_pix-multi-select.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  &__search-icon {
36
- color: var(--pix-neutral-900);
36
+ fill: 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);
62
61
  pointer-events: none;
62
+ fill: var(--pix-neutral-900);
63
63
  }
64
64
  }
65
65
 
package/addon/styles/_pix-pagination.scss CHANGED
@@ -44,6 +44,7 @@
44
44
 
45
45
  @include device-is('tablet') {
46
46
  .pix-pagination {
47
+ gap:var(--pix-spacing-2x);
47
48
  justify-content: space-between;
48
49
  }
49
50
 
package/addon/styles/_pix-return-to.scss CHANGED
@@ -9,8 +9,9 @@
9
9
 
10
10
  &__icon {
11
11
  position: relative;
12
+ width: 2.3rem;
13
+ height: 2.3rem;
12
14
  padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
13
- font-size: 1rem;
14
15
  }
15
16
 
16
17
  &:focus,
@@ -29,11 +30,11 @@
29
30
  &:hover,
30
31
  &:active {
31
32
  .pix-return-to__icon {
32
- color: $arrowHoverColor;
33
33
  background-color: $arrowBgColor;
34
34
  border-radius: 50%;
35
35
  outline: 1px solid var(--pix-neutral-0);
36
36
  outline-offset: -3px;
37
+ fill: $arrowHoverColor;
37
38
  }
38
39
  }
39
40
  }
package/addon/styles/_pix-search-input.scss CHANGED
@@ -15,13 +15,9 @@
15
15
 
16
16
  svg {
17
17
  position: absolute;
18
- bottom: calc(50% - 8px);
19
- left: 12px;
20
- width: 12px;
21
- height: 12px;
22
- padding: 2px;
23
- color: var(--pix-neutral-500);
24
- font-size: 0.6rem;
18
+ bottom: calc(50% - 0.8rem);
19
+ left: var(--pix-spacing-2x);
20
+ fill: var(--pix-neutral-500);
25
21
  }
26
22
  }
27
23
 
package/addon/styles/_pix-select.scss CHANGED
@@ -102,6 +102,10 @@
102
102
  border-radius: var(--pix-spacing-1x);
103
103
  cursor: pointer;
104
104
 
105
+ &__icon {
106
+ fill: var(--pix-neutral-900);
107
+ }
108
+
105
109
  &--error {
106
110
  @extend %pix-form-error-state;
107
111
  }
@@ -115,8 +119,8 @@
115
119
  &__dropdown-icon {
116
120
  @extend %pix-body-s;
117
121
 
118
- color: var(--pix-neutral-900);
119
122
  pointer-events: none;
123
+ fill: var(--pix-neutral-900);
120
124
  }
121
125
  }
122
126
 
@@ -153,7 +157,6 @@
153
157
  position: absolute;
154
158
  top: 50%;
155
159
  right: var(--pix-spacing-2x);
156
- font-size: 1.125rem;
157
160
  transform: translateY(-50%);
158
161
  visibility: hidden;
159
162
  opacity: 0;
@@ -195,5 +198,6 @@
195
198
 
196
199
  &__icon {
197
200
  margin: auto var(--pix-spacing-1x);
201
+ fill: var(--pix-neutral-100)
198
202
  }
199
203
  }
package/addon/styles/_pix-toggle.scss CHANGED
@@ -19,6 +19,15 @@
19
19
  background: var(--pix-neutral-20);
20
20
  border: 1px solid var(--pix-neutral-500);
21
21
  border-radius: 4px;
22
+
23
+ &--icon {
24
+ font-size: 0;
25
+ }
26
+ }
27
+
28
+ &__with-icon > svg {
29
+ width: 1.4rem;
30
+ height: 1.4rem;
22
31
  }
23
32
 
24
33
  &__on,
@@ -31,11 +40,13 @@
31
40
  &__on {
32
41
  color: var(--pix-neutral-800);
33
42
  font-weight: var(--pix-font-normal);
43
+ fill: var(--pix-neutral-800);
34
44
  }
35
45
 
36
46
  &__off {
37
47
  color: var(--pix-neutral-20);
38
48
  background-color: var(--pix-neutral-800);
49
+ fill: var(--pix-neutral-20);
39
50
  }
40
51
 
41
52
  &--pressed {
@@ -44,12 +55,14 @@
44
55
  color: var(--pix-neutral-20);
45
56
  font-weight: inherit;
46
57
  background-color: var(--pix-neutral-800);
58
+ fill: var(--pix-neutral-20);
47
59
  }
48
60
 
49
61
  &__off {
50
- color: inherit;
62
+ color: var(--pix-neutral-800);
51
63
  font-weight: var(--pix-font-normal);
52
64
  background-color: transparent;
65
+ fill: var(--pix-neutral-800);
53
66
  }
54
67
  }
55
68
  }
package/addon/styles/_pix-tooltip.scss CHANGED
@@ -7,6 +7,12 @@
7
7
  &__trigger-element {
8
8
  display: block;
9
9
  width: 100%;
10
+
11
+ > svg {
12
+ width: 1rem;
13
+ height: 1rem;
14
+ fill:var(--pix-neutral-500);
15
+ }
10
16
  }
11
17
 
12
18
  &__trigger-element:hover + .pix-tooltip__content {
@@ -47,6 +53,12 @@
47
53
  opacity: 0;
48
54
  transition: opacity 0.3s;
49
55
  pointer-events: none;
56
+ fill: var(--pix-neutral-0);
57
+
58
+ > .pix-icon {
59
+ width: 1rem;
60
+ height: 1rem;
61
+ }
50
62
 
51
63
  &--inline {
52
64
  white-space: nowrap;
package/addon/styles/addon.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @import 'pix-design-tokens';
2
2
  @import 'normalize-reset';
3
3
  @import 'a11y';
4
+ @import 'pix-icon';
4
5
  @import 'pix-background-header';
5
6
  @import 'pix-banner';
6
7
  @import 'pix-block';
@@ -35,6 +36,7 @@
35
36
  @import 'trap-focus';
36
37
  @import 'pix-search-input';
37
38
 
39
+
38
40
  // at the end so it can override it's children scss
39
41
  @import 'pix-filterable-and-searchable-select';
40
42
  @import 'component-state';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "46.15.1",
3
+ "version": "47.0.0",
4
4
  "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
5
5
  "keywords": [
6
6
  "ember-addon"