@luminescent/ui-qwik 1.0.5 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui-qwik",
-  "version": "1.0.5",
+  "version": "1.1.1",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -16,7 +16,7 @@
   "files": [
     "lib",
     "lib-types",
-    "src/tailwind"
+    "src/tailwind.config.js"
   ],
   "engines": {
     "node": ">=15.0.0"
@@ -34,7 +34,6 @@
     "dev": "vite --mode ssr",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "lint": "eslint \"src/**/*.ts*\"",
-    "release": "np",
     "start": "vite --open --mode ssr",
     "test": "echo \"No test specified\" && exit 0",
     "qwik": "qwik"
@@ -51,7 +50,6 @@
     "chart.js": "^4.4.3",
     "eslint": "^8.57.0",
     "eslint-plugin-qwik": "latest",
-    "np": "^10.0.6",
     "postcss": "^8.4.38",
     "tailwindcss": "3.4.4",
     "typescript": "5.5.2",

package/src/tailwind.config.js

@@ -0,0 +1,86 @@
+function getBlobKeyFrame() {
+  const translateXPercentages = [0, 19, 38, 57, 76];
+  const translateYPercentages = [0, 12, 25, 38, 50];
+  const scaleValues = [0.8, 1, 1.2, 1.4];
+
+  const translateX0Key = Math.floor(Math.random() * translateXPercentages.length);
+  const translateX0 = translateXPercentages[translateX0Key];
+  translateXPercentages.splice(translateX0Key, 1);
+  const translateX1Key = Math.floor(Math.random() * translateXPercentages.length);
+  const translateX1 = translateXPercentages[translateX1Key];
+  translateXPercentages.splice(translateX1Key, 1);
+  const translateX2Key = Math.floor(Math.random() * translateXPercentages.length);
+  const translateX2 = translateXPercentages[translateX2Key];
+  translateXPercentages.splice(translateX2Key, 1);
+  const translateX3Key = Math.floor(Math.random() * translateXPercentages.length);
+  const translateX3 = translateXPercentages[translateX3Key];
+  translateXPercentages.splice(translateX3Key, 1);
+
+  const translateY0Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY0 = translateYPercentages[translateY0Key];
+  translateYPercentages.splice(translateY0Key, 1);
+  const translateY1Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY1 = translateYPercentages[translateY1Key];
+  translateYPercentages.splice(translateY1Key, 1);
+  const translateY2Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY2 = translateYPercentages[translateY2Key];
+  translateYPercentages.splice(translateY2Key, 1);
+  const translateY3Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY3 = translateYPercentages[translateY3Key];
+  translateYPercentages.splice(translateY3Key, 1);
+
+  const scale0 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+  const scale1 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+  const scale2 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+  const scale3 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+
+  const keyframe = {
+    '0%, 100%': { transform: `translate(${translateX0}cqw, ${translateY0}cqh) scale(${scale0})` },
+    '25%': { transform: `translate(${translateX1}cqw, ${translateY1}cqh) scale(${scale1})` },
+    '50%': { transform: `translate(${translateX2}cqw, ${translateY2}cqh) scale(${scale2})` },
+    '75%': { transform: `translate(${translateX3}cqw, ${translateY3}cqh) scale(${scale3})` },
+  };
+
+  return keyframe;
+}
+
+const luminescent = {
+  50 : "hsl(286deg, 65%, 97%)",
+  100: "hsl(286deg, 60%, 95%)",
+  200: "hsl(286deg, 55%, 90%)",
+  300: "hsl(286deg, 50%, 82%)",
+  400: "hsl(286deg, 45%, 75%)",
+  500: "hsl(286deg, 40%, 60%)",
+  600: "hsl(286deg, 35%, 51%)",
+  700: "hsl(286deg, 30%, 42%)",
+  800: "hsl(286deg, 25%, 35%)",
+  900: "hsl(286deg, 20%, 30%)",
+  950: "hsl(286deg, 15%, 17%)"
+};
+
+module.exports = {
+  content: ['./node_modules/@luminescent/ui/**/*.{mjs,cjs}'],
+  theme: {
+    extend: {
+      colors: { luminescent },
+      animation: {
+        blob: 'blob 15s infinite',
+        blob1: 'blob1 15s infinite',
+        blob2: 'blob2 15s infinite',
+        blob3: 'blob3 15s infinite',
+        blob4: 'blob4 15s infinite',
+        blob5: 'blob5 15s infinite',
+        blob6: 'blob6 15s infinite',
+      },
+      keyframes: {
+        blob: getBlobKeyFrame(),
+        blob1: getBlobKeyFrame(),
+        blob2: getBlobKeyFrame(),
+        blob3: getBlobKeyFrame(),
+        blob4: getBlobKeyFrame(),
+        blob5: getBlobKeyFrame(),
+        blob6: getBlobKeyFrame(),
+      },
+    },
+  },
+};