@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,394 @@
1
+ const workbenchButtonAnimations = {
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 fineyWorkbench1Theme = {
8
+ name: 'finey-workbench-1',
9
+ backgroundEffect: {
10
+ name: 'particles',
11
+ intensity: 30,
12
+ speed: 0.5,
13
+ loop: true
14
+ },
15
+ wallpaper: {
16
+ name: 'dots',
17
+ type: 'pattern',
18
+ opacity: 0.05
19
+ },
20
+ tokens: {
21
+ colors: {
22
+ primary: '#007aff',
23
+ secondary: '#8e8e93',
24
+ success: '#34c759',
25
+ danger: '#ff3b30',
26
+ warning: '#ffcc00',
27
+ info: '#5ac8fa',
28
+ white: '#ffffff',
29
+ black: '#000000',
30
+ background: '#f5f5f7',
31
+ text: '#1c1c1e',
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: '4px',
44
+ md: '6px',
45
+ lg: '12px',
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: '13px',
56
+ md: '15px',
57
+ lg: '20px'
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 15px',
71
+ shadow: '0 1px 0 rgba(0,0,0,0.12)',
72
+ toggle: {
73
+ background: 'rgba(14, 194, 119, 0.08)',
74
+ textColor: 'var(--fy-colors-primary)',
75
+ borderRadius: '5px',
76
+ icon: 'menu'
77
+ }
78
+ },
79
+ sidebar: {
80
+ width: '260px',
81
+ padding: '12px 0',
82
+ toggle: {
83
+ background: 'rgba(14, 194, 119, 0.12)',
84
+ textColor: 'var(--fy-colors-primary)',
85
+ borderRadius: '5px',
86
+ icon: 'menu',
87
+ mode: 'floating',
88
+ tonguePosition: 'bottom'
89
+ }
90
+ },
91
+ content: {
92
+ padding: '18px'
93
+ }
94
+ },
95
+ effects: {
96
+ button: {
97
+ background: 'linear-gradient(to bottom, #ffffff 0%, #f7f7f9 40%, #e5e5ea 100%)',
98
+ borderColor: 'rgba(0,0,0,0.18)',
99
+ shadow: '0 1px 0 rgba(255,255,255,0.8)',
100
+ textColor: '#1c1c1e'
101
+ },
102
+ window: {
103
+ background: 'linear-gradient(to bottom, #f9f9fb 0%, #e5e5ea 50%, #d1d1d6 100%)',
104
+ shadow: '0 18px 40px rgba(0,0,0,0.28)'
105
+ },
106
+ input: {
107
+ background: '#ffffff',
108
+ borderColor: 'rgba(0,0,0,0.18)',
109
+ shadow: '0 0 0 1px rgba(255,255,255,0.8)',
110
+ placeholderColor: '#8e8e93',
111
+ borderWidth: '1px',
112
+ borderRadius: '8px',
113
+ icons: {
114
+ mode: 'inside',
115
+ name: 'search',
116
+ position: 'left',
117
+ outsideGap: '8px',
118
+ color: 'rgba(0,0,0,0.45)'
119
+ }
120
+ },
121
+ select: {
122
+ background: '#ffffff',
123
+ borderColor: 'rgba(0,0,0,0.18)',
124
+ shadow: '0 0 0 1px rgba(255,255,255,0.8)',
125
+ borderWidth: '1px',
126
+ borderRadius: '8px'
127
+ },
128
+ table: {
129
+ background: '#ffffff',
130
+ borderColor: 'rgba(0,0,0,0.08)',
131
+ headerBackground: '#f5f5f7',
132
+ rowHoverBackground: 'rgba(0,122,255,0.04)',
133
+ stripedBackground: '#fafafb',
134
+ textColor: '#1c1c1e',
135
+ headerTextColor: '#8e8e93'
136
+ },
137
+ chart: {
138
+ background: 'transparent',
139
+ borderColor: 'rgba(0,0,0,0.08)',
140
+ gridColor: 'rgba(0,0,0,0.04)',
141
+ labelColor: '#8e8e93',
142
+ colors: ['#007aff', '#34c759', '#ff9500', '#ff3b30', '#af52de'],
143
+ fontFamily: 'inherit'
144
+ },
145
+ modal: {
146
+ background: '#ffffff',
147
+ borderColor: 'rgba(0,0,0,0.18)',
148
+ shadow: '0 32px 80px rgba(0,0,0,0.75)',
149
+ overlayColor: 'rgba(0,0,0,0.6)',
150
+ borderWidth: '1px',
151
+ borderRadius: '8px',
152
+ dividerColor: 'rgba(0,0,0,0.12)'
153
+ },
154
+ accordion: {
155
+ background: '#ffffff',
156
+ borderColor: 'rgba(0,0,0,0.18)',
157
+ shadow: 'none',
158
+ dividerColor: 'rgba(0,0,0,0.12)',
159
+ borderRadius: '8px',
160
+ headerBackground: 'transparent'
161
+ },
162
+ card: {
163
+ background: '#ffffff',
164
+ borderColor: 'rgba(0,0,0,0.08)',
165
+ shadow: '0 12px 30px rgba(0,0,0,0.18)',
166
+ dividerColor: 'rgba(0,0,0,0.08)',
167
+ icons: {
168
+ header: '',
169
+ footer: ''
170
+ }
171
+ },
172
+ badge: {
173
+ background: '#0a84ff',
174
+ textColor: '#ffffff',
175
+ borderRadius: '10px',
176
+ animation: 'shine'
177
+ },
178
+ toast: {
179
+ background: 'rgba(255, 255, 255, 0.98)',
180
+ borderColor: 'rgba(0,0,0,0.15)',
181
+ textColor: '#1c1c1e',
182
+ shadow: '0 15px 35px rgba(0,0,0,0.2)',
183
+ borderRadius: '12px',
184
+ padding: '14px 18px',
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: 'transparent',
198
+ closeButtonBorder: 'none',
199
+ closeButtonBorderRadius: '50%',
200
+ iconColor: {
201
+ info: '#007aff',
202
+ success: '#34c759',
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: '#1c1c1e',
217
+ icon: 'bell',
218
+ badgeBackground: '#ff3b30',
219
+ badgeTextColor: '#ffffff'
220
+ },
221
+ dropdown: {
222
+ background: 'rgba(255, 255, 255, 0.98)',
223
+ borderColor: 'rgba(0,0,0,0.1)',
224
+ shadow: '0 20px 40px rgba(0,0,0,0.2)',
225
+ width: '320px',
226
+ maxHeight: '400px',
227
+ borderRadius: '12px'
228
+ },
229
+ item: {
230
+ background: 'transparent',
231
+ hoverBackground: 'rgba(0, 122, 255, 0.08)',
232
+ textColor: '#1c1c1e',
233
+ descriptionColor: '#8e8e93',
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: '10px',
255
+ trackBackground: 'transparent',
256
+ thumbBackground: 'rgba(0,0,0,0.15)',
257
+ thumbHoverBackground: 'rgba(0,0,0,0.25)',
258
+ thumbBorderRadius: '10px',
259
+ thumbBorderWidth: '2px',
260
+ thumbBorderColor: 'transparent'
261
+ }
262
+ },
263
+ darkTokens: {
264
+ colors: {
265
+ primary: '#0a84ff',
266
+ background: '#1c1c1e',
267
+ text: '#f5f5f7',
268
+ secondary: '#636366',
269
+ surface: '#1f1f20'
270
+ },
271
+ effects: {
272
+ card: {
273
+ background: '#1f1f20',
274
+ borderColor: 'rgba(255,255,255,0.08)',
275
+ dividerColor: 'rgba(255,255,255,0.12)',
276
+ shadow: '0 12px 30px rgba(0,0,0,0.6)'
277
+ },
278
+ modal: {
279
+ background: '#2c2c2e',
280
+ borderColor: 'rgba(255,255,255,0.12)',
281
+ shadow: '0 32px 80px rgba(0,0,0,0.75)',
282
+ overlayColor: 'rgba(0,0,0,0.6)',
283
+ borderWidth: '1px',
284
+ borderRadius: '8px',
285
+ dividerColor: 'rgba(255,255,255,0.12)'
286
+ },
287
+ accordion: {
288
+ background: '#2c2c2e',
289
+ borderColor: 'rgba(255,255,255,0.12)',
290
+ shadow: 'none',
291
+ dividerColor: 'rgba(255,255,255,0.12)',
292
+ borderRadius: '8px',
293
+ headerBackground: 'transparent'
294
+ },
295
+ input: {
296
+ background: '#2c2c2e',
297
+ borderColor: 'rgba(255,255,255,0.12)',
298
+ placeholderColor: '#a1a1a1'
299
+ },
300
+ select: {
301
+ background: '#2c2c2e',
302
+ borderColor: 'rgba(255,255,255,0.12)',
303
+ shadow: 'none',
304
+ borderWidth: '1px',
305
+ borderRadius: '8px'
306
+ },
307
+ table: {
308
+ background: '#1c1c1e',
309
+ borderColor: 'rgba(255,255,255,0.08)',
310
+ headerBackground: '#2c2c2e',
311
+ rowHoverBackground: 'rgba(0,122,255,0.15)',
312
+ stripedBackground: 'rgba(255,255,255,0.01)',
313
+ textColor: '#f5f5f7',
314
+ headerTextColor: '#a1a1a1'
315
+ },
316
+ chart: {
317
+ background: 'transparent',
318
+ gridColor: 'rgba(255,255,255,0.05)',
319
+ labelColor: '#a1a1a1',
320
+ colors: ['#0a84ff', '#30d158', '#ffd60a', '#ff453a', '#bf5af2']
321
+ },
322
+ toast: {
323
+ background: '#2c2c2e',
324
+ borderColor: 'rgba(255,255,255,0.1)',
325
+ textColor: '#f5f5f7',
326
+ shadow: '0 15px 35px rgba(0,0,0,0.6)',
327
+ borderRadius: '12px',
328
+ closeButtonOpacity: '0.6',
329
+ closeButtonHoverOpacity: '1',
330
+ iconColor: {
331
+ info: '#0a84ff',
332
+ success: '#30d158',
333
+ warning: '#ffd60a',
334
+ error: '#ff453a'
335
+ }
336
+ },
337
+ notificationMenu: {
338
+ button: {
339
+ background: 'transparent',
340
+ textColor: '#f5f5f7',
341
+ icon: 'bell',
342
+ badgeBackground: '#ff3b30',
343
+ badgeTextColor: '#ffffff'
344
+ },
345
+ dropdown: {
346
+ background: '#2c2c2e',
347
+ borderColor: 'rgba(255,255,255,0.1)',
348
+ shadow: '0 20px 40px rgba(0,0,0,0.6)',
349
+ width: '320px',
350
+ maxHeight: '400px',
351
+ borderRadius: '12px'
352
+ },
353
+ item: {
354
+ background: 'transparent',
355
+ hoverBackground: 'rgba(255, 255, 255, 0.05)',
356
+ textColor: '#f5f5f7',
357
+ descriptionColor: '#a1a1a1',
358
+ dividerColor: 'rgba(255,255,255,0.05)',
359
+ unreadIndicator: '#0a84ff'
360
+ }
361
+ }
362
+ }
363
+ },
364
+ componentAnimations: {
365
+ 'fy-button': workbenchButtonAnimations,
366
+ 'fy-input': {
367
+ focus: 'input-focus-macos-glow',
368
+ success: 'input-success-macos-pulse',
369
+ error: 'input-error-macos-shake'
370
+ },
371
+ 'fy-layout': {
372
+ enter: 'layout-macos-window-enter'
373
+ },
374
+ 'fy-slot:header': {
375
+ open: 'header-menu-macos-slide-in',
376
+ close: 'header-menu-macos-slide-out'
377
+ },
378
+ 'fy-slot:sidebar': {
379
+ open: 'sidebar-macos-slide-in',
380
+ close: 'sidebar-macos-slide-out'
381
+ },
382
+ 'fy-notification-menu': {
383
+ open: 'dropdown-in',
384
+ close: 'dropdown-out'
385
+ },
386
+ 'fy-accordion': {
387
+ expand: 'accordion-expand',
388
+ collapse: 'accordion-collapse'
389
+ },
390
+ 'fy-card': {
391
+ enter: 'card-macos-fade-in'
392
+ }
393
+ }
394
+ };
@@ -0,0 +1,2 @@
1
+ import { ThemeDefinition } from '@fylib/core';
2
+ export declare const fineyWorkbench2Theme: ThemeDefinition;