daisyui 4.0.0-alpha.2 → 4.0.0-alpha.21

package/src/theming/functions.js

@@ -1,40 +1,38 @@
 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])
+const { toGamut, interpolate, wcagContrast } = require("culori")
 
 module.exports = {
-  changeColorValuesToObject: function (input) {
-    const [h, s, l] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat)
-    return { h, s, l, a: 1 }
+  isDark: (color) => {
+    if (wcagContrast(color, "black") < wcagContrast(color, "white")) {
+      return true
+    }
+    return false
   },
 
-  turnColorValuesToString: function (input) {
-    const [h, s, l] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat)
-    return `${h} ${s}% ${l}%`
+  colorObjToString: function (input) {
+    const cut = (number) => {
+      if (!number) {
+        return 0
+      }
+      return +number.toFixed(6)
+    }
+    const { l, c, h } = input
+    return `${cut(l)} ${cut(c)} ${cut(h)}`
   },
 
   generateForegroundColorFrom: function (input, percentage = 0.8) {
-    const str = colord(input)
-      .mix(colord(input).isDark() ? "white" : "black", percentage)
-      .toHslString()
-    return this.turnColorValuesToString(str)
+    const result = interpolate([input, this.isDark(input) ? "white" : "black"], "oklch")(percentage)
+    return this.colorObjToString(result)
   },
 
   generateDarkenColorFrom: function (input, percentage = 0.07) {
-    const str = colord(input).darken(percentage).toHslString()
-    return this.turnColorValuesToString(str)
+    const result = interpolate([input, "black"], "oklch")(percentage)
+    return this.colorObjToString(result)
   },
 
-  convertColorFormat: function (input, colorFunction = "hsl") {
+  convertColorFormat: function (input) {
     if (typeof input !== "object" || input === null) {
       return input
     }
@@ -42,57 +40,23 @@ module.exports = {
     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}%`
+        const colorObj = toGamut("oklch")(value)
+        resultObj[colorNames[rule]] = this.colorObjToString(colorObj)
       } 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"])
+        resultObj["--b2"] = this.generateDarkenColorFrom(input["base-100"], 0.07)
       }
       if (!Object.hasOwn(input, "base-300")) {
         if (Object.hasOwn(input, "base-200")) {
-          resultObj["--b3"] = this.generateDarkenColorFrom(input["base-200"])
+          resultObj["--b3"] = this.generateDarkenColorFrom(input["base-200"], 0.07)
         } else {
           resultObj["--b3"] = this.generateDarkenColorFrom(input["base-100"], 0.14)
         }
@@ -101,60 +65,60 @@ module.exports = {
       // auto generate state colors
 
       if (!Object.hasOwn(input, "info")) {
-        resultObj["--in"] = 198 + " " + 93 + "%" + " " + 60 + "%"
+        resultObj["--in"] = "0.7206 0.191 231.6"
       }
       if (!Object.hasOwn(input, "success")) {
-        resultObj["--su"] = 158 + " " + 64 + "%" + " " + 52 + "%"
+        resultObj["--su"] = "0.7441 0.213 164.75"
       }
       if (!Object.hasOwn(input, "warning")) {
-        resultObj["--wa"] = 43 + " " + 96 + "%" + " " + 56 + "%"
+        resultObj["--wa"] = "0.8471 0.199 83.87"
       }
       if (!Object.hasOwn(input, "error")) {
-        resultObj["--er"] = 0 + " " + 91 + "%" + " " + 71 + "%"
+        resultObj["--er"] = "0.7176 0.221 22.18"
       }
 
       // auto generate content colors
       if (!Object.hasOwn(input, "base-content")) {
-        resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"])
+        resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"], 0.8)
       }
       if (!Object.hasOwn(input, "primary-content")) {
-        resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"])
+        resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"], 0.8)
       }
       if (!Object.hasOwn(input, "secondary-content")) {
-        resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"])
+        resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"], 0.8)
       }
       if (!Object.hasOwn(input, "accent-content")) {
-        resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"])
+        resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"], 0.8)
       }
       if (!Object.hasOwn(input, "neutral-content")) {
-        resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"])
+        resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"], 0.8)
       }
       if (!Object.hasOwn(input, "info-content")) {
         if (Object.hasOwn(input, "info")) {
-          resultObj["--inc"] = this.generateForegroundColorFrom(input["info"])
+          resultObj["--inc"] = this.generateForegroundColorFrom(input["info"], 0.8)
         } else {
-          resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%"
+          resultObj["--inc"] = "0 0 0"
         }
       }
       if (!Object.hasOwn(input, "success-content")) {
         if (Object.hasOwn(input, "success")) {
-          resultObj["--suc"] = this.generateForegroundColorFrom(input["success"])
+          resultObj["--suc"] = this.generateForegroundColorFrom(input["success"], 0.8)
         } else {
-          resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%"
+          resultObj["--suc"] = "0 0 0"
         }
       }
       if (!Object.hasOwn(input, "warning-content")) {
         if (Object.hasOwn(input, "warning")) {
-          resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"])
+          resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"], 0.8)
         } else {
-          resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%"
+          resultObj["--wac"] = "0 0 0"
         }
       }
       if (!Object.hasOwn(input, "error-content")) {
         if (Object.hasOwn(input, "error")) {
-          resultObj["--erc"] = this.generateForegroundColorFrom(input["error"])
+          resultObj["--erc"] = this.generateForegroundColorFrom(input["error"], 0.8)
         } else {
-          resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%"
+          resultObj["--erc"] = "0 0 0"
         }
       }
 
@@ -175,17 +139,12 @@ module.exports = {
     return resultObj
   },
 
-  injectThemes: function (addBase, config, themes, colorFunction) {
+  injectThemes: function (addBase, config, themes) {
     const includedThemesObj = {}
-    // includedThemesObj["@supports (not(color: lch(0 0 0)))"] = {}
     // add default themes
+    const themeRoot = config("daisyui.themeRoot") ?? ":root"
     Object.entries(themes).forEach(([theme, value]) => {
-      if (colorFunction === "lch") {
-        includedThemesObj[theme] = this.convertColorFormat(value)
-      }
-      if (colorFunction === "hsl") {
-        includedThemesObj[theme] = this.convertColorFormat(value, "hsl")
-      }
+      includedThemesObj[theme] = this.convertColorFormat(value)
     })
 
     // add custom themes
@@ -193,8 +152,7 @@ module.exports = {
       config("daisyui.themes").forEach((item) => {
         if (typeof item === "object" && item !== null) {
           Object.entries(item).forEach(([customThemeName, customThemevalue]) => {
-            includedThemesObj["[data-theme=" + customThemeName + "]"] =
-              this.convertColorFormat(customThemevalue)
+            includedThemesObj[customThemeName] = this.convertColorFormat(customThemevalue)
           })
         }
       })
@@ -207,7 +165,7 @@ module.exports = {
           Object.keys(theme).forEach((customThemeName) => {
             themeOrder.push(customThemeName)
           })
-        } else if (Object.hasOwn(includedThemesObj, "[data-theme=" + theme + "]")) {
+        } else if (Object.hasOwn(includedThemesObj, theme)) {
           themeOrder.push(theme)
         }
       })
@@ -222,7 +180,7 @@ module.exports = {
     themeOrder.forEach((themeName, index) => {
       if (index === 0) {
         // first theme as root
-        themesToInject[":root"] = includedThemesObj["[data-theme=" + themeName + "]"]
+        themesToInject[themeRoot] = includedThemesObj[themeName]
       } else if (index === 1) {
         // auto dark
         if (config("daisyui.darkTheme")) {
@@ -231,7 +189,7 @@ module.exports = {
             themeOrder.includes(config("daisyui.darkTheme"))
           ) {
             themesToInject["@media (prefers-color-scheme: dark)"] = {
-              [":root"]: includedThemesObj[`[data-theme=${config("daisyui.darkTheme")}]`],
+              [themeRoot]: includedThemesObj[`${config("daisyui.darkTheme")}`],
             }
           }
         } else if (config("daisyui.darkTheme") === false) {
@@ -239,27 +197,44 @@ module.exports = {
         } else {
           if (themeOrder[0] !== "dark" && themeOrder.includes("dark")) {
             themesToInject["@media (prefers-color-scheme: dark)"] = {
-              [":root"]: includedThemesObj["[data-theme=dark]"],
+              [themeRoot]: includedThemesObj["dark"],
             }
           }
         }
         // theme 0 with name
-        themesToInject["[data-theme=" + themeOrder[0] + "]"] =
-          includedThemesObj["[data-theme=" + themeOrder[0] + "]"]
+        themesToInject[
+          "[data-theme=" +
+            themeOrder[0] +
+            "], " +
+            themeRoot +
+            ":has(input.theme-controller[value=" +
+            themeOrder[0] +
+            "]:checked)"
+        ] = includedThemesObj[themeOrder[0]]
         // theme 1 with name
-        themesToInject["[data-theme=" + themeOrder[1] + "]"] =
-          includedThemesObj["[data-theme=" + themeOrder[1] + "]"]
+        themesToInject[
+          "[data-theme=" +
+            themeOrder[1] +
+            "], " +
+            themeRoot +
+            ":has(input.theme-controller[value=" +
+            themeOrder[1] +
+            "]:checked)"
+        ] = includedThemesObj[themeOrder[1]]
       } else {
-        themesToInject["[data-theme=" + themeName + "]"] =
-          includedThemesObj["[data-theme=" + themeName + "]"]
+        themesToInject[
+          "[data-theme=" +
+            themeName +
+            "], " +
+            themeRoot +
+            ":has(input.theme-controller[value=" +
+            themeName +
+            "]:checked)"
+        ] = includedThemesObj[themeName]
       }
     })
-    if (colorFunction === "lch") {
-      addBase({ "@supports (color: lch(0 0 0))": themesToInject })
-    }
-    if (colorFunction === "hsl") {
-      addBase(themesToInject)
-    }
+
+    addBase(themesToInject)
 
     return {
       includedThemesObj,

package/src/theming/index.js

@@ -1,39 +1,37 @@
-let colorObject = {
+const colorNames = require("./colorNames")
+
+const 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>)",
+  "primary": "var(--fallback-p,oklch(var(--p)/<alpha-value>))",
+  "primary-content": "var(--fallback-pc,oklch(var(--pc)/<alpha-value>))",
 
-  "secondary": "hsl(var(--s) / <alpha-value>)",
-  "secondary-focus": "hsl(var(--sf) / <alpha-value>)",
-  "secondary-content": "hsl(var(--sc) / <alpha-value>)",
+  "secondary": "var(--fallback-s,oklch(var(--s)/<alpha-value>))",
+  "secondary-content": "var(--fallback-sc,oklch(var(--sc)/<alpha-value>))",
 
-  "accent": "hsl(var(--a) / <alpha-value>)",
-  "accent-focus": "hsl(var(--af) / <alpha-value>)",
-  "accent-content": "hsl(var(--ac) / <alpha-value>)",
+  "accent": "var(--fallback-a,oklch(var(--a)/<alpha-value>))",
+  "accent-content": "var(--fallback-ac,oklch(var(--ac)/<alpha-value>))",
 
-  "neutral": "hsl(var(--n) / <alpha-value>)",
-  "neutral-focus": "hsl(var(--nf) / <alpha-value>)",
-  "neutral-content": "hsl(var(--nc) / <alpha-value>)",
+  "neutral": "var(--fallback-n,oklch(var(--n)/<alpha-value>))",
+  "neutral-content": "var(--fallback-nc,oklch(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>)",
+  "base-100": "var(--fallback-b1,oklch(var(--b1)/<alpha-value>))",
+  "base-200": "var(--fallback-b2,oklch(var(--b2)/<alpha-value>))",
+  "base-300": "var(--fallback-b3,oklch(var(--b3)/<alpha-value>))",
+  "base-content": "var(--fallback-bc,oklch(var(--bc)/<alpha-value>))",
 
-  "info": "hsl(var(--in) / <alpha-value>)",
-  "info-content": "hsl(var(--inc) / <alpha-value>)",
+  "info": "var(--fallback-in,oklch(var(--in)/<alpha-value>))",
+  "info-content": "var(--fallback-inc,oklch(var(--inc)/<alpha-value>))",
 
-  "success": "hsl(var(--su) / <alpha-value>)",
-  "success-content": "hsl(var(--suc) / <alpha-value>)",
+  "success": "var(--fallback-su,oklch(var(--su)/<alpha-value>))",
+  "success-content": "var(--fallback-suc,oklch(var(--suc)/<alpha-value>))",
 
-  "warning": "hsl(var(--wa) / <alpha-value>)",
-  "warning-content": "hsl(var(--wac) / <alpha-value>)",
+  "warning": "var(--fallback-wa,oklch(var(--wa)/<alpha-value>))",
+  "warning-content": "var(--fallback-wac,oklch(var(--wac)/<alpha-value>))",
 
-  "error": "hsl(var(--er) / <alpha-value>)",
-  "error-content": "hsl(var(--erc) / <alpha-value>)",
+  "error": "var(--fallback-er,oklch(var(--er)/<alpha-value>))",
+  "error-content": "var(--fallback-erc,oklch(var(--erc)/<alpha-value>))",
 }
 
 module.exports = colorObject

package/src/theming/themeDefaults.js

@@ -29,6 +29,9 @@ module.exports = {
     "night",
     "coffee",
     "winter",
+    "dim",
+    "nord",
+    "sunset",
   ],
   variables: {
     "--rounded-box": "1rem",
@@ -36,7 +39,6 @@ module.exports = {
     "--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",

package/src/theming/themes.d.ts

@@ -1,5 +1,5 @@
 import { CustomTheme, Theme } from "../index"
 
-declare const themes: Record<`[data-theme=${Theme}]`, CustomTheme[string]>
+declare const themes: Record<`${Theme}`, CustomTheme[string]>
 
 export default themes