All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
tab-disabled class name for visually disabling a tab itemtabs-boxed (not just the active tab)menu-title opacity and color inheritance (bec2094)rating border radius on mobile (df41fbc)textarea now has xs, sm, md and lg sizes: #1462A tooltip without a data-tip attribute will not show an empty tooltip anymore #1501
Fix bordered menu entry on sub menus #1536
chat (3887c6e)chat (522bc5e)toggle now looks different from unchecked toggleoverflow: hidden. Instead, the figure will adapt the card border radius, fix: #1175 (10786e6)color-scheme for scrollbars etc. (40bab42)darkTheme config now can be false to disable prefers-color-scheme: dark (d7688cc)Add the following color variants
for the following components:
btn-group-horizontal and btn-group-vertical classes are now responsive (f27340b)collapse (e0fa734)mask stylesbadge modifier/responsive class name categorization (3a3e055)alert and radio modifier/responsive class name categorization (b58ecea)toast component (b57457f)bottom-navigation componentbtn-group-vertical (41ce08c)drawer-end issue when there’s another drawer inside it (d6e8b9c)aqua ,emerald ,light themeswidth:100% and height:100svh and by default (if supported). fixes: #313 on iOS 15.4+ (c8b104a)data-theme will have base-100 color for background and base-content color for text by default. (216d115)base-200 and base-300 colors on light thememodal: modal-bottom and modal-middle (fixes #616) (9e5313f)prefix config (e87db57)Improved all existing theme colors
Added 4 new themes:
autumn
business
acid
lemonadeprimary
secondary
accent
neutral
base-100windi.js filerounded-box utility classesdaisyui/colors/themes, you should import them from daisyui/src/colors/themes instead.🆕 Tailwind CSS 3.0 is now a dependency
🎨 Improvements applied to the value of following colors on daisyUI default themes. Below colors got lighter on light themes and they got darker on dark themes (due to adding new *-content color names)
infosuccesswarningerrorIf you used those color names inside your pages (like bg-info, text-error, etc.) Make sure your colors look good on both light and dark themes.
There are new content colors are added so for example, if text-info contrast doesn’t look good, use the new text-info-content color instead.
🔥 Updated Tailwind CSS dev dependency to v3.0
🚀 Moved document website from Nuxt to SvelteKit
🆕 Add new swap component
🆕 Add new radial-progress component
👏 Improve range component to show the filled value with colors
👏 menu component now supports submenus both vertically and horizontally
🆕 Add new foreground colors (fixes #187)
info-contentsuccess-contentwarning-contenterror-content🆕 Add new responsive modifiers for divider component:
🆕 Add new responsive modifiers for stats component (fixes #440):
🤩 All focus styles that were using box shadows are now using outline instead
🤩 Now every item inside .menu li will be styled as menu item (not only a, span, button)
😍 Add copy to clipboard functionality for document website (fixes #293)
🆕 Add new modifiers for mask component. This classes are used to show first half or second half of a mask”
🤩 Empty <li> in a menu now shows a separator line.
🆕 Add new input-group component
🆕 Add new rating-half modifier rating component (to show half stars)
📐 avatar image now has 1:1 aspect ratio
😍 Add support for RGB, HSL,etc. color formats for daisyUI themes in tailiwnd.config.js:
module.exports = {
daisyui: {
themes: [
{
mytheme: {
// until now, only hex format was supported:
primary: "#a991f7",
"primary-focus": "#8462f4",
"primary-content": "#ffffff",
// now it can be anything:
secondary: "red",
"secondary-focus": "rgb(243,204,48)",
"secondary-content": "hsl(0, 0%, 100%)",
//...
},
},
],
},
};dark anymore only.tailwind.config.js using new darkTheme config:module.exports = {
daisyui: {
darkTheme: "synthwave"",
},
}"primary-focus"; // fallback : "primary"
"secondary-focus"; // fallback : "secondary"
"accent-focus"; // fallback : "accent"
"neutral-focus"; // fallback : "neutral"
"base-200"; // fallback : "base-100"
"base-300"; // fallback : "base-300"
"info-content"; // fallback : "neutral-content"
"success-content"; // fallback : "neutral-content"
"warning-content"; // fallback : "neutral-content"
"error-content"; // fallback : "neutral-content"menu componentselect componentcorporate theme (dc6da4d)w-full to footer component (39c412a)stack component (de727ac)checkbox, toggle and radio HTML
(this is not a breaking change but you can use the new, cleaner markup)<!-- 😒 Old markup -->
<div>
<input type="checkbox" class="toggle" />
<span class="toggle-mark"></span>
</div>
<!-- 😍 New markup -->
<input type="checkbox" class="toggle" /><!-- 😒 Old markup -->
<div>
<input type="checkbox" class="checkbox" />
<span class="checkbox-mark"></span>
</div>
<!-- 😍 new markup -->
<input type="checkbox" class="checkbox" /><!-- 😒 Old markup -->
<div>
<input type="radio" class="radio" />
<span class="radio-mark"></span>
</div>
<!-- 😍 New markup -->
<input type="radio" class="radio" />active utility class for <tr> (4c5f0fe)drawer-end utility (d9f7558)drawer-end utility (7a0e5b1)navbar-start, navbar-center, navbar-end classes (eb26833)component layer instead of base (cdca955)accordion component is now removed and insted, there’s collapse with a different markup. [see examples].accordion:<ul class="accordion">
<li class="accordion-item">
<input id="item-923499" type="checkbox" />
<label for="item-923499" class="text-xl font-medium accordion-title"> Aperiam iure expedita non fugit? </label>
<div class="accordion-body">
<p>
Aperiam iure expedita non fugit. Voluptatem est repellat a aut sit est nostrum maiores aut. Voluptas nisi totam eius architecto eius mollitia quos assumenda non. Iusto rerum doloribus. Architecto dolorum explicabo omnis quidem. Quibusdam ipsam beatae soluta et dolores iure ut debitis ad.
</p>
</div>
</li>
</ul>collapse:<div tabindex="0" class="collapse">
<div class="text-xl font-medium collapse-title">I open with focus</div>
<div class="collapse-content">
<p>Collapse content reveals with focus. If you add a checkbox, you can control it using checkbox instead of focus. Or you can force-open/force-close using `collapse-open` and `collapse-close` classes.</p>
</div>
</div>You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!