daisyui 5.0.0-alpha.0 → 5.0.0-alpha.3

package/components/badge/config.js

@@ -0,0 +1,12 @@
+import { plugin } from '../../functions/plugin.js';
+import index from './index.js';
+
+export default {
+	plugins: [
+		plugin(({ addComponents }) => {
+			addComponents({
+				...index
+			});
+		})
+	],
+};

package/components/badge/index.css

@@ -0,0 +1 @@
+@config "./config.js";

package/components/badge/index.js

@@ -0,0 +1,74 @@
+export default {
+  ".badge": {
+    "@apply inline-flex items-center justify-center transition duration-200 ease-out h-5 text-sm leading-5 rounded-badge border text-base-content": {},
+    "width": "fit-content",
+    "paddingLeft": "0.563rem",
+    "paddingRight": "0.563rem",
+    "background": "var(--badge-color, var(--color-base-100))",
+    "borderColor": "var(--badge-color, var(--color-base-200))",
+    "&.badge-outline": {
+      "@apply border-current/50 bg-transparent": {},
+      "color": "var(--badge-color, var(--color-base-content))"
+    }
+  },
+  ".badge-faded": {
+    "color": "color-mix(in xyz, var(--badge-color) 80%, var(--color-base-content))",
+    "background": "color-mix(in xyz, var(--badge-color) 10%, var(--color-base-100))",
+    "borderColor": "color-mix(in xyz, var(--badge-color) 7%, transparent)"
+  },
+  ".badge-primary": {
+    "--badge-color": "var(--color-primary)",
+    "@apply text-primary-content": {}
+  },
+  ".badge-secondary": {
+    "--badge-color": "var(--color-secondary)",
+    "@apply text-secondary-content": {}
+  },
+  ".badge-accent": {
+    "--badge-color": "var(--color-accent)",
+    "@apply text-accent-content": {}
+  },
+  ".badge-neutral": {
+    "--badge-color": "var(--color-neutral)",
+    "@apply text-neutral-content": {}
+  },
+  ".badge-info": {
+    "--badge-color": "var(--color-info)",
+    "@apply text-info-content": {}
+  },
+  ".badge-success": {
+    "--badge-color": "var(--color-success)",
+    "@apply text-success-content": {}
+  },
+  ".badge-warning": {
+    "--badge-color": "var(--color-warning)",
+    "@apply text-warning-content": {}
+  },
+  ".badge-error": {
+    "--badge-color": "var(--color-error)",
+    "@apply text-error-content": {}
+  },
+  ".badge-ghost": {
+    "@apply border-base-200 bg-base-200 text-base-content": {}
+  },
+  ".badge-xs": {
+    "@apply h-3 text-xs leading-3": {},
+    "paddingLeft": "0.313rem",
+    "paddingRight": "0.313rem"
+  },
+  ".badge-sm": {
+    "@apply h-4 text-xs leading-4": {},
+    "paddingLeft": "0.438rem",
+    "paddingRight": "0.438rem"
+  },
+  ".badge-md": {
+    "@apply h-5 text-sm leading-5": {},
+    "paddingLeft": "0.563rem",
+    "paddingRight": "0.563rem"
+  },
+  ".badge-lg": {
+    "@apply h-6 text-base leading-6": {},
+    "paddingLeft": "0.688rem",
+    "paddingRight": "0.688rem"
+  }
+};

package/components/badge.css

@@ -0,0 +1,109 @@
+.badge {
+    display: inline-flex;
+    height: var(--spacing-5, 1.25rem);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-badge, 1.9rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
+    --tw-leading: var(--line-height-5, 1.25rem);
+    line-height: var(--line-height-5, 1.25rem);
+    color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
+    transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
+    width: fit-content;
+    padding-left: 0.563rem;
+    padding-right: 0.563rem;
+    background: var(--badge-color, var(--color-base-100));
+    border-color: var(--badge-color, var(--color-base-200));
+    &.badge-outline {
+      border-color: color-mix(in srgb, currentColor 50%, transparent);
+      background-color: transparent;
+      color: var(--badge-color, var(--color-base-content));
+    }
+  }
+  .badge-faded {
+    color: color-mix(in xyz, var(--badge-color) 80%, var(--color-base-content));
+    background: color-mix(in xyz, var(--badge-color) 10%, var(--color-base-100));
+    border-color: color-mix(in xyz, var(--badge-color) 7%, transparent);
+  }
+  .badge-primary {
+    --badge-color: var(--color-primary);
+    color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
+  }
+  .badge-secondary {
+    --badge-color: var(--color-secondary);
+    color: var(--color-secondary-content, oklch(98.71% 0.0106 342.55));
+  }
+  .badge-accent {
+    --badge-color: var(--color-accent);
+    color: var(--color-accent-content, oklch(15.352% 0.0368 183.61));
+  }
+  .badge-neutral {
+    --badge-color: var(--color-neutral);
+    color: var(--color-neutral-content, oklch(89.4994% 0.011585 252.096176));
+  }
+  .badge-info {
+    --badge-color: var(--color-info);
+    color: var(--color-info-content, oklch(0% 0 0));
+  }
+  .badge-success {
+    --badge-color: var(--color-success);
+    color: var(--color-success-content, oklch(0% 0 0));
+  }
+  .badge-warning {
+    --badge-color: var(--color-warning);
+    color: var(--color-warning-content, oklch(0% 0 0));
+  }
+  .badge-error {
+    --badge-color: var(--color-error);
+    color: var(--color-error-content, oklch(0% 0 0));
+  }
+  .badge-ghost {
+    border-color: var(--color-base-200, oklch(96.1151% 0 0));
+    background-color: var(--color-base-200, oklch(96.1151% 0 0));
+    color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+  }
+  .badge-xs {
+    height: var(--spacing-3, 0.75rem);
+    font-size: var(--font-size-xs, 0.75rem);
+    line-height: var(--tw-leading, var(--font-size-xs--line-height, 1rem));
+    --tw-leading: var(--line-height-3, 0.75rem);
+    line-height: var(--line-height-3, 0.75rem);
+    padding-left: 0.313rem;
+    padding-right: 0.313rem;
+  }
+  .badge-sm {
+    height: var(--spacing-4, 1rem);
+    font-size: var(--font-size-xs, 0.75rem);
+    line-height: var(--tw-leading, var(--font-size-xs--line-height, 1rem));
+    --tw-leading: var(--line-height-4, 1rem);
+    line-height: var(--line-height-4, 1rem);
+    padding-left: 0.438rem;
+    padding-right: 0.438rem;
+  }
+  .badge-md {
+    height: var(--spacing-5, 1.25rem);
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
+    --tw-leading: var(--line-height-5, 1.25rem);
+    line-height: var(--line-height-5, 1.25rem);
+    padding-left: 0.563rem;
+    padding-right: 0.563rem;
+  }
+  .badge-lg {
+    height: var(--spacing-6, 1.5rem);
+    font-size: var(--font-size-base, 1rem);
+    line-height: var(--tw-leading, var(--font-size-base--line-height, 1.5rem));
+    --tw-leading: var(--line-height-6, 1.5rem);
+    line-height: var(--line-height-6, 1.5rem);
+    padding-left: 0.688rem;
+    padding-right: 0.688rem;
+  }

package/components/button/config.js

@@ -1,12 +1,12 @@
-import { plugin } from '../../plugin.js';
+import { plugin } from '../../functions/plugin.js';
 import index from './index.js';
 
 export default {
-  plugins: [
-    plugin(function ({ addComponents }) {
-      addComponents({
-        ...index
-      });
-    })
-  ],
+	plugins: [
+		plugin(({ addComponents }) => {
+			addComponents({
+				...index
+			});
+		})
+	],
 };

package/components/button/index.js

@@ -1,140 +1,160 @@
 export default {
   ".btn": {
-    "@apply rounded-[--radius-btn] inline-flex h-12 min-h-[3rem] shrink-0 cursor-pointer select-none flex-wrap items-center justify-center px-4 text-center gap-2 font-semibold duration-200 ease-out [border-width:var(--spacing-button-border)] text-base-content outline-base-content no-underline shadow-sm bg-[var(--btn-color,var(--color-base-200))] border-[var(--btn-color,var(--color-base-200))] outline-offset-2 text-sm/none [transition-property:color,background-color,border-color,opacity,box-shadow,transform]": {},
-    "borderTopColor": "color-mix(in oklab, var(--btn-color,var(--color-base-200)) 93%, white)",
-    "borderBottomColor": "color-mix(in oklab, var(--btn-color,var(--color-base-200)) 98%, black)",
-    "@media (hover:hover)": [
-      {
-        "@apply hover:bg-[color-mix(in_oklab,var(--btn-color,var(--color-base-200))_90%,black)]": {}
-      },
-      {
-        "@apply hover:border-[color-mix(in_oklab,var(--btn-color,var(--color-base-200))_90%,black)]": {}
-      }
-    ],
+    "@apply text-base-content outline-base-content inline-flex shrink-0 cursor-pointer flex-wrap items-center justify-center gap-2 rounded-[var(--radius-btn)] text-center text-sm/none font-semibold no-underline outline-offset-2 duration-200 ease-out select-none align-middle h-10 px-4": {},
+    "transitionProperty": "color, background-color, border-color, opacity, box-shadow, transform",
+    "backgroundColor": "var(--btn-bg, var(--color-base-200))",
+    "borderWidth": "var(--spacing-button-border)",
+    "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 2%)",
+    "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 4%)",
+    "boxShadow": "0 1px 0 0 color-mix(in oklch, white 3%, transparent) inset,\n    0 1px 1px 0 oklch(0% 0 0/0.07)",
+    "&:hover": {
+      "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)",
+      "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%)",
+      "backgroundColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)"
+    },
+    "&.btn-active": {
+      "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)",
+      "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%)",
+      "backgroundColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)"
+    },
     "&:focus-visible": {
       "@apply outline outline-2": {}
     },
     "&:active": {
       "&:focus": {
-        "@apply [transform:scale(var(--btn-focus-scale,0.97))] animate-[button-pop_0s_ease-out]": {}
+        "transform": "scale(var(--btn-focus-scale, 0.98))",
+        "@apply animate-[button-pop_0s_ease-out]": {},
+        "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)",
+        "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%)",
+        "boxShadow": "0 1px 0 0 oklch(0% 0 0/0.07) inset,\n        0 0 0 0 oklch(0% 0 0/0.1)"
       },
       "&:hover": {
-        "@apply animate-[button-pop_0s_ease-out] [transform:scale(var(--btn-focus-scale,0.97))]": {}
+        "transform": "scale(var(--btn-focus-scale, 0.97))",
+        "@apply animate-[button-pop_0s_ease-out]": {}
       }
     },
     "&:is(:disabled, [disabled], .btn-disabled)": {
-      "@apply pointer-events-none bg-neutral/20 text-base-content/20 border-transparent [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:bg-neutral/20 [@media(hover:hover)]:text-base-content/20 [@media(hover:hover)]:border-transparent": {}
-    },
-    "&:is(input[type=\"checkbox\"]),\n    &:is(input[type=\"radio\"])": {
-      "@apply w-auto appearance-none": {}
-    }
-  },
-  ".btn-square": {
-    "@apply size-12 p-0": {},
-    "@apply p-0": {},
-    "&:where(.btn-xs)": {
-      "@apply size-6": {}
-    },
-    "&:where(.btn-sm)": {
-      "@apply size-8": {}
-    },
-    "&:where(.btn-md)": {
-      "@apply size-12": {}
-    },
-    "&:where(.btn-lg)": {
-      "@apply size-16": {}
-    }
-  },
-  ".btn-circle": {
-    "@apply size-12 rounded-full p-0": {},
-    "@apply rounded-full p-0": {},
-    "&:where(.btn-xs)": {
-      "@apply size-6": {}
-    },
-    "&:where(.btn-sm)": {
-      "@apply size-8": {}
-    },
-    "&:where(.btn-md)": {
-      "@apply size-12": {}
+      "@apply bg-neutral/20 text-base-content/20 pointer-events-none border-transparent": {},
+      "&:hover": {
+        "@apply bg-neutral/20 text-base-content/20 pointer-events-none border-transparent": {}
+      }
     },
-    "&:where(.btn-lg)": {
-      "@apply size-16": {}
+    "&:is(input[type=checkbox]),\n  &:is(input[type=radio])": {
+      "@apply w-auto appearance-none": {},
+      "&::after": {
+        "@apply content-[attr(aria-label)]": {}
+      },
+      "&:checked": {
+        "@apply border-primary bg-primary text-primary-content": {},
+        "&:focus-visible": {
+          "@apply outline-primary": {}
+        },
+        "&:hover": {
+          "backgroundColor": "color-mix(in oklab, var(--color-primary) 90%, black)",
+          "borderColor": "color-mix(in oklab, var(--color-primary) 90%, black)"
+        }
+      }
     }
   },
   ".btn-primary": {
-    "@apply [--btn-color:var(--color-primary)] text-primary-content outline-primary": {}
+    "--btn-bg": "var(--color-primary)",
+    "@apply text-primary-content outline-primary": {}
   },
   ".btn-secondary": {
-    "@apply [--btn-color:var(--color-secondary)] text-secondary-content outline-secondary": {}
+    "--btn-bg": "var(--color-secondary)",
+    "@apply text-secondary-content outline-secondary": {}
   },
   ".btn-accent": {
-    "@apply [--btn-color:var(--color-accent)] text-accent-content outline-accent": {}
+    "--btn-bg": "var(--color-accent)",
+    "@apply text-accent-content outline-accent": {}
   },
   ".btn-neutral": {
-    "@apply [--btn-color:var(--color-neutral)] text-neutral-content outline-neutral": {}
+    "--btn-bg": "var(--color-neutral)",
+    "@apply text-neutral-content outline-neutral": {}
   },
   ".btn-info": {
-    "@apply [--btn-color:var(--color-info)] text-info-content outline-info": {}
+    "--btn-bg": "var(--color-info)",
+    "@apply text-info-content outline-info": {}
   },
   ".btn-success": {
-    "@apply [--btn-color:var(--color-success)] text-success-content outline-success": {}
+    "--btn-bg": "var(--color-success)",
+    "@apply text-success-content outline-success": {}
   },
   ".btn-warning": {
-    "@apply [--btn-color:var(--color-warning)] text-warning-content outline-warning": {}
+    "--btn-bg": "var(--color-warning)",
+    "@apply text-warning-content outline-warning": {}
   },
   ".btn-error": {
-    "@apply [--btn-color:var(--color-error)] text-error-content outline-error": {}
+    "--btn-bg": "var(--color-error)",
+    "@apply text-error-content outline-error": {}
   },
   ".btn.glass": {
-    "@apply shadow-none outline-current [@media(hover:hover)]:hover:[--glass-opacity:25%] [@media(hover:hover)]:hover:[--glass-border-opacity:15%] [&.btn-active]:[--glass-opacity:25%] [&.btn-active]:[--glass-border-opacity:15%]": {}
+    "@apply shadow-none outline-current hover:[--glass-border-opacity:15%] hover:[--glass-opacity:25%]": {},
+    "&.btn-active": {
+      "--glass-border-opacity": "15%",
+      "--glass-opacity": "25%"
+    }
   },
   ".btn-ghost": {
-    "@apply border border-transparent bg-transparent text-current shadow-none outline-current [@media(hover:hover)]:hover:bg-base-content/20 [@media(hover:hover)]:hover:border-transparent [&.btn-active]:bg-base-content/20 [&.btn-active]:border-transparent": {}
+    "@apply hover:bg-base-content/20 border border-transparent bg-transparent text-current shadow-none outline-current hover:border-transparent": {},
+    "&.btn-active": {
+      "@apply bg-base-content/20 border-transparent": {}
+    }
   },
   ".btn-link": {
-    "@apply text-primary border-transparent bg-transparent underline shadow-none outline-current [@media(hover:hover)]:hover:border-transparent [@media(hover:hover)]:hover:bg-transparent [@media(hover:hover)]:hover:underline [&.btn-active]:border-transparent [&.btn-active]:bg-transparent [&.btn-active]:underline": {}
+    "@apply text-primary border-transparent bg-transparent underline shadow-none outline-current hover:border-transparent hover:bg-transparent hover:underline": {},
+    "&.btn-active": {
+      "@apply border-transparent bg-transparent underline": {}
+    }
   },
   ".btn-outline": {
-    "@apply text-[var(--btn-color)] bg-transparent shadow-none [&.btn-active]:text-base-content [&.btn-active]:bg-[color-mix(in_oklab,var(--btn-color,var(--color-base-200))_90%,black)] [&.btn-active]:border-[color-mix(in_oklab,var(--btn-color,var(--color-base-200))_90%,black)]": {},
-    "&.btn-primary": {
-      "@apply [@media(hover:hover)]:hover:text-primary-content text-primary [&.btn-active]:text-primary-content": {}
-    },
-    "&.btn-secondary": {
-      "@apply [@media(hover:hover)]:hover:text-secondary-content text-secondary [&.btn-active]:text-secondary-content": {}
-    },
-    "&.btn-accent": {
-      "@apply [@media(hover:hover)]:hover:text-accent-content text-accent [&.btn-active]:text-accent-content": {}
-    },
-    "&.btn-neutral": {
-      "@apply [@media(hover:hover)]:hover:text-neutral-content text-neutral [&.btn-active]:text-neutral-content": {}
+    "&:not(.btn-active):not(:hover)": {
+      "@apply bg-transparent text-[var(--btn-bg)] shadow-none": {}
     },
-    "&.btn-success": {
-      "@apply [@media(hover:hover)]:hover:text-success-content text-success [&.btn-active]:text-success-content": {}
+    "&.btn-active": {
+      "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)) 90%, black)",
+      "backgroundColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)) 90%, black)"
+    }
+  },
+  ".btn-xs": {
+    "@apply h-6 px-2": {},
+    "fontSize": "var(--font-size-xs)"
+  },
+  ".btn-sm": {
+    "@apply h-8 px-3": {},
+    "fontSize": "var(--font-size-sm)"
+  },
+  ".btn-md": {
+    "@apply h-10 px-4": {},
+    "fontSize": "var(--font-size-sm)"
+  },
+  ".btn-lg": {
+    "@apply h-14 px-6": {},
+    "fontSize": "var(--font-size-lg)"
+  },
+  ".btn-square": {
+    "@apply px-0 size-12": {},
+    "&.btn-xs": {
+      "@apply size-6": {}
     },
-    "&.btn-info": {
-      "@apply [@media(hover:hover)]:hover:text-info-content text-info [&.btn-active]:text-info-content": {}
+    "&.btn-sm": {
+      "@apply size-8": {}
     },
-    "&.btn-warning": {
-      "@apply [@media(hover:hover)]:hover:text-warning-content text-warning [&.btn-active]:text-warning-content": {}
+    "&.btn-md": {
+      "@apply size-12": {}
     },
-    "&.btn-error": {
-      "@apply [@media(hover:hover)]:hover:text-error-content text-error [&.btn-active]:text-error-content": {}
+    "&.btn-lg": {
+      "@apply size-16": {}
     }
   },
-  ".btn:is(input[type=\"checkbox\"]):after,\n.btn:is(input[type=\"radio\"]):after": {
-    "@apply content-[attr(aria-label)]": {}
+  ".btn-circle": {
+    "@apply aspect-square rounded-full px-0": {}
   },
-  ".btn:is(input[type=\"checkbox\"]:checked),\n.btn:is(input[type=\"radio\"]:checked)": {
-    "@apply border-primary bg-primary text-primary-content": {},
-    "@media (hover: hover)": {
-      "&:hover": {
-        "backgroundColor": "color-mix(in oklab, var(--color-primary) 90%, black)",
-        "borderColor": "color-mix(in oklab, var(--color-primary) 90%, black)"
-      }
-    },
-    "&:focus-visible": {
-      "@apply outline-primary": {}
-    }
+  ".btn-wide": {
+    "@apply w-64": {}
+  },
+  ".btn-block": {
+    "@apply w-full": {}
   },
   "@keyframes button-pop": {
     "0%": {
@@ -146,27 +166,5 @@ export default {
     "100%": {
       "transform": "scale(1)"
     }
-  },
-  ".btn-xs": {
-    "@apply h-6 min-h-[1.5rem] px-2": {},
-    "fontSize": "0.75rem"
-  },
-  ".btn-sm": {
-    "@apply h-8 min-h-[2rem] px-3": {},
-    "fontSize": "0.875rem"
-  },
-  ".btn-md": {
-    "@apply h-12 min-h-[3rem] px-4": {},
-    "fontSize": "0.875rem"
-  },
-  ".btn-lg": {
-    "@apply h-16 min-h-[4rem] px-6": {},
-    "fontSize": "1.125rem"
-  },
-  ".btn-wide": {
-    "@apply w-64": {}
-  },
-  ".btn-block": {
-    "@apply w-full": {}
   }
 };