@directus/themes 0.3.0 → 0.3.1

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

@@ -112,13 +112,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 +136,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
                         boxShadowHover: string;
                         boxShadowFocus: string;
                         height: string;
+                        padding: string;
                     };
                 };
             };
@@ -177,6 +182,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
                                 boxShadowHover: string;
                                 boxShadowFocus: string;
                                 height: string;
+                                padding: string;
                             };
                         };
                     };
@@ -211,6 +217,7 @@ export declare const useTheme: (darkMode: MaybeRef<boolean>, themeLight: MaybeRe
                             boxShadowHover: string;
                             boxShadowFocus: string;
                             height: string;
+                            padding: string;
                         };
                     };
                 };

package/dist/index.js

@@ -1,6 +1,6 @@
-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 { computed as v, unref as i, reactive as B, defineComponent as $, toRefs as D, openBlock as G, createBlock as T, Teleport as L, 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 { get as W, merge as w, mapKeys as U } from "lodash-es";
 import { defineStore as _, storeToRefs as I } from "pinia";
 import P from "decamelize";
 import { flatten as V } from "flat";
@@ -8,7 +8,7 @@ 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(
@@ -409,14 +409,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 +433,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 +479,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 +514,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)"
           }
         }
       }
@@ -696,7 +703,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 +717,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 +731,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 +753,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 +769,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"
         },
@@ -925,7 +932,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,7 +948,12 @@ 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", () => {
   const d = B({ light: Z, dark: Y });
@@ -953,7 +964,7 @@ const e = r.String({ $id: "Color" }), u = r.String({ $id: "FamilyName" }), F = r
   const { themes: c } = I(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);
+    return h ? n ? w({}, t, h, { rules: n }) : w(t, h) : (a && a !== t.name && 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: "-" })}`;
@@ -986,7 +997,7 @@ 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" }, [
+    return (l, g) => (G(), T(L, { to: "#theme" }, [
       N(M(h.value), 1)
     ]));
   }

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

@@ -108,13 +108,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 +132,7 @@ declare const _default: {
                     boxShadowHover: string;
                     boxShadowFocus: string;
                     height: string;
+                    padding: string;
                 };
             };
         };
@@ -173,6 +178,7 @@ declare const _default: {
                             boxShadowHover: string;
                             boxShadowFocus: string;
                             height: string;
+                            padding: string;
                         };
                     };
                 };
@@ -207,6 +213,7 @@ declare const _default: {
                         boxShadowHover: string;
                         boxShadowFocus: string;
                         height: string;
+                        padding: string;
                     };
                 };
             };

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

@@ -90,7 +90,6 @@ declare const _default: {
                 };
             };
         };
-        fontFamilyDisplay: string;
         public: {
             art: {
                 background: string;
@@ -108,6 +107,11 @@ declare const _default: {
         secondaryAccent: string;
         secondaryBackground: string;
         secondarySubdued: string;
+        fonts: {
+            display: {
+                fontFamily: string;
+            };
+        };
     };
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@directus/themes",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Themes for Directus",
   "homepage": "https://directus.io",
   "repository": {
@@ -36,8 +36,8 @@
     "typescript": "5.2.2",
     "vite": "4.4.11",
     "vite-plugin-dts": "3.6.0",
-    "@directus/types": "11.0.2",
-    "@directus/tsconfig": "1.0.1"
+    "@directus/tsconfig": "1.0.1",
+    "@directus/types": "11.0.2"
   },
   "peerDependencies": {
     "pinia": "2.1.7",