@directus/themes 0.0.3 → 0.2.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 (8) hide show
  1. package/dist/index.d.ts +3 -3
  2. package/dist/index.js +267 -159
  3. package/dist/schema.d.ts +37 -5
  4. package/dist/schema.json +179 -14
  5. package/dist/store.d.ts +186 -0
  6. package/dist/theme-provider.vue.d.ts +124 -0
  7. package/dist/use-theme.d.ts +31 -0
  8. package/package.json +1 -1
package/dist/schema.d.ts CHANGED
@@ -1,8 +1,4 @@
1
1
  import type { Static } from '@sinclair/typebox';
2
- export declare const TypeId: {
3
- Color: string;
4
- FontFamily: string;
5
- };
6
2
  export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
7
3
  name: import("@sinclair/typebox").TString;
8
4
  appearance: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TLiteral<"light">, import("@sinclair/typebox").TLiteral<"dark">]>;
@@ -35,14 +31,23 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
35
31
  fontFamilySansSerif: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
36
32
  fontFamilySerif: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
37
33
  fontFamilyMonospace: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
34
+ borderRadius: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>, import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>]>;
35
+ borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
38
36
  navigation: import("@sinclair/typebox").TObject<{
39
37
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
38
+ borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
39
+ borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
40
40
  project: import("@sinclair/typebox").TObject<{
41
41
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
42
42
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
43
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
44
+ borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
45
+ borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
43
46
  }>;
44
47
  modules: import("@sinclair/typebox").TObject<{
45
48
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
49
+ borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
50
+ borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
46
51
  button: import("@sinclair/typebox").TObject<{
47
52
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
48
53
  foregroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
@@ -64,12 +69,21 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
64
69
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
65
70
  backgroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
66
71
  backgroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
72
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
73
+ divider: import("@sinclair/typebox").TObject<{
74
+ borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
75
+ borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
76
+ }>;
67
77
  }>;
68
78
  }>;
69
79
  header: import("@sinclair/typebox").TObject<{
70
80
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
81
+ borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
82
+ borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
83
+ boxShadow: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
71
84
  headline: import("@sinclair/typebox").TObject<{
72
85
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
86
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
73
87
  }>;
74
88
  title: import("@sinclair/typebox").TObject<{
75
89
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
@@ -80,17 +94,27 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
80
94
  field: import("@sinclair/typebox").TObject<{
81
95
  label: import("@sinclair/typebox").TObject<{
82
96
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
97
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
83
98
  }>;
84
99
  input: import("@sinclair/typebox").TObject<{
85
100
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
86
101
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
87
102
  foregroundSubdued: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
103
+ borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
104
+ borderColorHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
105
+ borderColorFocus: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
106
+ boxShadow: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
107
+ boxShadowHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
108
+ boxShadowFocus: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
88
109
  }>;
89
110
  }>;
90
111
  }>;
91
112
  sidebar: import("@sinclair/typebox").TObject<{
92
113
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
93
114
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
115
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
116
+ borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
117
+ borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
94
118
  section: import("@sinclair/typebox").TObject<{
95
119
  toggle: import("@sinclair/typebox").TObject<{
96
120
  icon: import("@sinclair/typebox").TObject<{
@@ -104,6 +128,9 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
104
128
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
105
129
  backgroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
106
130
  backgroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
131
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
132
+ borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
133
+ borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
107
134
  }>;
108
135
  }>;
109
136
  }>;
@@ -111,7 +138,12 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
111
138
  }>;
112
139
  export declare const Definitions: {
113
140
  $defs: {
114
- [x: string]: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
141
+ Color: import("@sinclair/typebox").TString;
142
+ FamilyName: import("@sinclair/typebox").TString;
143
+ Length: import("@sinclair/typebox").TString;
144
+ Percentage: import("@sinclair/typebox").TString;
145
+ LineWidth: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>;
146
+ BoxShadow: import("@sinclair/typebox").TString;
115
147
  };
116
148
  };
117
149
  export type Theme = Static<typeof ThemeSchema>;
package/dist/schema.json CHANGED
@@ -92,16 +92,29 @@
92
92
  "$ref": "Color"
93
93
  },
94
94
  "fontFamilyDisplay": {
95
- "$ref": "FontFamily"
95
+ "$ref": "FamilyName"
96
96
  },
97
97
  "fontFamilySansSerif": {
98
- "$ref": "FontFamily"
98
+ "$ref": "FamilyName"
99
99
  },
100
100
  "fontFamilySerif": {
101
- "$ref": "FontFamily"
101
+ "$ref": "FamilyName"
102
102
  },
103
103
  "fontFamilyMonospace": {
104
- "$ref": "FontFamily"
104
+ "$ref": "FamilyName"
105
+ },
106
+ "borderRadius": {
107
+ "anyOf": [
108
+ {
109
+ "$ref": "Length"
110
+ },
111
+ {
112
+ "$ref": "Percentage"
113
+ }
114
+ ]
115
+ },
116
+ "borderWidth": {
117
+ "$ref": "LineWidth"
105
118
  },
106
119
  "navigation": {
107
120
  "type": "object",
@@ -109,6 +122,12 @@
109
122
  "background": {
110
123
  "$ref": "Color"
111
124
  },
125
+ "borderWidth": {
126
+ "$ref": "LineWidth"
127
+ },
128
+ "borderColor": {
129
+ "$ref": "Color"
130
+ },
112
131
  "project": {
113
132
  "type": "object",
114
133
  "properties": {
@@ -117,11 +136,23 @@
117
136
  },
118
137
  "foreground": {
119
138
  "$ref": "Color"
139
+ },
140
+ "fontFamily": {
141
+ "$ref": "FamilyName"
142
+ },
143
+ "borderWidth": {
144
+ "$ref": "LineWidth"
145
+ },
146
+ "borderColor": {
147
+ "$ref": "Color"
120
148
  }
121
149
  },
122
150
  "required": [
123
151
  "background",
124
- "foreground"
152
+ "foreground",
153
+ "fontFamily",
154
+ "borderWidth",
155
+ "borderColor"
125
156
  ]
126
157
  },
127
158
  "modules": {
@@ -130,6 +161,12 @@
130
161
  "background": {
131
162
  "$ref": "Color"
132
163
  },
164
+ "borderWidth": {
165
+ "$ref": "LineWidth"
166
+ },
167
+ "borderColor": {
168
+ "$ref": "Color"
169
+ },
133
170
  "button": {
134
171
  "type": "object",
135
172
  "properties": {
@@ -164,6 +201,8 @@
164
201
  },
165
202
  "required": [
166
203
  "background",
204
+ "borderWidth",
205
+ "borderColor",
167
206
  "button"
168
207
  ]
169
208
  },
@@ -206,6 +245,24 @@
206
245
  },
207
246
  "backgroundActive": {
208
247
  "$ref": "Color"
248
+ },
249
+ "fontFamily": {
250
+ "$ref": "FamilyName"
251
+ },
252
+ "divider": {
253
+ "type": "object",
254
+ "properties": {
255
+ "borderColor": {
256
+ "$ref": "Color"
257
+ },
258
+ "borderWidth": {
259
+ "$ref": "LineWidth"
260
+ }
261
+ },
262
+ "required": [
263
+ "borderColor",
264
+ "borderWidth"
265
+ ]
209
266
  }
210
267
  },
211
268
  "required": [
@@ -215,12 +272,16 @@
215
272
  "foregroundActive",
216
273
  "background",
217
274
  "backgroundHover",
218
- "backgroundActive"
275
+ "backgroundActive",
276
+ "fontFamily",
277
+ "divider"
219
278
  ]
220
279
  }
221
280
  },
222
281
  "required": [
223
282
  "background",
283
+ "borderWidth",
284
+ "borderColor",
224
285
  "project",
225
286
  "modules",
226
287
  "list"
@@ -232,15 +293,28 @@
232
293
  "background": {
233
294
  "$ref": "Color"
234
295
  },
296
+ "borderWidth": {
297
+ "$ref": "LineWidth"
298
+ },
299
+ "borderColor": {
300
+ "$ref": "Color"
301
+ },
302
+ "boxShadow": {
303
+ "$ref": "BoxShadow"
304
+ },
235
305
  "headline": {
236
306
  "type": "object",
237
307
  "properties": {
238
308
  "foreground": {
239
309
  "$ref": "Color"
310
+ },
311
+ "fontFamily": {
312
+ "$ref": "FamilyName"
240
313
  }
241
314
  },
242
315
  "required": [
243
- "foreground"
316
+ "foreground",
317
+ "fontFamily"
244
318
  ]
245
319
  },
246
320
  "title": {
@@ -250,7 +324,7 @@
250
324
  "$ref": "Color"
251
325
  },
252
326
  "fontFamily": {
253
- "$ref": "FontFamily"
327
+ "$ref": "FamilyName"
254
328
  }
255
329
  },
256
330
  "required": [
@@ -261,6 +335,9 @@
261
335
  },
262
336
  "required": [
263
337
  "background",
338
+ "borderWidth",
339
+ "borderColor",
340
+ "boxShadow",
264
341
  "headline",
265
342
  "title"
266
343
  ]
@@ -276,10 +353,14 @@
276
353
  "properties": {
277
354
  "foreground": {
278
355
  "$ref": "Color"
356
+ },
357
+ "fontFamily": {
358
+ "$ref": "FamilyName"
279
359
  }
280
360
  },
281
361
  "required": [
282
- "foreground"
362
+ "foreground",
363
+ "fontFamily"
283
364
  ]
284
365
  },
285
366
  "input": {
@@ -293,12 +374,36 @@
293
374
  },
294
375
  "foregroundSubdued": {
295
376
  "$ref": "Color"
377
+ },
378
+ "borderColor": {
379
+ "$ref": "Color"
380
+ },
381
+ "borderColorHover": {
382
+ "$ref": "Color"
383
+ },
384
+ "borderColorFocus": {
385
+ "$ref": "Color"
386
+ },
387
+ "boxShadow": {
388
+ "$ref": "BoxShadow"
389
+ },
390
+ "boxShadowHover": {
391
+ "$ref": "BoxShadow"
392
+ },
393
+ "boxShadowFocus": {
394
+ "$ref": "BoxShadow"
296
395
  }
297
396
  },
298
397
  "required": [
299
398
  "background",
300
399
  "foreground",
301
- "foregroundSubdued"
400
+ "foregroundSubdued",
401
+ "borderColor",
402
+ "borderColorHover",
403
+ "borderColorFocus",
404
+ "boxShadow",
405
+ "boxShadowHover",
406
+ "boxShadowFocus"
302
407
  ]
303
408
  }
304
409
  },
@@ -321,6 +426,15 @@
321
426
  "foreground": {
322
427
  "$ref": "Color"
323
428
  },
429
+ "fontFamily": {
430
+ "$ref": "FamilyName"
431
+ },
432
+ "borderWidth": {
433
+ "$ref": "LineWidth"
434
+ },
435
+ "borderColor": {
436
+ "$ref": "Color"
437
+ },
324
438
  "section": {
325
439
  "type": "object",
326
440
  "properties": {
@@ -363,6 +477,15 @@
363
477
  },
364
478
  "backgroundActive": {
365
479
  "$ref": "Color"
480
+ },
481
+ "fontFamily": {
482
+ "$ref": "FamilyName"
483
+ },
484
+ "borderWidth": {
485
+ "$ref": "LineWidth"
486
+ },
487
+ "borderColor": {
488
+ "$ref": "Color"
366
489
  }
367
490
  },
368
491
  "required": [
@@ -372,7 +495,10 @@
372
495
  "foregroundActive",
373
496
  "background",
374
497
  "backgroundHover",
375
- "backgroundActive"
498
+ "backgroundActive",
499
+ "fontFamily",
500
+ "borderWidth",
501
+ "borderColor"
376
502
  ]
377
503
  }
378
504
  },
@@ -384,6 +510,9 @@
384
510
  "required": [
385
511
  "background",
386
512
  "foreground",
513
+ "fontFamily",
514
+ "borderWidth",
515
+ "borderColor",
387
516
  "section"
388
517
  ]
389
518
  }
@@ -417,6 +546,8 @@
417
546
  "fontFamilySansSerif",
418
547
  "fontFamilySerif",
419
548
  "fontFamilyMonospace",
549
+ "borderRadius",
550
+ "borderWidth",
420
551
  "navigation",
421
552
  "header",
422
553
  "form",
@@ -431,10 +562,44 @@
431
562
  ],
432
563
  "$defs": {
433
564
  "Color": {
434
- "$ref": "Color"
565
+ "$id": "Color",
566
+ "type": "string"
435
567
  },
436
- "FontFamily": {
437
- "$ref": "FontFamily"
568
+ "FamilyName": {
569
+ "$id": "FamilyName",
570
+ "type": "string"
571
+ },
572
+ "Length": {
573
+ "$id": "Length",
574
+ "type": "string"
575
+ },
576
+ "Percentage": {
577
+ "$id": "Percentage",
578
+ "type": "string"
579
+ },
580
+ "LineWidth": {
581
+ "$id": "LineWidth",
582
+ "anyOf": [
583
+ {
584
+ "type": "string"
585
+ },
586
+ {
587
+ "const": "thin",
588
+ "type": "string"
589
+ },
590
+ {
591
+ "const": "medium",
592
+ "type": "string"
593
+ },
594
+ {
595
+ "const": "thick",
596
+ "type": "string"
597
+ }
598
+ ]
599
+ },
600
+ "BoxShadow": {
601
+ "$id": "BoxShadow",
602
+ "type": "string"
438
603
  }
439
604
  }
440
605
  }