v2.0.6

Fix:

• Switch aspect ratio and border, spotted by @mpldr #467

Full changelog

v2.0.5

Fixes:

• Button padding inside a nav, spotted by @olehmisar and fixed by @hybs123 #476 #479
• Revert: remove the form elements margin-bottom in a .grid on small screens #452 #460

A huge thank you to the contributors ❤️

Full changelog

v2.0.4

Fixes

• Change the size of the loading spinner from rem to em to match the element's font size, spotted by @MiroslavPetrik and fixed by @FireIsGood #469 #474
• Fix the witch border, spotted by @mpldr and fixed by @FireIsGood #467 #472
• Fix the<select multiple> options color, spotted by @cmcaine and investigated by @Brian-Pob #434 #459
• Remove the form elements margin-bottom in a .grid on small screens, spotted by @ekerstein #452 #460

Chore

• Update dependencies

A huge thank you to the contributors ❤️

Full changelog

v1.5.13

Documentation

• Update default theme link in customization, by @TwelveNights #475

Chore

• Upgrade dependencies

A huge thank you to the contributors ❤️

Full changelog

v2.0.3

Feature

• Allow <button> as a modal closing icon, by @Atmos4 (#446 #448)

Fixes

• Remove cursor default in the CSS reset, spotted by @olehmisar (#440 #447)
• input[type=search] icon, by @benizz0 (#444)

Chore

• Update dependencies

A huge thank you to the contributors ❤️

Full changelog

v2.0.0

✨🚀 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.

😎 New look and feel

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.

✨ Easier customization

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.

🎨 Color palette

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.

📐 Better breakpoints

We have updated the breakpoints to follow the width of standard devices and added a new breakpoint for larger screens.

🧩 Group component

With group (role="group"), you can now stack forms elements and buttons horizontally.

🖌️ Conditional Styling

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.

🌈 Version picker

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.

⚠️ Breaking changes

CSS Vars

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}.

SCSS files

We renamed and moved many .scss files. If you import Pico modules, you need to update your paths.

Buttons

Buttons are not width: 100%; by default anymore. Only form buttons are full-width to be consistent with other form elements.

Table

The .striped class is now used for the striped table’s style.

Dropdowns

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

Grid columns now collapse on small devices (<768px).

Figure

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 ❤️

Full changelog

v1.5.12

Documentation

• Add a "new version" banner
• Update README links to redirect to picocss.com/docs/v1/

Chore

• Upgrade dependencies

Full changelog

v2.0.0-rc4

Features

• Conditional styling option, which applies Pico CSS styles selectively by wrapping elements in a .pico container (customizable via SASS)
• Built all 20 color themes variants to make them available via CDN, without the need to use SASS
• New .overflow-auto utility class 😉 to replace the very hacky overflow-x: auto on <figure>

Styles

• Update the system font stack #436, by @pauloxnet
• Small tweaks for <input type="checkbox" role="switch" />, .dropdown, [aria-busy]

Fixes

• Checked style for the disabled <input type="checkbox" />

Chores

• Update dependencies
• Build script to automatically generate all Pico variants

A huge thank you to the contributors ❤️

Full changelog

📣 This is most likely the last release candidate version before the official Pico v2 release.

v2.0.0-rc3

Styles

• Reduced spacings for header, main, footer, section, article

Fixes

• Label color when color scheme is forced
• .outline button border-color
• Semantic container horizontal spacings
• Class-less reset form button
• Helper input text with fieldset
• Removed link classes on the class-less version

Chores

• Update dependencies

Full changelog

v1.5.11

Feature

• Include the close icon styles in the classless version, by @asbjornu
  #400

Fix

• Add missing chevron icon when accordion is disabled, by @thewebartisan7
  #410

Documentation

• Use only one h* tag in the hgroup example, by @ericfortmeyer
  #404

Chore

• Upgrade dependencies

Full changelog

A huge thank you to all the contributors ❤️