@empathyco/x-design-system 0.0.2-alpha.9 → 0.1.0-alpha.1
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.
- package/dist/components/attach.css +3 -4
- package/dist/components/badge.css +10 -10
- package/dist/components/button.css +64 -64
- package/dist/components/filter-facet.css +129 -0
- package/dist/components/icon.css +72 -0
- package/dist/components/index.css +12 -1
- package/dist/components/input-group.css +201 -0
- package/dist/components/input.css +9 -9
- package/dist/components/layout.css +106 -0
- package/dist/components/picture.css +31 -0
- package/dist/components/progress-bar.css +1 -1
- package/dist/components/scroll.css +28 -0
- package/dist/components/sliding-panel.css +140 -0
- package/dist/components/suggestion-group.css +121 -0
- package/dist/components/suggestion.css +53 -0
- package/dist/components/tag.css +193 -0
- package/dist/components/typography.css +74 -0
- package/dist/demo/assets/index-N9YS4DBr.css +1 -0
- package/dist/demo/assets/index-rLMcZPFo.js +1 -0
- package/dist/demo/index.html +2 -2
- package/dist/theme.css +9 -5
- package/dist/variants.css +1 -1
- package/package.json +12 -10
- package/dist/demo/assets/index-DX46iPxC.js +0 -1
- package/dist/demo/assets/index-Vsvq01F4.css +0 -1
|
@@ -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:
|
|
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%);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* Base */
|
|
2
2
|
@utility badge {
|
|
3
|
-
@apply xds:font-family-main xds:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
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
|
|
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
|
|
50
|
+
background-color: --value(--color-*-75);
|
|
51
51
|
|
|
52
52
|
&.xds\:badge-light {
|
|
53
|
-
background-color: --value(--color
|
|
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
|
|
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
|
|
63
|
+
border-color: --value(--color-*-25);
|
|
64
64
|
}
|
|
65
65
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* Base */
|
|
2
2
|
@utility button {
|
|
3
|
-
@apply xds:flex xds:
|
|
4
|
-
@apply xds:border
|
|
5
|
-
@apply xds:
|
|
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:
|
|
13
|
+
@apply xds:border-neutral-100 xds:bg-neutral-100;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
@variant selected {
|
|
17
|
-
@apply xds:
|
|
17
|
+
@apply xds:border-neutral-100 xds:bg-neutral-100;
|
|
18
18
|
|
|
19
19
|
@variant hover-active {
|
|
20
|
-
@apply xds:
|
|
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:
|
|
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
|
|
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:
|
|
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:
|
|
66
|
+
@apply xds:border-neutral-90 xds:bg-neutral-90 xds:text-neutral-0;
|
|
67
67
|
|
|
68
68
|
@variant hover-active {
|
|
69
|
-
@apply xds:
|
|
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
|
|
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:
|
|
93
|
+
@apply xds:border-neutral-10 xds:bg-neutral-10;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
@variant selected {
|
|
97
|
-
@apply xds:
|
|
97
|
+
@apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-90;
|
|
98
98
|
|
|
99
99
|
@variant hover-active {
|
|
100
|
-
@apply xds:
|
|
100
|
+
@apply xds:border-neutral-25 xds:bg-neutral-25;
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
@variant disabled {
|
|
105
|
-
@apply xds:
|
|
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:
|
|
116
|
-
@apply xds:
|
|
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:
|
|
119
|
+
@apply xds:border-0 xds:bg-transparent xds:text-neutral-100;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
@variant selected {
|
|
123
|
-
@apply xds:
|
|
123
|
+
@apply xds:border-0 xds:bg-transparent xds:text-neutral-100;
|
|
124
124
|
|
|
125
125
|
@variant hover-active {
|
|
126
|
-
@apply xds:
|
|
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:
|
|
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
|
|
144
|
-
@apply xds:font-[inherit] xds:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
174
|
-
border-color: --value(--color
|
|
173
|
+
background-color: --value(--color-*-50);
|
|
174
|
+
border-color: --value(--color-*-50);
|
|
175
175
|
|
|
176
176
|
@variant hover-active {
|
|
177
|
-
background-color: --value(--color
|
|
178
|
-
border-color: --value(--color
|
|
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
|
|
183
|
-
border-color: --value(--color
|
|
182
|
+
background-color: --value(--color-*-75);
|
|
183
|
+
border-color: --value(--color-*-75);
|
|
184
184
|
|
|
185
185
|
@variant hover-active {
|
|
186
|
-
background-color: --value(--color
|
|
187
|
-
border-color: --value(--color
|
|
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
|
|
194
|
-
color: --value(--color
|
|
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
|
|
199
|
-
border-color: --value(--color
|
|
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
|
|
205
|
-
border-color: --value(--color
|
|
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
|
|
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
|
|
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:
|
|
224
|
-
color: --value(--color
|
|
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:
|
|
229
|
-
color: --value(--color
|
|
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:
|
|
233
|
-
color: --value(--color
|
|
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
|
|
240
|
+
color: --value(--color-*-50);
|
|
241
241
|
|
|
242
242
|
@variant hover-active {
|
|
243
|
-
@apply xds:
|
|
244
|
-
color: --value(--color
|
|
243
|
+
@apply xds:border-0 xds:bg-transparent;
|
|
244
|
+
color: --value(--color-*-75);
|
|
245
245
|
}
|
|
246
246
|
|
|
247
247
|
@variant selected {
|
|
248
|
-
@apply xds:
|
|
249
|
-
color: --value(--color
|
|
248
|
+
@apply xds:border-0 xds:bg-transparent;
|
|
249
|
+
color: --value(--color-*-75);
|
|
250
250
|
|
|
251
251
|
@variant hover-active {
|
|
252
|
-
@apply xds:
|
|
253
|
-
color: --value(--color
|
|
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
|
|
260
|
+
color: --value(--color-*-50);
|
|
261
261
|
|
|
262
262
|
@variant hover-active {
|
|
263
|
-
@apply xds:
|
|
264
|
-
color: --value(--color
|
|
263
|
+
@apply xds:border-0 xds:bg-transparent;
|
|
264
|
+
color: --value(--color-*-75);
|
|
265
265
|
}
|
|
266
266
|
|
|
267
267
|
@variant selected {
|
|
268
|
-
@apply xds:
|
|
269
|
-
color: --value(--color
|
|
268
|
+
@apply xds:border-0 xds:bg-transparent;
|
|
269
|
+
color: --value(--color-*-75);
|
|
270
270
|
|
|
271
271
|
@variant hover-active {
|
|
272
|
-
@apply xds:
|
|
273
|
-
color: --value(--color
|
|
272
|
+
@apply xds:border-0 xds:bg-transparent;
|
|
273
|
+
color: --value(--color-*-50);
|
|
274
274
|
}
|
|
275
275
|
}
|
|
276
276
|
}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
/* Base */
|
|
2
|
+
@utility filter-facet {
|
|
3
|
+
@apply xds:box-border xds:grid xds:grid-flow-col;
|
|
4
|
+
@apply xds:content-center xds:items-baseline-last xds:justify-start;
|
|
5
|
+
@apply xds:cursor-pointer;
|
|
6
|
+
@apply xds:text-start xds:font-family-main xds:font-regular xds:text-neutral-90;
|
|
7
|
+
@apply xds:border-b-1 xds:border-transparent;
|
|
8
|
+
|
|
9
|
+
/* `@apply xds:filter-facet-md;` can not be use here because cause circular dependency. */
|
|
10
|
+
@apply xds:min-h-32 xds:gap-4 xds:text-sm;
|
|
11
|
+
|
|
12
|
+
& > .xds\:icon {
|
|
13
|
+
@apply xds:icon-offset;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&:hover {
|
|
17
|
+
@apply xds:text-neutral-50;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@variant selected {
|
|
21
|
+
@apply xds:font-bold xds:tracking-xs xds:text-neutral-90;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@variant disabled {
|
|
25
|
+
@apply xds:text-neutral-25;
|
|
26
|
+
@apply xds:cursor-not-allowed;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Sizes */
|
|
31
|
+
@utility filter-facet-sm {
|
|
32
|
+
@apply xds:min-h-24 xds:gap-2 xds:text-sm;
|
|
33
|
+
}
|
|
34
|
+
@utility filter-facet-md {
|
|
35
|
+
@apply xds:min-h-32 xds:gap-4 xds:text-sm;
|
|
36
|
+
}
|
|
37
|
+
@utility filter-facet-lg {
|
|
38
|
+
@apply xds:min-h-48 xds:gap-12 xds:text-md;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Underline */
|
|
42
|
+
@utility filter-facet-underline {
|
|
43
|
+
&:hover {
|
|
44
|
+
@apply xds:border-current;
|
|
45
|
+
|
|
46
|
+
@variant disabled {
|
|
47
|
+
@apply xds:border-transparent;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@variant selected {
|
|
52
|
+
@apply xds:font-regular xds:tracking-md;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Ghost */
|
|
57
|
+
@utility filter-facet-ghost {
|
|
58
|
+
@apply xds:px-8;
|
|
59
|
+
|
|
60
|
+
&.xds\:filter-facet-sm {
|
|
61
|
+
@apply xds:px-4;
|
|
62
|
+
}
|
|
63
|
+
&.xds\:filter-facet-md {
|
|
64
|
+
@apply xds:px-8;
|
|
65
|
+
}
|
|
66
|
+
&.xds\:filter-facet-lg {
|
|
67
|
+
@apply xds:px-12;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&:hover {
|
|
71
|
+
@apply xds:bg-neutral-10 xds:text-neutral-90;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@variant selected {
|
|
75
|
+
@apply xds:font-regular xds:tracking-md xds:text-neutral-75;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@variant disabled {
|
|
79
|
+
@apply xds:border-transparent xds:bg-transparent xds:text-neutral-25;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Simple */
|
|
84
|
+
@utility filter-facet-simple {
|
|
85
|
+
@apply xds:px-8;
|
|
86
|
+
|
|
87
|
+
&:hover {
|
|
88
|
+
@apply xds:text-neutral-90 xds:opacity-60;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@variant selected {
|
|
92
|
+
@apply xds:font-regular xds:tracking-md;
|
|
93
|
+
|
|
94
|
+
&:hover {
|
|
95
|
+
@apply xds:text-neutral-50;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@variant disabled {
|
|
99
|
+
@apply xds:text-neutral-25;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@variant disabled {
|
|
104
|
+
@apply xds:text-neutral-25 xds:opacity-100;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Colors */
|
|
109
|
+
@utility filter-facet-* {
|
|
110
|
+
&:hover:not(.xds\:filter-facet-ghost) {
|
|
111
|
+
color: --value(--color-*-50);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
@variant selected {
|
|
115
|
+
color: --value(--color-*-50);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&.xds\:filter-facet-simple.xds\:selected {
|
|
119
|
+
&:hover {
|
|
120
|
+
color: --value(--color-*-50);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&.xds\:filter-facet-ghost {
|
|
125
|
+
@variant selected {
|
|
126
|
+
color: --value(--color-*-75);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/* Base */
|
|
2
|
+
@utility icon {
|
|
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
|
+
vector-effect: non-scaling-stroke;
|
|
6
|
+
|
|
7
|
+
/* `@apply xds:icon-md;` can not be use here because cause circular dependency. */
|
|
8
|
+
@apply xds:h-16 xds:text-[14px];
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* Offset */
|
|
12
|
+
/* This utility can be used like:
|
|
13
|
+
* @utility suggestion {
|
|
14
|
+
* & .xds\:icon {
|
|
15
|
+
* @apply xds:icon-offset;
|
|
16
|
+
* }
|
|
17
|
+
* }
|
|
18
|
+
*/
|
|
19
|
+
@utility icon-offset {
|
|
20
|
+
--iconVerticalOffset: calc(50% - 0.5ex - 1px);
|
|
21
|
+
font-size: initial;
|
|
22
|
+
transform: translateY(var(--iconVerticalOffset, 0));
|
|
23
|
+
margin-top: calc(var(--iconVerticalOffset) * -1);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Sizes */
|
|
27
|
+
@utility icon-sm {
|
|
28
|
+
@apply xds:h-8;
|
|
29
|
+
@apply xds:text-[7px];
|
|
30
|
+
}
|
|
31
|
+
@utility icon-md {
|
|
32
|
+
@apply xds:h-16;
|
|
33
|
+
@apply xds:text-[14px];
|
|
34
|
+
}
|
|
35
|
+
@utility icon-lg {
|
|
36
|
+
@apply xds:h-24;
|
|
37
|
+
@apply xds:text-[20px];
|
|
38
|
+
}
|
|
39
|
+
@utility icon-xl {
|
|
40
|
+
@apply xds:h-32;
|
|
41
|
+
@apply xds:text-[28px];
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Sharp */
|
|
45
|
+
@utility icon-sharp {
|
|
46
|
+
& > * {
|
|
47
|
+
stroke-linecap: square;
|
|
48
|
+
stroke-linejoin: miter;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Stroke width */
|
|
53
|
+
@utility icon-stroke-width-* {
|
|
54
|
+
& > * {
|
|
55
|
+
stroke-width: --value(--stroke-width-*);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Colors */
|
|
60
|
+
@utility icon-* {
|
|
61
|
+
color: --value(--color-*);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Background colors */
|
|
65
|
+
@utility icon-bg-* {
|
|
66
|
+
& > [stroke='#fff'] {
|
|
67
|
+
stroke: --value(--color-*);
|
|
68
|
+
}
|
|
69
|
+
& > [fill='#fff'] {
|
|
70
|
+
fill: --value(--color-*);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
@@ -1,7 +1,18 @@
|
|
|
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
|
+
@import './filter-facet.css';
|
|
5
6
|
@import './highlight.css';
|
|
7
|
+
@import './icon.css';
|
|
8
|
+
@import './input-group.css';
|
|
9
|
+
@import './layout.css';
|
|
6
10
|
@import './input.css';
|
|
11
|
+
@import './picture.css';
|
|
7
12
|
@import './progress-bar.css';
|
|
13
|
+
@import './scroll.css';
|
|
14
|
+
@import './sliding-panel.css';
|
|
15
|
+
@import './suggestion-group.css';
|
|
16
|
+
@import './suggestion.css';
|
|
17
|
+
@import './tag.css';
|
|
18
|
+
@import './typography.css';
|