@sk-web-gui/core 0.1.4 → 0.1.7
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/LICENSE +21 -21
- package/README.md +4 -4
- package/package.json +2 -2
- package/src/colors.js +77 -77
- package/src/components/accordion.js +42 -42
- package/src/components/alert.js +98 -98
- package/src/components/avatar.js +85 -85
- package/src/components/badge.js +61 -61
- package/src/components/breadcrumb.js +13 -13
- package/src/components/button-group.js +46 -46
- package/src/components/button.js +295 -295
- package/src/components/card.js +55 -55
- package/src/components/checkbox.js +128 -128
- package/src/components/code.js +9 -9
- package/src/components/cookie-consent.js +26 -26
- package/src/components/divider.js +12 -12
- package/src/components/dot.js +84 -84
- package/src/components/forms.js +246 -246
- package/src/components/icon-button.js +5 -5
- package/src/components/icon.js +9 -9
- package/src/components/kbd.js +9 -9
- package/src/components/link.js +13 -13
- package/src/components/message.js +29 -29
- package/src/components/modal.js +29 -29
- package/src/components/notification.js +56 -56
- package/src/components/radio.js +103 -103
- package/src/components/switch.js +112 -112
- package/src/components/table.js +13 -13
- package/src/components/tag.js +109 -109
- package/src/components/user-menu.js +17 -1
- package/src/index.js +241 -239
- package/src/with-opacity.js +6 -6
package/src/components/button.js
CHANGED
|
@@ -1,295 +1,295 @@
|
|
|
1
|
-
function buttonSolid(colors) {
|
|
2
|
-
return {
|
|
3
|
-
"&-solid": {
|
|
4
|
-
//"@apply text-": {},
|
|
5
|
-
"@apply border border-gray-stroke": {},
|
|
6
|
-
"@apply text-black bg-white": {},
|
|
7
|
-
/* hover */
|
|
8
|
-
"@apply hover:text-white hover:bg-hover": {},
|
|
9
|
-
/* focus */
|
|
10
|
-
"@apply focus-visible:z-base": {},
|
|
11
|
-
"@apply focus-visible:border-primary": {},
|
|
12
|
-
"@apply focus-visible:ring-4 focus-visible:ring-black": {},
|
|
13
|
-
/* active */
|
|
14
|
-
"@apply active:bg-hover active:text-white": {},
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
/* dark mode */
|
|
18
|
-
"@apply dark:border-neutral-600": {},
|
|
19
|
-
"@apply dark:text-neutral-100 dark:bg-neutral-700": {},
|
|
20
|
-
/* dark hover */
|
|
21
|
-
"@apply dark:hover:border-hover dark:hover:bg-neutral-600": {},
|
|
22
|
-
/* dark focus */
|
|
23
|
-
"@apply dark:focus-visible:border-primary-500": {},
|
|
24
|
-
/* dark active */
|
|
25
|
-
"@apply dark:active:bg-neutral-900 dark:active:border-neutral-600": {},
|
|
26
|
-
|
|
27
|
-
/* "&[data-color=\"primary\"]": {
|
|
28
|
-
"@apply text-white bg-primary": {},
|
|
29
|
-
"@apply hover:text-white hover:bg-hover": {},
|
|
30
|
-
"@apply active:text-white active:bg-hover": {},
|
|
31
|
-
"@apply focus-visible:ring-4 focus-visible:ring-black": {},
|
|
32
|
-
}, */
|
|
33
|
-
|
|
34
|
-
...colors.reduce(
|
|
35
|
-
(styles, color) => ({
|
|
36
|
-
...styles,
|
|
37
|
-
[`&[data-color="${color}"]`]: {
|
|
38
|
-
//[`@apply border-${color}`]: {},
|
|
39
|
-
[`@apply text-white bg-${color}`]: {},
|
|
40
|
-
// hover
|
|
41
|
-
[`@apply hover:text-white hover:bg-${color}-active`]: {},
|
|
42
|
-
|
|
43
|
-
[`@apply active:text-white active:bg-${color}-active`]: {},
|
|
44
|
-
[`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
// focus
|
|
48
|
-
//[`@apply focus-visible:bg-${color}-700`]: {},
|
|
49
|
-
//[`@apply focus-visible:border-${color}-500`]: {},
|
|
50
|
-
//[`@apply focus-visible:ring-${color}-500`]: {},
|
|
51
|
-
// active
|
|
52
|
-
//[`@apply active:bg-${color}-600`]: {},
|
|
53
|
-
// dark mode
|
|
54
|
-
//[`@apply dark:border-${color}-500`]: {},
|
|
55
|
-
//[`@apply dark:bg-${color}-600`]: {},
|
|
56
|
-
// dark hover
|
|
57
|
-
//[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},
|
|
58
|
-
// dark focus
|
|
59
|
-
//[`@apply dark:focus-visible:border-${color}-500`]: {},
|
|
60
|
-
//[`@apply dark:focus-visible:ring-${color}-500`]: {},
|
|
61
|
-
// dark active
|
|
62
|
-
//[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},
|
|
63
|
-
},
|
|
64
|
-
}),
|
|
65
|
-
{}
|
|
66
|
-
),
|
|
67
|
-
|
|
68
|
-
},
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function buttonOutline(colors) {
|
|
73
|
-
return {
|
|
74
|
-
"&-outline": {
|
|
75
|
-
"@apply border border-neutral-200": {},
|
|
76
|
-
"@apply text-neutral-900 bg-transparent": {},
|
|
77
|
-
/* hover */
|
|
78
|
-
"@apply hover:bg-neutral-100 hover:border-neutral-300": {},
|
|
79
|
-
/* focus */
|
|
80
|
-
"@apply focus-visible:z-base": {},
|
|
81
|
-
"@apply focus-visible:border-primary-500": {},
|
|
82
|
-
"@apply focus-visible:ring-4 focus-visible:ring-primary-500": {},
|
|
83
|
-
/* active */
|
|
84
|
-
"@apply active:bg-neutral-200": {},
|
|
85
|
-
/* dark mode */
|
|
86
|
-
"@apply dark:border-neutral-600": {},
|
|
87
|
-
"@apply dark:text-neutral-100 dark:bg-transparent": {},
|
|
88
|
-
/* dark hover */
|
|
89
|
-
"@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700": {},
|
|
90
|
-
/* dark focus */
|
|
91
|
-
"@apply dark:focus-visible:border-primary-500": {},
|
|
92
|
-
/* dark active */
|
|
93
|
-
"@apply dark:active:bg-neutral-600 dark:active:border-neutral-600": {},
|
|
94
|
-
|
|
95
|
-
...colors.reduce(
|
|
96
|
-
(styles, color) => ({
|
|
97
|
-
...styles,
|
|
98
|
-
[`&[data-color="${color}"]`]: {
|
|
99
|
-
[`@apply border-current`]: {},
|
|
100
|
-
[`@apply text-${color}-600 bg-transparent`]: {},
|
|
101
|
-
/* hover */
|
|
102
|
-
[`@apply hover:bg-${color}-50`]: {},
|
|
103
|
-
/* focus */
|
|
104
|
-
[`@apply focus-visible:border-${color}-500`]: {},
|
|
105
|
-
[`@apply focus-visible:ring-${color}-500`]: {},
|
|
106
|
-
/* active */
|
|
107
|
-
[`@apply active:bg-${color}-100`]: {},
|
|
108
|
-
/* dark mode */
|
|
109
|
-
[`@apply dark:border-${color}-200`]: {},
|
|
110
|
-
[`@apply dark:text-${color}-200 dark:bg-transparent`]: {},
|
|
111
|
-
[`@apply dark:border-${color}-300`]: {},
|
|
112
|
-
/* dark hover */
|
|
113
|
-
[`@apply dark:hover:bg-${color}-200`]: {},
|
|
114
|
-
[`@apply dark:hover:bg-opacity-15`]: {},
|
|
115
|
-
/* dark focus */
|
|
116
|
-
[`@apply dark:focus-visible:border-${color}-500`]: {},
|
|
117
|
-
[`@apply dark:focus-visible:ring-${color}-500`]: {},
|
|
118
|
-
/* dark active */
|
|
119
|
-
[`@apply dark:active:bg-${color}-200`]: {},
|
|
120
|
-
[`@apply dark:active:bg-opacity-25`]: {},
|
|
121
|
-
},
|
|
122
|
-
}),
|
|
123
|
-
{}
|
|
124
|
-
),
|
|
125
|
-
},
|
|
126
|
-
};
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
function buttonGhost(colors) {
|
|
130
|
-
return {
|
|
131
|
-
"&-ghost": {
|
|
132
|
-
"@apply text-neutral-900 bg-transparent": {},
|
|
133
|
-
"@apply hover:bg-neutral-100": {},
|
|
134
|
-
/* focus */
|
|
135
|
-
"@apply focus-visible:z-base": {},
|
|
136
|
-
"@apply focus-visible:ring-4 focus-visible:ring-primary-500": {},
|
|
137
|
-
/* active */
|
|
138
|
-
"@apply active:bg-neutral-200": {},
|
|
139
|
-
/* dark mode */
|
|
140
|
-
"@apply dark:text-neutral-100 dark:bg-transparent": {},
|
|
141
|
-
/* dark hover */
|
|
142
|
-
"@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700": {},
|
|
143
|
-
/* dark active */
|
|
144
|
-
"@apply dark:active:bg-neutral-600 dark:active:border-neutral-400": {},
|
|
145
|
-
|
|
146
|
-
...colors.reduce(
|
|
147
|
-
(styles, color) => ({
|
|
148
|
-
...styles,
|
|
149
|
-
[`&[data-color="${color}"]`]: {
|
|
150
|
-
[`@apply text-${color}-600`]: {},
|
|
151
|
-
[`@apply hover:bg-${color}-50`]: {},
|
|
152
|
-
/* focus */
|
|
153
|
-
[`@apply focus-visible:ring-${color}-500`]: {},
|
|
154
|
-
[`@apply active:bg-${color}-100`]: {},
|
|
155
|
-
// dark colors
|
|
156
|
-
[`@apply dark:text-${color}-200 dark:bg-transparent`]: {},
|
|
157
|
-
[`@apply dark:border-${color}-300 dark:hover:bg-${color}-200`]: {},
|
|
158
|
-
[`@apply dark:hover:bg-opacity-15`]: {},
|
|
159
|
-
[`@apply dark:active:bg-${color}-200`]: {},
|
|
160
|
-
[`@apply dark:active:bg-opacity-25`]: {},
|
|
161
|
-
},
|
|
162
|
-
}),
|
|
163
|
-
{}
|
|
164
|
-
),
|
|
165
|
-
},
|
|
166
|
-
};
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
function buttonLight(colors) {
|
|
170
|
-
return {
|
|
171
|
-
"&-light": {
|
|
172
|
-
"@apply shadow-sm": {},
|
|
173
|
-
"@apply border border-transparent": {},
|
|
174
|
-
"@apply text-neutral-900 bg-neutral-100": {},
|
|
175
|
-
/* hover */
|
|
176
|
-
"@apply hover:bg-neutral-200": {},
|
|
177
|
-
/* focus */
|
|
178
|
-
"@apply focus-visible:z-base": {},
|
|
179
|
-
"@apply focus-visible:border-primary-500": {},
|
|
180
|
-
"@apply focus-visible:ring-4 focus-visible:ring-primary-500": {},
|
|
181
|
-
/* active */
|
|
182
|
-
"@apply active:bg-neutral-300": {},
|
|
183
|
-
/* dark mode */
|
|
184
|
-
"@apply dark:border-transparent": {},
|
|
185
|
-
"@apply dark:text-neutral-100 dark:bg-neutral-700": {},
|
|
186
|
-
/* dark hover */
|
|
187
|
-
"@apply dark:hover:bg-neutral-600": {},
|
|
188
|
-
/* dark focus */
|
|
189
|
-
"@apply dark:focus-visible:border-primary-500": {},
|
|
190
|
-
/* dark active */
|
|
191
|
-
"@apply dark:active:bg-neutral-600": {},
|
|
192
|
-
|
|
193
|
-
...colors.reduce(
|
|
194
|
-
(styles, color) => ({
|
|
195
|
-
...styles,
|
|
196
|
-
[`&[data-color="${color}"]`]: {
|
|
197
|
-
[`@apply text-${color}-600 bg-${color}-50`]: {},
|
|
198
|
-
/* hover */
|
|
199
|
-
[`@apply hover:bg-${color}-100`]: {},
|
|
200
|
-
/* focus */
|
|
201
|
-
[`@apply focus-visible:border-${color}-500`]: {},
|
|
202
|
-
[`@apply focus-visible:ring-${color}-500`]: {},
|
|
203
|
-
/* active */
|
|
204
|
-
[`@apply active:bg-${color}-200`]: {},
|
|
205
|
-
/* dark mode */
|
|
206
|
-
[`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},
|
|
207
|
-
[`@apply dark:bg-opacity-15`]: {},
|
|
208
|
-
/* dark hover */
|
|
209
|
-
[`@apply dark:hover:bg-${color}-500`]: {},
|
|
210
|
-
[`@apply dark:hover:bg-opacity-25`]: {},
|
|
211
|
-
/* dark focus */
|
|
212
|
-
[`@apply dark:focus-visible:border-${color}-500`]: {},
|
|
213
|
-
[`@apply dark:focus-visible:ring-${color}-500`]: {},
|
|
214
|
-
/* dark active */
|
|
215
|
-
[`@apply dark:active:bg-${color}-500`]: {},
|
|
216
|
-
[`@apply dark:active:bg-opacity-30`]: {},
|
|
217
|
-
},
|
|
218
|
-
}),
|
|
219
|
-
{}
|
|
220
|
-
),
|
|
221
|
-
},
|
|
222
|
-
};
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
function buttonLink(colors) {
|
|
226
|
-
return {
|
|
227
|
-
"&-link": {
|
|
228
|
-
"@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700": {},
|
|
229
|
-
"@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500": {},
|
|
230
|
-
// dark colors
|
|
231
|
-
"@apply dark:text-neutral-200": {},
|
|
232
|
-
"@apply dark:active:text-neutral-500": {},
|
|
233
|
-
|
|
234
|
-
...colors.reduce(
|
|
235
|
-
(styles, color) => ({
|
|
236
|
-
...styles,
|
|
237
|
-
[`&[data-color="${color}"]`]: {
|
|
238
|
-
[`@apply text-${color}-600 active:text-${color}-700`]: {},
|
|
239
|
-
[`@apply focus-visible:ring-${color}-500`]: {},
|
|
240
|
-
// dark colors
|
|
241
|
-
[`@apply dark:text-${color}-200`]: {},
|
|
242
|
-
[`@apply dark:active:text-${color}-500`]: {},
|
|
243
|
-
},
|
|
244
|
-
}),
|
|
245
|
-
{}
|
|
246
|
-
),
|
|
247
|
-
},
|
|
248
|
-
};
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
module.exports = Button = (colors) => ({
|
|
252
|
-
".btn": {
|
|
253
|
-
"@apply relative": {},
|
|
254
|
-
"@apply m-0": {},
|
|
255
|
-
"@apply inline-flex items-center justify-center flex-shrink-0 align-middle": {},
|
|
256
|
-
"@apply font-medium leading-tight": {},
|
|
257
|
-
transitionProperty: "background-color, border-color, color, fill, stroke, box-shadow",
|
|
258
|
-
"@apply duration-75 ease-out": {},
|
|
259
|
-
"@apply outline-none appearance-none cursor-base select-none whitespace-nowrap": {},
|
|
260
|
-
"@apply focus-visible:outline-none": {},
|
|
261
|
-
|
|
262
|
-
padding: "1.2rem 3.2rem",
|
|
263
|
-
borderRadius: "3.2rem",
|
|
264
|
-
|
|
265
|
-
// sizing
|
|
266
|
-
"&-sm": {
|
|
267
|
-
"@apply text-xs": {},
|
|
268
|
-
// minWidth: "1.75rem",
|
|
269
|
-
},
|
|
270
|
-
|
|
271
|
-
"&-md": {
|
|
272
|
-
"@apply text-sm": {},
|
|
273
|
-
// minWidth: "2rem",
|
|
274
|
-
},
|
|
275
|
-
|
|
276
|
-
"&-lg": {
|
|
277
|
-
"@apply text-base": {},
|
|
278
|
-
// minWidth: "2.5rem",
|
|
279
|
-
},
|
|
280
|
-
|
|
281
|
-
// State
|
|
282
|
-
|
|
283
|
-
"&-disabled": {
|
|
284
|
-
"@apply disabled:shadow-none disabled:cursor-not-allowed": {},
|
|
285
|
-
"@apply disabled:text-black disabled:bg-gray-light !important": {},
|
|
286
|
-
},
|
|
287
|
-
|
|
288
|
-
// variants
|
|
289
|
-
...buttonSolid(colors),
|
|
290
|
-
...buttonOutline(colors),
|
|
291
|
-
//...buttonGhost(colors),
|
|
292
|
-
//...buttonLight(colors),
|
|
293
|
-
...buttonLink(colors),
|
|
294
|
-
},
|
|
295
|
-
});
|
|
1
|
+
function buttonSolid(colors) {
|
|
2
|
+
return {
|
|
3
|
+
"&-solid": {
|
|
4
|
+
//"@apply text-": {},
|
|
5
|
+
"@apply border border-gray-stroke": {},
|
|
6
|
+
"@apply text-black bg-white": {},
|
|
7
|
+
/* hover */
|
|
8
|
+
"@apply hover:text-white hover:bg-hover": {},
|
|
9
|
+
/* focus */
|
|
10
|
+
"@apply focus-visible:z-base": {},
|
|
11
|
+
"@apply focus-visible:border-primary": {},
|
|
12
|
+
"@apply focus-visible:ring-4 focus-visible:ring-black": {},
|
|
13
|
+
/* active */
|
|
14
|
+
"@apply active:bg-hover active:text-white": {},
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
/* dark mode */
|
|
18
|
+
"@apply dark:border-neutral-600": {},
|
|
19
|
+
"@apply dark:text-neutral-100 dark:bg-neutral-700": {},
|
|
20
|
+
/* dark hover */
|
|
21
|
+
"@apply dark:hover:border-hover dark:hover:bg-neutral-600": {},
|
|
22
|
+
/* dark focus */
|
|
23
|
+
"@apply dark:focus-visible:border-primary-500": {},
|
|
24
|
+
/* dark active */
|
|
25
|
+
"@apply dark:active:bg-neutral-900 dark:active:border-neutral-600": {},
|
|
26
|
+
|
|
27
|
+
/* "&[data-color=\"primary\"]": {
|
|
28
|
+
"@apply text-white bg-primary": {},
|
|
29
|
+
"@apply hover:text-white hover:bg-hover": {},
|
|
30
|
+
"@apply active:text-white active:bg-hover": {},
|
|
31
|
+
"@apply focus-visible:ring-4 focus-visible:ring-black": {},
|
|
32
|
+
}, */
|
|
33
|
+
|
|
34
|
+
...colors.reduce(
|
|
35
|
+
(styles, color) => ({
|
|
36
|
+
...styles,
|
|
37
|
+
[`&[data-color="${color}"]`]: {
|
|
38
|
+
//[`@apply border-${color}`]: {},
|
|
39
|
+
[`@apply text-white bg-${color}`]: {},
|
|
40
|
+
// hover
|
|
41
|
+
[`@apply hover:text-white hover:bg-${color}-active`]: {},
|
|
42
|
+
|
|
43
|
+
[`@apply active:text-white active:bg-${color}-active`]: {},
|
|
44
|
+
[`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
// focus
|
|
48
|
+
//[`@apply focus-visible:bg-${color}-700`]: {},
|
|
49
|
+
//[`@apply focus-visible:border-${color}-500`]: {},
|
|
50
|
+
//[`@apply focus-visible:ring-${color}-500`]: {},
|
|
51
|
+
// active
|
|
52
|
+
//[`@apply active:bg-${color}-600`]: {},
|
|
53
|
+
// dark mode
|
|
54
|
+
//[`@apply dark:border-${color}-500`]: {},
|
|
55
|
+
//[`@apply dark:bg-${color}-600`]: {},
|
|
56
|
+
// dark hover
|
|
57
|
+
//[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},
|
|
58
|
+
// dark focus
|
|
59
|
+
//[`@apply dark:focus-visible:border-${color}-500`]: {},
|
|
60
|
+
//[`@apply dark:focus-visible:ring-${color}-500`]: {},
|
|
61
|
+
// dark active
|
|
62
|
+
//[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},
|
|
63
|
+
},
|
|
64
|
+
}),
|
|
65
|
+
{}
|
|
66
|
+
),
|
|
67
|
+
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function buttonOutline(colors) {
|
|
73
|
+
return {
|
|
74
|
+
"&-outline": {
|
|
75
|
+
"@apply border border-neutral-200": {},
|
|
76
|
+
"@apply text-neutral-900 bg-transparent": {},
|
|
77
|
+
/* hover */
|
|
78
|
+
"@apply hover:bg-neutral-100 hover:border-neutral-300": {},
|
|
79
|
+
/* focus */
|
|
80
|
+
"@apply focus-visible:z-base": {},
|
|
81
|
+
"@apply focus-visible:border-primary-500": {},
|
|
82
|
+
"@apply focus-visible:ring-4 focus-visible:ring-primary-500": {},
|
|
83
|
+
/* active */
|
|
84
|
+
"@apply active:bg-neutral-200": {},
|
|
85
|
+
/* dark mode */
|
|
86
|
+
"@apply dark:border-neutral-600": {},
|
|
87
|
+
"@apply dark:text-neutral-100 dark:bg-transparent": {},
|
|
88
|
+
/* dark hover */
|
|
89
|
+
"@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700": {},
|
|
90
|
+
/* dark focus */
|
|
91
|
+
"@apply dark:focus-visible:border-primary-500": {},
|
|
92
|
+
/* dark active */
|
|
93
|
+
"@apply dark:active:bg-neutral-600 dark:active:border-neutral-600": {},
|
|
94
|
+
|
|
95
|
+
...colors.reduce(
|
|
96
|
+
(styles, color) => ({
|
|
97
|
+
...styles,
|
|
98
|
+
[`&[data-color="${color}"]`]: {
|
|
99
|
+
[`@apply border-current`]: {},
|
|
100
|
+
[`@apply text-${color}-600 bg-transparent`]: {},
|
|
101
|
+
/* hover */
|
|
102
|
+
[`@apply hover:bg-${color}-50`]: {},
|
|
103
|
+
/* focus */
|
|
104
|
+
[`@apply focus-visible:border-${color}-500`]: {},
|
|
105
|
+
[`@apply focus-visible:ring-${color}-500`]: {},
|
|
106
|
+
/* active */
|
|
107
|
+
[`@apply active:bg-${color}-100`]: {},
|
|
108
|
+
/* dark mode */
|
|
109
|
+
[`@apply dark:border-${color}-200`]: {},
|
|
110
|
+
[`@apply dark:text-${color}-200 dark:bg-transparent`]: {},
|
|
111
|
+
[`@apply dark:border-${color}-300`]: {},
|
|
112
|
+
/* dark hover */
|
|
113
|
+
[`@apply dark:hover:bg-${color}-200`]: {},
|
|
114
|
+
[`@apply dark:hover:bg-opacity-15`]: {},
|
|
115
|
+
/* dark focus */
|
|
116
|
+
[`@apply dark:focus-visible:border-${color}-500`]: {},
|
|
117
|
+
[`@apply dark:focus-visible:ring-${color}-500`]: {},
|
|
118
|
+
/* dark active */
|
|
119
|
+
[`@apply dark:active:bg-${color}-200`]: {},
|
|
120
|
+
[`@apply dark:active:bg-opacity-25`]: {},
|
|
121
|
+
},
|
|
122
|
+
}),
|
|
123
|
+
{}
|
|
124
|
+
),
|
|
125
|
+
},
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
function buttonGhost(colors) {
|
|
130
|
+
return {
|
|
131
|
+
"&-ghost": {
|
|
132
|
+
"@apply text-neutral-900 bg-transparent": {},
|
|
133
|
+
"@apply hover:bg-neutral-100": {},
|
|
134
|
+
/* focus */
|
|
135
|
+
"@apply focus-visible:z-base": {},
|
|
136
|
+
"@apply focus-visible:ring-4 focus-visible:ring-primary-500": {},
|
|
137
|
+
/* active */
|
|
138
|
+
"@apply active:bg-neutral-200": {},
|
|
139
|
+
/* dark mode */
|
|
140
|
+
"@apply dark:text-neutral-100 dark:bg-transparent": {},
|
|
141
|
+
/* dark hover */
|
|
142
|
+
"@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700": {},
|
|
143
|
+
/* dark active */
|
|
144
|
+
"@apply dark:active:bg-neutral-600 dark:active:border-neutral-400": {},
|
|
145
|
+
|
|
146
|
+
...colors.reduce(
|
|
147
|
+
(styles, color) => ({
|
|
148
|
+
...styles,
|
|
149
|
+
[`&[data-color="${color}"]`]: {
|
|
150
|
+
[`@apply text-${color}-600`]: {},
|
|
151
|
+
[`@apply hover:bg-${color}-50`]: {},
|
|
152
|
+
/* focus */
|
|
153
|
+
[`@apply focus-visible:ring-${color}-500`]: {},
|
|
154
|
+
[`@apply active:bg-${color}-100`]: {},
|
|
155
|
+
// dark colors
|
|
156
|
+
[`@apply dark:text-${color}-200 dark:bg-transparent`]: {},
|
|
157
|
+
[`@apply dark:border-${color}-300 dark:hover:bg-${color}-200`]: {},
|
|
158
|
+
[`@apply dark:hover:bg-opacity-15`]: {},
|
|
159
|
+
[`@apply dark:active:bg-${color}-200`]: {},
|
|
160
|
+
[`@apply dark:active:bg-opacity-25`]: {},
|
|
161
|
+
},
|
|
162
|
+
}),
|
|
163
|
+
{}
|
|
164
|
+
),
|
|
165
|
+
},
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
function buttonLight(colors) {
|
|
170
|
+
return {
|
|
171
|
+
"&-light": {
|
|
172
|
+
"@apply shadow-sm": {},
|
|
173
|
+
"@apply border border-transparent": {},
|
|
174
|
+
"@apply text-neutral-900 bg-neutral-100": {},
|
|
175
|
+
/* hover */
|
|
176
|
+
"@apply hover:bg-neutral-200": {},
|
|
177
|
+
/* focus */
|
|
178
|
+
"@apply focus-visible:z-base": {},
|
|
179
|
+
"@apply focus-visible:border-primary-500": {},
|
|
180
|
+
"@apply focus-visible:ring-4 focus-visible:ring-primary-500": {},
|
|
181
|
+
/* active */
|
|
182
|
+
"@apply active:bg-neutral-300": {},
|
|
183
|
+
/* dark mode */
|
|
184
|
+
"@apply dark:border-transparent": {},
|
|
185
|
+
"@apply dark:text-neutral-100 dark:bg-neutral-700": {},
|
|
186
|
+
/* dark hover */
|
|
187
|
+
"@apply dark:hover:bg-neutral-600": {},
|
|
188
|
+
/* dark focus */
|
|
189
|
+
"@apply dark:focus-visible:border-primary-500": {},
|
|
190
|
+
/* dark active */
|
|
191
|
+
"@apply dark:active:bg-neutral-600": {},
|
|
192
|
+
|
|
193
|
+
...colors.reduce(
|
|
194
|
+
(styles, color) => ({
|
|
195
|
+
...styles,
|
|
196
|
+
[`&[data-color="${color}"]`]: {
|
|
197
|
+
[`@apply text-${color}-600 bg-${color}-50`]: {},
|
|
198
|
+
/* hover */
|
|
199
|
+
[`@apply hover:bg-${color}-100`]: {},
|
|
200
|
+
/* focus */
|
|
201
|
+
[`@apply focus-visible:border-${color}-500`]: {},
|
|
202
|
+
[`@apply focus-visible:ring-${color}-500`]: {},
|
|
203
|
+
/* active */
|
|
204
|
+
[`@apply active:bg-${color}-200`]: {},
|
|
205
|
+
/* dark mode */
|
|
206
|
+
[`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},
|
|
207
|
+
[`@apply dark:bg-opacity-15`]: {},
|
|
208
|
+
/* dark hover */
|
|
209
|
+
[`@apply dark:hover:bg-${color}-500`]: {},
|
|
210
|
+
[`@apply dark:hover:bg-opacity-25`]: {},
|
|
211
|
+
/* dark focus */
|
|
212
|
+
[`@apply dark:focus-visible:border-${color}-500`]: {},
|
|
213
|
+
[`@apply dark:focus-visible:ring-${color}-500`]: {},
|
|
214
|
+
/* dark active */
|
|
215
|
+
[`@apply dark:active:bg-${color}-500`]: {},
|
|
216
|
+
[`@apply dark:active:bg-opacity-30`]: {},
|
|
217
|
+
},
|
|
218
|
+
}),
|
|
219
|
+
{}
|
|
220
|
+
),
|
|
221
|
+
},
|
|
222
|
+
};
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
function buttonLink(colors) {
|
|
226
|
+
return {
|
|
227
|
+
"&-link": {
|
|
228
|
+
"@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700": {},
|
|
229
|
+
"@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500": {},
|
|
230
|
+
// dark colors
|
|
231
|
+
"@apply dark:text-neutral-200": {},
|
|
232
|
+
"@apply dark:active:text-neutral-500": {},
|
|
233
|
+
|
|
234
|
+
...colors.reduce(
|
|
235
|
+
(styles, color) => ({
|
|
236
|
+
...styles,
|
|
237
|
+
[`&[data-color="${color}"]`]: {
|
|
238
|
+
[`@apply text-${color}-600 active:text-${color}-700`]: {},
|
|
239
|
+
[`@apply focus-visible:ring-${color}-500`]: {},
|
|
240
|
+
// dark colors
|
|
241
|
+
[`@apply dark:text-${color}-200`]: {},
|
|
242
|
+
[`@apply dark:active:text-${color}-500`]: {},
|
|
243
|
+
},
|
|
244
|
+
}),
|
|
245
|
+
{}
|
|
246
|
+
),
|
|
247
|
+
},
|
|
248
|
+
};
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
module.exports = Button = (colors) => ({
|
|
252
|
+
".btn": {
|
|
253
|
+
"@apply relative": {},
|
|
254
|
+
"@apply m-0": {},
|
|
255
|
+
"@apply inline-flex items-center justify-center flex-shrink-0 align-middle": {},
|
|
256
|
+
"@apply font-medium leading-tight": {},
|
|
257
|
+
transitionProperty: "background-color, border-color, color, fill, stroke, box-shadow",
|
|
258
|
+
"@apply duration-75 ease-out": {},
|
|
259
|
+
"@apply outline-none appearance-none cursor-base select-none whitespace-nowrap": {},
|
|
260
|
+
"@apply focus-visible:outline-none": {},
|
|
261
|
+
|
|
262
|
+
padding: "1.2rem 3.2rem",
|
|
263
|
+
borderRadius: "3.2rem",
|
|
264
|
+
|
|
265
|
+
// sizing
|
|
266
|
+
"&-sm": {
|
|
267
|
+
"@apply text-xs": {},
|
|
268
|
+
// minWidth: "1.75rem",
|
|
269
|
+
},
|
|
270
|
+
|
|
271
|
+
"&-md": {
|
|
272
|
+
"@apply text-sm": {},
|
|
273
|
+
// minWidth: "2rem",
|
|
274
|
+
},
|
|
275
|
+
|
|
276
|
+
"&-lg": {
|
|
277
|
+
"@apply text-base": {},
|
|
278
|
+
// minWidth: "2.5rem",
|
|
279
|
+
},
|
|
280
|
+
|
|
281
|
+
// State
|
|
282
|
+
|
|
283
|
+
"&-disabled": {
|
|
284
|
+
"@apply disabled:shadow-none disabled:cursor-not-allowed": {},
|
|
285
|
+
"@apply disabled:text-black disabled:bg-gray-light !important": {},
|
|
286
|
+
},
|
|
287
|
+
|
|
288
|
+
// variants
|
|
289
|
+
...buttonSolid(colors),
|
|
290
|
+
...buttonOutline(colors),
|
|
291
|
+
//...buttonGhost(colors),
|
|
292
|
+
//...buttonLight(colors),
|
|
293
|
+
...buttonLink(colors),
|
|
294
|
+
},
|
|
295
|
+
});
|