@directus/themes 0.3.4 → 0.3.6

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 (13) hide show
  1. package/dist/components/theme-provider.vue.d.ts +4 -3
  2. package/dist/composables/use-fonts.d.ts +4 -3
  3. package/dist/composables/use-theme.d.ts +61 -4
  4. package/dist/index.js +324 -228
  5. package/dist/schemas/theme.d.ts +39 -10
  6. package/dist/stores/theme.d.ts +171 -2
  7. package/dist/themes/dark/default.d.ts +28 -0
  8. package/dist/themes/index.d.ts +2 -1
  9. package/dist/themes/light/default.d.ts +28 -0
  10. package/dist/utils/define-theme.d.ts +28 -0
  11. package/dist/utils/rules-to-css-vars.d.ts +3 -2
  12. package/license +1 -1
  13. package/package.json +8 -8
package/dist/components/theme-provider.vue.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- import type { DeepPartial } from '@directus/types';
2
- import type { Theme } from '../schemas/index.js';
3
- declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
1
+ import { Theme } from '../schemas/index.js';
2
+ import { DeepPartial } from '@directus/types';
3
+
4
+ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
4
5
  darkMode: boolean;
5
6
  themeLight: string | null;
6
7
  themeLightOverrides: DeepPartial<Theme['rules']>;
package/dist/composables/use-fonts.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import type { MaybeRef } from 'vue';
2
- import type { Theme } from '../schemas/theme.js';
1
+ import { Theme } from '../schemas/theme.js';
2
+ import { MaybeRef } from 'vue';
3
+
3
4
  export declare const useFonts: (theme: MaybeRef<Theme>) => {
4
- googleFonts: import("vue").ComputedRef<string[]>;
5
+ googleFonts: import('vue').ComputedRef<string[]>;
5
6
  };
package/dist/composables/use-theme.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import type { DeepPartial } from '@directus/types';
2
- import type { MaybeRef } from 'vue';
3
- import type { Theme } from '../schemas/theme.js';
1
+ import { Theme } from '../schemas/theme.js';
2
+ import { MaybeRef } from 'vue';
3
+ import { DeepPartial } from '@directus/types';
4
+
4
5
  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
+ theme: import('vue').ComputedRef<{
6
7
  id: string;
7
8
  name: string;
8
9
  appearance: "dark";
@@ -230,6 +231,34 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
230
231
  boxShadow: string;
231
232
  };
232
233
  };
234
+ banner: {
235
+ background: string;
236
+ padding: string;
237
+ borderRadius: string;
238
+ avatar: {
239
+ borderRadius: string;
240
+ foreground: string;
241
+ background: string;
242
+ };
243
+ headline: {
244
+ foreground: string;
245
+ fontFamily: string;
246
+ fontWeight: string;
247
+ };
248
+ title: {
249
+ foreground: string;
250
+ fontFamily: string;
251
+ fontWeight: string;
252
+ };
253
+ subtitle: {
254
+ foreground: string;
255
+ fontFamily: string;
256
+ fontWeight: string;
257
+ };
258
+ art: {
259
+ foreground: string;
260
+ };
261
+ };
233
262
  };
234
263
  } | {
235
264
  id: string;
@@ -459,6 +488,34 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
459
488
  boxShadow: string;
460
489
  };
461
490
  };
491
+ banner: {
492
+ background: string;
493
+ padding: string;
494
+ borderRadius: string;
495
+ avatar: {
496
+ borderRadius: string;
497
+ foreground: string;
498
+ background: string;
499
+ };
500
+ headline: {
501
+ foreground: string;
502
+ fontFamily: string;
503
+ fontWeight: string;
504
+ };
505
+ title: {
506
+ foreground: string;
507
+ fontFamily: string;
508
+ fontWeight: string;
509
+ };
510
+ subtitle: {
511
+ foreground: string;
512
+ fontFamily: string;
513
+ fontWeight: string;
514
+ };
515
+ art: {
516
+ foreground: string;
517
+ };
518
+ };
462
519
  };
463
520
  }>;
464
521
  };
package/dist/index.js CHANGED
@@ -1,219 +1,219 @@
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";
1
+ import { computed as y, unref as f, 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
2
  import { useHead as N } from "@unhead/vue";
3
3
  import { get as W, merge as w, mapKeys as E } from "lodash-es";
4
- import { defineStore as I, storeToRefs as U } from "pinia";
4
+ import { defineStore as U, storeToRefs as I } 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";
8
- import { Type as r } from "@sinclair/typebox";
9
- const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r.String({ $id: "FontWeight" }), k = r.String({ $id: "Length" }), O = r.String({ $id: "Percentage" }), y = r.String({ $id: "BoxShadow" }), j = r.String({ $id: "Number" }), H = r.String({ $id: "Size" }), b = r.Union([r.String(), r.Literal("thin"), r.Literal("medium"), r.Literal("thick")], {
8
+ import { Type as e } from "@sinclair/typebox";
9
+ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e.String({ $id: "FontWeight" }), h = e.String({ $id: "Length" }), p = e.String({ $id: "Percentage" }), k = e.String({ $id: "BoxShadow" }), j = e.String({ $id: "Number" }), H = e.String({ $id: "Size" }), s = e.Union([e.String(), e.Literal("thin"), e.Literal("medium"), e.Literal("thick")], {
10
10
  $id: "LineWidth"
11
- }), S = r.Optional(
12
- r.Object({
13
- columnGap: r.Optional(r.Union([r.Ref(k), r.Ref(O)])),
14
- rowGap: r.Optional(r.Union([r.Ref(k), r.Ref(O)])),
15
- field: r.Optional(
16
- r.Object({
17
- label: r.Optional(
18
- r.Object({
19
- foreground: r.Optional(r.Ref(e)),
20
- fontFamily: r.Optional(r.Ref(u)),
21
- fontWeight: r.Optional(r.Ref(F))
11
+ }), S = e.Optional(
12
+ e.Object({
13
+ columnGap: e.Optional(e.Union([e.Ref(h), e.Ref(p)])),
14
+ rowGap: e.Optional(e.Union([e.Ref(h), e.Ref(p)])),
15
+ field: e.Optional(
16
+ e.Object({
17
+ label: e.Optional(
18
+ e.Object({
19
+ foreground: e.Optional(e.Ref(r)),
20
+ fontFamily: e.Optional(e.Ref(i)),
21
+ fontWeight: e.Optional(e.Ref(b))
22
22
  })
23
23
  ),
24
- input: r.Optional(
25
- r.Object({
26
- background: r.Optional(r.Ref(e)),
27
- backgroundSubdued: r.Optional(r.Ref(e)),
28
- foreground: r.Optional(r.Ref(e)),
29
- foregroundSubdued: r.Optional(r.Ref(e)),
30
- borderColor: r.Optional(r.Ref(e)),
31
- borderColorHover: r.Optional(r.Ref(e)),
32
- borderColorFocus: r.Optional(r.Ref(e)),
33
- boxShadow: r.Optional(r.Ref(y)),
34
- boxShadowHover: r.Optional(r.Ref(y)),
35
- boxShadowFocus: r.Optional(r.Ref(y)),
36
- height: r.Optional(r.Ref(H)),
37
- padding: r.Optional(r.Union([r.Ref(k), r.Ref(O)]))
24
+ input: e.Optional(
25
+ e.Object({
26
+ background: e.Optional(e.Ref(r)),
27
+ backgroundSubdued: e.Optional(e.Ref(r)),
28
+ foreground: e.Optional(e.Ref(r)),
29
+ foregroundSubdued: e.Optional(e.Ref(r)),
30
+ borderColor: e.Optional(e.Ref(r)),
31
+ borderColorHover: e.Optional(e.Ref(r)),
32
+ borderColorFocus: e.Optional(e.Ref(r)),
33
+ boxShadow: e.Optional(e.Ref(k)),
34
+ boxShadowHover: e.Optional(e.Ref(k)),
35
+ boxShadowFocus: e.Optional(e.Ref(k)),
36
+ height: e.Optional(e.Ref(H)),
37
+ padding: e.Optional(e.Union([e.Ref(h), e.Ref(p)]))
38
38
  })
39
39
  )
40
40
  })
41
41
  )
42
42
  })
43
- ), K = r.Object({
43
+ ), K = e.Object({
44
44
  //////////////////////////////////////////////////////////////////////////////////////////////////////////
45
45
  // Base border styles
46
- borderRadius: r.Optional(r.Union([r.Ref(k), r.Ref(O)])),
47
- borderWidth: r.Optional(r.Ref(b)),
46
+ borderRadius: e.Optional(e.Union([e.Ref(h), e.Ref(p)])),
47
+ borderWidth: e.Optional(e.Ref(s)),
48
48
  //////////////////////////////////////////////////////////////////////////////////////////////////////////
49
49
  // Base color palette
50
- foreground: r.Optional(r.Ref(e)),
51
- foregroundSubdued: r.Optional(r.Ref(e)),
52
- foregroundAccent: r.Optional(r.Ref(e)),
53
- background: r.Optional(r.Ref(e)),
54
- backgroundNormal: r.Optional(r.Ref(e)),
55
- backgroundAccent: r.Optional(r.Ref(e)),
56
- backgroundSubdued: r.Optional(r.Ref(e)),
57
- borderColor: r.Optional(r.Ref(e)),
58
- borderColorAccent: r.Optional(r.Ref(e)),
59
- borderColorSubdued: r.Optional(r.Ref(e)),
60
- primary: r.Optional(r.Ref(e)),
61
- primaryBackground: r.Optional(r.Ref(e)),
62
- primarySubdued: r.Optional(r.Ref(e)),
63
- primaryAccent: r.Optional(r.Ref(e)),
64
- secondary: r.Optional(r.Ref(e)),
65
- secondaryBackground: r.Optional(r.Ref(e)),
66
- secondarySubdued: r.Optional(r.Ref(e)),
67
- secondaryAccent: r.Optional(r.Ref(e)),
68
- success: r.Optional(r.Ref(e)),
69
- successBackground: r.Optional(r.Ref(e)),
70
- successSubdued: r.Optional(r.Ref(e)),
71
- successAccent: r.Optional(r.Ref(e)),
72
- warning: r.Optional(r.Ref(e)),
73
- warningBackground: r.Optional(r.Ref(e)),
74
- warningSubdued: r.Optional(r.Ref(e)),
75
- warningAccent: r.Optional(r.Ref(e)),
76
- danger: r.Optional(r.Ref(e)),
77
- dangerBackground: r.Optional(r.Ref(e)),
78
- dangerSubdued: r.Optional(r.Ref(e)),
79
- dangerAccent: r.Optional(r.Ref(e)),
50
+ foreground: e.Optional(e.Ref(r)),
51
+ foregroundSubdued: e.Optional(e.Ref(r)),
52
+ foregroundAccent: e.Optional(e.Ref(r)),
53
+ background: e.Optional(e.Ref(r)),
54
+ backgroundNormal: e.Optional(e.Ref(r)),
55
+ backgroundAccent: e.Optional(e.Ref(r)),
56
+ backgroundSubdued: e.Optional(e.Ref(r)),
57
+ borderColor: e.Optional(e.Ref(r)),
58
+ borderColorAccent: e.Optional(e.Ref(r)),
59
+ borderColorSubdued: e.Optional(e.Ref(r)),
60
+ primary: e.Optional(e.Ref(r)),
61
+ primaryBackground: e.Optional(e.Ref(r)),
62
+ primarySubdued: e.Optional(e.Ref(r)),
63
+ primaryAccent: e.Optional(e.Ref(r)),
64
+ secondary: e.Optional(e.Ref(r)),
65
+ secondaryBackground: e.Optional(e.Ref(r)),
66
+ secondarySubdued: e.Optional(e.Ref(r)),
67
+ secondaryAccent: e.Optional(e.Ref(r)),
68
+ success: e.Optional(e.Ref(r)),
69
+ successBackground: e.Optional(e.Ref(r)),
70
+ successSubdued: e.Optional(e.Ref(r)),
71
+ successAccent: e.Optional(e.Ref(r)),
72
+ warning: e.Optional(e.Ref(r)),
73
+ warningBackground: e.Optional(e.Ref(r)),
74
+ warningSubdued: e.Optional(e.Ref(r)),
75
+ warningAccent: e.Optional(e.Ref(r)),
76
+ danger: e.Optional(e.Ref(r)),
77
+ dangerBackground: e.Optional(e.Ref(r)),
78
+ dangerSubdued: e.Optional(e.Ref(r)),
79
+ dangerAccent: e.Optional(e.Ref(r)),
80
80
  //////////////////////////////////////////////////////////////////////////////////////////////////////////
81
81
  // Base fonts
82
- fonts: r.Optional(
83
- r.Object({
84
- display: r.Optional(
85
- r.Object({
86
- fontFamily: r.Optional(r.Ref(u)),
87
- fontWeight: r.Optional(r.Ref(F))
82
+ fonts: e.Optional(
83
+ e.Object({
84
+ display: e.Optional(
85
+ e.Object({
86
+ fontFamily: e.Optional(e.Ref(i)),
87
+ fontWeight: e.Optional(e.Ref(b))
88
88
  })
89
89
  ),
90
- sans: r.Optional(
91
- r.Object({
92
- fontFamily: r.Optional(r.Ref(u)),
93
- fontWeight: r.Optional(r.Ref(F))
90
+ sans: e.Optional(
91
+ e.Object({
92
+ fontFamily: e.Optional(e.Ref(i)),
93
+ fontWeight: e.Optional(e.Ref(b))
94
94
  })
95
95
  ),
96
- serif: r.Optional(
97
- r.Object({
98
- fontFamily: r.Optional(r.Ref(u)),
99
- fontWeight: r.Optional(r.Ref(F))
96
+ serif: e.Optional(
97
+ e.Object({
98
+ fontFamily: e.Optional(e.Ref(i)),
99
+ fontWeight: e.Optional(e.Ref(b))
100
100
  })
101
101
  ),
102
- monospace: r.Optional(
103
- r.Object({
104
- fontFamily: r.Optional(r.Ref(u)),
105
- fontWeight: r.Optional(r.Ref(F))
102
+ monospace: e.Optional(
103
+ e.Object({
104
+ fontFamily: e.Optional(e.Ref(i)),
105
+ fontWeight: e.Optional(e.Ref(b))
106
106
  })
107
107
  )
108
108
  })
109
109
  ),
110
110
  //////////////////////////////////////////////////////////////////////////////////////////////////////////
111
111
  // Scopes
112
- navigation: r.Optional(
113
- r.Object({
114
- background: r.Optional(r.Ref(e)),
115
- backgroundAccent: r.Optional(r.Ref(e)),
116
- borderWidth: r.Optional(r.Ref(b)),
117
- borderColor: r.Optional(r.Ref(e)),
118
- project: r.Optional(
119
- r.Object({
120
- background: r.Optional(r.Ref(e)),
121
- foreground: r.Optional(r.Ref(e)),
122
- fontFamily: r.Optional(r.Ref(u)),
123
- borderWidth: r.Optional(r.Ref(b)),
124
- borderColor: r.Optional(r.Ref(e))
112
+ navigation: e.Optional(
113
+ e.Object({
114
+ background: e.Optional(e.Ref(r)),
115
+ backgroundAccent: e.Optional(e.Ref(r)),
116
+ borderWidth: e.Optional(e.Ref(s)),
117
+ borderColor: e.Optional(e.Ref(r)),
118
+ project: e.Optional(
119
+ e.Object({
120
+ background: e.Optional(e.Ref(r)),
121
+ foreground: e.Optional(e.Ref(r)),
122
+ fontFamily: e.Optional(e.Ref(i)),
123
+ borderWidth: e.Optional(e.Ref(s)),
124
+ borderColor: e.Optional(e.Ref(r))
125
125
  })
126
126
  ),
127
- modules: r.Optional(
128
- r.Object({
129
- background: r.Optional(r.Ref(e)),
130
- borderWidth: r.Optional(r.Ref(b)),
131
- borderColor: r.Optional(r.Ref(e)),
132
- button: r.Optional(
133
- r.Object({
134
- foreground: r.Optional(r.Ref(e)),
135
- foregroundHover: r.Optional(r.Ref(e)),
136
- foregroundActive: r.Optional(r.Ref(e)),
137
- background: r.Optional(r.Ref(e)),
138
- backgroundHover: r.Optional(r.Ref(e)),
139
- backgroundActive: r.Optional(r.Ref(e))
127
+ modules: e.Optional(
128
+ e.Object({
129
+ background: e.Optional(e.Ref(r)),
130
+ borderWidth: e.Optional(e.Ref(s)),
131
+ borderColor: e.Optional(e.Ref(r)),
132
+ button: e.Optional(
133
+ e.Object({
134
+ foreground: e.Optional(e.Ref(r)),
135
+ foregroundHover: e.Optional(e.Ref(r)),
136
+ foregroundActive: e.Optional(e.Ref(r)),
137
+ background: e.Optional(e.Ref(r)),
138
+ backgroundHover: e.Optional(e.Ref(r)),
139
+ backgroundActive: e.Optional(e.Ref(r))
140
140
  })
141
141
  )
142
142
  })
143
143
  ),
144
- list: r.Optional(
145
- r.Object({
146
- icon: r.Optional(
147
- r.Object({
148
- foreground: r.Optional(r.Ref(e)),
149
- foregroundHover: r.Optional(r.Ref(e)),
150
- foregroundActive: r.Optional(r.Ref(e))
144
+ list: e.Optional(
145
+ e.Object({
146
+ icon: e.Optional(
147
+ e.Object({
148
+ foreground: e.Optional(e.Ref(r)),
149
+ foregroundHover: e.Optional(e.Ref(r)),
150
+ foregroundActive: e.Optional(e.Ref(r))
151
151
  })
152
152
  ),
153
- foreground: r.Optional(r.Ref(e)),
154
- foregroundHover: r.Optional(r.Ref(e)),
155
- foregroundActive: r.Optional(r.Ref(e)),
156
- background: r.Optional(r.Ref(e)),
157
- backgroundHover: r.Optional(r.Ref(e)),
158
- backgroundActive: r.Optional(r.Ref(e)),
159
- fontFamily: r.Optional(r.Ref(u)),
160
- divider: r.Object({
161
- borderColor: r.Optional(r.Ref(e)),
162
- borderWidth: r.Optional(r.Ref(b))
153
+ foreground: e.Optional(e.Ref(r)),
154
+ foregroundHover: e.Optional(e.Ref(r)),
155
+ foregroundActive: e.Optional(e.Ref(r)),
156
+ background: e.Optional(e.Ref(r)),
157
+ backgroundHover: e.Optional(e.Ref(r)),
158
+ backgroundActive: e.Optional(e.Ref(r)),
159
+ fontFamily: e.Optional(e.Ref(i)),
160
+ divider: e.Object({
161
+ borderColor: e.Optional(e.Ref(r)),
162
+ borderWidth: e.Optional(e.Ref(s))
163
163
  })
164
164
  })
165
165
  )
166
166
  })
167
167
  ),
168
- header: r.Optional(
169
- r.Object({
170
- background: r.Optional(r.Ref(e)),
171
- borderWidth: r.Optional(r.Ref(b)),
172
- borderColor: r.Optional(r.Ref(e)),
173
- boxShadow: r.Optional(r.Ref(y)),
174
- headline: r.Optional(
175
- r.Object({
176
- foreground: r.Optional(r.Ref(e)),
177
- fontFamily: r.Optional(r.Ref(u))
168
+ header: e.Optional(
169
+ e.Object({
170
+ background: e.Optional(e.Ref(r)),
171
+ borderWidth: e.Optional(e.Ref(s)),
172
+ borderColor: e.Optional(e.Ref(r)),
173
+ boxShadow: e.Optional(e.Ref(k)),
174
+ headline: e.Optional(
175
+ e.Object({
176
+ foreground: e.Optional(e.Ref(r)),
177
+ fontFamily: e.Optional(e.Ref(i))
178
178
  })
179
179
  ),
180
- title: r.Optional(
181
- r.Object({
182
- foreground: r.Optional(r.Ref(e)),
183
- fontFamily: r.Optional(r.Ref(u)),
184
- fontWeight: r.Optional(r.Ref(F))
180
+ title: e.Optional(
181
+ e.Object({
182
+ foreground: e.Optional(e.Ref(r)),
183
+ fontFamily: e.Optional(e.Ref(i)),
184
+ fontWeight: e.Optional(e.Ref(b))
185
185
  })
186
186
  )
187
187
  })
188
188
  ),
189
189
  form: S,
190
- sidebar: r.Optional(
191
- r.Object({
192
- background: r.Optional(r.Ref(e)),
193
- foreground: r.Optional(r.Ref(e)),
194
- fontFamily: r.Optional(r.Ref(u)),
195
- borderWidth: r.Optional(r.Ref(b)),
196
- borderColor: r.Optional(r.Ref(e)),
197
- section: r.Optional(
198
- r.Object({
199
- toggle: r.Optional(
200
- r.Object({
201
- icon: r.Optional(
202
- r.Object({
203
- foreground: r.Optional(r.Ref(e)),
204
- foregroundHover: r.Optional(r.Ref(e)),
205
- foregroundActive: r.Optional(r.Ref(e))
190
+ sidebar: e.Optional(
191
+ e.Object({
192
+ background: e.Optional(e.Ref(r)),
193
+ foreground: e.Optional(e.Ref(r)),
194
+ fontFamily: e.Optional(e.Ref(i)),
195
+ borderWidth: e.Optional(e.Ref(s)),
196
+ borderColor: e.Optional(e.Ref(r)),
197
+ section: e.Optional(
198
+ e.Object({
199
+ toggle: e.Optional(
200
+ e.Object({
201
+ icon: e.Optional(
202
+ e.Object({
203
+ foreground: e.Optional(e.Ref(r)),
204
+ foregroundHover: e.Optional(e.Ref(r)),
205
+ foregroundActive: e.Optional(e.Ref(r))
206
206
  })
207
207
  ),
208
- foreground: r.Optional(r.Ref(e)),
209
- foregroundHover: r.Optional(r.Ref(e)),
210
- foregroundActive: r.Optional(r.Ref(e)),
211
- background: r.Optional(r.Ref(e)),
212
- backgroundHover: r.Optional(r.Ref(e)),
213
- backgroundActive: r.Optional(r.Ref(e)),
214
- fontFamily: r.Optional(r.Ref(u)),
215
- borderWidth: r.Optional(r.Ref(b)),
216
- borderColor: r.Optional(r.Ref(e))
208
+ foreground: e.Optional(e.Ref(r)),
209
+ foregroundHover: e.Optional(e.Ref(r)),
210
+ foregroundActive: e.Optional(e.Ref(r)),
211
+ background: e.Optional(e.Ref(r)),
212
+ backgroundHover: e.Optional(e.Ref(r)),
213
+ backgroundActive: e.Optional(e.Ref(r)),
214
+ fontFamily: e.Optional(e.Ref(i)),
215
+ borderWidth: e.Optional(e.Ref(s)),
216
+ borderColor: e.Optional(e.Ref(r))
217
217
  })
218
218
  ),
219
219
  form: S
@@ -221,66 +221,106 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
221
221
  )
222
222
  })
223
223
  ),
224
- public: r.Optional(
225
- r.Object({
226
- background: r.Optional(r.Ref(e)),
227
- foreground: r.Optional(r.Ref(e)),
228
- foregroundAccent: r.Optional(r.Ref(e)),
229
- art: r.Optional(
230
- r.Object({
231
- background: r.Optional(r.Ref(e)),
232
- primary: r.Optional(r.Ref(e)),
233
- secondary: r.Optional(r.Ref(e)),
234
- speed: r.Optional(r.Ref(j))
224
+ public: e.Optional(
225
+ e.Object({
226
+ background: e.Optional(e.Ref(r)),
227
+ foreground: e.Optional(e.Ref(r)),
228
+ foregroundAccent: e.Optional(e.Ref(r)),
229
+ art: e.Optional(
230
+ e.Object({
231
+ background: e.Optional(e.Ref(r)),
232
+ primary: e.Optional(e.Ref(r)),
233
+ secondary: e.Optional(e.Ref(r)),
234
+ speed: e.Optional(e.Ref(j))
235
235
  })
236
236
  ),
237
237
  form: S
238
238
  })
239
239
  ),
240
- popover: r.Optional(
241
- r.Object({
242
- menu: r.Optional(
243
- r.Object({
244
- background: r.Optional(r.Ref(e)),
245
- borderRadius: r.Optional(r.Optional(r.Union([r.Ref(k), r.Ref(O)]))),
246
- boxShadow: r.Optional(r.Ref(y))
240
+ popover: e.Optional(
241
+ e.Object({
242
+ menu: e.Optional(
243
+ e.Object({
244
+ background: e.Optional(e.Ref(r)),
245
+ borderRadius: e.Optional(e.Optional(e.Union([e.Ref(h), e.Ref(p)]))),
246
+ boxShadow: e.Optional(e.Ref(k))
247
+ })
248
+ )
249
+ })
250
+ ),
251
+ banner: e.Optional(
252
+ e.Object({
253
+ background: e.Optional(e.Ref(r)),
254
+ padding: e.Optional(e.Union([e.Ref(h), e.Ref(p)])),
255
+ borderRadius: e.Optional(e.Optional(e.Union([e.Ref(h), e.Ref(p)]))),
256
+ avatar: e.Optional(
257
+ e.Object({
258
+ background: e.Optional(e.Ref(r)),
259
+ foreground: e.Optional(e.Ref(r)),
260
+ borderRadius: e.Optional(e.Optional(e.Union([e.Ref(h), e.Ref(p)])))
261
+ })
262
+ ),
263
+ headline: e.Optional(
264
+ e.Object({
265
+ foreground: e.Optional(e.Ref(r)),
266
+ fontFamily: e.Optional(e.Ref(i)),
267
+ fontWeight: e.Optional(e.Ref(b))
268
+ })
269
+ ),
270
+ title: e.Optional(
271
+ e.Object({
272
+ foreground: e.Optional(e.Ref(r)),
273
+ fontFamily: e.Optional(e.Ref(i)),
274
+ fontWeight: e.Optional(e.Ref(b))
275
+ })
276
+ ),
277
+ subtitle: e.Optional(
278
+ e.Object({
279
+ foreground: e.Optional(e.Ref(r)),
280
+ fontFamily: e.Optional(e.Ref(i)),
281
+ fontWeight: e.Optional(e.Ref(b))
282
+ })
283
+ ),
284
+ art: e.Optional(
285
+ e.Object({
286
+ foreground: e.Optional(e.Ref(r))
247
287
  })
248
288
  )
249
289
  })
250
290
  )
251
- }), Q = r.Object({
252
- id: r.String(),
253
- name: r.String(),
254
- appearance: r.Union([r.Literal("light"), r.Literal("dark")]),
291
+ }), Q = e.Object({
292
+ id: e.String(),
293
+ name: e.String(),
294
+ appearance: e.Union([e.Literal("light"), e.Literal("dark")]),
255
295
  rules: K
256
- }), lr = {
296
+ }), le = {
257
297
  $defs: {
258
- Color: e,
259
- FamilyName: u,
260
- Length: k,
261
- Percentage: O,
262
- LineWidth: b,
263
- BoxShadow: y,
298
+ Color: r,
299
+ FamilyName: i,
300
+ Length: h,
301
+ Percentage: p,
302
+ LineWidth: s,
303
+ BoxShadow: k,
264
304
  Size: H,
265
305
  Number: j
266
306
  }
267
307
  }, q = (d) => {
268
- const s = v(() => {
269
- const o = /* @__PURE__ */ new Map(), c = (m, a = []) => {
270
- for (const [t, n] of Object.entries(m))
271
- typeof n == "object" && n !== null && ("type" in n && n.type === "object" && "properties" in n && c(n.properties, [...a, t]), "$ref" in n && n.$ref === "FamilyName" && (o.has(a) ? o.set(a, { family: t, weight: o.get(a).weight }) : o.set(a, { family: t, weight: null })), "$ref" in n && n.$ref === "FontWeight" && (o.has(a) ? o.set(a, { family: o.get(a).family, weight: t }) : o.set(a, { family: null, weight: t })));
308
+ const v = y(() => {
309
+ const o = /* @__PURE__ */ new Map(), c = (m, t = []) => {
310
+ for (const [a, n] of Object.entries(m))
311
+ typeof n == "object" && n !== null && ("type" in n && n.type === "object" && "properties" in n && c(n.properties, [...t, a]), "$ref" in n && n.$ref === "FamilyName" && (o.has(t) ? o.set(t, { family: a, weight: o.get(t).weight }) : o.set(t, { family: a, weight: null })), "$ref" in n && n.$ref === "FontWeight" && (o.has(t) ? o.set(t, { family: o.get(t).family, weight: a }) : o.set(t, { family: null, weight: a })));
272
312
  };
273
313
  return c(Q.properties.rules.properties), o;
274
- }), f = v(() => {
314
+ }), u = y(() => {
275
315
  const o = /* @__PURE__ */ new Map();
276
- for (const [c, { family: m, weight: a }] of s.value.entries()) {
277
- let t = null, n = null;
278
- if (m && (t = W(i(d).rules, [...c, m])), a && (n = W(i(d).rules, [...c, a])), t) {
279
- const h = t.split(",");
280
- for (const l of h) {
316
+ for (const [c, { family: m, weight: t }] of v.value.entries()) {
317
+ let a = null, n = null;
318
+ if (m && (a = W(f(d).rules, [...c, m])), t && (n = W(f(d).rules, [...c, t])), a) {
319
+ const F = a.split(",");
320
+ for (const l of F) {
281
321
  const g = l.trim();
282
322
  if (g.startsWith("var(--")) {
283
- h.push(z(g.slice(6, -1)));
323
+ F.push(z(g.slice(6, -1)));
284
324
  continue;
285
325
  }
286
326
  if ((g.startsWith('"') && g.endsWith('"')) === !1)
@@ -292,12 +332,12 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
292
332
  }
293
333
  return o;
294
334
  });
295
- return { googleFonts: v(() => {
335
+ return { googleFonts: y(() => {
296
336
  const o = [];
297
- for (const [c, m] of f.value.entries())
337
+ for (const [c, m] of u.value.entries())
298
338
  if (["Inter", "Merriweather", "Fira Mono"].includes(c) === !1) {
299
- const t = Array.from(m).join(";");
300
- o.push(`${c.replace(" ", "+")}:wght@${t}`);
339
+ const a = Array.from(m).join(";");
340
+ o.push(`${c.replace(" ", "+")}:wght@${a}`);
301
341
  }
302
342
  return o;
303
343
  }) };
@@ -528,6 +568,34 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
528
568
  borderRadius: "var(--theme--border-radius)",
529
569
  boxShadow: "0px 0px 6px 0px rgb(0, 0, 0, 0.2)"
530
570
  }
571
+ },
572
+ banner: {
573
+ background: "#0e1c2f",
574
+ padding: "40px",
575
+ borderRadius: "var(--theme--border-radius)",
576
+ avatar: {
577
+ borderRadius: "50%",
578
+ foreground: "var(--theme--primary)",
579
+ background: "#ffffff"
580
+ },
581
+ headline: {
582
+ foreground: "#ffffff",
583
+ fontFamily: "var(--theme--fonts--sans--font-family)",
584
+ fontWeight: "var(--theme--fonts--sans--font-weight)"
585
+ },
586
+ title: {
587
+ foreground: "#ffffff",
588
+ fontFamily: "var(--theme--fonts--display--font-family)",
589
+ fontWeight: "var(--theme--fonts--display--font-weight)"
590
+ },
591
+ subtitle: {
592
+ foreground: "#a2b5cd",
593
+ fontFamily: "var(--theme--fonts--monospace--font-family)",
594
+ fontWeight: "var(--theme--fonts--monospace--font-weight)"
595
+ },
596
+ art: {
597
+ foreground: "#2e3a4d"
598
+ }
531
599
  }
532
600
  }
533
601
  }), J = R({
@@ -842,6 +910,34 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
842
910
  borderRadius: "var(--theme--border-radius)",
843
911
  boxShadow: "0px 0px 6px 0px rgb(23, 41, 64, 0.2), 0px 0px 12px 2px rgb(23, 41, 64, 0.05)"
844
912
  }
913
+ },
914
+ banner: {
915
+ background: "#0e1c2f",
916
+ padding: "40px",
917
+ borderRadius: "var(--theme--border-radius)",
918
+ avatar: {
919
+ borderRadius: "50%",
920
+ foreground: "var(--theme--primary)",
921
+ background: "#ffffff"
922
+ },
923
+ headline: {
924
+ foreground: "#ffffff",
925
+ fontFamily: "var(--theme--fonts--sans--font-family)",
926
+ fontWeight: "var(--theme--fonts--sans--font-weight)"
927
+ },
928
+ title: {
929
+ foreground: "#ffffff",
930
+ fontFamily: "var(--theme--fonts--display--font-family)",
931
+ fontWeight: "var(--theme--fonts--display--font-weight)"
932
+ },
933
+ subtitle: {
934
+ foreground: "#a2b5cd",
935
+ fontFamily: "var(--theme--fonts--monospace--font-family)",
936
+ fontWeight: "var(--theme--fonts--monospace--font-weight)"
937
+ },
938
+ art: {
939
+ foreground: "#2e3a4d"
940
+ }
845
941
  }
846
942
  }
847
943
  }), X = R({
@@ -960,21 +1056,21 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
960
1056
  }
961
1057
  }
962
1058
  }
963
- }), Y = [A], Z = [C, X, J], rr = I("🎨 Themes", () => {
1059
+ }), Y = [A], Z = [C, X, J], ee = U("🎨 Themes", () => {
964
1060
  const d = B({ light: Z, dark: Y });
965
- return { themes: d, registerTheme: (f) => {
966
- f.appearance === "light" ? d.light.push(f) : d.dark.push(f);
1061
+ return { themes: d, registerTheme: (u) => {
1062
+ u.appearance === "light" ? d.light.push(u) : d.dark.push(u);
967
1063
  } };
968
- }), er = (d, s, f, p, o) => {
969
- const { themes: c } = U(rr());
970
- return { theme: v(() => {
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);
1064
+ }), re = (d, v, u, O, o) => {
1065
+ const { themes: c } = I(ee());
1066
+ return { theme: y(() => {
1067
+ const t = f(d) ? f(u) : f(v), a = f(d) ? A : C, n = f(d) ? f(o) : f(O), F = f(c)[f(d) ? "dark" : "light"].find((l) => l.id === t);
1068
+ return F ? n ? w({}, a, F, { rules: n }) : w(a, F) : (t && t !== a.id && console.warn(`Theme "${t}" doesn't exist.`), n ? w({}, a, { rules: n }) : a);
973
1069
  }) };
974
- }, or = (d) => {
975
- const s = V(d, { delimiter: "--" }), f = (p) => `--theme--${P(p, { separator: "-" })}`;
976
- return E(s, (p, o) => f(o));
977
- }, gr = /* @__PURE__ */ $({
1070
+ }, oe = (d) => {
1071
+ const v = V(d, { delimiter: "--" }), u = (O) => `--theme--${P(O, { separator: "-" })}`;
1072
+ return E(v, (O, o) => u(o));
1073
+ }, ge = /* @__PURE__ */ $({
978
1074
  __name: "theme-provider",
979
1075
  props: {
980
1076
  darkMode: { type: Boolean },
@@ -984,9 +1080,9 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
984
1080
  themeDarkOverrides: { default: () => ({}) }
985
1081
  },
986
1082
  setup(d) {
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);
1083
+ const v = d, { darkMode: u, themeLight: O, themeDark: o, themeLightOverrides: c, themeDarkOverrides: m } = D(v), { theme: t } = re(u, O, o, c, m), a = y(() => oe(f(t).rules)), { googleFonts: n } = q(t);
988
1084
  N({
989
- link: v(() => {
1085
+ link: y(() => {
990
1086
  let l = "";
991
1087
  if (n.value.length > 0) {
992
1088
  const g = n.value.join("&family=");
@@ -1001,19 +1097,19 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
1001
1097
  ] : [];
1002
1098
  })
1003
1099
  });
1004
- const h = v(() => `:root {${Object.entries(i(t)).map(([g, x]) => `${g}: ${x};`).join(" ")}}`);
1100
+ const F = y(() => `:root {${Object.entries(f(a)).map(([g, x]) => `${g}: ${x};`).join(" ")}}`);
1005
1101
  return (l, g) => (G(), T(_, { to: "#theme" }, [
1006
- L(M(h.value), 1)
1102
+ L(M(F.value), 1)
1007
1103
  ]));
1008
1104
  }
1009
1105
  });
1010
1106
  export {
1011
- lr as Definitions,
1012
- gr as ThemeProvider,
1107
+ le as Definitions,
1108
+ ge as ThemeProvider,
1013
1109
  Q as ThemeSchema,
1014
1110
  R as defineTheme,
1015
- or as rulesToCssVars,
1111
+ oe as rulesToCssVars,
1016
1112
  q as useFonts,
1017
- er as useTheme,
1018
- rr as useThemeStore
1113
+ re as useTheme,
1114
+ ee as useThemeStore
1019
1115
  };
package/dist/schemas/theme.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import type { Static } from '@sinclair/typebox';
2
- export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
1
+ import { Static } from '@sinclair/typebox';
2
+
3
+ export declare const ThemeSchema: import('@sinclair/typebox').TObject<{
3
4
  id: import("@sinclair/typebox").TString;
4
5
  name: import("@sinclair/typebox").TString;
5
6
  appearance: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TLiteral<"light">, import("@sinclair/typebox").TLiteral<"dark">]>;
@@ -231,18 +232,46 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
231
232
  boxShadow: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
232
233
  }>>;
233
234
  }>>;
235
+ banner: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
236
+ background: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
237
+ padding: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>, import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>]>>;
238
+ borderRadius: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>, import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>]>>;
239
+ avatar: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
240
+ background: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
241
+ foreground: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
242
+ borderRadius: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>, import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>]>>;
243
+ }>>;
244
+ headline: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
245
+ foreground: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
246
+ fontFamily: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
247
+ fontWeight: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
248
+ }>>;
249
+ title: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
250
+ foreground: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
251
+ fontFamily: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
252
+ fontWeight: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
253
+ }>>;
254
+ subtitle: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
255
+ foreground: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
256
+ fontFamily: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
257
+ fontWeight: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
258
+ }>>;
259
+ art: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
260
+ foreground: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>>;
261
+ }>>;
262
+ }>>;
234
263
  }>;
235
264
  }>;
236
265
  export declare const Definitions: {
237
266
  $defs: {
238
- Color: import("@sinclair/typebox").TString;
239
- FamilyName: import("@sinclair/typebox").TString;
240
- Length: import("@sinclair/typebox").TString;
241
- Percentage: import("@sinclair/typebox").TString;
242
- LineWidth: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>;
243
- BoxShadow: import("@sinclair/typebox").TString;
244
- Size: import("@sinclair/typebox").TString;
245
- Number: import("@sinclair/typebox").TString;
267
+ Color: import('@sinclair/typebox').TString;
268
+ FamilyName: import('@sinclair/typebox').TString;
269
+ Length: import('@sinclair/typebox').TString;
270
+ Percentage: import('@sinclair/typebox').TString;
271
+ LineWidth: import('@sinclair/typebox').TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>;
272
+ BoxShadow: import('@sinclair/typebox').TString;
273
+ Size: import('@sinclair/typebox').TString;
274
+ Number: import('@sinclair/typebox').TString;
246
275
  };
247
276
  };
248
277
  export type Theme = Static<typeof ThemeSchema>;
package/dist/stores/theme.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import type { Theme } from '../schemas/theme.js';
2
- export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes", import("pinia")._UnwrapAll<Pick<{
1
+ import { Theme } from '../schemas/theme.js';
2
+
3
+ export declare const useThemeStore: import('pinia').StoreDefinition<"🎨 Themes", import("pinia")._UnwrapAll<Pick<{
3
4
  themes: {
4
5
  light: {
5
6
  id: string;
@@ -233,6 +234,34 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
233
234
  borderRadius?: string;
234
235
  };
235
236
  };
237
+ banner?: {
238
+ background?: string;
239
+ padding?: string;
240
+ borderRadius?: string;
241
+ headline?: {
242
+ foreground?: string;
243
+ fontFamily?: string;
244
+ fontWeight?: string;
245
+ };
246
+ title?: {
247
+ foreground?: string;
248
+ fontFamily?: string;
249
+ fontWeight?: string;
250
+ };
251
+ art?: {
252
+ foreground?: string;
253
+ };
254
+ avatar?: {
255
+ foreground?: string;
256
+ background?: string;
257
+ borderRadius?: string;
258
+ };
259
+ subtitle?: {
260
+ foreground?: string;
261
+ fontFamily?: string;
262
+ fontWeight?: string;
263
+ };
264
+ };
236
265
  };
237
266
  }[];
238
267
  dark: {
@@ -467,6 +496,34 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
467
496
  borderRadius?: string;
468
497
  };
469
498
  };
499
+ banner?: {
500
+ background?: string;
501
+ padding?: string;
502
+ borderRadius?: string;
503
+ headline?: {
504
+ foreground?: string;
505
+ fontFamily?: string;
506
+ fontWeight?: string;
507
+ };
508
+ title?: {
509
+ foreground?: string;
510
+ fontFamily?: string;
511
+ fontWeight?: string;
512
+ };
513
+ art?: {
514
+ foreground?: string;
515
+ };
516
+ avatar?: {
517
+ foreground?: string;
518
+ background?: string;
519
+ borderRadius?: string;
520
+ };
521
+ subtitle?: {
522
+ foreground?: string;
523
+ fontFamily?: string;
524
+ fontWeight?: string;
525
+ };
526
+ };
470
527
  };
471
528
  }[];
472
529
  };
@@ -705,6 +762,34 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
705
762
  borderRadius?: string;
706
763
  };
707
764
  };
765
+ banner?: {
766
+ background?: string;
767
+ padding?: string;
768
+ borderRadius?: string;
769
+ headline?: {
770
+ foreground?: string;
771
+ fontFamily?: string;
772
+ fontWeight?: string;
773
+ };
774
+ title?: {
775
+ foreground?: string;
776
+ fontFamily?: string;
777
+ fontWeight?: string;
778
+ };
779
+ art?: {
780
+ foreground?: string;
781
+ };
782
+ avatar?: {
783
+ foreground?: string;
784
+ background?: string;
785
+ borderRadius?: string;
786
+ };
787
+ subtitle?: {
788
+ foreground?: string;
789
+ fontFamily?: string;
790
+ fontWeight?: string;
791
+ };
792
+ };
708
793
  };
709
794
  }[];
710
795
  dark: {
@@ -939,6 +1024,34 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
939
1024
  borderRadius?: string;
940
1025
  };
941
1026
  };
1027
+ banner?: {
1028
+ background?: string;
1029
+ padding?: string;
1030
+ borderRadius?: string;
1031
+ headline?: {
1032
+ foreground?: string;
1033
+ fontFamily?: string;
1034
+ fontWeight?: string;
1035
+ };
1036
+ title?: {
1037
+ foreground?: string;
1038
+ fontFamily?: string;
1039
+ fontWeight?: string;
1040
+ };
1041
+ art?: {
1042
+ foreground?: string;
1043
+ };
1044
+ avatar?: {
1045
+ foreground?: string;
1046
+ background?: string;
1047
+ borderRadius?: string;
1048
+ };
1049
+ subtitle?: {
1050
+ foreground?: string;
1051
+ fontFamily?: string;
1052
+ fontWeight?: string;
1053
+ };
1054
+ };
942
1055
  };
943
1056
  }[];
944
1057
  };
@@ -1177,6 +1290,34 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
1177
1290
  borderRadius?: string;
1178
1291
  };
1179
1292
  };
1293
+ banner?: {
1294
+ background?: string;
1295
+ padding?: string;
1296
+ borderRadius?: string;
1297
+ headline?: {
1298
+ foreground?: string;
1299
+ fontFamily?: string;
1300
+ fontWeight?: string;
1301
+ };
1302
+ title?: {
1303
+ foreground?: string;
1304
+ fontFamily?: string;
1305
+ fontWeight?: string;
1306
+ };
1307
+ art?: {
1308
+ foreground?: string;
1309
+ };
1310
+ avatar?: {
1311
+ foreground?: string;
1312
+ background?: string;
1313
+ borderRadius?: string;
1314
+ };
1315
+ subtitle?: {
1316
+ foreground?: string;
1317
+ fontFamily?: string;
1318
+ fontWeight?: string;
1319
+ };
1320
+ };
1180
1321
  };
1181
1322
  }[];
1182
1323
  dark: {
@@ -1411,6 +1552,34 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
1411
1552
  borderRadius?: string;
1412
1553
  };
1413
1554
  };
1555
+ banner?: {
1556
+ background?: string;
1557
+ padding?: string;
1558
+ borderRadius?: string;
1559
+ headline?: {
1560
+ foreground?: string;
1561
+ fontFamily?: string;
1562
+ fontWeight?: string;
1563
+ };
1564
+ title?: {
1565
+ foreground?: string;
1566
+ fontFamily?: string;
1567
+ fontWeight?: string;
1568
+ };
1569
+ art?: {
1570
+ foreground?: string;
1571
+ };
1572
+ avatar?: {
1573
+ foreground?: string;
1574
+ background?: string;
1575
+ borderRadius?: string;
1576
+ };
1577
+ subtitle?: {
1578
+ foreground?: string;
1579
+ fontFamily?: string;
1580
+ fontWeight?: string;
1581
+ };
1582
+ };
1414
1583
  };
1415
1584
  }[];
1416
1585
  };
package/dist/themes/dark/default.d.ts CHANGED
@@ -226,6 +226,34 @@ declare const _default: {
226
226
  boxShadow: string;
227
227
  };
228
228
  };
229
+ banner: {
230
+ background: string;
231
+ padding: string;
232
+ borderRadius: string;
233
+ avatar: {
234
+ borderRadius: string;
235
+ foreground: string;
236
+ background: string;
237
+ };
238
+ headline: {
239
+ foreground: string;
240
+ fontFamily: string;
241
+ fontWeight: string;
242
+ };
243
+ title: {
244
+ foreground: string;
245
+ fontFamily: string;
246
+ fontWeight: string;
247
+ };
248
+ subtitle: {
249
+ foreground: string;
250
+ fontFamily: string;
251
+ fontWeight: string;
252
+ };
253
+ art: {
254
+ foreground: string;
255
+ };
256
+ };
229
257
  };
230
258
  };
231
259
  export default _default;
package/dist/themes/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
- import type { Theme } from '../schemas/index.js';
1
+ import { Theme } from '../schemas/index.js';
2
+
2
3
  export declare const dark: Theme[];
3
4
  export declare const light: Theme[];
package/dist/themes/light/default.d.ts CHANGED
@@ -226,6 +226,34 @@ declare const _default: {
226
226
  boxShadow: string;
227
227
  };
228
228
  };
229
+ banner: {
230
+ background: string;
231
+ padding: string;
232
+ borderRadius: string;
233
+ avatar: {
234
+ borderRadius: string;
235
+ foreground: string;
236
+ background: string;
237
+ };
238
+ headline: {
239
+ foreground: string;
240
+ fontFamily: string;
241
+ fontWeight: string;
242
+ };
243
+ title: {
244
+ foreground: string;
245
+ fontFamily: string;
246
+ fontWeight: string;
247
+ };
248
+ subtitle: {
249
+ foreground: string;
250
+ fontFamily: string;
251
+ fontWeight: string;
252
+ };
253
+ art: {
254
+ foreground: string;
255
+ };
256
+ };
229
257
  };
230
258
  };
231
259
  export default _default;
package/dist/utils/define-theme.d.ts CHANGED
@@ -230,5 +230,33 @@ export declare const defineTheme: <T extends {
230
230
  borderRadius?: string;
231
231
  };
232
232
  };
233
+ banner?: {
234
+ background?: string;
235
+ padding?: string;
236
+ borderRadius?: string;
237
+ headline?: {
238
+ foreground?: string;
239
+ fontFamily?: string;
240
+ fontWeight?: string;
241
+ };
242
+ title?: {
243
+ foreground?: string;
244
+ fontFamily?: string;
245
+ fontWeight?: string;
246
+ };
247
+ art?: {
248
+ foreground?: string;
249
+ };
250
+ avatar?: {
251
+ foreground?: string;
252
+ background?: string;
253
+ borderRadius?: string;
254
+ };
255
+ subtitle?: {
256
+ foreground?: string;
257
+ fontFamily?: string;
258
+ fontWeight?: string;
259
+ };
260
+ };
233
261
  };
234
262
  }>(theme: T) => T;
package/dist/utils/rules-to-css-vars.d.ts CHANGED
@@ -1,3 +1,4 @@
1
- import type { DeepPartial } from '@directus/types';
2
- import type { Theme } from '../schemas/index.js';
1
+ import { Theme } from '../schemas/index.js';
2
+ import { DeepPartial } from '@directus/types';
3
+
3
4
  export declare const rulesToCssVars: (rules: DeepPartial<Theme['rules']>) => Record<string, string | number>;
package/license CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright 2023 Monospace, Inc.
3
+ Copyright 2024 Monospace, Inc.
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
6
6
  documentation files (the “Software”), to deal in the Software without restriction, including without limitation the
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@directus/themes",
3
- "version": "0.3.4",
3
+ "version": "0.3.6",
4
4
  "description": "Themes for Directus",
5
5
  "homepage": "https://directus.io",
6
6
  "repository": {
@@ -22,23 +22,23 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@sinclair/typebox": "0.32.14",
25
+ "@sinclair/typebox": "0.32.15",
26
26
  "decamelize": "6.0.0",
27
27
  "flat": "6.0.1",
28
28
  "lodash-es": "4.17.21",
29
- "@directus/utils": "11.0.5"
29
+ "@directus/utils": "11.0.7"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@types/lodash-es": "4.17.12",
33
33
  "@unhead/vue": "1.8.10",
34
34
  "@vitejs/plugin-vue": "5.0.4",
35
35
  "pinia": "2.1.7",
36
- "rollup-plugin-node-externals": "7.0.1",
36
+ "rollup-plugin-node-externals": "7.1.1",
37
37
  "typescript": "5.3.3",
38
- "vite": "5.1.1",
39
- "vite-plugin-dts": "3.7.2",
40
- "vue": "3.4.19",
41
- "@directus/types": "11.0.6",
38
+ "vite": "5.1.4",
39
+ "vite-plugin-dts": "3.8.1",
40
+ "vue": "3.4.21",
41
+ "@directus/types": "11.0.8",
42
42
  "@directus/tsconfig": "1.0.1"
43
43
  },
44
44
  "peerDependencies": {