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