@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,410 @@
1
+ const sequoiaButtonAnimations = {
2
+ hover: 'button-hover-macos-soft',
3
+ click: 'button-click-macos-press',
4
+ success: 'button-success-macos-pulse',
5
+ error: 'button-error-macos-shake'
6
+ };
7
+ export const fineyWorkbench3Theme = {
8
+ name: 'finey-workbench-3',
9
+ backgroundEffect: {
10
+ name: 'stars',
11
+ intensity: 100,
12
+ speed: 0.2,
13
+ loop: true
14
+ },
15
+ wallpaper: {
16
+ name: 'mesh-gradient',
17
+ type: 'pattern',
18
+ opacity: 0.1
19
+ },
20
+ tokens: {
21
+ colors: {
22
+ primary: '#007aff',
23
+ secondary: '#86868b',
24
+ success: '#28cd41',
25
+ danger: '#ff3b30',
26
+ warning: '#ffcc00',
27
+ info: '#5ac8fa',
28
+ white: '#ffffff',
29
+ black: '#000000',
30
+ background: '#f5f5f7',
31
+ text: '#1d1d1f',
32
+ 'primary-rgb': '0, 122, 255',
33
+ surface: 'rgba(255, 255, 255, 0.72)'
34
+ },
35
+ spacing: {
36
+ xs: '4px',
37
+ sm: '8px',
38
+ md: '12px',
39
+ lg: '20px',
40
+ xl: '28px'
41
+ },
42
+ borderRadius: {
43
+ sm: '6px',
44
+ md: '10px',
45
+ lg: '16px',
46
+ full: '9999px'
47
+ },
48
+ typography: {
49
+ fontFamily: {
50
+ base: '-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif',
51
+ heading: '-apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif',
52
+ mono: '"SF Mono", ui-monospace, Menlo, Monaco, monospace'
53
+ },
54
+ fontSize: {
55
+ sm: '12px',
56
+ md: '14px',
57
+ lg: '19px'
58
+ },
59
+ fontWeight: {
60
+ normal: '400',
61
+ bold: '600'
62
+ }
63
+ },
64
+ layout: {
65
+ app: {
66
+ gap: '0'
67
+ },
68
+ header: {
69
+ height: '52px',
70
+ padding: '0 16px',
71
+ shadow: 'none',
72
+ toggle: {
73
+ background: 'transparent',
74
+ textColor: 'var(--fy-colors-text)',
75
+ borderRadius: '8px',
76
+ icon: 'list'
77
+ }
78
+ },
79
+ sidebar: {
80
+ width: '260px',
81
+ padding: '16px 0',
82
+ toggle: {
83
+ background: 'transparent',
84
+ textColor: 'var(--fy-colors-text)',
85
+ borderRadius: '8px',
86
+ icon: 'sidebar',
87
+ mode: 'floating',
88
+ tonguePosition: 'bottom'
89
+ }
90
+ },
91
+ content: {
92
+ padding: '24px'
93
+ }
94
+ },
95
+ effects: {
96
+ button: {
97
+ background: '#ffffff',
98
+ borderColor: 'rgba(0,0,0,0.08)',
99
+ shadow: '0 1px 2px rgba(0,0,0,0.05)',
100
+ textColor: '#1d1d1f'
101
+ },
102
+ window: {
103
+ background: 'rgba(245, 245, 247, 0.8)',
104
+ shadow: '0 24px 60px rgba(0,0,0,0.15)'
105
+ },
106
+ input: {
107
+ background: 'rgba(255, 255, 255, 0.5)',
108
+ borderColor: 'rgba(0,0,0,0.1)',
109
+ shadow: 'none',
110
+ placeholderColor: '#86868b',
111
+ borderWidth: '1px',
112
+ borderRadius: '8px',
113
+ icons: {
114
+ mode: 'inside',
115
+ name: 'magnifying-glass',
116
+ position: 'left',
117
+ outsideGap: '8px',
118
+ color: 'rgba(0,0,0,0.4)'
119
+ }
120
+ },
121
+ select: {
122
+ background: 'rgba(255, 255, 255, 0.5)',
123
+ borderColor: 'rgba(0,0,0,0.1)',
124
+ shadow: 'none',
125
+ borderWidth: '1px',
126
+ borderRadius: '8px'
127
+ },
128
+ table: {
129
+ background: 'transparent',
130
+ borderColor: 'rgba(0,0,0,0.05)',
131
+ headerBackground: 'rgba(0,0,0,0.02)',
132
+ rowHoverBackground: 'rgba(0,122,255,0.05)',
133
+ stripedBackground: 'rgba(0,0,0,0.01)',
134
+ textColor: '#1d1d1f',
135
+ headerTextColor: '#86868b'
136
+ },
137
+ modal: {
138
+ background: 'rgba(255, 255, 255, 0.85)',
139
+ borderColor: 'rgba(0,0,0,0.1)',
140
+ shadow: '0 40px 100px rgba(0,0,0,0.25)',
141
+ overlayColor: 'rgba(0,0,0,0.3)',
142
+ borderWidth: '1px',
143
+ borderRadius: '12px',
144
+ dividerColor: 'rgba(0,0,0,0.05)'
145
+ },
146
+ accordion: {
147
+ background: 'transparent',
148
+ borderColor: 'rgba(0,0,0,0.05)',
149
+ shadow: 'none',
150
+ dividerColor: 'rgba(0,0,0,0.05)',
151
+ borderRadius: '10px',
152
+ headerBackground: 'transparent'
153
+ },
154
+ card: {
155
+ background: 'rgba(255, 255, 255, 0.6)',
156
+ borderColor: 'rgba(0,0,0,0.05)',
157
+ shadow: '0 10px 20px rgba(0,0,0,0.04)',
158
+ dividerColor: 'rgba(0,0,0,0.05)',
159
+ icons: {
160
+ header: '',
161
+ footer: ''
162
+ }
163
+ },
164
+ badge: {
165
+ background: '#007aff',
166
+ textColor: '#ffffff',
167
+ borderRadius: '6px',
168
+ animation: 'shine'
169
+ },
170
+ chart: {
171
+ background: 'transparent',
172
+ borderColor: 'rgba(0,0,0,0.05)',
173
+ gridColor: 'rgba(0,0,0,0.04)',
174
+ labelColor: '#86868b',
175
+ colors: ['#007aff', '#34c759', '#ff9500', '#ff3b30', '#af52de'],
176
+ fontFamily: 'inherit'
177
+ },
178
+ toast: {
179
+ background: 'rgba(255, 255, 255, 0.72)',
180
+ borderColor: 'rgba(255, 255, 255, 0.4)',
181
+ textColor: '#1d1d1f',
182
+ shadow: '0 8px 32px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(255,255,255,0.5)',
183
+ borderRadius: '16px',
184
+ padding: '14px 20px',
185
+ gap: '14px',
186
+ minWidth: '340px',
187
+ maxWidth: '440px',
188
+ titleFontSize: '15px',
189
+ titleFontWeight: '600',
190
+ messageFontSize: '14px',
191
+ messageLineHeight: '1.4',
192
+ iconSize: '24px',
193
+ closeIcon: 'x',
194
+ closeButtonSize: '20px',
195
+ closeButtonOpacity: '0.4',
196
+ closeButtonHoverOpacity: '1',
197
+ closeButtonBackground: 'rgba(0,0,0,0.03)',
198
+ closeButtonBorder: 'none',
199
+ closeButtonBorderRadius: '50%',
200
+ iconColor: {
201
+ info: '#007aff',
202
+ success: '#28cd41',
203
+ warning: '#ff9500',
204
+ error: '#ff3b30'
205
+ },
206
+ icons: {
207
+ info: 'info-fill',
208
+ success: 'check-circle-fill',
209
+ warning: 'warning-fill',
210
+ error: 'x-circle-fill'
211
+ }
212
+ },
213
+ notificationMenu: {
214
+ button: {
215
+ background: 'transparent',
216
+ textColor: 'var(--fy-colors-text)',
217
+ icon: 'bell',
218
+ badgeBackground: '#ff3b30',
219
+ badgeTextColor: '#ffffff'
220
+ },
221
+ dropdown: {
222
+ background: 'rgba(255, 255, 255, 0.85)',
223
+ borderColor: 'rgba(0,0,0,0.1)',
224
+ shadow: '0 20px 40px rgba(0,0,0,0.15)',
225
+ width: '320px',
226
+ maxHeight: '450px',
227
+ borderRadius: '14px'
228
+ },
229
+ item: {
230
+ background: 'transparent',
231
+ hoverBackground: 'rgba(0,0,0,0.03)',
232
+ textColor: '#1d1d1f',
233
+ descriptionColor: '#86868b',
234
+ dividerColor: 'rgba(0,0,0,0.05)',
235
+ unreadIndicator: '#007aff'
236
+ },
237
+ config: {
238
+ showAll: false,
239
+ limit: 5,
240
+ allowClear: true,
241
+ accordionMode: true,
242
+ showViewAll: true,
243
+ viewAllPosition: 'footer-right'
244
+ }
245
+ }
246
+ },
247
+ icons: {
248
+ defaultSet: 'ph',
249
+ size: { sm: '12px', md: '16px', lg: '20px' },
250
+ strokeWidth: '1.5',
251
+ variant: 'regular'
252
+ },
253
+ scrollbar: {
254
+ width: '8px',
255
+ trackBackground: 'transparent',
256
+ thumbBackground: 'rgba(0,0,0,0.2)',
257
+ thumbHoverBackground: 'rgba(0,0,0,0.3)',
258
+ thumbBorderRadius: '10px',
259
+ thumbBorderWidth: '2px',
260
+ thumbBorderColor: 'transparent'
261
+ }
262
+ },
263
+ darkTokens: {
264
+ colors: {
265
+ primary: '#0a84ff',
266
+ background: '#000000',
267
+ text: '#f5f5f7',
268
+ secondary: '#86868b',
269
+ surface: 'rgba(29, 29, 31, 0.72)'
270
+ },
271
+ effects: {
272
+ button: {
273
+ background: 'rgba(255, 255, 255, 0.1)',
274
+ borderColor: 'rgba(255, 255, 255, 0.1)',
275
+ shadow: '0 1px 2px rgba(0,0,0,0.2)',
276
+ textColor: '#f5f5f7'
277
+ },
278
+ window: {
279
+ background: 'rgba(29, 29, 31, 0.8)',
280
+ shadow: '0 24px 60px rgba(0,0,0,0.4)'
281
+ },
282
+ card: {
283
+ background: 'rgba(29, 29, 31, 0.6)',
284
+ borderColor: 'rgba(255,255,255,0.05)',
285
+ dividerColor: 'rgba(255,255,255,0.05)',
286
+ shadow: '0 10px 20px rgba(0,0,0,0.2)'
287
+ },
288
+ modal: {
289
+ background: 'rgba(44, 44, 46, 0.85)',
290
+ borderColor: 'rgba(255,255,255,0.1)',
291
+ shadow: '0 40px 100px rgba(0,0,0,0.5)',
292
+ overlayColor: 'rgba(0,0,0,0.5)',
293
+ borderWidth: '1px',
294
+ borderRadius: '12px',
295
+ dividerColor: 'rgba(255,255,255,0.05)'
296
+ },
297
+ input: {
298
+ background: 'rgba(255, 255, 255, 0.05)',
299
+ borderColor: 'rgba(255, 255, 255, 0.1)',
300
+ placeholderColor: '#86868b'
301
+ },
302
+ select: {
303
+ background: 'rgba(255, 255, 255, 0.05)',
304
+ borderColor: 'rgba(255, 255, 255, 0.1)',
305
+ shadow: 'none',
306
+ borderWidth: '1px',
307
+ borderRadius: '8px'
308
+ },
309
+ table: {
310
+ background: 'transparent',
311
+ borderColor: 'rgba(255,255,255,0.05)',
312
+ headerBackground: 'rgba(255,255,255,0.02)',
313
+ rowHoverBackground: 'rgba(10,132,255,0.1)',
314
+ stripedBackground: 'rgba(255,255,255,0.01)',
315
+ textColor: '#f5f5f7',
316
+ headerTextColor: '#86868b'
317
+ },
318
+ chart: {
319
+ background: 'transparent',
320
+ gridColor: 'rgba(255,255,255,0.04)',
321
+ labelColor: '#86868b',
322
+ colors: ['#0a84ff', '#32d74b', '#ff9f0a', '#ff453a', '#bf5af2']
323
+ },
324
+ toast: {
325
+ background: 'rgba(44, 44, 46, 0.85)',
326
+ borderColor: 'rgba(255, 255, 255, 0.1)',
327
+ textColor: '#f5f5f7',
328
+ shadow: '0 12px 48px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05)',
329
+ borderRadius: '16px',
330
+ closeButtonOpacity: '0.5',
331
+ closeButtonHoverOpacity: '1',
332
+ iconColor: {
333
+ info: '#0a84ff',
334
+ success: '#30d158',
335
+ warning: '#ffd60a',
336
+ error: '#ff453a'
337
+ },
338
+ icons: {
339
+ info: 'info-fill',
340
+ success: 'check-circle-fill',
341
+ warning: 'warning-fill',
342
+ error: 'x-circle-fill'
343
+ }
344
+ },
345
+ notificationMenu: {
346
+ button: {
347
+ background: 'transparent',
348
+ textColor: 'var(--fy-colors-text)',
349
+ icon: 'bell',
350
+ badgeBackground: '#ff453a',
351
+ badgeTextColor: '#ffffff'
352
+ },
353
+ dropdown: {
354
+ background: 'rgba(44, 44, 46, 0.85)',
355
+ borderColor: 'rgba(255,255,255,0.1)',
356
+ shadow: '0 20px 40px rgba(0,0,0,0.5)',
357
+ width: '320px',
358
+ maxHeight: '450px',
359
+ borderRadius: '14px'
360
+ },
361
+ item: {
362
+ background: 'transparent',
363
+ hoverBackground: 'rgba(255,255,255,0.03)',
364
+ textColor: '#f5f5f7',
365
+ descriptionColor: '#86868b',
366
+ dividerColor: 'rgba(255,255,255,0.05)',
367
+ unreadIndicator: '#0a84ff'
368
+ }
369
+ }
370
+ },
371
+ scrollbar: {
372
+ thumbBackground: 'rgba(255,255,255,0.2)',
373
+ thumbHoverBackground: 'rgba(255,255,255,0.3)'
374
+ }
375
+ },
376
+ componentAnimations: {
377
+ 'fy-button': sequoiaButtonAnimations,
378
+ 'fy-input': {
379
+ focus: 'input-focus-macos-glow',
380
+ success: 'input-success-macos-pulse',
381
+ error: 'input-error-shake'
382
+ },
383
+ 'fy-layout': {
384
+ enter: 'layout-macos-window-enter'
385
+ },
386
+ 'fy-slot:header': {
387
+ open: 'header-menu-macos-slide-in',
388
+ close: 'header-menu-macos-slide-out'
389
+ },
390
+ 'fy-slot:sidebar': {
391
+ open: 'sidebar-macos-slide-in',
392
+ close: 'sidebar-macos-slide-out'
393
+ },
394
+ 'fy-card': {
395
+ enter: 'card-macos-fade-in'
396
+ },
397
+ 'fy-notification-menu': {
398
+ open: 'dropdown-in',
399
+ close: 'dropdown-out'
400
+ },
401
+ 'fy-accordion': {
402
+ expand: 'accordion-expand',
403
+ collapse: 'accordion-collapse'
404
+ },
405
+ 'fy-table': {
406
+ enter: 'table-fade-in',
407
+ rowEnter: 'table-row-enter'
408
+ }
409
+ }
410
+ };
@@ -0,0 +1,11 @@
1
+ export * from './finey-puffy-1-theme';
2
+ export * from './engine';
3
+ export * from './default-theme';
4
+ export * from './christmas-theme';
5
+ export * from './xp-theme';
6
+ export * from './win7-theme';
7
+ export * from './finey-workbench-1-theme';
8
+ export * from './finey-workbench-2-theme';
9
+ export * from './finey-workbench-3-theme';
10
+ export * from './finey-nexus-1-theme';
11
+ export * from './finey-hub-1-theme';
package/dist/index.js ADDED
@@ -0,0 +1,11 @@
1
+ export * from './finey-puffy-1-theme';
2
+ export * from './engine';
3
+ export * from './default-theme';
4
+ export * from './christmas-theme';
5
+ export * from './xp-theme';
6
+ export * from './win7-theme';
7
+ export * from './finey-workbench-1-theme';
8
+ export * from './finey-workbench-2-theme';
9
+ export * from './finey-workbench-3-theme';
10
+ export * from './finey-nexus-1-theme';
11
+ export * from './finey-hub-1-theme';
@@ -0,0 +1,2 @@
1
+ import { ThemeDefinition } from '@fylib/core';
2
+ export declare const windows7Theme: ThemeDefinition;