@directus/themes 0.2.0 → 0.3.1

package/dist/index.js

@@ -1,173 +1,321 @@
-import { Type as e } from "@sinclair/typebox";
-import { defineStore as C, storeToRefs as j } from "pinia";
-import { reactive as H, computed as h, unref as c, defineComponent as W, toRefs as O, openBlock as B, createBlock as $, Teleport as L, createTextVNode as T, toDisplayString as D } from "vue";
-import { merge as R, get as M, mapKeys as _ } from "lodash-es";
-import { useHead as N } from "@unhead/vue";
-import I from "decamelize";
-import { flatten as P } from "flat";
-const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e.String({ $id: "Length" }), A = e.String({ $id: "Percentage" }), y = e.String({ $id: "BoxShadow" }), g = e.Union([e.String(), e.Literal("thin"), e.Literal("medium"), e.Literal("thick")], {
+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 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";
+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"
-}), U = e.Object({
+}), 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)])),
+    field: r.Optional(
+      r.Object({
+        label: r.Optional(
+          r.Object({
+            foreground: r.Optional(r.Ref(e)),
+            fontFamily: r.Optional(r.Ref(u)),
+            fontWeight: r.Optional(r.Ref(F))
+          })
+        ),
+        input: r.Optional(
+          r.Object({
+            background: r.Optional(r.Ref(e)),
+            backgroundSubdued: r.Optional(r.Ref(e)),
+            foreground: r.Optional(r.Ref(e)),
+            foregroundSubdued: r.Optional(r.Ref(e)),
+            borderColor: r.Optional(r.Ref(e)),
+            borderColorHover: r.Optional(r.Ref(e)),
+            borderColorFocus: r.Optional(r.Ref(e)),
+            boxShadow: r.Optional(r.Ref(y)),
+            boxShadowHover: r.Optional(r.Ref(y)),
+            boxShadowFocus: r.Optional(r.Ref(y)),
+            height: r.Optional(r.Ref(H)),
+            padding: r.Optional(r.Union([r.Ref(k), r.Ref(O)]))
+          })
+        )
+      })
+    )
+  })
+), K = r.Object({
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////
+  // Base border styles
+  borderRadius: r.Optional(r.Union([r.Ref(k), r.Ref(O)])),
+  borderWidth: r.Optional(r.Ref(b)),
   //////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Base color palette
-  foreground: e.Ref(r),
-  foregroundSubdued: e.Ref(r),
-  foregroundAccent: e.Ref(r),
-  background: e.Ref(r),
-  primary: e.Ref(r),
-  primaryBackground: e.Ref(r),
-  primarySubdued: e.Ref(r),
-  primaryAccent: e.Ref(r),
-  secondary: e.Ref(r),
-  secondaryBackground: e.Ref(r),
-  secondarySubdued: e.Ref(r),
-  secondaryAccent: e.Ref(r),
-  success: e.Ref(r),
-  successBackground: e.Ref(r),
-  successSubdued: e.Ref(r),
-  successAccent: e.Ref(r),
-  warning: e.Ref(r),
-  warningBackground: e.Ref(r),
-  warningSubdued: e.Ref(r),
-  warningAccent: e.Ref(r),
-  danger: e.Ref(r),
-  dangerBackground: e.Ref(r),
-  dangerSubdued: e.Ref(r),
-  dangerAccent: e.Ref(r),
+  foreground: r.Optional(r.Ref(e)),
+  foregroundSubdued: r.Optional(r.Ref(e)),
+  foregroundAccent: r.Optional(r.Ref(e)),
+  background: r.Optional(r.Ref(e)),
+  backgroundNormal: r.Optional(r.Ref(e)),
+  backgroundAccent: r.Optional(r.Ref(e)),
+  backgroundSubdued: r.Optional(r.Ref(e)),
+  borderColor: r.Optional(r.Ref(e)),
+  borderColorAccent: r.Optional(r.Ref(e)),
+  borderColorSubdued: r.Optional(r.Ref(e)),
+  primary: r.Optional(r.Ref(e)),
+  primaryBackground: r.Optional(r.Ref(e)),
+  primarySubdued: r.Optional(r.Ref(e)),
+  primaryAccent: r.Optional(r.Ref(e)),
+  secondary: r.Optional(r.Ref(e)),
+  secondaryBackground: r.Optional(r.Ref(e)),
+  secondarySubdued: r.Optional(r.Ref(e)),
+  secondaryAccent: r.Optional(r.Ref(e)),
+  success: r.Optional(r.Ref(e)),
+  successBackground: r.Optional(r.Ref(e)),
+  successSubdued: r.Optional(r.Ref(e)),
+  successAccent: r.Optional(r.Ref(e)),
+  warning: r.Optional(r.Ref(e)),
+  warningBackground: r.Optional(r.Ref(e)),
+  warningSubdued: r.Optional(r.Ref(e)),
+  warningAccent: r.Optional(r.Ref(e)),
+  danger: r.Optional(r.Ref(e)),
+  dangerBackground: r.Optional(r.Ref(e)),
+  dangerSubdued: r.Optional(r.Ref(e)),
+  dangerAccent: r.Optional(r.Ref(e)),
   //////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Base fonts
-  fontFamilyDisplay: e.Ref(d),
-  fontFamilySansSerif: e.Ref(d),
-  fontFamilySerif: e.Ref(d),
-  fontFamilyMonospace: e.Ref(d),
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////
-  // Base border styles
-  borderRadius: e.Union([e.Ref(F), e.Ref(A)]),
-  borderWidth: e.Ref(g),
+  fonts: r.Optional(
+    r.Object({
+      display: r.Optional(
+        r.Object({
+          fontFamily: r.Optional(r.Ref(u)),
+          fontWeight: r.Optional(r.Ref(F))
+        })
+      ),
+      sans: r.Optional(
+        r.Object({
+          fontFamily: r.Optional(r.Ref(u)),
+          fontWeight: r.Optional(r.Ref(F))
+        })
+      ),
+      serif: r.Optional(
+        r.Object({
+          fontFamily: r.Optional(r.Ref(u)),
+          fontWeight: r.Optional(r.Ref(F))
+        })
+      ),
+      monospace: r.Optional(
+        r.Object({
+          fontFamily: r.Optional(r.Ref(u)),
+          fontWeight: r.Optional(r.Ref(F))
+        })
+      )
+    })
+  ),
   //////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Scopes
-  navigation: e.Object({
-    background: e.Ref(r),
-    borderWidth: e.Ref(g),
-    borderColor: e.Ref(r),
-    project: e.Object({
-      background: e.Ref(r),
-      foreground: e.Ref(r),
-      fontFamily: e.Ref(d),
-      borderWidth: e.Ref(g),
-      borderColor: e.Ref(r)
-    }),
-    modules: e.Object({
-      background: e.Ref(r),
-      borderWidth: e.Ref(g),
-      borderColor: e.Ref(r),
-      button: e.Object({
-        foreground: e.Ref(r),
-        foregroundHover: e.Ref(r),
-        foregroundActive: e.Ref(r),
-        background: e.Ref(r),
-        backgroundHover: e.Ref(r),
-        backgroundActive: e.Ref(r)
-      })
-    }),
-    list: e.Object({
-      icon: e.Object({
-        foreground: e.Ref(r),
-        foregroundHover: e.Ref(r),
-        foregroundActive: e.Ref(r)
-      }),
-      foreground: e.Ref(r),
-      foregroundHover: e.Ref(r),
-      foregroundActive: e.Ref(r),
-      background: e.Ref(r),
-      backgroundHover: e.Ref(r),
-      backgroundActive: e.Ref(r),
-      fontFamily: e.Ref(d),
-      divider: e.Object({
-        borderColor: e.Ref(r),
-        borderWidth: e.Ref(g)
-      })
+  navigation: r.Optional(
+    r.Object({
+      background: r.Optional(r.Ref(e)),
+      backgroundAccent: r.Optional(r.Ref(e)),
+      borderWidth: r.Optional(r.Ref(b)),
+      borderColor: r.Optional(r.Ref(e)),
+      project: r.Optional(
+        r.Object({
+          background: r.Optional(r.Ref(e)),
+          foreground: r.Optional(r.Ref(e)),
+          fontFamily: r.Optional(r.Ref(u)),
+          borderWidth: r.Optional(r.Ref(b)),
+          borderColor: r.Optional(r.Ref(e))
+        })
+      ),
+      modules: r.Optional(
+        r.Object({
+          background: r.Optional(r.Ref(e)),
+          borderWidth: r.Optional(r.Ref(b)),
+          borderColor: r.Optional(r.Ref(e)),
+          button: r.Optional(
+            r.Object({
+              foreground: r.Optional(r.Ref(e)),
+              foregroundHover: r.Optional(r.Ref(e)),
+              foregroundActive: r.Optional(r.Ref(e)),
+              background: r.Optional(r.Ref(e)),
+              backgroundHover: r.Optional(r.Ref(e)),
+              backgroundActive: r.Optional(r.Ref(e))
+            })
+          )
+        })
+      ),
+      list: r.Optional(
+        r.Object({
+          icon: r.Optional(
+            r.Object({
+              foreground: r.Optional(r.Ref(e)),
+              foregroundHover: r.Optional(r.Ref(e)),
+              foregroundActive: r.Optional(r.Ref(e))
+            })
+          ),
+          foreground: r.Optional(r.Ref(e)),
+          foregroundHover: r.Optional(r.Ref(e)),
+          foregroundActive: r.Optional(r.Ref(e)),
+          background: r.Optional(r.Ref(e)),
+          backgroundHover: r.Optional(r.Ref(e)),
+          backgroundActive: r.Optional(r.Ref(e)),
+          fontFamily: r.Optional(r.Ref(u)),
+          divider: r.Object({
+            borderColor: r.Optional(r.Ref(e)),
+            borderWidth: r.Optional(r.Ref(b))
+          })
+        })
+      )
     })
-  }),
-  header: e.Object({
-    background: e.Ref(r),
-    borderWidth: e.Ref(g),
-    borderColor: e.Ref(r),
-    boxShadow: e.Ref(y),
-    headline: e.Object({
-      foreground: e.Ref(r),
-      fontFamily: e.Ref(d)
-    }),
-    title: e.Object({
-      foreground: e.Ref(r),
-      fontFamily: e.Ref(d)
+  ),
+  header: r.Optional(
+    r.Object({
+      background: r.Optional(r.Ref(e)),
+      borderWidth: r.Optional(r.Ref(b)),
+      borderColor: r.Optional(r.Ref(e)),
+      boxShadow: r.Optional(r.Ref(y)),
+      headline: r.Optional(
+        r.Object({
+          foreground: r.Optional(r.Ref(e)),
+          fontFamily: r.Optional(r.Ref(u))
+        })
+      ),
+      title: r.Optional(
+        r.Object({
+          foreground: r.Optional(r.Ref(e)),
+          fontFamily: r.Optional(r.Ref(u)),
+          fontWeight: r.Optional(r.Ref(F))
+        })
+      )
     })
-  }),
-  form: e.Object({
-    field: e.Object({
-      label: e.Object({
-        foreground: e.Ref(r),
-        fontFamily: e.Ref(d)
-      }),
-      input: e.Object({
-        background: e.Ref(r),
-        foreground: e.Ref(r),
-        foregroundSubdued: e.Ref(r),
-        borderColor: e.Ref(r),
-        borderColorHover: e.Ref(r),
-        borderColorFocus: e.Ref(r),
-        boxShadow: e.Ref(y),
-        boxShadowHover: e.Ref(y),
-        boxShadowFocus: e.Ref(y)
-      })
+  ),
+  form: S,
+  sidebar: r.Optional(
+    r.Object({
+      background: r.Optional(r.Ref(e)),
+      foreground: r.Optional(r.Ref(e)),
+      fontFamily: r.Optional(r.Ref(u)),
+      borderWidth: r.Optional(r.Ref(b)),
+      borderColor: r.Optional(r.Ref(e)),
+      section: r.Optional(
+        r.Object({
+          toggle: r.Optional(
+            r.Object({
+              icon: r.Optional(
+                r.Object({
+                  foreground: r.Optional(r.Ref(e)),
+                  foregroundHover: r.Optional(r.Ref(e)),
+                  foregroundActive: r.Optional(r.Ref(e))
+                })
+              ),
+              foreground: r.Optional(r.Ref(e)),
+              foregroundHover: r.Optional(r.Ref(e)),
+              foregroundActive: r.Optional(r.Ref(e)),
+              background: r.Optional(r.Ref(e)),
+              backgroundHover: r.Optional(r.Ref(e)),
+              backgroundActive: r.Optional(r.Ref(e)),
+              fontFamily: r.Optional(r.Ref(u)),
+              borderWidth: r.Optional(r.Ref(b)),
+              borderColor: r.Optional(r.Ref(e))
+            })
+          ),
+          form: S
+        })
+      )
     })
-  }),
-  sidebar: e.Object({
-    background: e.Ref(r),
-    foreground: e.Ref(r),
-    fontFamily: e.Ref(d),
-    borderWidth: e.Ref(g),
-    borderColor: e.Ref(r),
-    section: e.Object({
-      toggle: e.Object({
-        icon: e.Object({
-          foreground: e.Ref(r),
-          foregroundHover: e.Ref(r),
-          foregroundActive: e.Ref(r)
-        }),
-        foreground: e.Ref(r),
-        foregroundHover: e.Ref(r),
-        foregroundActive: e.Ref(r),
-        background: e.Ref(r),
-        backgroundHover: e.Ref(r),
-        backgroundActive: e.Ref(r),
-        fontFamily: e.Ref(d),
-        borderWidth: e.Ref(g),
-        borderColor: e.Ref(r)
-      })
+  ),
+  public: r.Optional(
+    r.Object({
+      background: r.Optional(r.Ref(e)),
+      foreground: r.Optional(r.Ref(e)),
+      foregroundAccent: r.Optional(r.Ref(e)),
+      art: r.Optional(
+        r.Object({
+          background: r.Optional(r.Ref(e)),
+          primary: r.Optional(r.Ref(e)),
+          secondary: r.Optional(r.Ref(e)),
+          speed: r.Optional(r.Ref(j))
+        })
+      ),
+      form: S
     })
-  })
-}), V = e.Object({
-  name: e.String(),
-  appearance: e.Union([e.Literal("light"), e.Literal("dark")]),
-  rules: U
-}), oe = {
+  ),
+  popover: r.Optional(
+    r.Object({
+      menu: r.Optional(
+        r.Object({
+          background: r.Optional(r.Ref(e)),
+          borderRadius: r.Optional(r.Optional(r.Union([r.Ref(k), r.Ref(O)]))),
+          boxShadow: r.Optional(r.Ref(y))
+        })
+      )
+    })
+  )
+}), Q = r.Object({
+  name: r.String(),
+  appearance: r.Union([r.Literal("light"), r.Literal("dark")]),
+  rules: K
+}), lr = {
   $defs: {
-    Color: r,
-    FamilyName: d,
-    Length: F,
-    Percentage: A,
-    LineWidth: g,
-    BoxShadow: y
+    Color: e,
+    FamilyName: u,
+    Length: k,
+    Percentage: O,
+    LineWidth: b,
+    BoxShadow: y,
+    Size: H,
+    Number: j
   }
-}, x = {
-  name: "Dark (Directus)",
+}, q = (d) => {
+  const s = v(() => {
+    const o = /* @__PURE__ */ new Map(), c = (m, a = []) => {
+      for (const [t, n] of Object.entries(m))
+        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 })));
+    };
+    return c(Q.properties.rules.properties), o;
+  }), f = v(() => {
+    const o = /* @__PURE__ */ new Map();
+    for (const [c, { family: m, weight: a }] of s.value.entries()) {
+      let t = null, n = null;
+      if (m && (t = W(i(d).rules, [...c, m])), a && (n = W(i(d).rules, [...c, a])), t) {
+        const h = t.split(",");
+        for (const l of h) {
+          const g = l.trim();
+          if (g.startsWith("var(--")) {
+            h.push(z(g.slice(6, -1)));
+            continue;
+          }
+          if ((g.startsWith('"') && g.endsWith('"')) === !1)
+            continue;
+          const x = g.slice(1, -1);
+          o.has(x) ? o.get(x).add(n ?? "400") : o.set(x, /* @__PURE__ */ new Set([n ?? "400"]));
+        }
+      }
+    }
+    return o;
+  });
+  return { googleFonts: v(() => {
+    const o = [];
+    for (const [c, m] of f.value.entries())
+      if (["Inter", "Merriweather", "Fira Mono"].includes(c) === !1) {
+        const t = Array.from(m).join(";");
+        o.push(`${c.replace(" ", "+")}:wght@${t}`);
+      }
+    return o;
+  }) };
+}, R = (d) => d, A = R({
+  name: "Directus Default",
   appearance: "dark",
   rules: {
+    borderRadius: "6px",
+    borderWidth: "2px",
     foreground: "#c9d1d9",
     foregroundAccent: "#f0f6fc",
     foregroundSubdued: "#666672",
     background: "#0d1117",
+    backgroundNormal: "#21262e",
+    backgroundAccent: "#30363d",
+    backgroundSubdued: "#161b22",
+    borderColor: "#21262e",
+    borderColorAccent: "#30363d",
+    borderColorSubdued: "#21262d",
     primary: "var(--project-color)",
     primaryBackground: "color-mix(in srgb, var(--theme--background), var(--theme--primary) 10%)",
     primarySubdued: "color-mix(in srgb, var(--theme--background), var(--theme--primary) 50%)",
@@ -188,14 +336,27 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
     dangerBackground: "color-mix(in srgb, var(--theme--background), var(--theme--danger) 10%)",
     dangerSubdued: "color-mix(in srgb, var(--theme--background), var(--theme--danger) 50%)",
     dangerAccent: "color-mix(in srgb, var(--theme--danger), #16151a 25%)",
-    fontFamilyDisplay: "var(--theme--font-family-sans-serif)",
-    fontFamilySansSerif: '"Inter", system-ui',
-    fontFamilySerif: '"Merriweather", serif',
-    fontFamilyMonospace: '"Fira Mono", monospace',
-    borderRadius: "6px",
-    borderWidth: "2px",
+    fonts: {
+      display: {
+        fontFamily: '"Inter", system-ui',
+        fontWeight: "700"
+      },
+      sans: {
+        fontFamily: '"Inter", system-ui',
+        fontWeight: "500"
+      },
+      serif: {
+        fontFamily: '"Merriweather", serif',
+        fontWeight: "500"
+      },
+      monospace: {
+        fontFamily: '"Fira Mono", monospace',
+        fontWeight: "500"
+      }
+    },
     navigation: {
       background: "#21262e",
+      backgroundAccent: "#30363d",
       borderColor: "transparent",
       borderWidth: "0px",
       project: {
@@ -203,7 +364,7 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
         borderWidth: "0px",
         background: "#30363d",
         foreground: "var(--theme--foreground-accent)",
-        fontFamily: "var(--theme--font-family-sans-serif)"
+        fontFamily: "var(--theme--fonts--sans--font-family)"
       },
       modules: {
         background: "var(--theme--background)",
@@ -230,7 +391,7 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
         background: "transparent",
         backgroundHover: "#30363d",
         backgroundActive: "#30363d",
-        fontFamily: "var(--theme--font-family-sans-serif)",
+        fontFamily: "var(--theme--fonts--sans--font-family)",
         divider: {
           borderColor: "#30363d",
           borderWidth: "var(--theme--border-width)"
@@ -244,21 +405,26 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
       boxShadow: "0 4px 7px -4px rgb(var(--black) / 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)",
-        fontFamily: "var(--theme--font-family-display)"
+        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--font-family-sans-serif)"
+          fontFamily: "var(--theme--fonts--sans--font-family)",
+          fontWeight: "600"
         },
         input: {
           background: "var(--theme--background)",
+          backgroundSubdued: "var(--theme--background-subdued)",
           foreground: "var(--theme--foreground)",
           foregroundSubdued: "var(--theme--foreground-subdued)",
           borderColor: "#21262e",
@@ -266,14 +432,16 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
           borderColorFocus: "var(--theme--primary)",
           boxShadow: "none",
           boxShadowHover: "none",
-          boxShadowFocus: "0 0 16px -8px var(--theme--primary)"
+          boxShadowFocus: "0 0 16px -8px var(--theme--primary)",
+          height: "60px",
+          padding: "16px"
         }
       }
     },
     sidebar: {
       background: "#21262e",
       foreground: "var(--theme--foreground-subdued)",
-      fontFamily: "var(--theme--font-family-sans-serif)",
+      fontFamily: "var(--theme--fonts--sans--font-family)",
       borderColor: "transparent",
       borderWidth: "0px",
       section: {
@@ -289,21 +457,177 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
           background: "#30363d",
           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"
+        },
+        form: {
+          columnGap: "var(--theme--form--column-gap)",
+          rowGap: "var(--theme--form--row-gap)",
+          label: {
+            foreground: "var(--theme--form--field--label--foreground)",
+            fontFamily: "var(--theme--form--field--label--font-family)"
+          },
+          field: {
+            input: {
+              background: "var(--theme--form--field--input--background)",
+              foreground: "var(--theme--form--field--input--foreground)",
+              foregroundSubdued: "var(--theme--form--field--input--foreground-subdued)",
+              borderColor: "var(--theme--form--field--input--border-color)",
+              borderColorHover: "var(--theme--form--field--input--border-color-hover)",
+              borderColorFocus: "var(--theme--form--field--input--border-color-focus)",
+              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",
+              padding: "12px"
+            }
+          }
+        }
+      }
+    },
+    public: {
+      background: "var(--theme--background)",
+      foreground: "var(--theme--foreground)",
+      foregroundAccent: "var(--theme--foreground-accent)",
+      art: {
+        background: "#0e1c2f",
+        primary: "var(--theme--primary)",
+        secondary: "var(--theme--secondary)",
+        speed: "1"
+      },
+      form: {
+        columnGap: "var(--theme--form--column-gap)",
+        rowGap: "var(--theme--form--row-gap)",
+        field: {
+          label: {
+            foreground: "var(--theme--form--field--label--foreground)",
+            fontFamily: "var(--theme--form--field--label--font-family)"
+          },
+          input: {
+            background: "var(--theme--form--field--input--background)",
+            foreground: "var(--theme--form--field--input--foreground)",
+            foregroundSubdued: "var(--theme--form--field--input--foreground-subdued)",
+            borderColor: "var(--theme--form--field--input--border-color)",
+            borderColorHover: "var(--theme--form--field--input--border-color-hover)",
+            borderColorFocus: "var(--theme--form--field--input--border-color-focus)",
+            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)",
+            padding: "var(--theme--form--field--input--padding)"
+          }
         }
       }
+    },
+    popover: {
+      menu: {
+        background: "#161b22",
+        borderRadius: "var(--theme--border-radius)",
+        boxShadow: "0px 0px 6px 0px rgb(0, 0, 0, 0.2)"
+      }
     }
   }
-}, S = {
-  name: "Light (Directus)",
+}), J = R({
+  name: "Directus Color Match",
   appearance: "light",
   rules: {
+    background: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 7%)",
+    backgroundAccent: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 20%)",
+    backgroundNormal: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 15%)",
+    backgroundSubdued: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 10%)",
+    borderColor: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 20%)",
+    borderColorAccent: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 40%)",
+    borderColorSubdued: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 15%)",
+    borderRadius: "12px",
+    borderWidth: "1px",
+    foreground: "color-mix(in srgb, #000000, var(--theme--primary) 70%)",
+    foregroundAccent: "color-mix(in srgb, #000000, var(--theme--primary) 50%)",
+    foregroundSubdued: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 60%)",
+    fonts: {
+      display: {
+        fontFamily: '"Montserrat", system-ui',
+        fontWeight: "400"
+      }
+    },
+    form: {
+      field: {
+        input: { background: "#FFFFFF", backgroundSubdued: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 13%)" }
+      }
+    },
+    navigation: {
+      background: "#FFFFFF",
+      backgroundAccent: "var(--theme--background)",
+      borderWidth: "var(--theme--border-width)",
+      borderColor: "var(--theme--border-color-subdued)",
+      modules: {
+        background: "color-mix(in srgb, #000000, var(--theme--primary) 90%)",
+        button: {
+          backgroundActive: "#FFFFFF",
+          foreground: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 20%)",
+          foregroundActive: "var(--theme--primary)"
+        }
+      },
+      project: { borderWidth: "1px", background: "#FFFFFF", borderColor: "var(--theme--border-color-subdued)" },
+      list: {
+        divider: { borderColor: "var(--theme--border-color-subdued)" },
+        icon: { foreground: "var(--theme--foreground)" },
+        foreground: "var(--theme--foreground)",
+        foregroundHover: "var(--theme--foreground)",
+        foregroundActive: "var(--theme--foreground)"
+      }
+    },
+    header: {
+      background: "#FFFFFF",
+      borderWidth: "1px",
+      borderColor: "var(--theme--border-color-subdued)",
+      boxShadow: "0 4px 7px -4px rgba(0,102,102, 0.2)"
+    },
+    sidebar: {
+      background: "#FFFFFF",
+      borderWidth: "1px",
+      borderColor: "var(--theme--border-color-subdued)",
+      section: {
+        toggle: {
+          borderColor: "var(--theme--border-color-subdued)",
+          borderWidth: "1px",
+          background: "#FFFFFF",
+          foreground: "var(--theme--foreground)",
+          foregroundHover: "var(--theme--foreground)",
+          foregroundActive: "var(--theme--foreground-accent)",
+          icon: {
+            foreground: "var(--theme--foreground)",
+            foregroundHover: "var(--theme--foreground)",
+            foregroundActive: "var(--theme--foreground-accent)"
+          }
+        }
+      }
+    },
+    public: {
+      art: {
+        background: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 10%)",
+        primary: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 60%)",
+        secondary: "color-mix(in srgb, #FFFFFF, var(--theme--secondary) 70%)"
+      },
+      background: "#FFFFFF"
+    }
+  }
+}), C = R({
+  name: "Directus Default",
+  appearance: "light",
+  rules: {
+    borderRadius: "6px",
+    borderWidth: "2px",
     foreground: "#4f5464",
     foregroundAccent: "#172940",
     foregroundSubdued: "#a2b5cd",
     background: "#fff",
+    backgroundNormal: "#f0f4f9",
+    backgroundAccent: "#e4eaf1",
+    backgroundSubdued: "#f7fafc",
+    borderColor: "#e4eaf1",
+    borderColorAccent: "#d3dae4",
+    borderColorSubdued: "#f0f4f9",
     primary: "var(--project-color)",
     primaryBackground: "color-mix(in srgb, var(--theme--background), var(--theme--primary) 10%)",
     primarySubdued: "color-mix(in srgb, var(--theme--background), var(--theme--primary) 50%)",
@@ -324,25 +648,38 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
     dangerBackground: "color-mix(in srgb, var(--theme--background), var(--theme--danger) 10%)",
     dangerSubdued: "color-mix(in srgb, var(--theme--background), var(--theme--danger) 50%)",
     dangerAccent: "color-mix(in srgb, var(--theme--danger), #2e3c43 25%)",
-    fontFamilyDisplay: "var(--theme--font-family-sans-serif)",
-    fontFamilySansSerif: '"Inter", system-ui',
-    fontFamilySerif: '"Merriweather", serif',
-    fontFamilyMonospace: '"Fira Mono", monospace',
-    borderRadius: "6px",
-    borderWidth: "2px",
+    fonts: {
+      display: {
+        fontFamily: '"Inter", system-ui',
+        fontWeight: "700"
+      },
+      sans: {
+        fontFamily: '"Inter", system-ui',
+        fontWeight: "500"
+      },
+      serif: {
+        fontFamily: '"Merriweather", serif',
+        fontWeight: "500"
+      },
+      monospace: {
+        fontFamily: '"Fira Mono", monospace',
+        fontWeight: "500"
+      }
+    },
     navigation: {
-      background: "#f0f4f9",
+      background: "var(--theme--background-normal)",
+      backgroundAccent: "var(--theme--background-accent)",
       borderColor: "transparent",
       borderWidth: "0px",
       project: {
         borderColor: "transparent",
         borderWidth: "0px",
-        background: "#e4eaf1",
+        background: "var(--theme--navigation--background-accent)",
         foreground: "var(--theme--foreground-accent)",
         fontFamily: "var(--theme--font-family-sans-serif)"
       },
       modules: {
-        background: "#18222f",
+        background: "#0e1c2f",
         borderColor: "transparent",
         borderWidth: "0px",
         button: {
@@ -351,7 +688,7 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
           foregroundActive: "var(--theme--foreground-accent)",
           background: "transparent",
           backgroundHover: "transparent",
-          backgroundActive: "#f0f4f9"
+          backgroundActive: "var(--theme--background-normal)"
         }
       },
       list: {
@@ -364,11 +701,11 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
         foregroundHover: "var(--theme--navigation--list--foreground)",
         foregroundActive: "var(--theme--navigation--list--foreground)",
         background: "transparent",
-        backgroundHover: "#e4eaf1",
-        backgroundActive: "#e4eaf1",
-        fontFamily: "var(--theme--font-family-sans-serif)",
+        backgroundHover: "var(--theme--navigation--background-accent)",
+        backgroundActive: "var(--theme--navigation--background-accent)",
+        fontFamily: "var(--theme--fonts--sans--font-family)",
         divider: {
-          borderColor: "#d3dae4",
+          borderColor: "var(--theme--border-color-accent)",
           borderWidth: "var(--theme--border-width)"
         }
       }
@@ -380,36 +717,43 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
       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)",
-        fontFamily: "var(--theme--font-family-display)"
+        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--font-family-sans-serif)"
+          fontFamily: "var(--theme--fonts--sans--font-family)",
+          fontWeight: "600"
         },
         input: {
           background: "var(--theme--background)",
+          backgroundSubdued: "var(--theme--background-subdued)",
           foreground: "var(--theme--foreground)",
           foregroundSubdued: "var(--theme--foreground-subdued)",
-          borderColor: "#e4eaf1",
-          borderColorHover: "#d3dae4",
+          borderColor: "var(--theme--border-color)",
+          borderColorHover: "var(--theme--border-color-accent)",
           borderColorFocus: "var(--theme--primary)",
           boxShadow: "none",
           boxShadowHover: "none",
-          boxShadowFocus: "0 0 16px -8px var(--theme--primary)"
+          boxShadowFocus: "0 0 16px -8px var(--theme--primary)",
+          height: "60px",
+          padding: "16px"
         }
       }
     },
     sidebar: {
-      background: "#f0f4f9",
+      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: {
@@ -422,92 +766,249 @@ const r = e.String({ $id: "Color" }), d = e.String({ $id: "FamilyName" }), F = e
           foreground: "var(--theme--foreground-accent)",
           foregroundHover: "var(--theme--sidebar--section--toggle--foreground)",
           foregroundActive: "var(--theme--sidebar--section--toggle--foreground)",
-          background: "#e4eaf1",
+          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"
+        },
+        form: {
+          columnGap: "var(--theme--form--column-gap)",
+          rowGap: "var(--theme--form--row-gap)",
+          label: {
+            foreground: "var(--theme--form--field--label--foreground)",
+            fontFamily: "var(--theme--form--field--label--font-family)"
+          },
+          field: {
+            input: {
+              background: "var(--theme--form--field--input--background)",
+              foreground: "var(--theme--form--field--input--foreground)",
+              foregroundSubdued: "var(--theme--form--field--input--foreground-subdued)",
+              borderColor: "var(--theme--form--field--input--border-color)",
+              borderColorHover: "var(--theme--form--field--input--border-color-hover)",
+              borderColorFocus: "var(--theme--form--field--input--border-color-focus)",
+              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",
+              padding: "12px"
+            }
+          }
+        }
+      }
+    },
+    public: {
+      background: "var(--theme--background)",
+      foreground: "var(--theme--foreground)",
+      foregroundAccent: "var(--theme--foreground-accent)",
+      art: {
+        background: "#0e1c2f",
+        primary: "var(--theme--primary)",
+        secondary: "var(--theme--secondary)",
+        speed: "1"
+      },
+      form: {
+        columnGap: "var(--theme--form--column-gap)",
+        rowGap: "var(--theme--form--row-gap)",
+        label: {
+          foreground: "var(--theme--form--field--label--foreground)",
+          fontFamily: "var(--theme--form--field--label--font-family)"
+        },
+        field: {
+          input: {
+            background: "var(--theme--form--field--input--background)",
+            foreground: "var(--theme--form--field--input--foreground)",
+            foregroundSubdued: "var(--theme--form--field--input--foreground-subdued)",
+            borderColor: "var(--theme--form--field--input--border-color)",
+            borderColorHover: "var(--theme--form--field--input--border-color-hover)",
+            borderColorFocus: "var(--theme--form--field--input--border-color-focus)",
+            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)",
+            padding: "var(--theme--form--field--input--padding)"
+          }
         }
       }
+    },
+    popover: {
+      menu: {
+        background: "#fafcfd",
+        borderRadius: "var(--theme--border-radius)",
+        boxShadow: "0px 0px 6px 0px rgb(23, 41, 64, 0.2), 0px 0px 12px 2px rgb(23, 41, 64, 0.05)"
+      }
     }
   }
-}, z = [S], E = [x], K = C("🎨 Themes", () => {
-  const t = H({
-    light: z,
-    dark: E
-  });
-  return { themes: t, registerTheme: (f) => {
-    f.appearance === "light" ? t.light.push(f) : t.dark.push(f);
+}), X = R({
+  name: "Directus Minimal",
+  appearance: "light",
+  rules: {
+    borderWidth: "1px",
+    backgroundPage: "color-mix(in srgb, #FFFFFF, var(--theme--primary) 7%)",
+    navigation: {
+      background: "#FFFFFF",
+      modules: {
+        background: "#FFFFFF",
+        button: {
+          backgroundActive: "#F1F5F9",
+          foreground: "var(--theme--foreground)",
+          foregroundHover: "var(--theme--primary)",
+          foregroundActive: "var(--theme--primary)",
+          backgroundHover: "#F1F5F9",
+          background: "#FFFFFF"
+        },
+        borderWidth: "1px",
+        borderColor: "var(--theme--border-color)"
+      },
+      project: {
+        borderWidth: "1px",
+        background: "#FFFFFF",
+        borderColor: "var(--theme--border-color)"
+      },
+      list: {
+        icon: {
+          foreground: "#0F172A"
+        },
+        divider: {
+          borderColor: "var(--theme--border-color)"
+        }
+      },
+      borderWidth: "1px",
+      backgroundAccent: "#F1F5F9",
+      borderColor: "var(--theme--border-color)"
+    },
+    header: {
+      background: "#FFFFFF",
+      borderWidth: "1px",
+      borderColor: "var(--theme--border-color)",
+      boxShadow: "0 4px 7px -4px rgba(0,102,102, 0.1)"
+    },
+    backgroundAccent: "#E2E8F0",
+    backgroundSubdued: "#F8FAFC",
+    background: "#FFFFFF",
+    foreground: "#1E293B",
+    foregroundAccent: "#0F172A",
+    foregroundSubdued: "#94A3B8",
+    borderRadius: "4px",
+    borderColor: "#E2E8F0",
+    borderColorAccent: "#CBD5E1",
+    borderColorSubdued: "#F1F5F9",
+    form: {
+      rowGap: "32px",
+      field: {
+        input: {
+          background: "#FFFFFF",
+          backgroundSubdued: "#F8FAFC",
+          boxShadowFocus: "none",
+          height: "52px"
+        }
+      }
+    },
+    sidebar: {
+      background: "#FFFFFF",
+      borderWidth: "1px",
+      borderColor: "var(--theme--border-color)",
+      section: {
+        toggle: {
+          borderColor: "var(--theme--border-color)",
+          borderWidth: "1px",
+          background: "#FFFFFF",
+          foreground: "var(--theme--foreground-subdued)",
+          foregroundHover: "var(--theme--foreground)",
+          foregroundActive: "var(--theme--foreground-accent)",
+          icon: {
+            foreground: "var(--theme--foreground)",
+            foregroundHover: "var(--theme--foreground)",
+            foregroundActive: "var(--theme--foreground-accent)"
+          }
+        },
+        form: {
+          field: {
+            input: {
+              height: "42px"
+            }
+          }
+        }
+      }
+    },
+    public: {
+      art: {
+        background: "color-mix(in srgb, #FFFFFF, var(--project-color) 10%)",
+        primary: "color-mix(in srgb, #FFFFFF, var(--project-color) 70%)",
+        secondary: "color-mix(in srgb, #FFFFFF, var(--project-color) 40%)"
+      },
+      background: "#FFFFFF"
+    },
+    backgroundNormal: "#F1F5F9",
+    secondary: "#64748B",
+    primary: "#0F172A",
+    primaryBackground: "#F1F5F9",
+    primarySubdued: "#F8FAFC",
+    primaryAccent: "#E2E8F0",
+    secondaryAccent: "#E2E8F0",
+    secondaryBackground: "#F1F5F9",
+    secondarySubdued: "#F8FAFC",
+    fonts: {
+      display: {
+        fontFamily: "system-ui"
+      }
+    }
+  }
+}), Y = [A], Z = [C, X, J], rr = _("🎨 Themes", () => {
+  const d = B({ light: Z, dark: Y });
+  return { themes: d, registerTheme: (f) => {
+    f.appearance === "light" ? d.light.push(f) : d.dark.push(f);
   } };
-}), q = (t, m, f, b, v) => {
-  const { themes: o } = j(K());
-  return { theme: h(() => {
-    const a = c(t) ? c(f) : c(m), n = c(t) ? x : S, u = c(t) ? c(v) : c(b), p = c(o)[t ? "dark" : "light"].find((s) => s.name === a);
-    return p ? u ? R({}, n, p, { rules: u }) : R(n, p) : (a && a !== n.name && console.warn(`Theme "${a}" doesn't exist.`), u ? R({}, n, { rules: u }) : n);
+}), er = (d, s, f, p, o) => {
+  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 ? 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);
   }) };
-}, G = (t) => {
-  const m = [], f = (o, i = []) => {
-    for (const [a, n] of Object.entries(o))
-      typeof n == "object" && n !== null && ("type" in n && n.type === "object" && "properties" in n && f(n.properties, [...i, a]), "$ref" in n && n.$ref === "FamilyName" && m.push([...i, a]));
-  };
-  f(V.properties.rules.properties);
-  const b = h(() => {
-    const o = [];
-    for (const a of m)
-      o.push(M(c(t).rules, a).trim());
-    const i = /* @__PURE__ */ new Set();
-    for (const a of o)
-      a.split(",").forEach((u) => i.add(u));
-    return Array.from(i);
-  }), v = h(() => b.value.filter((o) => {
-    if (o.startsWith('"') && o.endsWith('"') && o.includes("var(") === !1) {
-      const i = ["Inter", "Merriweather", "Fira Mono"];
-      return !(i.includes(o) || i.map((a) => `"${a}"`).includes(o));
-    }
-    return !1;
-  }).map((o) => (o.startsWith('"') && o.endsWith('"') && (o = o.slice(1, -1)), o.replace(" ", "+"))));
-  return { fonts: b, googleFonts: v };
-}, ne = /* @__PURE__ */ W({
+}, or = (d) => {
+  const s = V(d, { delimiter: "--" }), f = (p) => `--theme--${P(p, { separator: "-" })}`;
+  return U(s, (p, o) => f(o));
+}, gr = /* @__PURE__ */ $({
   __name: "theme-provider",
   props: {
     darkMode: { type: Boolean },
-    themeLight: { default: S.name },
+    themeLight: { default: C.name },
     themeLightOverrides: { default: () => ({}) },
-    themeDark: { default: x.name },
+    themeDark: { default: A.name },
     themeDarkOverrides: { default: () => ({}) }
   },
-  setup(t) {
-    const m = t, { darkMode: f, themeLight: b, themeDark: v, themeLightOverrides: o, themeDarkOverrides: i } = O(m), { theme: a } = q(f, b, v, o, i), n = h(() => {
-      const s = P(c(a).rules, { delimiter: "--" }), l = (k) => `--theme--${I(k, { separator: "-" })}`;
-      return _(s, (k, w) => l(w));
-    }), { googleFonts: u } = G(a);
-    N({
-      link: h(() => {
-        let s = "";
-        if (u.value.length > 0) {
-          const l = u.value.join("&family=");
-          s += `https://fonts.googleapis.com/css2?family=${l}`, s += `
+  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({
+      link: v(() => {
+        let l = "";
+        if (n.value.length > 0) {
+          const g = n.value.join("&family=");
+          l += `https://fonts.googleapis.com/css2?family=${g}`, l += `
 `;
         }
-        return s ? [
+        return l ? [
           {
             rel: "stylesheet",
-            href: s
+            href: l
           }
         ] : [];
       })
     });
-    const p = h(() => `:root {${Object.entries(c(n)).map(([l, k]) => `${l}: ${k};`).join(" ")}}`);
-    return (s, l) => (B(), $(L, { to: "#theme" }, [
-      T(D(p.value), 1)
+    const h = v(() => `:root {${Object.entries(i(t)).map(([g, x]) => `${g}: ${x};`).join(" ")}}`);
+    return (l, g) => (G(), T(L, { to: "#theme" }, [
+      N(M(h.value), 1)
     ]));
   }
 });
 export {
-  oe as Definitions,
-  ne as ThemeProvider,
-  V as ThemeSchema,
-  q as useTheme,
-  K as useThemeStore
+  lr as Definitions,
+  gr as ThemeProvider,
+  Q as ThemeSchema,
+  R as defineTheme,
+  or as rulesToCssVars,
+  q as useFonts,
+  er as useTheme,
+  rr as useThemeStore
 };