v2.0.0-rc2

Feature: Theme color

Easily compile Pico CSS using a different primary color from a selection of 20 colors.

Example:

// amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, 
// orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
@use "pico" with ($theme-color: "indigo");

Styles

• Small tweaks for <article />, <hgroup />, <dialog />, <fieldset /> and .grid

Fixes

• Disable focus style for <textarea readonly />
• Focus style for<button aria-current="true" />

Chores

• Update dependencies

Full changelog

v2.0.0-rc1

Feature

• Include the close icon styles in the classless version, by @asbjornu (#421)

Styles

• Tweak validation icon colors
• Tweak headings line-height

Fixes

• aria-current selector more specific on links, by @brianespinosa (#416)
• button[type="submit"] width
• [aria-busy="true"] white-space
• [role="group"] and [role="search"] focus style
• aria-label="breadcrumb" for iOS/Safari
• Package scripts

Refactor

• Update $css-var-prefix name, suggested by @wyot1
• Update browserslist config (to default)

Chores

• Update dependencies

Full changelog

A huge thank you to the contributors ❤️

v2.0.0-alpha1

😎 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).

v1.5.10

Fixes

• Exclude HTML for aria-busy, by @bradgessler
  #349
• Remove the date input icon in Firefox to avoid a double icon, spotted by @groovenectar
  #348

+ Update dependencies.

Full changelog

A huge thank you to all the contributors ❤️

v1.5.9

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.

Full changelog

v1.5.8

Documentation

• Fix typos in customization, by @Edwing123
  #308
• Fix typos in typography

Fixes

• Align dropdown labels with input and select labels, by @ypascal
  #339

+ Update dependencies.

Full changelog

A huge thank you to all the contributors ❤️

v1.5.7

Feature

• Support for .grid + small in forms, by @cmbuckley
  #271

Fixes

• Prevent scrolling and interactions below a modal on mobile, by @rbf
  #267
• Allow use of custom data-theme values that also override auto light/dark switching, by @wmurphyrd
  #272

Documentation

• Fix path in customization, by @mattcroat
  #279
• Remove unnecessary JS for indeterminate progress, by @FWDekker
  #284
• Fix typos, by @waldyrious
  #300

Refactors

• Fix typo in theme-switcher.js, by @eltociear
  #301

+ Update dependencies.

Full changelog

A huge thank you to all the contributors ❤️

v1.5.6

Features

• Adds the ability to compile Pico with a root element other than body (E.g. #__next, #___gatsby, #root), by @ja1den
  Define your your CSS selector in scss/_variables.scss > $semantic-root-element
  #224 #13 #222

Fixes

• aria-invalid for dates input, by @rbf
  #242 #243

Documentation

• Improves Customization and Class-less pages
  #245

Full changelog

A huge thank you to all the contributors ❤️

v1.5.5

Styles

• Breadcrumb improvements and fixes, spotted by @pauloxnet
  #237 #240

Documentation

• Fix canonical URLs
  #238
• Fix breadcrumb markup
  #238
• Update examples in README

Full changelog

A huge thank you to all the contributors ❤️

v1.5.4

Features

• Breadcrumb component, by @jelmerveen
  #157
• Tooltip direction, by @wenkm and @wenkeming
  #211

Styles

• Modal backdrop-filter (1)
  #208
• Add accent-color
  #236

Refactors

• dash-case animations name
  #232
• SVG color encoding
  #233
• :not() selectors
  #235

Documentation

• Add link to RTL preview, built by @X7md in @picocss/examples

Chores

• Update dependencies
  #234

Notes

(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;
}

Full changelog

A huge thank you to all the contributors ❤️