dolphincss 1.0.1
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.md +33 -0
- package/dist/dolphin-css.css +1 -0
- package/dist/index.html +14 -0
- package/dist/index.js +49 -0
- package/eslint.config.js +29 -0
- package/index.html +13 -0
- package/package.json +41 -0
- package/src/App.css +362 -0
- package/src/App.jsx +16 -0
- package/src/index.css +29 -0
- package/src/main.jsx +11 -0
- package/vite.config.js +17 -0
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dolphincss",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "DolphinCSS - World-class TailwindCSS + React component library",
|
|
6
|
+
"main": "dolphin-css.css",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"dev": "vite",
|
|
9
|
+
"build:css": "tailwindcss -i ./src/dolphin-css/App.css -o ./dolphin-css.css --minify",
|
|
10
|
+
"watch:css": "tailwindcss -i ./src/dolphin-css/App.css -o ./dolphin-css.css --watch",
|
|
11
|
+
"build": "vite build && npm run build:css",
|
|
12
|
+
"lint": "eslint .",
|
|
13
|
+
"preview": "vite preview"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [
|
|
16
|
+
"css",
|
|
17
|
+
"tailwind",
|
|
18
|
+
"react",
|
|
19
|
+
"components",
|
|
20
|
+
"dolphin-theme"
|
|
21
|
+
],
|
|
22
|
+
"author": "Shankar Phunyal",
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@tailwindcss/vite": "^4.1.16",
|
|
26
|
+
"react": "^19.1.1",
|
|
27
|
+
"react-dom": "^19.1.1",
|
|
28
|
+
"tailwindcss": "^4.1.16"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@eslint/js": "^9.36.0",
|
|
32
|
+
"@types/react": "^19.1.16",
|
|
33
|
+
"@types/react-dom": "^19.1.9",
|
|
34
|
+
"@vitejs/plugin-react": "^5.0.4",
|
|
35
|
+
"eslint": "^9.36.0",
|
|
36
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
37
|
+
"eslint-plugin-react-refresh": "^0.4.22",
|
|
38
|
+
"globals": "^16.4.0",
|
|
39
|
+
"vite": "^7.1.7"
|
|
40
|
+
}
|
|
41
|
+
}
|
package/src/App.css
ADDED
|
@@ -0,0 +1,362 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
|
|
3
|
+
/* ================= Theme Variables ================= */
|
|
4
|
+
:root {
|
|
5
|
+
/* Primary Colors */
|
|
6
|
+
--color-primary: oklch(59.784% 0.09929 211.009);
|
|
7
|
+
--color-primary-dark: oklch(55% 0.11 210);
|
|
8
|
+
--color-secondary: oklch(65% 0.08 280); /* Added for badge.secondary */
|
|
9
|
+
|
|
10
|
+
/* Semantic Colors */
|
|
11
|
+
--color-success: oklch(70% 0.12 150);
|
|
12
|
+
--color-warning: oklch(80% 0.15 75);
|
|
13
|
+
--color-danger: oklch(65% 0.15 25);
|
|
14
|
+
--color-info: oklch(70% 0.10 250);
|
|
15
|
+
|
|
16
|
+
/* Neutral Colors */
|
|
17
|
+
--color-surface: oklch(99% 0.01 200);
|
|
18
|
+
--color-text: oklch(25% 0.03 230);
|
|
19
|
+
--color-text-muted: oklch(60% 0.02 230); /* Added for nav-search */
|
|
20
|
+
--color-border: oklch(90% 0.02 210);
|
|
21
|
+
--color-shadow: oklch(0% 0 0 / 0.2);
|
|
22
|
+
|
|
23
|
+
/* Gradients */
|
|
24
|
+
--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
|
|
25
|
+
--gradient-success: linear-gradient(135deg, var(--color-success), oklch(65% 0.12 150));
|
|
26
|
+
--gradient-warning: linear-gradient(135deg, var(--color-warning), oklch(75% 0.15 75));
|
|
27
|
+
--gradient-danger: linear-gradient(135deg, var(--color-danger), oklch(60% 0.15 25));
|
|
28
|
+
--gradient-info: linear-gradient(135deg, var(--color-info), oklch(65% 0.11 250));
|
|
29
|
+
|
|
30
|
+
/* Typography (Optional for Scalability) */
|
|
31
|
+
--font-size-base: 16px;
|
|
32
|
+
--font-family-base: 'Inter', sans-serif;
|
|
33
|
+
|
|
34
|
+
/* Spacing (Optional for Scalability) */
|
|
35
|
+
--spacing-sm: 0.5rem;
|
|
36
|
+
--spacing-md: 1rem;
|
|
37
|
+
--spacing-lg: 1.5rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-theme="dark"] {
|
|
41
|
+
/* Primary Colors */
|
|
42
|
+
--color-primary: oklch(70% 0.09 210);
|
|
43
|
+
--color-primary-dark: oklch(60% 0.10 210);
|
|
44
|
+
--color-secondary: oklch(75% 0.09 280); /* Added for dark theme */
|
|
45
|
+
|
|
46
|
+
/* Semantic Colors */
|
|
47
|
+
--color-success: oklch(75% 0.13 150);
|
|
48
|
+
--color-warning: oklch(85% 0.15 75);
|
|
49
|
+
--color-danger: oklch(75% 0.15 25);
|
|
50
|
+
--color-info: oklch(80% 0.11 250);
|
|
51
|
+
|
|
52
|
+
/* Neutral Colors */
|
|
53
|
+
--color-surface: oklch(20% 0.02 210);
|
|
54
|
+
--color-text: oklch(95% 0.01 210);
|
|
55
|
+
--color-text-muted: oklch(70% 0.02 210); /* Added for dark theme */
|
|
56
|
+
--color-border: oklch(40% 0.03 210);
|
|
57
|
+
--color-shadow: oklch(0% 0 0 / 0.3);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* ================= Global Components ================= */
|
|
61
|
+
@layer components {
|
|
62
|
+
/* ===== Button Sizes ===== */
|
|
63
|
+
.sm { @apply text-xs px-3 py-1.5; }
|
|
64
|
+
.md { @apply text-sm px-4 py-2; }
|
|
65
|
+
.lg { @apply text-base px-5 py-3; }
|
|
66
|
+
|
|
67
|
+
/* ===== Button Variants ===== */
|
|
68
|
+
.filled { @apply font-medium rounded-md inline-flex items-center justify-center select-none transition-all duration-200; }
|
|
69
|
+
.outlined { @apply border rounded-md bg-transparent inline-flex items-center justify-center select-none transition-all duration-200; }
|
|
70
|
+
.plain { @apply bg-transparent inline-flex items-center justify-center select-none transition-all duration-200; }
|
|
71
|
+
|
|
72
|
+
/* ===== Button Colors ===== */
|
|
73
|
+
.primary.filled { background-color: var(--color-primary); color: var(--color-text) !important; }
|
|
74
|
+
.primary.outlined { border: 2px solid var(--color-primary); color: var(--color-primary) !important; }
|
|
75
|
+
.primary.plain { color: var(--color-primary) !important; }
|
|
76
|
+
|
|
77
|
+
.secondary.filled { background-color: var(--color-secondary); color: var(--color-text) !important; }
|
|
78
|
+
.secondary.outlined { border: 2px solid var(--color-secondary); color: var(--color-secondary) !important; }
|
|
79
|
+
.secondary.plain { color: var(--color-secondary) !important; }
|
|
80
|
+
|
|
81
|
+
.success.filled { background-color: var(--color-success); color: var(--color-surface) !important; }
|
|
82
|
+
.success.outlined { border: 2px solid var(--color-success); color: var(--color-success) !important; }
|
|
83
|
+
.success.plain { color: var(--color-success) !important; }
|
|
84
|
+
|
|
85
|
+
.warning.filled { background-color: var(--color-warning); color: var(--color-text) !important; }
|
|
86
|
+
.warning.outlined { border: 2px solid var(--color-warning); color: var(--color-warning) !important; }
|
|
87
|
+
.warning.plain { color: var(--color-warning) !important; }
|
|
88
|
+
|
|
89
|
+
.danger.filled { background-color: var(--color-danger); color: var(--color-surface) !important; }
|
|
90
|
+
.danger.outlined { border: 2px solid var(--color-danger); color: var(--color-danger) !important; }
|
|
91
|
+
.danger.plain { color: var(--color-danger) !important; }
|
|
92
|
+
|
|
93
|
+
.info.filled { background-color: var(--color-info); color: var(--color-surface) !important; }
|
|
94
|
+
.info.outlined { border: 2px solid var(--color-info); color: var(--color-info) !important; }
|
|
95
|
+
.info.plain { color: var(--color-info) !important; }
|
|
96
|
+
|
|
97
|
+
/* Button Hover/Focus/Disabled */
|
|
98
|
+
.filled:hover, .outlined:hover, .plain:hover { opacity: 0.9; }
|
|
99
|
+
.filled:focus-visible, .outlined:focus-visible, .plain:focus-visible {
|
|
100
|
+
@apply ring-2 ring-offset-2 ring-[color:var(--color-border)];
|
|
101
|
+
}
|
|
102
|
+
.filled:disabled, .outlined:disabled, .plain:disabled {
|
|
103
|
+
@apply opacity-50 cursor-not-allowed pointer-events-none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* ===== Circle System ===== */
|
|
107
|
+
.circle {
|
|
108
|
+
@apply rounded-full shadow-md hover:shadow-lg inline-flex items-center justify-center select-none transition-shadow duration-200 cursor-pointer;
|
|
109
|
+
background-color: transparent;
|
|
110
|
+
color: var(--color-text);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.circle.sm { @apply w-8 h-8 text-sm; }
|
|
114
|
+
.circle.md { @apply w-12 h-12 text-base; }
|
|
115
|
+
.circle.lg { @apply w-16 h-16 text-lg; }
|
|
116
|
+
|
|
117
|
+
.circle.primary.filled { background-color: var(--color-primary); color: var(--color-text) !important; }
|
|
118
|
+
.circle.secondary.filled { background-color: var(--color-secondary); color: var(--color-text) !important; }
|
|
119
|
+
.circle.success.filled { background-color: var(--color-success); color: var(--color-surface) !important; }
|
|
120
|
+
.circle.warning.filled { background-color: var(--color-warning); color: var(--color-surface) !important; }
|
|
121
|
+
.circle.danger.filled { background-color: var(--color-danger); color: var(--color-surface) !important; }
|
|
122
|
+
.circle.info.filled { background-color: var(--color-info); color: var(--color-surface) !important; }
|
|
123
|
+
|
|
124
|
+
.circle.primary.outlined { border: 2px solid var(--color-primary); color: var(--color-primary) !important; }
|
|
125
|
+
.circle.secondary.outlined { border: 2px solid var(--color-secondary); color: var(--color-secondary) !important; }
|
|
126
|
+
.circle.success.outlined { border: 2px solid var(--color-success); color: var(--color-success) !important; }
|
|
127
|
+
.circle.warning.outlined { border: 2px solid var(--color-warning); color: var(--color-warning) !important; }
|
|
128
|
+
.circle.danger.outlined { border: 2px solid var(--color-danger); color: var(--color-danger) !important; }
|
|
129
|
+
.circle.info.outlined { border: 2px solid var(--color-info); color: var(--color-info) !important; }
|
|
130
|
+
|
|
131
|
+
.circle.primary.plain,
|
|
132
|
+
.circle.secondary.plain,
|
|
133
|
+
.circle.success.plain,
|
|
134
|
+
.circle.warning.plain,
|
|
135
|
+
.circle.danger.plain,
|
|
136
|
+
.circle.info.plain { background-color: transparent; color: var(--color-text) !important; }
|
|
137
|
+
|
|
138
|
+
.circle:hover { opacity: 0.9; }
|
|
139
|
+
.circle:disabled { @apply opacity-50 cursor-not-allowed pointer-events-none; }
|
|
140
|
+
|
|
141
|
+
/* ===== Radio System ===== */
|
|
142
|
+
.radio-group { @apply flex flex-col gap-2; }
|
|
143
|
+
.radio-item { @apply flex items-center gap-2 cursor-pointer select-none relative; }
|
|
144
|
+
.radio-item input[type="radio"] {
|
|
145
|
+
@apply appearance-none w-5 h-5 rounded-full border border-[color:var(--color-border)] checked:bg-[color:var(--color-primary)] checked:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary)] transition-colors duration-200;
|
|
146
|
+
}
|
|
147
|
+
.radio-label { @apply text-[color:var(--color-text)] select-none; }
|
|
148
|
+
.radio-item input[type="radio"]:disabled + .radio-label {
|
|
149
|
+
@apply opacity-50 cursor-not-allowed;
|
|
150
|
+
}
|
|
151
|
+
.radio-group.horizontal { @apply flex-row gap-4; }
|
|
152
|
+
|
|
153
|
+
/* ===== Checkbox System ===== */
|
|
154
|
+
input[type="checkbox"] {
|
|
155
|
+
@apply w-5 h-5 m-0 align-middle border-2 rounded border-[color:var(--color-border)] bg-[color:var(--color-surface)] cursor-pointer relative transition-all duration-200 appearance-none;
|
|
156
|
+
}
|
|
157
|
+
input[type="checkbox"]::after {
|
|
158
|
+
content: '';
|
|
159
|
+
@apply absolute hidden top-[3px] left-[6px] w-1 h-2 border-r-2 border-b-2 border-[color:var(--color-surface)] rotate-45;
|
|
160
|
+
}
|
|
161
|
+
input[type="checkbox"]:checked::after { @apply block; }
|
|
162
|
+
input[type="checkbox"].primary:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
|
|
163
|
+
input[type="checkbox"].secondary:checked { background-color: var(--color-secondary); border-color: var(--color-secondary); }
|
|
164
|
+
input[type="checkbox"].success:checked { background-color: var(--color-success); border-color: var(--color-success); }
|
|
165
|
+
input[type="checkbox"].warning:checked { background-color: var(--color-warning); border-color: var(--color-warning); }
|
|
166
|
+
input[type="checkbox"].danger:checked { background-color: var(--color-danger); border-color: var(--color-danger); }
|
|
167
|
+
input[type="checkbox"].info:checked { background-color: var(--color-info); border-color: var(--color-info); }
|
|
168
|
+
input[type="checkbox"]:disabled { @apply opacity-50 cursor-not-allowed; }
|
|
169
|
+
|
|
170
|
+
/* ===== Select System ===== */
|
|
171
|
+
.select-wrapper { @apply relative inline-block w-full; }
|
|
172
|
+
.select {
|
|
173
|
+
@apply w-full p-2 text-base rounded-md border-2 border-[color:var(--color-border)] bg-[color:var(--color-surface)] text-[color:var(--color-text)] cursor-pointer appearance-none transition-all duration-200;
|
|
174
|
+
}
|
|
175
|
+
.select:focus {
|
|
176
|
+
@apply outline-none border-[color:var(--color-primary)] ring-2 ring-[color:var(--color-primary)]/10;
|
|
177
|
+
}
|
|
178
|
+
.select:disabled {
|
|
179
|
+
@apply opacity-50 cursor-not-allowed bg-[color:var(--color-surface)] text-[color:var(--color-border)];
|
|
180
|
+
}
|
|
181
|
+
.select.primary { background-color: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }
|
|
182
|
+
.select.secondary { background-color: var(--color-secondary); color: var(--color-surface); border-color: var(--color-secondary); }
|
|
183
|
+
.select.success { background-color: var(--color-success); color: var(--color-surface); border-color: var(--color-success); }
|
|
184
|
+
.select.warning { background-color: var(--color-warning); color: var(--color-surface); border-color: var(--color-warning); }
|
|
185
|
+
.select.danger { background-color: var(--color-danger); color: var(--color-surface); border-color: var(--color-danger); }
|
|
186
|
+
.select.info { background-color: var(--color-info); color: var(--color-surface); border-color: var(--color-info); }
|
|
187
|
+
.select.gradient.primary { background-image: var(--gradient-primary); color: var(--color-surface); border: none; }
|
|
188
|
+
.select-wrapper::after {
|
|
189
|
+
content: '';
|
|
190
|
+
@apply absolute top-1/2 right-4 w-2 h-2 border-r-2 border-b-2 border-[color:var(--color-surface)] -translate-y-1/2 rotate-45 pointer-events-none;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* ===== Gradient Background ===== */
|
|
194
|
+
.gradient-bg {
|
|
195
|
+
@apply transition-all duration-500 rounded-md bg-no-repeat text-[color:var(--color-surface)];
|
|
196
|
+
background-size: 200% 200%;
|
|
197
|
+
}
|
|
198
|
+
.gradient-bg.primary { background-image: var(--gradient-primary) !important; }
|
|
199
|
+
.gradient-bg.success { background-image: var(--gradient-success) !important; }
|
|
200
|
+
.gradient-bg.warning { background-image: var(--gradient-warning) !important; }
|
|
201
|
+
.gradient-bg.danger { background-image: var(--gradient-danger) !important; }
|
|
202
|
+
.gradient-bg.info { background-image: var(--gradient-info) !important; }
|
|
203
|
+
|
|
204
|
+
/* ===== Card System ===== */
|
|
205
|
+
.card {
|
|
206
|
+
@apply rounded-md shadow-md p-4 transition-all duration-200 bg-[color:var(--color-surface)] text-[color:var(--color-text)];
|
|
207
|
+
}
|
|
208
|
+
.card.primary { background-color: var(--color-primary); color: var(--color-surface); }
|
|
209
|
+
.card.secondary { background-color: var(--color-secondary); color: var(--color-surface); }
|
|
210
|
+
.card.success { background-color: var(--color-success); color: var(--color-surface); }
|
|
211
|
+
.card.warning { background-color: var(--color-warning); color: var(--color-surface); }
|
|
212
|
+
.card.danger { background-color: var(--color-danger); color: var(--color-surface); }
|
|
213
|
+
.card.info { background-color: var(--color-info); color: var(--color-surface); }
|
|
214
|
+
.card.gradient.primary { background-image: var(--gradient-primary); color: var(--color-surface); }
|
|
215
|
+
.card.gradient.success { background-image: var(--gradient-success); color: var(--color-surface); }
|
|
216
|
+
.card.gradient.warning { background-image: var(--gradient-warning); color: var(--color-surface); }
|
|
217
|
+
.card.gradient.danger { background-image: var(--gradient-danger); color: var(--color-surface); }
|
|
218
|
+
.card.gradient.info { background-image: var(--gradient-info); color: var(--color-surface); }
|
|
219
|
+
|
|
220
|
+
/* ===== Table System ===== */
|
|
221
|
+
.table {
|
|
222
|
+
@apply w-full border-collapse transition-all duration-200 text-[color:var(--color-text)];
|
|
223
|
+
}
|
|
224
|
+
.table th, .table td {
|
|
225
|
+
@apply px-4 py-2 border border-[color:var(--color-border)] text-left font-medium transition-all duration-200;
|
|
226
|
+
}
|
|
227
|
+
.table.filled th, .table.filled td { background-color: var(--color-surface); color: var(--color-text); }
|
|
228
|
+
.table.outlined th, .table.outlined td {
|
|
229
|
+
@apply border-2 border-[color:var(--color-border)] bg-transparent text-[color:var(--color-text)];
|
|
230
|
+
}
|
|
231
|
+
.table.primary.filled th, .table.primary.filled td { background-color: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }
|
|
232
|
+
.table.secondary.filled th, .table.secondary.filled td { background-color: var(--color-secondary); color: var(--color-surface); border-color: var(--color-secondary); }
|
|
233
|
+
.table.success.filled th, .table.success.filled td { background-color: var(--color-success); color: var(--color-surface); border-color: var(--color-success); }
|
|
234
|
+
.table.warning.filled th, .table.warning.filled td { background-color: var(--color-warning); color: var(--color-surface); border-color: var(--color-warning); }
|
|
235
|
+
.table.danger.filled th, .table.danger.filled td { background-color: var(--color-danger); color: var(--color-surface); border-color: var(--color-danger); }
|
|
236
|
+
.table.info.filled th, .table.info.filled td { background-color: var(--color-info); color: var(--color-surface); border-color: var(--color-info); }
|
|
237
|
+
.table.striped tbody tr:nth-child(even) { background-color: oklch(94% 0.03 210); }
|
|
238
|
+
[data-theme="dark"] .table.striped tbody tr:nth-child(even) { background-color: oklch(25% 0.03 210); }
|
|
239
|
+
.table tbody tr:hover { opacity: 0.95; }
|
|
240
|
+
.table.filled.primary tbody tr:hover { background-color: oklch(55% 0.12 210); }
|
|
241
|
+
.table.filled.success tbody tr:hover { background-color: oklch(60% 0.13 150); }
|
|
242
|
+
.table.filled.warning tbody tr:hover { background-color: oklch(65% 0.15 75); }
|
|
243
|
+
.table.filled.danger tbody tr:hover { background-color: oklch(55% 0.15 25); }
|
|
244
|
+
.table.filled.info tbody tr:hover { background-color: oklch(60% 0.12 250); }
|
|
245
|
+
[data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: var(--color-border); color: var(--color-text); }
|
|
246
|
+
[data-theme="dark"] .table.filled th, [data-theme="dark"] .table.filled td { background-color: var(--color-surface); color: var(--color-text); }
|
|
247
|
+
.table-responsive { @apply overflow-x-auto w-full; }
|
|
248
|
+
|
|
249
|
+
/* ===== Navigation System ===== */
|
|
250
|
+
.nav-container {
|
|
251
|
+
@apply w-full flex items-center justify-between px-4 py-3 bg-[color:var(--color-surface)] shadow-md transition-all duration-200;
|
|
252
|
+
}
|
|
253
|
+
.nav-brand { @apply text-lg font-bold text-[color:var(--color-text)] select-none; }
|
|
254
|
+
.nav-ul { @apply flex gap-4 list-none m-0 p-0; }
|
|
255
|
+
.nav-ul-left { @apply flex-1 flex items-center; }
|
|
256
|
+
.nav-ul-right { @apply flex gap-4 items-center; }
|
|
257
|
+
.nav-li { @apply relative cursor-pointer transition-colors duration-200; }
|
|
258
|
+
.nav-li a {
|
|
259
|
+
@apply px-3 py-2 rounded-md text-[color:var(--color-text)] hover:bg-[color:var(--color-primary)] hover:text-[color:var(--color-surface)] transition-all duration-200;
|
|
260
|
+
}
|
|
261
|
+
.nav-li.active a { @apply bg-[color:var(--color-primary)] text-[color:var(--color-surface)]; }
|
|
262
|
+
.nav-dropdown {
|
|
263
|
+
@apply absolute top-full left-0 mt-1 bg-[color:var(--color-surface)] shadow-lg rounded-md min-w-[8rem] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50;
|
|
264
|
+
}
|
|
265
|
+
.nav-dropdown li {
|
|
266
|
+
@apply px-4 py-2 whitespace-nowrap hover:bg-[color:var(--color-primary)] hover:text-[color:var(--color-surface)];
|
|
267
|
+
}
|
|
268
|
+
.nav-toggle { @apply block md:hidden cursor-pointer p-2 rounded-md hover:bg-[color:var(--color-border)] transition-all duration-200; }
|
|
269
|
+
.nav-mobile { @apply hidden flex-col gap-2 mt-2 md:hidden; }
|
|
270
|
+
.nav-mobile.show { @apply flex; }
|
|
271
|
+
.nav-search-container { @apply relative flex items-center w-full max-w-xs transition-all duration-300; }
|
|
272
|
+
.nav-search-input {
|
|
273
|
+
@apply w-full pl-10 pr-10 py-2 rounded-full bg-[color:var(--color-surface)] border border-[color:var(--color-border)] text-[color:var(--color-text)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-primary)] focus:border-transparent transition-all duration-300 placeholder:text-[color:var(--color-text-muted)];
|
|
274
|
+
}
|
|
275
|
+
.nav-search-icon {
|
|
276
|
+
@apply absolute left-3 top-1/2 -translate-y-1/2 text-[color:var(--color-text-muted)] w-5 h-5;
|
|
277
|
+
}
|
|
278
|
+
.nav-search-clear {
|
|
279
|
+
@apply absolute right-3 top-1/2 -translate-y-1/2 text-[color:var(--color-text-muted)] w-5 h-5 cursor-pointer opacity-0 transition-opacity duration-200 hover:text-[color:var(--color-primary)];
|
|
280
|
+
}
|
|
281
|
+
.nav-search-input:not(:placeholder-shown) + .nav-search-clear { @apply opacity-100; }
|
|
282
|
+
@media (max-width: 768px) {
|
|
283
|
+
.nav-search-container { @apply max-w-full mt-2; }
|
|
284
|
+
.nav-search-input { @apply py-1.5 text-sm; }
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/* ===== Badge System ===== */
|
|
288
|
+
.badge {
|
|
289
|
+
@apply inline-flex items-center justify-center font-medium select-none rounded-full transition-all duration-200;
|
|
290
|
+
}
|
|
291
|
+
.badge.filled { @apply text-[color:var(--color-surface)]; }
|
|
292
|
+
.badge.outlined { @apply border-2 border-current bg-transparent; }
|
|
293
|
+
.badge.primary { @apply bg-[color:var(--color-primary)] text-[color:var(--color-surface)]; }
|
|
294
|
+
.badge.secondary { @apply bg-[color:var(--color-secondary)] text-[color:var(--color-surface)]; }
|
|
295
|
+
.badge.success { @apply bg-[color:var(--color-success)] text-[color:var(--color-surface)]; }
|
|
296
|
+
.badge.warning { @apply bg-[color:var(--color-warning)] text-[color:var(--color-surface)]; }
|
|
297
|
+
.badge.danger { @apply bg-[color:var(--color-danger)] text-[color:var(--color-surface)]; }
|
|
298
|
+
.badge.primary.outlined { @apply border-[color:var(--color-primary)] text-[color:var(--color-primary)] bg-transparent; }
|
|
299
|
+
.badge.secondary.outlined { @apply border-[color:var(--color-secondary)] text-[color:var(--color-secondary)] bg-transparent; }
|
|
300
|
+
.badge.success.outlined { @apply border-[color:var(--color-success)] text-[color:var(--color-success)] bg-transparent; }
|
|
301
|
+
.badge.warning.outlined { @apply border-[color:var(--color-warning)] text-[color:var(--color-warning)] bg-transparent; }
|
|
302
|
+
.badge.danger.outlined { @apply border-[color:var(--color-danger)] text-[color:var(--color-danger)] bg-transparent; }
|
|
303
|
+
.badge.sm { @apply text-xs px-2 py-1; }
|
|
304
|
+
.badge.md { @apply text-sm px-3 py-1.5; }
|
|
305
|
+
.badge.lg { @apply text-base px-4 py-2; }
|
|
306
|
+
.badge-corner { @apply absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2; }
|
|
307
|
+
|
|
308
|
+
/* ===== Layout System ===== */
|
|
309
|
+
.row { @apply flex flex-wrap gap-4; }
|
|
310
|
+
.col { @apply flex-1 min-w-[200px]; }
|
|
311
|
+
.col-1 { @apply flex-[1_1_8%]; }
|
|
312
|
+
.col-2 { @apply flex-[1_1_16%]; }
|
|
313
|
+
.col-3 { @apply flex-[1_1_25%]; }
|
|
314
|
+
.col-4 { @apply flex-[1_1_33%]; }
|
|
315
|
+
.col-5 { @apply flex-[1_1_41%]; }
|
|
316
|
+
.col-6 { @apply flex-[1_1_50%]; }
|
|
317
|
+
.col-7 { @apply flex-[1_1_58%]; }
|
|
318
|
+
.col-8 { @apply flex-[1_1_66%]; }
|
|
319
|
+
.col-9 { @apply flex-[1_1_75%]; }
|
|
320
|
+
.col-10 { @apply flex-[1_1_83%]; }
|
|
321
|
+
.col-11 { @apply flex-[1_1_91%]; }
|
|
322
|
+
.col-12 { @apply flex-[1_1_100%]; }
|
|
323
|
+
@media (max-width: 1024px) {
|
|
324
|
+
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
|
|
325
|
+
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { @apply flex-[1_1_45%]; }
|
|
326
|
+
}
|
|
327
|
+
@media (max-width: 768px) {
|
|
328
|
+
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
|
|
329
|
+
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { @apply flex-[1_1_100%]; }
|
|
330
|
+
}
|
|
331
|
+
.gap-0 { @apply gap-0; }
|
|
332
|
+
.gap-1 { @apply gap-1; }
|
|
333
|
+
.gap-2 { @apply gap-2; }
|
|
334
|
+
.gap-3 { @apply gap-3; }
|
|
335
|
+
.gap-4 { @apply gap-4; }
|
|
336
|
+
.gap-5 { @apply gap-5; }
|
|
337
|
+
|
|
338
|
+
/* ===== KPI Card System ===== */
|
|
339
|
+
.kpi-card {
|
|
340
|
+
@apply flex items-center justify-between p-4 rounded-xl shadow-md transition-all duration-300 hover:shadow-xl bg-[color:var(--color-surface)] text-[color:var(--color-text)];
|
|
341
|
+
}
|
|
342
|
+
.kpi-card .kpi-text { @apply flex flex-col; }
|
|
343
|
+
.kpi-card .kpi-text .kpi-title { @apply text-sm text-[color:var(--color-text-muted)]; }
|
|
344
|
+
.kpi-card .kpi-text .kpi-value { @apply text-2xl font-bold text-[color:var(--color-text)]; }
|
|
345
|
+
.kpi-card .kpi-text .kpi-change { @apply text-sm font-medium mt-1; }
|
|
346
|
+
.kpi-card .kpi-text .kpi-change.positive { @apply text-[color:var(--color-success)]; }
|
|
347
|
+
.kpi-card .kpi-text .kpi-change.negative { @apply text-[color:var(--color-danger)]; }
|
|
348
|
+
.kpi-card .kpi-chart {
|
|
349
|
+
@apply w-16 h-16 rounded-xl flex items-center justify-center transition-all duration-300 shadow-inner bg-[color:var(--color-primary)] text-[color:var(--color-surface)];
|
|
350
|
+
position: relative;
|
|
351
|
+
overflow: hidden;
|
|
352
|
+
}
|
|
353
|
+
.kpi-card .kpi-chart::before {
|
|
354
|
+
content: '';
|
|
355
|
+
@apply absolute bottom-1 left-1 w-[calc(100%-0.5rem)] h-1/2 bg-gradient-to-r from-[rgba(255,255,255,0.4)] to-transparent rounded-sm;
|
|
356
|
+
}
|
|
357
|
+
.kpi-card:hover .kpi-chart { @apply shadow-lg; }
|
|
358
|
+
@media (max-width: 768px) {
|
|
359
|
+
.kpi-card { @apply flex-col items-start gap-3; }
|
|
360
|
+
.kpi-card .kpi-chart { @apply w-12 h-12; }
|
|
361
|
+
}
|
|
362
|
+
}
|
package/src/App.jsx
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import '../dist/dolphin-css.css'
|
|
3
|
+
function App() {
|
|
4
|
+
return (
|
|
5
|
+
<div className='flex flex-col'>
|
|
6
|
+
<h1 className='filled info p-4 w-full'>hello react</h1>
|
|
7
|
+
<div className='input-wrapper p-6'>
|
|
8
|
+
<label className='input-label' htmlFor="name">Enter your name</label>
|
|
9
|
+
<input className='outlined primary p-2' type="text" placeholder='name' />
|
|
10
|
+
<button className='circle primary filled lg'>hello</button>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
)
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default App
|
package/src/index.css
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@theme {
|
|
3
|
+
/* 🌞 Light Theme Defaults (Optimized Text) */
|
|
4
|
+
--color-primary: oklch(60% 0.09 210);
|
|
5
|
+
--color-secondary: oklch(65% 0.12 280);
|
|
6
|
+
--color-success: oklch(70% 0.13 150);
|
|
7
|
+
--color-warning: oklch(85% 0.15 75);
|
|
8
|
+
--color-danger: oklch(75% 0.15 25);
|
|
9
|
+
--color-info: oklch(80% 0.11 250);
|
|
10
|
+
--color-surface: oklch(98% 0.02 210); /* very light background */
|
|
11
|
+
--color-text: oklch(15% 0.02 210); /* darker than before for readability */
|
|
12
|
+
--color-border: oklch(85% 0.03 210); /* slightly darker than surface */
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
/* 🌚 Dark Mode Overrides */
|
|
17
|
+
@media (prefers-color-scheme: dark) {
|
|
18
|
+
:root {
|
|
19
|
+
--color-primary: oklch(70% 0.09 210);
|
|
20
|
+
--color-secondary: oklch(70% 0.12 280);
|
|
21
|
+
--color-success: oklch(75% 0.13 150);
|
|
22
|
+
--color-warning: oklch(85% 0.15 75);
|
|
23
|
+
--color-danger: oklch(75% 0.15 25);
|
|
24
|
+
--color-info: oklch(80% 0.11 250);
|
|
25
|
+
--color-surface: oklch(20% 0.02 210);
|
|
26
|
+
--color-text: oklch(95% 0.01 210);
|
|
27
|
+
--color-border: oklch(40% 0.05 210);
|
|
28
|
+
}
|
|
29
|
+
}
|
package/src/main.jsx
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { StrictMode } from 'react'
|
|
3
|
+
import { createRoot } from 'react-dom/client'
|
|
4
|
+
import './index.css'
|
|
5
|
+
import App from './App.jsx'
|
|
6
|
+
|
|
7
|
+
createRoot(document.getElementById('root')).render(
|
|
8
|
+
<StrictMode>
|
|
9
|
+
<App />
|
|
10
|
+
</StrictMode>,
|
|
11
|
+
)
|
package/vite.config.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
3
|
+
import react from '@vitejs/plugin-react';
|
|
4
|
+
|
|
5
|
+
export default defineConfig({
|
|
6
|
+
plugins: [tailwindcss(), react()],
|
|
7
|
+
build: {
|
|
8
|
+
outDir: 'dist', // रूटमा ./dist फोल्डर
|
|
9
|
+
rollupOptions: {
|
|
10
|
+
output: {
|
|
11
|
+
assetFileNames: 'dolphin-css.css', // CSS फाइलको नाम
|
|
12
|
+
entryFileNames: 'index.js', // JS फाइलको नाम
|
|
13
|
+
chunkFileNames: 'chunks/[name].js', // चंक फाइलहरू
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
});
|