CHANGELOG.md

@@ -2,10 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## 5.0.4 (2025-03-14)
+
 ## 5.0.3 (2025-03-12)
 
-## 5.0.2 (2025-03-11)
+### Bug Fixes
 
+* fix: CDN color opacity utilities
+* fix: dropdown-end position
+* fix: diff outline
+* fix: diff-resizer size and placement
+* fix: checked button style
+
+## 5.0.2 (2025-03-11)
 
 ### Bug Fixes
 

packages/daisyui/functions/pluginOptionsHandler.js

@@ -51,6 +51,13 @@ export const pluginOptionsHandler = (() => {
     } else if (themes) {
       const themeArray = Array.isArray(themes) ? themes : [themes]
 
+      // For single theme with --default flag, skip the other applications
+      if (themeArray.length === 1 && themeArray[0].includes("--default")) {
+        const [themeName, ...flags] = themeArray[0].split(" ")
+        applyTheme(themeName, flags)
+        return { include, exclude, prefix }
+      }
+
       // default theme
       themeArray.forEach((themeOption) => {
         const [themeName, ...flags] = themeOption.split(" ")

packages/daisyui/functions/pluginOptionsHandler.test.js

@@ -84,3 +84,35 @@ test("pluginOptionsHandler should return include, exclude, and prefix", () => {
   expect(result.exclude).toEqual(["exclude"])
   expect(result.prefix).toEqual("prefix")
 })
+
+test("pluginOptionsHandler should not create duplicate styles for single light theme", () => {
+  mockAddBase.mockReset()
+
+  const options = { themes: ["light --default"] }
+
+  pluginOptionsHandler(options, mockAddBase, mockThemesObject, "1.0.0")
+
+  // Should be called exactly once
+  expect(mockAddBase).toHaveBeenCalledTimes(1)
+  expect(mockAddBase).toHaveBeenCalledWith({
+    ":where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]": {
+      color: "white",
+    },
+  })
+})
+
+test("pluginOptionsHandler should not create duplicate styles for single dark theme", () => {
+  mockAddBase.mockReset()
+
+  const options = { themes: ["dark --default"] }
+
+  pluginOptionsHandler(options, mockAddBase, mockThemesObject, "1.0.0")
+
+  // Should be called exactly once
+  expect(mockAddBase).toHaveBeenCalledTimes(1)
+  expect(mockAddBase).toHaveBeenCalledWith({
+    ":where(:root),:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]": {
+      color: "black",
+    },
+  })
+})

packages/daisyui/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "daisyui",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "daisyUI 5 - Tailwind CSS Component Library",
   "author": "Pouya Saadeghi",
   "license": "MIT",

packages/daisyui/src/components/fileinput.css

@@ -47,7 +47,8 @@
     --btn-bg: var(--btn-color, var(--color-base-200));
     --btn-fg: var(--color-base-content);
     --btn-border: color-mix(in oklab, var(--btn-bg), #000 5%);
-    --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000),
+    --btn-shadow:
+      0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000),
       0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000);
     --btn-noise: var(--fx-noise);
   }

packages/daisyui/src/components/modal.css

@@ -17,6 +17,10 @@
   &[open],
   &:target {
     background-color: oklch(0% 0 0/ 0.4);
+    transition:
+      transform 0.3s ease-out,
+      background-color 0.3s ease-out,
+      opacity 0.1s ease-out;
   }
   &.modal-open,
   &[open],

packages/daisyui/src/components/select.css

@@ -8,7 +8,8 @@
   border-start-end-radius: var(--join-se, var(--radius-field));
   border-end-start-radius: var(--join-es, var(--radius-field));
   border-end-end-radius: var(--join-ee, var(--radius-field));
-  background-image: linear-gradient(45deg, #0000 50%, currentColor 50%),
+  background-image:
+    linear-gradient(45deg, #0000 50%, currentColor 50%),
     linear-gradient(135deg, currentColor 50%, #0000 50%);
   background-position:
     calc(100% - 20px) calc(1px + 50%),
@@ -35,6 +36,7 @@
     background: inherit;
     border-radius: inherit;
     border-style: none;
+    background-image: none;
     &:focus,
     &:focus-within {
       @apply outline-hidden;

packages/daisyui/src/utilities/glass.css

@@ -2,7 +2,8 @@
   border: none;
   backdrop-filter: blur(var(--glass-blur, 40px));
   background-color: #0000;
-  background-image: linear-gradient(
+  background-image:
+    linear-gradient(
       135deg,
       oklch(100% 0 0 / var(--glass-opacity, 30%)) 0%,
       oklch(0% 0 0 / 0%) 100%

packages/docs/src/components/AlternativeSidebar.svelte

@@ -11,9 +11,9 @@
     <div class="h-6"></div>
     {#if import.meta.env.DEV}
       <div
-        class="carbonads-responsive mx-auto max-xl:w-[22rem] xl:h-[13rem] bg-base-200 rounded-box flex min-h-[100px] items-center justify-center"
+        class="carbonads-responsive bg-base-200 rounded-box mx-auto flex min-h-[100px] items-center justify-center max-xl:w-[22rem] xl:h-[13rem]"
       >
-        <div class="text-xs text-base-content/30">Ads</div>
+        <div class="text-base-content/30 text-xs">Ads</div>
       </div>
     {:else}
       <div class="carbonads-responsive mx-auto flex min-h-[100px] items-center justify-center">

packages/docs/src/components/Carbon.svelte

@@ -24,4 +24,4 @@
   })
 </script>
 
-<div class="print:hidden w-full" id="carbon-container"></div>
+<div class="w-full print:hidden" id="carbon-container"></div>

packages/docs/src/components/Clipboard.svelte

@@ -32,7 +32,7 @@
 
 <div
   data-tip={isClipboardButtonPressed ? "copied" : "copy"}
-  class="tooltip tooltip-left tooltip-accent m-2 [justify-self:right] self-start"
+  class="tooltip tooltip-left tooltip-accent m-2 self-start [justify-self:right]"
 >
   <button
     class="btn btn-square btn-sm btn-neutral"

packages/docs/src/components/ColorPicker.svelte

@@ -83,17 +83,17 @@
 
 <div class="relative inline-block align-middle">
   <button
-    class="w-6 h-6 rounded border border-gray-300 cursor-pointer"
+    class="h-6 w-6 cursor-pointer rounded border border-gray-300"
     style:background-color={currentColor}
     on:click={togglePicker}
     aria-label="Open color picker"
   />
 
   {#if isOpen}
     <div class="fixed inset-0 z-40" on:click={togglePicker} />
-    <div class="absolute z-50 mt-2 p-4 bg-white rounded-2xl shadow-lg">
+    <div class="absolute z-50 mt-2 rounded-2xl bg-white p-4 shadow-lg">
       <div
-        class="w-52 h-52 mb-4 cursor-crosshair relative border rounded-lg overflow-hidden border-black/10 grid"
+        class="relative mb-4 grid h-52 w-52 cursor-crosshair overflow-hidden rounded-lg border border-black/10"
         bind:this={pickerElement}
         on:mousedown={handleMouseDown}
       >
@@ -119,7 +119,7 @@
 
         <!-- Selection indicator -->
         <div
-          class="absolute w-4 h-4 rounded-full border-2 border-white shadow-sm pointer-events-none"
+          class="pointer-events-none absolute h-4 w-4 rounded-full border-2 border-white shadow-sm"
           style:left={`${(chroma / 0.4) * 100}%`}
           style:top={`${100 - lightness}%`}
           style:transform="translate(-50%, -50%)"
@@ -131,7 +131,7 @@
         min="0"
         max="360"
         bind:value={hue}
-        class="w-full h-5 appearance-none cursor-pointer rounded-xl px-[2px]"
+        class="h-5 w-full cursor-pointer appearance-none rounded-xl px-[2px]"
         style={`background: linear-gradient(to right,
           oklch(${lightness}% 0.3 0),
           oklch(${lightness}% 0.3 65),
@@ -143,7 +143,7 @@
         )`}
       />
 
-      <div class="mt-2 text-sm text-gray-600 tabular-nums flex gap-2">
+      <div class="mt-2 flex gap-2 text-sm text-gray-600 tabular-nums">
         <div
           class="size-6 rounded"
           style:background-color={`oklch(${lightness.toFixed(0)}% ${chroma.toFixed(2)} ${hue.toFixed(0)})`}
@@ -153,7 +153,7 @@
       </div>
 
       <button
-        class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 w-full"
+        class="mt-4 w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
         on:click={updateColor}
       >
         Apply

packages/docs/src/components/LangChange.svelte

@@ -1,14 +1,13 @@
 <script>
   import { currentLang, langs, setLang } from "$lib/i18n.svelte.js"
   import { t } from "$lib/i18n.svelte.js"
-  
+
   // Create a sorted array of languages based on languageMetadata order
   // This will be used instead of the unsorted 'langs' array
   import { languageMetadata } from "$lib/i18n.svelte.js"
-  
+
   // Filter langs to only include languages that exist in both languageMetadata and langs
-  const sortedLangs = Object.keys(languageMetadata)
-    .filter(lang => langs.includes(lang));
+  const sortedLangs = Object.keys(languageMetadata).filter((lang) => langs.includes(lang))
 </script>
 
 <div class="dropdown dropdown-end">

packages/docs/src/components/Sidebar.svelte

@@ -16,15 +16,15 @@
 
 <div
   data-sveltekit-preload-data
-  class={`bg-base-100/90 sticky top-0 z-20 hidden navbar items-center gap-2 px-4 py-2 backdrop-blur ${
+  class={`bg-base-100/90 navbar sticky top-0 z-20 hidden items-center gap-2 px-4 py-2 backdrop-blur ${
     $page.url.pathname == "/" ? "" : "lg:flex"
   } ${switchNavbarStyle ? "shadow-xs" : ""}`}
 >
   <a
     href="/"
     aria-current="page"
     aria-label="Homepage"
-    class="flex-0 btn btn-ghost px-2"
+    class="btn btn-ghost flex-0 px-2"
     oncontextmenu={(e) => {
       e.preventDefault()
       contextMenuEl.openContextMenu(e)

packages/docs/src/components/themegenerator/ContrastMeter.svelte

@@ -17,8 +17,8 @@
 </script>
 
 <div class="tooltip" data-tip={`Contrast ${wcagContrast(color1, color2).toFixed(2)}`}>
-  <div class="flex flex-col gap-1 items-end">
-    <div class="flex items-center h-6 gap-2">
+  <div class="flex flex-col items-end gap-1">
+    <div class="flex h-6 items-center gap-2">
       {#if ["low", "bad"].includes(contrastRating(color1, color2))}
         <span class="text-[10px]">Low contrast</span>
         <svg