daisyui 3.9.4 → 4.0.0-alpha.10

package/src/theming/functions.js

@@ -1,15 +1,7 @@
 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) {
@@ -17,24 +9,44 @@ module.exports = {
     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}%`
+  isDark: (color) => {
+    if (wcagContrast(color, "black") < wcagContrast(color, "white")) {
+      return true
+    }
+    return false
   },
 
-  generateForegroundColorFrom: function (input, percentage = 0.8) {
-    const str = colord(input)
-      .mix(colord(input).isDark() ? "white" : "black", percentage)
-      .toHslString()
-    return this.turnColorValuesToString(str)
+  colorObjToString: function (input, colorSpace) {
+    const cut = (number) => {
+      if (!number) {
+        return 0
+      }
+      return +number.toFixed(4)
+    }
+    if (colorSpace === "oklch") {
+      const { l, c, h } = input
+      return `${cut(l)} ${cut(c)} ${cut(h)}`
+    }
+    if (colorSpace === "hsl") {
+      const { h, s, l } = input
+      return `${cut(h)} ${cut(s)}% ${cut(l)}%`
+    }
+  },
+
+  generateForegroundColorFrom: function (input, percentage = 0.8, colorSpace) {
+    const result = interpolate(
+      [input, this.isDark(input) ? "white" : "black"],
+      colorSpace
+    )(percentage)
+    return this.colorObjToString(result, colorSpace)
   },
 
-  generateDarkenColorFrom: function (input, percentage = 0.07) {
-    const str = colord(input).darken(percentage).toHslString()
-    return this.turnColorValuesToString(str)
+  generateDarkenColorFrom: function (input, percentage = 0.07, colorSpace) {
+    const result = interpolate([input, "black"], colorSpace)(percentage)
+    return this.colorObjToString(result, colorSpace)
   },
 
-  convertColorFormat: function (input, colorFunction = "hsl") {
+  convertColorFormat: function (input, colorSpace) {
     if (typeof input !== "object" || input === null) {
       return input
     }
@@ -42,119 +54,85 @@ 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(colorSpace)(value)
+        resultObj[colorNames[rule]] = this.colorObjToString(colorObj, colorSpace)
       } 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, colorSpace)
       }
       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, colorSpace)
         } else {
-          resultObj["--b3"] = this.generateDarkenColorFrom(input["base-100"], 0.14)
+          resultObj["--b3"] = this.generateDarkenColorFrom(input["base-100"], 0.14, colorSpace)
         }
       }
 
       // 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, colorSpace)
       }
       if (!Object.hasOwn(input, "primary-content")) {
-        resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"])
+        resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"], 0.8, colorSpace)
       }
       if (!Object.hasOwn(input, "secondary-content")) {
-        resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"])
+        resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"], 0.8, colorSpace)
       }
       if (!Object.hasOwn(input, "accent-content")) {
-        resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"])
+        resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"], 0.8, colorSpace)
       }
       if (!Object.hasOwn(input, "neutral-content")) {
-        resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"])
+        resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"], 0.8, colorSpace)
       }
       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, colorSpace)
         } 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, colorSpace)
         } 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, colorSpace)
         } 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, colorSpace)
         } else {
-          resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%"
+          resultObj["--erc"] = "0 0 0"
         }
       }
 
@@ -175,17 +153,15 @@ module.exports = {
     return resultObj
   },
 
-  injectThemes: function (addBase, config, themes, colorFunction) {
+  injectThemes: function (addBase, config, themes) {
+    let colorSpace = "oklch"
+    // if (["oklch", "hsl"].includes(config("daisyui.colorSpace"))) {
+    //   colorSpace = config("daisyui.colorSpace")
+    // }
     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")
-      }
+      includedThemesObj[theme] = this.convertColorFormat(value, colorSpace)
     })
 
     // add custom themes
@@ -193,8 +169,10 @@ 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["[data-theme=" + customThemeName + "]"] = this.convertColorFormat(
+              customThemevalue,
+              colorSpace
+            )
           })
         }
       })
@@ -254,12 +232,8 @@ module.exports = {
           includedThemesObj["[data-theme=" + 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": "oklch(var(--p) / <alpha-value>)",
+  "primary-content": "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": "oklch(var(--s) / <alpha-value>)",
+  "secondary-content": "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": "oklch(var(--a) / <alpha-value>)",
+  "accent-content": "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": "oklch(var(--n) / <alpha-value>)",
+  "neutral-content": "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": "oklch(var(--b1) / <alpha-value>)",
+  "base-200": "oklch(var(--b2) / <alpha-value>)",
+  "base-300": "oklch(var(--b3) / <alpha-value>)",
+  "base-content": "oklch(var(--bc) / <alpha-value>)",
 
-  "info": "hsl(var(--in) / <alpha-value>)",
-  "info-content": "hsl(var(--inc) / <alpha-value>)",
+  "info": "oklch(var(--in) / <alpha-value>)",
+  "info-content": "oklch(var(--inc) / <alpha-value>)",
 
-  "success": "hsl(var(--su) / <alpha-value>)",
-  "success-content": "hsl(var(--suc) / <alpha-value>)",
+  "success": "oklch(var(--su) / <alpha-value>)",
+  "success-content": "oklch(var(--suc) / <alpha-value>)",
 
-  "warning": "hsl(var(--wa) / <alpha-value>)",
-  "warning-content": "hsl(var(--wac) / <alpha-value>)",
+  "warning": "oklch(var(--wa) / <alpha-value>)",
+  "warning-content": "oklch(var(--wac) / <alpha-value>)",
 
-  "error": "hsl(var(--er) / <alpha-value>)",
-  "error-content": "hsl(var(--erc) / <alpha-value>)",
+  "error": "oklch(var(--er) / <alpha-value>)",
+  "error-content": "oklch(var(--erc) / <alpha-value>)",
 }
 
 module.exports = colorObject

package/src/theming/themes.js

@@ -21,7 +21,6 @@ module.exports = {
     "base-200": "#0D0D0D",
     "base-300": "#1A1919",
     "neutral": "#272626",
-    "neutral-focus": "#343232",
     "info": "#0000ff",
     "success": "#008000",
     "warning": "#ffff00",
@@ -104,14 +103,10 @@ module.exports = {
   },
   "[data-theme=dark]": {
     "color-scheme": "dark",
-    "primary": "#661AE6",
-    "primary-content": "#ffffff",
-    "secondary": "#D926AA",
-    "secondary-content": "#ffffff",
-    "accent": "#1FB2A5",
-    "accent-content": "#ffffff",
+    "primary": "oklch(49.12% 0.3096 275.75)",
+    "secondary": "oklch(69.71% 0.329 342.55)",
+    "accent": "oklch(76.76% 0.184 183.61)",
     "neutral": "#2a323c",
-    "neutral-focus": "#242b33",
     "neutral-content": "#A6ADBB",
     "base-100": "#1d232a",
     "base-200": "#191e24",
@@ -192,12 +187,9 @@ module.exports = {
   },
   "[data-theme=light]": {
     "color-scheme": "light",
-    "primary": "#570df8",
-    "primary-content": "#E0D2FE",
-    "secondary": "#f000b8",
-    "secondary-content": "#FFD1F4",
-    "accent": "#1ECEBC",
-    "accent-content": "#07312D",
+    "primary": "oklch(49.12% 0.3096 275.75)",
+    "secondary": "oklch(69.71% 0.329 342.55)",
+    "accent": "oklch(76.76% 0.184 183.61)",
     "neutral": "#2B3440",
     "neutral-content": "#D7DDE4",
     "base-100": "#ffffff",
@@ -396,7 +388,6 @@ module.exports = {
     "secondary": "#818CF8",
     "accent": "#F471B5",
     "neutral": "#1E293B",
-    "neutral-focus": "#273449",
     "base-100": "#0F172A",
     "info": "#0CA5E9",
     "info-content": "#000000",