daisyui 5.0.0-alpha.4 → 5.0.0-alpha.5

package/components/tooltip.css

@@ -1,173 +1 @@
-.tooltip {
-    position: relative;
-    display: inline-block;
-    --tooltip-color: oklch(32.1785% 0.02476 255.701624);
-    --tooltip-tail: 0.1875rem;
-    --tooltip-text-color: oklch(89.4994% 0.011585 252.096176);
-    --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
-    --tooltip-tail-offset: calc(100% + 0.0625rem - var(--tooltip-tail));
-    &:before {
-      position: absolute;
-      max-width: var(--width-xs, 20rem);
-      white-space: normal;
-      border-radius: var(--radius, 0.25rem);
-      padding-top: var(--spacing-1, 0.25rem);
-      padding-bottom: var(--spacing-1, 0.25rem);
-      padding-left: var(--spacing-2, 0.5rem);
-      padding-right: var(--spacing-2, 0.5rem);
-      text-align: center;
-      font-size: var(--font-size-sm, 0.875rem);
-      line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
-      opacity: 0%;
-      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));
-      transition-delay: 100ms;
-      --tw-duration: 200ms;
-      transition-duration: 200ms;
-      --tw-ease: var(--transition-timing-function-in-out, cubic-bezier(0.4, 0, 0.2, 1));
-      transition-timing-function: var(--transition-timing-function-in-out, cubic-bezier(0.4, 0, 0.2, 1));
-      background-color: var(--tooltip-color);
-      color: var(--tooltip-text-color);
-      width: max-content;
-      pointer-events: none;
-      z-index: 1;
-      content: var(--tw-content);
-      --tw-content: attr(data-tip);
-    }
-    &:after {
-      position: absolute;
-      opacity: 0%;
-      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));
-      transition-delay: 100ms;
-      --tw-duration: 200ms;
-      transition-duration: 200ms;
-      --tw-ease: var(--transition-timing-function-in-out, cubic-bezier(0.4, 0, 0.2, 1));
-      transition-timing-function: var(--transition-timing-function-in-out, cubic-bezier(0.4, 0, 0.2, 1));
-      content: "";
-      border-style: solid;
-      border-width: var(--tooltip-tail, 0);
-      width: 0;
-      height: 0;
-      display: block;
-      position: absolute;
-    }
-  }
-  .tooltip, .tooltip-top {
-    &:before {
-      transform: translateX(-50%);
-      top: auto;
-      left: 50%;
-      right: auto;
-      bottom: var(--tooltip-offset);
-    }
-  }
-  .tooltip-bottom {
-    &:before {
-      transform: translateX(-50%);
-      top: var(--tooltip-offset);
-      left: 50%;
-      right: auto;
-      bottom: auto;
-    }
-  }
-  .tooltip-left {
-    &:before {
-      transform: translateY(-50%);
-      top: 50%;
-      left: auto;
-      right: var(--tooltip-offset);
-      bottom: auto;
-    }
-  }
-  .tooltip-right {
-    &:before {
-      transform: translateY(-50%);
-      top: 50%;
-      left: var(--tooltip-offset);
-      right: auto;
-      bottom: auto;
-    }
-  }
-  .tooltip {
-    &.tooltip-open, &:hover, &:has(:focus-visible) {
-      &:before, &:after {
-        opacity: 100%;
-        transition-delay: 75ms;
-      }
-    }
-  }
-  .tooltip:not([data-tip]):hover:before, .tooltip:not([data-tip]):hover:after {
-    visibility: hidden;
-    opacity: 0;
-  }
-  .tooltip, .tooltip-top {
-    &:after {
-      transform: translateX(-50%);
-      border-color: var(--tooltip-color) transparent transparent transparent;
-      top: auto;
-      left: 50%;
-      right: auto;
-      bottom: var(--tooltip-tail-offset);
-    }
-  }
-  .tooltip-bottom {
-    &:after {
-      transform: translateX(-50%);
-      border-color: transparent transparent var(--tooltip-color) transparent;
-      top: var(--tooltip-tail-offset);
-      left: 50%;
-      right: auto;
-      bottom: auto;
-    }
-  }
-  .tooltip-left {
-    &:after {
-      transform: translateY(-50%);
-      border-color: transparent transparent transparent var(--tooltip-color);
-      top: 50%;
-      left: auto;
-      right: calc(var(--tooltip-tail-offset) + 0.0625rem);
-      bottom: auto;
-    }
-  }
-  .tooltip-right {
-    &:after {
-      transform: translateY(-50%);
-      border-color: transparent var(--tooltip-color) transparent transparent;
-      top: 50%;
-      left: calc(var(--tooltip-tail-offset) + 0.0625rem);
-      right: auto;
-      bottom: auto;
-    }
-  }
-  .tooltip-primary {
-    --tooltip-color: oklch(49.12% 0.3096 275.75);
-    --tooltip-text-color: oklch(89.824% 0.06192 275.75);
-  }
-  .tooltip-secondary {
-    --tooltip-color: oklch(69.71% 0.329 342.55);
-    --tooltip-text-color: oklch(98.71% 0.0106 342.55);
-  }
-  .tooltip-accent {
-    --tooltip-color: oklch(76.76% 0.184 183.61);
-    --tooltip-text-color: oklch(15.352% 0.0368 183.61);
-  }
-  .tooltip-info {
-    --tooltip-color: oklch(72.06% 0.191 231.6);
-    --tooltip-text-color: oklch(0% 0 0);
-  }
-  .tooltip-success {
-    --tooltip-color: oklch(64.8% 0.15 160);
-    --tooltip-text-color: oklch(0% 0 0);
-  }
-  .tooltip-warning {
-    --tooltip-color: oklch(84.71% 0.199 83.87);
-    --tooltip-text-color: oklch(0% 0 0);
-  }
-  .tooltip-error {
-    --tooltip-color: oklch(71.76% 0.221 22.18);
-    --tooltip-text-color: oklch(0% 0 0);
-  }
+.tooltip{--tooltip-color:oklch(32.1785% .02476 255.702);--tooltip-tail:.1875rem;--tooltip-text-color:oklch(89.4994% .011585 252.096);--tooltip-offset:calc(100% + 1px + var(--tooltip-tail,0px));--tooltip-tail-offset:calc(100% + .0625rem - var(--tooltip-tail));display:inline-block;position:relative;&:before{max-width:var(--width-xs,20rem);white-space:normal;border-radius:var(--radius,.25rem);padding-top:var(--spacing-1,.25rem);padding-bottom:var(--spacing-1,.25rem);padding-left:var(--spacing-2,.5rem);padding-right:var(--spacing-2,.5rem);text-align:center;font-size:var(--font-size-sm,.875rem);line-height:var(--tw-leading,var(--font-size-sm--line-height,1.25rem));opacity:0;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(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;--tw-ease:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1));transition-duration:.2s;transition-delay:.1s;transition-timing-function:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--tooltip-color);color:var(--tooltip-text-color);pointer-events:none;z-index:1;content:var(--tw-content);--tw-content:attr(data-tip);width:max-content;position:absolute}&:after{opacity:0;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(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;--tw-ease:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1));transition-duration:.2s;transition-delay:.1s;transition-timing-function:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1));content:"";border-style:solid;border-width:var(--tooltip-tail,0);width:0;height:0;display:block;position:absolute}}.tooltip,.tooltip-top{&:before{top:auto;left:50%;right:auto;bottom:var(--tooltip-offset);transform:translate(-50%)}}.tooltip-bottom{&:before{top:var(--tooltip-offset);bottom:auto;left:50%;right:auto;transform:translate(-50%)}}.tooltip-left{&:before{top:50%;left:auto;right:var(--tooltip-offset);bottom:auto;transform:translateY(-50%)}}.tooltip-right{&:before{top:50%;left:var(--tooltip-offset);bottom:auto;right:auto;transform:translateY(-50%)}}.tooltip{&.tooltip-open,&:hover,&:has(:focus-visible){&:before,&:after{opacity:1;transition-delay:75ms}}}.tooltip:not([data-tip]):hover:before,.tooltip:not([data-tip]):hover:after{visibility:hidden;opacity:0}.tooltip,.tooltip-top{&:after{border-color:var(--tooltip-color)transparent transparent transparent;top:auto;left:50%;right:auto;bottom:var(--tooltip-tail-offset);transform:translate(-50%)}}.tooltip-bottom{&:after{border-color:transparent transparent var(--tooltip-color)transparent;top:var(--tooltip-tail-offset);bottom:auto;left:50%;right:auto;transform:translate(-50%)}}.tooltip-left{&:after{border-color:transparent transparent transparent var(--tooltip-color);top:50%;left:auto;right:calc(var(--tooltip-tail-offset) + .0625rem);bottom:auto;transform:translateY(-50%)}}.tooltip-right{&:after{border-color:transparent var(--tooltip-color)transparent transparent;top:50%;left:calc(var(--tooltip-tail-offset) + .0625rem);bottom:auto;right:auto;transform:translateY(-50%)}}.tooltip-primary{--tooltip-color:oklch(49.12% .3096 275.75);--tooltip-text-color:oklch(89.824% .06192 275.75)}.tooltip-secondary{--tooltip-color:oklch(69.71% .329 342.55);--tooltip-text-color:oklch(98.71% .0106 342.55)}.tooltip-accent{--tooltip-color:oklch(76.76% .184 183.61);--tooltip-text-color:oklch(15.352% .0368 183.61)}.tooltip-info{--tooltip-color:oklch(72.06% .191 231.6);--tooltip-text-color:oklch(0% 0 0)}.tooltip-success{--tooltip-color:oklch(64.8% .15 160);--tooltip-text-color:oklch(0% 0 0)}.tooltip-warning{--tooltip-color:oklch(84.71% .199 83.87);--tooltip-text-color:oklch(0% 0 0)}.tooltip-error{--tooltip-color:oklch(71.76% .221 22.18);--tooltip-text-color:oklch(0% 0 0)}

package/full.css

@@ -1,8 +1,10 @@
 @import url(https://cdn.jsdelivr.net/npm/tailwindcss@4.0.0-alpha.25/preflight.min.css) layer(base);
-@import url(colors.css) layer(base);
 @import url(themes/default/index.css) layer(themes);
 @import url(themes/light/index.css) layer(themes);
 @import url(themes/dark/index.css) layer(themes);
+@import url(base/tap-color.css) layer(base);
+@import url(base/root-color.css) layer(base);
+@import url(base/scrollbar.css) layer(base);
 @import url(components/tooltip.css) layer(components);
 @import url(components/tab.css) layer(components);
 @import url(components/radio.css) layer(components);
@@ -16,5 +18,10 @@
 @import url(components/mask.css) layer(components);
 @import url(components/button.css) layer(components);
 @import url(components/toggle.css) layer(components);
+@import url(components/avatar.css) layer(components);
 @import url(components/kbd.css) layer(components);
 @import url(components/menu.css) layer(components);
+@import url(components/dropdown.css) layer(components);
+@import url(colors/properties.css) layer(utilities);
+@import url(colors/states.css) layer(utilities);
+@import url(colors/responsive.css) layer(utilities);

package/index.css

@@ -1,7 +1,11 @@
 @import "./themes";
 @import "./themes/light";
 @import "./themes/dark";
+@config "./base/tap-color/config.js";
+@config "./base/root-color/config.js";
+@config "./base/scrollbar/config.js";
 @config "./components/kbd/config.js";
+@config "./components/dropdown/config.js";
 @config "./components/tooltip/config.js";
 @config "./components/rating/config.js";
 @config "./components/radio/config.js";
@@ -13,6 +17,7 @@
 @config "./components/mask/config.js";
 @config "./components/button/config.js";
 @config "./components/menu/config.js";
+@config "./components/avatar/config.js";
 @config "./components/select/config.js";
 @config "./components/range/config.js";
 @config "./components/badge/config.js";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "daisyui",
-	"version": "5.0.0-alpha.4",
+	"version": "5.0.0-alpha.5",
 	"description": "daisyUI - Tailwind CSS Components",
 	"author": "Pouya Saadeghi",
 	"license": "MIT",
@@ -35,10 +35,12 @@
 	"main": "index.css",
 	"files": [
 		"themes",
+		"colors",
+		"base",
 		"components",
+		"utilities",
 		"index.css",
 		"full.css",
-		"colors.css",
 		"functions/plugin.js"
 	],
 	"engines": {
@@ -68,6 +70,7 @@
 		"@biomejs/biome": "^1.9.2",
 		"@tailwindcss/cli": "^4.0.0-alpha.25",
 		"commit-and-tag-version": "12.4.1",
+		"lightningcss": "^1.27.0",
 		"postcss": "^8.4.45",
 		"postcss-js": "^4.0.1",
 		"postcss-prefixer": "^3.0.0",