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
lemonade
primary
secondary
accent
neutral
base-100
windi.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)
info
success
warning
error
If 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-content
success-content
warning-content
error-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!