@lmy54321/design-system 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/dist/index.d.mts +388 -0
- package/dist/index.d.ts +388 -0
- package/dist/index.js +3368 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +3315 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +60 -0
- package/styles/.gitkeep +0 -0
- package/styles/globals.css +233 -0
package/package.json
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@lmy54321/design-system",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A comprehensive React component library and design system based on Tailwind CSS and Motion.",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./styles": "./styles/globals.css"
|
|
15
|
+
},
|
|
16
|
+
"sideEffects": false,
|
|
17
|
+
"files": [
|
|
18
|
+
"dist",
|
|
19
|
+
"styles"
|
|
20
|
+
],
|
|
21
|
+
"scripts": {
|
|
22
|
+
"dev": "vite",
|
|
23
|
+
"build": "tsup",
|
|
24
|
+
"build:check": "tsc --noEmit",
|
|
25
|
+
"prepublishOnly": "npm run build",
|
|
26
|
+
"lint": "eslint .",
|
|
27
|
+
"test": "vitest"
|
|
28
|
+
},
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"react": "^18.3.1",
|
|
31
|
+
"react-dom": "^18.3.1",
|
|
32
|
+
"tailwindcss": "^4.2.1"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"class-variance-authority": "^0.7.0",
|
|
36
|
+
"clsx": "^2.1.0",
|
|
37
|
+
"lucide-react": "^0.330.0",
|
|
38
|
+
"motion": "^12.0.0",
|
|
39
|
+
"tailwind-merge": "^2.2.1"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@tailwindcss/vite": "^4.2.1",
|
|
43
|
+
"@types/node": "^20.11.17",
|
|
44
|
+
"@types/react": "^18.2.55",
|
|
45
|
+
"@types/react-dom": "^18.2.19",
|
|
46
|
+
"@vitejs/plugin-react": "^5.1.4",
|
|
47
|
+
"tsup": "^8.0.2",
|
|
48
|
+
"typescript": "^5.3.3",
|
|
49
|
+
"vite": "^7.3.1"
|
|
50
|
+
},
|
|
51
|
+
"keywords": [
|
|
52
|
+
"react",
|
|
53
|
+
"component-library",
|
|
54
|
+
"design-system",
|
|
55
|
+
"tailwind",
|
|
56
|
+
"ui"
|
|
57
|
+
],
|
|
58
|
+
"author": "Figma Make",
|
|
59
|
+
"license": "MIT"
|
|
60
|
+
}
|
package/styles/.gitkeep
ADDED
|
File without changes
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
|
|
3
|
+
@source "../src";
|
|
4
|
+
@source "../components";
|
|
5
|
+
|
|
6
|
+
@custom-variant dark (&:is(.dark *));
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
/* Typography variables */
|
|
10
|
+
--text-2xl: 24px; /* H1 font size */
|
|
11
|
+
--text-xl: 20px; /* H2 font size */
|
|
12
|
+
--text-lg: 18px; /* H3 font size */
|
|
13
|
+
--text-base: 16px; /* H4 font size */
|
|
14
|
+
--text-sm: 14px; /* Paragraph font size */
|
|
15
|
+
--text-xs: 12px; /* Label font size */
|
|
16
|
+
|
|
17
|
+
/* Font weights */
|
|
18
|
+
--font-weight-bold: 800; /* Bold weight for large headings (24px, 20px, 18px) */
|
|
19
|
+
--font-weight-medium: 600; /* Medium weight for headings */
|
|
20
|
+
--font-weight-normal: 400; /* Normal weight for body text */
|
|
21
|
+
|
|
22
|
+
/* Font family - Using system PingFang SC */
|
|
23
|
+
--font-family-sans: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
24
|
+
|
|
25
|
+
/* Spacing system - Mobile-first grid spacing */
|
|
26
|
+
--spacing-xxs: 4px; /* Extremely tight spacing */
|
|
27
|
+
--spacing-xs: 8px; /* Tight spacing - button groups, icon gaps */
|
|
28
|
+
--spacing-sm: 12px; /* Compact spacing - list items vertical padding */
|
|
29
|
+
--spacing-base: 16px; /* Base spacing - default padding, page margins */
|
|
30
|
+
--spacing-md: 20px; /* Medium spacing - section gaps */
|
|
31
|
+
--spacing-lg: 24px; /* Large spacing - module gaps, dialog padding */
|
|
32
|
+
--spacing-xl: 32px; /* Extra large spacing - page sections */
|
|
33
|
+
--spacing-2xl: 40px; /* 2X large spacing - major sections */
|
|
34
|
+
--spacing-3xl: 48px; /* 3X large spacing - hero sections */
|
|
35
|
+
|
|
36
|
+
/* The default background color for the application. */
|
|
37
|
+
--background: rgba(255, 255, 255, 1);
|
|
38
|
+
/* The default color for elements or text that appears on top of the background. */
|
|
39
|
+
--foreground: rgba(0, 0, 0, 0.9);
|
|
40
|
+
/* The background color for cards, modals, and other containers. */
|
|
41
|
+
--card: rgba(255, 255, 255, 1);
|
|
42
|
+
/* The default color for text or elements that appear on top of cards, modals and other background containers. */
|
|
43
|
+
--card-foreground: rgba(0, 0, 0, 0.9);
|
|
44
|
+
/* The background color for muted card containers (normal cards without emphasis). */
|
|
45
|
+
--card-muted: rgba(75, 82, 107, 0.04);
|
|
46
|
+
/* The border color for emphasized card containers. */
|
|
47
|
+
--card-border: rgba(0, 0, 0, 0.08);
|
|
48
|
+
/* The background color for dropdowns and tooltips. */
|
|
49
|
+
--popover: rgba(255, 255, 255, 0.9);
|
|
50
|
+
/* The default color for text or elements that appear on top of dropdowns and tooltips. */
|
|
51
|
+
--popover-foreground: rgba(0, 0, 0, 0.9);
|
|
52
|
+
/* The primary color used for buttons, links, and other interactive elements. */
|
|
53
|
+
--primary: rgba(75, 82, 107, 1);
|
|
54
|
+
/* The default color for text or elements that appear on top of primary colored elements. */
|
|
55
|
+
--primary-foreground: rgba(255, 255, 255, 1);
|
|
56
|
+
/* The secondary color used for secondary(but NOT-DESTRUCTIVE) buttons and interactive elements. */
|
|
57
|
+
--secondary: rgba(75, 82, 107, 0.08);
|
|
58
|
+
/* The default color for text or elements that appear on top of secondary colored elements. */
|
|
59
|
+
--secondary-foreground: rgba(0, 0, 0, 0.9);
|
|
60
|
+
/* The muted color used for less prominent elements, such as disabled buttons or disabled text. */
|
|
61
|
+
--muted: rgba(0, 0, 0, 0.08);
|
|
62
|
+
/* The default color for text or elements that appear on top of muted colored elements. */
|
|
63
|
+
--muted-foreground: rgba(0, 0, 0, 0.42);
|
|
64
|
+
/* The accent color used for highlights, links, and other interactive elements. */
|
|
65
|
+
--accent: rgba(54, 123, 246, 1);
|
|
66
|
+
/* The default color for text or elements that appear on top of accent colored elements. */
|
|
67
|
+
--accent-foreground: rgba(255, 255, 255, 1);
|
|
68
|
+
/* The color used for background in destructive actions, such as delete buttons or error messages. */
|
|
69
|
+
--destructive: rgba(255, 41, 59, 1);
|
|
70
|
+
/* The default color for text or elements that appear on top of destructive colored elements. */
|
|
71
|
+
--destructive-foreground: rgba(255, 255, 255, 1);
|
|
72
|
+
/* The default border color for elements such as inputs, buttons, and other containers. */
|
|
73
|
+
--border: rgba(0, 0, 0, 0.12);
|
|
74
|
+
/* The default background color for input fields once the text has been filled. Should be either transparent or match the input-background. */
|
|
75
|
+
--input: rgba(75, 82, 107, 0.08);
|
|
76
|
+
/* The default background color for input fields, text areas, and other input elements. */
|
|
77
|
+
--input-background: rgba(75, 82, 107, 0.08);
|
|
78
|
+
/* The color for focus rings, outlines, and other focus indicators. */
|
|
79
|
+
--ring: rgba(54, 123, 246, 1);
|
|
80
|
+
/* Shadow for small elevations, such as cards or modals. */
|
|
81
|
+
--elevation-sm: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
|
|
82
|
+
/* The color for chart elements, such as a bar or line in a chart. */
|
|
83
|
+
--chart-1: rgba(54, 123, 246, 1);
|
|
84
|
+
/* The color for another chart element, such as a bar or line in a chart. */
|
|
85
|
+
--chart-2: rgba(79, 231, 236, 1);
|
|
86
|
+
/* The color for another chart element, such as a bar or line in a chart. */
|
|
87
|
+
--chart-3: rgba(204, 248, 121, 1);
|
|
88
|
+
/* The color for another chart element, such as a bar or line in a chart. */
|
|
89
|
+
--chart-4: rgba(255, 195, 0, 1);
|
|
90
|
+
/* The color for another chart element, such as a bar or line in a chart. */
|
|
91
|
+
--chart-5: rgba(255, 69, 110, 1);
|
|
92
|
+
/* The default border radius for elements such as buttons, cards, and other containers. */
|
|
93
|
+
--radius: 24px;
|
|
94
|
+
/* Border radius for large buttons creating pill-shaped buttons. */
|
|
95
|
+
--radius-button: 50px;
|
|
96
|
+
/* Border radius for card components. */
|
|
97
|
+
--radius-card: 32px;
|
|
98
|
+
/* The background color for sidebars, navigation menus, and other persistent elements. */
|
|
99
|
+
--sidebar: rgba(246, 247, 249, 1);
|
|
100
|
+
/* The default color for text or elements that appear on top of sidebars, navigation menus, and other persistent elements. */
|
|
101
|
+
--sidebar-foreground: rgba(31, 33, 40, 1);
|
|
102
|
+
/* The primary color used for buttons, links, and other interactive elements in sidebars and navigation menus. */
|
|
103
|
+
--sidebar-primary: rgba(75, 82, 107, 1);
|
|
104
|
+
/* The default color for text or elements that appear on top of primary colored elements in sidebars and navigation menus. */
|
|
105
|
+
--sidebar-primary-foreground: rgba(255, 255, 255, 1);
|
|
106
|
+
/* The accent color used for highlights, links, and other interactive elements in sidebars and navigation menus. */
|
|
107
|
+
--sidebar-accent: rgba(54, 123, 246, 1);
|
|
108
|
+
/* The default color for text or elements that appear on top of accent colored elements in sidebars and navigation menus. */
|
|
109
|
+
--sidebar-accent-foreground: rgba(255, 255, 255, 1);
|
|
110
|
+
/* The default border color for elements in sidebars and navigation menus. */
|
|
111
|
+
--sidebar-border: rgba(178, 183, 198, 1);
|
|
112
|
+
/* The default color for focus rings, outlines, and other focus indicators in sidebars and navigation menus. */
|
|
113
|
+
--sidebar-ring: rgba(54, 123, 246, 1);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@theme inline {
|
|
117
|
+
--color-background: var(--background);
|
|
118
|
+
--color-foreground: var(--foreground);
|
|
119
|
+
--color-card: var(--card);
|
|
120
|
+
--color-card-foreground: var(--card-foreground);
|
|
121
|
+
--color-card-muted: var(--card-muted);
|
|
122
|
+
--color-card-border: var(--card-border);
|
|
123
|
+
--color-popover: var(--popover);
|
|
124
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
125
|
+
--color-primary: var(--primary);
|
|
126
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
127
|
+
--color-secondary: var(--secondary);
|
|
128
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
129
|
+
--color-muted: var(--muted);
|
|
130
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
131
|
+
--color-accent: var(--accent);
|
|
132
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
133
|
+
--color-destructive: var(--destructive);
|
|
134
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
135
|
+
--color-border: var(--border);
|
|
136
|
+
--color-input: var(--input);
|
|
137
|
+
--color-input-background: var(--input-background);
|
|
138
|
+
--color-ring: var(--ring);
|
|
139
|
+
--color-chart-1: var(--chart-1);
|
|
140
|
+
--color-chart-2: var(--chart-2);
|
|
141
|
+
--color-chart-3: var(--chart-3);
|
|
142
|
+
--color-chart-4: var(--chart-4);
|
|
143
|
+
--color-chart-5: var(--chart-5);
|
|
144
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
145
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
146
|
+
--radius-lg: var(--radius);
|
|
147
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
148
|
+
--radius-button: var(--radius-button);
|
|
149
|
+
--radius-card: var(--radius-card);
|
|
150
|
+
--elevation-sm: var(--elevation-sm);
|
|
151
|
+
--color-sidebar: var(--sidebar);
|
|
152
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
153
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
154
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
155
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
156
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
157
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
158
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
@layer base {
|
|
162
|
+
* {
|
|
163
|
+
@apply border-border outline-ring/50;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
body {
|
|
167
|
+
@apply bg-background text-foreground;
|
|
168
|
+
font-family: var(--font-family-sans);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
|
|
174
|
+
*/
|
|
175
|
+
@layer base {
|
|
176
|
+
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
|
|
177
|
+
h1 {
|
|
178
|
+
font-family: var(--font-family-sans);
|
|
179
|
+
font-size: var(--text-2xl);
|
|
180
|
+
font-weight: var(--font-weight-medium);
|
|
181
|
+
line-height: 1.5;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
h2 {
|
|
185
|
+
font-family: var(--font-family-sans);
|
|
186
|
+
font-size: var(--text-xl);
|
|
187
|
+
font-weight: var(--font-weight-medium);
|
|
188
|
+
line-height: 1.5;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
h3 {
|
|
192
|
+
font-family: var(--font-family-sans);
|
|
193
|
+
font-size: var(--text-lg);
|
|
194
|
+
font-weight: var(--font-weight-medium);
|
|
195
|
+
line-height: 1.5;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
h4 {
|
|
199
|
+
font-family: var(--font-family-sans);
|
|
200
|
+
font-size: var(--text-base);
|
|
201
|
+
font-weight: var(--font-weight-medium);
|
|
202
|
+
line-height: 1.5;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
p {
|
|
206
|
+
font-family: var(--font-family-sans);
|
|
207
|
+
font-size: var(--text-sm);
|
|
208
|
+
font-weight: var(--font-weight-normal);
|
|
209
|
+
line-height: 1.5;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
label {
|
|
213
|
+
font-family: var(--font-family-sans);
|
|
214
|
+
font-size: var(--text-xs);
|
|
215
|
+
font-weight: var(--font-weight-normal);
|
|
216
|
+
line-height: 1.5;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
button {
|
|
220
|
+
font-family: var(--font-family-sans);
|
|
221
|
+
font-size: var(--text-base);
|
|
222
|
+
font-weight: var(--font-weight-medium);
|
|
223
|
+
line-height: 1.5;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
input {
|
|
227
|
+
font-family: var(--font-family-sans);
|
|
228
|
+
font-size: var(--text-sm);
|
|
229
|
+
font-weight: var(--font-weight-normal);
|
|
230
|
+
line-height: 1.5;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
}
|