feat: define new themes from tailwind.config.js

colors/colorNames.js

@@ -0,0 +1,27 @@
+module.exports = {
+  "primary"           : "--p",
+  "primary-focus"     : "--pf",
+  "primary-content"   : "--pc",
+
+  "secondary"         : "--s",
+  "secondary-focus"   : "--sf",
+  "secondary-content" : "--sc",
+
+  "accent"            : "--a",
+  "accent-focus"      : "--af",
+  "accent-content"    : "--ac",
+
+  "neutral"           : "--n",
+  "neutral-focus"     : "--nf",
+  "neutral-content"   : "--nc",
+
+  "base-100"          : "--b1",
+  "base-200"          : "--b2",
+  "base-300"          : "--b3",
+  "base-content"      : "--bc",
+
+  "info"              : "--in",
+  "success"           : "--su",
+  "warning"           : "--wa",
+  "error"             : "--er",
+}

colors/hex2hsl.js

@@ -0,0 +1,44 @@
+module.exports = function hexToHSL(H) {
+  // Convert hex to RGB first
+  let r = 0, g = 0, b = 0;
+  if (H.length == 4) {
+    r = "0x" + H[1] + H[1];
+    g = "0x" + H[2] + H[2];
+    b = "0x" + H[3] + H[3];
+  } else if (H.length == 7) {
+    r = "0x" + H[1] + H[2];
+    g = "0x" + H[3] + H[4];
+    b = "0x" + H[5] + H[6];
+  }
+  // Then to HSL
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  let cmin = Math.min(r,g,b),
+      cmax = Math.max(r,g,b),
+      delta = cmax - cmin,
+      h = 0,
+      s = 0,
+      l = 0;
+
+  if (delta == 0)
+    h = 0;
+  else if (cmax == r)
+    h = ((g - b) / delta) % 6;
+  else if (cmax == g)
+    h = (b - r) / delta + 2;
+  else
+    h = (r - g) / delta + 4;
+
+  h = Math.round(h * 60);
+
+  if (h < 0)
+    h += 360;
+
+  l = (cmax + cmin) / 2;
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return h + " " + s + "% " + l + "%";
+}

colors/index.js

@@ -1,4 +1,4 @@
-const colorValues = require('./color-values')
+const colorValues = require('./colorNames')
 
 let colorObject = {
   "transparent": "transparent",
@@ -8,12 +8,12 @@ let colorObject = {
 for (const [key, item] of Object.entries(colorValues)) {
   colorObject[key] = ({ opacityVariable, opacityValue }) => {
     if (opacityValue !== undefined) {
-      return `hsla(var(--`+ item +`) / ${opacityValue})`
+      return `hsla(var(`+ item +`) / ${opacityValue})`
     }
     if (opacityVariable !== undefined) {
-      return `hsla(var(--`+ item +`) / var(${opacityVariable}, 1))`
+      return `hsla(var(`+ item +`) / var(${opacityVariable}, 1))`
     }
-    return `hsl(var(--`+ item +`))`
+    return `hsl(var(`+ item +`))`
   }
 }