@directus/themes 0.3.1 → 0.3.2

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 (11) hide show
  1. package/dist/components/theme-provider.vue.d.ts +39 -963
  2. package/dist/composables/use-theme.d.ts +2 -0
  3. package/dist/index.js +21 -16
  4. package/dist/schemas/theme.d.ts +1 -0
  5. package/dist/stores/theme.d.ts +6 -0
  6. package/dist/themes/dark/default.d.ts +1 -0
  7. package/dist/themes/light/color-match.d.ts +1 -0
  8. package/dist/themes/light/default.d.ts +1 -0
  9. package/dist/themes/light/minimal.d.ts +1 -0
  10. package/dist/utils/define-theme.d.ts +1 -0
  11. package/package.json +11 -11
package/dist/components/theme-provider.vue.d.ts CHANGED
@@ -1,971 +1,47 @@
1
1
  import type { DeepPartial } from '@directus/types';
2
2
  import type { Theme } from '../schemas/index.js';
3
- declare const _default: import("vue").DefineComponent<{
4
- darkMode: {
5
- type: import("vue").PropType<boolean>;
6
- required: true;
7
- };
8
- themeLight: {
9
- type: import("vue").PropType<string | null>;
10
- required: true;
11
- default: string;
12
- };
13
- themeLightOverrides: {
14
- type: import("vue").PropType<{
15
- foreground?: string;
16
- background?: string;
17
- backgroundSubdued?: string;
18
- foregroundSubdued?: string;
19
- borderColor?: string;
20
- borderRadius?: string;
21
- borderWidth?: string;
22
- foregroundAccent?: string;
23
- backgroundNormal?: string;
24
- backgroundAccent?: string;
25
- borderColorAccent?: string;
26
- borderColorSubdued?: string;
27
- primary?: string;
28
- primaryBackground?: string;
29
- primarySubdued?: string;
30
- primaryAccent?: string;
31
- secondary?: string;
32
- secondaryBackground?: string;
33
- secondarySubdued?: string;
34
- secondaryAccent?: string;
35
- success?: string;
36
- successBackground?: string;
37
- successSubdued?: string;
38
- successAccent?: string;
39
- warning?: string;
40
- warningBackground?: string;
41
- warningSubdued?: string;
42
- warningAccent?: string;
43
- danger?: string;
44
- dangerBackground?: string;
45
- dangerSubdued?: string;
46
- dangerAccent?: string;
47
- fonts?: {
48
- display?: {
49
- fontFamily?: string;
50
- fontWeight?: string;
51
- };
52
- sans?: {
53
- fontFamily?: string;
54
- fontWeight?: string;
55
- };
56
- serif?: {
57
- fontFamily?: string;
58
- fontWeight?: string;
59
- };
60
- monospace?: {
61
- fontFamily?: string;
62
- fontWeight?: string;
63
- };
64
- };
65
- navigation?: {
66
- background?: string;
67
- borderColor?: string;
68
- borderWidth?: string;
69
- backgroundAccent?: string;
70
- project?: {
71
- foreground?: string;
72
- fontFamily?: string;
73
- background?: string;
74
- borderColor?: string;
75
- borderWidth?: string;
76
- };
77
- modules?: {
78
- background?: string;
79
- borderColor?: string;
80
- borderWidth?: string;
81
- button?: {
82
- foreground?: string;
83
- background?: string;
84
- foregroundHover?: string;
85
- foregroundActive?: string;
86
- backgroundHover?: string;
87
- backgroundActive?: string;
88
- };
89
- };
90
- list?: {
91
- foreground?: string;
92
- fontFamily?: string;
93
- background?: string;
94
- foregroundHover?: string;
95
- foregroundActive?: string;
96
- backgroundHover?: string;
97
- backgroundActive?: string;
98
- icon?: {
99
- foreground?: string;
100
- foregroundHover?: string;
101
- foregroundActive?: string;
102
- };
103
- divider?: {
104
- borderColor?: string;
105
- borderWidth?: string;
106
- };
107
- };
108
- };
109
- header?: {
110
- background?: string;
111
- borderColor?: string;
112
- boxShadow?: string;
113
- borderWidth?: string;
114
- headline?: {
115
- foreground?: string;
116
- fontFamily?: string;
117
- };
118
- title?: {
119
- foreground?: string;
120
- fontFamily?: string;
121
- fontWeight?: string;
122
- };
123
- };
124
- form?: {
125
- columnGap?: string;
126
- rowGap?: string;
127
- field?: {
128
- label?: {
129
- foreground?: string;
130
- fontFamily?: string;
131
- fontWeight?: string;
132
- };
133
- input?: {
134
- foreground?: string;
135
- background?: string;
136
- backgroundSubdued?: string;
137
- foregroundSubdued?: string;
138
- borderColor?: string;
139
- borderColorHover?: string;
140
- borderColorFocus?: string;
141
- boxShadow?: string;
142
- boxShadowHover?: string;
143
- boxShadowFocus?: string;
144
- height?: string;
145
- padding?: string;
146
- };
147
- };
148
- };
149
- sidebar?: {
150
- foreground?: string;
151
- fontFamily?: string;
152
- background?: string;
153
- borderColor?: string;
154
- borderWidth?: string;
155
- section?: {
156
- form?: {
157
- columnGap?: string;
158
- rowGap?: string;
159
- field?: {
160
- label?: {
161
- foreground?: string;
162
- fontFamily?: string;
163
- fontWeight?: string;
164
- };
165
- input?: {
166
- foreground?: string;
167
- background?: string;
168
- backgroundSubdued?: string;
169
- foregroundSubdued?: string;
170
- borderColor?: string;
171
- borderColorHover?: string;
172
- borderColorFocus?: string;
173
- boxShadow?: string;
174
- boxShadowHover?: string;
175
- boxShadowFocus?: string;
176
- height?: string;
177
- padding?: string;
178
- };
179
- };
180
- };
181
- toggle?: {
182
- foreground?: string;
183
- fontFamily?: string;
184
- background?: string;
185
- borderColor?: string;
186
- borderWidth?: string;
187
- foregroundHover?: string;
188
- foregroundActive?: string;
189
- backgroundHover?: string;
190
- backgroundActive?: string;
191
- icon?: {
192
- foreground?: string;
193
- foregroundHover?: string;
194
- foregroundActive?: string;
195
- };
196
- };
197
- };
198
- };
199
- public?: {
200
- foreground?: string;
201
- background?: string;
202
- foregroundAccent?: string;
203
- form?: {
204
- columnGap?: string;
205
- rowGap?: string;
206
- field?: {
207
- label?: {
208
- foreground?: string;
209
- fontFamily?: string;
210
- fontWeight?: string;
211
- };
212
- input?: {
213
- foreground?: string;
214
- background?: string;
215
- backgroundSubdued?: string;
216
- foregroundSubdued?: string;
217
- borderColor?: string;
218
- borderColorHover?: string;
219
- borderColorFocus?: string;
220
- boxShadow?: string;
221
- boxShadowHover?: string;
222
- boxShadowFocus?: string;
223
- height?: string;
224
- padding?: string;
225
- };
226
- };
227
- };
228
- art?: {
229
- background?: string;
230
- primary?: string;
231
- secondary?: string;
232
- speed?: string;
233
- };
234
- };
235
- popover?: {
236
- menu?: {
237
- background?: string;
238
- boxShadow?: string;
239
- borderRadius?: string;
240
- };
241
- };
242
- }>;
243
- required: true;
244
- default: () => {};
245
- };
246
- themeDark: {
247
- type: import("vue").PropType<string | null>;
248
- required: true;
249
- default: string;
250
- };
251
- themeDarkOverrides: {
252
- type: import("vue").PropType<{
253
- foreground?: string;
254
- background?: string;
255
- backgroundSubdued?: string;
256
- foregroundSubdued?: string;
257
- borderColor?: string;
258
- borderRadius?: string;
259
- borderWidth?: string;
260
- foregroundAccent?: string;
261
- backgroundNormal?: string;
262
- backgroundAccent?: string;
263
- borderColorAccent?: string;
264
- borderColorSubdued?: string;
265
- primary?: string;
266
- primaryBackground?: string;
267
- primarySubdued?: string;
268
- primaryAccent?: string;
269
- secondary?: string;
270
- secondaryBackground?: string;
271
- secondarySubdued?: string;
272
- secondaryAccent?: string;
273
- success?: string;
274
- successBackground?: string;
275
- successSubdued?: string;
276
- successAccent?: string;
277
- warning?: string;
278
- warningBackground?: string;
279
- warningSubdued?: string;
280
- warningAccent?: string;
281
- danger?: string;
282
- dangerBackground?: string;
283
- dangerSubdued?: string;
284
- dangerAccent?: string;
285
- fonts?: {
286
- display?: {
287
- fontFamily?: string;
288
- fontWeight?: string;
289
- };
290
- sans?: {
291
- fontFamily?: string;
292
- fontWeight?: string;
293
- };
294
- serif?: {
295
- fontFamily?: string;
296
- fontWeight?: string;
297
- };
298
- monospace?: {
299
- fontFamily?: string;
300
- fontWeight?: string;
301
- };
302
- };
303
- navigation?: {
304
- background?: string;
305
- borderColor?: string;
306
- borderWidth?: string;
307
- backgroundAccent?: string;
308
- project?: {
309
- foreground?: string;
310
- fontFamily?: string;
311
- background?: string;
312
- borderColor?: string;
313
- borderWidth?: string;
314
- };
315
- modules?: {
316
- background?: string;
317
- borderColor?: string;
318
- borderWidth?: string;
319
- button?: {
320
- foreground?: string;
321
- background?: string;
322
- foregroundHover?: string;
323
- foregroundActive?: string;
324
- backgroundHover?: string;
325
- backgroundActive?: string;
326
- };
327
- };
328
- list?: {
329
- foreground?: string;
330
- fontFamily?: string;
331
- background?: string;
332
- foregroundHover?: string;
333
- foregroundActive?: string;
334
- backgroundHover?: string;
335
- backgroundActive?: string;
336
- icon?: {
337
- foreground?: string;
338
- foregroundHover?: string;
339
- foregroundActive?: string;
340
- };
341
- divider?: {
342
- borderColor?: string;
343
- borderWidth?: string;
344
- };
345
- };
346
- };
347
- header?: {
348
- background?: string;
349
- borderColor?: string;
350
- boxShadow?: string;
351
- borderWidth?: string;
352
- headline?: {
353
- foreground?: string;
354
- fontFamily?: string;
355
- };
356
- title?: {
357
- foreground?: string;
358
- fontFamily?: string;
359
- fontWeight?: string;
360
- };
361
- };
362
- form?: {
363
- columnGap?: string;
364
- rowGap?: string;
365
- field?: {
366
- label?: {
367
- foreground?: string;
368
- fontFamily?: string;
369
- fontWeight?: string;
370
- };
371
- input?: {
372
- foreground?: string;
373
- background?: string;
374
- backgroundSubdued?: string;
375
- foregroundSubdued?: string;
376
- borderColor?: string;
377
- borderColorHover?: string;
378
- borderColorFocus?: string;
379
- boxShadow?: string;
380
- boxShadowHover?: string;
381
- boxShadowFocus?: string;
382
- height?: string;
383
- padding?: string;
384
- };
385
- };
386
- };
387
- sidebar?: {
388
- foreground?: string;
389
- fontFamily?: string;
390
- background?: string;
391
- borderColor?: string;
392
- borderWidth?: string;
393
- section?: {
394
- form?: {
395
- columnGap?: string;
396
- rowGap?: string;
397
- field?: {
398
- label?: {
399
- foreground?: string;
400
- fontFamily?: string;
401
- fontWeight?: string;
402
- };
403
- input?: {
404
- foreground?: string;
405
- background?: string;
406
- backgroundSubdued?: string;
407
- foregroundSubdued?: string;
408
- borderColor?: string;
409
- borderColorHover?: string;
410
- borderColorFocus?: string;
411
- boxShadow?: string;
412
- boxShadowHover?: string;
413
- boxShadowFocus?: string;
414
- height?: string;
415
- padding?: string;
416
- };
417
- };
418
- };
419
- toggle?: {
420
- foreground?: string;
421
- fontFamily?: string;
422
- background?: string;
423
- borderColor?: string;
424
- borderWidth?: string;
425
- foregroundHover?: string;
426
- foregroundActive?: string;
427
- backgroundHover?: string;
428
- backgroundActive?: string;
429
- icon?: {
430
- foreground?: string;
431
- foregroundHover?: string;
432
- foregroundActive?: string;
433
- };
434
- };
435
- };
436
- };
437
- public?: {
438
- foreground?: string;
439
- background?: string;
440
- foregroundAccent?: string;
441
- form?: {
442
- columnGap?: string;
443
- rowGap?: string;
444
- field?: {
445
- label?: {
446
- foreground?: string;
447
- fontFamily?: string;
448
- fontWeight?: string;
449
- };
450
- input?: {
451
- foreground?: string;
452
- background?: string;
453
- backgroundSubdued?: string;
454
- foregroundSubdued?: string;
455
- borderColor?: string;
456
- borderColorHover?: string;
457
- borderColorFocus?: string;
458
- boxShadow?: string;
459
- boxShadowHover?: string;
460
- boxShadowFocus?: string;
461
- height?: string;
462
- padding?: string;
463
- };
464
- };
465
- };
466
- art?: {
467
- background?: string;
468
- primary?: string;
469
- secondary?: string;
470
- speed?: string;
471
- };
472
- };
473
- popover?: {
474
- menu?: {
475
- background?: string;
476
- boxShadow?: string;
477
- borderRadius?: string;
478
- };
479
- };
480
- }>;
481
- required: true;
482
- default: () => {};
483
- };
484
- }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
485
- darkMode: {
486
- type: import("vue").PropType<boolean>;
487
- required: true;
488
- };
489
- themeLight: {
490
- type: import("vue").PropType<string | null>;
491
- required: true;
492
- default: string;
493
- };
494
- themeLightOverrides: {
495
- type: import("vue").PropType<{
496
- foreground?: string;
497
- background?: string;
498
- backgroundSubdued?: string;
499
- foregroundSubdued?: string;
500
- borderColor?: string;
501
- borderRadius?: string;
502
- borderWidth?: string;
503
- foregroundAccent?: string;
504
- backgroundNormal?: string;
505
- backgroundAccent?: string;
506
- borderColorAccent?: string;
507
- borderColorSubdued?: string;
508
- primary?: string;
509
- primaryBackground?: string;
510
- primarySubdued?: string;
511
- primaryAccent?: string;
512
- secondary?: string;
513
- secondaryBackground?: string;
514
- secondarySubdued?: string;
515
- secondaryAccent?: string;
516
- success?: string;
517
- successBackground?: string;
518
- successSubdued?: string;
519
- successAccent?: string;
520
- warning?: string;
521
- warningBackground?: string;
522
- warningSubdued?: string;
523
- warningAccent?: string;
524
- danger?: string;
525
- dangerBackground?: string;
526
- dangerSubdued?: string;
527
- dangerAccent?: string;
528
- fonts?: {
529
- display?: {
530
- fontFamily?: string;
531
- fontWeight?: string;
532
- };
533
- sans?: {
534
- fontFamily?: string;
535
- fontWeight?: string;
536
- };
537
- serif?: {
538
- fontFamily?: string;
539
- fontWeight?: string;
540
- };
541
- monospace?: {
542
- fontFamily?: string;
543
- fontWeight?: string;
544
- };
545
- };
546
- navigation?: {
547
- background?: string;
548
- borderColor?: string;
549
- borderWidth?: string;
550
- backgroundAccent?: string;
551
- project?: {
552
- foreground?: string;
553
- fontFamily?: string;
554
- background?: string;
555
- borderColor?: string;
556
- borderWidth?: string;
557
- };
558
- modules?: {
559
- background?: string;
560
- borderColor?: string;
561
- borderWidth?: string;
562
- button?: {
563
- foreground?: string;
564
- background?: string;
565
- foregroundHover?: string;
566
- foregroundActive?: string;
567
- backgroundHover?: string;
568
- backgroundActive?: string;
569
- };
570
- };
571
- list?: {
572
- foreground?: string;
573
- fontFamily?: string;
574
- background?: string;
575
- foregroundHover?: string;
576
- foregroundActive?: string;
577
- backgroundHover?: string;
578
- backgroundActive?: string;
579
- icon?: {
580
- foreground?: string;
581
- foregroundHover?: string;
582
- foregroundActive?: string;
583
- };
584
- divider?: {
585
- borderColor?: string;
586
- borderWidth?: string;
587
- };
588
- };
589
- };
590
- header?: {
591
- background?: string;
592
- borderColor?: string;
593
- boxShadow?: string;
594
- borderWidth?: string;
595
- headline?: {
596
- foreground?: string;
597
- fontFamily?: string;
598
- };
599
- title?: {
600
- foreground?: string;
601
- fontFamily?: string;
602
- fontWeight?: string;
603
- };
604
- };
605
- form?: {
606
- columnGap?: string;
607
- rowGap?: string;
608
- field?: {
609
- label?: {
610
- foreground?: string;
611
- fontFamily?: string;
612
- fontWeight?: string;
613
- };
614
- input?: {
615
- foreground?: string;
616
- background?: string;
617
- backgroundSubdued?: string;
618
- foregroundSubdued?: string;
619
- borderColor?: string;
620
- borderColorHover?: string;
621
- borderColorFocus?: string;
622
- boxShadow?: string;
623
- boxShadowHover?: string;
624
- boxShadowFocus?: string;
625
- height?: string;
626
- padding?: string;
627
- };
628
- };
629
- };
630
- sidebar?: {
631
- foreground?: string;
632
- fontFamily?: string;
633
- background?: string;
634
- borderColor?: string;
635
- borderWidth?: string;
636
- section?: {
637
- form?: {
638
- columnGap?: string;
639
- rowGap?: string;
640
- field?: {
641
- label?: {
642
- foreground?: string;
643
- fontFamily?: string;
644
- fontWeight?: string;
645
- };
646
- input?: {
647
- foreground?: string;
648
- background?: string;
649
- backgroundSubdued?: string;
650
- foregroundSubdued?: string;
651
- borderColor?: string;
652
- borderColorHover?: string;
653
- borderColorFocus?: string;
654
- boxShadow?: string;
655
- boxShadowHover?: string;
656
- boxShadowFocus?: string;
657
- height?: string;
658
- padding?: string;
659
- };
660
- };
661
- };
662
- toggle?: {
663
- foreground?: string;
664
- fontFamily?: string;
665
- background?: string;
666
- borderColor?: string;
667
- borderWidth?: string;
668
- foregroundHover?: string;
669
- foregroundActive?: string;
670
- backgroundHover?: string;
671
- backgroundActive?: string;
672
- icon?: {
673
- foreground?: string;
674
- foregroundHover?: string;
675
- foregroundActive?: string;
676
- };
677
- };
678
- };
679
- };
680
- public?: {
681
- foreground?: string;
682
- background?: string;
683
- foregroundAccent?: string;
684
- form?: {
685
- columnGap?: string;
686
- rowGap?: string;
687
- field?: {
688
- label?: {
689
- foreground?: string;
690
- fontFamily?: string;
691
- fontWeight?: string;
692
- };
693
- input?: {
694
- foreground?: string;
695
- background?: string;
696
- backgroundSubdued?: string;
697
- foregroundSubdued?: string;
698
- borderColor?: string;
699
- borderColorHover?: string;
700
- borderColorFocus?: string;
701
- boxShadow?: string;
702
- boxShadowHover?: string;
703
- boxShadowFocus?: string;
704
- height?: string;
705
- padding?: string;
706
- };
707
- };
708
- };
709
- art?: {
710
- background?: string;
711
- primary?: string;
712
- secondary?: string;
713
- speed?: string;
714
- };
715
- };
716
- popover?: {
717
- menu?: {
718
- background?: string;
719
- boxShadow?: string;
720
- borderRadius?: string;
721
- };
722
- };
723
- }>;
724
- required: true;
725
- default: () => {};
726
- };
727
- themeDark: {
728
- type: import("vue").PropType<string | null>;
729
- required: true;
730
- default: string;
731
- };
732
- themeDarkOverrides: {
733
- type: import("vue").PropType<{
734
- foreground?: string;
735
- background?: string;
736
- backgroundSubdued?: string;
737
- foregroundSubdued?: string;
738
- borderColor?: string;
739
- borderRadius?: string;
740
- borderWidth?: string;
741
- foregroundAccent?: string;
742
- backgroundNormal?: string;
743
- backgroundAccent?: string;
744
- borderColorAccent?: string;
745
- borderColorSubdued?: string;
746
- primary?: string;
747
- primaryBackground?: string;
748
- primarySubdued?: string;
749
- primaryAccent?: string;
750
- secondary?: string;
751
- secondaryBackground?: string;
752
- secondarySubdued?: string;
753
- secondaryAccent?: string;
754
- success?: string;
755
- successBackground?: string;
756
- successSubdued?: string;
757
- successAccent?: string;
758
- warning?: string;
759
- warningBackground?: string;
760
- warningSubdued?: string;
761
- warningAccent?: string;
762
- danger?: string;
763
- dangerBackground?: string;
764
- dangerSubdued?: string;
765
- dangerAccent?: string;
766
- fonts?: {
767
- display?: {
768
- fontFamily?: string;
769
- fontWeight?: string;
770
- };
771
- sans?: {
772
- fontFamily?: string;
773
- fontWeight?: string;
774
- };
775
- serif?: {
776
- fontFamily?: string;
777
- fontWeight?: string;
778
- };
779
- monospace?: {
780
- fontFamily?: string;
781
- fontWeight?: string;
782
- };
783
- };
784
- navigation?: {
785
- background?: string;
786
- borderColor?: string;
787
- borderWidth?: string;
788
- backgroundAccent?: string;
789
- project?: {
790
- foreground?: string;
791
- fontFamily?: string;
792
- background?: string;
793
- borderColor?: string;
794
- borderWidth?: string;
795
- };
796
- modules?: {
797
- background?: string;
798
- borderColor?: string;
799
- borderWidth?: string;
800
- button?: {
801
- foreground?: string;
802
- background?: string;
803
- foregroundHover?: string;
804
- foregroundActive?: string;
805
- backgroundHover?: string;
806
- backgroundActive?: string;
807
- };
808
- };
809
- list?: {
810
- foreground?: string;
811
- fontFamily?: string;
812
- background?: string;
813
- foregroundHover?: string;
814
- foregroundActive?: string;
815
- backgroundHover?: string;
816
- backgroundActive?: string;
817
- icon?: {
818
- foreground?: string;
819
- foregroundHover?: string;
820
- foregroundActive?: string;
821
- };
822
- divider?: {
823
- borderColor?: string;
824
- borderWidth?: string;
825
- };
826
- };
827
- };
828
- header?: {
829
- background?: string;
830
- borderColor?: string;
831
- boxShadow?: string;
832
- borderWidth?: string;
833
- headline?: {
834
- foreground?: string;
835
- fontFamily?: string;
836
- };
837
- title?: {
838
- foreground?: string;
839
- fontFamily?: string;
840
- fontWeight?: string;
841
- };
842
- };
843
- form?: {
844
- columnGap?: string;
845
- rowGap?: string;
846
- field?: {
847
- label?: {
848
- foreground?: string;
849
- fontFamily?: string;
850
- fontWeight?: string;
851
- };
852
- input?: {
853
- foreground?: string;
854
- background?: string;
855
- backgroundSubdued?: string;
856
- foregroundSubdued?: string;
857
- borderColor?: string;
858
- borderColorHover?: string;
859
- borderColorFocus?: string;
860
- boxShadow?: string;
861
- boxShadowHover?: string;
862
- boxShadowFocus?: string;
863
- height?: string;
864
- padding?: string;
865
- };
866
- };
867
- };
868
- sidebar?: {
869
- foreground?: string;
870
- fontFamily?: string;
871
- background?: string;
872
- borderColor?: string;
873
- borderWidth?: string;
874
- section?: {
875
- form?: {
876
- columnGap?: string;
877
- rowGap?: string;
878
- field?: {
879
- label?: {
880
- foreground?: string;
881
- fontFamily?: string;
882
- fontWeight?: string;
883
- };
884
- input?: {
885
- foreground?: string;
886
- background?: string;
887
- backgroundSubdued?: string;
888
- foregroundSubdued?: string;
889
- borderColor?: string;
890
- borderColorHover?: string;
891
- borderColorFocus?: string;
892
- boxShadow?: string;
893
- boxShadowHover?: string;
894
- boxShadowFocus?: string;
895
- height?: string;
896
- padding?: string;
897
- };
898
- };
899
- };
900
- toggle?: {
901
- foreground?: string;
902
- fontFamily?: string;
903
- background?: string;
904
- borderColor?: string;
905
- borderWidth?: string;
906
- foregroundHover?: string;
907
- foregroundActive?: string;
908
- backgroundHover?: string;
909
- backgroundActive?: string;
910
- icon?: {
911
- foreground?: string;
912
- foregroundHover?: string;
913
- foregroundActive?: string;
914
- };
915
- };
916
- };
917
- };
918
- public?: {
919
- foreground?: string;
920
- background?: string;
921
- foregroundAccent?: string;
922
- form?: {
923
- columnGap?: string;
924
- rowGap?: string;
925
- field?: {
926
- label?: {
927
- foreground?: string;
928
- fontFamily?: string;
929
- fontWeight?: string;
930
- };
931
- input?: {
932
- foreground?: string;
933
- background?: string;
934
- backgroundSubdued?: string;
935
- foregroundSubdued?: string;
936
- borderColor?: string;
937
- borderColorHover?: string;
938
- borderColorFocus?: string;
939
- boxShadow?: string;
940
- boxShadowHover?: string;
941
- boxShadowFocus?: string;
942
- height?: string;
943
- padding?: string;
944
- };
945
- };
946
- };
947
- art?: {
948
- background?: string;
949
- primary?: string;
950
- secondary?: string;
951
- speed?: string;
952
- };
953
- };
954
- popover?: {
955
- menu?: {
956
- background?: string;
957
- boxShadow?: string;
958
- borderRadius?: string;
959
- };
960
- };
961
- }>;
962
- required: true;
963
- default: () => {};
964
- };
965
- }>>, {
3
+ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
4
+ darkMode: boolean;
5
+ themeLight: string | null;
6
+ themeLightOverrides: DeepPartial<Theme['rules']>;
7
+ themeDark: string | null;
8
+ themeDarkOverrides: DeepPartial<Theme['rules']>;
9
+ }>, {
10
+ themeLight: string;
11
+ themeDark: string;
12
+ themeLightOverrides: () => {};
13
+ themeDarkOverrides: () => {};
14
+ }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
15
+ darkMode: boolean;
16
+ themeLight: string | null;
17
+ themeLightOverrides: DeepPartial<Theme['rules']>;
18
+ themeDark: string | null;
19
+ themeDarkOverrides: DeepPartial<Theme['rules']>;
20
+ }>, {
21
+ themeLight: string;
22
+ themeDark: string;
23
+ themeLightOverrides: () => {};
24
+ themeDarkOverrides: () => {};
25
+ }>>>, {
966
26
  themeLight: string | null;
967
27
  themeLightOverrides: DeepPartial<Theme['rules']>;
968
28
  themeDark: string | null;
969
29
  themeDarkOverrides: DeepPartial<Theme['rules']>;
970
30
  }, {}>;
971
31
  export default _default;
32
+ type __VLS_TypePropsToRuntimeProps<T> = {
33
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
34
+ type: import('vue').PropType<T[K]>;
35
+ } : {
36
+ type: import('vue').PropType<T[K]>;
37
+ required: true;
38
+ };
39
+ };
40
+ type __VLS_WithDefaults<P, D> = {
41
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
42
+ default: D[K];
43
+ }> : P[K];
44
+ };
45
+ type __VLS_Prettify<T> = {
46
+ [K in keyof T]: T[K];
47
+ } & {};
package/dist/composables/use-theme.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { MaybeRef } from 'vue';
3
3
  import type { Theme } from '../schemas/theme.js';
4
4
  export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRef<string | null>, themeDark: MaybeRef<string | null>, themeLightOverrides: MaybeRef<DeepPartial<Theme['rules']>>, themeDarkOverrides: MaybeRef<DeepPartial<Theme['rules']>>) => {
5
5
  theme: import("vue").ComputedRef<{
6
+ id: string;
6
7
  name: string;
7
8
  appearance: "dark";
8
9
  rules: {
@@ -231,6 +232,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
231
232
  };
232
233
  };
233
234
  } | {
235
+ id: string;
234
236
  name: string;
235
237
  appearance: "light";
236
238
  rules: {
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import { computed as v, unref as i, reactive as B, defineComponent as $, toRefs as D, openBlock as G, createBlock as T, Teleport as L, createTextVNode as N, toDisplayString as M } from "vue";
2
- import { useHead as E } from "@unhead/vue";
3
- import { get as W, merge as w, mapKeys as U } from "lodash-es";
4
- import { defineStore as _, storeToRefs as I } from "pinia";
1
+ import { computed as v, unref as i, reactive as B, defineComponent as $, toRefs as D, openBlock as G, createBlock as T, Teleport as _, createTextVNode as L, toDisplayString as M } from "vue";
2
+ import { useHead as N } from "@unhead/vue";
3
+ import { get as W, merge as w, mapKeys as E } from "lodash-es";
4
+ import { defineStore as I, storeToRefs as U } from "pinia";
5
5
  import P from "decamelize";
6
6
  import { flatten as V } from "flat";
7
7
  import { cssVar as z } from "@directus/utils/browser";
@@ -249,6 +249,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
249
249
  })
250
250
  )
251
251
  }), Q = r.Object({
252
+ id: r.String(),
252
253
  name: r.String(),
253
254
  appearance: r.Union([r.Literal("light"), r.Literal("dark")]),
254
255
  rules: K
@@ -301,7 +302,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
301
302
  return o;
302
303
  }) };
303
304
  }, R = (d) => d, A = R({
304
- name: "Directus Default",
305
+ id: "Directus Default",
306
+ name: "$t:theme_directus_default",
305
307
  appearance: "dark",
306
308
  rules: {
307
309
  borderRadius: "6px",
@@ -529,7 +531,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
529
531
  }
530
532
  }
531
533
  }), J = R({
532
- name: "Directus Color Match",
534
+ id: "Directus Color Match",
535
+ name: "$t:theme_directus_colormatch",
533
536
  appearance: "light",
534
537
  rules: {
535
538
  background: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 7%)",
@@ -613,7 +616,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
613
616
  }
614
617
  }
615
618
  }), C = R({
616
- name: "Directus Default",
619
+ id: "Directus Default",
620
+ name: "$t:theme_directus_default",
617
621
  appearance: "light",
618
622
  rules: {
619
623
  borderRadius: "6px",
@@ -841,7 +845,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
841
845
  }
842
846
  }
843
847
  }), X = R({
844
- name: "Directus Minimal",
848
+ id: "Directus Minimal",
849
+ name: "$t:theme_directus_minimal",
845
850
  appearance: "light",
846
851
  rules: {
847
852
  borderWidth: "1px",
@@ -955,20 +960,20 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
955
960
  }
956
961
  }
957
962
  }
958
- }), Y = [A], Z = [C, X, J], rr = _("🎨 Themes", () => {
963
+ }), Y = [A], Z = [C, X, J], rr = I("🎨 Themes", () => {
959
964
  const d = B({ light: Z, dark: Y });
960
965
  return { themes: d, registerTheme: (f) => {
961
966
  f.appearance === "light" ? d.light.push(f) : d.dark.push(f);
962
967
  } };
963
968
  }), er = (d, s, f, p, o) => {
964
- const { themes: c } = I(rr());
969
+ const { themes: c } = U(rr());
965
970
  return { theme: v(() => {
966
- const a = i(d) ? i(f) : i(s), t = i(d) ? A : C, n = i(d) ? i(o) : i(p), h = i(c)[i(d) ? "dark" : "light"].find((l) => l.name === a);
967
- return h ? n ? w({}, t, h, { rules: n }) : w(t, h) : (a && a !== t.name && console.warn(`Theme "${a}" doesn't exist.`), n ? w({}, t, { rules: n }) : t);
971
+ const a = i(d) ? i(f) : i(s), t = i(d) ? A : C, n = i(d) ? i(o) : i(p), h = i(c)[i(d) ? "dark" : "light"].find((l) => l.id === a);
972
+ return h ? n ? w({}, t, h, { rules: n }) : w(t, h) : (a && a !== t.id && console.warn(`Theme "${a}" doesn't exist.`), n ? w({}, t, { rules: n }) : t);
968
973
  }) };
969
974
  }, or = (d) => {
970
975
  const s = V(d, { delimiter: "--" }), f = (p) => `--theme--${P(p, { separator: "-" })}`;
971
- return U(s, (p, o) => f(o));
976
+ return E(s, (p, o) => f(o));
972
977
  }, gr = /* @__PURE__ */ $({
973
978
  __name: "theme-provider",
974
979
  props: {
@@ -980,7 +985,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
980
985
  },
981
986
  setup(d) {
982
987
  const s = d, { darkMode: f, themeLight: p, themeDark: o, themeLightOverrides: c, themeDarkOverrides: m } = D(s), { theme: a } = er(f, p, o, c, m), t = v(() => or(i(a).rules)), { googleFonts: n } = q(a);
983
- E({
988
+ N({
984
989
  link: v(() => {
985
990
  let l = "";
986
991
  if (n.value.length > 0) {
@@ -997,8 +1002,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
997
1002
  })
998
1003
  });
999
1004
  const h = v(() => `:root {${Object.entries(i(t)).map(([g, x]) => `${g}: ${x};`).join(" ")}}`);
1000
- return (l, g) => (G(), T(L, { to: "#theme" }, [
1001
- N(M(h.value), 1)
1005
+ return (l, g) => (G(), T(_, { to: "#theme" }, [
1006
+ L(M(h.value), 1)
1002
1007
  ]));
1003
1008
  }
1004
1009
  });
package/dist/schemas/theme.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { Static } from '@sinclair/typebox';
2
2
  export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
3
+ id: import("@sinclair/typebox").TString;
3
4
  name: import("@sinclair/typebox").TString;
4
5
  appearance: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TLiteral<"light">, import("@sinclair/typebox").TLiteral<"dark">]>;
5
6
  rules: import("@sinclair/typebox").TObject<{
package/dist/stores/theme.d.ts CHANGED
@@ -2,6 +2,7 @@ import type { Theme } from '../schemas/theme.js';
2
2
  export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes", import("pinia")._UnwrapAll<Pick<{
3
3
  themes: {
4
4
  light: {
5
+ id: string;
5
6
  name: string;
6
7
  appearance: "light" | "dark";
7
8
  rules: {
@@ -235,6 +236,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
235
236
  };
236
237
  }[];
237
238
  dark: {
239
+ id: string;
238
240
  name: string;
239
241
  appearance: "light" | "dark";
240
242
  rules: {
@@ -472,6 +474,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
472
474
  }, "themes">>, Pick<{
473
475
  themes: {
474
476
  light: {
477
+ id: string;
475
478
  name: string;
476
479
  appearance: "light" | "dark";
477
480
  rules: {
@@ -705,6 +708,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
705
708
  };
706
709
  }[];
707
710
  dark: {
711
+ id: string;
708
712
  name: string;
709
713
  appearance: "light" | "dark";
710
714
  rules: {
@@ -942,6 +946,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
942
946
  }, never>, Pick<{
943
947
  themes: {
944
948
  light: {
949
+ id: string;
945
950
  name: string;
946
951
  appearance: "light" | "dark";
947
952
  rules: {
@@ -1175,6 +1180,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
1175
1180
  };
1176
1181
  }[];
1177
1182
  dark: {
1183
+ id: string;
1178
1184
  name: string;
1179
1185
  appearance: "light" | "dark";
1180
1186
  rules: {
package/dist/themes/dark/default.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  declare const _default: {
2
+ id: string;
2
3
  name: string;
3
4
  appearance: "dark";
4
5
  rules: {
package/dist/themes/light/color-match.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  declare const _default: {
2
+ id: string;
2
3
  name: string;
3
4
  appearance: "light";
4
5
  rules: {
package/dist/themes/light/default.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  declare const _default: {
2
+ id: string;
2
3
  name: string;
3
4
  appearance: "light";
4
5
  rules: {
package/dist/themes/light/minimal.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  declare const _default: {
2
+ id: string;
2
3
  name: string;
3
4
  appearance: "light";
4
5
  rules: {
package/dist/utils/define-theme.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare const defineTheme: <T extends {
2
+ id: string;
2
3
  name: string;
3
4
  appearance: "light" | "dark";
4
5
  rules: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@directus/themes",
3
- "version": "0.3.1",
3
+ "version": "0.3.2",
4
4
  "description": "Themes for Directus",
5
5
  "homepage": "https://directus.io",
6
6
  "repository": {
@@ -22,26 +22,26 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@sinclair/typebox": "0.31.17",
26
- "@unhead/vue": "1.1.30",
25
+ "@sinclair/typebox": "0.31.28",
27
26
  "decamelize": "6.0.0",
28
27
  "flat": "6.0.1",
29
28
  "lodash-es": "4.17.21",
30
- "@directus/utils": "11.0.2"
29
+ "@directus/utils": "11.0.3"
31
30
  },
32
31
  "devDependencies": {
33
- "@types/lodash-es": "4.17.9",
34
- "@vitejs/plugin-vue": "4.4.0",
32
+ "@types/lodash-es": "4.17.12",
33
+ "@vitejs/plugin-vue": "4.5.2",
35
34
  "rollup-plugin-node-externals": "6.1.2",
36
- "typescript": "5.2.2",
37
- "vite": "4.4.11",
38
- "vite-plugin-dts": "3.6.0",
35
+ "typescript": "5.3.3",
36
+ "vite": "5.0.10",
37
+ "vite-plugin-dts": "3.6.4",
39
38
  "@directus/tsconfig": "1.0.1",
40
- "@directus/types": "11.0.2"
39
+ "@directus/types": "11.0.3"
41
40
  },
42
41
  "peerDependencies": {
42
+ "@unhead/vue": "1.8.9",
43
43
  "pinia": "2.1.7",
44
- "vue": "3.3.4"
44
+ "vue": "3.3.13"
45
45
  },
46
46
  "scripts": {
47
47
  "build": "vite build",