@uicraft/core 1.0.0
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/README.txt +8 -0
- package/package.json +28 -0
- package/theme-manifest.json +20 -0
- package/themes/default.json +115 -0
- package/themes/editorial.json +115 -0
- package/themes/rounded-sans.json +115 -0
- package/uicraft.css +3714 -0
- package/uicraft.min.css +1 -0
package/README.txt
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
UiCraft Design System Bundle
|
|
2
|
+
|
|
3
|
+
- uicraft.css: expanded bundle
|
|
4
|
+
- uicraft.min.css: minified bundle
|
|
5
|
+
- theme-manifest.json: selectable themes
|
|
6
|
+
- themes/: source theme json files
|
|
7
|
+
|
|
8
|
+
Include uicraft.css (or uicraft.min.css) in your app and set html[data-theme="<name>"] + html.dark for dark mode.
|
package/package.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@uicraft/core",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "uicraft — beautifully designed UI components built with semantic CSS utility classes",
|
|
5
|
+
"main": "uicraft.css",
|
|
6
|
+
"style": "uicraft.css",
|
|
7
|
+
"files": [
|
|
8
|
+
"uicraft.css",
|
|
9
|
+
"uicraft.min.css",
|
|
10
|
+
"theme-manifest.json",
|
|
11
|
+
"themes/"
|
|
12
|
+
],
|
|
13
|
+
"keywords": [
|
|
14
|
+
"ui",
|
|
15
|
+
"css",
|
|
16
|
+
"components",
|
|
17
|
+
"design-system",
|
|
18
|
+
"utility-classes",
|
|
19
|
+
"dark-mode"
|
|
20
|
+
],
|
|
21
|
+
"author": "tarasenko-by",
|
|
22
|
+
"license": "MIT",
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "https://github.com/tarasenko-by/UiCraft.git"
|
|
26
|
+
},
|
|
27
|
+
"homepage": "https://getuicraft.com"
|
|
28
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "default",
|
|
4
|
+
"label": "Default",
|
|
5
|
+
"fontFamily": "Inter, system-ui, sans-serif",
|
|
6
|
+
"hasDark": true
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"name": "editorial",
|
|
10
|
+
"label": "Editorial",
|
|
11
|
+
"fontFamily": "'Source Serif 4', Georgia, serif",
|
|
12
|
+
"hasDark": true
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"name": "rounded-sans",
|
|
16
|
+
"label": "Rounded Sans",
|
|
17
|
+
"fontFamily": "Manrope, Inter, system-ui, sans-serif",
|
|
18
|
+
"hasDark": true
|
|
19
|
+
}
|
|
20
|
+
]
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "default",
|
|
3
|
+
"label": "Default",
|
|
4
|
+
"fontFamily": "Inter, system-ui, sans-serif",
|
|
5
|
+
"radius": {
|
|
6
|
+
"sm": "8px",
|
|
7
|
+
"lg": "12px",
|
|
8
|
+
"xl": "16px",
|
|
9
|
+
"2xl": "20px",
|
|
10
|
+
"3xl": "24px"
|
|
11
|
+
},
|
|
12
|
+
"spacing": {
|
|
13
|
+
"0": "0",
|
|
14
|
+
"0.5": "0.125rem",
|
|
15
|
+
"1": "0.25rem",
|
|
16
|
+
"1.5": "0.375rem",
|
|
17
|
+
"2": "0.5rem",
|
|
18
|
+
"3": "0.75rem",
|
|
19
|
+
"4": "1rem",
|
|
20
|
+
"5": "1.25rem",
|
|
21
|
+
"6": "1.5rem",
|
|
22
|
+
"8": "2rem",
|
|
23
|
+
"10": "2.5rem",
|
|
24
|
+
"12": "3rem",
|
|
25
|
+
"16": "4rem"
|
|
26
|
+
},
|
|
27
|
+
"fontSize": {
|
|
28
|
+
"xs": "0.75rem",
|
|
29
|
+
"sm": "0.875rem",
|
|
30
|
+
"base": "1rem",
|
|
31
|
+
"lg": "1.125rem",
|
|
32
|
+
"xl": "1.25rem",
|
|
33
|
+
"2xl": "1.5rem",
|
|
34
|
+
"3xl": "1.875rem",
|
|
35
|
+
"4xl": "2.25rem"
|
|
36
|
+
},
|
|
37
|
+
"fontWeight": {
|
|
38
|
+
"normal": "400",
|
|
39
|
+
"medium": "500",
|
|
40
|
+
"semibold": "600",
|
|
41
|
+
"bold": "700"
|
|
42
|
+
},
|
|
43
|
+
"lineHeight": {
|
|
44
|
+
"tight": "1.25",
|
|
45
|
+
"normal": "1.5",
|
|
46
|
+
"loose": "1.75"
|
|
47
|
+
},
|
|
48
|
+
"shadow": {
|
|
49
|
+
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
50
|
+
"default": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
51
|
+
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
52
|
+
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
53
|
+
"xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
|
|
54
|
+
},
|
|
55
|
+
"zIndex": {
|
|
56
|
+
"dropdown": "1000",
|
|
57
|
+
"sticky": "1020",
|
|
58
|
+
"fixed": "1030",
|
|
59
|
+
"drawer": "1040",
|
|
60
|
+
"modal": "1050",
|
|
61
|
+
"popover": "1060",
|
|
62
|
+
"tooltip": "1070"
|
|
63
|
+
},
|
|
64
|
+
"transition": {
|
|
65
|
+
"fast": "150ms ease",
|
|
66
|
+
"normal": "200ms ease",
|
|
67
|
+
"slow": "300ms ease"
|
|
68
|
+
},
|
|
69
|
+
"colors": {
|
|
70
|
+
"constantWhite": "0 0% 100%",
|
|
71
|
+
"constantBlack": "0 0% 0%",
|
|
72
|
+
"fgPrimary": "240 3% 6%",
|
|
73
|
+
"fgSecondary": "228 4% 25%",
|
|
74
|
+
"fgTertiary": "227 4% 43%",
|
|
75
|
+
"fgDisabled": "231 6% 61%",
|
|
76
|
+
"neutralsBackground": "0 0% 98%",
|
|
77
|
+
"neutralsSurface": "0 0% 100%",
|
|
78
|
+
"neutralsSubtle": "0 0% 98%",
|
|
79
|
+
"neutralsMuted": "0 0% 96%",
|
|
80
|
+
"neutralsEmphasis": "0 5% 92%",
|
|
81
|
+
"borderDefault": "0 5% 92%",
|
|
82
|
+
"borderStrong": "245 10% 78%",
|
|
83
|
+
"accentsGreen": "162 86% 40%",
|
|
84
|
+
"accentsBlue": "219 88% 54%",
|
|
85
|
+
"accentsRed": "4 83% 55%",
|
|
86
|
+
"accentsOrange": "30 100% 55%",
|
|
87
|
+
"tintRed": "0 100% 95%",
|
|
88
|
+
"tintGreen": "152 39% 89%",
|
|
89
|
+
"tintBlue": "217 100% 92%",
|
|
90
|
+
"tintOrange": "34 100% 95%"
|
|
91
|
+
},
|
|
92
|
+
"dark": {
|
|
93
|
+
"colors": {
|
|
94
|
+
"fgPrimary": "0 0% 98%",
|
|
95
|
+
"fgSecondary": "245 10% 78%",
|
|
96
|
+
"fgTertiary": "231 6% 61%",
|
|
97
|
+
"fgDisabled": "227 4% 43%",
|
|
98
|
+
"neutralsBackground": "240 3% 6%",
|
|
99
|
+
"neutralsSurface": "0 0% 0%",
|
|
100
|
+
"neutralsSubtle": "240 4% 15%",
|
|
101
|
+
"neutralsMuted": "240 3% 6%",
|
|
102
|
+
"neutralsEmphasis": "228 4% 25%",
|
|
103
|
+
"borderDefault": "240 4% 15%",
|
|
104
|
+
"borderStrong": "228 4% 25%",
|
|
105
|
+
"accentsGreen": "162 86% 40%",
|
|
106
|
+
"accentsBlue": "219 88% 54%",
|
|
107
|
+
"accentsRed": "4 83% 55%",
|
|
108
|
+
"accentsOrange": "30 100% 55%",
|
|
109
|
+
"tintRed": "356 89% 17%",
|
|
110
|
+
"tintGreen": "150 60% 3%",
|
|
111
|
+
"tintBlue": "216 82% 17%",
|
|
112
|
+
"tintOrange": "30 100% 10%"
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "editorial",
|
|
3
|
+
"label": "Editorial",
|
|
4
|
+
"fontFamily": "'Source Serif 4', Georgia, serif",
|
|
5
|
+
"radius": {
|
|
6
|
+
"sm": "6px",
|
|
7
|
+
"lg": "10px",
|
|
8
|
+
"xl": "14px",
|
|
9
|
+
"2xl": "18px",
|
|
10
|
+
"3xl": "22px"
|
|
11
|
+
},
|
|
12
|
+
"spacing": {
|
|
13
|
+
"0": "0",
|
|
14
|
+
"0.5": "0.125rem",
|
|
15
|
+
"1": "0.25rem",
|
|
16
|
+
"1.5": "0.375rem",
|
|
17
|
+
"2": "0.5rem",
|
|
18
|
+
"3": "0.75rem",
|
|
19
|
+
"4": "1rem",
|
|
20
|
+
"5": "1.25rem",
|
|
21
|
+
"6": "1.5rem",
|
|
22
|
+
"8": "2rem",
|
|
23
|
+
"10": "2.5rem",
|
|
24
|
+
"12": "3rem",
|
|
25
|
+
"16": "4rem"
|
|
26
|
+
},
|
|
27
|
+
"fontSize": {
|
|
28
|
+
"xs": "0.75rem",
|
|
29
|
+
"sm": "0.875rem",
|
|
30
|
+
"base": "1rem",
|
|
31
|
+
"lg": "1.125rem",
|
|
32
|
+
"xl": "1.25rem",
|
|
33
|
+
"2xl": "1.5rem",
|
|
34
|
+
"3xl": "1.875rem",
|
|
35
|
+
"4xl": "2.25rem"
|
|
36
|
+
},
|
|
37
|
+
"fontWeight": {
|
|
38
|
+
"normal": "400",
|
|
39
|
+
"medium": "500",
|
|
40
|
+
"semibold": "600",
|
|
41
|
+
"bold": "700"
|
|
42
|
+
},
|
|
43
|
+
"lineHeight": {
|
|
44
|
+
"tight": "1.25",
|
|
45
|
+
"normal": "1.5",
|
|
46
|
+
"loose": "1.75"
|
|
47
|
+
},
|
|
48
|
+
"shadow": {
|
|
49
|
+
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
50
|
+
"default": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
51
|
+
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
52
|
+
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
53
|
+
"xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
|
|
54
|
+
},
|
|
55
|
+
"zIndex": {
|
|
56
|
+
"dropdown": "1000",
|
|
57
|
+
"sticky": "1020",
|
|
58
|
+
"fixed": "1030",
|
|
59
|
+
"drawer": "1040",
|
|
60
|
+
"modal": "1050",
|
|
61
|
+
"popover": "1060",
|
|
62
|
+
"tooltip": "1070"
|
|
63
|
+
},
|
|
64
|
+
"transition": {
|
|
65
|
+
"fast": "150ms ease",
|
|
66
|
+
"normal": "200ms ease",
|
|
67
|
+
"slow": "300ms ease"
|
|
68
|
+
},
|
|
69
|
+
"colors": {
|
|
70
|
+
"constantWhite": "0 0% 100%",
|
|
71
|
+
"constantBlack": "0 0% 0%",
|
|
72
|
+
"fgPrimary": "26 14% 16%",
|
|
73
|
+
"fgSecondary": "26 10% 28%",
|
|
74
|
+
"fgTertiary": "27 8% 44%",
|
|
75
|
+
"fgDisabled": "28 6% 58%",
|
|
76
|
+
"neutralsBackground": "36 30% 97%",
|
|
77
|
+
"neutralsSurface": "38 30% 99%",
|
|
78
|
+
"neutralsSubtle": "36 26% 95%",
|
|
79
|
+
"neutralsMuted": "35 24% 93%",
|
|
80
|
+
"neutralsEmphasis": "34 18% 88%",
|
|
81
|
+
"borderDefault": "34 16% 86%",
|
|
82
|
+
"borderStrong": "31 14% 72%",
|
|
83
|
+
"accentsGreen": "155 58% 34%",
|
|
84
|
+
"accentsBlue": "211 74% 45%",
|
|
85
|
+
"accentsRed": "3 68% 52%",
|
|
86
|
+
"accentsOrange": "28 80% 49%",
|
|
87
|
+
"tintRed": "0 100% 96%",
|
|
88
|
+
"tintGreen": "153 40% 90%",
|
|
89
|
+
"tintBlue": "212 100% 94%",
|
|
90
|
+
"tintOrange": "34 100% 95%"
|
|
91
|
+
},
|
|
92
|
+
"dark": {
|
|
93
|
+
"colors": {
|
|
94
|
+
"fgPrimary": "40 18% 94%",
|
|
95
|
+
"fgSecondary": "37 14% 80%",
|
|
96
|
+
"fgTertiary": "35 10% 64%",
|
|
97
|
+
"fgDisabled": "33 7% 48%",
|
|
98
|
+
"neutralsBackground": "24 16% 10%",
|
|
99
|
+
"neutralsSurface": "22 16% 8%",
|
|
100
|
+
"neutralsSubtle": "24 12% 14%",
|
|
101
|
+
"neutralsMuted": "25 13% 11%",
|
|
102
|
+
"neutralsEmphasis": "23 10% 20%",
|
|
103
|
+
"borderDefault": "23 10% 19%",
|
|
104
|
+
"borderStrong": "25 10% 29%",
|
|
105
|
+
"accentsGreen": "155 58% 43%",
|
|
106
|
+
"accentsBlue": "211 74% 56%",
|
|
107
|
+
"accentsRed": "3 72% 60%",
|
|
108
|
+
"accentsOrange": "30 84% 57%",
|
|
109
|
+
"tintRed": "356 60% 16%",
|
|
110
|
+
"tintGreen": "153 46% 11%",
|
|
111
|
+
"tintBlue": "211 53% 16%",
|
|
112
|
+
"tintOrange": "30 63% 14%"
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "rounded-sans",
|
|
3
|
+
"label": "Rounded Sans",
|
|
4
|
+
"fontFamily": "Manrope, Inter, system-ui, sans-serif",
|
|
5
|
+
"radius": {
|
|
6
|
+
"sm": "10px",
|
|
7
|
+
"lg": "14px",
|
|
8
|
+
"xl": "18px",
|
|
9
|
+
"2xl": "24px",
|
|
10
|
+
"3xl": "28px"
|
|
11
|
+
},
|
|
12
|
+
"spacing": {
|
|
13
|
+
"0": "0",
|
|
14
|
+
"0.5": "0.125rem",
|
|
15
|
+
"1": "0.25rem",
|
|
16
|
+
"1.5": "0.375rem",
|
|
17
|
+
"2": "0.5rem",
|
|
18
|
+
"3": "0.75rem",
|
|
19
|
+
"4": "1rem",
|
|
20
|
+
"5": "1.25rem",
|
|
21
|
+
"6": "1.5rem",
|
|
22
|
+
"8": "2rem",
|
|
23
|
+
"10": "2.5rem",
|
|
24
|
+
"12": "3rem",
|
|
25
|
+
"16": "4rem"
|
|
26
|
+
},
|
|
27
|
+
"fontSize": {
|
|
28
|
+
"xs": "0.75rem",
|
|
29
|
+
"sm": "0.875rem",
|
|
30
|
+
"base": "1rem",
|
|
31
|
+
"lg": "1.125rem",
|
|
32
|
+
"xl": "1.25rem",
|
|
33
|
+
"2xl": "1.5rem",
|
|
34
|
+
"3xl": "1.875rem",
|
|
35
|
+
"4xl": "2.25rem"
|
|
36
|
+
},
|
|
37
|
+
"fontWeight": {
|
|
38
|
+
"normal": "400",
|
|
39
|
+
"medium": "500",
|
|
40
|
+
"semibold": "600",
|
|
41
|
+
"bold": "700"
|
|
42
|
+
},
|
|
43
|
+
"lineHeight": {
|
|
44
|
+
"tight": "1.25",
|
|
45
|
+
"normal": "1.5",
|
|
46
|
+
"loose": "1.75"
|
|
47
|
+
},
|
|
48
|
+
"shadow": {
|
|
49
|
+
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
50
|
+
"default": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
51
|
+
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
52
|
+
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
53
|
+
"xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
|
|
54
|
+
},
|
|
55
|
+
"zIndex": {
|
|
56
|
+
"dropdown": "1000",
|
|
57
|
+
"sticky": "1020",
|
|
58
|
+
"fixed": "1030",
|
|
59
|
+
"drawer": "1040",
|
|
60
|
+
"modal": "1050",
|
|
61
|
+
"popover": "1060",
|
|
62
|
+
"tooltip": "1070"
|
|
63
|
+
},
|
|
64
|
+
"transition": {
|
|
65
|
+
"fast": "150ms ease",
|
|
66
|
+
"normal": "200ms ease",
|
|
67
|
+
"slow": "300ms ease"
|
|
68
|
+
},
|
|
69
|
+
"colors": {
|
|
70
|
+
"constantWhite": "0 0% 100%",
|
|
71
|
+
"constantBlack": "0 0% 0%",
|
|
72
|
+
"fgPrimary": "224 26% 15%",
|
|
73
|
+
"fgSecondary": "225 17% 28%",
|
|
74
|
+
"fgTertiary": "225 12% 45%",
|
|
75
|
+
"fgDisabled": "226 10% 62%",
|
|
76
|
+
"neutralsBackground": "220 20% 98%",
|
|
77
|
+
"neutralsSurface": "0 0% 100%",
|
|
78
|
+
"neutralsSubtle": "220 20% 97%",
|
|
79
|
+
"neutralsMuted": "220 18% 95%",
|
|
80
|
+
"neutralsEmphasis": "220 16% 90%",
|
|
81
|
+
"borderDefault": "220 14% 90%",
|
|
82
|
+
"borderStrong": "221 15% 78%",
|
|
83
|
+
"accentsGreen": "160 84% 38%",
|
|
84
|
+
"accentsBlue": "221 84% 55%",
|
|
85
|
+
"accentsRed": "0 78% 56%",
|
|
86
|
+
"accentsOrange": "28 96% 56%",
|
|
87
|
+
"tintRed": "0 100% 96%",
|
|
88
|
+
"tintGreen": "154 48% 91%",
|
|
89
|
+
"tintBlue": "214 100% 95%",
|
|
90
|
+
"tintOrange": "34 100% 95%"
|
|
91
|
+
},
|
|
92
|
+
"dark": {
|
|
93
|
+
"colors": {
|
|
94
|
+
"fgPrimary": "220 20% 96%",
|
|
95
|
+
"fgSecondary": "220 16% 83%",
|
|
96
|
+
"fgTertiary": "220 12% 66%",
|
|
97
|
+
"fgDisabled": "220 10% 48%",
|
|
98
|
+
"neutralsBackground": "226 24% 10%",
|
|
99
|
+
"neutralsSurface": "226 24% 8%",
|
|
100
|
+
"neutralsSubtle": "224 19% 16%",
|
|
101
|
+
"neutralsMuted": "226 20% 12%",
|
|
102
|
+
"neutralsEmphasis": "224 16% 22%",
|
|
103
|
+
"borderDefault": "224 15% 20%",
|
|
104
|
+
"borderStrong": "224 13% 30%",
|
|
105
|
+
"accentsGreen": "160 84% 45%",
|
|
106
|
+
"accentsBlue": "221 84% 62%",
|
|
107
|
+
"accentsRed": "0 84% 63%",
|
|
108
|
+
"accentsOrange": "32 98% 62%",
|
|
109
|
+
"tintRed": "355 76% 16%",
|
|
110
|
+
"tintGreen": "157 58% 11%",
|
|
111
|
+
"tintBlue": "219 63% 17%",
|
|
112
|
+
"tintOrange": "29 77% 15%"
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|