@nextclaw/ui 0.5.12 → 0.5.14

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.
Files changed (17) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +24 -0
  3. package/dist/assets/index-CZnQJKDU.js +347 -0
  4. package/dist/assets/index-CfkfeqC5.css +1 -0
  5. package/dist/index.html +2 -2
  6. package/package.json +1 -1
  7. package/src/components/config/ChannelForm.tsx +4 -4
  8. package/src/components/layout/Sidebar.tsx +34 -5
  9. package/src/components/providers/ThemeProvider.tsx +51 -0
  10. package/src/components/ui/button.tsx +5 -5
  11. package/src/index.css +2 -37
  12. package/src/lib/i18n.ts +3 -0
  13. package/src/lib/theme.ts +80 -0
  14. package/src/main.tsx +8 -5
  15. package/src/styles/design-system.css +129 -51
  16. package/dist/assets/index-BWFy0xvM.js +0 -342
  17. package/dist/assets/index-CqQ629Sy.css +0 -1
package/src/styles/design-system.css CHANGED
@@ -7,65 +7,71 @@
7
7
  @layer base {
8
8
  :root {
9
9
  /* ========================================
10
- BRAND COLORS (Blue)
10
+ BRAND COLORS (Olive Green)
11
11
  ======================================== */
12
- --brand-50: 217 100% 97%;
13
- --brand-100: 217 95% 92%;
14
- --brand-200: 217 90% 82%;
15
- --brand-300: 217 80% 68%;
16
- --brand-400: 217 72% 56%;
17
- --brand-500: 217 80% 55%;
18
- --brand-600: 217 70% 45%;
19
- --brand-700: 217 60% 35%;
20
- --brand-800: 217 55% 28%;
21
- --brand-900: 217 60% 25%;
12
+ --brand-50: 94 20% 95%;
13
+ --brand-100: 94 20% 90%;
14
+ --brand-200: 94 18% 80%;
15
+ --brand-300: 94 16% 65%;
16
+ --brand-400: 94 16% 50%;
17
+ --brand-500: 94 13% 37%;
18
+ --brand-600: 94 13% 30%;
19
+ --brand-700: 94 15% 25%;
20
+ --brand-800: 94 20% 18%;
21
+ --brand-900: 94 25% 12%;
22
22
 
23
23
  /* ========================================
24
- NEUTRAL COLORS (Gray Scale)
24
+ NEUTRAL COLORS (Warm Beige / Espresso scale)
25
25
  ======================================== */
26
- --gray-50: 210 20% 98%;
27
- --gray-100: 214 18% 96%;
28
- --gray-200: 213 14% 90%;
29
- --gray-300: 212 10% 83%;
30
- --gray-400: 215 8% 64%;
31
- --gray-500: 216 6% 46%;
32
- --gray-600: 215 10% 34%;
33
- --gray-700: 217 14% 26%;
34
- --gray-800: 219 18% 18%;
35
- --gray-900: 221 39% 11%;
26
+ --gray-50: 45 25% 97%;
27
+ /* #F9F8F5 Main App Background */
28
+ --gray-100: 45 14% 94%;
29
+ /* #F3F2EE Sidebar Background */
30
+ --gray-200: 45 14% 88%;
31
+ /* Active / Hover states */
32
+ --gray-300: 45 10% 80%;
33
+ --gray-400: 45 10% 60%;
34
+ --gray-500: 45 10% 50%;
35
+ --gray-600: 45 3% 39%;
36
+ /* #656561 Inactive text/icon */
37
+ --gray-700: 45 5% 25%;
38
+ --gray-800: 45 5% 20%;
39
+ /* Secondary text */
40
+ --gray-900: 45 5% 12%;
41
+ /* #1F1F1D Primary text */
36
42
 
37
43
  /* ========================================
38
44
  SEMANTIC COLORS
39
45
  ======================================== */
40
- /* Background - matches sidebar #f0f2f7 */
41
- --background: 223 37% 96%;
42
- --background-secondary: 223 20% 93%;
43
- --background-tertiary: 223 15% 89%;
46
+ /* Backgrounds */
47
+ --background: var(--gray-50);
48
+ --background-secondary: var(--gray-100);
49
+ --background-tertiary: var(--gray-200);
44
50
 
45
51
  /* Foreground (Text) */
46
- --foreground: 221 39% 11%;
47
- --foreground-secondary: 219 18% 18%;
48
- --foreground-tertiary: 216 6% 46%;
49
- --foreground-muted: 215 8% 64%;
52
+ --foreground: var(--gray-800);
53
+ --foreground-secondary: var(--gray-700);
54
+ --foreground-tertiary: var(--gray-500);
55
+ --foreground-muted: var(--gray-400);
50
56
 
51
57
  /* Primary (Brand) */
52
- --primary: 217 80% 55%;
53
- --primary-hover: 217 70% 45%;
54
- --primary-active: 217 60% 35%;
58
+ --primary: var(--brand-500);
59
+ --primary-hover: var(--brand-600);
60
+ --primary-active: var(--brand-700);
55
61
  --primary-foreground: 0 0% 100%;
56
62
 
57
63
  /* Secondary */
58
- --secondary: 214 18% 96%;
59
- --secondary-hover: 213 14% 90%;
60
- --secondary-foreground: 219 18% 18%;
64
+ --secondary: var(--gray-100);
65
+ --secondary-hover: var(--gray-200);
66
+ --secondary-foreground: var(--gray-800);
61
67
 
62
68
  /* Accent */
63
- --accent: 217 100% 97%;
64
- --accent-foreground: 217 60% 35%;
69
+ --accent: var(--brand-50);
70
+ --accent-foreground: var(--brand-700);
65
71
 
66
72
  /* Muted */
67
- --muted: 214 18% 96%;
68
- --muted-foreground: 216 6% 46%;
73
+ --muted: var(--gray-100);
74
+ --muted-foreground: var(--gray-500);
69
75
 
70
76
  /* Destructive */
71
77
  --destructive: 0 84% 60%;
@@ -84,26 +90,26 @@
84
90
  ======================================== */
85
91
  /* Card */
86
92
  --card: 0 0% 100%;
87
- --card-foreground: 221 39% 11%;
88
- --card-border: 213 14% 90%;
93
+ --card-foreground: var(--gray-800);
94
+ --card-border: var(--gray-200);
89
95
 
90
96
  /* Popover */
91
97
  --popover: 0 0% 100%;
92
- --popover-foreground: 221 39% 11%;
98
+ --popover-foreground: var(--gray-800);
93
99
 
94
100
  /* Border */
95
- --border: 213 14% 90%;
96
- --border-hover: 212 10% 83%;
97
- --border-active: 217 80% 55%;
101
+ --border: var(--gray-200);
102
+ --border-hover: var(--gray-300);
103
+ --border-active: var(--brand-500);
98
104
 
99
105
  /* Input */
100
106
  --input: 0 0% 100%;
101
- --input-border: 213 14% 90%;
102
- --input-focus: 217 80% 55%;
107
+ --input-border: var(--gray-200);
108
+ --input-focus: var(--brand-500);
103
109
 
104
110
  /* Ring (Focus) */
105
- --ring: 217 80% 55%;
106
- --ring-offset: 0 0% 100%;
111
+ --ring: var(--brand-500);
112
+ --ring-offset: var(--gray-50);
107
113
 
108
114
  /* ========================================
109
115
  SPACING SYSTEM
@@ -201,6 +207,78 @@
201
207
  }
202
208
  }
203
209
 
210
+ @layer base {
211
+ :root[data-theme="cool"] {
212
+ /* ========================================
213
+ BRAND COLORS (Cool Blue)
214
+ ======================================== */
215
+ --brand-50: 214 100% 97%;
216
+ --brand-100: 214 95% 93%;
217
+ --brand-200: 213 97% 87%;
218
+ --brand-300: 212 96% 78%;
219
+ --brand-400: 213 94% 68%;
220
+ --brand-500: 217 91% 60%;
221
+ --brand-600: 221 83% 53%;
222
+ --brand-700: 224 76% 48%;
223
+ --brand-800: 226 71% 40%;
224
+ --brand-900: 224 64% 33%;
225
+
226
+ /* ========================================
227
+ NEUTRAL COLORS (Cool Slate)
228
+ ======================================== */
229
+ --gray-50: 210 20% 98%;
230
+ --gray-100: 220 14% 96%;
231
+ --gray-200: 220 13% 91%;
232
+ --gray-300: 216 12% 84%;
233
+ --gray-400: 218 11% 65%;
234
+ --gray-500: 220 9% 46%;
235
+ --gray-600: 215 14% 34%;
236
+ --gray-700: 217 19% 27%;
237
+ --gray-800: 220 26% 18%;
238
+ --gray-900: 224 39% 11%;
239
+
240
+ /* Semantic Colors */
241
+ --background: var(--gray-50);
242
+ --background-secondary: var(--gray-100);
243
+ --background-tertiary: var(--gray-200);
244
+ --foreground: var(--gray-800);
245
+ --foreground-secondary: var(--gray-700);
246
+ --foreground-tertiary: var(--gray-500);
247
+ --foreground-muted: var(--gray-400);
248
+ --primary: var(--brand-500);
249
+ --primary-hover: var(--brand-600);
250
+ --primary-active: var(--brand-700);
251
+ --secondary: var(--gray-100);
252
+ --secondary-hover: var(--gray-200);
253
+ --secondary-foreground: var(--gray-800);
254
+ --accent: var(--brand-50);
255
+ --accent-foreground: var(--brand-700);
256
+ --muted: var(--gray-100);
257
+ --muted-foreground: var(--gray-500);
258
+ --card: 0 0% 100%;
259
+ --card-foreground: var(--gray-800);
260
+ --card-border: var(--gray-200);
261
+ --popover: 0 0% 100%;
262
+ --popover-foreground: var(--gray-800);
263
+ --border: var(--gray-200);
264
+ --border-hover: var(--gray-300);
265
+ --border-active: var(--brand-500);
266
+ --input: 0 0% 100%;
267
+ --input-border: var(--gray-200);
268
+ --input-focus: var(--brand-500);
269
+ --ring: var(--brand-500);
270
+ --ring-offset: var(--gray-50);
271
+
272
+ /* Shadows (cool tint) */
273
+ --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
274
+ --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
275
+ --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.06), 0 2px 4px -2px rgb(15 23 42 / 0.04);
276
+ --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.06), 0 4px 6px -4px rgb(15 23 42 / 0.04);
277
+ --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.08), 0 8px 10px -6px rgb(15 23 42 / 0.04);
278
+ --shadow-2xl: 0 25px 50px -12px rgb(15 23 42 / 0.14);
279
+ }
280
+ }
281
+
204
282
  @layer utilities {
205
283
  /* ========================================
206
284
  UTILITY CLASSES
@@ -291,4 +369,4 @@
291
369
  --tw-ring-color: hsl(var(--ring));
292
370
  --tw-ring-offset-color: hsl(var(--ring-offset));
293
371
  }
294
- }
372
+ }