@directus/themes 0.0.2 → 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.
Files changed (11) hide show
  1. package/dist/index.d.ts +4 -106
  2. package/dist/index.js +411 -60
  3. package/dist/schema.d.ts +123 -0
  4. package/dist/schema.json +464 -0
  5. package/dist/store.d.ts +686 -0
  6. package/dist/theme-provider.vue.d.ts +487 -0
  7. package/dist/themes/dark-directus.d.ts +2 -0
  8. package/dist/themes/light-directus.d.ts +2 -0
  9. package/dist/use-fonts.d.ts +6 -0
  10. package/dist/use-theme.d.ts +117 -0
  11. package/package.json +22 -14
package/dist/theme-provider.vue.d.ts ADDED
@@ -0,0 +1,487 @@
1
+ import type { DeepPartial } from '@directus/types';
2
+ import type { Theme } from './schema.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
+ foregroundSubdued?: string;
17
+ foregroundAccent?: string;
18
+ background?: string;
19
+ primary?: string;
20
+ primaryBackground?: string;
21
+ primarySubdued?: string;
22
+ primaryAccent?: string;
23
+ secondary?: string;
24
+ secondaryBackground?: string;
25
+ secondarySubdued?: string;
26
+ secondaryAccent?: string;
27
+ success?: string;
28
+ successBackground?: string;
29
+ successSubdued?: string;
30
+ successAccent?: string;
31
+ warning?: string;
32
+ warningBackground?: string;
33
+ warningSubdued?: string;
34
+ warningAccent?: string;
35
+ danger?: string;
36
+ dangerBackground?: string;
37
+ dangerSubdued?: string;
38
+ dangerAccent?: string;
39
+ fontFamilyDisplay?: string;
40
+ fontFamilySansSerif?: string;
41
+ fontFamilySerif?: string;
42
+ fontFamilyMonospace?: string;
43
+ navigation?: {
44
+ background?: string;
45
+ project?: {
46
+ foreground?: string;
47
+ background?: string;
48
+ fontFamily?: string;
49
+ };
50
+ modules?: {
51
+ background?: string;
52
+ button?: {
53
+ foreground?: string;
54
+ background?: string;
55
+ foregroundHover?: string;
56
+ foregroundActive?: string;
57
+ backgroundHover?: string;
58
+ backgroundActive?: string;
59
+ };
60
+ };
61
+ list?: {
62
+ foreground?: string;
63
+ background?: string;
64
+ fontFamily?: string;
65
+ foregroundHover?: string;
66
+ foregroundActive?: string;
67
+ backgroundHover?: string;
68
+ backgroundActive?: string;
69
+ icon?: {
70
+ foreground?: string;
71
+ foregroundHover?: string;
72
+ foregroundActive?: string;
73
+ };
74
+ };
75
+ };
76
+ header?: {
77
+ background?: string;
78
+ headline?: {
79
+ foreground?: string;
80
+ fontFamily?: string;
81
+ };
82
+ title?: {
83
+ foreground?: string;
84
+ fontFamily?: string;
85
+ };
86
+ };
87
+ form?: {
88
+ field?: {
89
+ label?: {
90
+ foreground?: string;
91
+ fontFamily?: string;
92
+ };
93
+ input?: {
94
+ foreground?: string;
95
+ foregroundSubdued?: string;
96
+ background?: string;
97
+ };
98
+ };
99
+ };
100
+ sidebar?: {
101
+ foreground?: string;
102
+ background?: string;
103
+ fontFamily?: string;
104
+ section?: {
105
+ toggle?: {
106
+ foreground?: string;
107
+ background?: string;
108
+ fontFamily?: string;
109
+ foregroundHover?: string;
110
+ foregroundActive?: string;
111
+ backgroundHover?: string;
112
+ backgroundActive?: string;
113
+ icon?: {
114
+ foreground?: string;
115
+ foregroundHover?: string;
116
+ foregroundActive?: string;
117
+ };
118
+ };
119
+ };
120
+ };
121
+ }>;
122
+ required: true;
123
+ default: () => {};
124
+ };
125
+ themeDark: {
126
+ type: import("vue").PropType<string | null>;
127
+ required: true;
128
+ default: string;
129
+ };
130
+ themeDarkOverrides: {
131
+ type: import("vue").PropType<{
132
+ foreground?: string;
133
+ foregroundSubdued?: string;
134
+ foregroundAccent?: string;
135
+ background?: string;
136
+ primary?: string;
137
+ primaryBackground?: string;
138
+ primarySubdued?: string;
139
+ primaryAccent?: string;
140
+ secondary?: string;
141
+ secondaryBackground?: string;
142
+ secondarySubdued?: string;
143
+ secondaryAccent?: string;
144
+ success?: string;
145
+ successBackground?: string;
146
+ successSubdued?: string;
147
+ successAccent?: string;
148
+ warning?: string;
149
+ warningBackground?: string;
150
+ warningSubdued?: string;
151
+ warningAccent?: string;
152
+ danger?: string;
153
+ dangerBackground?: string;
154
+ dangerSubdued?: string;
155
+ dangerAccent?: string;
156
+ fontFamilyDisplay?: string;
157
+ fontFamilySansSerif?: string;
158
+ fontFamilySerif?: string;
159
+ fontFamilyMonospace?: string;
160
+ navigation?: {
161
+ background?: string;
162
+ project?: {
163
+ foreground?: string;
164
+ background?: string;
165
+ fontFamily?: string;
166
+ };
167
+ modules?: {
168
+ background?: string;
169
+ button?: {
170
+ foreground?: string;
171
+ background?: string;
172
+ foregroundHover?: string;
173
+ foregroundActive?: string;
174
+ backgroundHover?: string;
175
+ backgroundActive?: string;
176
+ };
177
+ };
178
+ list?: {
179
+ foreground?: string;
180
+ background?: string;
181
+ fontFamily?: string;
182
+ foregroundHover?: string;
183
+ foregroundActive?: string;
184
+ backgroundHover?: string;
185
+ backgroundActive?: string;
186
+ icon?: {
187
+ foreground?: string;
188
+ foregroundHover?: string;
189
+ foregroundActive?: string;
190
+ };
191
+ };
192
+ };
193
+ header?: {
194
+ background?: string;
195
+ headline?: {
196
+ foreground?: string;
197
+ fontFamily?: string;
198
+ };
199
+ title?: {
200
+ foreground?: string;
201
+ fontFamily?: string;
202
+ };
203
+ };
204
+ form?: {
205
+ field?: {
206
+ label?: {
207
+ foreground?: string;
208
+ fontFamily?: string;
209
+ };
210
+ input?: {
211
+ foreground?: string;
212
+ foregroundSubdued?: string;
213
+ background?: string;
214
+ };
215
+ };
216
+ };
217
+ sidebar?: {
218
+ foreground?: string;
219
+ background?: string;
220
+ fontFamily?: string;
221
+ section?: {
222
+ toggle?: {
223
+ foreground?: string;
224
+ background?: string;
225
+ fontFamily?: string;
226
+ foregroundHover?: string;
227
+ foregroundActive?: string;
228
+ backgroundHover?: string;
229
+ backgroundActive?: string;
230
+ icon?: {
231
+ foreground?: string;
232
+ foregroundHover?: string;
233
+ foregroundActive?: string;
234
+ };
235
+ };
236
+ };
237
+ };
238
+ }>;
239
+ required: true;
240
+ default: () => {};
241
+ };
242
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
243
+ darkMode: {
244
+ type: import("vue").PropType<boolean>;
245
+ required: true;
246
+ };
247
+ themeLight: {
248
+ type: import("vue").PropType<string | null>;
249
+ required: true;
250
+ default: string;
251
+ };
252
+ themeLightOverrides: {
253
+ type: import("vue").PropType<{
254
+ foreground?: string;
255
+ foregroundSubdued?: string;
256
+ foregroundAccent?: string;
257
+ background?: string;
258
+ primary?: string;
259
+ primaryBackground?: string;
260
+ primarySubdued?: string;
261
+ primaryAccent?: string;
262
+ secondary?: string;
263
+ secondaryBackground?: string;
264
+ secondarySubdued?: string;
265
+ secondaryAccent?: string;
266
+ success?: string;
267
+ successBackground?: string;
268
+ successSubdued?: string;
269
+ successAccent?: string;
270
+ warning?: string;
271
+ warningBackground?: string;
272
+ warningSubdued?: string;
273
+ warningAccent?: string;
274
+ danger?: string;
275
+ dangerBackground?: string;
276
+ dangerSubdued?: string;
277
+ dangerAccent?: string;
278
+ fontFamilyDisplay?: string;
279
+ fontFamilySansSerif?: string;
280
+ fontFamilySerif?: string;
281
+ fontFamilyMonospace?: string;
282
+ navigation?: {
283
+ background?: string;
284
+ project?: {
285
+ foreground?: string;
286
+ background?: string;
287
+ fontFamily?: string;
288
+ };
289
+ modules?: {
290
+ background?: string;
291
+ button?: {
292
+ foreground?: string;
293
+ background?: string;
294
+ foregroundHover?: string;
295
+ foregroundActive?: string;
296
+ backgroundHover?: string;
297
+ backgroundActive?: string;
298
+ };
299
+ };
300
+ list?: {
301
+ foreground?: string;
302
+ background?: string;
303
+ fontFamily?: string;
304
+ foregroundHover?: string;
305
+ foregroundActive?: string;
306
+ backgroundHover?: string;
307
+ backgroundActive?: string;
308
+ icon?: {
309
+ foreground?: string;
310
+ foregroundHover?: string;
311
+ foregroundActive?: string;
312
+ };
313
+ };
314
+ };
315
+ header?: {
316
+ background?: string;
317
+ headline?: {
318
+ foreground?: string;
319
+ fontFamily?: string;
320
+ };
321
+ title?: {
322
+ foreground?: string;
323
+ fontFamily?: string;
324
+ };
325
+ };
326
+ form?: {
327
+ field?: {
328
+ label?: {
329
+ foreground?: string;
330
+ fontFamily?: string;
331
+ };
332
+ input?: {
333
+ foreground?: string;
334
+ foregroundSubdued?: string;
335
+ background?: string;
336
+ };
337
+ };
338
+ };
339
+ sidebar?: {
340
+ foreground?: string;
341
+ background?: string;
342
+ fontFamily?: string;
343
+ section?: {
344
+ toggle?: {
345
+ foreground?: string;
346
+ background?: string;
347
+ fontFamily?: string;
348
+ foregroundHover?: string;
349
+ foregroundActive?: string;
350
+ backgroundHover?: string;
351
+ backgroundActive?: string;
352
+ icon?: {
353
+ foreground?: string;
354
+ foregroundHover?: string;
355
+ foregroundActive?: string;
356
+ };
357
+ };
358
+ };
359
+ };
360
+ }>;
361
+ required: true;
362
+ default: () => {};
363
+ };
364
+ themeDark: {
365
+ type: import("vue").PropType<string | null>;
366
+ required: true;
367
+ default: string;
368
+ };
369
+ themeDarkOverrides: {
370
+ type: import("vue").PropType<{
371
+ foreground?: string;
372
+ foregroundSubdued?: string;
373
+ foregroundAccent?: string;
374
+ background?: string;
375
+ primary?: string;
376
+ primaryBackground?: string;
377
+ primarySubdued?: string;
378
+ primaryAccent?: string;
379
+ secondary?: string;
380
+ secondaryBackground?: string;
381
+ secondarySubdued?: string;
382
+ secondaryAccent?: string;
383
+ success?: string;
384
+ successBackground?: string;
385
+ successSubdued?: string;
386
+ successAccent?: string;
387
+ warning?: string;
388
+ warningBackground?: string;
389
+ warningSubdued?: string;
390
+ warningAccent?: string;
391
+ danger?: string;
392
+ dangerBackground?: string;
393
+ dangerSubdued?: string;
394
+ dangerAccent?: string;
395
+ fontFamilyDisplay?: string;
396
+ fontFamilySansSerif?: string;
397
+ fontFamilySerif?: string;
398
+ fontFamilyMonospace?: string;
399
+ navigation?: {
400
+ background?: string;
401
+ project?: {
402
+ foreground?: string;
403
+ background?: string;
404
+ fontFamily?: string;
405
+ };
406
+ modules?: {
407
+ background?: string;
408
+ button?: {
409
+ foreground?: string;
410
+ background?: string;
411
+ foregroundHover?: string;
412
+ foregroundActive?: string;
413
+ backgroundHover?: string;
414
+ backgroundActive?: string;
415
+ };
416
+ };
417
+ list?: {
418
+ foreground?: string;
419
+ background?: string;
420
+ fontFamily?: string;
421
+ foregroundHover?: string;
422
+ foregroundActive?: string;
423
+ backgroundHover?: string;
424
+ backgroundActive?: string;
425
+ icon?: {
426
+ foreground?: string;
427
+ foregroundHover?: string;
428
+ foregroundActive?: string;
429
+ };
430
+ };
431
+ };
432
+ header?: {
433
+ background?: string;
434
+ headline?: {
435
+ foreground?: string;
436
+ fontFamily?: string;
437
+ };
438
+ title?: {
439
+ foreground?: string;
440
+ fontFamily?: string;
441
+ };
442
+ };
443
+ form?: {
444
+ field?: {
445
+ label?: {
446
+ foreground?: string;
447
+ fontFamily?: string;
448
+ };
449
+ input?: {
450
+ foreground?: string;
451
+ foregroundSubdued?: string;
452
+ background?: string;
453
+ };
454
+ };
455
+ };
456
+ sidebar?: {
457
+ foreground?: string;
458
+ background?: string;
459
+ fontFamily?: string;
460
+ section?: {
461
+ toggle?: {
462
+ foreground?: string;
463
+ background?: string;
464
+ fontFamily?: string;
465
+ foregroundHover?: string;
466
+ foregroundActive?: string;
467
+ backgroundHover?: string;
468
+ backgroundActive?: string;
469
+ icon?: {
470
+ foreground?: string;
471
+ foregroundHover?: string;
472
+ foregroundActive?: string;
473
+ };
474
+ };
475
+ };
476
+ };
477
+ }>;
478
+ required: true;
479
+ default: () => {};
480
+ };
481
+ }>>, {
482
+ themeLight: string | null;
483
+ themeLightOverrides: DeepPartial<Theme['rules']>;
484
+ themeDark: string | null;
485
+ themeDarkOverrides: DeepPartial<Theme['rules']>;
486
+ }, {}>;
487
+ export default _default;
package/dist/themes/dark-directus.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { Theme } from '../schema.js';
2
+ export declare const theme: Theme;
package/dist/themes/light-directus.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { Theme } from '../schema.js';
2
+ export declare const theme: Theme;
package/dist/use-fonts.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { MaybeRef } from 'vue';
2
+ import type { Theme } from './schema.js';
3
+ export declare const useFonts: (rules: MaybeRef<Theme>) => {
4
+ fonts: import("vue").ComputedRef<string[]>;
5
+ googleFonts: import("vue").ComputedRef<string[]>;
6
+ };
package/dist/use-theme.d.ts ADDED
@@ -0,0 +1,117 @@
1
+ import type { DeepPartial } from '@directus/types';
2
+ import type { MaybeRef } from 'vue';
3
+ import type { Theme } from './schema.js';
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
+ theme: import("vue").ComputedRef<{
6
+ name: string;
7
+ appearance: "light" | "dark";
8
+ rules: {
9
+ foreground: string;
10
+ foregroundSubdued: string;
11
+ foregroundAccent: string;
12
+ background: string;
13
+ primary: string;
14
+ primaryBackground: string;
15
+ primarySubdued: string;
16
+ primaryAccent: string;
17
+ secondary: string;
18
+ secondaryBackground: string;
19
+ secondarySubdued: string;
20
+ secondaryAccent: string;
21
+ success: string;
22
+ successBackground: string;
23
+ successSubdued: string;
24
+ successAccent: string;
25
+ warning: string;
26
+ warningBackground: string;
27
+ warningSubdued: string;
28
+ warningAccent: string;
29
+ danger: string;
30
+ dangerBackground: string;
31
+ dangerSubdued: string;
32
+ dangerAccent: string;
33
+ fontFamilyDisplay: string;
34
+ fontFamilySansSerif: string;
35
+ fontFamilySerif: string;
36
+ fontFamilyMonospace: string;
37
+ navigation: {
38
+ background: string;
39
+ project: {
40
+ foreground: string;
41
+ background: string;
42
+ fontFamily: string;
43
+ };
44
+ modules: {
45
+ background: string;
46
+ button: {
47
+ foreground: string;
48
+ background: string;
49
+ foregroundHover: string;
50
+ foregroundActive: string;
51
+ backgroundHover: string;
52
+ backgroundActive: string;
53
+ };
54
+ };
55
+ list: {
56
+ foreground: string;
57
+ background: string;
58
+ fontFamily: string;
59
+ foregroundHover: string;
60
+ foregroundActive: string;
61
+ backgroundHover: string;
62
+ backgroundActive: string;
63
+ icon: {
64
+ foreground: string;
65
+ foregroundHover: string;
66
+ foregroundActive: string;
67
+ };
68
+ };
69
+ };
70
+ header: {
71
+ background: string;
72
+ headline: {
73
+ foreground: string;
74
+ fontFamily: string;
75
+ };
76
+ title: {
77
+ foreground: string;
78
+ fontFamily: string;
79
+ };
80
+ };
81
+ form: {
82
+ field: {
83
+ label: {
84
+ foreground: string;
85
+ fontFamily: string;
86
+ };
87
+ input: {
88
+ foreground: string;
89
+ foregroundSubdued: string;
90
+ background: string;
91
+ };
92
+ };
93
+ };
94
+ sidebar: {
95
+ foreground: string;
96
+ background: string;
97
+ fontFamily: string;
98
+ section: {
99
+ toggle: {
100
+ foreground: string;
101
+ background: string;
102
+ fontFamily: string;
103
+ foregroundHover: string;
104
+ foregroundActive: string;
105
+ backgroundHover: string;
106
+ backgroundActive: string;
107
+ icon: {
108
+ foreground: string;
109
+ foregroundHover: string;
110
+ foregroundActive: string;
111
+ };
112
+ };
113
+ };
114
+ };
115
+ };
116
+ }>;
117
+ };
package/package.json CHANGED
@@ -1,9 +1,8 @@
1
1
  {
2
2
  "name": "@directus/themes",
3
- "version": "0.0.2",
3
+ "version": "0.1.0",
4
4
  "description": "Themes for Directus",
5
5
  "homepage": "https://directus.io",
6
- "sideEffects": false,
7
6
  "repository": {
8
7
  "type": "git",
9
8
  "url": "https://github.com/directus/directus.git",
@@ -12,6 +11,7 @@
12
11
  "funding": "https://github.com/directus/directus?sponsor=1",
13
12
  "license": "MIT",
14
13
  "author": "Rijk van Zanten <rijkvanzanten@me.com>",
14
+ "sideEffects": false,
15
15
  "type": "module",
16
16
  "exports": {
17
17
  ".": "./dist/index.js",
@@ -21,22 +21,30 @@
21
21
  "files": [
22
22
  "dist"
23
23
  ],
24
+ "dependencies": {
25
+ "@sinclair/typebox": "0.31.17",
26
+ "@unhead/vue": "1.1.30",
27
+ "decamelize": "6.0.0",
28
+ "flat": "6.0.1",
29
+ "lodash-es": "4.17.21"
30
+ },
24
31
  "devDependencies": {
25
- "@vitest/coverage-c8": "0.31.1",
26
- "tsup": "6.7.0",
27
- "typescript": "5.0.4",
28
- "vitest": "0.31.1",
29
- "@directus/tsconfig": "1.0.0"
32
+ "@types/lodash-es": "4.17.9",
33
+ "@vitejs/plugin-vue": "4.4.0",
34
+ "rollup-plugin-node-externals": "6.1.2",
35
+ "typescript": "5.2.2",
36
+ "vite": "4.4.11",
37
+ "vite-plugin-dts": "3.6.0",
38
+ "@directus/tsconfig": "1.0.1",
39
+ "@directus/types": "11.0.1"
30
40
  },
31
- "dependencies": {
32
- "@sinclair/typebox": "0.28.13",
33
- "defu": "6.1.2",
34
- "pinia": "2.1.1",
41
+ "peerDependencies": {
42
+ "pinia": "2.1.7",
35
43
  "vue": "3.3.4"
36
44
  },
37
45
  "scripts": {
38
- "build": "tsup src/index.ts --format=esm --dts",
39
- "dev": "tsup src/index.ts --format=esm --dts --watch",
40
- "test": "vitest --watch=false"
46
+ "build": "vite build && npm run generate-json-schema",
47
+ "dev": "vite build --watch",
48
+ "generate-json-schema": "node generate-json-schema.js"
41
49
  }
42
50
  }