What’s new in v2?

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, with most colors now following the WCAG 2.1 AAA standard. Some secondary muted colors follow the WCAG 2.1 AA standard.

Focus states have been improved for more consistency and contrast.

Easier customization#

We have refactored all .scss files to make it easier for you to compile your own version of Pico with SASS. All modules can now be enabled or disabled using @use and vars.

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 .scssfile, 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.

New group component#

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

Breaking changes#

CSS Vars

All CSS custom properties are prefixed with pico-to avoid collisions with other CSS frameworks or your own 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).