@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,2 @@
1
+ import { ThemeDefinition } from '@fylib/core';
2
+ export declare const christmasTheme: ThemeDefinition;
@@ -0,0 +1,372 @@
1
+ export const christmasTheme = {
2
+ name: 'christmas',
3
+ backgroundEffect: {
4
+ name: 'snow',
5
+ intensity: 150,
6
+ speed: 1,
7
+ loop: true
8
+ },
9
+ wallpaper: {
10
+ name: 'pine-trees',
11
+ type: 'pattern',
12
+ opacity: 0.1
13
+ },
14
+ tokens: {
15
+ colors: {
16
+ primary: '#af111c', // Vermelho Natal
17
+ secondary: '#2f5233', // Verde Natal
18
+ success: '#22c55e',
19
+ danger: '#af111c',
20
+ warning: '#f59e0b',
21
+ info: '#3b82f6',
22
+ white: '#ffffff',
23
+ black: '#000000',
24
+ background: '#f8f9fa',
25
+ text: '#1a472a',
26
+ 'primary-rgb': '175, 17, 28',
27
+ },
28
+ spacing: {
29
+ xs: '4px',
30
+ sm: '8px',
31
+ md: '16px',
32
+ lg: '24px',
33
+ xl: '32px',
34
+ },
35
+ borderRadius: {
36
+ sm: '8px',
37
+ md: '16px', // Bordas mais arredondadas para o Natal
38
+ lg: '24px',
39
+ full: '9999px',
40
+ },
41
+ typography: {
42
+ fontFamily: {
43
+ base: '"Playfair Display", "Times New Roman", ui-serif, Georgia, serif',
44
+ heading: '"Playfair Display", "Times New Roman", ui-serif, Georgia, serif',
45
+ mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
46
+ },
47
+ fontSize: {
48
+ sm: '12px',
49
+ md: '16px',
50
+ lg: '20px',
51
+ },
52
+ fontWeight: {
53
+ normal: '400',
54
+ bold: '700',
55
+ }
56
+ },
57
+ layout: {
58
+ app: { gap: '0' },
59
+ header: {
60
+ height: '64px',
61
+ padding: '0 24px',
62
+ shadow: '0 1px 0 rgba(0,0,0,0.06)',
63
+ toggle: {
64
+ background: 'var(--fy-colors-secondary)',
65
+ textColor: 'var(--fy-colors-white)',
66
+ borderRadius: '9999px',
67
+ icon: 'menu'
68
+ }
69
+ },
70
+ sidebar: {
71
+ width: '260px',
72
+ padding: '16px 0',
73
+ toggle: {
74
+ background: 'var(--fy-colors-secondary)',
75
+ textColor: 'var(--fy-colors-white)',
76
+ borderRadius: '9999px',
77
+ icon: 'menu',
78
+ mode: 'floating',
79
+ tonguePosition: 'bottom'
80
+ }
81
+ },
82
+ content: { padding: '24px' }
83
+ },
84
+ effects: {
85
+ button: {
86
+ background: 'linear-gradient(to bottom, #fff 0%, #ffd9d9 40%, #f2b3b3 100%)',
87
+ borderColor: '#8a1f1f',
88
+ shadow: 'inset 0 0 0 1px rgba(255,255,255,0.6)',
89
+ textColor: '#2f5233'
90
+ },
91
+ window: {
92
+ background: 'var(--fy-colors-background)',
93
+ shadow: '0 4px 16px rgba(0,0,0,0.15)'
94
+ },
95
+ modal: {
96
+ background: '#ffffff',
97
+ borderColor: 'rgba(47, 82, 51, 0.25)',
98
+ shadow: '0 24px 60px rgba(0,0,0,0.25)',
99
+ overlayColor: 'rgba(0,0,0,0.45)',
100
+ borderWidth: '1px',
101
+ borderRadius: '16px',
102
+ dividerColor: 'rgba(47, 82, 51, 0.15)'
103
+ },
104
+ input: {
105
+ background: '#ffffff',
106
+ borderColor: 'rgba(47, 82, 51, 0.25)',
107
+ shadow: 'none',
108
+ placeholderColor: '#6b7280',
109
+ borderWidth: '1px',
110
+ borderRadius: '16px'
111
+ },
112
+ table: {
113
+ background: '#ffffff',
114
+ borderColor: 'rgba(175, 17, 28, 0.15)',
115
+ headerBackground: 'rgba(175, 17, 28, 0.05)',
116
+ rowHoverBackground: 'rgba(47, 82, 51, 0.05)',
117
+ stripedBackground: 'rgba(175, 17, 28, 0.02)',
118
+ textColor: '#1a472a',
119
+ headerTextColor: '#af111c'
120
+ },
121
+ chart: {
122
+ background: 'transparent',
123
+ borderColor: 'rgba(175, 17, 28, 0.15)',
124
+ gridColor: 'rgba(0,0,0,0.05)',
125
+ labelColor: '#2f5233',
126
+ colors: ['#af111c', '#2f5233', '#f59e0b', '#3b82f6', '#d42426'],
127
+ fontFamily: 'inherit'
128
+ },
129
+ select: {
130
+ background: '#ffffff',
131
+ borderColor: 'rgba(47, 82, 51, 0.25)',
132
+ shadow: 'none',
133
+ borderWidth: '1px',
134
+ borderRadius: '16px'
135
+ },
136
+ accordion: {
137
+ background: '#ffffff',
138
+ borderColor: 'rgba(47, 82, 51, 0.25)',
139
+ shadow: 'none',
140
+ dividerColor: 'rgba(47, 82, 51, 0.15)',
141
+ borderRadius: '16px',
142
+ headerBackground: 'transparent'
143
+ },
144
+ card: {
145
+ background: '#ffffff',
146
+ borderColor: 'rgba(47, 82, 51, 0.15)',
147
+ shadow: '0 10px 30px rgba(47, 82, 51, 0.12)',
148
+ dividerColor: 'rgba(47, 82, 51, 0.15)',
149
+ icons: { header: '', footer: '' }
150
+ },
151
+ badge: {
152
+ background: '#af111c',
153
+ textColor: '#ffffff',
154
+ borderRadius: '14px',
155
+ animation: 'shine'
156
+ },
157
+ toast: {
158
+ background: '#ffffff',
159
+ borderColor: '#af111c',
160
+ textColor: '#1a472a',
161
+ shadow: '0 10px 30px rgba(175, 17, 28, 0.15)',
162
+ borderRadius: '16px',
163
+ padding: '16px 20px',
164
+ gap: '14px',
165
+ minWidth: '320px',
166
+ maxWidth: '420px',
167
+ titleFontSize: '16px',
168
+ titleFontWeight: '700',
169
+ messageFontSize: '14px',
170
+ messageLineHeight: '1.4',
171
+ iconSize: '24px',
172
+ closeIcon: 'x',
173
+ closeButtonSize: '20px',
174
+ closeButtonOpacity: '0.6',
175
+ closeButtonHoverOpacity: '1',
176
+ closeButtonBackground: '#af111c',
177
+ closeButtonBorder: 'none',
178
+ closeButtonBorderRadius: '50%',
179
+ iconColor: {
180
+ info: '#3b82f6',
181
+ success: '#22c55e',
182
+ warning: '#f59e0b',
183
+ error: '#af111c'
184
+ },
185
+ icons: {
186
+ info: 'snowflake-fill',
187
+ success: 'gift-fill',
188
+ warning: 'star-fill',
189
+ error: 'x-circle-fill'
190
+ }
191
+ },
192
+ notificationMenu: {
193
+ button: {
194
+ background: 'transparent',
195
+ textColor: 'var(--fy-colors-white)',
196
+ icon: 'bell',
197
+ badgeBackground: '#af111c',
198
+ badgeTextColor: '#ffffff'
199
+ },
200
+ dropdown: {
201
+ background: '#ffffff',
202
+ borderColor: 'rgba(47, 82, 51, 0.15)',
203
+ shadow: '0 20px 40px rgba(47, 82, 51, 0.2)',
204
+ width: '320px',
205
+ maxHeight: '400px',
206
+ borderRadius: '20px'
207
+ },
208
+ item: {
209
+ background: 'transparent',
210
+ hoverBackground: 'rgba(47, 82, 51, 0.05)',
211
+ textColor: '#1a472a',
212
+ descriptionColor: '#2f5233',
213
+ dividerColor: 'rgba(175, 17, 28, 0.08)',
214
+ unreadIndicator: '#af111c'
215
+ },
216
+ config: {
217
+ showAll: false,
218
+ limit: 5,
219
+ allowClear: true,
220
+ accordionMode: true,
221
+ showViewAll: true,
222
+ viewAllPosition: 'footer-right'
223
+ }
224
+ }
225
+ },
226
+ icons: {
227
+ defaultSet: 'ph',
228
+ size: { sm: '12px', md: '16px', lg: '20px' },
229
+ strokeWidth: '1.5',
230
+ variant: 'duotone'
231
+ }
232
+ },
233
+ darkTokens: {
234
+ colors: {
235
+ primary: '#d42426',
236
+ background: '#0a1a0f',
237
+ text: '#e8f5e9',
238
+ secondary: '#4caf50',
239
+ surface: '#102016'
240
+ },
241
+ effects: {
242
+ card: {
243
+ background: '#102016',
244
+ borderColor: 'rgba(255,255,255,0.08)',
245
+ dividerColor: 'rgba(255,255,255,0.12)',
246
+ shadow: '0 10px 30px rgba(0,0,0,0.5)'
247
+ },
248
+ modal: {
249
+ background: '#0f1a12',
250
+ borderColor: 'rgba(255,255,255,0.12)',
251
+ shadow: '0 32px 80px rgba(0,0,0,0.7)',
252
+ overlayColor: 'rgba(0,0,0,0.6)',
253
+ borderWidth: '1px',
254
+ borderRadius: '16px',
255
+ dividerColor: 'rgba(255,255,255,0.12)'
256
+ },
257
+ input: {
258
+ background: '#0f1a12',
259
+ borderColor: 'rgba(255,255,255,0.12)',
260
+ placeholderColor: '#b7ccb9'
261
+ },
262
+ select: {
263
+ background: '#0f1a12',
264
+ borderColor: 'rgba(255,255,255,0.12)',
265
+ shadow: 'none',
266
+ borderWidth: '1px',
267
+ borderRadius: '16px'
268
+ },
269
+ table: {
270
+ background: '#102016',
271
+ borderColor: 'rgba(255,255,255,0.08)',
272
+ headerBackground: 'rgba(175, 17, 28, 0.15)',
273
+ rowHoverBackground: 'rgba(76, 175, 80, 0.08)',
274
+ stripedBackground: 'rgba(255,255,255,0.02)',
275
+ textColor: '#e8f5e9',
276
+ headerTextColor: '#d42426'
277
+ },
278
+ chart: {
279
+ background: 'transparent',
280
+ gridColor: 'rgba(255,255,255,0.05)',
281
+ labelColor: '#b7ccb9',
282
+ colors: ['#d42426', '#4caf50', '#fbbf24', '#60a5fa', '#af111c']
283
+ },
284
+ accordion: {
285
+ background: '#0f1a12',
286
+ borderColor: 'rgba(255,255,255,0.12)',
287
+ shadow: 'none',
288
+ dividerColor: 'rgba(255,255,255,0.12)',
289
+ borderRadius: '16px',
290
+ headerBackground: 'transparent'
291
+ },
292
+ toast: {
293
+ background: '#102016',
294
+ borderColor: '#d42426',
295
+ textColor: '#e8f5e9',
296
+ shadow: '0 10px 30px rgba(0,0,0,0.5), 0 0 10px rgba(212, 36, 38, 0.2)',
297
+ borderRadius: '16px',
298
+ closeButtonOpacity: '0.8',
299
+ closeButtonHoverOpacity: '1',
300
+ iconColor: {
301
+ info: '#60a5fa',
302
+ success: '#4caf50',
303
+ warning: '#fbbf24',
304
+ error: '#d42426'
305
+ },
306
+ icons: {
307
+ info: 'snowflake-fill',
308
+ success: 'gift-fill',
309
+ warning: 'star-fill',
310
+ error: 'x-circle-fill'
311
+ }
312
+ },
313
+ notificationMenu: {
314
+ button: {
315
+ background: 'transparent',
316
+ textColor: 'var(--fy-colors-text)',
317
+ icon: 'bell',
318
+ badgeBackground: '#d42426',
319
+ badgeTextColor: '#ffffff'
320
+ },
321
+ dropdown: {
322
+ background: '#102016',
323
+ borderColor: 'rgba(255,255,255,0.12)',
324
+ shadow: '0 20px 40px rgba(0,0,0,0.7)',
325
+ width: '320px',
326
+ maxHeight: '400px',
327
+ borderRadius: '20px'
328
+ },
329
+ item: {
330
+ background: 'transparent',
331
+ hoverBackground: 'rgba(255,255,255,0.05)',
332
+ textColor: '#e8f5e9',
333
+ descriptionColor: '#b7ccb9',
334
+ dividerColor: 'rgba(255,255,255,0.08)',
335
+ unreadIndicator: '#d42426'
336
+ }
337
+ }
338
+ }
339
+ },
340
+ componentAnimations: {
341
+ 'fy-button': {
342
+ hover: 'button-hover-soft',
343
+ click: 'button-click-press',
344
+ success: 'button-success-pulse',
345
+ error: 'button-error-shake'
346
+ },
347
+ 'fy-input': {
348
+ focus: 'input-focus-glow',
349
+ success: 'input-success-pulse',
350
+ error: 'input-error-shake'
351
+ },
352
+ 'fy-layout': {
353
+ enter: 'layout-fade-in'
354
+ },
355
+ 'fy-slot:header': {
356
+ open: 'header-menu-slide-in',
357
+ close: 'header-menu-slide-out'
358
+ },
359
+ 'fy-slot:sidebar': {
360
+ open: 'sidebar-slide-in',
361
+ close: 'sidebar-slide-out'
362
+ },
363
+ 'fy-notification-menu': {
364
+ open: 'dropdown-in',
365
+ close: 'dropdown-out'
366
+ },
367
+ 'fy-accordion': {
368
+ expand: 'accordion-expand',
369
+ collapse: 'accordion-collapse'
370
+ }
371
+ }
372
+ };
@@ -0,0 +1,2 @@
1
+ import { ThemeDefinition } from '@fylib/core';
2
+ export declare const defaultTheme: ThemeDefinition;