@fylib/theme 0.1.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.
@@ -0,0 +1,397 @@
1
+ export const fineyPuffy1Theme = {
2
+ name: 'finey-puffy-1',
3
+ backgroundEffect: {
4
+ name: 'hearts',
5
+ intensity: 20,
6
+ speed: .4,
7
+ loop: true
8
+ },
9
+ wallpaper: {
10
+ name: 'hearts',
11
+ type: 'pattern',
12
+ opacity: 0.5
13
+ },
14
+ tokens: {
15
+ colors: {
16
+ primary: '#ff85a2', // Rosa vibrante mas suave
17
+ secondary: '#ffb3c6', // Rosa pastel
18
+ success: '#a2d2ff', // Azul candy (sucesso no tema puffy)
19
+ danger: '#ff4d6d', // Rosa forte para erro
20
+ warning: '#ffe5ec', // Rosa claríssimo
21
+ info: '#c8b6ff', // Roxo lavanda
22
+ white: '#ffffff',
23
+ black: '#4a0e1c', // Marrom avermelhado escuro em vez de preto puro
24
+ background: '#fff0f3', // Fundo rosa blush ultra leve
25
+ text: '#590d22', // Texto vinho escuro para contraste suave
26
+ 'primary-rgb': '255, 133, 162',
27
+ surface: '#ffccd5'
28
+ },
29
+ spacing: {
30
+ xs: '4px',
31
+ sm: '8px',
32
+ md: '16px',
33
+ lg: '24px',
34
+ xl: '32px',
35
+ },
36
+ borderRadius: {
37
+ sm: '8px', // Bordas mais arredondadas que o padrão
38
+ md: '16px',
39
+ lg: '24px',
40
+ full: '9999px',
41
+ },
42
+ typography: {
43
+ fontFamily: {
44
+ base: '"Quicksand", "Inter", sans-serif',
45
+ heading: '"Quicksand", "Inter", sans-serif',
46
+ mono: 'monospace'
47
+ },
48
+ fontSize: {
49
+ sm: '13px',
50
+ md: '16px',
51
+ lg: '20px',
52
+ },
53
+ fontWeight: {
54
+ normal: '500', // Levemente mais gordinho
55
+ bold: '700',
56
+ }
57
+ },
58
+ layout: {
59
+ app: { gap: '12px' },
60
+ header: {
61
+ height: '72px',
62
+ padding: '0 32px',
63
+ background: '#ffffff',
64
+ shadow: '0 4px 20px rgba(255, 133, 162, 0.15)',
65
+ toggle: {
66
+ background: '#ff85a2',
67
+ textColor: '#ffffff',
68
+ borderRadius: '12px',
69
+ borderWidth: '0px',
70
+ borderColor: 'transparent',
71
+ icon: 'heart' // Ícone temático
72
+ }
73
+ },
74
+ sidebar: {
75
+ width: '280px',
76
+ padding: '24px 12px',
77
+ background: '#ffffff',
78
+ shadow: '4px 0 20px rgba(255, 133, 162, 0.15)',
79
+ toggle: {
80
+ mode: 'tongue',
81
+ tonguePosition: 'middle',
82
+ background: '#ff85a2',
83
+ textColor: '#ffffff',
84
+ borderRadius: '0 12px 12px 0',
85
+ borderColor: 'transparent',
86
+ icon: 'caret-right'
87
+ }
88
+ },
89
+ content: { padding: '32px' }
90
+ },
91
+ effects: {
92
+ button: {
93
+ background: 'linear-gradient(135deg, #ff85a2 0%, #ffb3c6 100%)',
94
+ borderColor: 'transparent',
95
+ shadow: '0 4px 15px rgba(255, 133, 162, 0.3)',
96
+ textColor: '#ffffff'
97
+ },
98
+ window: {
99
+ background: '#ffffff',
100
+ shadow: '0 20px 50px rgba(255, 133, 162, 0.12)'
101
+ },
102
+ input: {
103
+ background: '#ffffff',
104
+ borderColor: '#ffccd5',
105
+ shadow: 'none',
106
+ placeholderColor: '#ffb3c6',
107
+ borderWidth: '2px', // Borda mais visível
108
+ borderRadius: '12px',
109
+ icons: {
110
+ mode: 'inside',
111
+ name: 'sparkle',
112
+ position: 'left',
113
+ color: '#ff85a2'
114
+ }
115
+ },
116
+ card: {
117
+ background: '#ffffff',
118
+ borderColor: '#ffe5ec',
119
+ shadow: '0 10px 40px rgba(255, 133, 162, 0.08)',
120
+ dividerColor: '#fff0f3',
121
+ icons: {
122
+ header: 'heart',
123
+ footer: 'sparkle'
124
+ }
125
+ },
126
+ badge: {
127
+ background: '#ff4d6d',
128
+ textColor: '#ffffff',
129
+ borderRadius: '8px',
130
+ animation: 'puffy-sparkle' // Nova animação
131
+ },
132
+ toast: {
133
+ background: '#ffffff',
134
+ borderColor: '#ff85a2',
135
+ textColor: '#590d22',
136
+ shadow: '0 15px 45px rgba(255, 133, 162, 0.2)',
137
+ borderRadius: '16px',
138
+ iconColor: {
139
+ info: '#ff85a2',
140
+ success: '#a2d2ff',
141
+ warning: '#ffb3c6',
142
+ error: '#ff4d6d'
143
+ }
144
+ },
145
+ modal: {
146
+ background: '#ffffff',
147
+ borderColor: '#ffccd5',
148
+ shadow: '0 30px 70px rgba(255, 133, 162, 0.25)',
149
+ overlayColor: 'rgba(74, 14, 28, 0.15)',
150
+ borderWidth: '2px',
151
+ borderRadius: '24px',
152
+ dividerColor: '#fff0f3'
153
+ },
154
+ select: {
155
+ background: '#ffffff',
156
+ borderColor: '#ffccd5',
157
+ shadow: '0 8px 20px rgba(255, 133, 162, 0.08)',
158
+ borderWidth: '2px',
159
+ borderRadius: '12px'
160
+ },
161
+ table: {
162
+ background: '#ffffff',
163
+ borderColor: '#fff0f3',
164
+ headerBackground: '#fff0f3',
165
+ rowHoverBackground: '#fff5f7',
166
+ stripedBackground: '#fffafa',
167
+ textColor: '#590d22',
168
+ headerTextColor: '#ff85a2'
169
+ },
170
+ chart: {
171
+ background: 'transparent',
172
+ borderColor: '#fff0f3',
173
+ gridColor: '#fff0f3',
174
+ labelColor: '#ffb3c6',
175
+ colors: ['#ff85a2', '#a2d2ff', '#c8b6ff', '#ffb3c6', '#ffe5ec'],
176
+ fontFamily: 'inherit'
177
+ },
178
+ accordion: {
179
+ background: '#ffffff',
180
+ borderColor: '#ffe5ec',
181
+ shadow: 'none',
182
+ dividerColor: '#fff0f3',
183
+ borderRadius: '16px',
184
+ headerBackground: 'transparent'
185
+ },
186
+ notificationMenu: {
187
+ button: {
188
+ background: 'transparent',
189
+ textColor: '#ff85a2',
190
+ icon: 'bell-ringing',
191
+ badgeBackground: '#ff4d6d',
192
+ badgeTextColor: '#ffffff'
193
+ },
194
+ dropdown: {
195
+ background: '#ffffff',
196
+ borderColor: '#ffccd5',
197
+ shadow: '0 20px 50px rgba(255, 133, 162, 0.2)',
198
+ width: '340px',
199
+ maxHeight: '450px',
200
+ borderRadius: '20px'
201
+ },
202
+ item: {
203
+ background: 'transparent',
204
+ hoverBackground: '#fff0f3',
205
+ textColor: '#590d22',
206
+ descriptionColor: '#ffb3c6',
207
+ dividerColor: '#fff5f7',
208
+ unreadIndicator: '#ff85a2'
209
+ },
210
+ config: {
211
+ showAll: false,
212
+ limit: 5,
213
+ allowClear: true,
214
+ accordionMode: true,
215
+ showViewAll: true,
216
+ viewAllPosition: 'footer-right'
217
+ }
218
+ }
219
+ },
220
+ icons: {
221
+ defaultSet: 'ph',
222
+ size: {
223
+ sm: '14px',
224
+ md: '18px',
225
+ lg: '24px'
226
+ },
227
+ strokeWidth: '2',
228
+ variant: 'duotone'
229
+ },
230
+ scrollbar: {
231
+ width: '12px',
232
+ trackBackground: '#fff0f3',
233
+ thumbBackground: 'linear-gradient(180deg, #ffb3c6 0%, #ff85a2 100%)',
234
+ thumbHoverBackground: 'linear-gradient(180deg, #ffc8d6 0%, #ff9bb4 100%)',
235
+ thumbBorderRadius: '10px',
236
+ thumbBorderWidth: '2px',
237
+ thumbBorderColor: '#fff0f3'
238
+ }
239
+ },
240
+ darkTokens: {
241
+ colors: {
242
+ primary: '#ff85a2',
243
+ secondary: '#590d22',
244
+ background: '#1a0a0d', // Cinza quase preto com toque vinho
245
+ text: '#fff0f3',
246
+ surface: '#2d0f16',
247
+ 'primary-rgb': '255, 133, 162'
248
+ },
249
+ layout: {
250
+ header: {
251
+ background: '#2d0f16',
252
+ shadow: '0 4px 20px rgba(0, 0, 0, 0.4)',
253
+ toggle: {
254
+ background: '#ff85a2',
255
+ textColor: '#ffffff',
256
+ borderRadius: '12px'
257
+ }
258
+ },
259
+ sidebar: {
260
+ background: '#1a0a0d',
261
+ toggle: {
262
+ background: '#ff85a2',
263
+ textColor: '#ffffff',
264
+ borderRadius: '0 12px 12px 0'
265
+ }
266
+ }
267
+ },
268
+ effects: {
269
+ window: {
270
+ background: '#2d0f16',
271
+ shadow: '0 20px 50px rgba(0, 0, 0, 0.5)'
272
+ },
273
+ card: {
274
+ background: '#2d0f16',
275
+ borderColor: '#4a0e1c',
276
+ shadow: '0 10px 40px rgba(0, 0, 0, 0.3)'
277
+ },
278
+ input: {
279
+ background: '#1a0a0d',
280
+ borderColor: '#4a0e1c',
281
+ textColor: '#fff0f3'
282
+ },
283
+ modal: {
284
+ background: '#2d0f16',
285
+ borderColor: '#4a0e1c',
286
+ shadow: '0 30px 80px rgba(0, 0, 0, 0.6)',
287
+ overlayColor: 'rgba(0, 0, 0, 0.6)',
288
+ borderWidth: '2px',
289
+ borderRadius: '24px',
290
+ dividerColor: '#4a0e1c'
291
+ },
292
+ select: {
293
+ background: '#1a0a0d',
294
+ borderColor: '#4a0e1c',
295
+ shadow: 'none',
296
+ borderWidth: '2px',
297
+ borderRadius: '12px'
298
+ },
299
+ table: {
300
+ background: '#2d0f16',
301
+ borderColor: '#4a0e1c',
302
+ headerBackground: '#4a0e1c',
303
+ rowHoverBackground: '#3a121b',
304
+ stripedBackground: '#2d0f16',
305
+ textColor: '#fff0f3',
306
+ headerTextColor: '#ff85a2'
307
+ },
308
+ chart: {
309
+ background: 'transparent',
310
+ gridColor: '#4a0e1c',
311
+ labelColor: '#ffb3c6'
312
+ },
313
+ accordion: {
314
+ background: '#2d0f16',
315
+ borderColor: '#4a0e1c',
316
+ shadow: 'none',
317
+ dividerColor: '#4a0e1c',
318
+ borderRadius: '16px',
319
+ headerBackground: 'transparent'
320
+ },
321
+ badge: {
322
+ background: '#ff4d6d',
323
+ textColor: '#ffffff'
324
+ },
325
+ toast: {
326
+ background: '#2d0f16',
327
+ borderColor: '#ff85a2',
328
+ textColor: '#fff0f3',
329
+ shadow: '0 15px 45px rgba(0, 0, 0, 0.4)',
330
+ borderRadius: '16px'
331
+ },
332
+ notificationMenu: {
333
+ button: {
334
+ background: 'transparent',
335
+ textColor: '#ff85a2',
336
+ icon: 'bell-ringing',
337
+ badgeBackground: '#ff4d6d',
338
+ badgeTextColor: '#ffffff'
339
+ },
340
+ dropdown: {
341
+ background: '#2d0f16',
342
+ borderColor: '#4a0e1c',
343
+ shadow: '0 20px 60px rgba(0, 0, 0, 0.6)',
344
+ width: '340px',
345
+ maxHeight: '450px',
346
+ borderRadius: '20px'
347
+ },
348
+ item: {
349
+ background: 'transparent',
350
+ hoverBackground: '#3a121b',
351
+ textColor: '#fff0f3',
352
+ descriptionColor: '#ffb3c6',
353
+ dividerColor: '#4a0e1c',
354
+ unreadIndicator: '#ff85a2'
355
+ }
356
+ }
357
+ }
358
+ },
359
+ componentAnimations: {
360
+ 'fy-button': {
361
+ hover: 'button-puffy-bounce',
362
+ click: 'button-puffy-press'
363
+ },
364
+ 'fy-card': {
365
+ enter: 'card-puffy-float'
366
+ },
367
+ 'fy-input': {
368
+ focus: 'input-puffy-glow'
369
+ },
370
+ 'fy-select': {
371
+ focus: 'input-puffy-glow'
372
+ },
373
+ 'fy-layout': {
374
+ enter: 'layout-fade-in'
375
+ },
376
+ 'fy-slot:header': {
377
+ open: 'header-menu-slide-in',
378
+ close: 'header-menu-slide-out'
379
+ },
380
+ 'fy-slot:sidebar': {
381
+ open: 'sidebar-slide-in',
382
+ close: 'sidebar-slide-out'
383
+ },
384
+ 'fy-notification-menu': {
385
+ open: 'dropdown-in',
386
+ close: 'dropdown-out'
387
+ },
388
+ 'fy-accordion': {
389
+ expand: 'accordion-expand',
390
+ collapse: 'accordion-collapse'
391
+ },
392
+ 'fy-table': {
393
+ enter: 'table-fade-in',
394
+ rowEnter: 'table-row-enter'
395
+ }
396
+ }
397
+ };
@@ -0,0 +1,2 @@
1
+ import { ThemeDefinition } from '@fylib/core';
2
+ export declare const fineyWorkbench1Theme: ThemeDefinition;