@witchcraft/ui 0.3.9 → 0.4.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/LibNotifications/LibNotification.vue

@@ -167,7 +167,9 @@ const props = defineProps({
   notification: { type: null, required: true },
   handler: { type: Object, required: false, default: void 0 }
 });
-const getColor = (notification, option) => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary";
+const getColor = (notification, option) => {
+  return notification.dangerous.includes(option) ? "danger" : notification.default === option ? "primary" : "secondary";
+};
 const buttonColors = computed(() => props.notification.options.map((option) => getColor(props.notification, option)));
 const notificationEl = ref(null);
 onMounted(() => {

package/dist/runtime/utils/doInvertTextColor.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns whether the text should be inverted (to white) based on the given color.
+ */
+export declare function doInvertTextColor(color: string): boolean;

package/dist/runtime/utils/doInvertTextColor.js

@@ -0,0 +1,8 @@
+import Color from "colorjs.io";
+export function doInvertTextColor(color) {
+  const c = new Color(color).to("hsv");
+  const v = c.hsv[2];
+  const a = c.alpha;
+  const doInvert = !!(v < 50 || (a === void 0 || a < 0.5));
+  return doInvert;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",

package/src/module.ts

@@ -21,7 +21,6 @@ import { unpluginIconViteOptions } from "./runtime/build/unpluginIconViteOptions
 import { themeConvertionOpts } from "./runtime/tailwind/themeConvertionOpts.js"
 import { theme } from "./runtime/theme.js"
 
-import pkg from "../package.json" assert { type: "json" }
 
 const knownDirectives = ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"] as const
 

package/src/runtime/components/LibNotifications/LibNotification.vue

@@ -171,7 +171,13 @@ const props = withDefaults(defineProps<Props>(), {
 	handler: undefined
 })
 
-const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary"
+const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => {
+	return notification.dangerous.includes(option)
+		? "danger"
+		: notification.default === option
+			? "primary"
+			: "secondary"
+}
 
 /* Todo make this more flexible? */
 

package/src/runtime/utils/doInvertTextColor.ts

@@ -0,0 +1,11 @@
+import Color from "colorjs.io"
+/**
+ * Returns whether the text should be inverted (to white) based on the given color.
+ */
+export function doInvertTextColor(color: string) {
+	const c = new Color(color).to("hsv")
+	const v = c.hsv[2]
+	const a = c.alpha
+	const doInvert = !!(v! < 50 || (a === undefined || a < 0.5))
+	return doInvert
+}