.grid on small screens #452 #460A huge thank you to the contributors ❤️
rem to em to match the element's font size, spotted by @MiroslavPetrik and fixed by @FireIsGood #469 #474<select multiple> options color, spotted by @cmcaine and investigated by @Brian-Pob #434 #459.grid on small screens, spotted by @ekerstein #452 #460A huge thank you to the contributors ❤️
A huge thank you to the contributors ❤️
<button> as a modal closing icon, by @Atmos4 (#446 #448)default in the CSS reset, spotted by @olehmisar (#440 #447)input[type=search] icon, by @benizz0 (#444)A huge thank you to the contributors ❤️
✨🚀 Pico v2.0 features better accessibility, easier customization with SASS, a complete color palette, a new group component, and 20 precompiled color themes totaling over 100 combinations accessible via CDN.
All colors have been carefully and manually redefined for a more contrasted, neutral (less bluish) look and feel.
The default color theme is much more accessible. Most colors now follow the WCAG 2.1 AAA standard, and some secondary muted colors follow the WCAG 2.1 AA standard.
Focus states have been improved for more consistency and contrast, and spacings have been reduced for a sleeker and more neutral style.
We have refactored all .scss files to make it easier for you to compile your version of Pico with SASS. All modules can now be enabled or disabled using @use.
We added more CSS variables, now totaling over 130, to easily create a unique look and feel, enhancing design flexibility.
Pico v2 comes with 380 manually crafted colors to help you personalize your brand design system. The colors can be imported into any .scss file, and a new stylesheet with all the color utilities is provided.
We have updated the breakpoints to follow the width of standard devices and added a new breakpoint for larger screens.
With group (role="group"), you can now stack forms elements and buttons horizontally.
Conditional Styling is a powerful feature that allows you to apply styles selectively by wrapping elements in .pico containers, which is ideal for mixed-style environments. This method restricts styling to designated sections, making it particularly useful for combining multiple stylesheets or components seamlessly.
Play with the Version Picker, which offers 20 precompiled color themes accessible via CDN for all Pico versions. The total number of combinations is over 100.
All CSS custom properties are prefixed with pico- to avoid collisions with other CSS frameworks or your vars. We also added new CSS variables and renamed some to follow a consistent pattern {component}-{state}-{property}.
We renamed and moved many .scss files. If you import Pico modules, you need to update your paths.
Buttons are not width: 100%; by default anymore. Only form buttons are full-width to be consistent with other form elements.
The .striped class is now used for the striped table’s style.
While accordions are still classless, dropdowns now use .dropdown. We also removed the experimental syntax that allowed dropdowns in the nav using nested lists.
Grid columns now collapse on small devices (<768px).
We removed the overflow-x: auto; from <figure> and introduced a new utility class, .overflow-auto, to enable horizontal scrolling on any element.
A huge thank you to all the contributors ❤️
hgroup example, by @ericfortmeyer
#404A huge thank you to all the contributors ❤️
HTML for aria-busy, by @bradgessler
#349+ Update dependencies.
A huge thank you to all the contributors ❤️
This minor release does not impact the Pico library. It changes the links to the examples in the documentation to prepare for the v2 release.
+ Update dependencies.
A huge thank you to all the contributors ❤️
.grid + small in forms, by @cmbuckley
#271theme-switcher.js, by @eltociear
#301+ Update dependencies.
A huge thank you to all the contributors ❤️
body (E.g. #__next, #___gatsby, #root), by @ja1denscss/_variables.scss > $semantic-root-element
#224 #13 #222aria-invalid for dates input, by @rbf
#242 #243A huge thank you to all the contributors ❤️
A huge thank you to all the contributors ❤️
backdrop-filter (1)
#208accent-color
#236dash-case animations name
#232:not() selectors
#235Notes
(1): Even if it is debatable, we considered that this visual change did not constitute a breaking change.
That is why we publish this change as a PATCH (vs. MAJOR release).
To bring back the old style, you can override the CSS vars as follows:
:root {
--modal-overlay-backdrop-filter: none;
}
A huge thank you to all the contributors ❤️
<article>) sections introduced in 1.5.0 by removing overflow: hidden;, spotted by @GerdonAbbink
#210 #199A huge thank you to all the contributors ❤️
A huge thank you to all the contributors ❤️
nav component, spotted by @cara-tm
#99 #165 9b0dda8nav component, spotted by @nitodico
#162 #165:where() and :is() (2), by @leomp12
#141<fieldset disabled>, spotted by @Gaubee
#143 #170overflow: hidden; for Card (<article>) , by @KiranMantha, spotted by @Manuel-Steinberg and @prologic
#86 #156 #163aria-current for links (<a>) and <button>, spotted by @marek-lach
#124 #166nav component (2), spotted by @cara-tm
#99 #165<details>) margins
#165 6cbc258role="button" inside the nav component
#165 43cacb0Notes
(1): CSS files are about 8% smaller with these improvements
(2): Even if it is debatable, we considered that this visual change did not constitute a breaking change.
That is why we publish this change as a MINOR release (vs. MAJOR release).
To bring back the old style, you can override the CSS vars as follows:
:root {
--nav-link-spacing-vertical: 1rem;
}
A huge thank you to all the contributors ❤️
role=button to any HTML element , spotted by @LokiMidgard #131 #128_accordion.scss, by @nalabdou #104role=switch, spotted by @cara-tm #133 #92Update dependencies #130
A huge thank you to all the contributors ❤️
<hgroup>, by @AmiralBl3ndic #91 #90 #32<label> & fieldset <legend> font-weight, by @HerrBertling #83<a role="button>) without href property, by @Masa-Shin #82$enable-grid as a variable to enable or disable the minimal grid, by @jubishop #73<tfoot> support, spotted by @ivoba #48 #98<mark> and <kbd>, by @autogenus #74.secondary and .contrast in classless version, by @jubishop #72em), spotted by @cara-tm #97 #92background-color on <tr> element, spotted by @myth #78 #98radio, checkbox, switch), by @ftonato #71A huge thank you to all the contributors ❤️
<hgroup> example code 2565a68 #59Features:
[aria-busy], [aria-invalid], blockquote, details, input, li, ol, select, table has been adaptedImprovements:
[type="file"] #37<pre> as a <footer> inside <article> and adapt the docs #36Bug fixes:
input[aria-invalid] as the text overlaps the icon #35Documentation:
<textarea> resetREADME.md (video, image, third party licenses, texts)<td> selector #22