@directus/themes 0.3.0 → 0.3.2

package/dist/composables/use-theme.d.ts

@@ -3,6 +3,7 @@ import type { MaybeRef } from 'vue';
 import type { Theme } from '../schemas/theme.js';
 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']>>) => {
     theme: import("vue").ComputedRef<{
+        id: string;
         name: string;
         appearance: "dark";
         rules: {
@@ -112,13 +113,17 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
                 title: {
                     foreground: string;
                     fontFamily: string;
+                    fontWeight: string;
                 };
             };
             form: {
+                columnGap: string;
+                rowGap: string;
                 field: {
                     label: {
                         foreground: string;
                         fontFamily: string;
+                        fontWeight: string;
                     };
                     input: {
                         background: string;
@@ -132,6 +137,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
                         boxShadowHover: string;
                         boxShadowFocus: string;
                         height: string;
+                        padding: string;
                     };
                 };
             };
@@ -177,6 +183,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
                                 boxShadowHover: string;
                                 boxShadowFocus: string;
                                 height: string;
+                                padding: string;
                             };
                         };
                     };
@@ -211,6 +218,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
                             boxShadowHover: string;
                             boxShadowFocus: string;
                             height: string;
+                            padding: string;
                         };
                     };
                 };
@@ -224,6 +232,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
             };
         };
     } | {
+        id: string;
         name: string;
         appearance: "light";
         rules: {

package/dist/index.js

@@ -1,14 +1,14 @@
-import { computed as v, unref as i, reactive as B, defineComponent as $, toRefs as D, openBlock as T, createBlock as L, Teleport as G, createTextVNode as N, toDisplayString as M } from "vue";
-import { useHead as E } from "@unhead/vue";
-import { get as W, merge as S, mapKeys as U } from "lodash-es";
-import { defineStore as _, storeToRefs as I } from "pinia";
+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";
+import { useHead as N } from "@unhead/vue";
+import { get as W, merge as w, mapKeys as E } from "lodash-es";
+import { defineStore as I, storeToRefs as U } from "pinia";
 import P from "decamelize";
 import { flatten as V } from "flat";
 import { cssVar as z } from "@directus/utils/browser";
 import { Type as r } from "@sinclair/typebox";
 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")], {
   $id: "LineWidth"
-}), w = r.Optional(
+}), S = r.Optional(
   r.Object({
     columnGap: r.Optional(r.Union([r.Ref(k), r.Ref(O)])),
     rowGap: r.Optional(r.Union([r.Ref(k), r.Ref(O)])),
@@ -186,7 +186,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
       )
     })
   ),
-  form: w,
+  form: S,
   sidebar: r.Optional(
     r.Object({
       background: r.Optional(r.Ref(e)),
@@ -216,7 +216,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
               borderColor: r.Optional(r.Ref(e))
             })
           ),
-          form: w
+          form: S
         })
       )
     })
@@ -234,7 +234,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
           speed: r.Optional(r.Ref(j))
         })
       ),
-      form: w
+      form: S
     })
   ),
   popover: r.Optional(
@@ -249,6 +249,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
     })
   )
 }), Q = r.Object({
+  id: r.String(),
   name: r.String(),
   appearance: r.Union([r.Literal("light"), r.Literal("dark")]),
   rules: K
@@ -301,7 +302,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
     return o;
   }) };
 }, R = (d) => d, A = R({
-  name: "Directus Default",
+  id: "Directus Default",
+  name: "$t:theme_directus_default",
   appearance: "dark",
   rules: {
     borderRadius: "6px",
@@ -409,14 +411,18 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
       },
       title: {
         foreground: "var(--theme--foreground-accent)",
-        fontFamily: "var(--theme--fonts--display--font-family)"
+        fontFamily: "var(--theme--fonts--display--font-family)",
+        fontWeight: "var(--theme--fonts--display--font-weight)"
       }
     },
     form: {
+      columnGap: "32px",
+      rowGap: "40px",
       field: {
         label: {
           foreground: "var(--theme--foreground-accent)",
-          fontFamily: "var(--theme--fonts--sans--font-family)"
+          fontFamily: "var(--theme--fonts--sans--font-family)",
+          fontWeight: "600"
         },
         input: {
           background: "var(--theme--background)",
@@ -429,7 +435,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
           boxShadow: "none",
           boxShadowHover: "none",
           boxShadowFocus: "0 0 16px -8px var(--theme--primary)",
-          height: "60px"
+          height: "60px",
+          padding: "16px"
         }
       }
     },
@@ -474,7 +481,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
               boxShadow: "var(--theme--form--field--input--box-shadow)",
               boxShadowHover: "var(--theme--form--field--input--box-shadow-hover)",
               boxShadowFocus: "var(--theme--form--field--input--box-shadow-focus)",
-              height: "52px"
+              height: "52px",
+              padding: "12px"
             }
           }
         }
@@ -508,7 +516,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
             boxShadow: "var(--theme--form--field--input--box-shadow)",
             boxShadowHover: "var(--theme--form--field--input--box-shadow-hover)",
             boxShadowFocus: "var(--theme--form--field--input--box-shadow-focus)",
-            height: "var(--theme--form--field--input--height)"
+            height: "var(--theme--form--field--input--height)",
+            padding: "var(--theme--form--field--input--padding)"
           }
         }
       }
@@ -522,7 +531,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
     }
   }
 }), J = R({
-  name: "Directus Color Match",
+  id: "Directus Color Match",
+  name: "$t:theme_directus_colormatch",
   appearance: "light",
   rules: {
     background: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 7%)",
@@ -606,7 +616,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
     }
   }
 }), C = R({
-  name: "Directus Default",
+  id: "Directus Default",
+  name: "$t:theme_directus_default",
   appearance: "light",
   rules: {
     borderRadius: "6px",
@@ -696,7 +707,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
         background: "transparent",
         backgroundHover: "var(--theme--navigation--background-accent)",
         backgroundActive: "var(--theme--navigation--background-accent)",
-        fontFamily: "var(--theme--font-family-sans-serif)",
+        fontFamily: "var(--theme--fonts--sans--font-family)",
         divider: {
           borderColor: "var(--theme--border-color-accent)",
           borderWidth: "var(--theme--border-width)"
@@ -710,7 +721,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
       boxShadow: "0 4px 7px -4px rgb(0 0 0 / 0.2)",
       headline: {
         foreground: "var(--theme--foreground-subdued)",
-        fontFamily: "var(--theme--font-family-sans-serif)"
+        fontFamily: "var(--theme--fonts--sans--font-family)"
       },
       title: {
         foreground: "var(--theme--foreground-accent)",
@@ -724,7 +735,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
       field: {
         label: {
           foreground: "var(--theme--foreground-accent)",
-          fontFamily: "var(--theme--font-family-sans-serif)",
+          fontFamily: "var(--theme--fonts--sans--font-family)",
           fontWeight: "600"
         },
         input: {
@@ -746,7 +757,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
     sidebar: {
       background: "var(--theme--background-normal)",
       foreground: "var(--theme--foreground-subdued)",
-      fontFamily: "var(--theme--font-family-sans-serif)",
+      fontFamily: "var(--theme--fonts--sans--font-family)",
       borderColor: "transparent",
       borderWidth: "0px",
       section: {
@@ -762,7 +773,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
           background: "var(--theme--background-accent)",
           backgroundHover: "var(--theme--sidebar--section--toggle--background)",
           backgroundActive: "var(--theme--sidebar--section--toggle--background)",
-          fontFamily: "var(--theme--font-family-sans-serif)",
+          fontFamily: "var(--theme--fonts--sans--font-family)",
           borderColor: "transparent",
           borderWidth: "0px"
         },
@@ -834,7 +845,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
     }
   }
 }), X = R({
-  name: "Directus Minimal",
+  id: "Directus Minimal",
+  name: "$t:theme_directus_minimal",
   appearance: "light",
   rules: {
     borderWidth: "1px",
@@ -925,7 +937,6 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
         }
       }
     },
-    fontFamilyDisplay: "system-ui",
     public: {
       art: {
         background: "color-mix(in srgb, #FFFFFF, var(--project-color) 10%)",
@@ -942,22 +953,27 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
     primaryAccent: "#E2E8F0",
     secondaryAccent: "#E2E8F0",
     secondaryBackground: "#F1F5F9",
-    secondarySubdued: "#F8FAFC"
+    secondarySubdued: "#F8FAFC",
+    fonts: {
+      display: {
+        fontFamily: "system-ui"
+      }
+    }
   }
-}), Y = [A], Z = [C, X, J], rr = _("🎨 Themes", () => {
+}), Y = [A], Z = [C, X, J], rr = I("🎨 Themes", () => {
   const d = B({ light: Z, dark: Y });
   return { themes: d, registerTheme: (f) => {
     f.appearance === "light" ? d.light.push(f) : d.dark.push(f);
   } };
 }), er = (d, s, f, p, o) => {
-  const { themes: c } = I(rr());
+  const { themes: c } = U(rr());
   return { theme: v(() => {
-    const a = i(d) ? i(f) : i(s), t = i(d) ? A : C, n = i(d) ? i(o) : i(p), h = i(c)[i(d) ? "dark" : "light"].find((l) => l.name === a);
-    return h ? n ? S({}, t, h, { rules: n }) : S(t, h) : (a && a !== t.name && console.warn(`Theme "${a}" doesn't exist.`), n ? S({}, t, { rules: n }) : t);
+    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);
+    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);
   }) };
 }, or = (d) => {
   const s = V(d, { delimiter: "--" }), f = (p) => `--theme--${P(p, { separator: "-" })}`;
-  return U(s, (p, o) => f(o));
+  return E(s, (p, o) => f(o));
 }, gr = /* @__PURE__ */ $({
   __name: "theme-provider",
   props: {
@@ -969,7 +985,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
   },
   setup(d) {
     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);
-    E({
+    N({
       link: v(() => {
         let l = "";
         if (n.value.length > 0) {
@@ -986,8 +1002,8 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
       })
     });
     const h = v(() => `:root {${Object.entries(i(t)).map(([g, x]) => `${g}: ${x};`).join(" ")}}`);
-    return (l, g) => (T(), L(G, { to: "#theme" }, [
-      N(M(h.value), 1)
+    return (l, g) => (G(), T(_, { to: "#theme" }, [
+      L(M(h.value), 1)
     ]));
   }
 });

package/dist/schemas/theme.d.ts

@@ -1,5 +1,6 @@
 import type { Static } from '@sinclair/typebox';
 export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
+    id: import("@sinclair/typebox").TString;
     name: import("@sinclair/typebox").TString;
     appearance: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TLiteral<"light">, import("@sinclair/typebox").TLiteral<"dark">]>;
     rules: import("@sinclair/typebox").TObject<{

package/dist/stores/theme.d.ts

@@ -2,6 +2,7 @@ import type { Theme } from '../schemas/theme.js';
 export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes", import("pinia")._UnwrapAll<Pick<{
     themes: {
         light: {
+            id: string;
             name: string;
             appearance: "light" | "dark";
             rules: {
@@ -235,6 +236,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
             };
         }[];
         dark: {
+            id: string;
             name: string;
             appearance: "light" | "dark";
             rules: {
@@ -472,6 +474,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
 }, "themes">>, Pick<{
     themes: {
         light: {
+            id: string;
             name: string;
             appearance: "light" | "dark";
             rules: {
@@ -705,6 +708,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
             };
         }[];
         dark: {
+            id: string;
             name: string;
             appearance: "light" | "dark";
             rules: {
@@ -942,6 +946,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
 }, never>, Pick<{
     themes: {
         light: {
+            id: string;
             name: string;
             appearance: "light" | "dark";
             rules: {
@@ -1175,6 +1180,7 @@ export declare const useThemeStore: import("pinia").StoreDefinition<"🎨 Themes
             };
         }[];
         dark: {
+            id: string;
             name: string;
             appearance: "light" | "dark";
             rules: {

package/dist/themes/dark/default.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    id: string;
     name: string;
     appearance: "dark";
     rules: {
@@ -108,13 +109,17 @@ declare const _default: {
             title: {
                 foreground: string;
                 fontFamily: string;
+                fontWeight: string;
             };
         };
         form: {
+            columnGap: string;
+            rowGap: string;
             field: {
                 label: {
                     foreground: string;
                     fontFamily: string;
+                    fontWeight: string;
                 };
                 input: {
                     background: string;
@@ -128,6 +133,7 @@ declare const _default: {
                     boxShadowHover: string;
                     boxShadowFocus: string;
                     height: string;
+                    padding: string;
                 };
             };
         };
@@ -173,6 +179,7 @@ declare const _default: {
                             boxShadowHover: string;
                             boxShadowFocus: string;
                             height: string;
+                            padding: string;
                         };
                     };
                 };
@@ -207,6 +214,7 @@ declare const _default: {
                         boxShadowHover: string;
                         boxShadowFocus: string;
                         height: string;
+                        padding: string;
                     };
                 };
             };

package/dist/themes/light/color-match.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    id: string;
     name: string;
     appearance: "light";
     rules: {

package/dist/themes/light/default.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    id: string;
     name: string;
     appearance: "light";
     rules: {

package/dist/themes/light/minimal.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    id: string;
     name: string;
     appearance: "light";
     rules: {
@@ -90,7 +91,6 @@ declare const _default: {
                 };
             };
         };
-        fontFamilyDisplay: string;
         public: {
             art: {
                 background: string;
@@ -108,6 +108,11 @@ declare const _default: {
         secondaryAccent: string;
         secondaryBackground: string;
         secondarySubdued: string;
+        fonts: {
+            display: {
+                fontFamily: string;
+            };
+        };
     };
 };
 export default _default;

package/dist/utils/define-theme.d.ts

@@ -1,4 +1,5 @@
 export declare const defineTheme: <T extends {
+    id: string;
     name: string;
     appearance: "light" | "dark";
     rules: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@directus/themes",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Themes for Directus",
   "homepage": "https://directus.io",
   "repository": {
@@ -22,26 +22,26 @@
     "dist"
   ],
   "dependencies": {
-    "@sinclair/typebox": "0.31.17",
-    "@unhead/vue": "1.1.30",
+    "@sinclair/typebox": "0.31.28",
     "decamelize": "6.0.0",
     "flat": "6.0.1",
     "lodash-es": "4.17.21",
-    "@directus/utils": "11.0.2"
+    "@directus/utils": "11.0.3"
   },
   "devDependencies": {
-    "@types/lodash-es": "4.17.9",
-    "@vitejs/plugin-vue": "4.4.0",
+    "@types/lodash-es": "4.17.12",
+    "@vitejs/plugin-vue": "4.5.2",
     "rollup-plugin-node-externals": "6.1.2",
-    "typescript": "5.2.2",
-    "vite": "4.4.11",
-    "vite-plugin-dts": "3.6.0",
-    "@directus/types": "11.0.2",
-    "@directus/tsconfig": "1.0.1"
+    "typescript": "5.3.3",
+    "vite": "5.0.10",
+    "vite-plugin-dts": "3.6.4",
+    "@directus/tsconfig": "1.0.1",
+    "@directus/types": "11.0.3"
   },
   "peerDependencies": {
+    "@unhead/vue": "1.8.9",
     "pinia": "2.1.7",
-    "vue": "3.3.4"
+    "vue": "3.3.13"
   },
   "scripts": {
     "build": "vite build",