@nextclaw/ui 0.3.15 → 0.3.17

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.
@@ -5,244 +5,286 @@
5
5
  */
6
6
 
7
7
  @layer base {
8
- :root {
9
- /* ========================================
8
+ :root {
9
+ /* ========================================
10
10
  BRAND COLORS
11
11
  ======================================== */
12
- --brand-50: 217 100% 97%;
13
- --brand-100: 217 100% 94%;
14
- --brand-200: 217 95% 87%;
15
- --brand-300: 217 90% 77%;
16
- --brand-400: 217 85% 65%;
17
- --brand-500: 217 80% 55%;
18
- --brand-600: 217 75% 48%;
19
- --brand-700: 217 70% 40%;
20
- --brand-800: 217 65% 33%;
21
- --brand-900: 217 60% 25%;
22
-
23
- /* ========================================
12
+ --brand-50: 217 100% 97%;
13
+ --brand-100: 217 100% 94%;
14
+ --brand-200: 217 95% 87%;
15
+ --brand-300: 217 90% 77%;
16
+ --brand-400: 217 85% 65%;
17
+ --brand-500: 217 80% 55%;
18
+ --brand-600: 217 75% 48%;
19
+ --brand-700: 217 70% 40%;
20
+ --brand-800: 217 65% 33%;
21
+ --brand-900: 217 60% 25%;
22
+
23
+ /* ========================================
24
24
  NEUTRAL COLORS (Gray Scale)
25
25
  ======================================== */
26
- --gray-50: 210 20% 98%;
27
- --gray-100: 220 14% 96%;
28
- --gray-200: 220 13% 91%;
29
- --gray-300: 216 12% 84%;
30
- --gray-400: 218 11% 65%;
31
- --gray-500: 220 9% 46%;
32
- --gray-600: 215 14% 34%;
33
- --gray-700: 217 19% 27%;
34
- --gray-800: 215 28% 17%;
35
- --gray-900: 221 39% 11%;
36
-
37
- /* ========================================
26
+ --gray-50: 210 20% 98%;
27
+ --gray-100: 220 14% 96%;
28
+ --gray-200: 220 13% 91%;
29
+ --gray-300: 216 12% 84%;
30
+ --gray-400: 218 11% 65%;
31
+ --gray-500: 220 9% 46%;
32
+ --gray-600: 215 14% 34%;
33
+ --gray-700: 217 19% 27%;
34
+ --gray-800: 215 28% 17%;
35
+ --gray-900: 221 39% 11%;
36
+
37
+ /* ========================================
38
38
  SEMANTIC COLORS
39
39
  ======================================== */
40
- /* Background */
41
- --background: 210 20% 98%;
42
- --background-secondary: 220 14% 96%;
43
- --background-tertiary: 220 13% 91%;
44
-
45
- /* Foreground (Text) */
46
- --foreground: 221 39% 11%;
47
- --foreground-secondary: 215 28% 17%;
48
- --foreground-tertiary: 220 9% 46%;
49
- --foreground-muted: 218 11% 65%;
50
-
51
- /* Primary (Brand Blue) */
52
- --primary: 217 80% 55%;
53
- --primary-hover: 217 75% 48%;
54
- --primary-active: 217 70% 40%;
55
- --primary-foreground: 0 0% 100%;
56
-
57
- /* Secondary */
58
- --secondary: 220 14% 96%;
59
- --secondary-hover: 220 13% 91%;
60
- --secondary-foreground: 215 28% 17%;
61
-
62
- /* Accent */
63
- --accent: 217 100% 97%;
64
- --accent-foreground: 217 70% 40%;
65
-
66
- /* Muted */
67
- --muted: 220 14% 96%;
68
- --muted-foreground: 220 9% 46%;
69
-
70
- /* Destructive */
71
- --destructive: 0 84% 60%;
72
- --destructive-foreground: 0 0% 98%;
73
-
74
- /* Success */
75
- --success: 142 76% 36%;
76
- --success-foreground: 0 0% 100%;
77
-
78
- /* Warning */
79
- --warning: 38 92% 50%;
80
- --warning-foreground: 0 0% 100%;
81
-
82
- /* ========================================
40
+ /* Background */
41
+ --background: 210 20% 98%;
42
+ --background-secondary: 220 14% 96%;
43
+ --background-tertiary: 220 13% 91%;
44
+
45
+ /* Foreground (Text) */
46
+ --foreground: 221 39% 11%;
47
+ --foreground-secondary: 215 28% 17%;
48
+ --foreground-tertiary: 220 9% 46%;
49
+ --foreground-muted: 218 11% 65%;
50
+
51
+ /* Primary (Brand Blue) */
52
+ --primary: 217 80% 55%;
53
+ --primary-hover: 217 75% 48%;
54
+ --primary-active: 217 70% 40%;
55
+ --primary-foreground: 0 0% 100%;
56
+
57
+ /* Secondary */
58
+ --secondary: 220 14% 96%;
59
+ --secondary-hover: 220 13% 91%;
60
+ --secondary-foreground: 215 28% 17%;
61
+
62
+ /* Accent */
63
+ --accent: 217 100% 97%;
64
+ --accent-foreground: 217 70% 40%;
65
+
66
+ /* Muted */
67
+ --muted: 220 14% 96%;
68
+ --muted-foreground: 220 9% 46%;
69
+
70
+ /* Destructive */
71
+ --destructive: 0 84% 60%;
72
+ --destructive-foreground: 0 0% 98%;
73
+
74
+ /* Success */
75
+ --success: 142 76% 36%;
76
+ --success-foreground: 0 0% 100%;
77
+
78
+ /* Warning */
79
+ --warning: 38 92% 50%;
80
+ --warning-foreground: 0 0% 100%;
81
+
82
+ /* ========================================
83
83
  UI ELEMENTS
84
84
  ======================================== */
85
- /* Card */
86
- --card: 0 0% 100%;
87
- --card-foreground: 221 39% 11%;
88
- --card-border: 220 13% 91%;
89
-
90
- /* Popover */
91
- --popover: 0 0% 100%;
92
- --popover-foreground: 221 39% 11%;
93
-
94
- /* Border */
95
- --border: 220 13% 91%;
96
- --border-hover: 216 12% 84%;
97
- --border-active: 217 80% 55%;
98
-
99
- /* Input */
100
- --input: 0 0% 100%;
101
- --input-border: 220 13% 91%;
102
- --input-focus: 217 80% 55%;
103
-
104
- /* Ring (Focus) */
105
- --ring: 217 80% 55%;
106
- --ring-offset: 0 0% 100%;
107
-
108
- /* ========================================
85
+ /* Card */
86
+ --card: 0 0% 100%;
87
+ --card-foreground: 221 39% 11%;
88
+ --card-border: 220 13% 91%;
89
+
90
+ /* Popover */
91
+ --popover: 0 0% 100%;
92
+ --popover-foreground: 221 39% 11%;
93
+
94
+ /* Border */
95
+ --border: 220 13% 91%;
96
+ --border-hover: 216 12% 84%;
97
+ --border-active: 217 80% 55%;
98
+
99
+ /* Input */
100
+ --input: 0 0% 100%;
101
+ --input-border: 220 13% 91%;
102
+ --input-focus: 217 80% 55%;
103
+
104
+ /* Ring (Focus) */
105
+ --ring: 217 80% 55%;
106
+ --ring-offset: 0 0% 100%;
107
+
108
+ /* ========================================
109
109
  SPACING SYSTEM
110
110
  ======================================== */
111
- --space-0: 0px;
112
- --space-1: 4px;
113
- --space-2: 8px;
114
- --space-3: 12px;
115
- --space-4: 16px;
116
- --space-5: 20px;
117
- --space-6: 24px;
118
- --space-8: 32px;
119
- --space-10: 40px;
120
- --space-12: 48px;
121
- --space-16: 64px;
122
- --space-20: 80px;
123
- --space-24: 96px;
124
-
125
- /* ========================================
111
+ --space-0: 0px;
112
+ --space-1: 4px;
113
+ --space-2: 8px;
114
+ --space-3: 12px;
115
+ --space-4: 16px;
116
+ --space-5: 20px;
117
+ --space-6: 24px;
118
+ --space-8: 32px;
119
+ --space-10: 40px;
120
+ --space-12: 48px;
121
+ --space-16: 64px;
122
+ --space-20: 80px;
123
+ --space-24: 96px;
124
+
125
+ /* ========================================
126
126
  BORDER RADIUS
127
127
  ======================================== */
128
- --radius-sm: 6px;
129
- --radius-md: 8px;
130
- --radius-lg: 12px;
131
- --radius-xl: 16px;
132
- --radius-2xl: 20px;
133
- --radius-3xl: 24px;
134
- --radius-full: 9999px;
135
-
136
- /* ========================================
128
+ --radius-sm: 6px;
129
+ --radius-md: 8px;
130
+ --radius-lg: 12px;
131
+ --radius-xl: 16px;
132
+ --radius-2xl: 20px;
133
+ --radius-3xl: 24px;
134
+ --radius-full: 9999px;
135
+
136
+ /* ========================================
137
137
  SHADOWS
138
138
  ======================================== */
139
- --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
140
- --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
141
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
142
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
143
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
144
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
145
-
146
- /* Card Shadow */
147
- --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
148
- --shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
149
-
150
- /* ========================================
139
+ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
140
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
141
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
142
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
143
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
144
+ --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
145
+
146
+ /* Card Shadow - Softer, more diffuse for premium feel */
147
+ --shadow-card: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
148
+ --shadow-card-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.06), 0 4px 8px -4px rgba(0, 0, 0, 0.03);
149
+
150
+ /* ========================================
151
151
  TYPOGRAPHY
152
152
  ======================================== */
153
- --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
154
- --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
155
-
156
- /* Font Sizes */
157
- --text-xs: 12px;
158
- --text-sm: 14px;
159
- --text-base: 16px;
160
- --text-lg: 18px;
161
- --text-xl: 20px;
162
- --text-2xl: 24px;
163
- --text-3xl: 30px;
164
- --text-4xl: 36px;
165
- --text-5xl: 48px;
166
-
167
- /* Font Weights */
168
- --font-normal: 400;
169
- --font-medium: 500;
170
- --font-semibold: 600;
171
- --font-bold: 700;
172
-
173
- /* Line Heights */
174
- --leading-tight: 1.25;
175
- --leading-snug: 1.375;
176
- --leading-normal: 1.5;
177
- --leading-relaxed: 1.625;
178
-
179
- /* Letter Spacing */
180
- --tracking-tight: -0.025em;
181
- --tracking-normal: 0;
182
- --tracking-wide: 0.025em;
183
-
184
- /* ========================================
153
+ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
154
+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
155
+
156
+ /* Font Sizes */
157
+ --text-xs: 12px;
158
+ --text-sm: 14px;
159
+ --text-base: 16px;
160
+ --text-lg: 18px;
161
+ --text-xl: 20px;
162
+ --text-2xl: 24px;
163
+ --text-3xl: 30px;
164
+ --text-4xl: 36px;
165
+ --text-5xl: 48px;
166
+
167
+ /* Font Weights */
168
+ --font-normal: 400;
169
+ --font-medium: 500;
170
+ --font-semibold: 600;
171
+ --font-bold: 700;
172
+
173
+ /* Line Heights */
174
+ --leading-tight: 1.25;
175
+ --leading-snug: 1.375;
176
+ --leading-normal: 1.5;
177
+ --leading-relaxed: 1.625;
178
+
179
+ /* Letter Spacing */
180
+ --tracking-tight: -0.025em;
181
+ --tracking-normal: 0;
182
+ --tracking-wide: 0.025em;
183
+
184
+ /* ========================================
185
185
  TRANSITIONS
186
186
  ======================================== */
187
- --transition-fast: 150ms ease;
188
- --transition-base: 200ms ease;
189
- --transition-slow: 300ms ease;
187
+ --transition-fast: 150ms ease;
188
+ --transition-base: 200ms ease;
189
+ --transition-slow: 300ms ease;
190
190
 
191
- /* ========================================
191
+ /* ========================================
192
192
  Z-INDEX SCALE
193
193
  ======================================== */
194
- --z-dropdown: 100;
195
- --z-sticky: 200;
196
- --z-fixed: 300;
197
- --z-modal-backdrop: 400;
198
- --z-modal: 500;
199
- --z-popover: 600;
200
- --z-tooltip: 700;
201
- }
194
+ --z-dropdown: 100;
195
+ --z-sticky: 200;
196
+ --z-fixed: 300;
197
+ --z-modal-backdrop: 400;
198
+ --z-modal: 500;
199
+ --z-popover: 600;
200
+ --z-tooltip: 700;
201
+ }
202
202
  }
203
203
 
204
204
  @layer utilities {
205
- /* ========================================
205
+ /* ========================================
206
206
  UTILITY CLASSES
207
207
  ======================================== */
208
208
 
209
- /* Brand Colors */
210
- .bg-brand-50 { background-color: hsl(var(--brand-50)); }
211
- .bg-brand-100 { background-color: hsl(var(--brand-100)); }
212
- .bg-brand-500 { background-color: hsl(var(--brand-500)); }
213
- .bg-brand-600 { background-color: hsl(var(--brand-600)); }
214
- .text-brand-500 { color: hsl(var(--brand-500)); }
215
- .text-brand-600 { color: hsl(var(--brand-600)); }
216
- .border-brand-500 { border-color: hsl(var(--brand-500)); }
217
-
218
- /* Gray Colors */
219
- .bg-gray-50 { background-color: hsl(var(--gray-50)); }
220
- .bg-gray-100 { background-color: hsl(var(--gray-100)); }
221
- .bg-gray-900 { background-color: hsl(var(--gray-900)); }
222
- .text-gray-500 { color: hsl(var(--gray-500)); }
223
- .text-gray-600 { color: hsl(var(--gray-600)); }
224
- .text-gray-900 { color: hsl(var(--gray-900)); }
225
-
226
- /* Shadows */
227
- .shadow-card { box-shadow: var(--shadow-card); }
228
- .shadow-card-hover { box-shadow: var(--shadow-card-hover); }
229
-
230
- /* Gradient Backgrounds */
231
- .bg-gradient-hero {
232
- background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--gray-50)) 100%);
233
- }
234
-
235
- /* Glass Effect */
236
- .glass {
237
- background: rgba(255, 255, 255, 0.8);
238
- backdrop-filter: blur(12px);
239
- -webkit-backdrop-filter: blur(12px);
240
- }
241
-
242
- /* Focus Ring */
243
- .focus-ring {
244
- @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
245
- --tw-ring-color: hsl(var(--ring));
246
- --tw-ring-offset-color: hsl(var(--ring-offset));
247
- }
248
- }
209
+ /* Brand Colors */
210
+ .bg-brand-50 {
211
+ background-color: hsl(var(--brand-50));
212
+ }
213
+
214
+ .bg-brand-100 {
215
+ background-color: hsl(var(--brand-100));
216
+ }
217
+
218
+ .bg-brand-500 {
219
+ background-color: hsl(var(--brand-500));
220
+ }
221
+
222
+ .bg-brand-600 {
223
+ background-color: hsl(var(--brand-600));
224
+ }
225
+
226
+ .text-brand-500 {
227
+ color: hsl(var(--brand-500));
228
+ }
229
+
230
+ .text-brand-600 {
231
+ color: hsl(var(--brand-600));
232
+ }
233
+
234
+ .border-brand-500 {
235
+ border-color: hsl(var(--brand-500));
236
+ }
237
+
238
+ /* Gray Colors */
239
+ .bg-gray-50 {
240
+ background-color: hsl(var(--gray-50));
241
+ }
242
+
243
+ .bg-gray-100 {
244
+ background-color: hsl(var(--gray-100));
245
+ }
246
+
247
+ .bg-gray-900 {
248
+ background-color: hsl(var(--gray-900));
249
+ }
250
+
251
+ .text-gray-500 {
252
+ color: hsl(var(--gray-500));
253
+ }
254
+
255
+ .text-gray-600 {
256
+ color: hsl(var(--gray-600));
257
+ }
258
+
259
+ .text-gray-900 {
260
+ color: hsl(var(--gray-900));
261
+ }
262
+
263
+ /* Shadows */
264
+ .shadow-card {
265
+ box-shadow: var(--shadow-card);
266
+ }
267
+
268
+ .shadow-card-hover {
269
+ box-shadow: var(--shadow-card-hover);
270
+ }
271
+
272
+ /* Gradient Backgrounds */
273
+ .bg-gradient-hero {
274
+ background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--gray-50)) 100%);
275
+ }
276
+
277
+ /* Glass Effect */
278
+ .glass {
279
+ background: rgba(255, 255, 255, 0.8);
280
+ backdrop-filter: blur(12px);
281
+ -webkit-backdrop-filter: blur(12px);
282
+ }
283
+
284
+ /* Focus Ring */
285
+ .focus-ring {
286
+ @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
287
+ --tw-ring-color: hsl(var(--ring));
288
+ --tw-ring-offset-color: hsl(var(--ring-offset));
289
+ }
290
+ }