@directus/themes 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,132 +1,321 @@
+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 P from "decamelize";
+import { flatten as V } from "flat";
+import { cssVar as z } from "@directus/utils/browser";
 import { Type as r } from "@sinclair/typebox";
-import { defineStore as x, storeToRefs as j } from "pinia";
-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";
-import { useHead as M } from "@unhead/vue";
-import _ from "decamelize";
-import { flatten as C } from "flat";
-import { get as R, merge as p, mapKeys as I } from "lodash-es";
-const y = {
-  Color: "Color",
-  FontFamily: "FontFamily"
-}, e = r.Ref(r.String({ $id: y.Color })), c = r.Ref(r.String({ $id: y.FontFamily })), W = r.Object({
-  foreground: e,
-  foregroundSubdued: e,
-  foregroundAccent: e,
-  background: e,
-  primary: e,
-  primaryBackground: e,
-  primarySubdued: e,
-  primaryAccent: e,
-  secondary: e,
-  secondaryBackground: e,
-  secondarySubdued: e,
-  secondaryAccent: e,
-  success: e,
-  successBackground: e,
-  successSubdued: e,
-  successAccent: e,
-  warning: e,
-  warningBackground: e,
-  warningSubdued: e,
-  warningAccent: e,
-  danger: e,
-  dangerBackground: e,
-  dangerSubdued: e,
-  dangerAccent: e,
-  fontFamilyDisplay: c,
-  fontFamilySansSerif: c,
-  fontFamilySerif: c,
-  fontFamilyMonospace: c,
-  navigation: r.Object({
-    background: e,
-    project: r.Object({
-      background: e,
-      foreground: e,
-      fontFamily: c
-    }),
-    modules: r.Object({
-      background: e,
-      button: r.Object({
-        foreground: e,
-        foregroundHover: e,
-        foregroundActive: e,
-        background: e,
-        backgroundHover: e,
-        backgroundActive: e
+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(
+  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)]))
+          })
+        )
       })
-    }),
-    list: r.Object({
-      icon: r.Object({
-        foreground: e,
-        foregroundHover: e,
-        foregroundActive: e
-      }),
-      foreground: e,
-      foregroundHover: e,
-      foregroundActive: e,
-      background: e,
-      backgroundHover: e,
-      backgroundActive: e,
-      fontFamily: c
+    )
+  })
+), 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: 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
+  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))
+        })
+      )
     })
-  }),
-  header: r.Object({
-    background: e,
-    headline: r.Object({
-      foreground: e,
-      fontFamily: c
-    }),
-    title: r.Object({
-      foreground: e,
-      fontFamily: c
+  ),
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////
+  // Scopes
+  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))
+          })
+        })
+      )
     })
-  }),
-  form: r.Object({
-    field: r.Object({
-      label: r.Object({
-        foreground: e,
-        fontFamily: c
-      }),
-      input: r.Object({
-        background: e,
-        foreground: e,
-        foregroundSubdued: e
-      })
+  ),
+  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))
+        })
+      )
     })
-  }),
-  sidebar: r.Object({
-    background: e,
-    foreground: e,
-    fontFamily: c,
-    section: r.Object({
-      toggle: r.Object({
-        icon: r.Object({
-          foreground: e,
-          foregroundHover: e,
-          foregroundActive: e
-        }),
-        foreground: e,
-        foregroundHover: e,
-        foregroundActive: e,
-        background: e,
-        backgroundHover: e,
-        backgroundActive: e,
-        fontFamily: c
-      })
+  ),
+  form: w,
+  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: w
+        })
+      )
     })
-  })
-}), N = r.Object({
+  ),
+  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: w
+    })
+  ),
+  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: W
-}), Z = { $defs: { [y.Color]: e, [y.FontFamily]: c } }, F = {
-  name: "Dark (Directus)",
+  rules: K
+}), lr = {
+  $defs: {
+    Color: e,
+    FamilyName: u,
+    Length: k,
+    Percentage: O,
+    LineWidth: b,
+    BoxShadow: y,
+    Size: H,
+    Number: j
+  }
+}, 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%)",
@@ -147,19 +336,40 @@ const y = {
     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',
+    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: {
+        borderColor: "transparent",
+        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)",
+        borderColor: "transparent",
+        borderWidth: "0px",
         button: {
           foreground: "var(--theme--foreground-subdued)",
           foregroundHover: "#fff",
@@ -181,37 +391,54 @@ const y = {
         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)"
+        }
       }
     },
     header: {
       background: "var(--theme--background)",
+      borderColor: "transparent",
+      borderWidth: "0px",
+      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)"
       }
     },
     form: {
       field: {
         label: {
           foreground: "var(--theme--foreground-accent)",
-          fontFamily: "var(--theme--font-family-sans-serif)"
+          fontFamily: "var(--theme--fonts--sans--font-family)"
         },
         input: {
           background: "var(--theme--background)",
+          backgroundSubdued: "var(--theme--background-subdued)",
           foreground: "var(--theme--foreground)",
-          foregroundSubdued: "var(--theme--foreground-subdued)"
+          foregroundSubdued: "var(--theme--foreground-subdued)",
+          borderColor: "#21262e",
+          borderColorHover: "#30363d",
+          borderColorFocus: "var(--theme--primary)",
+          boxShadow: "none",
+          boxShadowHover: "none",
+          boxShadowFocus: "0 0 16px -8px var(--theme--primary)",
+          height: "60px"
         }
       }
     },
     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: {
         toggle: {
           icon: {
@@ -225,19 +452,175 @@ const y = {
           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"
+            }
+          }
+        }
+      }
+    },
+    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)"
+          }
+        }
+      }
+    },
+    popover: {
+      menu: {
+        background: "#161b22",
+        borderRadius: "var(--theme--border-radius)",
+        boxShadow: "0px 0px 6px 0px rgb(0, 0, 0, 0.2)"
+      }
+    }
+  }
+}), 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"
     }
   }
-}, A = {
-  name: "Light (Directus)",
+}), 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%)",
@@ -258,26 +641,47 @@ const y = {
     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',
+    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: {
-        background: "#e4eaf1",
+        borderColor: "transparent",
+        borderWidth: "0px",
+        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: {
           foreground: "#8196b1",
           foregroundHover: "#fff",
           foregroundActive: "var(--theme--foreground-accent)",
           background: "transparent",
           backgroundHover: "transparent",
-          backgroundActive: "#f0f4f9"
+          backgroundActive: "var(--theme--background-normal)"
         }
       },
       list: {
@@ -290,39 +694,61 @@ const y = {
         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--font-family-sans-serif)",
+        divider: {
+          borderColor: "var(--theme--border-color-accent)",
+          borderWidth: "var(--theme--border-width)"
+        }
       }
     },
     header: {
       background: "var(--theme--background)",
+      borderColor: "transparent",
+      borderWidth: "0px",
+      boxShadow: "0 4px 7px -4px rgb(0 0 0 / 0.2)",
       headline: {
         foreground: "var(--theme--foreground-subdued)",
         fontFamily: "var(--theme--font-family-sans-serif)"
       },
       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--font-family-sans-serif)",
+          fontWeight: "600"
         },
         input: {
           background: "var(--theme--background)",
+          backgroundSubdued: "var(--theme--background-subdued)",
           foreground: "var(--theme--foreground)",
-          foregroundSubdued: "var(--theme--foreground-subdued)"
+          foregroundSubdued: "var(--theme--foreground-subdued)",
+          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)",
+          height: "60px",
+          padding: "16px"
         }
       }
     },
     sidebar: {
-      background: "#f0f4f9",
+      background: "var(--theme--background-normal)",
       foreground: "var(--theme--foreground-subdued)",
       fontFamily: "var(--theme--font-family-sans-serif)",
+      borderColor: "transparent",
+      borderWidth: "0px",
       section: {
         toggle: {
           icon: {
@@ -333,91 +759,245 @@ const y = {
           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--font-family-sans-serif)",
+          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)"
+      }
     }
   }
-}, V = [A], z = [F], E = x("🎨 Themes", () => {
-  const t = H({
-    light: V,
-    dark: z
-  });
-  return { themes: t, registerTheme: (s) => {
-    s.appearance === "light" ? t.light.push(s) : t.dark.push(s);
+}), 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"
+            }
+          }
+        }
+      }
+    },
+    fontFamilyDisplay: "system-ui",
+    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"
+  }
+}), 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);
   } };
-}), K = (t) => {
-  const m = [], s = (o, i = []) => {
-    for (const [a, n] of Object.entries(o))
-      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]));
-  };
-  s(N.properties.rules.properties);
-  const f = v(() => {
-    const o = [];
-    for (const a of m)
-      o.push(R(d(t).rules, a).trim());
-    const i = /* @__PURE__ */ new Set();
-    for (const a of o)
-      a.split(",").forEach((g) => i.add(g));
-    return Array.from(i);
-  }), b = v(() => f.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: f, googleFonts: b };
-}, P = (t, m, s, f, b) => {
-  const { themes: o } = j(E());
+}), er = (d, s, f, p, o) => {
+  const { themes: c } = I(rr());
   return { theme: v(() => {
-    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);
-    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);
+    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);
   }) };
-}, ee = /* @__PURE__ */ O({
+}, 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: A.name },
+    themeLight: { default: C.name },
     themeLightOverrides: { default: () => ({}) },
-    themeDark: { default: F.name },
+    themeDark: { default: A.name },
     themeDarkOverrides: { default: () => ({}) }
   },
-  setup(t) {
-    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(() => {
-      const u = C(d(a).rules, { delimiter: "--" }), l = (k) => `--theme--${_(k, { separator: "-" })}`;
-      return I(u, (k, S) => l(S));
-    }), { googleFonts: g } = K(a);
-    M({
+  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 u = "";
-        if (g.value.length > 0) {
-          const l = g.value.join("&family=");
-          u += `https://fonts.googleapis.com/css2?family=${l}`, u += `
+        let l = "";
+        if (n.value.length > 0) {
+          const g = n.value.join("&family=");
+          l += `https://fonts.googleapis.com/css2?family=${g}`, l += `
 `;
         }
-        return u ? [
+        return l ? [
           {
             rel: "stylesheet",
-            href: u
+            href: l
           }
         ] : [];
       })
     });
-    const h = v(() => `:root {${Object.entries(d(n)).map(([l, k]) => `${l}: ${k};`).join(" ")}}`);
-    return (u, l) => (B(), T($, { to: "#theme" }, [
-      D(L(h.value), 1)
+    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)
     ]));
   }
 });
 export {
-  Z as Definitions,
-  ee as ThemeProvider,
-  N as ThemeSchema,
-  y as TypeId,
-  P as useTheme,
-  E 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
 };