@moontra/moonui-pro 2.3.5 → 2.3.7
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.mjs +67 -38
- package/package.json +2 -2
- package/src/components/data-table/index.tsx +102 -76
- package/src/styles/design-system.css +303 -306
- package/src/styles/tailwind.css +6 -5
|
@@ -1,320 +1,317 @@
|
|
|
1
1
|
/* MoonUI Design System - Advanced Tokens */
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
/* Background Layers */
|
|
8
|
-
--bg-base: var(--background);
|
|
9
|
-
--bg-subtle: var(--gray-50);
|
|
10
|
-
--bg-muted: var(--gray-100);
|
|
11
|
-
--bg-emphasis: var(--gray-200);
|
|
12
|
-
--bg-inverse: var(--foreground);
|
|
13
|
-
|
|
14
|
-
/* Surface Colors */
|
|
15
|
-
--surface-base: var(--background);
|
|
16
|
-
--surface-overlay: var(--gray-50);
|
|
17
|
-
--surface-raised: var(--background);
|
|
18
|
-
--surface-sunken: var(--gray-100);
|
|
19
|
-
|
|
20
|
-
/* Text Colors */
|
|
21
|
-
--text-primary: var(--foreground);
|
|
22
|
-
--text-secondary: var(--gray-600);
|
|
23
|
-
--text-tertiary: var(--gray-500);
|
|
24
|
-
--text-disabled: var(--gray-400);
|
|
25
|
-
--text-inverse: var(--background);
|
|
26
|
-
--text-link: var(--primary);
|
|
27
|
-
--text-link-hover: var(--primary-hover);
|
|
28
|
-
|
|
29
|
-
/* Brand Colors */
|
|
30
|
-
--brand-primary: var(--primary);
|
|
31
|
-
--brand-primary-hover: var(--primary-hover);
|
|
32
|
-
--brand-primary-active: var(--primary-active);
|
|
33
|
-
--brand-secondary: var(--secondary);
|
|
34
|
-
|
|
35
|
-
/* Interactive States */
|
|
36
|
-
--state-hover: var(--gray-100);
|
|
37
|
-
--state-active: var(--gray-200);
|
|
38
|
-
--state-selected: var(--primary);
|
|
39
|
-
--state-disabled: var(--gray-300);
|
|
40
|
-
--state-focus: var(--primary);
|
|
41
|
-
|
|
42
|
-
/* Feedback Colors */
|
|
43
|
-
--feedback-success: var(--success);
|
|
44
|
-
--feedback-success-light: 142 71% 95%;
|
|
45
|
-
--feedback-success-dark: 142 71% 35%;
|
|
46
|
-
--feedback-warning: var(--warning);
|
|
47
|
-
--feedback-warning-light: 38 92% 95%;
|
|
48
|
-
--feedback-warning-dark: 38 92% 40%;
|
|
49
|
-
--feedback-error: var(--error);
|
|
50
|
-
--feedback-error-light: 0 84% 95%;
|
|
51
|
-
--feedback-error-dark: 0 84% 50%;
|
|
52
|
-
--feedback-info: 217 91% 60%;
|
|
53
|
-
--feedback-info-light: 217 91% 95%;
|
|
54
|
-
--feedback-info-dark: 217 91% 50%;
|
|
55
|
-
|
|
56
|
-
/* Border Colors */
|
|
57
|
-
--border-default: var(--border);
|
|
58
|
-
--border-subtle: var(--gray-200);
|
|
59
|
-
--border-strong: var(--gray-400);
|
|
60
|
-
--border-interactive: var(--primary);
|
|
61
|
-
--border-error: var(--error);
|
|
62
|
-
--border-success: var(--success);
|
|
63
|
-
--border-warning: var(--warning);
|
|
64
|
-
|
|
65
|
-
/* ===== Shadow System ===== */
|
|
66
|
-
|
|
67
|
-
/* Elevation Tokens */
|
|
68
|
-
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
69
|
-
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
70
|
-
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
71
|
-
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
72
|
-
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
73
|
-
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
74
|
-
|
|
75
|
-
/* Colored Shadows */
|
|
76
|
-
--shadow-primary: 0 4px 14px 0 hsl(var(--primary) / 0.3);
|
|
77
|
-
--shadow-success: 0 4px 14px 0 hsl(var(--success) / 0.3);
|
|
78
|
-
--shadow-error: 0 4px 14px 0 hsl(var(--error) / 0.3);
|
|
79
|
-
--shadow-warning: 0 4px 14px 0 hsl(var(--warning) / 0.3);
|
|
80
|
-
|
|
81
|
-
/* Inset Shadows */
|
|
82
|
-
--shadow-inner-xs: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
83
|
-
--shadow-inner-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
84
|
-
--shadow-inner-md: inset 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
85
|
-
|
|
86
|
-
/* ===== Animation Timing Functions ===== */
|
|
87
|
-
|
|
88
|
-
/* Easing Functions */
|
|
89
|
-
--ease-linear: linear;
|
|
90
|
-
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
91
|
-
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
92
|
-
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
93
|
-
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
94
|
-
--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
95
|
-
--ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
|
96
|
-
--ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
97
|
-
--ease-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
98
|
-
|
|
99
|
-
/* Duration Tokens */
|
|
100
|
-
--duration-instant: 0ms;
|
|
101
|
-
--duration-fast: 150ms;
|
|
102
|
-
--duration-normal: 250ms;
|
|
103
|
-
--duration-slow: 350ms;
|
|
104
|
-
--duration-slower: 500ms;
|
|
105
|
-
--duration-slowest: 750ms;
|
|
106
|
-
|
|
107
|
-
/* ===== Spacing System (8px Grid) ===== */
|
|
108
|
-
|
|
109
|
-
--space-0: 0;
|
|
110
|
-
--space-px: 1px;
|
|
111
|
-
--space-0\.5: 0.125rem; /* 2px */
|
|
112
|
-
--space-1: 0.25rem; /* 4px */
|
|
113
|
-
--space-1\.5: 0.375rem; /* 6px */
|
|
114
|
-
--space-2: 0.5rem; /* 8px */
|
|
115
|
-
--space-2\.5: 0.625rem; /* 10px */
|
|
116
|
-
--space-3: 0.75rem; /* 12px */
|
|
117
|
-
--space-3\.5: 0.875rem; /* 14px */
|
|
118
|
-
--space-4: 1rem; /* 16px */
|
|
119
|
-
--space-5: 1.25rem; /* 20px */
|
|
120
|
-
--space-6: 1.5rem; /* 24px */
|
|
121
|
-
--space-7: 1.75rem; /* 28px */
|
|
122
|
-
--space-8: 2rem; /* 32px */
|
|
123
|
-
--space-9: 2.25rem; /* 36px */
|
|
124
|
-
--space-10: 2.5rem; /* 40px */
|
|
125
|
-
--space-11: 2.75rem; /* 44px */
|
|
126
|
-
--space-12: 3rem; /* 48px */
|
|
127
|
-
--space-14: 3.5rem; /* 56px */
|
|
128
|
-
--space-16: 4rem; /* 64px */
|
|
129
|
-
--space-20: 5rem; /* 80px */
|
|
130
|
-
--space-24: 6rem; /* 96px */
|
|
131
|
-
--space-28: 7rem; /* 112px */
|
|
132
|
-
--space-32: 8rem; /* 128px */
|
|
133
|
-
--space-36: 9rem; /* 144px */
|
|
134
|
-
--space-40: 10rem; /* 160px */
|
|
135
|
-
--space-44: 11rem; /* 176px */
|
|
136
|
-
--space-48: 12rem; /* 192px */
|
|
137
|
-
--space-52: 13rem; /* 208px */
|
|
138
|
-
--space-56: 14rem; /* 224px */
|
|
139
|
-
--space-60: 15rem; /* 240px */
|
|
140
|
-
--space-64: 16rem; /* 256px */
|
|
141
|
-
--space-72: 18rem; /* 288px */
|
|
142
|
-
--space-80: 20rem; /* 320px */
|
|
143
|
-
--space-96: 24rem; /* 384px */
|
|
144
|
-
|
|
145
|
-
/* ===== Typography Scale (Perfect Fourth) ===== */
|
|
146
|
-
|
|
147
|
-
/* Font Sizes */
|
|
148
|
-
--text-2xs: 0.625rem; /* 10px */
|
|
149
|
-
--text-xs: 0.75rem; /* 12px */
|
|
150
|
-
--text-sm: 0.875rem; /* 14px */
|
|
151
|
-
--text-base: 1rem; /* 16px */
|
|
152
|
-
--text-lg: 1.125rem; /* 18px */
|
|
153
|
-
--text-xl: 1.25rem; /* 20px */
|
|
154
|
-
--text-2xl: 1.5rem; /* 24px */
|
|
155
|
-
--text-3xl: 1.875rem; /* 30px */
|
|
156
|
-
--text-4xl: 2.25rem; /* 36px */
|
|
157
|
-
--text-5xl: 3rem; /* 48px */
|
|
158
|
-
--text-6xl: 3.75rem; /* 60px */
|
|
159
|
-
--text-7xl: 4.5rem; /* 72px */
|
|
160
|
-
--text-8xl: 6rem; /* 96px */
|
|
161
|
-
--text-9xl: 8rem; /* 128px */
|
|
162
|
-
|
|
163
|
-
/* Line Heights */
|
|
164
|
-
--leading-none: 1;
|
|
165
|
-
--leading-tight: 1.25;
|
|
166
|
-
--leading-snug: 1.375;
|
|
167
|
-
--leading-normal: 1.5;
|
|
168
|
-
--leading-relaxed: 1.625;
|
|
169
|
-
--leading-loose: 2;
|
|
170
|
-
|
|
171
|
-
/* Letter Spacing */
|
|
172
|
-
--tracking-tighter: -0.05em;
|
|
173
|
-
--tracking-tight: -0.025em;
|
|
174
|
-
--tracking-normal: 0;
|
|
175
|
-
--tracking-wide: 0.025em;
|
|
176
|
-
--tracking-wider: 0.05em;
|
|
177
|
-
--tracking-widest: 0.1em;
|
|
178
|
-
|
|
179
|
-
/* Font Weights */
|
|
180
|
-
--font-thin: 100;
|
|
181
|
-
--font-extralight: 200;
|
|
182
|
-
--font-light: 300;
|
|
183
|
-
--font-normal: 400;
|
|
184
|
-
--font-medium: 500;
|
|
185
|
-
--font-semibold: 600;
|
|
186
|
-
--font-bold: 700;
|
|
187
|
-
--font-extrabold: 800;
|
|
188
|
-
--font-black: 900;
|
|
189
|
-
|
|
190
|
-
/* ===== Border Radius ===== */
|
|
191
|
-
|
|
192
|
-
--radius-none: 0;
|
|
193
|
-
--radius-sm: 0.125rem; /* 2px */
|
|
194
|
-
--radius-base: 0.25rem; /* 4px */
|
|
195
|
-
--radius-md: 0.375rem; /* 6px */
|
|
196
|
-
--radius-lg: 0.5rem; /* 8px */
|
|
197
|
-
--radius-xl: 0.75rem; /* 12px */
|
|
198
|
-
--radius-2xl: 1rem; /* 16px */
|
|
199
|
-
--radius-3xl: 1.5rem; /* 24px */
|
|
200
|
-
--radius-full: 9999px;
|
|
201
|
-
|
|
202
|
-
/* ===== Z-Index Scale ===== */
|
|
203
|
-
|
|
204
|
-
--z-0: 0;
|
|
205
|
-
--z-10: 10;
|
|
206
|
-
--z-20: 20;
|
|
207
|
-
--z-30: 30;
|
|
208
|
-
--z-40: 40;
|
|
209
|
-
--z-50: 50;
|
|
210
|
-
--z-dropdown: 1000;
|
|
211
|
-
--z-sticky: 1020;
|
|
212
|
-
--z-fixed: 1030;
|
|
213
|
-
--z-modal-backdrop: 1040;
|
|
214
|
-
--z-modal: 1050;
|
|
215
|
-
--z-popover: 1060;
|
|
216
|
-
--z-tooltip: 1070;
|
|
217
|
-
--z-notification: 1080;
|
|
218
|
-
|
|
219
|
-
/* ===== Blur Values ===== */
|
|
220
|
-
|
|
221
|
-
--blur-none: 0;
|
|
222
|
-
--blur-sm: 4px;
|
|
223
|
-
--blur-base: 8px;
|
|
224
|
-
--blur-md: 12px;
|
|
225
|
-
--blur-lg: 16px;
|
|
226
|
-
--blur-xl: 24px;
|
|
227
|
-
--blur-2xl: 40px;
|
|
228
|
-
--blur-3xl: 64px;
|
|
229
|
-
}
|
|
3
|
+
/* Base layer styles */
|
|
4
|
+
:root {
|
|
5
|
+
/* ===== Semantic Color Tokens ===== */
|
|
230
6
|
|
|
231
|
-
/*
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
/*
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
7
|
+
/* Background Layers */
|
|
8
|
+
--bg-base: var(--background);
|
|
9
|
+
--bg-subtle: var(--gray-50);
|
|
10
|
+
--bg-muted: var(--gray-100);
|
|
11
|
+
--bg-emphasis: var(--gray-200);
|
|
12
|
+
--bg-inverse: var(--foreground);
|
|
13
|
+
|
|
14
|
+
/* Surface Colors */
|
|
15
|
+
--surface-base: var(--background);
|
|
16
|
+
--surface-overlay: var(--gray-50);
|
|
17
|
+
--surface-raised: var(--background);
|
|
18
|
+
--surface-sunken: var(--gray-100);
|
|
19
|
+
|
|
20
|
+
/* Text Colors */
|
|
21
|
+
--text-primary: var(--foreground);
|
|
22
|
+
--text-secondary: var(--gray-600);
|
|
23
|
+
--text-tertiary: var(--gray-500);
|
|
24
|
+
--text-disabled: var(--gray-400);
|
|
25
|
+
--text-inverse: var(--background);
|
|
26
|
+
--text-link: var(--primary);
|
|
27
|
+
--text-link-hover: var(--primary-hover);
|
|
28
|
+
|
|
29
|
+
/* Brand Colors */
|
|
30
|
+
--brand-primary: var(--primary);
|
|
31
|
+
--brand-primary-hover: var(--primary-hover);
|
|
32
|
+
--brand-primary-active: var(--primary-active);
|
|
33
|
+
--brand-secondary: var(--secondary);
|
|
34
|
+
|
|
35
|
+
/* Interactive States */
|
|
36
|
+
--state-hover: var(--gray-100);
|
|
37
|
+
--state-active: var(--gray-200);
|
|
38
|
+
--state-selected: var(--primary);
|
|
39
|
+
--state-disabled: var(--gray-300);
|
|
40
|
+
--state-focus: var(--primary);
|
|
41
|
+
|
|
42
|
+
/* Feedback Colors */
|
|
43
|
+
--feedback-success: var(--success);
|
|
44
|
+
--feedback-success-light: 142 71% 95%;
|
|
45
|
+
--feedback-success-dark: 142 71% 35%;
|
|
46
|
+
--feedback-warning: var(--warning);
|
|
47
|
+
--feedback-warning-light: 38 92% 95%;
|
|
48
|
+
--feedback-warning-dark: 38 92% 40%;
|
|
49
|
+
--feedback-error: var(--error);
|
|
50
|
+
--feedback-error-light: 0 84% 95%;
|
|
51
|
+
--feedback-error-dark: 0 84% 50%;
|
|
52
|
+
--feedback-info: 217 91% 60%;
|
|
53
|
+
--feedback-info-light: 217 91% 95%;
|
|
54
|
+
--feedback-info-dark: 217 91% 50%;
|
|
55
|
+
|
|
56
|
+
/* Border Colors */
|
|
57
|
+
--border-default: var(--border);
|
|
58
|
+
--border-subtle: var(--gray-200);
|
|
59
|
+
--border-strong: var(--gray-400);
|
|
60
|
+
--border-interactive: var(--primary);
|
|
61
|
+
--border-error: var(--error);
|
|
62
|
+
--border-success: var(--success);
|
|
63
|
+
--border-warning: var(--warning);
|
|
64
|
+
|
|
65
|
+
/* ===== Shadow System ===== */
|
|
66
|
+
|
|
67
|
+
/* Elevation Tokens */
|
|
68
|
+
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
69
|
+
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
70
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
71
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
72
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
73
|
+
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
74
|
+
|
|
75
|
+
/* Colored Shadows */
|
|
76
|
+
--shadow-primary: 0 4px 14px 0 hsl(var(--primary) / 0.3);
|
|
77
|
+
--shadow-success: 0 4px 14px 0 hsl(var(--success) / 0.3);
|
|
78
|
+
--shadow-error: 0 4px 14px 0 hsl(var(--error) / 0.3);
|
|
79
|
+
--shadow-warning: 0 4px 14px 0 hsl(var(--warning) / 0.3);
|
|
80
|
+
|
|
81
|
+
/* Inset Shadows */
|
|
82
|
+
--shadow-inner-xs: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
83
|
+
--shadow-inner-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
84
|
+
--shadow-inner-md: inset 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
85
|
+
|
|
86
|
+
/* ===== Animation Timing Functions ===== */
|
|
87
|
+
|
|
88
|
+
/* Easing Functions */
|
|
89
|
+
--ease-linear: linear;
|
|
90
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
91
|
+
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
92
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
93
|
+
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
94
|
+
--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
95
|
+
--ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
|
96
|
+
--ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
97
|
+
--ease-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
98
|
+
|
|
99
|
+
/* Duration Tokens */
|
|
100
|
+
--duration-instant: 0ms;
|
|
101
|
+
--duration-fast: 150ms;
|
|
102
|
+
--duration-normal: 250ms;
|
|
103
|
+
--duration-slow: 350ms;
|
|
104
|
+
--duration-slower: 500ms;
|
|
105
|
+
--duration-slowest: 750ms;
|
|
106
|
+
|
|
107
|
+
/* ===== Spacing System (8px Grid) ===== */
|
|
108
|
+
|
|
109
|
+
--space-0: 0;
|
|
110
|
+
--space-px: 1px;
|
|
111
|
+
--space-0\.5: 0.125rem; /* 2px */
|
|
112
|
+
--space-1: 0.25rem; /* 4px */
|
|
113
|
+
--space-1\.5: 0.375rem; /* 6px */
|
|
114
|
+
--space-2: 0.5rem; /* 8px */
|
|
115
|
+
--space-2\.5: 0.625rem; /* 10px */
|
|
116
|
+
--space-3: 0.75rem; /* 12px */
|
|
117
|
+
--space-3\.5: 0.875rem; /* 14px */
|
|
118
|
+
--space-4: 1rem; /* 16px */
|
|
119
|
+
--space-5: 1.25rem; /* 20px */
|
|
120
|
+
--space-6: 1.5rem; /* 24px */
|
|
121
|
+
--space-7: 1.75rem; /* 28px */
|
|
122
|
+
--space-8: 2rem; /* 32px */
|
|
123
|
+
--space-9: 2.25rem; /* 36px */
|
|
124
|
+
--space-10: 2.5rem; /* 40px */
|
|
125
|
+
--space-11: 2.75rem; /* 44px */
|
|
126
|
+
--space-12: 3rem; /* 48px */
|
|
127
|
+
--space-14: 3.5rem; /* 56px */
|
|
128
|
+
--space-16: 4rem; /* 64px */
|
|
129
|
+
--space-20: 5rem; /* 80px */
|
|
130
|
+
--space-24: 6rem; /* 96px */
|
|
131
|
+
--space-28: 7rem; /* 112px */
|
|
132
|
+
--space-32: 8rem; /* 128px */
|
|
133
|
+
--space-36: 9rem; /* 144px */
|
|
134
|
+
--space-40: 10rem; /* 160px */
|
|
135
|
+
--space-44: 11rem; /* 176px */
|
|
136
|
+
--space-48: 12rem; /* 192px */
|
|
137
|
+
--space-52: 13rem; /* 208px */
|
|
138
|
+
--space-56: 14rem; /* 224px */
|
|
139
|
+
--space-60: 15rem; /* 240px */
|
|
140
|
+
--space-64: 16rem; /* 256px */
|
|
141
|
+
--space-72: 18rem; /* 288px */
|
|
142
|
+
--space-80: 20rem; /* 320px */
|
|
143
|
+
--space-96: 24rem; /* 384px */
|
|
273
144
|
|
|
274
|
-
|
|
275
|
-
.shadow-success { box-shadow: var(--shadow-success); }
|
|
276
|
-
.shadow-error { box-shadow: var(--shadow-error); }
|
|
277
|
-
.shadow-warning { box-shadow: var(--shadow-warning); }
|
|
145
|
+
/* ===== Typography Scale (Perfect Fourth) ===== */
|
|
278
146
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
147
|
+
/* Font Sizes */
|
|
148
|
+
--text-2xs: 0.625rem; /* 10px */
|
|
149
|
+
--text-xs: 0.75rem; /* 12px */
|
|
150
|
+
--text-sm: 0.875rem; /* 14px */
|
|
151
|
+
--text-base: 1rem; /* 16px */
|
|
152
|
+
--text-lg: 1.125rem; /* 18px */
|
|
153
|
+
--text-xl: 1.25rem; /* 20px */
|
|
154
|
+
--text-2xl: 1.5rem; /* 24px */
|
|
155
|
+
--text-3xl: 1.875rem; /* 30px */
|
|
156
|
+
--text-4xl: 2.25rem; /* 36px */
|
|
157
|
+
--text-5xl: 3rem; /* 48px */
|
|
158
|
+
--text-6xl: 3.75rem; /* 60px */
|
|
159
|
+
--text-7xl: 4.5rem; /* 72px */
|
|
160
|
+
--text-8xl: 6rem; /* 96px */
|
|
161
|
+
--text-9xl: 8rem; /* 128px */
|
|
282
162
|
|
|
283
|
-
/*
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
.animate-fade-out { animation: fadeOut var(--duration-normal) var(--ease-out); }
|
|
291
|
-
.animate-slide-in { animation: slideIn var(--duration-normal) var(--ease-out); }
|
|
292
|
-
.animate-scale-in { animation: scaleIn var(--duration-normal) var(--ease-out); }
|
|
163
|
+
/* Line Heights */
|
|
164
|
+
--leading-none: 1;
|
|
165
|
+
--leading-tight: 1.25;
|
|
166
|
+
--leading-snug: 1.375;
|
|
167
|
+
--leading-normal: 1.5;
|
|
168
|
+
--leading-relaxed: 1.625;
|
|
169
|
+
--leading-loose: 2;
|
|
293
170
|
|
|
294
|
-
/*
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
171
|
+
/* Letter Spacing */
|
|
172
|
+
--tracking-tighter: -0.05em;
|
|
173
|
+
--tracking-tight: -0.025em;
|
|
174
|
+
--tracking-normal: 0;
|
|
175
|
+
--tracking-wide: 0.025em;
|
|
176
|
+
--tracking-wider: 0.05em;
|
|
177
|
+
--tracking-widest: 0.1em;
|
|
301
178
|
|
|
302
|
-
/*
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
179
|
+
/* Font Weights */
|
|
180
|
+
--font-thin: 100;
|
|
181
|
+
--font-extralight: 200;
|
|
182
|
+
--font-light: 300;
|
|
183
|
+
--font-normal: 400;
|
|
184
|
+
--font-medium: 500;
|
|
185
|
+
--font-semibold: 600;
|
|
186
|
+
--font-bold: 700;
|
|
187
|
+
--font-extrabold: 800;
|
|
188
|
+
--font-black: 900;
|
|
309
189
|
|
|
310
|
-
/*
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
190
|
+
/* ===== Border Radius ===== */
|
|
191
|
+
|
|
192
|
+
--radius-none: 0;
|
|
193
|
+
--radius-sm: 0.125rem; /* 2px */
|
|
194
|
+
--radius-base: 0.25rem; /* 4px */
|
|
195
|
+
--radius-md: 0.375rem; /* 6px */
|
|
196
|
+
--radius-lg: 0.5rem; /* 8px */
|
|
197
|
+
--radius-xl: 0.75rem; /* 12px */
|
|
198
|
+
--radius-2xl: 1rem; /* 16px */
|
|
199
|
+
--radius-3xl: 1.5rem; /* 24px */
|
|
200
|
+
--radius-full: 9999px;
|
|
201
|
+
|
|
202
|
+
/* ===== Z-Index Scale ===== */
|
|
203
|
+
|
|
204
|
+
--z-0: 0;
|
|
205
|
+
--z-10: 10;
|
|
206
|
+
--z-20: 20;
|
|
207
|
+
--z-30: 30;
|
|
208
|
+
--z-40: 40;
|
|
209
|
+
--z-50: 50;
|
|
210
|
+
--z-dropdown: 1000;
|
|
211
|
+
--z-sticky: 1020;
|
|
212
|
+
--z-fixed: 1030;
|
|
213
|
+
--z-modal-backdrop: 1040;
|
|
214
|
+
--z-modal: 1050;
|
|
215
|
+
--z-popover: 1060;
|
|
216
|
+
--z-tooltip: 1070;
|
|
217
|
+
--z-notification: 1080;
|
|
218
|
+
|
|
219
|
+
/* ===== Blur Values ===== */
|
|
220
|
+
|
|
221
|
+
--blur-none: 0;
|
|
222
|
+
--blur-sm: 4px;
|
|
223
|
+
--blur-base: 8px;
|
|
224
|
+
--blur-md: 12px;
|
|
225
|
+
--blur-lg: 16px;
|
|
226
|
+
--blur-xl: 24px;
|
|
227
|
+
--blur-2xl: 40px;
|
|
228
|
+
--blur-3xl: 64px;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/* Dark Mode Overrides */
|
|
232
|
+
.dark {
|
|
233
|
+
/* Background Layers */
|
|
234
|
+
--bg-base: var(--background);
|
|
235
|
+
--bg-subtle: var(--gray-800);
|
|
236
|
+
--bg-muted: var(--gray-700);
|
|
237
|
+
--bg-emphasis: var(--gray-600);
|
|
238
|
+
|
|
239
|
+
/* Surface Colors */
|
|
240
|
+
--surface-overlay: var(--gray-800);
|
|
241
|
+
--surface-raised: var(--gray-800);
|
|
242
|
+
--surface-sunken: var(--background);
|
|
243
|
+
|
|
244
|
+
/* Text Colors */
|
|
245
|
+
--text-secondary: var(--gray-400);
|
|
246
|
+
--text-tertiary: var(--gray-500);
|
|
247
|
+
--text-disabled: var(--gray-600);
|
|
248
|
+
|
|
249
|
+
/* Interactive States */
|
|
250
|
+
--state-hover: var(--gray-700);
|
|
251
|
+
--state-active: var(--gray-600);
|
|
252
|
+
|
|
253
|
+
/* Dark Mode Shadows (Lighter for visibility) */
|
|
254
|
+
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
|
255
|
+
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
|
|
256
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
|
|
257
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
|
|
258
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
|
|
259
|
+
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
|
|
316
260
|
}
|
|
317
261
|
|
|
262
|
+
/* ===== Utility Classes ===== */
|
|
263
|
+
|
|
264
|
+
/* Shadow Utilities */
|
|
265
|
+
.shadow-xs { box-shadow: var(--shadow-xs); }
|
|
266
|
+
.shadow-sm { box-shadow: var(--shadow-sm); }
|
|
267
|
+
.shadow-md { box-shadow: var(--shadow-md); }
|
|
268
|
+
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
269
|
+
.shadow-xl { box-shadow: var(--shadow-xl); }
|
|
270
|
+
.shadow-2xl { box-shadow: var(--shadow-2xl); }
|
|
271
|
+
|
|
272
|
+
.shadow-primary { box-shadow: var(--shadow-primary); }
|
|
273
|
+
.shadow-success { box-shadow: var(--shadow-success); }
|
|
274
|
+
.shadow-error { box-shadow: var(--shadow-error); }
|
|
275
|
+
.shadow-warning { box-shadow: var(--shadow-warning); }
|
|
276
|
+
|
|
277
|
+
.shadow-inner-xs { box-shadow: var(--shadow-inner-xs); }
|
|
278
|
+
.shadow-inner-sm { box-shadow: var(--shadow-inner-sm); }
|
|
279
|
+
.shadow-inner-md { box-shadow: var(--shadow-inner-md); }
|
|
280
|
+
|
|
281
|
+
/* Animation Utilities */
|
|
282
|
+
.animate-none { animation: none; }
|
|
283
|
+
.animate-spin { animation: spin 1s linear infinite; }
|
|
284
|
+
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
|
|
285
|
+
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
|
286
|
+
.animate-bounce { animation: bounce 1s infinite; }
|
|
287
|
+
.animate-fade-in { animation: fadeIn var(--duration-normal) var(--ease-out); }
|
|
288
|
+
.animate-fade-out { animation: fadeOut var(--duration-normal) var(--ease-out); }
|
|
289
|
+
.animate-slide-in { animation: slideIn var(--duration-normal) var(--ease-out); }
|
|
290
|
+
.animate-scale-in { animation: scaleIn var(--duration-normal) var(--ease-out); }
|
|
291
|
+
|
|
292
|
+
/* Transition Utilities */
|
|
293
|
+
.transition-none { transition: none; }
|
|
294
|
+
.transition-all { transition-property: all; }
|
|
295
|
+
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
|
|
296
|
+
.transition-opacity { transition-property: opacity; }
|
|
297
|
+
.transition-shadow { transition-property: box-shadow; }
|
|
298
|
+
.transition-transform { transition-property: transform; }
|
|
299
|
+
|
|
300
|
+
/* Duration Utilities */
|
|
301
|
+
.duration-instant { transition-duration: var(--duration-instant); }
|
|
302
|
+
.duration-fast { transition-duration: var(--duration-fast); }
|
|
303
|
+
.duration-normal { transition-duration: var(--duration-normal); }
|
|
304
|
+
.duration-slow { transition-duration: var(--duration-slow); }
|
|
305
|
+
.duration-slower { transition-duration: var(--duration-slower); }
|
|
306
|
+
.duration-slowest { transition-duration: var(--duration-slowest); }
|
|
307
|
+
|
|
308
|
+
/* Easing Utilities */
|
|
309
|
+
.ease-linear { transition-timing-function: var(--ease-linear); }
|
|
310
|
+
.ease-in { transition-timing-function: var(--ease-in); }
|
|
311
|
+
.ease-out { transition-timing-function: var(--ease-out); }
|
|
312
|
+
.ease-in-out { transition-timing-function: var(--ease-in-out); }
|
|
313
|
+
.ease-bounce { transition-timing-function: var(--ease-bounce); }
|
|
314
|
+
|
|
318
315
|
/* ===== Keyframes ===== */
|
|
319
316
|
|
|
320
317
|
@keyframes spin {
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
/*
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/*
|
|
2
|
+
* Tailwind direktifleri ana projede zaten yüklü olduğu için
|
|
3
|
+
* çakışmayı önlemek amacıyla buradan kaldırıldı.
|
|
4
|
+
* Sadece component-specific stiller eklenmelidir.
|
|
5
|
+
*/
|
|
5
6
|
|
|
6
|
-
/*
|
|
7
|
+
/* MoonUI Pro component-specific styles */
|