@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.
Files changed (25) hide show
  1. package/dist/christmas-theme.d.ts +2 -0
  2. package/dist/christmas-theme.js +372 -0
  3. package/dist/default-theme.d.ts +2 -0
  4. package/dist/default-theme.js +409 -0
  5. package/dist/engine.d.ts +37 -0
  6. package/dist/engine.js +291 -0
  7. package/dist/finey-hub-1-theme.d.ts +2 -0
  8. package/dist/finey-hub-1-theme.js +352 -0
  9. package/dist/finey-nexus-1-theme.d.ts +2 -0
  10. package/dist/finey-nexus-1-theme.js +413 -0
  11. package/dist/finey-puffy-1-theme.d.ts +2 -0
  12. package/dist/finey-puffy-1-theme.js +397 -0
  13. package/dist/finey-workbench-1-theme.d.ts +2 -0
  14. package/dist/finey-workbench-1-theme.js +394 -0
  15. package/dist/finey-workbench-2-theme.d.ts +2 -0
  16. package/dist/finey-workbench-2-theme.js +404 -0
  17. package/dist/finey-workbench-3-theme.d.ts +2 -0
  18. package/dist/finey-workbench-3-theme.js +410 -0
  19. package/dist/index.d.ts +11 -0
  20. package/dist/index.js +11 -0
  21. package/dist/win7-theme.d.ts +2 -0
  22. package/dist/win7-theme.js +374 -0
  23. package/dist/xp-theme.d.ts +2 -0
  24. package/dist/xp-theme.js +412 -0
  25. package/package.json +22 -0
package/dist/xp-theme.js ADDED
@@ -0,0 +1,412 @@
1
+ const xpButtonAnimations = {
2
+ hover: 'button-hover-glow',
3
+ click: 'button-click-press',
4
+ success: 'button-success-pulse',
5
+ error: 'button-error-shake'
6
+ };
7
+ export const windowsXpTheme = {
8
+ name: 'windows-xp',
9
+ backgroundEffect: {
10
+ name: 'bubbles',
11
+ intensity: 30,
12
+ speed: 1,
13
+ loop: true
14
+ },
15
+ wallpaper: {
16
+ name: 'grass',
17
+ type: 'pattern',
18
+ opacity: 0.2
19
+ },
20
+ tokens: {
21
+ colors: {
22
+ primary: '#3a6ea5',
23
+ secondary: '#1f4f8b',
24
+ success: '#3cb371',
25
+ danger: '#cc3300',
26
+ warning: '#ffcc00',
27
+ info: '#3a6ea5',
28
+ white: '#ffffff',
29
+ black: '#000000',
30
+ background: '#3a6ea5',
31
+ text: '#000000',
32
+ 'primary-rgb': '58, 110, 165',
33
+ surface: '#dfe9f5'
34
+ },
35
+ spacing: {
36
+ xs: '2px',
37
+ sm: '4px',
38
+ md: '8px',
39
+ lg: '12px',
40
+ xl: '16px'
41
+ },
42
+ borderRadius: {
43
+ sm: '3px',
44
+ md: '4px',
45
+ lg: '6px',
46
+ full: '9999px'
47
+ },
48
+ typography: {
49
+ fontFamily: {
50
+ base: '"Tahoma", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
51
+ heading: '"Tahoma", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
52
+ mono: '"Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace'
53
+ },
54
+ fontSize: {
55
+ sm: '11px',
56
+ md: '12px',
57
+ lg: '14px'
58
+ },
59
+ fontWeight: {
60
+ normal: '400',
61
+ bold: '700'
62
+ }
63
+ },
64
+ layout: {
65
+ app: {
66
+ gap: '0'
67
+ },
68
+ header: {
69
+ height: '32px',
70
+ padding: '0 8px',
71
+ shadow: '0 1px 0 rgba(0,0,0,0.35)',
72
+ toggle: {
73
+ background: '#dfe9f5',
74
+ textColor: '#3a6ea5',
75
+ borderRadius: '4px',
76
+ icon: 'menu'
77
+ }
78
+ },
79
+ sidebar: {
80
+ width: '220px',
81
+ padding: '8px 0',
82
+ toggle: {
83
+ background: '#3a6ea5',
84
+ textColor: '#ffffff',
85
+ borderRadius: '4px',
86
+ borderColor: '#ffffff',
87
+ icon: 'menu',
88
+ mode: 'floating',
89
+ tonguePosition: 'bottom'
90
+ }
91
+ },
92
+ content: {
93
+ padding: '8px'
94
+ }
95
+ },
96
+ effects: {
97
+ button: {
98
+ background: 'linear-gradient(to bottom, #ffffff 0%, #e4f1fb 40%, #c0d5f5 100%)',
99
+ borderColor: '#315b8a',
100
+ shadow: 'inset 0 0 0 1px rgba(255,255,255,0.6)',
101
+ textColor: '#000000'
102
+ },
103
+ window: {
104
+ background: 'linear-gradient(to bottom, #4b7bd1 0%, #2b4f9d 40%, #214173 100%)',
105
+ shadow: '0 2px 6px rgba(0,0,0,0.6)'
106
+ },
107
+ modal: {
108
+ background: '#ffffff',
109
+ borderColor: 'rgba(0,0,0,0.35)',
110
+ shadow: '0 24px 60px rgba(0,0,0,0.45)',
111
+ overlayColor: 'rgba(0,0,0,0.45)',
112
+ borderWidth: '1px',
113
+ borderRadius: '6px',
114
+ dividerColor: 'rgba(0,0,0,0.2)'
115
+ },
116
+ input: {
117
+ background: '#ffffff',
118
+ borderColor: 'rgba(0,0,0,0.35)',
119
+ shadow: 'inset 0 1px 0 rgba(255,255,255,0.7)',
120
+ placeholderColor: '#334155',
121
+ borderWidth: '1px',
122
+ borderRadius: '6px',
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(0,0,0,0.35)',
134
+ shadow: 'inset 0 1px 0 rgba(255,255,255,0.7)',
135
+ borderWidth: '1px',
136
+ borderRadius: '6px'
137
+ },
138
+ table: {
139
+ background: '#ffffff',
140
+ borderColor: '#91a7b4',
141
+ headerBackground: '#e5ecf9',
142
+ rowHoverBackground: '#f1f5fb',
143
+ stripedBackground: '#f7f9fc',
144
+ textColor: '#000000',
145
+ headerTextColor: '#000000'
146
+ },
147
+ chart: {
148
+ background: 'transparent',
149
+ borderColor: '#91a7b4',
150
+ gridColor: 'rgba(0,0,0,0.05)',
151
+ labelColor: '#334155',
152
+ colors: ['#3a6ea5', '#3cb371', '#ffcc00', '#cc3300', '#1f4f8b'],
153
+ fontFamily: 'inherit'
154
+ },
155
+ accordion: {
156
+ background: '#ffffff',
157
+ borderColor: 'rgba(0,0,0,0.35)',
158
+ shadow: 'none',
159
+ dividerColor: 'rgba(0,0,0,0.2)',
160
+ borderRadius: '6px',
161
+ headerBackground: 'transparent'
162
+ },
163
+ card: {
164
+ background: '#ffffff',
165
+ borderColor: 'rgba(0,0,0,0.18)',
166
+ shadow: '0 6px 20px rgba(0,0,0,0.25)',
167
+ dividerColor: 'rgba(0,0,0,0.2)',
168
+ icons: {
169
+ header: 'clipboard-text',
170
+ footer: ''
171
+ }
172
+ },
173
+ badge: {
174
+ background: '#ffcc00',
175
+ textColor: '#000000',
176
+ borderRadius: '8px',
177
+ animation: 'shine'
178
+ },
179
+ toast: {
180
+ background: '#FFFFE1',
181
+ borderColor: '#000000',
182
+ textColor: '#000000',
183
+ shadow: '2px 2px 0 rgba(0,0,0,0.2)',
184
+ borderRadius: '0px',
185
+ padding: '8px 28px 8px 12px',
186
+ gap: '10px',
187
+ minWidth: '300px',
188
+ maxWidth: '350px',
189
+ titleFontSize: '11px',
190
+ titleFontWeight: '700',
191
+ messageFontSize: '11px',
192
+ messageLineHeight: '1.2',
193
+ iconSize: '20px',
194
+ closeIcon: 'x',
195
+ closeButtonSize: '14px',
196
+ closeButtonOpacity: '0.8',
197
+ closeButtonHoverOpacity: '1',
198
+ closeButtonBackground: 'transparent',
199
+ closeButtonBorder: '1px solid transparent',
200
+ closeButtonBorderRadius: '0px',
201
+ iconColor: {
202
+ info: '#4ba04b',
203
+ success: '#4ba04b',
204
+ warning: '#4ba04b',
205
+ error: '#ff0000'
206
+ },
207
+ icons: {
208
+ info: 'wifi-high',
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: '#ffcc00',
220
+ badgeTextColor: '#000000'
221
+ },
222
+ dropdown: {
223
+ background: '#ffffff',
224
+ borderColor: '#315b8a',
225
+ shadow: '2px 2px 4px rgba(0,0,0,0.4)',
226
+ width: '280px',
227
+ maxHeight: '350px',
228
+ borderRadius: '0px'
229
+ },
230
+ item: {
231
+ background: 'transparent',
232
+ hoverBackground: '#316ac5',
233
+ textColor: '#000000',
234
+ descriptionColor: '#666666',
235
+ dividerColor: '#e0e0e0',
236
+ unreadIndicator: '#3a6ea5'
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: '17px',
256
+ trackBackground: '#f1f1f1',
257
+ // Subtle stippled pattern for track
258
+ trackImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAD0lEQVQImWNgYGBoYGAAABYAA69PrG8AAAAASUVORK5CYII=",
259
+ thumbBackground: 'linear-gradient(to right, #1d345f 0%, #3a62a7 50%, #1d345f 100%)',
260
+ thumbHoverBackground: 'linear-gradient(to right, #4a7ac9 0%, #bdd4f6 50%, #4a7ac9 100%)',
261
+ thumbBorderRadius: '2px',
262
+ thumbBorderWidth: '1px',
263
+ thumbBorderColor: '#002266',
264
+ thumbBoxShadow: 'inset 1px 1px 0px rgba(255,255,255,0.3)',
265
+ thumbGripImage: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M2 1h8M2 3h8M2 5h8M2 7h8M2 9h8' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3Cpath d='M2 2h8M2 4h8M2 6h8M2 8h8M2 10h8' stroke='rgba(0,0,0,0.1)' stroke-width='1'/%3E%3C/svg%3E",
266
+ thumbGripImageHorizontal: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12'%3E%3Cpath d='M1 2v8M3 2v8M5 2v8M7 2v8M9 2v8' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3Cpath d='M2 2v8M4 2v8M6 2v8M8 2v8M10 2v8' stroke='rgba(0,0,0,0.1)' stroke-width='1'/%3E%3C/svg%3E",
267
+ buttonsVisible: true,
268
+ buttonBackground: 'linear-gradient(to right, #1d345f 0%, #3a62a7 50%, #1d345f 100%)',
269
+ buttonHoverBackground: 'linear-gradient(to right, #4a7ac9 0%, #bdd4f6 50%, #4a7ac9 100%)',
270
+ buttonActiveBackground: 'linear-gradient(to right, #0a1b3a 0%, #1d345f 50%, #0a1b3a 100%)',
271
+ // UP BUTTON
272
+ buttonUpImage: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 6L5 10.5h7L8.5 6z' fill='%231d345f'/%3E%3Cpath d='M1 1h15v1H1zM1 1h1v15H1z' fill='white'/%3E%3Cpath d='M1 15h15v1H1zM15 1h1v15h-1z' fill='rgba(0,0,0,0.3)'/%3E%3C/svg%3E",
273
+ buttonUpHoverImage: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 6L5 10.5h7L8.5 6z' fill='%231d345f'/%3E%3Cpath d='M1 1h15v1H1zM1 1h1v15H1z' fill='white'/%3E%3Cpath d='M1 15h15v1H1zM15 1h1v15h-1z' fill='rgba(0,0,0,0.3)'/%3E%3C/svg%3E",
274
+ buttonUpActiveImage: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M9.5 7L6 11.5h7L9.5 7z' fill='%231d345f'/%3E%3Cpath d='M1 1h15v1H1zM1 1h1v15H1z' fill='rgba(0,0,0,0.4)'/%3E%3Cpath d='M1 15h15v1H1zM15 1h1v15h-1z' fill='white'/%3E%3C/svg%3E",
275
+ // DOWN BUTTON
276
+ buttonDownImage: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 11L5 6.5h7L8.5 11z' fill='%231d345f'/%3E%3Cpath d='M1 1h15v1H1zM1 1h1v15H1z' fill='white'/%3E%3Cpath d='M1 15h15v1H1zM15 1h1v15h-1z' fill='rgba(0,0,0,0.3)'/%3E%3C/svg%3E",
277
+ buttonDownHoverImage: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 11L5 6.5h7L8.5 11z' fill='%231d345f'/%3E%3Cpath d='M1 1h15v1H1zM1 1h1v15H1z' fill='white'/%3E%3Cpath d='M1 15h15v1H1zM15 1h1v15h-1z' fill='rgba(0,0,0,0.3)'/%3E%3C/svg%3E",
278
+ buttonDownActiveImage: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M9.5 12L6 7.5h7L9.5 12z' fill='%231d345f'/%3E%3Cpath d='M1 1h15v1H1zM1 1h1v15H1z' fill='rgba(0,0,0,0.4)'/%3E%3Cpath d='M1 15h15v1H1zM15 1h1v15h-1z' fill='white'/%3E%3C/svg%3E"
279
+ }
280
+ },
281
+ darkTokens: {
282
+ colors: {
283
+ primary: '#4c8ad3',
284
+ background: '#1a2948',
285
+ text: '#f9fafb',
286
+ secondary: '#68718bff',
287
+ surface: '#0e1f3d'
288
+ },
289
+ layout: {
290
+ header: {
291
+ logoFilterDarkOpacity: '0.85'
292
+ },
293
+ sidebar: {
294
+ logoFilterDarkOpacity: '0.85'
295
+ }
296
+ },
297
+ effects: {
298
+ card: {
299
+ background: '#0e1f3d',
300
+ borderColor: 'rgba(255,255,255,0.12)',
301
+ dividerColor: 'rgba(255,255,255,0.18)',
302
+ shadow: '0 6px 20px rgba(0,0,0,0.6)',
303
+ },
304
+ modal: {
305
+ background: '#0e1f3d',
306
+ borderColor: 'rgba(255,255,255,0.18)',
307
+ shadow: '0 32px 80px rgba(0,0,0,0.75)',
308
+ overlayColor: 'rgba(0,0,0,0.6)',
309
+ borderWidth: '1px',
310
+ borderRadius: '6px',
311
+ dividerColor: 'rgba(255,255,255,0.18)'
312
+ },
313
+ input: {
314
+ background: '#132a4f',
315
+ borderColor: 'rgba(255,255,255,0.18)',
316
+ placeholderColor: '#cbd5e1'
317
+ },
318
+ select: {
319
+ background: '#132a4f',
320
+ borderColor: 'rgba(255,255,255,0.18)',
321
+ shadow: 'none',
322
+ borderWidth: '1px',
323
+ borderRadius: '6px'
324
+ },
325
+ table: {
326
+ background: '#0e1f3d',
327
+ borderColor: 'rgba(255,255,255,0.12)',
328
+ headerBackground: 'rgba(255,255,255,0.05)',
329
+ rowHoverBackground: 'rgba(76, 138, 211, 0.15)',
330
+ stripedBackground: 'rgba(255,255,255,0.02)',
331
+ textColor: '#ffffff',
332
+ headerTextColor: '#4c8ad3'
333
+ },
334
+ chart: {
335
+ background: 'transparent',
336
+ gridColor: 'rgba(255,255,255,0.05)',
337
+ labelColor: '#cbd5e1',
338
+ colors: ['#4c8ad3', '#3cb371', '#ffcc00', '#ff4444', '#68718b']
339
+ },
340
+ accordion: {
341
+ background: '#0e1f3d',
342
+ borderColor: 'rgba(255,255,255,0.18)',
343
+ shadow: 'none',
344
+ dividerColor: 'rgba(255,255,255,0.18)',
345
+ borderRadius: '6px',
346
+ headerBackground: 'transparent'
347
+ },
348
+ button: {
349
+ textColor: '#000000ff'
350
+ },
351
+ toast: {
352
+ background: '#0e1f3d',
353
+ borderColor: '#4c8ad3',
354
+ textColor: '#ffffff',
355
+ shadow: '2px 2px 0 rgba(0,0,0,0.5)',
356
+ borderRadius: '0px'
357
+ },
358
+ notificationMenu: {
359
+ button: {
360
+ background: 'transparent',
361
+ textColor: 'var(--fy-colors-text)',
362
+ icon: 'bell',
363
+ badgeBackground: '#ffcc00',
364
+ badgeTextColor: '#000000'
365
+ },
366
+ dropdown: {
367
+ background: '#0e1f3d',
368
+ borderColor: '#4c8ad3',
369
+ shadow: '2px 2px 8px rgba(0,0,0,0.8)',
370
+ width: '280px',
371
+ maxHeight: '350px',
372
+ borderRadius: '0px'
373
+ },
374
+ item: {
375
+ background: 'transparent',
376
+ hoverBackground: '#4c8ad3',
377
+ textColor: '#ffffff',
378
+ descriptionColor: '#cbd5e1',
379
+ dividerColor: 'rgba(255,255,255,0.1)',
380
+ unreadIndicator: '#4c8ad3'
381
+ }
382
+ }
383
+ }
384
+ },
385
+ componentAnimations: {
386
+ 'fy-button': xpButtonAnimations,
387
+ 'fy-input': {
388
+ focus: 'input-focus-glow',
389
+ success: 'input-success-pulse',
390
+ error: 'input-error-shake'
391
+ },
392
+ 'fy-layout': {
393
+ enter: 'layout-fade-in'
394
+ },
395
+ 'fy-slot:header': {
396
+ open: 'sidebar-slide-in',
397
+ close: 'sidebar-slide-out'
398
+ },
399
+ 'fy-slot:sidebar': {
400
+ open: 'sidebar-slide-in',
401
+ close: 'sidebar-slide-out'
402
+ },
403
+ 'fy-notification-menu': {
404
+ open: 'dropdown-in',
405
+ close: 'dropdown-out'
406
+ },
407
+ 'fy-accordion': {
408
+ expand: 'accordion-expand',
409
+ collapse: 'accordion-collapse'
410
+ }
411
+ }
412
+ };
package/package.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "name": "@fylib/theme",
3
+ "version": "0.1.0",
4
+ "main": "dist/index.js",
5
+ "types": "dist/index.d.ts",
6
+ "files": ["dist"],
7
+ "publishConfig": {
8
+ "access": "public"
9
+ },
10
+ "scripts": {
11
+ "build": "tsc -p tsconfig.json"
12
+ },
13
+ "dependencies": {
14
+ "@fylib/core": "workspace:*",
15
+ "@fylib/animation": "workspace:*",
16
+ "@fylib/logger": "workspace:*"
17
+ },
18
+ "devDependencies": {
19
+ "typescript": "catalog:",
20
+ "@types/node": "catalog:"
21
+ }
22
+ }