daisyui 2.52.0 → 3.0.0

package/src/{colors → theming}/colorNames.js

@@ -1,17 +1,17 @@
 module.exports = {
-  primary: "--p",
+  "primary": "--p",
   "primary-focus": "--pf",
   "primary-content": "--pc",
 
-  secondary: "--s",
+  "secondary": "--s",
   "secondary-focus": "--sf",
   "secondary-content": "--sc",
 
-  accent: "--a",
+  "accent": "--a",
   "accent-focus": "--af",
   "accent-content": "--ac",
 
-  neutral: "--n",
+  "neutral": "--n",
   "neutral-focus": "--nf",
   "neutral-content": "--nc",
 
@@ -20,15 +20,15 @@ module.exports = {
   "base-300": "--b3",
   "base-content": "--bc",
 
-  info: "--in",
+  "info": "--in",
   "info-content": "--inc",
 
-  success: "--su",
+  "success": "--su",
   "success-content": "--suc",
 
-  warning: "--wa",
+  "warning": "--wa",
   "warning-content": "--wac",
 
-  error: "--er",
+  "error": "--er",
   "error-content": "--erc",
-};
+}

package/src/theming/functions.js

@@ -0,0 +1,269 @@
+const colorNames = require("./colorNames")
+const themeDefaults = require("./themeDefaults")
+
+const { colord, getFormat, extend } = require("colord")
+const mixPlugin = require("colord/plugins/mix")
+const namesPlugin = require("colord/plugins/names")
+const lchPlugin = require("colord/plugins/lch")
+const hwbPlugin = require("colord/plugins/hwb")
+const labPlugin = require("colord/plugins/lab")
+const xyzPlugin = require("colord/plugins/xyz")
+
+extend([mixPlugin, namesPlugin, lchPlugin, hwbPlugin, labPlugin, xyzPlugin])
+
+module.exports = {
+  changeColorValuesToObject: function (input) {
+    const [h, s, l] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat)
+    return { h, s, l, a: 1 }
+  },
+
+  turnColorValuesToString: function (input) {
+    const [h, s, l] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat)
+    return `${h} ${s}% ${l}%`
+  },
+
+  generateForegroundColorFrom: function (input, percentage = 0.8) {
+    const str = colord(input)
+      .mix(colord(input).isDark() ? "white" : "black", percentage)
+      .toHslString()
+    return this.turnColorValuesToString(str)
+  },
+
+  generateDarkenColorFrom: function (input, percentage = 0.07) {
+    const str = colord(input).darken(percentage).toHslString()
+    return this.turnColorValuesToString(str)
+  },
+
+  convertColorFormat: function (input, colorFunction = "hsl") {
+    if (typeof input !== "object" || input === null) {
+      return input
+    }
+
+    const resultObj = {}
+
+    Object.entries(input).forEach(([rule, value]) => {
+      // if (!Object.hasOwn(colorNames, rule)) {
+      // resultObj[rule] = value
+      // } else {
+      //   let arr
+      //   if (getFormat(value) === "lch") {
+      //     arr = this.changeColorValuesToObject(value)
+      //   } else {
+      //     arr = colord(value).toLch()
+      //   }
+      //   resultObj[colorNames[rule]] = arr.l + " " + arr.c + " " + arr.h
+      // }
+
+      if (colorNames.hasOwnProperty(rule)) {
+        const hslArray = colord(value).toHsl()
+        resultObj[colorNames[rule]] = `${hslArray.h} ${hslArray.s}% ${hslArray.l}%`
+      } else {
+        resultObj[rule] = value
+      }
+
+      // if (getFormat("lch(" + value + ")") === "lch") {
+      //   resultObj[rule] = value
+      //   if (colorFunction === "hsl") {
+      //     let arr = colord("lch(" + value + ")").toHsl()
+      //     resultObj[rule] = arr.h + " " + arr.s + "% " + arr.l + "%"
+      //   }
+      // }
+
+      // auto generate focus colors
+      if (!Object.hasOwn(input, "primary-focus")) {
+        resultObj["--pf"] = this.generateDarkenColorFrom(input["primary"])
+      }
+      if (!Object.hasOwn(input, "secondary-focus")) {
+        resultObj["--sf"] = this.generateDarkenColorFrom(input["secondary"])
+      }
+      if (!Object.hasOwn(input, "accent-focus")) {
+        resultObj["--af"] = this.generateDarkenColorFrom(input["accent"])
+      }
+      if (!Object.hasOwn(input, "neutral-focus")) {
+        resultObj["--nf"] = this.generateDarkenColorFrom(input["neutral"])
+      }
+
+      // auto generate base colors
+      if (!Object.hasOwn(input, "base-100")) {
+        resultObj["--b1"] = "100 0 0"
+      }
+      if (!Object.hasOwn(input, "base-200")) {
+        resultObj["--b2"] = this.generateDarkenColorFrom(input["base-100"])
+      }
+      if (!Object.hasOwn(input, "base-300")) {
+        if (Object.hasOwn(input, "base-200")) {
+          resultObj["--b3"] = this.generateDarkenColorFrom(input["base-200"])
+        } else {
+          resultObj["--b3"] = this.generateDarkenColorFrom(input["base-100"], 0.14)
+        }
+      }
+
+      // auto generate state colors
+
+      if (!Object.hasOwn(input, "info")) {
+        resultObj["--in"] = 198 + " " + 93 + "%" + " " + 60 + "%"
+      }
+      if (!Object.hasOwn(input, "success")) {
+        resultObj["--su"] = 158 + " " + 64 + "%" + " " + 52 + "%"
+      }
+      if (!Object.hasOwn(input, "warning")) {
+        resultObj["--wa"] = 43 + " " + 96 + "%" + " " + 56 + "%"
+      }
+      if (!Object.hasOwn(input, "error")) {
+        resultObj["--er"] = 0 + " " + 91 + "%" + " " + 71 + "%"
+      }
+
+      // auto generate content colors
+      if (!Object.hasOwn(input, "base-content")) {
+        resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"])
+      }
+      if (!Object.hasOwn(input, "primary-content")) {
+        resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"])
+      }
+      if (!Object.hasOwn(input, "secondary-content")) {
+        resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"])
+      }
+      if (!Object.hasOwn(input, "accent-content")) {
+        resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"])
+      }
+      if (!Object.hasOwn(input, "neutral-content")) {
+        resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"])
+      }
+      if (!Object.hasOwn(input, "info-content")) {
+        if (Object.hasOwn(input, "info")) {
+          resultObj["--inc"] = this.generateForegroundColorFrom(input["info"])
+        } else {
+          resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%"
+        }
+      }
+      if (!Object.hasOwn(input, "success-content")) {
+        if (Object.hasOwn(input, "success")) {
+          resultObj["--suc"] = this.generateForegroundColorFrom(input["success"])
+        } else {
+          resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%"
+        }
+      }
+      if (!Object.hasOwn(input, "warning-content")) {
+        if (Object.hasOwn(input, "warning")) {
+          resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"])
+        } else {
+          resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%"
+        }
+      }
+      if (!Object.hasOwn(input, "error-content")) {
+        if (Object.hasOwn(input, "error")) {
+          resultObj["--erc"] = this.generateForegroundColorFrom(input["error"])
+        } else {
+          resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%"
+        }
+      }
+
+      // add css variables if not exist
+      Object.entries(themeDefaults.variables).forEach((item) => {
+        const [variable, value] = item
+        if (!Object.hasOwn(input, variable)) {
+          resultObj[variable] = value
+        }
+      })
+
+      // add other custom styles
+      if (!colorNames.hasOwnProperty(rule)) {
+        resultObj[rule] = value
+      }
+    })
+
+    return resultObj
+  },
+
+  injectThemes: function (addBase, config, themes, colorFunction) {
+    const includedThemesObj = {}
+    // includedThemesObj["@supports (not(color: lch(0 0 0)))"] = {}
+    // add default themes
+    Object.entries(themes).forEach(([theme, value]) => {
+      if (colorFunction === "lch") {
+        includedThemesObj[theme] = this.convertColorFormat(value)
+      }
+      if (colorFunction === "hsl") {
+        includedThemesObj[theme] = this.convertColorFormat(value, "hsl")
+      }
+    })
+
+    // add custom themes
+    if (Array.isArray(config("daisyui.themes"))) {
+      config("daisyui.themes").forEach((item) => {
+        if (typeof item === "object" && item !== null) {
+          Object.entries(item).forEach(([customThemeName, customThemevalue]) => {
+            includedThemesObj["[data-theme=" + customThemeName + "]"] =
+              this.convertColorFormat(customThemevalue)
+          })
+        }
+      })
+    }
+
+    let themeOrder = []
+    if (Array.isArray(config("daisyui.themes"))) {
+      config("daisyui.themes").forEach((theme) => {
+        if (typeof theme === "object" && theme !== null) {
+          Object.keys(theme).forEach((customThemeName) => {
+            themeOrder.push(customThemeName)
+          })
+        } else if (Object.hasOwn(includedThemesObj, "[data-theme=" + theme + "]")) {
+          themeOrder.push(theme)
+        }
+      })
+    } else if (config("daisyui.themes") === true) {
+      themeOrder = themeDefaults.themeOrder
+    } else {
+      themeOrder = ["light", "dark"]
+    }
+
+    // inject themes in order
+    const themesToInject = {}
+    themeOrder.forEach((themeName, index) => {
+      if (index === 0) {
+        // first theme as root
+        themesToInject[":root"] = includedThemesObj["[data-theme=" + themeName + "]"]
+      } else if (index === 1) {
+        // auto dark
+        if (config("daisyui.darkTheme")) {
+          if (
+            themeOrder[0] !== config("daisyui.darkTheme") &&
+            themeOrder.includes(config("daisyui.darkTheme"))
+          ) {
+            themesToInject["@media (prefers-color-scheme: dark)"] = {
+              [":root"]: includedThemesObj[`[data-theme=${config("daisyui.darkTheme")}]`],
+            }
+          }
+        } else if (config("daisyui.darkTheme") === false) {
+          // disables prefers-color-scheme: dark
+        } else {
+          if (themeOrder[0] !== "dark" && themeOrder.includes("dark")) {
+            themesToInject["@media (prefers-color-scheme: dark)"] = {
+              [":root"]: includedThemesObj["[data-theme=dark]"],
+            }
+          }
+        }
+        // theme 0 with name
+        themesToInject["[data-theme=" + themeOrder[0] + "]"] =
+          includedThemesObj["[data-theme=" + themeOrder[0] + "]"]
+        // theme 1 with name
+        themesToInject["[data-theme=" + themeOrder[1] + "]"] =
+          includedThemesObj["[data-theme=" + themeOrder[1] + "]"]
+      } else {
+        themesToInject["[data-theme=" + themeName + "]"] =
+          includedThemesObj["[data-theme=" + themeName + "]"]
+      }
+    })
+    if (colorFunction === "lch") {
+      addBase({ "@supports (color: lch(0 0 0))": themesToInject })
+    }
+    if (colorFunction === "hsl") {
+      addBase(themesToInject)
+    }
+
+    return {
+      includedThemesObj,
+      themeOrder,
+    }
+  },
+}

package/src/theming/index.js

@@ -0,0 +1,39 @@
+let colorObject = {
+  "transparent": "transparent",
+  "current": "currentColor",
+
+  "primary": "hsl(var(--p) / <alpha-value>)",
+  "primary-focus": "hsl(var(--pf) / <alpha-value>)",
+  "primary-content": "hsl(var(--pc) / <alpha-value>)",
+
+  "secondary": "hsl(var(--s) / <alpha-value>)",
+  "secondary-focus": "hsl(var(--sf) / <alpha-value>)",
+  "secondary-content": "hsl(var(--sc) / <alpha-value>)",
+
+  "accent": "hsl(var(--a) / <alpha-value>)",
+  "accent-focus": "hsl(var(--af) / <alpha-value>)",
+  "accent-content": "hsl(var(--ac) / <alpha-value>)",
+
+  "neutral": "hsl(var(--n) / <alpha-value>)",
+  "neutral-focus": "hsl(var(--nf) / <alpha-value>)",
+  "neutral-content": "hsl(var(--nc) / <alpha-value>)",
+
+  "base-100": "hsl(var(--b1) / <alpha-value>)",
+  "base-200": "hsl(var(--b2) / <alpha-value>)",
+  "base-300": "hsl(var(--b3) / <alpha-value>)",
+  "base-content": "hsl(var(--bc) / <alpha-value>)",
+
+  "info": "hsl(var(--in) / <alpha-value>)",
+  "info-content": "hsl(var(--inc) / <alpha-value>)",
+
+  "success": "hsl(var(--su) / <alpha-value>)",
+  "success-content": "hsl(var(--suc) / <alpha-value>)",
+
+  "warning": "hsl(var(--wa) / <alpha-value>)",
+  "warning-content": "hsl(var(--wac) / <alpha-value>)",
+
+  "error": "hsl(var(--er) / <alpha-value>)",
+  "error-content": "hsl(var(--erc) / <alpha-value>)",
+}
+
+module.exports = colorObject

package/src/theming/themeDefaults.js

@@ -0,0 +1,45 @@
+module.exports = {
+  themeOrder: [
+    "light",
+    "dark",
+    "cupcake",
+    "bumblebee",
+    "emerald",
+    "corporate",
+    "synthwave",
+    "retro",
+    "cyberpunk",
+    "valentine",
+    "halloween",
+    "garden",
+    "forest",
+    "aqua",
+    "lofi",
+    "pastel",
+    "fantasy",
+    "wireframe",
+    "black",
+    "luxury",
+    "dracula",
+    "cmyk",
+    "autumn",
+    "business",
+    "acid",
+    "lemonade",
+    "night",
+    "coffee",
+    "winter",
+  ],
+  variables: {
+    "--rounded-box": "1rem",
+    "--rounded-btn": "0.5rem",
+    "--rounded-badge": "1.9rem",
+    "--animation-btn": "0.25s",
+    "--animation-input": ".2s",
+    "--btn-text-case": "uppercase",
+    "--btn-focus-scale": "0.95",
+    "--border-btn": "1px",
+    "--tab-border": "1px",
+    "--tab-radius": "0.5rem",
+  },
+}