@directus/themes 0.0.3 → 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 (7) hide show
  1. package/dist/index.js +72 -54
  2. package/dist/schema.d.ts +6 -0
  3. package/dist/schema.json +29 -5
  4. package/dist/store.d.ts +36 -0
  5. package/dist/theme-provider.vue.d.ts +24 -0
  6. package/dist/use-theme.d.ts +6 -0
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { Type as r } from "@sinclair/typebox";
2
- import { defineStore as F, storeToRefs as j } from "pinia";
2
+ import { defineStore as x, storeToRefs as j } from "pinia";
3
3
  import { reactive as H, computed as v, unref as d, defineComponent as O, toRefs as w, openBlock as B, createBlock as T, Teleport as $, createTextVNode as D, toDisplayString as L } from "vue";
4
4
  import { useHead as M } from "@unhead/vue";
5
5
  import _ from "decamelize";
6
6
  import { flatten as C } from "flat";
7
- import { get as R, merge as y, mapKeys as I } from "lodash-es";
8
- const k = {
7
+ import { get as R, merge as p, mapKeys as I } from "lodash-es";
8
+ const y = {
9
9
  Color: "Color",
10
10
  FontFamily: "FontFamily"
11
- }, e = r.Ref(r.String({ $id: k.Color })), b = r.Ref(r.String({ $id: k.FontFamily })), W = r.Object({
11
+ }, e = r.Ref(r.String({ $id: y.Color })), c = r.Ref(r.String({ $id: y.FontFamily })), W = r.Object({
12
12
  foreground: e,
13
13
  foregroundSubdued: e,
14
14
  foregroundAccent: e,
@@ -33,15 +33,16 @@ const k = {
33
33
  dangerBackground: e,
34
34
  dangerSubdued: e,
35
35
  dangerAccent: e,
36
- fontFamilyDisplay: b,
37
- fontFamilySansSerif: b,
38
- fontFamilySerif: b,
39
- fontFamilyMonospace: b,
36
+ fontFamilyDisplay: c,
37
+ fontFamilySansSerif: c,
38
+ fontFamilySerif: c,
39
+ fontFamilyMonospace: c,
40
40
  navigation: r.Object({
41
41
  background: e,
42
42
  project: r.Object({
43
43
  background: e,
44
- foreground: e
44
+ foreground: e,
45
+ fontFamily: c
45
46
  }),
46
47
  modules: r.Object({
47
48
  background: e,
@@ -65,23 +66,26 @@ const k = {
65
66
  foregroundActive: e,
66
67
  background: e,
67
68
  backgroundHover: e,
68
- backgroundActive: e
69
+ backgroundActive: e,
70
+ fontFamily: c
69
71
  })
70
72
  }),
71
73
  header: r.Object({
72
74
  background: e,
73
75
  headline: r.Object({
74
- foreground: e
76
+ foreground: e,
77
+ fontFamily: c
75
78
  }),
76
79
  title: r.Object({
77
80
  foreground: e,
78
- fontFamily: b
81
+ fontFamily: c
79
82
  })
80
83
  }),
81
84
  form: r.Object({
82
85
  field: r.Object({
83
86
  label: r.Object({
84
- foreground: e
87
+ foreground: e,
88
+ fontFamily: c
85
89
  }),
86
90
  input: r.Object({
87
91
  background: e,
@@ -93,6 +97,7 @@ const k = {
93
97
  sidebar: r.Object({
94
98
  background: e,
95
99
  foreground: e,
100
+ fontFamily: c,
96
101
  section: r.Object({
97
102
  toggle: r.Object({
98
103
  icon: r.Object({
@@ -105,7 +110,8 @@ const k = {
105
110
  foregroundActive: e,
106
111
  background: e,
107
112
  backgroundHover: e,
108
- backgroundActive: e
113
+ backgroundActive: e,
114
+ fontFamily: c
109
115
  })
110
116
  })
111
117
  })
@@ -113,7 +119,7 @@ const k = {
113
119
  name: r.String(),
114
120
  appearance: r.Union([r.Literal("light"), r.Literal("dark")]),
115
121
  rules: W
116
- }), Z = { $defs: { [k.Color]: e, [k.FontFamily]: b } }, A = {
122
+ }), Z = { $defs: { [y.Color]: e, [y.FontFamily]: c } }, F = {
117
123
  name: "Dark (Directus)",
118
124
  appearance: "dark",
119
125
  rules: {
@@ -149,7 +155,8 @@ const k = {
149
155
  background: "#21262e",
150
156
  project: {
151
157
  background: "#30363d",
152
- foreground: "var(--theme--foreground-accent)"
158
+ foreground: "var(--theme--foreground-accent)",
159
+ fontFamily: "var(--theme--font-family-sans-serif)"
153
160
  },
154
161
  modules: {
155
162
  background: "var(--theme--background)",
@@ -173,13 +180,15 @@ const k = {
173
180
  foregroundActive: "var(--theme--navigation--list--foreground)",
174
181
  background: "transparent",
175
182
  backgroundHover: "#30363d",
176
- backgroundActive: "#30363d"
183
+ backgroundActive: "#30363d",
184
+ fontFamily: "var(--theme--font-family-sans-serif)"
177
185
  }
178
186
  },
179
187
  header: {
180
188
  background: "var(--theme--background)",
181
189
  headline: {
182
- foreground: "var(--theme--foreground-subdued)"
190
+ foreground: "var(--theme--foreground-subdued)",
191
+ fontFamily: "var(--theme--font-family-sans-serif)"
183
192
  },
184
193
  title: {
185
194
  foreground: "var(--theme--foreground-accent)",
@@ -189,7 +198,8 @@ const k = {
189
198
  form: {
190
199
  field: {
191
200
  label: {
192
- foreground: "var(--theme--foreground-accent)"
201
+ foreground: "var(--theme--foreground-accent)",
202
+ fontFamily: "var(--theme--font-family-sans-serif)"
193
203
  },
194
204
  input: {
195
205
  background: "var(--theme--background)",
@@ -201,6 +211,7 @@ const k = {
201
211
  sidebar: {
202
212
  background: "#21262e",
203
213
  foreground: "var(--theme--foreground-subdued)",
214
+ fontFamily: "var(--theme--font-family-sans-serif)",
204
215
  section: {
205
216
  toggle: {
206
217
  icon: {
@@ -213,12 +224,13 @@ const k = {
213
224
  foregroundActive: "var(--theme--sidebar--section--toggle--foreground)",
214
225
  background: "#30363d",
215
226
  backgroundHover: "var(--theme--sidebar--section--toggle--background)",
216
- backgroundActive: "var(--theme--sidebar--section--toggle--background)"
227
+ backgroundActive: "var(--theme--sidebar--section--toggle--background)",
228
+ fontFamily: "var(--theme--font-family-sans-serif)"
217
229
  }
218
230
  }
219
231
  }
220
232
  }
221
- }, S = {
233
+ }, A = {
222
234
  name: "Light (Directus)",
223
235
  appearance: "light",
224
236
  rules: {
@@ -254,7 +266,8 @@ const k = {
254
266
  background: "#f0f4f9",
255
267
  project: {
256
268
  background: "#e4eaf1",
257
- foreground: "var(--theme--foreground-accent)"
269
+ foreground: "var(--theme--foreground-accent)",
270
+ fontFamily: "var(--theme--font-family-sans-serif)"
258
271
  },
259
272
  modules: {
260
273
  background: "#18222f",
@@ -278,13 +291,15 @@ const k = {
278
291
  foregroundActive: "var(--theme--navigation--list--foreground)",
279
292
  background: "transparent",
280
293
  backgroundHover: "#e4eaf1",
281
- backgroundActive: "#e4eaf1"
294
+ backgroundActive: "#e4eaf1",
295
+ fontFamily: "var(--theme--font-family-sans-serif)"
282
296
  }
283
297
  },
284
298
  header: {
285
299
  background: "var(--theme--background)",
286
300
  headline: {
287
- foreground: "var(--theme--foreground-subdued)"
301
+ foreground: "var(--theme--foreground-subdued)",
302
+ fontFamily: "var(--theme--font-family-sans-serif)"
288
303
  },
289
304
  title: {
290
305
  foreground: "var(--theme--foreground-accent)",
@@ -294,7 +309,8 @@ const k = {
294
309
  form: {
295
310
  field: {
296
311
  label: {
297
- foreground: "var(--theme--foreground-accent)"
312
+ foreground: "var(--theme--foreground-accent)",
313
+ fontFamily: "var(--theme--font-family-sans-serif)"
298
314
  },
299
315
  input: {
300
316
  background: "var(--theme--background)",
@@ -306,6 +322,7 @@ const k = {
306
322
  sidebar: {
307
323
  background: "#f0f4f9",
308
324
  foreground: "var(--theme--foreground-subdued)",
325
+ fontFamily: "var(--theme--font-family-sans-serif)",
309
326
  section: {
310
327
  toggle: {
311
328
  icon: {
@@ -318,67 +335,68 @@ const k = {
318
335
  foregroundActive: "var(--theme--sidebar--section--toggle--foreground)",
319
336
  background: "#e4eaf1",
320
337
  backgroundHover: "var(--theme--sidebar--section--toggle--background)",
321
- backgroundActive: "var(--theme--sidebar--section--toggle--background)"
338
+ backgroundActive: "var(--theme--sidebar--section--toggle--background)",
339
+ fontFamily: "var(--theme--font-family-sans-serif)"
322
340
  }
323
341
  }
324
342
  }
325
343
  }
326
- }, V = [S], z = [A], E = F("🎨 Themes", () => {
344
+ }, V = [A], z = [F], E = x("🎨 Themes", () => {
327
345
  const t = H({
328
346
  light: V,
329
347
  dark: z
330
348
  });
331
- return { themes: t, registerTheme: (i) => {
332
- i.appearance === "light" ? t.light.push(i) : t.dark.push(i);
349
+ return { themes: t, registerTheme: (s) => {
350
+ s.appearance === "light" ? t.light.push(s) : t.dark.push(s);
333
351
  } };
334
352
  }), K = (t) => {
335
- const s = [], i = (o, c = []) => {
353
+ const m = [], s = (o, i = []) => {
336
354
  for (const [a, n] of Object.entries(o))
337
- typeof n == "object" && n !== null && ("type" in n && n.type === "object" && "properties" in n && i(n.properties, [...c, a]), "$ref" in n && n.$ref === k.FontFamily && s.push([...c, a]));
355
+ typeof n == "object" && n !== null && ("type" in n && n.type === "object" && "properties" in n && s(n.properties, [...i, a]), "$ref" in n && n.$ref === y.FontFamily && m.push([...i, a]));
338
356
  };
339
- i(N.properties.rules.properties);
340
- const m = v(() => {
357
+ s(N.properties.rules.properties);
358
+ const f = v(() => {
341
359
  const o = [];
342
- for (const a of s)
360
+ for (const a of m)
343
361
  o.push(R(d(t).rules, a).trim());
344
- const c = /* @__PURE__ */ new Set();
362
+ const i = /* @__PURE__ */ new Set();
345
363
  for (const a of o)
346
- a.split(",").forEach((g) => c.add(g));
347
- return Array.from(c);
348
- }), l = v(() => m.value.filter((o) => {
364
+ a.split(",").forEach((g) => i.add(g));
365
+ return Array.from(i);
366
+ }), b = v(() => f.value.filter((o) => {
349
367
  if (o.startsWith('"') && o.endsWith('"') && o.includes("var(") === !1) {
350
- const c = ["Inter", "Merriweather", "Fira Mono"];
351
- return !(c.includes(o) || c.map((a) => `"${a}"`).includes(o));
368
+ const i = ["Inter", "Merriweather", "Fira Mono"];
369
+ return !(i.includes(o) || i.map((a) => `"${a}"`).includes(o));
352
370
  }
353
371
  return !1;
354
372
  }).map((o) => (o.startsWith('"') && o.endsWith('"') && (o = o.slice(1, -1)), o.replace(" ", "+"))));
355
- return { fonts: m, googleFonts: l };
356
- }, P = (t, s, i, m, l) => {
373
+ return { fonts: f, googleFonts: b };
374
+ }, P = (t, m, s, f, b) => {
357
375
  const { themes: o } = j(E());
358
376
  return { theme: v(() => {
359
- const a = d(t) ? d(i) : d(s), n = d(t) ? A : S, g = d(t) ? d(l) : d(m), h = d(o)[t ? "dark" : "light"].find((u) => u.name === a);
360
- return h ? g ? y({}, n, h, { rules: g }) : y(n, h) : (a && a !== n.name && console.warn(`Theme "${a}" doesn't exist.`), g ? y({}, n, { rules: g }) : n);
377
+ const a = d(t) ? d(s) : d(m), n = d(t) ? F : A, g = d(t) ? d(b) : d(f), h = d(o)[t ? "dark" : "light"].find((u) => u.name === a);
378
+ return h ? g ? p({}, n, h, { rules: g }) : p(n, h) : (a && a !== n.name && console.warn(`Theme "${a}" doesn't exist.`), g ? p({}, n, { rules: g }) : n);
361
379
  }) };
362
380
  }, ee = /* @__PURE__ */ O({
363
381
  __name: "theme-provider",
364
382
  props: {
365
383
  darkMode: { type: Boolean },
366
- themeLight: { default: S.name },
384
+ themeLight: { default: A.name },
367
385
  themeLightOverrides: { default: () => ({}) },
368
- themeDark: { default: A.name },
386
+ themeDark: { default: F.name },
369
387
  themeDarkOverrides: { default: () => ({}) }
370
388
  },
371
389
  setup(t) {
372
- const s = t, { darkMode: i, themeLight: m, themeDark: l, themeLightOverrides: o, themeDarkOverrides: c } = w(s), { theme: a } = P(i, m, l, o, c), n = v(() => {
373
- const u = C(d(a).rules, { delimiter: "--" }), f = (p) => `--theme--${_(p, { separator: "-" })}`;
374
- return I(u, (p, x) => f(x));
390
+ const m = t, { darkMode: s, themeLight: f, themeDark: b, themeLightOverrides: o, themeDarkOverrides: i } = w(m), { theme: a } = P(s, f, b, o, i), n = v(() => {
391
+ const u = C(d(a).rules, { delimiter: "--" }), l = (k) => `--theme--${_(k, { separator: "-" })}`;
392
+ return I(u, (k, S) => l(S));
375
393
  }), { googleFonts: g } = K(a);
376
394
  M({
377
395
  link: v(() => {
378
396
  let u = "";
379
397
  if (g.value.length > 0) {
380
- const f = g.value.join("&family=");
381
- u += `https://fonts.googleapis.com/css2?family=${f}`, u += `
398
+ const l = g.value.join("&family=");
399
+ u += `https://fonts.googleapis.com/css2?family=${l}`, u += `
382
400
  `;
383
401
  }
384
402
  return u ? [
@@ -389,8 +407,8 @@ const k = {
389
407
  ] : [];
390
408
  })
391
409
  });
392
- const h = v(() => `:root {${Object.entries(d(n)).map(([f, p]) => `${f}: ${p};`).join(" ")}}`);
393
- return (u, f) => (B(), T($, { to: "#theme" }, [
410
+ const h = v(() => `:root {${Object.entries(d(n)).map(([l, k]) => `${l}: ${k};`).join(" ")}}`);
411
+ return (u, l) => (B(), T($, { to: "#theme" }, [
394
412
  D(L(h.value), 1)
395
413
  ]));
396
414
  }
@@ -399,7 +417,7 @@ export {
399
417
  Z as Definitions,
400
418
  ee as ThemeProvider,
401
419
  N as ThemeSchema,
402
- k as TypeId,
420
+ y as TypeId,
403
421
  P as useTheme,
404
422
  E as useThemeStore
405
423
  };
package/dist/schema.d.ts CHANGED
@@ -40,6 +40,7 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
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>;
43
44
  }>;
44
45
  modules: import("@sinclair/typebox").TObject<{
45
46
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
@@ -64,12 +65,14 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
64
65
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
65
66
  backgroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
66
67
  backgroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
68
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
67
69
  }>;
68
70
  }>;
69
71
  header: import("@sinclair/typebox").TObject<{
70
72
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
71
73
  headline: import("@sinclair/typebox").TObject<{
72
74
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
75
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
73
76
  }>;
74
77
  title: import("@sinclair/typebox").TObject<{
75
78
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
@@ -80,6 +83,7 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
80
83
  field: import("@sinclair/typebox").TObject<{
81
84
  label: import("@sinclair/typebox").TObject<{
82
85
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
86
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
83
87
  }>;
84
88
  input: import("@sinclair/typebox").TObject<{
85
89
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
@@ -91,6 +95,7 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
91
95
  sidebar: import("@sinclair/typebox").TObject<{
92
96
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
93
97
  foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
98
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
94
99
  section: import("@sinclair/typebox").TObject<{
95
100
  toggle: import("@sinclair/typebox").TObject<{
96
101
  icon: import("@sinclair/typebox").TObject<{
@@ -104,6 +109,7 @@ export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
104
109
  background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
105
110
  backgroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
106
111
  backgroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
112
+ fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
107
113
  }>;
108
114
  }>;
109
115
  }>;
package/dist/schema.json CHANGED
@@ -117,11 +117,15 @@
117
117
  },
118
118
  "foreground": {
119
119
  "$ref": "Color"
120
+ },
121
+ "fontFamily": {
122
+ "$ref": "FontFamily"
120
123
  }
121
124
  },
122
125
  "required": [
123
126
  "background",
124
- "foreground"
127
+ "foreground",
128
+ "fontFamily"
125
129
  ]
126
130
  },
127
131
  "modules": {
@@ -206,6 +210,9 @@
206
210
  },
207
211
  "backgroundActive": {
208
212
  "$ref": "Color"
213
+ },
214
+ "fontFamily": {
215
+ "$ref": "FontFamily"
209
216
  }
210
217
  },
211
218
  "required": [
@@ -215,7 +222,8 @@
215
222
  "foregroundActive",
216
223
  "background",
217
224
  "backgroundHover",
218
- "backgroundActive"
225
+ "backgroundActive",
226
+ "fontFamily"
219
227
  ]
220
228
  }
221
229
  },
@@ -237,10 +245,14 @@
237
245
  "properties": {
238
246
  "foreground": {
239
247
  "$ref": "Color"
248
+ },
249
+ "fontFamily": {
250
+ "$ref": "FontFamily"
240
251
  }
241
252
  },
242
253
  "required": [
243
- "foreground"
254
+ "foreground",
255
+ "fontFamily"
244
256
  ]
245
257
  },
246
258
  "title": {
@@ -276,10 +288,14 @@
276
288
  "properties": {
277
289
  "foreground": {
278
290
  "$ref": "Color"
291
+ },
292
+ "fontFamily": {
293
+ "$ref": "FontFamily"
279
294
  }
280
295
  },
281
296
  "required": [
282
- "foreground"
297
+ "foreground",
298
+ "fontFamily"
283
299
  ]
284
300
  },
285
301
  "input": {
@@ -321,6 +337,9 @@
321
337
  "foreground": {
322
338
  "$ref": "Color"
323
339
  },
340
+ "fontFamily": {
341
+ "$ref": "FontFamily"
342
+ },
324
343
  "section": {
325
344
  "type": "object",
326
345
  "properties": {
@@ -363,6 +382,9 @@
363
382
  },
364
383
  "backgroundActive": {
365
384
  "$ref": "Color"
385
+ },
386
+ "fontFamily": {
387
+ "$ref": "FontFamily"
366
388
  }
367
389
  },
368
390
  "required": [
@@ -372,7 +394,8 @@
372
394
  "foregroundActive",
373
395
  "background",
374
396
  "backgroundHover",
375
- "backgroundActive"
397
+ "backgroundActive",
398
+ "fontFamily"
376
399
  ]
377
400
  }
378
401
  },
@@ -384,6 +407,7 @@
384
407
  "required": [
385
408
  "background",
386
409
  "foreground",
410
+ "fontFamily",
387
411
  "section"
388
412
  ]
389
413
  }
package/dist/store.d.ts CHANGED
@@ -38,6 +38,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
38
38
  project: {
39
39
  foreground: string;
40
40
  background: string;
41
+ fontFamily: string;
41
42
  };
42
43
  modules: {
43
44
  background: string;
@@ -53,6 +54,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
53
54
  list: {
54
55
  foreground: string;
55
56
  background: string;
57
+ fontFamily: string;
56
58
  foregroundHover: string;
57
59
  foregroundActive: string;
58
60
  backgroundHover: string;
@@ -68,6 +70,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
68
70
  background: string;
69
71
  headline: {
70
72
  foreground: string;
73
+ fontFamily: string;
71
74
  };
72
75
  title: {
73
76
  foreground: string;
@@ -78,6 +81,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
78
81
  field: {
79
82
  label: {
80
83
  foreground: string;
84
+ fontFamily: string;
81
85
  };
82
86
  input: {
83
87
  foreground: string;
@@ -89,10 +93,12 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
89
93
  sidebar: {
90
94
  foreground: string;
91
95
  background: string;
96
+ fontFamily: string;
92
97
  section: {
93
98
  toggle: {
94
99
  foreground: string;
95
100
  background: string;
101
+ fontFamily: string;
96
102
  foregroundHover: string;
97
103
  foregroundActive: string;
98
104
  backgroundHover: string;
@@ -144,6 +150,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
144
150
  project: {
145
151
  foreground: string;
146
152
  background: string;
153
+ fontFamily: string;
147
154
  };
148
155
  modules: {
149
156
  background: string;
@@ -159,6 +166,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
159
166
  list: {
160
167
  foreground: string;
161
168
  background: string;
169
+ fontFamily: string;
162
170
  foregroundHover: string;
163
171
  foregroundActive: string;
164
172
  backgroundHover: string;
@@ -174,6 +182,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
174
182
  background: string;
175
183
  headline: {
176
184
  foreground: string;
185
+ fontFamily: string;
177
186
  };
178
187
  title: {
179
188
  foreground: string;
@@ -184,6 +193,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
184
193
  field: {
185
194
  label: {
186
195
  foreground: string;
196
+ fontFamily: string;
187
197
  };
188
198
  input: {
189
199
  foreground: string;
@@ -195,10 +205,12 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
195
205
  sidebar: {
196
206
  foreground: string;
197
207
  background: string;
208
+ fontFamily: string;
198
209
  section: {
199
210
  toggle: {
200
211
  foreground: string;
201
212
  background: string;
213
+ fontFamily: string;
202
214
  foregroundHover: string;
203
215
  foregroundActive: string;
204
216
  backgroundHover: string;
@@ -254,6 +266,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
254
266
  project: {
255
267
  foreground: string;
256
268
  background: string;
269
+ fontFamily: string;
257
270
  };
258
271
  modules: {
259
272
  background: string;
@@ -269,6 +282,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
269
282
  list: {
270
283
  foreground: string;
271
284
  background: string;
285
+ fontFamily: string;
272
286
  foregroundHover: string;
273
287
  foregroundActive: string;
274
288
  backgroundHover: string;
@@ -284,6 +298,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
284
298
  background: string;
285
299
  headline: {
286
300
  foreground: string;
301
+ fontFamily: string;
287
302
  };
288
303
  title: {
289
304
  foreground: string;
@@ -294,6 +309,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
294
309
  field: {
295
310
  label: {
296
311
  foreground: string;
312
+ fontFamily: string;
297
313
  };
298
314
  input: {
299
315
  foreground: string;
@@ -305,10 +321,12 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
305
321
  sidebar: {
306
322
  foreground: string;
307
323
  background: string;
324
+ fontFamily: string;
308
325
  section: {
309
326
  toggle: {
310
327
  foreground: string;
311
328
  background: string;
329
+ fontFamily: string;
312
330
  foregroundHover: string;
313
331
  foregroundActive: string;
314
332
  backgroundHover: string;
@@ -360,6 +378,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
360
378
  project: {
361
379
  foreground: string;
362
380
  background: string;
381
+ fontFamily: string;
363
382
  };
364
383
  modules: {
365
384
  background: string;
@@ -375,6 +394,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
375
394
  list: {
376
395
  foreground: string;
377
396
  background: string;
397
+ fontFamily: string;
378
398
  foregroundHover: string;
379
399
  foregroundActive: string;
380
400
  backgroundHover: string;
@@ -390,6 +410,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
390
410
  background: string;
391
411
  headline: {
392
412
  foreground: string;
413
+ fontFamily: string;
393
414
  };
394
415
  title: {
395
416
  foreground: string;
@@ -400,6 +421,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
400
421
  field: {
401
422
  label: {
402
423
  foreground: string;
424
+ fontFamily: string;
403
425
  };
404
426
  input: {
405
427
  foreground: string;
@@ -411,10 +433,12 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
411
433
  sidebar: {
412
434
  foreground: string;
413
435
  background: string;
436
+ fontFamily: string;
414
437
  section: {
415
438
  toggle: {
416
439
  foreground: string;
417
440
  background: string;
441
+ fontFamily: string;
418
442
  foregroundHover: string;
419
443
  foregroundActive: string;
420
444
  backgroundHover: string;
@@ -470,6 +494,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
470
494
  project: {
471
495
  foreground: string;
472
496
  background: string;
497
+ fontFamily: string;
473
498
  };
474
499
  modules: {
475
500
  background: string;
@@ -485,6 +510,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
485
510
  list: {
486
511
  foreground: string;
487
512
  background: string;
513
+ fontFamily: string;
488
514
  foregroundHover: string;
489
515
  foregroundActive: string;
490
516
  backgroundHover: string;
@@ -500,6 +526,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
500
526
  background: string;
501
527
  headline: {
502
528
  foreground: string;
529
+ fontFamily: string;
503
530
  };
504
531
  title: {
505
532
  foreground: string;
@@ -510,6 +537,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
510
537
  field: {
511
538
  label: {
512
539
  foreground: string;
540
+ fontFamily: string;
513
541
  };
514
542
  input: {
515
543
  foreground: string;
@@ -521,10 +549,12 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
521
549
  sidebar: {
522
550
  foreground: string;
523
551
  background: string;
552
+ fontFamily: string;
524
553
  section: {
525
554
  toggle: {
526
555
  foreground: string;
527
556
  background: string;
557
+ fontFamily: string;
528
558
  foregroundHover: string;
529
559
  foregroundActive: string;
530
560
  backgroundHover: string;
@@ -576,6 +606,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
576
606
  project: {
577
607
  foreground: string;
578
608
  background: string;
609
+ fontFamily: string;
579
610
  };
580
611
  modules: {
581
612
  background: string;
@@ -591,6 +622,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
591
622
  list: {
592
623
  foreground: string;
593
624
  background: string;
625
+ fontFamily: string;
594
626
  foregroundHover: string;
595
627
  foregroundActive: string;
596
628
  backgroundHover: string;
@@ -606,6 +638,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
606
638
  background: string;
607
639
  headline: {
608
640
  foreground: string;
641
+ fontFamily: string;
609
642
  };
610
643
  title: {
611
644
  foreground: string;
@@ -616,6 +649,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
616
649
  field: {
617
650
  label: {
618
651
  foreground: string;
652
+ fontFamily: string;
619
653
  };
620
654
  input: {
621
655
  foreground: string;
@@ -627,10 +661,12 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
627
661
  sidebar: {
628
662
  foreground: string;
629
663
  background: string;
664
+ fontFamily: string;
630
665
  section: {
631
666
  toggle: {
632
667
  foreground: string;
633
668
  background: string;
669
+ fontFamily: string;
634
670
  foregroundHover: string;
635
671
  foregroundActive: string;
636
672
  backgroundHover: string;
package/dist/theme-provider.vue.d.ts CHANGED
@@ -45,6 +45,7 @@ declare const _default: import("vue").DefineComponent<{
45
45
  project?: {
46
46
  foreground?: string;
47
47
  background?: string;
48
+ fontFamily?: string;
48
49
  };
49
50
  modules?: {
50
51
  background?: string;
@@ -60,6 +61,7 @@ declare const _default: import("vue").DefineComponent<{
60
61
  list?: {
61
62
  foreground?: string;
62
63
  background?: string;
64
+ fontFamily?: string;
63
65
  foregroundHover?: string;
64
66
  foregroundActive?: string;
65
67
  backgroundHover?: string;
@@ -75,6 +77,7 @@ declare const _default: import("vue").DefineComponent<{
75
77
  background?: string;
76
78
  headline?: {
77
79
  foreground?: string;
80
+ fontFamily?: string;
78
81
  };
79
82
  title?: {
80
83
  foreground?: string;
@@ -85,6 +88,7 @@ declare const _default: import("vue").DefineComponent<{
85
88
  field?: {
86
89
  label?: {
87
90
  foreground?: string;
91
+ fontFamily?: string;
88
92
  };
89
93
  input?: {
90
94
  foreground?: string;
@@ -96,10 +100,12 @@ declare const _default: import("vue").DefineComponent<{
96
100
  sidebar?: {
97
101
  foreground?: string;
98
102
  background?: string;
103
+ fontFamily?: string;
99
104
  section?: {
100
105
  toggle?: {
101
106
  foreground?: string;
102
107
  background?: string;
108
+ fontFamily?: string;
103
109
  foregroundHover?: string;
104
110
  foregroundActive?: string;
105
111
  backgroundHover?: string;
@@ -156,6 +162,7 @@ declare const _default: import("vue").DefineComponent<{
156
162
  project?: {
157
163
  foreground?: string;
158
164
  background?: string;
165
+ fontFamily?: string;
159
166
  };
160
167
  modules?: {
161
168
  background?: string;
@@ -171,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
171
178
  list?: {
172
179
  foreground?: string;
173
180
  background?: string;
181
+ fontFamily?: string;
174
182
  foregroundHover?: string;
175
183
  foregroundActive?: string;
176
184
  backgroundHover?: string;
@@ -186,6 +194,7 @@ declare const _default: import("vue").DefineComponent<{
186
194
  background?: string;
187
195
  headline?: {
188
196
  foreground?: string;
197
+ fontFamily?: string;
189
198
  };
190
199
  title?: {
191
200
  foreground?: string;
@@ -196,6 +205,7 @@ declare const _default: import("vue").DefineComponent<{
196
205
  field?: {
197
206
  label?: {
198
207
  foreground?: string;
208
+ fontFamily?: string;
199
209
  };
200
210
  input?: {
201
211
  foreground?: string;
@@ -207,10 +217,12 @@ declare const _default: import("vue").DefineComponent<{
207
217
  sidebar?: {
208
218
  foreground?: string;
209
219
  background?: string;
220
+ fontFamily?: string;
210
221
  section?: {
211
222
  toggle?: {
212
223
  foreground?: string;
213
224
  background?: string;
225
+ fontFamily?: string;
214
226
  foregroundHover?: string;
215
227
  foregroundActive?: string;
216
228
  backgroundHover?: string;
@@ -272,6 +284,7 @@ declare const _default: import("vue").DefineComponent<{
272
284
  project?: {
273
285
  foreground?: string;
274
286
  background?: string;
287
+ fontFamily?: string;
275
288
  };
276
289
  modules?: {
277
290
  background?: string;
@@ -287,6 +300,7 @@ declare const _default: import("vue").DefineComponent<{
287
300
  list?: {
288
301
  foreground?: string;
289
302
  background?: string;
303
+ fontFamily?: string;
290
304
  foregroundHover?: string;
291
305
  foregroundActive?: string;
292
306
  backgroundHover?: string;
@@ -302,6 +316,7 @@ declare const _default: import("vue").DefineComponent<{
302
316
  background?: string;
303
317
  headline?: {
304
318
  foreground?: string;
319
+ fontFamily?: string;
305
320
  };
306
321
  title?: {
307
322
  foreground?: string;
@@ -312,6 +327,7 @@ declare const _default: import("vue").DefineComponent<{
312
327
  field?: {
313
328
  label?: {
314
329
  foreground?: string;
330
+ fontFamily?: string;
315
331
  };
316
332
  input?: {
317
333
  foreground?: string;
@@ -323,10 +339,12 @@ declare const _default: import("vue").DefineComponent<{
323
339
  sidebar?: {
324
340
  foreground?: string;
325
341
  background?: string;
342
+ fontFamily?: string;
326
343
  section?: {
327
344
  toggle?: {
328
345
  foreground?: string;
329
346
  background?: string;
347
+ fontFamily?: string;
330
348
  foregroundHover?: string;
331
349
  foregroundActive?: string;
332
350
  backgroundHover?: string;
@@ -383,6 +401,7 @@ declare const _default: import("vue").DefineComponent<{
383
401
  project?: {
384
402
  foreground?: string;
385
403
  background?: string;
404
+ fontFamily?: string;
386
405
  };
387
406
  modules?: {
388
407
  background?: string;
@@ -398,6 +417,7 @@ declare const _default: import("vue").DefineComponent<{
398
417
  list?: {
399
418
  foreground?: string;
400
419
  background?: string;
420
+ fontFamily?: string;
401
421
  foregroundHover?: string;
402
422
  foregroundActive?: string;
403
423
  backgroundHover?: string;
@@ -413,6 +433,7 @@ declare const _default: import("vue").DefineComponent<{
413
433
  background?: string;
414
434
  headline?: {
415
435
  foreground?: string;
436
+ fontFamily?: string;
416
437
  };
417
438
  title?: {
418
439
  foreground?: string;
@@ -423,6 +444,7 @@ declare const _default: import("vue").DefineComponent<{
423
444
  field?: {
424
445
  label?: {
425
446
  foreground?: string;
447
+ fontFamily?: string;
426
448
  };
427
449
  input?: {
428
450
  foreground?: string;
@@ -434,10 +456,12 @@ declare const _default: import("vue").DefineComponent<{
434
456
  sidebar?: {
435
457
  foreground?: string;
436
458
  background?: string;
459
+ fontFamily?: string;
437
460
  section?: {
438
461
  toggle?: {
439
462
  foreground?: string;
440
463
  background?: string;
464
+ fontFamily?: string;
441
465
  foregroundHover?: string;
442
466
  foregroundActive?: string;
443
467
  backgroundHover?: string;
package/dist/use-theme.d.ts CHANGED
@@ -39,6 +39,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
39
39
  project: {
40
40
  foreground: string;
41
41
  background: string;
42
+ fontFamily: string;
42
43
  };
43
44
  modules: {
44
45
  background: string;
@@ -54,6 +55,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
54
55
  list: {
55
56
  foreground: string;
56
57
  background: string;
58
+ fontFamily: string;
57
59
  foregroundHover: string;
58
60
  foregroundActive: string;
59
61
  backgroundHover: string;
@@ -69,6 +71,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
69
71
  background: string;
70
72
  headline: {
71
73
  foreground: string;
74
+ fontFamily: string;
72
75
  };
73
76
  title: {
74
77
  foreground: string;
@@ -79,6 +82,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
79
82
  field: {
80
83
  label: {
81
84
  foreground: string;
85
+ fontFamily: string;
82
86
  };
83
87
  input: {
84
88
  foreground: string;
@@ -90,10 +94,12 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
90
94
  sidebar: {
91
95
  foreground: string;
92
96
  background: string;
97
+ fontFamily: string;
93
98
  section: {
94
99
  toggle: {
95
100
  foreground: string;
96
101
  background: string;
102
+ fontFamily: string;
97
103
  foregroundHover: string;
98
104
  foregroundActive: string;
99
105
  backgroundHover: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@directus/themes",
3
- "version": "0.0.3",
3
+ "version": "0.1.0",
4
4
  "description": "Themes for Directus",
5
5
  "homepage": "https://directus.io",
6
6
  "repository": {