@directus/themes 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,106 @@
+import * as _sinclair_typebox from '@sinclair/typebox';
+import { Static } from '@sinclair/typebox';
+import * as pinia from 'pinia';
+import * as vue from 'vue';
+
+/** CSS size, f.e. px, em, % */
+/** CSS font weight, f.e. 700, bold */
+/** CSS font family, f.e. 'Comic Sans, MS', 'Roboto' */
+declare const ThemeSchema: _sinclair_typebox.TObject<{
+    name: _sinclair_typebox.TString;
+    appearance: _sinclair_typebox.TUnion<[_sinclair_typebox.TLiteral<"light">, _sinclair_typebox.TLiteral<"dark">]>;
+    rules: _sinclair_typebox.TObject<{
+        foreground: _sinclair_typebox.TString;
+    }>;
+}>;
+type Theme = Static<typeof ThemeSchema>;
+
+declare const defineTheme: (theme: Theme) => {
+    name: string;
+    appearance: "light" | "dark";
+    rules: {
+        foreground: string;
+    };
+};
+
+declare const useThemeStore: pinia.StoreDefinition<"themes", pinia._UnwrapAll<Pick<{
+    themes: {
+        dark: {
+            name: string;
+            appearance: "light" | "dark";
+            rules: {
+                foreground: string;
+            };
+        }[];
+        light: {
+            name: string;
+            appearance: "light" | "dark";
+            rules: {
+                foreground: string;
+            };
+        }[];
+    };
+    registerTheme: (theme: Theme) => void;
+    currentTheme: {
+        dark: string;
+        light: string;
+    };
+    currentAppearance: vue.Ref<"light" | "dark">;
+    rules: vue.ComputedRef<{
+        foreground: string;
+    }>;
+}, "themes" | "currentTheme" | "currentAppearance">>, Pick<{
+    themes: {
+        dark: {
+            name: string;
+            appearance: "light" | "dark";
+            rules: {
+                foreground: string;
+            };
+        }[];
+        light: {
+            name: string;
+            appearance: "light" | "dark";
+            rules: {
+                foreground: string;
+            };
+        }[];
+    };
+    registerTheme: (theme: Theme) => void;
+    currentTheme: {
+        dark: string;
+        light: string;
+    };
+    currentAppearance: vue.Ref<"light" | "dark">;
+    rules: vue.ComputedRef<{
+        foreground: string;
+    }>;
+}, "rules">, Pick<{
+    themes: {
+        dark: {
+            name: string;
+            appearance: "light" | "dark";
+            rules: {
+                foreground: string;
+            };
+        }[];
+        light: {
+            name: string;
+            appearance: "light" | "dark";
+            rules: {
+                foreground: string;
+            };
+        }[];
+    };
+    registerTheme: (theme: Theme) => void;
+    currentTheme: {
+        dark: string;
+        light: string;
+    };
+    currentAppearance: vue.Ref<"light" | "dark">;
+    rules: vue.ComputedRef<{
+        foreground: string;
+    }>;
+}, "registerTheme">>;
+
+export { Theme, ThemeSchema, defineTheme, useThemeStore };

package/dist/index.js

@@ -0,0 +1,72 @@
+// src/define-theme.ts
+var defineTheme = (theme) => theme;
+
+// src/schema.ts
+import { Type } from "@sinclair/typebox";
+var Color = Type.String();
+var ThemeSchema = Type.Object({
+  name: Type.String(),
+  appearance: Type.Union([Type.Literal("light"), Type.Literal("dark")]),
+  rules: Type.Object({
+    foreground: Color
+  })
+});
+
+// src/store.ts
+import { defu } from "defu";
+import { defineStore } from "pinia";
+import { computed, reactive, ref, unref } from "vue";
+
+// src/themes/dark/default.ts
+var default_default = defineTheme({
+  name: "Directus Default (Dark)",
+  appearance: "dark",
+  rules: {
+    foreground: "#fff"
+  }
+});
+
+// src/themes/light/default.ts
+var default_default2 = defineTheme({
+  name: "Directus Default (Light)",
+  appearance: "light",
+  rules: {
+    foreground: "#000"
+  }
+});
+
+// src/store.ts
+var useThemeStore = defineStore("themes", () => {
+  const currentAppearance = ref("light");
+  const currentTheme = reactive({
+    dark: default_default.name,
+    light: default_default2.name
+  });
+  const themes = reactive({
+    dark: [default_default],
+    light: [default_default2]
+  });
+  const registerTheme = (theme) => {
+    if (theme.appearance === "dark") {
+      themes.dark.push(theme);
+    } else {
+      themes.light.push(theme);
+    }
+  };
+  const defaultTheme = computed(() => {
+    if (unref(currentAppearance) === "dark")
+      return default_default;
+    return default_default2;
+  });
+  const rules = computed(() => {
+    const appearance = unref(currentAppearance);
+    const theme = themes[appearance].find(({ name }) => name === currentTheme[unref(currentAppearance)]);
+    return defu(theme?.rules, unref(defaultTheme).rules);
+  });
+  return { themes, registerTheme, currentTheme, currentAppearance, rules };
+});
+export {
+  ThemeSchema,
+  defineTheme,
+  useThemeStore
+};

package/license

@@ -0,0 +1,16 @@
+MIT License
+
+Copyright 2023 Monospace, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the “Software”), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@directus/themes",
+  "version": "0.0.1",
+  "description": "Themes for Directus",
+  "homepage": "https://directus.io",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/directus/directus.git",
+    "directory": "packages/themes"
+  },
+  "funding": "https://github.com/directus/directus?sponsor=1",
+  "license": "MIT",
+  "author": "Rijk van Zanten <rijkvanzanten@me.com>",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@vitest/coverage-c8": "0.31.1",
+    "tsup": "6.7.0",
+    "typescript": "5.0.4",
+    "vitest": "0.31.1",
+    "@directus/tsconfig": "0.0.7"
+  },
+  "dependencies": {
+    "@sinclair/typebox": "0.28.13",
+    "defu": "6.1.2",
+    "pinia": "2.1.1",
+    "vue": "3.3.4"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm --dts",
+    "dev": "tsup src/index.ts --format=esm --dts --watch",
+    "test": "vitest --watch=false"
+  }
+}

package/readme.md

@@ -0,0 +1,4 @@
+# `@directus/themes`
+
+> **Warning**\
+> This is a work-in-progress. Not intended for production use!