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