xertica-ui 1.0.0 → 1.2.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.
Files changed (10) hide show
  1. package/bin/cli.ts +119 -7
  2. package/components/ui/google-maps-loader.tsx +31 -26
  3. package/components/ui/map.tsx +11 -11
  4. package/components/ui/route-map.tsx +13 -13
  5. package/components/ui/xertica-assistant.tsx +127 -124
  6. package/contexts/BrandColorsContext.tsx +55 -389
  7. package/contexts/theme-data.ts +340 -0
  8. package/dist/cli.js +400 -20810
  9. package/guidelines/Guidelines.md +643 -46
  10. package/package.json +1 -1
package/contexts/theme-data.ts ADDED
@@ -0,0 +1,340 @@
1
+ export interface BrandColors {
2
+ // Main Colors
3
+ primary: string;
4
+ primaryForeground: string;
5
+ primaryLight: string; // Used for backgrounds
6
+
7
+ // Dark Mode Overrides
8
+ primaryDarkMode: string;
9
+ primaryForegroundDark: string;
10
+
11
+ // Sidebar Colors
12
+ sidebarLight: string;
13
+ sidebarDark: string;
14
+
15
+ // Gradients
16
+ gradientStart: string;
17
+ gradientEnd: string;
18
+ gradientStartDark: string;
19
+ gradientEndDark: string;
20
+
21
+ // Chart Colors (Light Mode) - Dark mode will be calculated or fixed
22
+ chart1: string;
23
+ chart2: string;
24
+ chart3: string;
25
+ chart4: string;
26
+ chart5: string;
27
+
28
+ // Optional: Radius override per theme
29
+ radius?: string;
30
+ }
31
+
32
+ export interface ColorTheme {
33
+ id: string;
34
+ name: string;
35
+ description: string;
36
+ colors: BrandColors;
37
+ preview: {
38
+ primary: string;
39
+ secondary: string;
40
+ accent: string;
41
+ };
42
+ }
43
+
44
+ // Shadcn Standard Palette Values (approximate hex for compatibility)
45
+ export const PALETTE = {
46
+ zinc: { 900: '#18181b', 50: '#fafafa' },
47
+ slate: { 900: '#0f172a', 50: '#f8fafc' },
48
+ stone: { 900: '#1c1917', 50: '#fafaf9' },
49
+ gray: { 900: '#111827', 50: '#f9fafb' },
50
+ neutral: { 900: '#171717', 50: '#fafafa' },
51
+ red: { 600: '#dc2626', 500: '#ef4444' },
52
+ rose: { 600: '#e11d48', 500: '#f43f5e' },
53
+ orange: { 600: '#ea580c', 500: '#f97316' },
54
+ green: { 600: '#16a34a', 500: '#22c55e' },
55
+ blue: { 600: '#2563eb', 500: '#3b82f6' },
56
+ yellow: { 600: '#ca8a04', 500: '#eab308' },
57
+ violet: { 600: '#7c3aed', 500: '#8b5cf6' },
58
+ };
59
+
60
+ export const colorThemes: ColorTheme[] = [
61
+ {
62
+ id: 'xertica-original',
63
+ name: 'Xertica Original',
64
+ description: 'A identidade visual clássica da Xertica com o gradiente original',
65
+ colors: {
66
+ primary: '#2C275B',
67
+ primaryForeground: '#FFFFFF',
68
+ primaryLight: '#5B568F',
69
+ primaryDarkMode: '#72CDFD',
70
+ primaryForegroundDark: '#09090B',
71
+
72
+ sidebarLight: '#2C275B', // Primary Color
73
+ sidebarDark: '#1a1928', // Original Dark BG
74
+
75
+ gradientStart: '#FDB0F2',
76
+ gradientEnd: '#72CDFD',
77
+ gradientStartDark: '#7B4A7A',
78
+ gradientEndDark: '#3A5C7D',
79
+
80
+ chart1: '#2C275B',
81
+ chart2: '#FDB0F2',
82
+ chart3: '#72CDFD',
83
+ chart4: '#5B568F',
84
+ chart5: '#4F46E5',
85
+ },
86
+ preview: {
87
+ primary: '#2C275B',
88
+ secondary: '#FDB0F2',
89
+ accent: '#72CDFD',
90
+ },
91
+ },
92
+ {
93
+ id: 'zinc',
94
+ name: 'Zinc',
95
+ description: 'Minimalista, sério e elegante (Escala de Cinza)',
96
+ colors: {
97
+ primary: '#18181B',
98
+ primaryForeground: '#FAFAFA',
99
+ primaryLight: '#E4E4E7',
100
+ primaryDarkMode: '#FAFAFA',
101
+ primaryForegroundDark: '#18181B',
102
+
103
+ sidebarLight: '#18181B', // Primary Color
104
+ sidebarDark: '#09090B',
105
+
106
+ gradientStart: '#52525B',
107
+ gradientEnd: '#D4D4D8',
108
+ gradientStartDark: '#27272A',
109
+ gradientEndDark: '#52525B',
110
+
111
+ chart1: '#18181B',
112
+ chart2: '#52525B',
113
+ chart3: '#A1A1AA',
114
+ chart4: '#D4D4D8',
115
+ chart5: '#E4E4E7',
116
+ },
117
+ preview: {
118
+ primary: '#18181B',
119
+ secondary: '#52525B',
120
+ accent: '#E4E4E7',
121
+ },
122
+ },
123
+ {
124
+ id: 'slate',
125
+ name: 'Slate',
126
+ description: 'Profissional com tons de azul acinzentado',
127
+ colors: {
128
+ primary: '#0F172A',
129
+ primaryForeground: '#F8FAFC',
130
+ primaryLight: '#CBD5E1',
131
+ primaryDarkMode: '#F8FAFC',
132
+ primaryForegroundDark: '#0F172A',
133
+
134
+ sidebarLight: '#0F172A', // Primary Color
135
+ sidebarDark: '#020617',
136
+
137
+ gradientStart: '#475569',
138
+ gradientEnd: '#94A3B8',
139
+ gradientStartDark: '#1E293B',
140
+ gradientEndDark: '#475569',
141
+
142
+ chart1: '#0F172A',
143
+ chart2: '#475569',
144
+ chart3: '#94A3B8',
145
+ chart4: '#CBD5E1',
146
+ chart5: '#E2E8F0',
147
+ },
148
+ preview: {
149
+ primary: '#0F172A',
150
+ secondary: '#475569',
151
+ accent: '#94A3B8',
152
+ },
153
+ },
154
+ {
155
+ id: 'blue',
156
+ name: 'Blue',
157
+ description: 'Confiável e seguro, padrão corporativo',
158
+ colors: {
159
+ primary: '#2563EB',
160
+ primaryForeground: '#FFFFFF',
161
+ primaryLight: '#DBEAFE',
162
+ primaryDarkMode: '#3B82F6',
163
+ primaryForegroundDark: '#FFFFFF',
164
+
165
+ sidebarLight: '#1E3A8A', // Blue 900 (High Contrast Sidebar)
166
+ sidebarDark: '#172554',
167
+
168
+ gradientStart: '#2563EB',
169
+ gradientEnd: '#60A5FA',
170
+ gradientStartDark: '#1D4ED8',
171
+ gradientEndDark: '#2563EB',
172
+
173
+ chart1: '#2563EB',
174
+ chart2: '#3B82F6',
175
+ chart3: '#60A5FA',
176
+ chart4: '#93C5FD',
177
+ chart5: '#BFDBFE',
178
+ },
179
+ preview: {
180
+ primary: '#2563EB',
181
+ secondary: '#60A5FA',
182
+ accent: '#DBEAFE',
183
+ },
184
+ },
185
+ {
186
+ id: 'violet',
187
+ name: 'Violet',
188
+ description: 'Criativo e vibrante',
189
+ colors: {
190
+ primary: '#7C3AED',
191
+ primaryForeground: '#FFFFFF',
192
+ primaryLight: '#EDE9FE',
193
+ primaryDarkMode: '#8B5CF6',
194
+ primaryForegroundDark: '#FFFFFF',
195
+
196
+ sidebarLight: '#4C1D95', // Violet 900 (High Contrast Sidebar)
197
+ sidebarDark: '#2E1065',
198
+
199
+ gradientStart: '#7C3AED',
200
+ gradientEnd: '#A78BFA',
201
+ gradientStartDark: '#5B21B6',
202
+ gradientEndDark: '#7C3AED',
203
+
204
+ chart1: '#7C3AED',
205
+ chart2: '#8B5CF6',
206
+ chart3: '#A78BFA',
207
+ chart4: '#C4B5FD',
208
+ chart5: '#DDD6FE',
209
+ },
210
+ preview: {
211
+ primary: '#7C3AED',
212
+ secondary: '#A78BFA',
213
+ accent: '#EDE9FE',
214
+ },
215
+ },
216
+ {
217
+ id: 'rose',
218
+ name: 'Rose',
219
+ description: 'Elegante e suave',
220
+ colors: {
221
+ primary: '#BE123C', // Rose 700 (Better text contrast for Primary)
222
+ primaryForeground: '#FFFFFF',
223
+ primaryLight: '#FFE4E6',
224
+ primaryDarkMode: '#F43F5E',
225
+ primaryForegroundDark: '#FFFFFF',
226
+
227
+ sidebarLight: '#881337', // Rose 900 (High Contrast Sidebar)
228
+ sidebarDark: '#881337',
229
+
230
+ gradientStart: '#E11D48',
231
+ gradientEnd: '#FB7185',
232
+ gradientStartDark: '#9F1239',
233
+ gradientEndDark: '#E11D48',
234
+
235
+ chart1: '#E11D48',
236
+ chart2: '#F43F5E',
237
+ chart3: '#FB7185',
238
+ chart4: '#FDA4AF',
239
+ chart5: '#FECDD3',
240
+ },
241
+ preview: {
242
+ primary: '#BE123C',
243
+ secondary: '#FB7185',
244
+ accent: '#FFE4E6',
245
+ },
246
+ },
247
+ {
248
+ id: 'emerald',
249
+ name: 'Emerald',
250
+ description: 'Natural e equilibrado',
251
+ colors: {
252
+ primary: '#047857', // Emerald 700 (Better text contrast for Primary)
253
+ primaryForeground: '#FFFFFF',
254
+ primaryLight: '#D1FAE5',
255
+ primaryDarkMode: '#10B981',
256
+ primaryForegroundDark: '#FFFFFF',
257
+
258
+ sidebarLight: '#064E3B', // Emerald 900 (High Contrast Sidebar)
259
+ sidebarDark: '#064E3B',
260
+
261
+ gradientStart: '#059669',
262
+ gradientEnd: '#34D399',
263
+ gradientStartDark: '#064E3B',
264
+ gradientEndDark: '#059669',
265
+
266
+ chart1: '#059669',
267
+ chart2: '#10B981',
268
+ chart3: '#34D399',
269
+ chart4: '#6EE7B7',
270
+ chart5: '#A7F3D0',
271
+ },
272
+ preview: {
273
+ primary: '#047857',
274
+ secondary: '#34D399',
275
+ accent: '#D1FAE5',
276
+ },
277
+ },
278
+ {
279
+ id: 'amber',
280
+ name: 'Amber',
281
+ description: 'Quente e energético',
282
+ colors: {
283
+ primary: '#B45309', // Amber 700 (Better text contrast for Primary)
284
+ primaryForeground: '#FFFFFF',
285
+ primaryLight: '#FEF3C7',
286
+ primaryDarkMode: '#F59E0B',
287
+ primaryForegroundDark: '#FFFFFF',
288
+
289
+ sidebarLight: '#78350F', // Amber 900 (High Contrast Sidebar)
290
+ sidebarDark: '#78350F',
291
+
292
+ gradientStart: '#D97706',
293
+ gradientEnd: '#FBBF24',
294
+ gradientStartDark: '#92400E',
295
+ gradientEndDark: '#D97706',
296
+
297
+ chart1: '#D97706',
298
+ chart2: '#F59E0B',
299
+ chart3: '#FBBF24',
300
+ chart4: '#FDE68A',
301
+ chart5: '#FEF3C7',
302
+ },
303
+ preview: {
304
+ primary: '#B45309',
305
+ secondary: '#FBBF24',
306
+ accent: '#FEF3C7',
307
+ },
308
+ },
309
+ {
310
+ id: 'orange',
311
+ name: 'Orange',
312
+ description: 'Vibrante e amigável',
313
+ colors: {
314
+ primary: '#C2410C', // Orange 700 (Better text contrast for Primary)
315
+ primaryForeground: '#FFFFFF',
316
+ primaryLight: '#FFEDD5',
317
+ primaryDarkMode: '#F97316',
318
+ primaryForegroundDark: '#FFFFFF',
319
+
320
+ sidebarLight: '#7C2D12', // Orange 900 (High Contrast Sidebar)
321
+ sidebarDark: '#7C2D12',
322
+
323
+ gradientStart: '#EA580C',
324
+ gradientEnd: '#FB923C',
325
+ gradientStartDark: '#9A3412',
326
+ gradientEndDark: '#EA580C',
327
+
328
+ chart1: '#EA580C',
329
+ chart2: '#F97316',
330
+ chart3: '#FB923C',
331
+ chart4: '#FDBA74',
332
+ chart5: '#FED7AA',
333
+ },
334
+ preview: {
335
+ primary: '#C2410C',
336
+ secondary: '#FB923C',
337
+ accent: '#FFEDD5',
338
+ },
339
+ },
340
+ ];