Sass users

Pico CSS v2.1.1 by Lucas Larroche was built from Sass, and you changed it with @use "pico" with (...). Pico Reforged is plain CSS, so the Sass source is gone. Everything it did is now one of two things:

• A CSS variable that you override in your own stylesheet. No build step.
• A compiler option, for the switches that change which rules end up in the file. Use the CLI, a config file or the @pico block of the Vite and PostCSS integrations.

Option mapping#

Three Sass variables have no option:

The options are described with their defaults in Building a custom bundle.

Before and after#

A Sass project that did this:

@use "pico" with (
  $theme-color: "jade",
  $enable-semantic-container: true,
  $modules: (
    "components/modal": false,
  )
);

links the ready-made jade file when it needs nothing more.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rusticstack/pico-reforged@2/css/pico.jade.min.css" />

If it also needs the semantic container or has to leave a module out, it builds its own file.

npx pico-reforged build --theme jade --semantic-container --exclude components/modal --minify --out public/pico.css

Or it goes through the bundler plugin and puts the options in the stylesheet.

@import "@rusticstack/pico-reforged";

@pico {
  theme: jade;
  semantic-container: true;
  exclude: components/modal;
}

Values are CSS variables now#

In Sass you changed a value by overriding a variable before the build. Now you override the CSS variable after the stylesheet. Colors, spacing, fonts, radius and form tokens all have a --pico-* variable. The full list is on CSS variables.

:root {
  --pico-border-radius: 0;
  --pico-font-family: Georgia, serif;
  --pico-form-element-spacing-vertical: 0.5rem;
}

Your CSS is outside the Pico cascade layers, so it wins without !important. See Cascade layers and overriding.

<style>
  :root {
    --pico-border-radius: 0;
    --pico-form-element-spacing-vertical: 0.5rem;
  }
</style>
<form>
  <input type="text" placeholder="Square corners, tighter padding" aria-label="Sample" />
  <button type="button">Button</button>
</form>

Breakpoints#

The breakpoints are literal media queries in the source: 576, 768, 1024, 1280 and 1536 px. The container width and the root font size come from two variables set at each one. To change them, set the variables in your own media query.

@media (width >= 1024px) {
  :root {
    --pico-container-max-width: 900px;
    --pico-font-size: 112.5%;
  }
}

The default values are in CSS variables.

What else changed#

• The browser floor is Chrome and Edge 111, Firefox 128 and Safari 16.4. See Browser support.
• The stylesheet sits in cascade layers, which Pico CSS v2.1.1 did not use.
• Colors are OKLCH written with light-dark().

The rest of the migration, including the file names and what looks different, is in Coming from Pico CSS.