daisyui 1.25.4 → 2.0.0

package/README.md

@@ -1,22 +1,22 @@
 <div align="center">
 
-[![][logo-url]][docs-url]  
+[![][logo-url]][docs-url]
 
 **Tailwind CSS Components**  
 Adds component classes like `btn`, `card` and more to Tailwind CSS
 
 [ [See all components][docs-url] ]
-  
-[![][tweet]][tweet-url]  
+
+[![][tweet]][tweet-url]
 
 </div>
 
-[![][banner-url]][docs-url]  
+[![][banner-url]][docs-url]
 
-# daisyUI  
-[![][build]][build-url] [![][npm]][npm-url] [![][number-of-components]][docs-url] [![][license]][license-url]  
-[![][dl]][npm-url] [![][stars]][gh-url] [![][commit]][gh-url]   
+# daisyUI 2.0
 
+[![][build]][build-url] [![][npm]][npm-url] [![][number-of-components]][docs-url] [![][license]][license-url]  
+[![][dl]][npm-url] [![][stars]][gh-url] [![][commit]][gh-url]
 
 - 👉 [ [See all components][docs-url] ]
 - 📘 Documents: [daisyui.com][docs-url]
@@ -25,7 +25,8 @@ Adds component classes like `btn`, `card` and more to Tailwind CSS
 
 ---
 
-## 🌼 Features   
+## 🌼 Features
+
 <details>
 <summary>
   show / hide
@@ -50,7 +51,7 @@ Adds component classes like `btn`, `card` and more to Tailwind CSS
 
 ---
 
-## 📀 Install now!  
+## 📀 Install now!
 
 ```bash
 npm i daisyui
@@ -58,135 +59,158 @@ npm i daisyui
 
 Then add daisyUI to your `tailwind.config.js`  
 [ [Read more][docs-url-install] ]
+
 ```js
 module.exports = {
-
-  plugins: [
-    require('daisyui'),
-  ],
-
-}
+  plugins: [require("daisyui")],
+};
 ```
 
-
 <details>
 <summary>
   Or use a CDN
 </summary>
 
+Loading CSS files from CDN is not recommended for production. It's better to install Tailwind and daisyUI as Nodejs dependencies so you can config/customize everything, and purge unused styles.\*
 
-Loading CSS files from CDN is not recommended for production. It's better to install Tailwind and daisyUI as Nodejs dependencies so you can config/customize everything, and purge unused styles.*  
-
-  
 ```html
-<link href="https://cdn.jsdelivr.net/npm/daisyui@1.25.3/dist/full.css" rel="stylesheet" type="text/css" />
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
+<link
+  href="https://cdn.jsdelivr.net/npm/daisyui@1.25.4/dist/full.css"
+  rel="stylesheet"
+  type="text/css"
+/>
+<link
+  href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css"
+  rel="stylesheet"
+  type="text/css"
+/>
 ```
 
 </details>
 
 ---
-## 🚀 Use  
-Use component classes to build your UI.  
+
+## 🚀 Use
+
+Use component classes to build your UI.
+
 ```html
 <a class="btn">Hello!</a>
 ```
+
 ```html
-<input type="checkbox" class="checkbox"/>
+<input type="checkbox" class="checkbox" />
 ```
+
 ```html
-<input type="checkbox" class="toggle"/>
+<input type="checkbox" class="toggle" />
 ```
+
 ```html
-<div class="alert alert-success">
-  Message sent successfully 
-</div>
+<div class="alert alert-success">Message sent successfully</div>
 ```
 
 👉 [See all components][docs-url]  
-🎲 [Try it online][tw-play-url]  
+🎲 [Try it online][tw-play-url]
 
 ---
 
-## 📘 Documents + Examples  
+## 📘 Documents + Examples
+
 See the official site:  
 [ [daisyui.com][docs-url] ↗︎ ]
 
 ---
 
-## 🤝 Contributing  
+## 🤝 Contributing
+
 Read the documents for more info:  
 [ [Read contribution guide](https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md) ]
 
 ---
+
 ## List of Components
+
 <details>
 <summary>
   show / hide
 </summary>
 
-- [x] Alert
-- [x] Artboard
-- [ ] App bar
-- [x] Avatar
-  - [x] Avatar group
-- [x] Badge
-- [ ] Banner
-- [x] Breadcrumb
-- [x] Button
-  - [x] Button group
-- [ ] Calendar
-- [x] Carousel
-- [x] Card
-- [ ] Chat bubble
-- [x] Collapse (Accordion)
-- [ ] Comment
-- [x] Countdown
-- [ ] Cover
-- [x] Divider
-- [x] Drawer
-- [ ] Empty placeholder
-- [x] Footer
-- [ ] Form
-  - [x] Select
-  - [x] Text input
-  - [x] Text area
+- Actions
+  - [x] Button
+  - [x] Dropdown
+  - [x] Modal
+  - [x] Swap
+
+- Data display
+  - [x] Alert
+  - [x] Avatar
+  - [x] Badge
+  - [ ] Banner
+  - [ ] Calendar
+  - [x] Card
+  - [x] Carousel
+  - [ ] Chat bubble
+  - [x] Collapse
+  - [ ] Comment
+  - [x] Countdown
+  - [ ] Empty placeholder
+  - [x] Kbd
+  - [ ] Loading
+  - [x] Progress
+  - [x] Radial progress
+  - [x] Stat
+  - [x] Table
+  - [ ] Tag
+  - [ ] Timeline
+  - [ ] Toast
+  - [x] Tooltip
+  - [ ] Treeview
+
+- Data input
   - [x] Checkbox
+  - [x] Text input
   - [x] Radio
-  - [x] Range slider
+  - [x] Range
   - [x] Rating
+  - [x] Select
+  - [x] Textarea
   - [x] Toggle
   - [ ] Upload
-- [x] Hero
-- [x] Indicator
-- [x] Kbd
-- [x] Link
-- [ ] Loading
-- [x] Menu
-- [ ] Mockup
+  
+- Layout
+  - [x] Artboard
+  - [x] Button group
+  - [x] Divider
+  - [x] Drawer
+  - [x] Footer
+  - [x] Hero
+  - [x] Indicator
+  - [x] Input group
+  - [x] Mask
+  - [x] Stack
+
+- Navigation
+  - [ ] App bar
+  - [x] Breadcrumbs
+  - [x] Link
+  - [x] Menu
+  - [x] Navbar
+  - [x] Pagination
+  - [x] Steps
+  - [x] Tab
+
+- Mockup
   - [ ] Browser
   - [x] Code
   - [x] Phone
   - [x] Window
-- [x] Navbar
-- [x] Mask
-- [x] Modal
-- [x] Pagination
-- [x] Progress
-- [x] Stack
-- [x] Stat
-- [x] Steps
-- [ ] Tag
-- [x] Table
-- [x] Tabs
-- [ ] Timeline
-- [ ] Toast
-- [x] Tooltip
-- [ ] Treeview
+
 
 </details>
 
 ---
+
 ## Featured on:
 
 <details>
@@ -215,6 +239,7 @@ Read the documents for more info:
   - [How to use daisyUI in SvelteKit?](https://www.youtube.com/watch?v=haKnkk6ds20) 
   - [DaisyUI Untuk Yang Mau Pindah ke TailwindCSS dari Bootstrap (Indonesian)](https://www.youtube.com/watch?v=Wm2g6FWec34)
   - [Next.js - Tailwind - DeisyUI Setup](https://www.youtube.com/watch?v=uXQgJbUj3PQ)
+  - [Svelte Setup with Vite, Tailwind, DaisyUI. Custom Themes!](https://www.youtube.com/watch?v=5lF5PxBJoso)
 - Courses
   - [Building with SvelteKit and GraphCMS](https://explorers.netlify.com/learn/building-with-sveltekit-and-graphcms)
   - [Svelte for Beginners by Mike Karan](https://www.udemy.com/course/svelte-for-beginners/)
@@ -226,18 +251,16 @@ Read the documents for more info:
 </details>
 
 ---
-  
+
 <div align="center">
   
   
 ༼ つ ◕_◕ ༽つ  Please share  
   
-[![][tweet]][tweet-url]  
+[![][tweet]][tweet-url]
 
 </div>
 
-
-
 [install-size]: https://badgen.net/bundlephobia/minzip/daisyui?label=bundle%20size&color=green
 [build]: https://badgen.net/github/checks/saadeghi/daisyui?label=build
 [npm]: https://badgen.net/github/tag/saadeghi/daisyui?label=version&color=green
@@ -246,7 +269,6 @@ Read the documents for more info:
 [license]: https://badgen.net/github/license/saadeghi/daisyui?color=green
 [stars]: https://badgen.net/github/stars/saadeghi/daisyui?color=green
 [tweet]: https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui
-
 [install-size-url]: https://bundlephobia.com/result?p=daisyui
 [license-url]: https://github.com/saadeghi/daisyui/blob/master/LICENSE
 [npm-url]: https://www.npmjs.com/package/daisyui
@@ -258,11 +280,8 @@ Read the documents for more info:
 [jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
 [build-url]: https://github.com/saadeghi/daisyui/actions
 [tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AUI%20Components%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
-[number-of-components]: https://badgen.net/badge/total%20components/41/green
-
+[number-of-components]: https://badgen.net/badge/total%20components/45/green
 [docs-url-install]: https://daisyui.com/docs/install
 [docs-url]: https://daisyui.com/
 [logo-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg
 [banner-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/card-3.png
-
-

package/colors/colorNames.js

@@ -1,27 +1,34 @@
 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",
-  "success"           : "--su",
-  "warning"           : "--wa",
-  "error"             : "--er",
-}
+  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/index.js

@@ -1,20 +1,52 @@
-const colorValues = require('./colorNames')
-
-let colorObject = {
-  "transparent": "transparent",
-  "current": "currentColor",
-}
-
-for (const [key, item] of Object.entries(colorValues)) {
-  colorObject[key] = ({ opacityVariable, opacityValue }) => {
-    if (opacityValue !== undefined) {
-      return `hsla(var(`+ item +`) / ${opacityValue})`
+function withOpacityValue(variable, fallbackColor) {
+  return ({ opacityValue }) => {
+    let fallbackColorValue = "";
+    if (fallbackColor) {
+      fallbackColorValue = `, var(${fallbackColor})`;
     }
-    if (opacityVariable !== undefined) {
-      return `hsla(var(`+ item +`) / var(${opacityVariable}, 1))`
+    if (opacityValue === undefined) {
+      return `hsl(var(${variable}${fallbackColorValue}))`;
     }
-    return `hsl(var(`+ item +`))`
-  }
+    return `hsl(var(${variable}${fallbackColorValue}) / ${opacityValue})`;
+  };
 }
 
-module.exports = colorObject
+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;