@sk-web-gui/core 0.1.4 → 0.1.5
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 +10 -1
- package/src/index.js +241 -239
- package/src/with-opacity.js +6 -6
package/src/components/tag.js
CHANGED
|
@@ -1,109 +1,109 @@
|
|
|
1
|
-
function tagOutline(colors) {
|
|
2
|
-
return {
|
|
3
|
-
".tag-outline": {
|
|
4
|
-
"@apply border bg-transparent border-neutral-200 text-neutral-900": {},
|
|
5
|
-
// dark
|
|
6
|
-
"@apply dark:border-neutral-600 dark:text-neutral-100": {},
|
|
7
|
-
|
|
8
|
-
...colors.reduce(
|
|
9
|
-
(styles, color) => ({
|
|
10
|
-
...styles,
|
|
11
|
-
[`&[data-color="${color}"]`]: {
|
|
12
|
-
[`@apply border-${color}-600 text-${color}-600`]: {},
|
|
13
|
-
// dark
|
|
14
|
-
[`@apply dark:border-${color}-400 dark:text-${color}-400`]: {},
|
|
15
|
-
"@apply dark:border-opacity-40": {},
|
|
16
|
-
},
|
|
17
|
-
}),
|
|
18
|
-
{}
|
|
19
|
-
),
|
|
20
|
-
},
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function tagSolid(colors) {
|
|
25
|
-
return {
|
|
26
|
-
".tag-solid": {
|
|
27
|
-
"@apply border bg-neutral-500 border-transparent text-white": {},
|
|
28
|
-
// dark
|
|
29
|
-
"@apply dark:border-neutral-600 dark:text-neutral-100 dark:bg-neutral-700": {},
|
|
30
|
-
|
|
31
|
-
...colors.reduce(
|
|
32
|
-
(styles, color) => ({
|
|
33
|
-
...styles,
|
|
34
|
-
[`&[data-color="${color}"]`]: {
|
|
35
|
-
[`@apply bg-${color}-500`]: {},
|
|
36
|
-
// dark
|
|
37
|
-
[`@apply dark:text-${color}-400 dark:border-${color}-500 dark:bg-${color}-500`]: {},
|
|
38
|
-
"@apply dark:bg-opacity-15": {},
|
|
39
|
-
"@apply dark:border-opacity-40": {},
|
|
40
|
-
},
|
|
41
|
-
}),
|
|
42
|
-
{}
|
|
43
|
-
),
|
|
44
|
-
},
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function tagLight(colors) {
|
|
49
|
-
return {
|
|
50
|
-
".tag-light": {
|
|
51
|
-
"@apply text-neutral-900 bg-neutral-100": {},
|
|
52
|
-
// dark
|
|
53
|
-
"@apply dark:text-neutral-100 dark:bg-neutral-700": {},
|
|
54
|
-
|
|
55
|
-
...colors.reduce(
|
|
56
|
-
(styles, color) => ({
|
|
57
|
-
...styles,
|
|
58
|
-
[`&[data-color="${color}"]`]: {
|
|
59
|
-
[`@apply text-${color}-800 bg-${color}-100`]: {},
|
|
60
|
-
// dark
|
|
61
|
-
[`@apply dark:text-${color}-400 dark:bg-${color}-500`]: {},
|
|
62
|
-
"@apply dark:bg-opacity-15": {},
|
|
63
|
-
},
|
|
64
|
-
}),
|
|
65
|
-
{}
|
|
66
|
-
),
|
|
67
|
-
},
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
module.exports = Tag = (colors) => ({
|
|
72
|
-
".tag": {
|
|
73
|
-
"@apply inline-flex items-center max-h-full rounded-full font-medium outline-none cursor-base whitespace-nowrap": {},
|
|
74
|
-
|
|
75
|
-
"&-sm": {
|
|
76
|
-
"@apply px-2 h-5 text-xs": {},
|
|
77
|
-
minWidth: "1.25rem",
|
|
78
|
-
},
|
|
79
|
-
|
|
80
|
-
"&-md": {
|
|
81
|
-
"@apply px-2 h-6 text-xs": {},
|
|
82
|
-
minWidth: "1.5rem",
|
|
83
|
-
},
|
|
84
|
-
|
|
85
|
-
"&-lg": {
|
|
86
|
-
"@apply px-2.5 h-7 text-sm": {},
|
|
87
|
-
minWidth: "1.75rem",
|
|
88
|
-
},
|
|
89
|
-
|
|
90
|
-
"&-xl": {
|
|
91
|
-
"@apply px-3 h-8 text-base": {},
|
|
92
|
-
minWidth: "2rem",
|
|
93
|
-
},
|
|
94
|
-
},
|
|
95
|
-
|
|
96
|
-
// variants
|
|
97
|
-
...tagOutline(colors),
|
|
98
|
-
...tagSolid(colors),
|
|
99
|
-
...tagLight(colors),
|
|
100
|
-
|
|
101
|
-
".tag-close-button": {
|
|
102
|
-
"@apply flex items-center justify-center transition-all duration-150 rounded-full outline-none ml-1 -mr-1 opacity-50 cursor-base": {},
|
|
103
|
-
"@apply hover:opacity-80 focus-visible:outline-none active:opacity-100": {},
|
|
104
|
-
|
|
105
|
-
"&-disabled": {
|
|
106
|
-
"@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none": {},
|
|
107
|
-
},
|
|
108
|
-
},
|
|
109
|
-
});
|
|
1
|
+
function tagOutline(colors) {
|
|
2
|
+
return {
|
|
3
|
+
".tag-outline": {
|
|
4
|
+
"@apply border bg-transparent border-neutral-200 text-neutral-900": {},
|
|
5
|
+
// dark
|
|
6
|
+
"@apply dark:border-neutral-600 dark:text-neutral-100": {},
|
|
7
|
+
|
|
8
|
+
...colors.reduce(
|
|
9
|
+
(styles, color) => ({
|
|
10
|
+
...styles,
|
|
11
|
+
[`&[data-color="${color}"]`]: {
|
|
12
|
+
[`@apply border-${color}-600 text-${color}-600`]: {},
|
|
13
|
+
// dark
|
|
14
|
+
[`@apply dark:border-${color}-400 dark:text-${color}-400`]: {},
|
|
15
|
+
"@apply dark:border-opacity-40": {},
|
|
16
|
+
},
|
|
17
|
+
}),
|
|
18
|
+
{}
|
|
19
|
+
),
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
function tagSolid(colors) {
|
|
25
|
+
return {
|
|
26
|
+
".tag-solid": {
|
|
27
|
+
"@apply border bg-neutral-500 border-transparent text-white": {},
|
|
28
|
+
// dark
|
|
29
|
+
"@apply dark:border-neutral-600 dark:text-neutral-100 dark:bg-neutral-700": {},
|
|
30
|
+
|
|
31
|
+
...colors.reduce(
|
|
32
|
+
(styles, color) => ({
|
|
33
|
+
...styles,
|
|
34
|
+
[`&[data-color="${color}"]`]: {
|
|
35
|
+
[`@apply bg-${color}-500`]: {},
|
|
36
|
+
// dark
|
|
37
|
+
[`@apply dark:text-${color}-400 dark:border-${color}-500 dark:bg-${color}-500`]: {},
|
|
38
|
+
"@apply dark:bg-opacity-15": {},
|
|
39
|
+
"@apply dark:border-opacity-40": {},
|
|
40
|
+
},
|
|
41
|
+
}),
|
|
42
|
+
{}
|
|
43
|
+
),
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function tagLight(colors) {
|
|
49
|
+
return {
|
|
50
|
+
".tag-light": {
|
|
51
|
+
"@apply text-neutral-900 bg-neutral-100": {},
|
|
52
|
+
// dark
|
|
53
|
+
"@apply dark:text-neutral-100 dark:bg-neutral-700": {},
|
|
54
|
+
|
|
55
|
+
...colors.reduce(
|
|
56
|
+
(styles, color) => ({
|
|
57
|
+
...styles,
|
|
58
|
+
[`&[data-color="${color}"]`]: {
|
|
59
|
+
[`@apply text-${color}-800 bg-${color}-100`]: {},
|
|
60
|
+
// dark
|
|
61
|
+
[`@apply dark:text-${color}-400 dark:bg-${color}-500`]: {},
|
|
62
|
+
"@apply dark:bg-opacity-15": {},
|
|
63
|
+
},
|
|
64
|
+
}),
|
|
65
|
+
{}
|
|
66
|
+
),
|
|
67
|
+
},
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
module.exports = Tag = (colors) => ({
|
|
72
|
+
".tag": {
|
|
73
|
+
"@apply inline-flex items-center max-h-full rounded-full font-medium outline-none cursor-base whitespace-nowrap": {},
|
|
74
|
+
|
|
75
|
+
"&-sm": {
|
|
76
|
+
"@apply px-2 h-5 text-xs": {},
|
|
77
|
+
minWidth: "1.25rem",
|
|
78
|
+
},
|
|
79
|
+
|
|
80
|
+
"&-md": {
|
|
81
|
+
"@apply px-2 h-6 text-xs": {},
|
|
82
|
+
minWidth: "1.5rem",
|
|
83
|
+
},
|
|
84
|
+
|
|
85
|
+
"&-lg": {
|
|
86
|
+
"@apply px-2.5 h-7 text-sm": {},
|
|
87
|
+
minWidth: "1.75rem",
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
"&-xl": {
|
|
91
|
+
"@apply px-3 h-8 text-base": {},
|
|
92
|
+
minWidth: "2rem",
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
|
|
96
|
+
// variants
|
|
97
|
+
...tagOutline(colors),
|
|
98
|
+
...tagSolid(colors),
|
|
99
|
+
...tagLight(colors),
|
|
100
|
+
|
|
101
|
+
".tag-close-button": {
|
|
102
|
+
"@apply flex items-center justify-center transition-all duration-150 rounded-full outline-none ml-1 -mr-1 opacity-50 cursor-base": {},
|
|
103
|
+
"@apply hover:opacity-80 focus-visible:outline-none active:opacity-100": {},
|
|
104
|
+
|
|
105
|
+
"&-disabled": {
|
|
106
|
+
"@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none": {},
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
});
|
|
@@ -18,7 +18,16 @@ module.exports = UserMenu = (colors) => ({
|
|
|
18
18
|
// "@apply p-0 m-0 py-sm bg-white": {},
|
|
19
19
|
},
|
|
20
20
|
"&-item": {
|
|
21
|
-
|
|
21
|
+
"@apply lg:text-black cursor-pointer": {},
|
|
22
|
+
"a.link": {
|
|
23
|
+
"@apply text-black": {},
|
|
24
|
+
},
|
|
25
|
+
"&.hovered": {
|
|
26
|
+
"@apply bg-hover text-white no-underline": {},
|
|
27
|
+
"a.link": {
|
|
28
|
+
"@apply text-white no-underline": {},
|
|
29
|
+
},
|
|
30
|
+
},
|
|
22
31
|
},
|
|
23
32
|
},
|
|
24
33
|
});
|