@directus/themes 0.2.0 → 0.3.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 (29) hide show
  1. package/dist/components/index.d.ts +1 -0
  2. package/dist/{theme-provider.vue.d.ts → components/theme-provider.vue.d.ts} +465 -81
  3. package/dist/composables/index.d.ts +2 -0
  4. package/dist/composables/use-fonts.d.ts +5 -0
  5. package/dist/composables/use-theme.d.ts +455 -0
  6. package/dist/index.d.ts +5 -4
  7. package/dist/index.js +735 -245
  8. package/dist/schemas/index.d.ts +1 -0
  9. package/dist/schemas/theme.d.ts +247 -0
  10. package/dist/stores/index.d.ts +1 -0
  11. package/dist/stores/theme.d.ts +1412 -0
  12. package/dist/themes/dark/default.d.ts +223 -0
  13. package/dist/themes/dark/index.d.ts +1 -0
  14. package/dist/themes/index.d.ts +3 -0
  15. package/dist/themes/light/color-match.d.ts +97 -0
  16. package/dist/themes/light/default.d.ts +230 -0
  17. package/dist/themes/light/index.d.ts +3 -0
  18. package/dist/themes/light/minimal.d.ts +113 -0
  19. package/dist/utils/define-theme.d.ts +233 -0
  20. package/dist/utils/index.d.ts +2 -0
  21. package/dist/utils/rules-to-css-vars.d.ts +3 -0
  22. package/package.json +7 -7
  23. package/dist/schema.d.ts +0 -149
  24. package/dist/schema.json +0 -605
  25. package/dist/store.d.ts +0 -836
  26. package/dist/themes/dark-directus.d.ts +0 -2
  27. package/dist/themes/light-directus.d.ts +0 -2
  28. package/dist/use-fonts.d.ts +0 -6
  29. package/dist/use-theme.d.ts +0 -142
package/dist/store.d.ts DELETED
@@ -1,836 +0,0 @@
1
- import type { Theme } from './schema.js';
2
- export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes", import("pinia")._UnwrapAll<Pick<{
3
- themes: {
4
- light: {
5
- name: string;
6
- appearance: "light" | "dark";
7
- rules: {
8
- foreground: string;
9
- foregroundSubdued: string;
10
- foregroundAccent: string;
11
- background: string;
12
- primary: string;
13
- primaryBackground: string;
14
- primarySubdued: string;
15
- primaryAccent: string;
16
- secondary: string;
17
- secondaryBackground: string;
18
- secondarySubdued: string;
19
- secondaryAccent: string;
20
- success: string;
21
- successBackground: string;
22
- successSubdued: string;
23
- successAccent: string;
24
- warning: string;
25
- warningBackground: string;
26
- warningSubdued: string;
27
- warningAccent: string;
28
- danger: string;
29
- dangerBackground: string;
30
- dangerSubdued: string;
31
- dangerAccent: string;
32
- fontFamilyDisplay: string;
33
- fontFamilySansSerif: string;
34
- fontFamilySerif: string;
35
- fontFamilyMonospace: string;
36
- borderRadius: string;
37
- borderWidth: string;
38
- navigation: {
39
- background: string;
40
- borderWidth: string;
41
- borderColor: string;
42
- project: {
43
- foreground: string;
44
- background: string;
45
- borderWidth: string;
46
- borderColor: string;
47
- fontFamily: string;
48
- };
49
- modules: {
50
- background: string;
51
- borderWidth: string;
52
- borderColor: string;
53
- button: {
54
- foreground: string;
55
- background: string;
56
- foregroundHover: string;
57
- foregroundActive: string;
58
- backgroundHover: string;
59
- backgroundActive: string;
60
- };
61
- };
62
- list: {
63
- foreground: string;
64
- background: string;
65
- fontFamily: string;
66
- foregroundHover: string;
67
- foregroundActive: string;
68
- backgroundHover: string;
69
- backgroundActive: string;
70
- icon: {
71
- foreground: string;
72
- foregroundHover: string;
73
- foregroundActive: string;
74
- };
75
- divider: {
76
- borderWidth: string;
77
- borderColor: string;
78
- };
79
- };
80
- };
81
- header: {
82
- background: string;
83
- borderWidth: string;
84
- borderColor: string;
85
- boxShadow: string;
86
- headline: {
87
- foreground: string;
88
- fontFamily: string;
89
- };
90
- title: {
91
- foreground: string;
92
- fontFamily: string;
93
- };
94
- };
95
- form: {
96
- field: {
97
- label: {
98
- foreground: string;
99
- fontFamily: string;
100
- };
101
- input: {
102
- foreground: string;
103
- foregroundSubdued: string;
104
- background: string;
105
- borderColor: string;
106
- boxShadow: string;
107
- borderColorHover: string;
108
- borderColorFocus: string;
109
- boxShadowHover: string;
110
- boxShadowFocus: string;
111
- };
112
- };
113
- };
114
- sidebar: {
115
- foreground: string;
116
- background: string;
117
- borderWidth: string;
118
- borderColor: string;
119
- fontFamily: string;
120
- section: {
121
- toggle: {
122
- foreground: string;
123
- background: string;
124
- borderWidth: string;
125
- borderColor: string;
126
- fontFamily: string;
127
- foregroundHover: string;
128
- foregroundActive: string;
129
- backgroundHover: string;
130
- backgroundActive: string;
131
- icon: {
132
- foreground: string;
133
- foregroundHover: string;
134
- foregroundActive: string;
135
- };
136
- };
137
- };
138
- };
139
- };
140
- }[];
141
- dark: {
142
- name: string;
143
- appearance: "light" | "dark";
144
- rules: {
145
- foreground: string;
146
- foregroundSubdued: string;
147
- foregroundAccent: string;
148
- background: string;
149
- primary: string;
150
- primaryBackground: string;
151
- primarySubdued: string;
152
- primaryAccent: string;
153
- secondary: string;
154
- secondaryBackground: string;
155
- secondarySubdued: string;
156
- secondaryAccent: string;
157
- success: string;
158
- successBackground: string;
159
- successSubdued: string;
160
- successAccent: string;
161
- warning: string;
162
- warningBackground: string;
163
- warningSubdued: string;
164
- warningAccent: string;
165
- danger: string;
166
- dangerBackground: string;
167
- dangerSubdued: string;
168
- dangerAccent: string;
169
- fontFamilyDisplay: string;
170
- fontFamilySansSerif: string;
171
- fontFamilySerif: string;
172
- fontFamilyMonospace: string;
173
- borderRadius: string;
174
- borderWidth: string;
175
- navigation: {
176
- background: string;
177
- borderWidth: string;
178
- borderColor: string;
179
- project: {
180
- foreground: string;
181
- background: string;
182
- borderWidth: string;
183
- borderColor: string;
184
- fontFamily: string;
185
- };
186
- modules: {
187
- background: string;
188
- borderWidth: string;
189
- borderColor: string;
190
- button: {
191
- foreground: string;
192
- background: string;
193
- foregroundHover: string;
194
- foregroundActive: string;
195
- backgroundHover: string;
196
- backgroundActive: string;
197
- };
198
- };
199
- list: {
200
- foreground: string;
201
- background: string;
202
- fontFamily: string;
203
- foregroundHover: string;
204
- foregroundActive: string;
205
- backgroundHover: string;
206
- backgroundActive: string;
207
- icon: {
208
- foreground: string;
209
- foregroundHover: string;
210
- foregroundActive: string;
211
- };
212
- divider: {
213
- borderWidth: string;
214
- borderColor: string;
215
- };
216
- };
217
- };
218
- header: {
219
- background: string;
220
- borderWidth: string;
221
- borderColor: string;
222
- boxShadow: string;
223
- headline: {
224
- foreground: string;
225
- fontFamily: string;
226
- };
227
- title: {
228
- foreground: string;
229
- fontFamily: string;
230
- };
231
- };
232
- form: {
233
- field: {
234
- label: {
235
- foreground: string;
236
- fontFamily: string;
237
- };
238
- input: {
239
- foreground: string;
240
- foregroundSubdued: string;
241
- background: string;
242
- borderColor: string;
243
- boxShadow: string;
244
- borderColorHover: string;
245
- borderColorFocus: string;
246
- boxShadowHover: string;
247
- boxShadowFocus: string;
248
- };
249
- };
250
- };
251
- sidebar: {
252
- foreground: string;
253
- background: string;
254
- borderWidth: string;
255
- borderColor: string;
256
- fontFamily: string;
257
- section: {
258
- toggle: {
259
- foreground: string;
260
- background: string;
261
- borderWidth: string;
262
- borderColor: string;
263
- fontFamily: string;
264
- foregroundHover: string;
265
- foregroundActive: string;
266
- backgroundHover: string;
267
- backgroundActive: string;
268
- icon: {
269
- foreground: string;
270
- foregroundHover: string;
271
- foregroundActive: string;
272
- };
273
- };
274
- };
275
- };
276
- };
277
- }[];
278
- };
279
- registerTheme: (theme: Theme) => void;
280
- }, "themes">>, Pick<{
281
- themes: {
282
- light: {
283
- name: string;
284
- appearance: "light" | "dark";
285
- rules: {
286
- foreground: string;
287
- foregroundSubdued: string;
288
- foregroundAccent: string;
289
- background: string;
290
- primary: string;
291
- primaryBackground: string;
292
- primarySubdued: string;
293
- primaryAccent: string;
294
- secondary: string;
295
- secondaryBackground: string;
296
- secondarySubdued: string;
297
- secondaryAccent: string;
298
- success: string;
299
- successBackground: string;
300
- successSubdued: string;
301
- successAccent: string;
302
- warning: string;
303
- warningBackground: string;
304
- warningSubdued: string;
305
- warningAccent: string;
306
- danger: string;
307
- dangerBackground: string;
308
- dangerSubdued: string;
309
- dangerAccent: string;
310
- fontFamilyDisplay: string;
311
- fontFamilySansSerif: string;
312
- fontFamilySerif: string;
313
- fontFamilyMonospace: string;
314
- borderRadius: string;
315
- borderWidth: string;
316
- navigation: {
317
- background: string;
318
- borderWidth: string;
319
- borderColor: string;
320
- project: {
321
- foreground: string;
322
- background: string;
323
- borderWidth: string;
324
- borderColor: string;
325
- fontFamily: string;
326
- };
327
- modules: {
328
- background: string;
329
- borderWidth: string;
330
- borderColor: string;
331
- button: {
332
- foreground: string;
333
- background: string;
334
- foregroundHover: string;
335
- foregroundActive: string;
336
- backgroundHover: string;
337
- backgroundActive: string;
338
- };
339
- };
340
- list: {
341
- foreground: string;
342
- background: string;
343
- fontFamily: string;
344
- foregroundHover: string;
345
- foregroundActive: string;
346
- backgroundHover: string;
347
- backgroundActive: string;
348
- icon: {
349
- foreground: string;
350
- foregroundHover: string;
351
- foregroundActive: string;
352
- };
353
- divider: {
354
- borderWidth: string;
355
- borderColor: string;
356
- };
357
- };
358
- };
359
- header: {
360
- background: string;
361
- borderWidth: string;
362
- borderColor: string;
363
- boxShadow: string;
364
- headline: {
365
- foreground: string;
366
- fontFamily: string;
367
- };
368
- title: {
369
- foreground: string;
370
- fontFamily: string;
371
- };
372
- };
373
- form: {
374
- field: {
375
- label: {
376
- foreground: string;
377
- fontFamily: string;
378
- };
379
- input: {
380
- foreground: string;
381
- foregroundSubdued: string;
382
- background: string;
383
- borderColor: string;
384
- boxShadow: string;
385
- borderColorHover: string;
386
- borderColorFocus: string;
387
- boxShadowHover: string;
388
- boxShadowFocus: string;
389
- };
390
- };
391
- };
392
- sidebar: {
393
- foreground: string;
394
- background: string;
395
- borderWidth: string;
396
- borderColor: string;
397
- fontFamily: string;
398
- section: {
399
- toggle: {
400
- foreground: string;
401
- background: string;
402
- borderWidth: string;
403
- borderColor: string;
404
- fontFamily: string;
405
- foregroundHover: string;
406
- foregroundActive: string;
407
- backgroundHover: string;
408
- backgroundActive: string;
409
- icon: {
410
- foreground: string;
411
- foregroundHover: string;
412
- foregroundActive: string;
413
- };
414
- };
415
- };
416
- };
417
- };
418
- }[];
419
- dark: {
420
- name: string;
421
- appearance: "light" | "dark";
422
- rules: {
423
- foreground: string;
424
- foregroundSubdued: string;
425
- foregroundAccent: string;
426
- background: string;
427
- primary: string;
428
- primaryBackground: string;
429
- primarySubdued: string;
430
- primaryAccent: string;
431
- secondary: string;
432
- secondaryBackground: string;
433
- secondarySubdued: string;
434
- secondaryAccent: string;
435
- success: string;
436
- successBackground: string;
437
- successSubdued: string;
438
- successAccent: string;
439
- warning: string;
440
- warningBackground: string;
441
- warningSubdued: string;
442
- warningAccent: string;
443
- danger: string;
444
- dangerBackground: string;
445
- dangerSubdued: string;
446
- dangerAccent: string;
447
- fontFamilyDisplay: string;
448
- fontFamilySansSerif: string;
449
- fontFamilySerif: string;
450
- fontFamilyMonospace: string;
451
- borderRadius: string;
452
- borderWidth: string;
453
- navigation: {
454
- background: string;
455
- borderWidth: string;
456
- borderColor: string;
457
- project: {
458
- foreground: string;
459
- background: string;
460
- borderWidth: string;
461
- borderColor: string;
462
- fontFamily: string;
463
- };
464
- modules: {
465
- background: string;
466
- borderWidth: string;
467
- borderColor: string;
468
- button: {
469
- foreground: string;
470
- background: string;
471
- foregroundHover: string;
472
- foregroundActive: string;
473
- backgroundHover: string;
474
- backgroundActive: string;
475
- };
476
- };
477
- list: {
478
- foreground: string;
479
- background: string;
480
- fontFamily: string;
481
- foregroundHover: string;
482
- foregroundActive: string;
483
- backgroundHover: string;
484
- backgroundActive: string;
485
- icon: {
486
- foreground: string;
487
- foregroundHover: string;
488
- foregroundActive: string;
489
- };
490
- divider: {
491
- borderWidth: string;
492
- borderColor: string;
493
- };
494
- };
495
- };
496
- header: {
497
- background: string;
498
- borderWidth: string;
499
- borderColor: string;
500
- boxShadow: string;
501
- headline: {
502
- foreground: string;
503
- fontFamily: string;
504
- };
505
- title: {
506
- foreground: string;
507
- fontFamily: string;
508
- };
509
- };
510
- form: {
511
- field: {
512
- label: {
513
- foreground: string;
514
- fontFamily: string;
515
- };
516
- input: {
517
- foreground: string;
518
- foregroundSubdued: string;
519
- background: string;
520
- borderColor: string;
521
- boxShadow: string;
522
- borderColorHover: string;
523
- borderColorFocus: string;
524
- boxShadowHover: string;
525
- boxShadowFocus: string;
526
- };
527
- };
528
- };
529
- sidebar: {
530
- foreground: string;
531
- background: string;
532
- borderWidth: string;
533
- borderColor: string;
534
- fontFamily: string;
535
- section: {
536
- toggle: {
537
- foreground: string;
538
- background: string;
539
- borderWidth: string;
540
- borderColor: string;
541
- fontFamily: string;
542
- foregroundHover: string;
543
- foregroundActive: string;
544
- backgroundHover: string;
545
- backgroundActive: string;
546
- icon: {
547
- foreground: string;
548
- foregroundHover: string;
549
- foregroundActive: string;
550
- };
551
- };
552
- };
553
- };
554
- };
555
- }[];
556
- };
557
- registerTheme: (theme: Theme) => void;
558
- }, never>, Pick<{
559
- themes: {
560
- light: {
561
- name: string;
562
- appearance: "light" | "dark";
563
- rules: {
564
- foreground: string;
565
- foregroundSubdued: string;
566
- foregroundAccent: string;
567
- background: string;
568
- primary: string;
569
- primaryBackground: string;
570
- primarySubdued: string;
571
- primaryAccent: string;
572
- secondary: string;
573
- secondaryBackground: string;
574
- secondarySubdued: string;
575
- secondaryAccent: string;
576
- success: string;
577
- successBackground: string;
578
- successSubdued: string;
579
- successAccent: string;
580
- warning: string;
581
- warningBackground: string;
582
- warningSubdued: string;
583
- warningAccent: string;
584
- danger: string;
585
- dangerBackground: string;
586
- dangerSubdued: string;
587
- dangerAccent: string;
588
- fontFamilyDisplay: string;
589
- fontFamilySansSerif: string;
590
- fontFamilySerif: string;
591
- fontFamilyMonospace: string;
592
- borderRadius: string;
593
- borderWidth: string;
594
- navigation: {
595
- background: string;
596
- borderWidth: string;
597
- borderColor: string;
598
- project: {
599
- foreground: string;
600
- background: string;
601
- borderWidth: string;
602
- borderColor: string;
603
- fontFamily: string;
604
- };
605
- modules: {
606
- background: string;
607
- borderWidth: string;
608
- borderColor: string;
609
- button: {
610
- foreground: string;
611
- background: string;
612
- foregroundHover: string;
613
- foregroundActive: string;
614
- backgroundHover: string;
615
- backgroundActive: string;
616
- };
617
- };
618
- list: {
619
- foreground: string;
620
- background: string;
621
- fontFamily: string;
622
- foregroundHover: string;
623
- foregroundActive: string;
624
- backgroundHover: string;
625
- backgroundActive: string;
626
- icon: {
627
- foreground: string;
628
- foregroundHover: string;
629
- foregroundActive: string;
630
- };
631
- divider: {
632
- borderWidth: string;
633
- borderColor: string;
634
- };
635
- };
636
- };
637
- header: {
638
- background: string;
639
- borderWidth: string;
640
- borderColor: string;
641
- boxShadow: string;
642
- headline: {
643
- foreground: string;
644
- fontFamily: string;
645
- };
646
- title: {
647
- foreground: string;
648
- fontFamily: string;
649
- };
650
- };
651
- form: {
652
- field: {
653
- label: {
654
- foreground: string;
655
- fontFamily: string;
656
- };
657
- input: {
658
- foreground: string;
659
- foregroundSubdued: string;
660
- background: string;
661
- borderColor: string;
662
- boxShadow: string;
663
- borderColorHover: string;
664
- borderColorFocus: string;
665
- boxShadowHover: string;
666
- boxShadowFocus: string;
667
- };
668
- };
669
- };
670
- sidebar: {
671
- foreground: string;
672
- background: string;
673
- borderWidth: string;
674
- borderColor: string;
675
- fontFamily: string;
676
- section: {
677
- toggle: {
678
- foreground: string;
679
- background: string;
680
- borderWidth: string;
681
- borderColor: string;
682
- fontFamily: string;
683
- foregroundHover: string;
684
- foregroundActive: string;
685
- backgroundHover: string;
686
- backgroundActive: string;
687
- icon: {
688
- foreground: string;
689
- foregroundHover: string;
690
- foregroundActive: string;
691
- };
692
- };
693
- };
694
- };
695
- };
696
- }[];
697
- dark: {
698
- name: string;
699
- appearance: "light" | "dark";
700
- rules: {
701
- foreground: string;
702
- foregroundSubdued: string;
703
- foregroundAccent: string;
704
- background: string;
705
- primary: string;
706
- primaryBackground: string;
707
- primarySubdued: string;
708
- primaryAccent: string;
709
- secondary: string;
710
- secondaryBackground: string;
711
- secondarySubdued: string;
712
- secondaryAccent: string;
713
- success: string;
714
- successBackground: string;
715
- successSubdued: string;
716
- successAccent: string;
717
- warning: string;
718
- warningBackground: string;
719
- warningSubdued: string;
720
- warningAccent: string;
721
- danger: string;
722
- dangerBackground: string;
723
- dangerSubdued: string;
724
- dangerAccent: string;
725
- fontFamilyDisplay: string;
726
- fontFamilySansSerif: string;
727
- fontFamilySerif: string;
728
- fontFamilyMonospace: string;
729
- borderRadius: string;
730
- borderWidth: string;
731
- navigation: {
732
- background: string;
733
- borderWidth: string;
734
- borderColor: string;
735
- project: {
736
- foreground: string;
737
- background: string;
738
- borderWidth: string;
739
- borderColor: string;
740
- fontFamily: string;
741
- };
742
- modules: {
743
- background: string;
744
- borderWidth: string;
745
- borderColor: string;
746
- button: {
747
- foreground: string;
748
- background: string;
749
- foregroundHover: string;
750
- foregroundActive: string;
751
- backgroundHover: string;
752
- backgroundActive: string;
753
- };
754
- };
755
- list: {
756
- foreground: string;
757
- background: string;
758
- fontFamily: string;
759
- foregroundHover: string;
760
- foregroundActive: string;
761
- backgroundHover: string;
762
- backgroundActive: string;
763
- icon: {
764
- foreground: string;
765
- foregroundHover: string;
766
- foregroundActive: string;
767
- };
768
- divider: {
769
- borderWidth: string;
770
- borderColor: string;
771
- };
772
- };
773
- };
774
- header: {
775
- background: string;
776
- borderWidth: string;
777
- borderColor: string;
778
- boxShadow: string;
779
- headline: {
780
- foreground: string;
781
- fontFamily: string;
782
- };
783
- title: {
784
- foreground: string;
785
- fontFamily: string;
786
- };
787
- };
788
- form: {
789
- field: {
790
- label: {
791
- foreground: string;
792
- fontFamily: string;
793
- };
794
- input: {
795
- foreground: string;
796
- foregroundSubdued: string;
797
- background: string;
798
- borderColor: string;
799
- boxShadow: string;
800
- borderColorHover: string;
801
- borderColorFocus: string;
802
- boxShadowHover: string;
803
- boxShadowFocus: string;
804
- };
805
- };
806
- };
807
- sidebar: {
808
- foreground: string;
809
- background: string;
810
- borderWidth: string;
811
- borderColor: string;
812
- fontFamily: string;
813
- section: {
814
- toggle: {
815
- foreground: string;
816
- background: string;
817
- borderWidth: string;
818
- borderColor: string;
819
- fontFamily: string;
820
- foregroundHover: string;
821
- foregroundActive: string;
822
- backgroundHover: string;
823
- backgroundActive: string;
824
- icon: {
825
- foreground: string;
826
- foregroundHover: string;
827
- foregroundActive: string;
828
- };
829
- };
830
- };
831
- };
832
- };
833
- }[];
834
- };
835
- registerTheme: (theme: Theme) => void;
836
- }, "registerTheme">>;