daisyui 4.12.10 → 5.0.0-alpha.2

package/src/lib/responsiveRegex.js

@@ -1,45 +0,0 @@
-// regext for all daisyUI colors
-// ((primary|secondary|accent|neutral)(-content|))|((info|success|warning|error)(-content|))|(base)(-100|-200|-300|-content)
-
-// regex for all Tailwind CSS color utilities
-// (bg|to|via|from|text|ring|fill|caret|stroke|border|divide|accent|shadow|outline|decoration|placeholder|ring-offset)
-
-module.exports = [
-  {
-    pattern: /.*/,
-  },
-  {
-    // responsive utilites for daisyUI responsive modifiers
-    pattern: /.(sm|md|lg|xl)/,
-    variants: ["sm", "md", "lg", "xl"],
-  },
-  {
-    // responsive utilites for daisyUI components
-    pattern:
-      /(drawer-open|modal-(middle|top|bottom)|card-(side|compact|normal)|(stats|divider)-(horizontal|vertical)|dropdown-(end|top|bottom|left|right))/,
-    variants: ["sm", "md", "lg", "xl"],
-  },
-  {
-    // color utilities for daisyUI colors
-    pattern:
-      /(bg|to|via|from|text|fill|stroke|border|outline)-((primary|secondary|accent|neutral)(-content|))|((info|success|warning|error)(-content|))|(base)(-100|-200|-300|-content)/,
-    variants: [
-      // "first",
-      // "last",
-      // "odd",
-      // "even",
-      // "visited",
-      // "checked",
-      // "empty",
-      // "read-only",
-      // "group-hover",
-      // "group-focus",
-      // "focus-within",
-      "hover",
-      "focus",
-      // "focus-visible",
-      // "active",
-      // "disabled",
-    ],
-  },
-]

package/src/lib/utility-classes.js

@@ -1,7 +0,0 @@
-module.exports = {
-  borderRadius: {
-    badge: "var(--rounded-badge, 1.9rem)",
-    btn: "var(--rounded-btn, 0.5rem)",
-    box: "var(--rounded-box, 1rem)",
-  },
-}

package/src/theming/colorNames.js

@@ -1,30 +0,0 @@
-module.exports = {
-  "primary": "--p",
-  "primary-content": "--pc",
-
-  "secondary": "--s",
-  "secondary-content": "--sc",
-
-  "accent": "--a",
-  "accent-content": "--ac",
-
-  "neutral": "--n",
-  "neutral-content": "--nc",
-
-  "base-100": "--b1",
-  "base-200": "--b2",
-  "base-300": "--b3",
-  "base-content": "--bc",
-
-  "info": "--in",
-  "info-content": "--inc",
-
-  "success": "--su",
-  "success-content": "--suc",
-
-  "warning": "--wa",
-  "warning-content": "--wac",
-
-  "error": "--er",
-  "error-content": "--erc",
-}

package/src/theming/functions.js

@@ -1,262 +0,0 @@
-const pc = require("picocolors")
-const colorNames = require("./colorNames")
-const themeDefaults = require("./themeDefaults")
-
-const { oklch, interpolate, wcagContrast } = require("culori/require")
-
-const colorIsInvalid = (input) => {
-  console.error(
-    `├─ ${pc.red("⚠︎")} ${pc.bgRed(" Error ")} Invalid color ${pc.red(input)} in ${pc.green(
-      "tailwind.config.js"
-    )}`
-  )
-}
-const cutNumber = (number) => {
-  try {
-    if (number) {
-      return +number.toFixed(6)
-    }
-    return 0
-  } catch (e) {
-    // colorIsInvalid(number)
-    return false
-  }
-}
-module.exports = {
-  isDark: (color) => {
-    try {
-      if (wcagContrast(color, "black") < wcagContrast(color, "white")) {
-        return true
-      }
-      return false
-    } catch (e) {
-      // colorIsInvalid(color)
-      return false
-    }
-  },
-
-  colorObjToString: (input) => {
-    const { l, c, h } = input
-    return `${Number.parseFloat((cutNumber(l) * 100).toFixed(6))}% ${cutNumber(c)} ${cutNumber(h)}`
-  },
-
-  generateForegroundColorFrom: function (input, percentage = 0.8) {
-    try {
-      const result = interpolate(
-        [input, this.isDark(input) ? "white" : "black"],
-        "oklch"
-      )(percentage)
-      return this.colorObjToString(result)
-    } catch (e) {
-      // colorIsInvalid(input)
-      return false
-    }
-  },
-
-  generateDarkenColorFrom: function (input, percentage = 0.07) {
-    try {
-      const result = interpolate([input, "black"], "oklch")(percentage)
-      return this.colorObjToString(result)
-    } catch (e) {
-      // colorIsInvalid(input)
-      return false
-    }
-  },
-
-  convertColorFormat: function (input) {
-    if (typeof input !== "object" || input === null) {
-      return input
-    }
-
-    const resultObj = {}
-
-    for (const [rule, value] of Object.entries(input)) {
-      if (Object.hasOwn(colorNames, rule)) {
-        try {
-          const colorObj = oklch(value)
-          resultObj[colorNames[rule]] = this.colorObjToString(colorObj)
-        } catch (e) {
-          colorIsInvalid(value)
-          return false
-        }
-      } else {
-        resultObj[rule] = value
-      }
-
-      // 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"], 0.07)
-      }
-      if (!Object.hasOwn(input, "base-300")) {
-        if (Object.hasOwn(input, "base-200")) {
-          resultObj["--b3"] = this.generateDarkenColorFrom(input["base-200"], 0.07)
-        } else {
-          resultObj["--b3"] = this.generateDarkenColorFrom(input["base-100"], 0.14)
-        }
-      }
-
-      // auto generate state colors
-
-      if (!Object.hasOwn(input, "info")) {
-        resultObj["--in"] = "72.06% 0.191 231.6"
-      }
-      if (!Object.hasOwn(input, "success")) {
-        resultObj["--su"] = "64.8% 0.150 160"
-      }
-      if (!Object.hasOwn(input, "warning")) {
-        resultObj["--wa"] = "84.71% 0.199 83.87"
-      }
-      if (!Object.hasOwn(input, "error")) {
-        resultObj["--er"] = "71.76% 0.221 22.18"
-      }
-
-      // auto generate content colors
-      if (!Object.hasOwn(input, "base-content")) {
-        resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"], 0.8)
-      }
-      if (!Object.hasOwn(input, "primary-content")) {
-        resultObj["--pc"] = this.generateForegroundColorFrom(input.primary, 0.8)
-      }
-      if (!Object.hasOwn(input, "secondary-content")) {
-        resultObj["--sc"] = this.generateForegroundColorFrom(input.secondary, 0.8)
-      }
-      if (!Object.hasOwn(input, "accent-content")) {
-        resultObj["--ac"] = this.generateForegroundColorFrom(input.accent, 0.8)
-      }
-      if (!Object.hasOwn(input, "neutral-content")) {
-        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, 0.8)
-        } else {
-          resultObj["--inc"] = "0% 0 0"
-        }
-      }
-      if (!Object.hasOwn(input, "success-content")) {
-        if (Object.hasOwn(input, "success")) {
-          resultObj["--suc"] = this.generateForegroundColorFrom(input.success, 0.8)
-        } else {
-          resultObj["--suc"] = "0% 0 0"
-        }
-      }
-      if (!Object.hasOwn(input, "warning-content")) {
-        if (Object.hasOwn(input, "warning")) {
-          resultObj["--wac"] = this.generateForegroundColorFrom(input.warning, 0.8)
-        } else {
-          resultObj["--wac"] = "0% 0 0"
-        }
-      }
-      if (!Object.hasOwn(input, "error-content")) {
-        if (Object.hasOwn(input, "error")) {
-          resultObj["--erc"] = this.generateForegroundColorFrom(input.error, 0.8)
-        } else {
-          resultObj["--erc"] = "0% 0 0"
-        }
-      }
-
-      // add css variables if not exist
-      for (const item of Object.entries(themeDefaults.variables)) {
-        const [variable, value] = item
-        if (!Object.hasOwn(input, variable)) {
-          resultObj[variable] = value
-        }
-      }
-
-      // add other custom styles
-      if (!Object.hasOwn(colorNames, rule)) {
-        resultObj[rule] = value
-      }
-    }
-
-    return resultObj
-  },
-
-  injectThemes: function (addBase, config, themes) {
-    const includedThemesObj = {}
-    // add default themes
-    const themeRoot = config("daisyui.themeRoot") ?? ":root"
-    for (const [theme, value] of Object.entries(themes)) {
-      includedThemesObj[theme] = this.convertColorFormat(value)
-    }
-
-    // add custom themes
-    if (Array.isArray(config("daisyui.themes"))) {
-      for (const item of config("daisyui.themes")) {
-        if (typeof item === "object" && item !== null) {
-          for (const [customThemeName, customThemevalue] of Object.entries(item)) {
-            includedThemesObj[customThemeName] = this.convertColorFormat(customThemevalue)
-          }
-        }
-      }
-    }
-
-    let themeOrder = []
-    if (Array.isArray(config("daisyui.themes"))) {
-      for (const theme of config("daisyui.themes")) {
-        if (typeof theme === "object" && theme !== null) {
-          for (const customThemeName of Object.keys(theme)) {
-            themeOrder.push(customThemeName)
-          }
-        } else if (Object.hasOwn(includedThemesObj, 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[themeRoot] = includedThemesObj[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)"] = {
-              [themeRoot]: includedThemesObj[`${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)"] = {
-              [themeRoot]: includedThemesObj.dark,
-            }
-          }
-        }
-        // theme 0 with name
-        themesToInject[`[data-theme=${themeOrder[0]}]`] = includedThemesObj[themeOrder[0]]
-        themesToInject[`${themeRoot}:has(input.theme-controller[value=${themeOrder[0]}]:checked)`] =
-          includedThemesObj[themeOrder[0]]
-        // theme 1 with name
-        themesToInject[`[data-theme=${themeOrder[1]}]`] = includedThemesObj[themeOrder[1]]
-        themesToInject[`${themeRoot}:has(input.theme-controller[value=${themeOrder[1]}]:checked)`] =
-          includedThemesObj[themeOrder[1]]
-      } else {
-        themesToInject[`[data-theme=${themeName}]`] = includedThemesObj[themeName]
-        themesToInject[`${themeRoot}:has(input.theme-controller[value=${themeName}]:checked)`] =
-          includedThemesObj[themeName]
-      }
-    })
-
-    addBase(themesToInject)
-
-    return {
-      includedThemesObj,
-      themeOrder,
-    }
-  },
-}

package/src/theming/index.js

@@ -1,35 +0,0 @@
-const colorObject = {
-  "transparent": "transparent",
-  "current": "currentColor",
-
-  "primary": "var(--fallback-p,oklch(var(--p)/<alpha-value>))",
-  "primary-content": "var(--fallback-pc,oklch(var(--pc)/<alpha-value>))",
-
-  "secondary": "var(--fallback-s,oklch(var(--s)/<alpha-value>))",
-  "secondary-content": "var(--fallback-sc,oklch(var(--sc)/<alpha-value>))",
-
-  "accent": "var(--fallback-a,oklch(var(--a)/<alpha-value>))",
-  "accent-content": "var(--fallback-ac,oklch(var(--ac)/<alpha-value>))",
-
-  "neutral": "var(--fallback-n,oklch(var(--n)/<alpha-value>))",
-  "neutral-content": "var(--fallback-nc,oklch(var(--nc)/<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": "var(--fallback-in,oklch(var(--in)/<alpha-value>))",
-  "info-content": "var(--fallback-inc,oklch(var(--inc)/<alpha-value>))",
-
-  "success": "var(--fallback-su,oklch(var(--su)/<alpha-value>))",
-  "success-content": "var(--fallback-suc,oklch(var(--suc)/<alpha-value>))",
-
-  "warning": "var(--fallback-wa,oklch(var(--wa)/<alpha-value>))",
-  "warning-content": "var(--fallback-wac,oklch(var(--wac)/<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

@@ -1,47 +0,0 @@
-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",
-    "dim",
-    "nord",
-    "sunset",
-  ],
-  variables: {
-    "--rounded-box": "1rem",
-    "--rounded-btn": "0.5rem",
-    "--rounded-badge": "1.9rem",
-    "--animation-btn": "0.25s",
-    "--animation-input": ".2s",
-    "--btn-focus-scale": "0.95",
-    "--border-btn": "1px",
-    "--tab-border": "1px",
-    "--tab-radius": "0.5rem",
-  },
-}

package/src/theming/themes.d.ts

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