@empathyco/x-design-system 0.0.2-alpha.20 → 0.0.2-alpha.21

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/dist/components/attach.css +3 -4
  2. package/dist/components/badge.css +10 -10
  3. package/dist/components/button.css +64 -64
  4. package/dist/components/filter-facet.css +9 -9
  5. package/dist/components/icon.css +6 -6
  6. package/dist/components/index.css +3 -3
  7. package/dist/components/input-group.css +31 -31
  8. package/dist/components/input.css +9 -9
  9. package/dist/components/picture.css +5 -1
  10. package/dist/components/progress-bar.css +1 -1
  11. package/dist/components/scroll.css +5 -4
  12. package/dist/components/sliding-panel.css +5 -6
  13. package/dist/components/suggestion-group.css +13 -13
  14. package/dist/components/suggestion.css +4 -4
  15. package/dist/components/tag.css +43 -45
  16. package/dist/demo/assets/index-B26rEuNS.js +1 -0
  17. package/dist/demo/index.html +1 -1
  18. package/package.json +5 -4
  19. package/dist/demo/assets/index-DS7bAgX8.js +0 -1
package/dist/components/input.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* Base */
2
2
  @utility input {
3
- @apply xds:ps-16 xds:pe-16 xds:font-regular xds:cursor-text xds:text-ellipsis;
3
+ @apply xds:cursor-text xds:ps-16 xds:pe-16 xds:font-regular xds:text-ellipsis;
4
4
  @apply xds:border-1 xds:border-neutral-90;
5
5
  @apply xds:bg-neutral-0 xds:text-neutral-90;
6
6
 
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  &::placeholder {
24
- @apply xds:text-neutral-50 xds:font-family-main xds:font-regular;
24
+ @apply xds:font-family-main xds:font-regular xds:text-neutral-50;
25
25
  }
26
26
  }
27
27
 
@@ -41,7 +41,7 @@
41
41
  /* Line */
42
42
  @utility input-line {
43
43
  @apply xds:border-0 xds:border-b-neutral-90;
44
- @apply xds:bg-bottom xds:bg-size-[100%_1px] xds:bg-no-repeat;
44
+ @apply xds:bg-size-[100%_1px] xds:bg-bottom xds:bg-no-repeat;
45
45
  background-image: linear-gradient(var(--xds-color-neutral-90), var(--xds-color-neutral-90));
46
46
 
47
47
  &:hover {
@@ -61,22 +61,22 @@
61
61
 
62
62
  /* Colors */
63
63
  @utility input-* {
64
- border-color: --value(--color- * -50);
64
+ border-color: --value(--color-*-50);
65
65
 
66
66
  &.xds\:input-line {
67
- background-image: linear-gradient(--value(--color- * -50), --value(--color- * -50));
67
+ background-image: linear-gradient(--value(--color-*-50), --value(--color-*-50));
68
68
 
69
69
  @variant focus {
70
- box-shadow: 0 2px 0 -0.5px --value(--color- * -25);
70
+ box-shadow: 0 2px 0 -0.5px --value(--color-*-25);
71
71
  }
72
72
  }
73
73
 
74
74
  &:hover {
75
- border-color: --value(--color- * -75);
75
+ border-color: --value(--color-*-75);
76
76
  }
77
77
 
78
78
  @variant focus {
79
- border-color: --value(--color- * -75);
80
- outline-color: --value(--color- * -25);
79
+ border-color: --value(--color-*-75);
80
+ outline-color: --value(--color-*-25);
81
81
  }
82
82
  }
package/dist/components/picture.css CHANGED
@@ -1,11 +1,14 @@
1
+ /* Base */
1
2
  @utility picture {
2
3
  @apply xds:block xds:aspect-ratio-default xds:overflow-hidden;
3
4
  }
4
5
 
6
+ /* Image */
5
7
  @utility picture-image {
6
- @apply xds:aspect-ratio-default xds:object-contain xds:w-full xds:h-full;
8
+ @apply xds:aspect-ratio-default xds:h-full xds:w-full xds:object-contain;
7
9
  }
8
10
 
11
+ /* Zoom */
9
12
  @utility picture-zoom {
10
13
  & > .xds\:picture-image {
11
14
  @apply xds:transition-transform xds:duration-300 xds:ease-out;
@@ -16,6 +19,7 @@
16
19
  }
17
20
  }
18
21
 
22
+ /* Overlay */
19
23
  @utility picture-overlay {
20
24
  &:hover {
21
25
  @apply xds:mix-blend-multiply;
package/dist/components/progress-bar.css CHANGED
@@ -25,6 +25,6 @@
25
25
  /* Colors */
26
26
  @utility progress-bar-* {
27
27
  & > .xds\:progress-bar-fill {
28
- background-color: --value(--color- * -50);
28
+ background-color: --value(--color-*-50);
29
29
  }
30
30
  }
package/dist/components/scroll.css CHANGED
@@ -1,5 +1,6 @@
1
+ /* Base */
1
2
  @utility scroll {
2
- @apply xds:overflow-y-scroll xds:min-h-0;
3
+ @apply xds:min-h-0 xds:overflow-y-scroll;
3
4
 
4
5
  @media (hover: hover) and (pointer: fine) {
5
6
  &:hover {
@@ -16,12 +17,12 @@
16
17
  }
17
18
 
18
19
  &::-webkit-scrollbar-thumb {
19
- @apply xds:bg-clip-content xds:bg-(--xds-color-thumb-scroll-bar);
20
- @apply xds:border-4 xds:border-transparent xds:rounded-3xl;
20
+ @apply xds:bg-thumb-scroll-bar xds:bg-clip-content;
21
+ @apply xds:rounded-3xl xds:border-4 xds:border-transparent;
21
22
  }
22
23
 
23
24
  &::-webkit-scrollbar-track {
24
- @apply xds:bg-(--xds-color-background-scroll-bar);
25
+ @apply xds:bg-background-scroll-bar;
25
26
  }
26
27
  }
27
28
  }
package/dist/components/sliding-panel.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* Base */
2
2
  @utility sliding-panel {
3
- @apply xds:flex xds:flex-row xds:flex-nowrap xds:items-center xds:relative;
3
+ @apply xds:relative xds:flex xds:flex-row xds:flex-nowrap xds:items-center;
4
4
  }
5
5
 
6
6
  /* Fade */
@@ -34,7 +34,7 @@
34
34
  @utility sliding-panel-button {
35
35
  @apply xds:button;
36
36
  @apply xds:absolute xds:z-1;
37
- @apply xds:transition-all xds:ease-out xds:duration-200 xds:translate-x-0;
37
+ @apply xds:translate-x-0 xds:transition-all xds:duration-200 xds:ease-out;
38
38
  }
39
39
 
40
40
  @utility sliding-panel-button-left {
@@ -58,7 +58,7 @@
58
58
  &:hover {
59
59
  &:not(.xds\:sliding-panel-at-start) > .xds\:sliding-panel-button-left,
60
60
  &:not(.xds\:sliding-panel-at-end) > .xds\:sliding-panel-button-right {
61
- @apply xds:opacity-100 xds:pointer-events-auto;
61
+ @apply xds:pointer-events-auto xds:opacity-100;
62
62
  }
63
63
  }
64
64
  }
@@ -97,7 +97,7 @@
97
97
  }
98
98
  @utility sliding-panel-at-start {
99
99
  & > .xds\:sliding-panel-button-left {
100
- @apply xds:opacity-0 xds:pointer-events-none;
100
+ @apply xds:pointer-events-none xds:opacity-0;
101
101
  }
102
102
 
103
103
  & > .xds\:sliding-panel-fade-sm {
@@ -117,10 +117,9 @@
117
117
  mask: none;
118
118
  }
119
119
  }
120
-
121
120
  @utility sliding-panel-at-end {
122
121
  & > .xds\:sliding-panel-button-right {
123
- @apply xds:opacity-0 xds:pointer-events-none;
122
+ @apply xds:pointer-events-none xds:opacity-0;
124
123
  }
125
124
 
126
125
  & > .xds\:sliding-panel-fade-sm {
package/dist/components/suggestion-group.css CHANGED
@@ -1,10 +1,10 @@
1
1
  /* Base */
2
2
  @utility suggestion-group {
3
3
  @apply xds:font-family-main xds:font-regular xds:text-neutral-90;
4
- @apply xds:grid xds:grid-flow-col xds:grid-cols-[auto_[last-col]] xds:auto-cols-[1fr];
5
- @apply xds:items-center xds:content-center xds:justify-start;
4
+ @apply xds:grid xds:auto-cols-[1fr] xds:grid-flow-col xds:grid-cols-[auto_[last-col]];
5
+ @apply xds:content-center xds:items-center xds:justify-start;
6
6
  @apply xds:box-border xds:cursor-pointer xds:overflow-hidden;
7
- @apply xds:ps-0 xds:pe-0 xds:gap-16;
7
+ @apply xds:gap-16 xds:ps-0 xds:pe-0;
8
8
 
9
9
  /* `@apply xds:suggestion-group-md;` can not be use here because cause circular dependency. */
10
10
  @apply xds:min-h-32 xds:text-sm;
@@ -38,7 +38,7 @@
38
38
 
39
39
  /* Outlined */
40
40
  @utility suggestion-group-outlined {
41
- @apply xds:bg-neutral-0 xds:border-1 xds:border-neutral-90;
41
+ @apply xds:border-1 xds:border-neutral-90 xds:bg-neutral-0;
42
42
  @apply xds:gap-4!;
43
43
 
44
44
  &:hover,
@@ -66,24 +66,24 @@
66
66
  /* Ghost */
67
67
  @utility suggestion-group-ghost {
68
68
  @apply xds:suggestion-group-outlined;
69
- @apply xds:bg-transparent xds:border-0;
69
+ @apply xds:border-0 xds:bg-transparent;
70
70
  }
71
71
 
72
72
  /* Colors */
73
73
  @utility suggestion-group-* {
74
- color: --value(--color- * -75);
74
+ color: --value(--color-*-75);
75
75
 
76
76
  &.xds\:suggestion-group-outlined {
77
- border-color: --value(--color- * -75);
77
+ border-color: --value(--color-*-75);
78
78
  }
79
79
  }
80
80
 
81
81
  /* Button */
82
82
  @utility suggestion-group-button {
83
- @apply xds:grid xds:grid-flow-col xds:items-baseline xds:content-center xds:justify-center;
83
+ @apply xds:grid xds:grid-flow-col xds:content-center xds:items-baseline xds:justify-center;
84
84
  @apply xds:box-border xds:cursor-pointer;
85
- @apply xds:bg-transparent xds:text-current xds:min-h-[inherit] xds:aspect-square xds:max-h-full;
86
- @apply xds:before:content-['|'] xds:before:w-0 xds:before:invisible;
85
+ @apply xds:aspect-square xds:max-h-full xds:min-h-[inherit] xds:bg-transparent xds:text-current;
86
+ @apply xds:before:invisible xds:before:w-0 xds:before:content-['|'];
87
87
 
88
88
  &:hover {
89
89
  @apply xds:scale-[1.2];
@@ -97,13 +97,13 @@
97
97
  /* Button Ghost */
98
98
  @utility suggestion-group-button-ghost {
99
99
  &:hover {
100
- @apply xds:bg-neutral-25 xds:scale-none;
100
+ @apply xds:scale-none xds:bg-neutral-25;
101
101
  }
102
102
  }
103
103
 
104
104
  /* Button Rectangle */
105
105
  @utility suggestion-group-button-rectangle {
106
- @apply xds:ps-8 xds:pe-8 xds:aspect-auto;
106
+ @apply xds:aspect-auto xds:ps-8 xds:pe-8;
107
107
  }
108
108
 
109
109
  /* Button Lighter */
@@ -116,6 +116,6 @@
116
116
  /* Button Colors */
117
117
  @utility suggestion-group-button-* {
118
118
  &.xds\:suggestion-group-button-lighter:hover {
119
- color: --value(--color- * -50);
119
+ color: --value(--color-*-50);
120
120
  }
121
121
  }
package/dist/components/suggestion.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Base */
2
2
  @utility suggestion {
3
- @apply xds:font-family-main xds:font-regular xds:text-start xds:text-neutral-90;
4
- @apply xds:grid xds:grid-flow-col xds:items-center xds:content-center xds:justify-start;
3
+ @apply xds:text-start xds:font-family-main xds:font-regular xds:text-neutral-90;
4
+ @apply xds:grid xds:grid-flow-col xds:content-center xds:items-center xds:justify-start;
5
5
  @apply xds:box-border xds:cursor-pointer;
6
6
 
7
7
  /* `@apply xds:suggestion-md;` can not be use here because cause circular dependency. */
@@ -29,7 +29,7 @@
29
29
 
30
30
  /* Outlined */
31
31
  @utility suggestion-outlined {
32
- @apply xds:bg-neutral-0 xds:border-1 xds:border-current;
32
+ @apply xds:border-1 xds:border-current xds:bg-neutral-0;
33
33
  @apply xds:ps-8 xds:pe-8;
34
34
 
35
35
  &:hover {
@@ -49,5 +49,5 @@
49
49
 
50
50
  /* Colors */
51
51
  @utility suggestion-* {
52
- color: --value(--color- * -75);
52
+ color: --value(--color-*-75);
53
53
  }
package/dist/components/tag.css CHANGED
@@ -1,14 +1,14 @@
1
1
  /* Base */
2
2
  @utility tag {
3
- @apply xds:flex xds:justify-center xds:items-center xds:content-center xds:flex-row xds:flex-nowrap xds:gap-8;
4
- @apply xds:border-1 xds:border-solid xds:box-border;
5
- @apply xds:text-neutral-75 xds:bg-neutral-0 xds:border-neutral-25;
6
- @apply xds:font-family-main xds:font-regular xds:tracking-lg xds:leading-sm;
3
+ @apply xds:flex xds:flex-row xds:flex-nowrap xds:content-center xds:items-center xds:justify-center xds:gap-8;
4
+ @apply xds:box-border xds:border-1 xds:border-solid;
5
+ @apply xds:border-neutral-25 xds:bg-neutral-0 xds:text-neutral-75;
6
+ @apply xds:font-family-main xds:leading-sm xds:font-regular xds:tracking-lg;
7
7
  @apply xds:cursor-pointer;
8
8
  @apply xds:py-0;
9
9
 
10
10
  /* `@apply xds:tag-md;` can not be use here because cause circular dependency. */
11
- @apply xds:min-h-32 xds:text-sm xds:ps-12 xds:pe-12;
11
+ @apply xds:min-h-32 xds:ps-12 xds:pe-12 xds:text-sm;
12
12
 
13
13
  @variant selected {
14
14
  @apply xds:border-neutral-90 xds:text-neutral-90;
@@ -20,30 +20,28 @@
20
20
  }
21
21
 
22
22
  @variant disabled {
23
- @apply xds:border-neutral-25 xds:border-1 xds:text-neutral-25;
23
+ @apply xds:border-1 xds:border-neutral-25 xds:text-neutral-25;
24
24
  @apply xds:cursor-not-allowed;
25
25
  }
26
26
  }
27
27
 
28
28
  /* Sizes */
29
29
  @utility tag-sm {
30
- @apply xds:min-h-24 xds:text-sm xds:ps-8 xds:pe-8;
30
+ @apply xds:min-h-24 xds:ps-8 xds:pe-8 xds:text-sm;
31
31
  }
32
-
33
32
  @utility tag-md {
34
- @apply xds:min-h-32 xds:text-sm xds:ps-12 xds:pe-12;
33
+ @apply xds:min-h-32 xds:ps-12 xds:pe-12 xds:text-sm;
35
34
  }
36
-
37
35
  @utility tag-lg {
38
- @apply xds:min-h-40 xds:text-md xds:ps-16 xds:pe-16;
36
+ @apply xds:min-h-40 xds:ps-16 xds:pe-16 xds:text-md;
39
37
  }
40
38
 
41
39
  /* Outlined */
42
40
  @utility tag-outlined {
43
- @apply xds:bg-transparent xds:border-neutral-50 xds:text-neutral-50;
41
+ @apply xds:border-neutral-50 xds:bg-transparent xds:text-neutral-50;
44
42
 
45
43
  @variant selected {
46
- @apply xds:bg-neutral-25 xds:border-neutral-90 xds:text-neutral-75 xds:border-1;
44
+ @apply xds:border-1 xds:border-neutral-90 xds:bg-neutral-25 xds:text-neutral-75;
47
45
  }
48
46
 
49
47
  @variant hover-active-focus {
@@ -51,34 +49,34 @@
51
49
  }
52
50
 
53
51
  @variant disabled {
54
- @apply xds:bg-transparent xds:border-neutral-25 xds:border-1 xds:text-neutral-25;
52
+ @apply xds:border-1 xds:border-neutral-25 xds:bg-transparent xds:text-neutral-25;
55
53
  }
56
54
  }
57
55
 
58
56
  /* Solid */
59
57
  @utility tag-solid {
60
- @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-75;
58
+ @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-75;
61
59
 
62
60
  @variant selected {
63
- @apply xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
61
+ @apply xds:border-neutral-90 xds:bg-neutral-90 xds:text-neutral-0;
64
62
 
65
63
  @variant hover-active-focus {
66
- @apply xds:bg-neutral-50 xds:border-neutral-50 xds:text-neutral-0;
64
+ @apply xds:border-neutral-50 xds:bg-neutral-50 xds:text-neutral-0;
67
65
  }
68
66
  }
69
67
 
70
68
  @variant hover-active-focus {
71
- @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-neutral-75;
69
+ @apply xds:border-neutral-25 xds:bg-neutral-25 xds:text-neutral-75;
72
70
  }
73
71
 
74
72
  @variant disabled {
75
- @apply xds:bg-neutral-10! xds:border-neutral-10! xds:text-neutral-25!;
73
+ @apply xds:border-neutral-10! xds:bg-neutral-10! xds:text-neutral-25!;
76
74
  }
77
75
  }
78
76
 
79
77
  /* Ghost */
80
78
  @utility tag-ghost {
81
- @apply xds:bg-transparent xds:border-transparent xds:text-neutral-50;
79
+ @apply xds:border-transparent xds:bg-transparent xds:text-neutral-50;
82
80
 
83
81
  @variant selected {
84
82
  @apply xds:border-transparent xds:text-neutral-90;
@@ -90,11 +88,11 @@
90
88
  }
91
89
 
92
90
  @variant hover-active-focus {
93
- @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-90;
91
+ @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-90;
94
92
  }
95
93
 
96
94
  @variant disabled {
97
- @apply xds:bg-transparent xds:border-transparent! xds:text-neutral-25;
95
+ @apply xds:border-transparent! xds:bg-transparent xds:text-neutral-25;
98
96
  @apply xds:font-regular;
99
97
  }
100
98
  }
@@ -121,75 +119,75 @@
121
119
 
122
120
  /* Colors */
123
121
  @utility tag-* {
124
- @apply xds:text-neutral-75 xds:border-neutral-25;
122
+ @apply xds:border-neutral-25 xds:text-neutral-75;
125
123
 
126
124
  @variant selected {
127
- border-color: --value(--color- * -75);
125
+ border-color: --value(--color-*-75);
128
126
  }
129
127
 
130
128
  @variant hover-active-focus {
131
129
  @apply xds:text-neutral-90;
132
- border-color: --value(--color- * -50);
130
+ border-color: --value(--color-*-50);
133
131
  }
134
132
 
135
133
  &.xds\:tag-outlined {
136
134
  @apply xds:text-neutral-75;
137
- border-color: --value(--color- * -50);
135
+ border-color: --value(--color-*-50);
138
136
 
139
137
  @variant selected {
140
- background-color: --value(--color- * -25);
141
- border-color: --value(--color- * -75);
138
+ background-color: --value(--color-*-25);
139
+ border-color: --value(--color-*-75);
142
140
  }
143
141
 
144
142
  @variant hover-active-focus {
145
- border-color: --value(--color- * -75);
146
- color: --value(--color- * -75);
143
+ border-color: --value(--color-*-75);
144
+ color: --value(--color-*-75);
147
145
  }
148
146
  }
149
147
 
150
148
  &.xds\:tag-solid {
151
- background-color: --value(--color- * -25);
152
- border-color: --value(--color- * -25);
149
+ background-color: --value(--color-*-25);
150
+ border-color: --value(--color-*-25);
153
151
 
154
152
  @variant selected {
155
- background-color: --value(--color- * -75);
156
- border-color: --value(--color- * -75);
153
+ background-color: --value(--color-*-75);
154
+ border-color: --value(--color-*-75);
157
155
 
158
156
  @variant hover-active-focus {
159
- background-color: --value(--color- * -50);
160
- border-color: --value(--color- * -50);
157
+ background-color: --value(--color-*-50);
158
+ border-color: --value(--color-*-50);
161
159
  }
162
160
  }
163
161
 
164
162
  @variant hover-active-focus {
165
- background-color: --value(--color- * -25);
166
- border-color: --value(--color- * -25);
167
- color: --value(--color- * -75);
163
+ background-color: --value(--color-*-25);
164
+ border-color: --value(--color-*-25);
165
+ color: --value(--color-*-75);
168
166
  }
169
167
  }
170
168
 
171
169
  &.xds\:tag-ghost {
172
170
  @apply xds:border-transparent;
173
- color: --value(--color- * -75);
171
+ color: --value(--color-*-75);
174
172
 
175
173
  @variant selected {
176
- color: --value(--color- * -75);
174
+ color: --value(--color-*-75);
177
175
  }
178
176
 
179
177
  @variant hover-active-focus {
180
- color: --value(--color- * -75);
178
+ color: --value(--color-*-75);
181
179
  }
182
180
  }
183
181
 
184
182
  &.xds\:tag-tight {
185
- color: --value(--color- * -75);
183
+ color: --value(--color-*-75);
186
184
 
187
185
  @variant selected {
188
- color: --value(--color- * -75);
186
+ color: --value(--color-*-75);
189
187
  }
190
188
 
191
189
  @variant hover-active-focus {
192
- color: --value(--color- * -50);
190
+ color: --value(--color-*-50);
193
191
  }
194
192
  }
195
193
  }