daisyui 2.0.0-next.1 → 2.0.2

package/index.js

@@ -1,159 +1,227 @@
-const daisyuiInfo = require('./package.json')
-const colors = require('./colors/index')
-const utilities = require('./dist/utilities')
-const base = require('./dist/base')
-const unstyled = require('./dist/unstyled')
-const unstyledRtl = require('./dist/unstyled.rtl')
-const styled = require('./dist/styled')
-const styledRtl = require('./dist/styled.rtl')
-const utilitiesUnstyled = require('./dist/utilities-unstyled')
-const utilitiesStyled = require('./dist/utilities-styled')
-const themes = require('./colors/themes')
-const colorNames = require('./colors/colorNames')
-const Color = require('color');
+const daisyuiInfo = require("./package.json");
+const colors = require("./colors/index");
+const utilities = require("./dist/utilities");
+const base = require("./dist/base");
+const unstyled = require("./dist/unstyled");
+const unstyledRtl = require("./dist/unstyled.rtl");
+const styled = require("./dist/styled");
+const styledRtl = require("./dist/styled.rtl");
+const utilitiesUnstyled = require("./dist/utilities-unstyled");
+const utilitiesStyled = require("./dist/utilities-styled");
+const themes = require("./colors/themes");
+const colorNames = require("./colors/colorNames");
+const Color = require("color");
 
 const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
-  let diasyuiIncludedItems = []
-  let logs = false
-  if (config('daisyui.logs') != false) {
-    logs = true
+  let diasyuiIncludedItems = [];
+  let logs = false;
+  if (config("daisyui.logs") != false) {
+    logs = true;
   }
   if (logs) {
-    console.log()
-    console.log('\x1b[35m%s\x1b[0m', '🌼 daisyUI components ' + daisyuiInfo.version, '\x1b[0m', daisyuiInfo.homepage)
-    console.group()
+    console.log();
+    console.log(
+      "\x1b[35m%s\x1b[0m",
+      "🌼 daisyUI components " + daisyuiInfo.version,
+      "\x1b[0m",
+      daisyuiInfo.homepage
+    );
+    console.group();
   }
 
-  // inject @base style 
-  if (config('daisyui.base') != false) {
-    addBase(base)
-    diasyuiIncludedItems.push('base')
+  // inject @base style
+  if (config("daisyui.base") != false) {
+    addBase(base);
+    diasyuiIncludedItems.push("base");
   }
 
   // inject components
   // because rollupjs doesn't supprt dynamic require
-  let file = styled
-  if (config('daisyui.styled') == false && config('daisyui.rtl') != true) {
-    diasyuiIncludedItems.push('unstyled components')
-    file = unstyled
-  } else if (config('daisyui.styled') == false && config('daisyui.rtl') == true) {
-    diasyuiIncludedItems.push('unstyled components')
-    console.log('\x1b[36m%s\x1b[0m', ' Direction:', '\x1b[0m', 'RTL');
-    file = unstyledRtl
-  } else if (config('daisyui.styled') != false && config('daisyui.rtl') != true) {
-    diasyuiIncludedItems.push('components')
-    file = styled
-  } else if (config('daisyui.styled') !== false && config('daisyui.rtl') == true) {
-    diasyuiIncludedItems.push('components')
-    console.log('\x1b[36m%s\x1b[0m', ' Direction:', '\x1b[0m', 'RTL');
-    file = styledRtl
+  let file = styled;
+  if (config("daisyui.styled") == false && config("daisyui.rtl") != true) {
+    diasyuiIncludedItems.push("unstyled components");
+    file = unstyled;
+  } else if (
+    config("daisyui.styled") == false &&
+    config("daisyui.rtl") == true
+  ) {
+    diasyuiIncludedItems.push("unstyled components");
+    console.log("\x1b[36m%s\x1b[0m", " Direction:", "\x1b[0m", "RTL");
+    file = unstyledRtl;
+  } else if (
+    config("daisyui.styled") != false &&
+    config("daisyui.rtl") != true
+  ) {
+    diasyuiIncludedItems.push("components");
+    file = styled;
+  } else if (
+    config("daisyui.styled") !== false &&
+    config("daisyui.rtl") == true
+  ) {
+    diasyuiIncludedItems.push("components");
+    console.log("\x1b[36m%s\x1b[0m", " Direction:", "\x1b[0m", "RTL");
+    file = styledRtl;
   }
-  addComponents(file)
+  addComponents(file);
 
-  let includedThemesObj = new Object()
+  let includedThemesObj = new Object();
 
   function convertThemeColorsToHsl(input) {
-    let resultObj = {}
-    if (typeof input === 'object' && input !== null) {
+    let resultObj = {};
+    if (typeof input === "object" && input !== null) {
       Object.entries(input).forEach(([rule, value]) => {
         if (colorNames.hasOwnProperty(rule)) {
-          const hslArray = Color(value).hsl().round().array()
-          resultObj[colorNames[rule]] = hslArray[0] + " " + hslArray[1] + "%" + " " + hslArray[2] + "%"
+          const hslArray = Color(value).hsl().round().array();
+          resultObj[colorNames[rule]] =
+            hslArray[0] + " " + hslArray[1] + "%" + " " + hslArray[2] + "%";
         } else {
-          resultObj[rule] = value
+          resultObj[rule] = value;
           // console.log(input)
         }
-      })
-      return resultObj
+      });
+      return resultObj;
     }
-    return input
+    return input;
   }
 
   // add light themes
-  if (config('daisyui.themes') == false) {
+  if (config("daisyui.themes") == false) {
     Object.entries(themes).forEach(([theme, index]) => {
-      includedThemesObj[theme] = convertThemeColorsToHsl(themes[theme])
+      includedThemesObj[theme] = convertThemeColorsToHsl(themes[theme]);
     });
   }
 
   // add default themes
-  if (config('daisyui.themes') != false) {
+  if (config("daisyui.themes") != false) {
     Object.entries(themes).forEach(([theme, index]) => {
-      includedThemesObj[theme] = convertThemeColorsToHsl(themes[theme])
+      includedThemesObj[theme] = convertThemeColorsToHsl(themes[theme]);
     });
   }
 
   // add custom themes
-  if (Array.isArray(config('daisyui.themes'))) {
-    config('daisyui.themes').forEach((item, index) => {
-      if (typeof item === 'object' && item !== null) {
+  if (Array.isArray(config("daisyui.themes"))) {
+    config("daisyui.themes").forEach((item, index) => {
+      if (typeof item === "object" && item !== null) {
         Object.entries(item).forEach(([customThemeName, customThemevalue]) => {
-          includedThemesObj['[data-theme=' + customThemeName + ']'] = convertThemeColorsToHsl(customThemevalue)
-        })
+          includedThemesObj["[data-theme=" + customThemeName + "]"] =
+            convertThemeColorsToHsl(customThemevalue);
+        });
       }
-    })
+    });
   }
 
-  let themeOrder = []
-  if (Array.isArray(config('daisyui.themes'))) {
-    config('daisyui.themes').forEach((theme, index) => {
-      if (typeof theme === 'object' && theme !== null) {
+  let themeOrder = [];
+  if (Array.isArray(config("daisyui.themes"))) {
+    config("daisyui.themes").forEach((theme, index) => {
+      if (typeof theme === "object" && theme !== null) {
         Object.entries(theme).forEach(([customThemeName, customThemevalue]) => {
-          themeOrder.push(customThemeName)
-        })
-      } else if (includedThemesObj.hasOwnProperty('[data-theme=' + theme + ']')) {
-        themeOrder.push(theme)
+          themeOrder.push(customThemeName);
+        });
+      } else if (
+        includedThemesObj.hasOwnProperty("[data-theme=" + theme + "]")
+      ) {
+        themeOrder.push(theme);
       }
-    })
-  } else if (config('daisyui.themes') != false) {
-    themeOrder = ['light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate', 'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden', 'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black', 'luxury', 'dracula', 'cmyk',]
-  } else if (config('daisyui.themes') == false) {
-    themeOrder.push('light')
+    });
+  } else if (config("daisyui.themes") != false) {
+    themeOrder = [
+      "light",
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+    ];
+  } else if (config("daisyui.themes") == false) {
+    themeOrder.push("light");
   }
 
   // inject themes in order
   themeOrder.forEach((themeName, index) => {
-    if (index === 0) { // first theme as root
-      addBase({ [':root']: includedThemesObj['[data-theme=' + themeName + ']'] })
+    if (index === 0) {
+      // first theme as root
+      addBase({
+        [":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'))) {
-          addBase({ ['@media (prefers-color-scheme: dark)']: { [':root']: includedThemesObj[`[data-theme=${config('daisyui.darkTheme')}]`] } })
+      if (config("daisyui.darkTheme")) {
+        if (
+          themeOrder[0] != config("daisyui.darkTheme") &&
+          themeOrder.includes(config("daisyui.darkTheme"))
+        ) {
+          addBase({
+            ["@media (prefers-color-scheme: dark)"]: {
+              [":root"]:
+                includedThemesObj[
+                  `[data-theme=${config("daisyui.darkTheme")}]`
+                ],
+            },
+          });
         }
       } else {
-        if (themeOrder[0] != 'dark' && themeOrder.includes('dark')) {
-          addBase({ ['@media (prefers-color-scheme: dark)']: { [':root']: includedThemesObj['[data-theme=dark]'] } })
+        if (themeOrder[0] != "dark" && themeOrder.includes("dark")) {
+          addBase({
+            ["@media (prefers-color-scheme: dark)"]: {
+              [":root"]: includedThemesObj["[data-theme=dark]"],
+            },
+          });
         }
       }
       // theme 0 with name
-      addBase({ ['[data-theme=' + themeOrder[0] + ']']: includedThemesObj['[data-theme=' + themeOrder[0] + ']'] })
+      addBase({
+        ["[data-theme=" + themeOrder[0] + "]"]:
+          includedThemesObj["[data-theme=" + themeOrder[0] + "]"],
+      });
       // theme 1 with name
-      addBase({ ['[data-theme=' + themeOrder[1] + ']']: includedThemesObj['[data-theme=' + themeOrder[1] + ']'] })
+      addBase({
+        ["[data-theme=" + themeOrder[1] + "]"]:
+          includedThemesObj["[data-theme=" + themeOrder[1] + "]"],
+      });
     } else {
-      addBase({ ['[data-theme=' + themeName + ']']: includedThemesObj['[data-theme=' + themeName + ']'] })
+      addBase({
+        ["[data-theme=" + themeName + "]"]:
+          includedThemesObj["[data-theme=" + themeName + "]"],
+      });
     }
-  })
-  diasyuiIncludedItems.push('themes[' + themeOrder.length + ']')
-
+  });
+  diasyuiIncludedItems.push("themes[" + themeOrder.length + "]");
 
   // inject @utilities style needed by components
-  if (config('daisyui.utils') != false) {
-    addComponents(utilities, { variants: ['responsive'] })
-    addComponents(utilitiesUnstyled, { variants: ['responsive'] })
-    addComponents(utilitiesStyled, { variants: ['responsive'] })
-    diasyuiIncludedItems.push('utilities')
+  if (config("daisyui.utils") != false) {
+    addComponents(utilities, { variants: ["responsive"] });
+    addComponents(utilitiesUnstyled, { variants: ["responsive"] });
+    addComponents(utilitiesStyled, { variants: ["responsive"] });
+    diasyuiIncludedItems.push("utilities");
   }
   if (logs) {
-    console.log('\x1b[32m%s\x1b[0m', '✔︎ Including:', '\x1b[0m', '' + diasyuiIncludedItems.join(', '));
-    console.log()
-    console.groupEnd()
+    console.log(
+      "\x1b[32m%s\x1b[0m",
+      "✔︎ Including:",
+      "\x1b[0m",
+      "" + diasyuiIncludedItems.join(", ")
+    );
+    console.log();
+    console.groupEnd();
   }
-}
-
-
-module.exports = require("tailwindcss/plugin")(
-  mainFunction, { theme: { extend: { colors } } }
-);
-
+};
 
+module.exports = require("tailwindcss/plugin")(mainFunction, {
+  theme: { extend: { colors } },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisyui",
-  "version": "2.0.0-next.1",
+  "version": "2.0.2",
   "description": "daisyUI - Tailwind CSS Components",
   "author": "Pouya Saadeghi",
   "license": "MIT",
@@ -35,6 +35,9 @@
     "index.js",
     "colors"
   ],
+  "browserslist": [
+    "> 7%"
+  ],
   "publishConfig": {
     "access": "public",
     "branches": [

package/colors/colors/colorNames.js

@@ -1,35 +0,0 @@
-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",
-  "info-content"      : "--inc",
-
-  "success"           : "--su",
-  "success-content"   : "--suc",
-
-  "warning"           : "--wa",
-  "warning-content"   : "--wac",
-
-  "error"             : "--er",
-  "error-content"     : "--erc",
-
-}

package/colors/colors/index.js

@@ -1,53 +0,0 @@
-
-function withOpacityValue(variable, fallbackColor) {
-  return ({ opacityValue }) => {
-    let fallbackColorValue = ''
-    if (fallbackColor) {
-      fallbackColorValue = `, var(${fallbackColor})`
-    }
-    if (opacityValue === undefined) {
-      return `hsl(var(${variable}${fallbackColorValue}))`
-    }
-    return `hsl(var(${variable}${fallbackColorValue}) / ${opacityValue})`
-  }
-}
-
-let colorObject = {
-  "transparent": "transparent",
-  "current": "currentColor",
-
-  "primary": withOpacityValue("--p"),
-  "primary-focus": withOpacityValue("--pf", "--p"),
-  "primary-content": withOpacityValue("--pc"),
-
-  "secondary": withOpacityValue("--s"),
-  "secondary-focus": withOpacityValue("--sf", "--s"),
-  "secondary-content": withOpacityValue("--sc"),
-
-  "accent": withOpacityValue("--a"),
-  "accent-focus": withOpacityValue("--af", "--a"),
-  "accent-content": withOpacityValue("--ac"),
-
-  "neutral": withOpacityValue("--n"),
-  "neutral-focus": withOpacityValue("--nf", "--n"),
-  "neutral-content": withOpacityValue("--nc"),
-
-  "base-100": withOpacityValue("--b1"),
-  "base-200": withOpacityValue("--b2", "--b1"),
-  "base-300": withOpacityValue("--b3", "--b2"),
-  "base-content": withOpacityValue("--bc"),
-
-  "info": withOpacityValue("--in"),
-  "info-content": withOpacityValue("--inc", "--nc"),
-
-  "success": withOpacityValue("--su"),
-  "success-content": withOpacityValue("--suc", "--nc"),
-
-  "warning": withOpacityValue("--wa"),
-  "warning-content": withOpacityValue("--wac", "--nc"),
-
-  "error": withOpacityValue("--er"),
-  "error-content": withOpacityValue("--erc", "--nc"),
-}
-
-module.exports = colorObject