@sk-web-gui/core 0.1.3 → 0.1.6
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 +40 -0
- package/src/index.js +241 -235
- 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
|
+
});
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
module.exports = UserMenu = (colors) => ({
|
|
2
|
+
".usermenu": {
|
|
3
|
+
// "@apply mx-sm mt-sm mb-0 px-md py-0 divide-y divide-y-2 divide-gray-300 bg-white border-2 border-white border-solid rounded":
|
|
4
|
+
"@apply drop-shadow-none shadow-none filter-none": {},
|
|
5
|
+
// "@apply ": {},
|
|
6
|
+
"&-is-open": {
|
|
7
|
+
// "@apply border-2 border-gray-300 border-solid rounded": {},
|
|
8
|
+
// "box-shadow": "0px 4px 12px rgba(27, 29, 31, 0.12)",
|
|
9
|
+
},
|
|
10
|
+
|
|
11
|
+
"&-header": {
|
|
12
|
+
// "@apply flex flex-col text-left m-0 px-0 py-sm": {},
|
|
13
|
+
'[aria-expanded="true"] &': {
|
|
14
|
+
"@apply bg-hover": {},
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
"&-body": {
|
|
18
|
+
// "@apply p-0 m-0 py-sm bg-white": {},
|
|
19
|
+
},
|
|
20
|
+
"&-item": {
|
|
21
|
+
"&.link": {
|
|
22
|
+
"@apply text-white no-underline": {},
|
|
23
|
+
},
|
|
24
|
+
"@apply text-white cursor-pointer bg-hover": {
|
|
25
|
+
a: {
|
|
26
|
+
"@apply text-white px-md py-sm w-full": {},
|
|
27
|
+
},
|
|
28
|
+
"a.link": {
|
|
29
|
+
"@apply text-white px-md py-sm w-full": {},
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
".inactive > &-item": {
|
|
34
|
+
"@apply bg-white text-black no-underline": {},
|
|
35
|
+
"a.link": {
|
|
36
|
+
"@apply text-black no-underline": {},
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
});
|