@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/attach.css CHANGED
@@ -1,7 +1,9 @@
1
+ /* Container */
1
2
  @utility attach-container {
2
3
  @apply xds:relative;
3
4
  }
4
5
 
6
+ /* Positions */
5
7
  @utility attach-top-left {
6
8
  @apply xds:absolute xds:top-0 xds:left-0;
7
9
  transform: translate(calc(var(--xds-spacing-8, 50%) * -1), -50%);
@@ -14,7 +16,6 @@
14
16
  transform: translate(-50%, -50%);
15
17
  }
16
18
  }
17
-
18
19
  @utility attach-top-right {
19
20
  @apply xds:absolute xds:top-0 xds:right-0;
20
21
  transform: translate(var(--xds-spacing-8, 50%), -50%);
@@ -27,9 +28,8 @@
27
28
  transform: translate(50%, -50%);
28
29
  }
29
30
  }
30
-
31
31
  @utility attach-bottom-right {
32
- @apply xds:absolute xds:bottom-0 xds:right-0;
32
+ @apply xds:absolute xds:right-0 xds:bottom-0;
33
33
  transform: translate(var(--xds-spacing-8, 50%), 50%);
34
34
 
35
35
  &.xds\:badge-md {
@@ -40,7 +40,6 @@
40
40
  transform: translate(50%, 50%);
41
41
  }
42
42
  }
43
-
44
43
  @utility attach-bottom-left {
45
44
  @apply xds:absolute xds:bottom-0 xds:left-0;
46
45
  transform: translate(calc(var(--xds-spacing-8, 50%) * -1), 50%);
package/dist/components/badge.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /* Base */
2
2
  @utility badge {
3
- @apply xds:font-family-main xds:font-regular xds:text-xs;
3
+ @apply xds:font-family-main xds:text-xs xds:font-regular;
4
4
  @apply xds:inline-flex xds:items-center xds:justify-center xds:rounded-full;
5
- @apply xds:text-neutral-0 xds:bg-neutral-90;
5
+ @apply xds:bg-neutral-90 xds:text-neutral-0;
6
6
 
7
7
  /* `@apply xds:badge-md;` can not be use here because cause circular dependency. */
8
8
  @apply xds:h-24 xds:ps-8 xds:pe-8;
@@ -18,7 +18,7 @@
18
18
 
19
19
  /* Circle */
20
20
  @utility badge-circle {
21
- @apply xds:overflow-hidden xds:whitespace-nowrap xds:p-0 xds:w-24;
21
+ @apply xds:w-24 xds:overflow-hidden xds:p-0 xds:whitespace-nowrap;
22
22
 
23
23
  &.xds\:badge-sm {
24
24
  @apply xds:w-20;
@@ -30,36 +30,36 @@
30
30
 
31
31
  /* Light */
32
32
  @utility badge-light {
33
- @apply xds:text-neutral-90 xds:bg-neutral-0;
33
+ @apply xds:bg-neutral-0 xds:text-neutral-90;
34
34
  }
35
35
 
36
36
  /* Outlined */
37
37
  @utility badge-outlined {
38
- @apply xds:text-neutral-90 xds:bg-transparent;
38
+ @apply xds:bg-transparent xds:text-neutral-90;
39
39
  @apply xds:border-1 xds:border-neutral-90;
40
40
  }
41
41
 
42
42
  /* Bright */
43
43
  @utility badge-bright {
44
- @apply xds:text-neutral-90 xds:bg-transparent;
44
+ @apply xds:bg-transparent xds:text-neutral-90;
45
45
  @apply xds:border-1 xds:border-neutral-0;
46
46
  }
47
47
 
48
48
  /* Colors */
49
49
  @utility badge-* {
50
- background-color: --value(--color- * -75);
50
+ background-color: --value(--color-*-75);
51
51
 
52
52
  &.xds\:badge-light {
53
- background-color: --value(--color- * -25);
53
+ background-color: --value(--color-*-25);
54
54
  }
55
55
 
56
56
  &.xds\:badge-outlined {
57
57
  @apply xds:bg-transparent;
58
- border-color: --value(--color- * -50);
58
+ border-color: --value(--color-*-50);
59
59
  }
60
60
 
61
61
  &.xds\:badge-bright {
62
62
  @apply xds:bg-transparent;
63
- border-color: --value(--color- * -25);
63
+ border-color: --value(--color-*-25);
64
64
  }
65
65
  }
package/dist/components/button.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /* Base */
2
2
  @utility button {
3
- @apply xds:flex xds:justify-center xds:items-center xds:content-center xds:flex-row xds:flex-nowrap;
4
- @apply xds:border-1 xds:border-solid xds:box-border;
5
- @apply xds:text-neutral-0 xds:bg-neutral-90 xds:border-neutral-90;
3
+ @apply xds:flex xds:flex-row xds:flex-nowrap xds:content-center xds:items-center xds:justify-center;
4
+ @apply xds:box-border xds:border-1 xds:border-solid;
5
+ @apply xds:border-neutral-90 xds:bg-neutral-90 xds:text-neutral-0;
6
6
  @apply xds:font-family-main xds:font-bold xds:tracking-md;
7
7
  @apply xds:cursor-pointer;
8
8
 
@@ -10,14 +10,14 @@
10
10
  @apply xds:min-h-40 xds:gap-8 xds:ps-16 xds:pe-16 xds:text-sm;
11
11
 
12
12
  @variant hover-active {
13
- @apply xds:bg-neutral-100 xds:border-neutral-100;
13
+ @apply xds:border-neutral-100 xds:bg-neutral-100;
14
14
  }
15
15
 
16
16
  @variant selected {
17
- @apply xds:bg-neutral-100 xds:border-neutral-100;
17
+ @apply xds:border-neutral-100 xds:bg-neutral-100;
18
18
 
19
19
  @variant hover-active {
20
- @apply xds:bg-neutral-90 xds:border-neutral-90;
20
+ @apply xds:border-neutral-90 xds:bg-neutral-90;
21
21
  }
22
22
  }
23
23
 
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* Layouts */
49
49
  @utility button-circle {
50
- @apply xds:aspect-square xds:ps-0 xds:pe-0 xds:rounded-full;
50
+ @apply xds:aspect-square xds:rounded-full xds:ps-0 xds:pe-0;
51
51
  }
52
52
  @utility button-square {
53
53
  @apply xds:aspect-square xds:ps-0 xds:pe-0;
@@ -55,18 +55,18 @@
55
55
 
56
56
  /* Outlined */
57
57
  @utility button-outlined {
58
- @apply xds:text-neutral-90 xds:bg-transparent;
58
+ @apply xds:bg-transparent xds:text-neutral-90;
59
59
  @apply xds:border-1 xds:border-neutral-90;
60
60
 
61
61
  @variant hover-active {
62
- @apply xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
62
+ @apply xds:border-neutral-90 xds:bg-neutral-90 xds:text-neutral-0;
63
63
  }
64
64
 
65
65
  @variant selected {
66
- @apply xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
66
+ @apply xds:border-neutral-90 xds:bg-neutral-90 xds:text-neutral-0;
67
67
 
68
68
  @variant hover-active {
69
- @apply xds:bg-transparent xds:border-neutral-90 xds:text-neutral-90;
69
+ @apply xds:border-neutral-90 xds:bg-transparent xds:text-neutral-90;
70
70
  }
71
71
  }
72
72
 
@@ -82,7 +82,7 @@
82
82
 
83
83
  /* Ghost */
84
84
  @utility button-ghost {
85
- @apply xds:text-neutral-90 xds:bg-transparent;
85
+ @apply xds:bg-transparent xds:text-neutral-90;
86
86
  @apply xds:border-0;
87
87
 
88
88
  @variant hover-active {
@@ -90,19 +90,19 @@
90
90
  }
91
91
 
92
92
  &:hover {
93
- @apply xds:bg-neutral-10 xds:border-neutral-10;
93
+ @apply xds:border-neutral-10 xds:bg-neutral-10;
94
94
  }
95
95
 
96
96
  @variant selected {
97
- @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-90;
97
+ @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-90;
98
98
 
99
99
  @variant hover-active {
100
- @apply xds:bg-neutral-25 xds:border-neutral-25;
100
+ @apply xds:border-neutral-25 xds:bg-neutral-25;
101
101
  }
102
102
  }
103
103
 
104
104
  @variant disabled {
105
- @apply xds:bg-transparent xds:border-0 xds:text-neutral-25 xds:cursor-not-allowed;
105
+ @apply xds:cursor-not-allowed xds:border-0 xds:bg-transparent xds:text-neutral-25;
106
106
 
107
107
  @variant hover-active {
108
108
  @apply xds:border-0 xds:bg-transparent xds:text-neutral-25;
@@ -112,23 +112,23 @@
112
112
 
113
113
  /* Tight */
114
114
  @utility button-tight {
115
- @apply xds:bg-transparent xds:border-0 xds:text-neutral-90;
116
- @apply xds:pe-0 xds:ps-0;
115
+ @apply xds:border-0 xds:bg-transparent xds:text-neutral-90;
116
+ @apply xds:ps-0 xds:pe-0;
117
117
 
118
118
  @variant hover-active {
119
- @apply xds:bg-transparent xds:border-0 xds:text-neutral-100;
119
+ @apply xds:border-0 xds:bg-transparent xds:text-neutral-100;
120
120
  }
121
121
 
122
122
  @variant selected {
123
- @apply xds:bg-transparent xds:border-0 xds:text-neutral-100;
123
+ @apply xds:border-0 xds:bg-transparent xds:text-neutral-100;
124
124
 
125
125
  @variant hover-active {
126
- @apply xds:bg-transparent xds:border-0 xds:text-neutral-90;
126
+ @apply xds:border-0 xds:bg-transparent xds:text-neutral-90;
127
127
  }
128
128
  }
129
129
 
130
130
  @variant disabled {
131
- @apply xds:bg-transparent xds:border-0 xds:text-neutral-25;
131
+ @apply xds:border-0 xds:bg-transparent xds:text-neutral-25;
132
132
  @apply xds:cursor-not-allowed;
133
133
 
134
134
  @variant hover-active {
@@ -140,25 +140,25 @@
140
140
  /* Link */
141
141
  @utility button-link {
142
142
  @apply xds:inline-flex xds:min-h-0 xds:ps-0 xds:pe-0;
143
- @apply xds:border-0 xds:text-neutral-90 xds:bg-transparent;
144
- @apply xds:font-[inherit] xds:tracking-[inherit] xds:leading-[inherit] xds:underline;
143
+ @apply xds:border-0 xds:bg-transparent xds:text-neutral-90;
144
+ @apply xds:font-[inherit] xds:leading-[inherit] xds:tracking-[inherit] xds:underline;
145
145
  font-size: inherit;
146
146
  font-weight: inherit;
147
147
 
148
148
  @variant hover-active {
149
- @apply xds:bg-transparent xds:border-0 xds:text-neutral-100;
149
+ @apply xds:border-0 xds:bg-transparent xds:text-neutral-100;
150
150
  }
151
151
 
152
152
  @variant selected {
153
- @apply xds:bg-transparent xds:border-0 xds:text-neutral-100 xds:font-bold;
153
+ @apply xds:border-0 xds:bg-transparent xds:font-bold xds:text-neutral-100;
154
154
 
155
155
  @variant hover-active {
156
- @apply xds:bg-transparent xds:border-0 xds:text-neutral-90;
156
+ @apply xds:border-0 xds:bg-transparent xds:text-neutral-90;
157
157
  }
158
158
  }
159
159
 
160
160
  @variant disabled {
161
- @apply xds:bg-transparent xds:border-0 xds:text-neutral-25;
161
+ @apply xds:border-0 xds:bg-transparent xds:text-neutral-25;
162
162
  @apply xds:cursor-not-allowed;
163
163
  font-weight: inherit;
164
164
 
@@ -170,107 +170,107 @@
170
170
 
171
171
  /* Colors */
172
172
  @utility button-* {
173
- background-color: --value(--color- * -50);
174
- border-color: --value(--color- * -50);
173
+ background-color: --value(--color-*-50);
174
+ border-color: --value(--color-*-50);
175
175
 
176
176
  @variant hover-active {
177
- background-color: --value(--color- * -75);
178
- border-color: --value(--color- * -75);
177
+ background-color: --value(--color-*-75);
178
+ border-color: --value(--color-*-75);
179
179
  }
180
180
 
181
181
  @variant selected {
182
- background-color: --value(--color- * -75);
183
- border-color: --value(--color- * -75);
182
+ background-color: --value(--color-*-75);
183
+ border-color: --value(--color-*-75);
184
184
 
185
185
  @variant hover-active {
186
- background-color: --value(--color- * -50);
187
- border-color: --value(--color- * -50);
186
+ background-color: --value(--color-*-50);
187
+ border-color: --value(--color-*-50);
188
188
  }
189
189
  }
190
190
 
191
191
  &.xds\:button-outlined {
192
192
  @apply xds:bg-transparent;
193
- border-color: --value(--color- * -50);
194
- color: --value(--color- * -50);
193
+ border-color: --value(--color-*-50);
194
+ color: --value(--color-*-50);
195
195
 
196
196
  @variant hover-active {
197
197
  @apply xds:text-neutral-0;
198
- background-color: --value(--color- * -50);
199
- border-color: --value(--color- * -50);
198
+ background-color: --value(--color-*-50);
199
+ border-color: --value(--color-*-50);
200
200
  }
201
201
 
202
202
  @variant selected {
203
203
  @apply xds:text-neutral-0;
204
- background-color: --value(--color- * -50);
205
- border-color: --value(--color- * -50);
204
+ background-color: --value(--color-*-50);
205
+ border-color: --value(--color-*-50);
206
206
 
207
207
  @variant hover-active {
208
208
  @apply xds:bg-transparent;
209
- color: --value(--color- * -50);
209
+ color: --value(--color-*-50);
210
210
  }
211
211
  }
212
212
  }
213
213
 
214
214
  &.xds\:button-ghost {
215
215
  @apply xds:border-0 xds:bg-transparent;
216
- color: --value(--color- * -50);
216
+ color: --value(--color-*-50);
217
217
 
218
218
  @variant hover-active {
219
219
  @apply xds:border-transparent xds:bg-transparent xds:text-neutral-100;
220
220
  }
221
221
 
222
222
  &:hover {
223
- @apply xds:bg-neutral-10 xds:border-neutral-10;
224
- color: --value(--color- * -75);
223
+ @apply xds:border-neutral-10 xds:bg-neutral-10;
224
+ color: --value(--color-*-75);
225
225
  }
226
226
 
227
227
  @variant selected {
228
- @apply xds:bg-neutral-10 xds:border-neutral-10;
229
- color: --value(--color- * -75);
228
+ @apply xds:border-neutral-10 xds:bg-neutral-10;
229
+ color: --value(--color-*-75);
230
230
 
231
231
  @variant hover-active {
232
- @apply xds:bg-neutral-25 xds:border-neutral-25;
233
- color: --value(--color- * -75);
232
+ @apply xds:border-neutral-25 xds:bg-neutral-25;
233
+ color: --value(--color-*-75);
234
234
  }
235
235
  }
236
236
  }
237
237
 
238
238
  &.xds\:button-tight {
239
239
  @apply xds:border-0 xds:bg-transparent;
240
- color: --value(--color- * -50);
240
+ color: --value(--color-*-50);
241
241
 
242
242
  @variant hover-active {
243
- @apply xds:bg-transparent xds:border-0;
244
- color: --value(--color- * -75);
243
+ @apply xds:border-0 xds:bg-transparent;
244
+ color: --value(--color-*-75);
245
245
  }
246
246
 
247
247
  @variant selected {
248
- @apply xds:bg-transparent xds:border-0;
249
- color: --value(--color- * -75);
248
+ @apply xds:border-0 xds:bg-transparent;
249
+ color: --value(--color-*-75);
250
250
 
251
251
  @variant hover-active {
252
- @apply xds:bg-transparent xds:border-0;
253
- color: --value(--color- * -50);
252
+ @apply xds:border-0 xds:bg-transparent;
253
+ color: --value(--color-*-50);
254
254
  }
255
255
  }
256
256
  }
257
257
 
258
258
  &.xds\:button-link {
259
259
  @apply xds:border-0 xds:bg-transparent;
260
- color: --value(--color- * -50);
260
+ color: --value(--color-*-50);
261
261
 
262
262
  @variant hover-active {
263
- @apply xds:bg-transparent xds:border-0;
264
- color: --value(--color- * -75);
263
+ @apply xds:border-0 xds:bg-transparent;
264
+ color: --value(--color-*-75);
265
265
  }
266
266
 
267
267
  @variant selected {
268
- @apply xds:bg-transparent xds:border-0;
269
- color: --value(--color- * -75);
268
+ @apply xds:border-0 xds:bg-transparent;
269
+ color: --value(--color-*-75);
270
270
 
271
271
  @variant hover-active {
272
- @apply xds:bg-transparent xds:border-0;
273
- color: --value(--color- * -50);
272
+ @apply xds:border-0 xds:bg-transparent;
273
+ color: --value(--color-*-50);
274
274
  }
275
275
  }
276
276
  }
package/dist/components/filter-facet.css CHANGED
@@ -1,9 +1,9 @@
1
1
  /* Base */
2
2
  @utility filter-facet {
3
- @apply xds:grid xds:grid-flow-col xds:box-border;
4
- @apply xds:items-baseline-last xds:content-center xds:justify-start;
3
+ @apply xds:box-border xds:grid xds:grid-flow-col;
4
+ @apply xds:content-center xds:items-baseline-last xds:justify-start;
5
5
  @apply xds:cursor-pointer;
6
- @apply xds:font-family-main xds:font-regular xds:text-start xds:text-neutral-90;
6
+ @apply xds:text-start xds:font-family-main xds:font-regular xds:text-neutral-90;
7
7
  @apply xds:border-b-1 xds:border-transparent;
8
8
 
9
9
  /* `@apply xds:filter-facet-md;` can not be use here because cause circular dependency. */
@@ -76,7 +76,7 @@
76
76
  }
77
77
 
78
78
  @variant disabled {
79
- @apply xds:border-transparent xds:text-neutral-25 xds:bg-transparent;
79
+ @apply xds:border-transparent xds:bg-transparent xds:text-neutral-25;
80
80
  }
81
81
  }
82
82
 
@@ -101,29 +101,29 @@
101
101
  }
102
102
 
103
103
  @variant disabled {
104
- @apply xds:opacity-100 xds:text-neutral-25;
104
+ @apply xds:text-neutral-25 xds:opacity-100;
105
105
  }
106
106
  }
107
107
 
108
108
  /* Colors */
109
109
  @utility filter-facet-* {
110
110
  &:hover:not(.xds\:filter-facet-ghost) {
111
- color: --value(--color- * -50);
111
+ color: --value(--color-*-50);
112
112
  }
113
113
 
114
114
  @variant selected {
115
- color: --value(--color- * -50);
115
+ color: --value(--color-*-50);
116
116
  }
117
117
 
118
118
  &.xds\:filter-facet-simple.xds\:selected {
119
119
  &:hover {
120
- color: --value(--color- * -50);
120
+ color: --value(--color-*-50);
121
121
  }
122
122
  }
123
123
 
124
124
  &.xds\:filter-facet-ghost {
125
125
  @variant selected {
126
- color: --value(--color- * -75);
126
+ color: --value(--color-*-75);
127
127
  }
128
128
  }
129
129
  }
package/dist/components/icon.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Base */
2
2
  @utility icon {
3
- @apply xds:flex xds:items-center xds:justify-center xds:flex-none;
4
- @apply xds:font-family-icon xds:w-auto xds:aspect-square;
3
+ @apply xds:flex xds:flex-none xds:items-center xds:justify-center;
4
+ @apply xds:aspect-square xds:w-auto xds:font-family-icon;
5
5
  vector-effect: non-scaling-stroke;
6
6
 
7
7
  /* `@apply xds:icon-md;` can not be use here because cause circular dependency. */
@@ -52,21 +52,21 @@
52
52
  /* Stroke width */
53
53
  @utility icon-stroke-width-* {
54
54
  & > * {
55
- stroke-width: --value(--stroke-width- *);
55
+ stroke-width: --value(--stroke-width-*);
56
56
  }
57
57
  }
58
58
 
59
59
  /* Colors */
60
60
  @utility icon-* {
61
- color: --value(--color- *);
61
+ color: --value(--color-*);
62
62
  }
63
63
 
64
64
  /* Background colors */
65
65
  @utility icon-bg-* {
66
66
  & > [stroke='#fff'] {
67
- stroke: --value(--color- *);
67
+ stroke: --value(--color-*);
68
68
  }
69
69
  & > [fill='#fff'] {
70
- fill: --value(--color- *);
70
+ fill: --value(--color-*);
71
71
  }
72
72
  }
package/dist/components/index.css CHANGED
@@ -1,17 +1,17 @@
1
1
  @import './attach.css';
2
2
  @import './badge.css';
3
- @import './button.css';
4
3
  @import './button-group.css';
4
+ @import './button.css';
5
5
  @import './filter-facet.css';
6
6
  @import './highlight.css';
7
7
  @import './icon.css';
8
- @import './input.css';
9
8
  @import './input-group.css';
9
+ @import './input.css';
10
10
  @import './picture.css';
11
11
  @import './progress-bar.css';
12
12
  @import './scroll.css';
13
13
  @import './sliding-panel.css';
14
- @import './suggestion.css';
15
14
  @import './suggestion-group.css';
15
+ @import './suggestion.css';
16
16
  @import './tag.css';
17
17
  @import './typography.css';
package/dist/components/input-group.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /* Base */
2
2
  @utility input-group {
3
3
  @apply xds:input;
4
- @apply xds:flex xds:flex-row xds:flex-nowrap xds:items-center xds:content-center;
5
- @apply xds:ps-0 xds:pe-0 xds:gap-8 xds:overflow-hidden;
4
+ @apply xds:flex xds:flex-row xds:flex-nowrap xds:content-center xds:items-center;
5
+ @apply xds:gap-8 xds:overflow-hidden xds:ps-0 xds:pe-0;
6
6
  @apply xds:border-neutral-25 xds:bg-neutral-10 xds:text-neutral-50;
7
7
 
8
8
  & > :first-child:not(.xds\:input-group-button-primary) {
@@ -14,7 +14,7 @@
14
14
 
15
15
  & > .xds\:input,
16
16
  & > input {
17
- @apply xds:flex-1 xds:min-w-0 xds:p-0 xds:border-0;
17
+ @apply xds:min-w-0 xds:flex-1 xds:border-0 xds:p-0;
18
18
  @apply xds:bg-transparent xds:text-inherit xds:outline-none;
19
19
  }
20
20
  }
@@ -98,8 +98,8 @@
98
98
  /* Input Group Button */
99
99
  @utility input-group-button {
100
100
  @apply xds:button;
101
- @apply xds:h-full xds:p-0 xds:aspect-square;
102
- @apply xds:font-regular xds:text-sm;
101
+ @apply xds:aspect-square xds:h-full xds:p-0;
102
+ @apply xds:text-sm xds:font-regular;
103
103
  @apply xds:border-transparent xds:bg-transparent xds:text-neutral-50;
104
104
 
105
105
  @variant hover-active-focus {
@@ -113,90 +113,90 @@
113
113
 
114
114
  /* Input Group Primary Button */
115
115
  @utility input-group-button-primary {
116
- @apply xds:border-0 xds:border-l-1 xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
116
+ @apply xds:border-0 xds:border-l-1 xds:border-neutral-90 xds:bg-neutral-90 xds:text-neutral-0;
117
117
 
118
118
  @variant hover-active-focus {
119
- @apply xds:bg-neutral-75 xds:border-neutral-75;
119
+ @apply xds:border-neutral-75 xds:bg-neutral-75;
120
120
  }
121
121
 
122
122
  &:first-child {
123
- @apply xds:border-s-0 xds:ms-0;
123
+ @apply xds:ms-0 xds:border-s-0;
124
124
  }
125
125
 
126
126
  &:last-child {
127
- @apply xds:border-e-0 xds:me-0;
127
+ @apply xds:me-0 xds:border-e-0;
128
128
  }
129
129
  }
130
130
 
131
131
  /* Input Group Rectangle Button */
132
132
  @utility input-group-button-rectangle {
133
- @apply xds:ps-16 xds:pe-16 xds:aspect-auto;
133
+ @apply xds:aspect-auto xds:ps-16 xds:pe-16;
134
134
  }
135
135
 
136
136
  /* Input Group Outlined Button */
137
137
  @utility input-group-button-outlined {
138
- @apply xds:bg-neutral-0 xds:border-neutral-90 xds:text-neutral-90;
138
+ @apply xds:border-neutral-90 xds:bg-neutral-0 xds:text-neutral-90;
139
139
 
140
140
  @variant hover-active-focus {
141
- @apply xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
141
+ @apply xds:border-neutral-90 xds:bg-neutral-90 xds:text-neutral-0;
142
142
  }
143
143
  }
144
144
 
145
145
  /* Input Group Ghost Button */
146
146
  @utility input-group-button-ghost {
147
- @apply xds:bg-transparent xds:border-transparent xds:text-neutral-90;
147
+ @apply xds:border-transparent xds:bg-transparent xds:text-neutral-90;
148
148
 
149
149
  @variant hover-active-focus {
150
- @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-90;
150
+ @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-90;
151
151
  }
152
152
  }
153
153
 
154
154
  /* Input Group Colors */
155
155
  @utility input-group-* {
156
- border-color: --value(--color- * -50);
156
+ border-color: --value(--color-*-50);
157
157
 
158
158
  @variant focus {
159
- border-color: --value(--color- * -75);
159
+ border-color: --value(--color-*-75);
160
160
  }
161
161
 
162
162
  &.xds\:input-group-line {
163
- background-image: linear-gradient(--value(--color- * -50), --value(--color- * -50));
163
+ background-image: linear-gradient(--value(--color-*-50), --value(--color-*-50));
164
164
 
165
165
  @variant focus {
166
- box-shadow: 0 2px 0 -0.5px --value(--color- * -25);
166
+ box-shadow: 0 2px 0 -0.5px --value(--color-*-25);
167
167
  }
168
168
  }
169
169
 
170
170
  & > .xds\:input-group-button-primary {
171
171
  @apply xds:text-neutral-0;
172
- background-color: --value(--color- * -50);
173
- border-color: --value(--color- * -50);
172
+ background-color: --value(--color-*-50);
173
+ border-color: --value(--color-*-50);
174
174
 
175
175
  @variant hover-active-focus {
176
- background-color: --value(--color- * -75);
177
- border-color: --value(--color- * -75);
176
+ background-color: --value(--color-*-75);
177
+ border-color: --value(--color-*-75);
178
178
  }
179
179
  }
180
180
 
181
181
  & > .xds\:input-group-button-outlined {
182
- @apply xds:bg-neutral-0 xds:border-y-0;
183
- border-color: --value(--color- * -50);
184
- color: --value(--color- * -50);
182
+ @apply xds:border-y-0 xds:bg-neutral-0;
183
+ border-color: --value(--color-*-50);
184
+ color: --value(--color-*-50);
185
185
 
186
186
  @variant hover-active-focus {
187
187
  @apply xds:text-neutral-0;
188
- background-color: --value(--color- * -50);
189
- border-color: --value(--color- * -50);
188
+ background-color: --value(--color-*-50);
189
+ border-color: --value(--color-*-50);
190
190
  }
191
191
  }
192
192
 
193
193
  & > .xds\:input-group-button-ghost {
194
- @apply xds:bg-transparent xds:border-transparent;
195
- color: --value(--color- * -50);
194
+ @apply xds:border-transparent xds:bg-transparent;
195
+ color: --value(--color-*-50);
196
196
 
197
197
  @variant hover-active-focus {
198
- @apply xds:bg-neutral-10 xds:border-neutral-10;
199
- color: --value(--color- * -75);
198
+ @apply xds:border-neutral-10 xds:bg-neutral-10;
199
+ color: --value(--color-*-75);
200
200
  }
201
201
  }
202
202
  }