CSS variables

Pico Reforged keeps its design values in CSS custom properties. They all start with --pico-, and the names are the same as in Pico CSS v2.1.1 by Lucas Larroche, so an old override keeps working. Change a variable and every rule that reads it follows.

Most customization needs no build step. Write the override in your own stylesheet, after the Pico link.

Override a variable#

Declare the variable on :root to change it for the whole page.

:root {
  --pico-border-radius: 0;
  --pico-font-family: Georgia, serif;
  --pico-spacing: 0.75rem;
}

Scope a change to one element#

A variable set on an element applies to that element and everything inside it.

<article style="--pico-border-radius: 1.5rem; --pico-primary-background: oklch(0.55 0.2 25); --pico-primary-border: oklch(0.55 0.2 25); --pico-primary-hover-background: oklch(0.48 0.2 25); --pico-primary-hover-border: oklch(0.48 0.2 25);">
  <h3>A rounder card with a red button</h3>
  <p>The rest of the page keeps its defaults.</p>
  <button>Primary</button>
</article>
<article>
  <h3>A regular card</h3>
  <p>Same page, no overrides.</p>
  <button>Primary</button>
</article>

Some elements set their own values. Headings set --pico-font-size and --pico-line-height per level (for example h1 { --pico-font-size: 2.25rem }), and buttons set --pico-background-color and --pico-border-color from the primary, secondary and contrast tokens. To change a heading size, write the rule on the heading, not on :root.

h1 {
  --pico-font-size: 2.5rem;
}

Reference#

Type in the field to filter every list on this page by name or description. Defaults and swatches are read from the build, so they match the current release.

Typography#

--pico-font-family

var(--pico-font-family-sans-serif)

Font stack of the page.

--pico-font-family-sans-serif

"Inter Variable", Inter, "Segoe UI Variable Text", ...

The system sans-serif stack, with the emoji stack at the end.

--pico-font-family-monospace

ui-monospace, "Cascadia Code", "SF Mono", ...

Stack for code, kbd, samp and pre.

--pico-font-family-emoji

"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ...

Emoji fonts, appended to the other stacks.

--pico-font-size

100%

Root font size. It takes one step to 106.25% from 1536px. Headings override it per level.

--pico-font-weight

400

Body font weight.

--pico-line-height

1.5

Body line height.

--pico-text-underline-offset

0.2em

Offset of link underlines.

--pico-typography-spacing-vertical

1rem

Space under paragraphs, lists and headings.

--pico-form-label-font-weight

var(--pico-font-weight)

Font weight of form labels.

To change the font, set --pico-font-family and nothing else.

<style>
  :root {
    --pico-font-family: Georgia, "Times New Roman", serif;
    --pico-line-height: 1.65;
  }
</style>
<h3>Set in Georgia</h3>
<p>One variable changes the font of every element, forms and buttons included.</p>
<button>Button</button>

Borders, transitions and spacing#

--pico-border-radius

0.5rem

Corner radius of buttons, inputs and code blocks. Small parts such as checkboxes and tooltips use a fraction of it.

--pico-card-border-radius

calc(var(--pico-border-radius) * 1.5)

Corner radius of cards, modals, menus, popovers and the extras surfaces. 1.5 times --pico-border-radius; the modal box uses 4/3 of it.

--pico-border-width

0.0625rem

Width of borders.

--pico-outline-width

0.125rem

Width of focus rings.

--pico-transition

150ms cubic-bezier(0.2, 0, 0, 1)

Timing of hover and focus transitions. A build with transitions turned off sets it to 0s.

--pico-spacing

1rem

Base spacing unit.

--pico-block-spacing-vertical

calc(var(--pico-spacing) * 1.25)

Vertical padding of cards and modals. Larger from 576px up when the responsive spacings option is on.

--pico-block-spacing-horizontal

calc(var(--pico-spacing) * 1.25)

Horizontal padding of the same blocks.

--pico-grid-column-gap

var(--pico-spacing)

Column gap of .grid.

--pico-grid-row-gap

var(--pico-spacing)

Row gap of .grid.

--pico-form-element-spacing-vertical

0.5rem

Vertical padding of inputs, selects, textareas and buttons.

--pico-form-element-spacing-horizontal

0.75rem

Horizontal padding of the same elements.

--pico-form-element-disabled-opacity

0.5

Opacity of disabled form elements.

--pico-loading-spinner-opacity

0.5

Opacity of the aria-busy spinner.

Container#

--pico-container-max-width

100%

Max width of .container and the semantic container. Set per breakpoint: 510px from 576px, 700px from 768px, 950px from 1024px, 1200px from 1280px and 1450px from 1536px.

The fluid builds set it to 100% at every width. See Building a custom bundle.

Navigation#

--pico-nav-element-spacing-vertical

0.75rem

Vertical padding of nav items.

--pico-nav-element-spacing-horizontal

0.5rem

Horizontal padding of nav items.

--pico-nav-link-spacing-vertical

0.375rem

Vertical padding of nav links.

--pico-nav-link-spacing-horizontal

0.625rem

Horizontal padding of nav links.

--pico-nav-breadcrumb-divider

"/"

Divider between breadcrumb items.

Modal#

--pico-modal-overlay-backdrop-filter

blur(0.375rem)

Backdrop filter behind an open dialog.

--pico-scrollbar-width

0

Right padding added to html while .modal-is-open is set, so a hidden scrollbar does not shift the page. Set it from a script if you need it.

Shadows#

--pico-box-shadow

0 0 0 0.0625rem oklch(0.2 0.02 265 / 0.07), 0 0.0625rem 0.125rem 0 oklch(0.2 0.02 265 / 0.05), 0 0.25rem 0.75rem -0.25rem oklch(0.2 0.02 265 / 0.08)

The soft layered shadow behind cards and dropdowns. Its colors use light-dark().

--pico-card-box-shadow

var(--pico-box-shadow)

Shadow of cards.

--pico-dropdown-box-shadow

0 0 0 0.0625rem oklch(0.2 0.02 265 / 0.07), 0 0.125rem 0.25rem -0.0625rem oklch(0.2 0.02 265 / 0.06), 0 0.75rem 2rem -0.5rem oklch(0.2 0.02 265 / 0.18)

Shadow of dropdown menus.

--pico-button-box-shadow

0 0.0625rem 0.125rem 0 oklch(0 0 0 / 0.08), inset 0 0.0625rem 0 0 oklch(1 0 0 / 0.12)

Resting shadow of buttons. Empty by default.

--pico-button-hover-box-shadow

0 0.125rem 0.375rem -0.0625rem oklch(0 0 0 / 0.14), inset 0 0.0625rem 0 0 oklch(1 0 0 / 0.12)

Shadow of buttons on hover. Empty by default.

--pico-group-box-shadow

0 0 0 0 oklch(0 0 0 / 0)

Shadow of a role="group" container.

--pico-switch-thumb-box-shadow

0 0.0625rem 0.125rem 0 oklch(0 0 0 / 0.2)

Shadow of the switch thumb. Part of a theme.

Icons#

The icons are SVG data URIs, so you can swap one for your own.

--pico-icon-checkbox

SVG data URI

Checkmark in checked checkboxes.

--pico-icon-minus

SVG data URI

Dash in indeterminate checkboxes.

--pico-icon-chevron

SVG data URI

Arrow of selects, accordions and dropdown summaries.

--pico-icon-date

SVG data URI

Date input icon.

--pico-icon-time

SVG data URI

Time input icon.

--pico-icon-search

SVG data URI

Search input icon.

--pico-icon-close

SVG data URI

Close button of modals.

--pico-icon-loading

SVG data URI

Spinner shown by aria-busy="true".

--pico-icon-valid

Icon of an input with aria-invalid="false". It has a light and a dark version.

--pico-icon-invalid

Icon of an input with aria-invalid="true". It has a light and a dark version.

Colors#

The semantic color tokens are written once with light-dark(), so each holds a light and a dark value. In the tables below the first value is the light scheme and the second the dark one. A single value, or a var(), means both schemes use it. Hex values are approximations of the OKLCH colors in the source. How the schemes switch is explained in Color schemes.

The primary tokens belong to the theme. The values shown are for Azure, the default. Another theme replaces them, see Themes.

Page#

--pico-background-color

light-dark(#ffffff, #0d0e11)

Page background color.

--pico-color

light-dark(#24262c, #e3e4e8)

Default text color.

--pico-muted-color

light-dark(#5f636d, #9ea2a9)

Muted text color for secondary information.

--pico-muted-border-color

light-dark(#e4e6ea, #292b2f)

Border color of separators and quiet surfaces.

Primary#

--pico-primary

light-dark(#0172ad, #01aaff)

Primary text and link color.

--pico-primary-background

#0172ad

Primary fill color.

--pico-primary-border

var(--pico-primary-background)

Primary border color.

--pico-primary-underline

light-dark(oklch(0.53 0.1254 242 / 0.5), oklch(0.707 0.1679 242.1 / 0.5))

Primary link underline color.

--pico-primary-hover

light-dark(#015887, #79c0ff)

Primary hover color.

--pico-primary-hover-background

light-dark(#02659a, #017fc0)

Primary hover fill color.

--pico-primary-hover-border

var(--pico-primary-hover-background)

Primary hover border color.

--pico-primary-hover-underline

var(--pico-primary-hover)

Primary hover link underline color.

--pico-primary-focus

light-dark(#017fc0, #01aaff)

Primary focus ring color.

--pico-primary-inverse

#ffffff

Primary text color on a filled background.

--pico-text-selection-color

light-dark(oklch(0.658 0.1564 242.2 / 0.25), oklch(0.707 0.1679 242.1 / 0.1875))

Background of selected text.

Secondary#

--pico-secondary

light-dark(#5d6b89, #969eaf)

Secondary text and link color.

--pico-secondary-background

light-dark(#eff0f3, #24262a)

Secondary fill color.

--pico-secondary-border

light-dark(#d5d7db, #36383c)

Secondary border color.

--pico-secondary-underline

light-dark(oklch(0.528 0.05 265 / 0.5), oklch(0.698 0.027 266 / 0.5))

Secondary link underline color.

--pico-secondary-hover

light-dark(#48536b, #b3b9c5)

Secondary hover color.

--pico-secondary-hover-background

light-dark(#e4e6ea, #2e3034)

Secondary hover fill color.

--pico-secondary-hover-border

light-dark(#c8cad0, #404247)

Secondary hover border color.

--pico-secondary-hover-underline

var(--pico-secondary-hover)

Secondary hover link underline color.

--pico-secondary-focus

light-dark(#707787, #a5abb8)

Secondary focus ring color.

--pico-secondary-inverse

light-dark(#1c1f25, #edeef1)

Secondary text color on a filled background.

Contrast#

--pico-contrast

light-dark(#181c25, #dfe3eb)

Contrast text and link color.

--pico-contrast-background

light-dark(#181b20, #e6e8eb)

Contrast fill color.

--pico-contrast-border

var(--pico-contrast-background)

Contrast border color.

--pico-contrast-underline

light-dark(oklch(0.227 0.019 266 / 0.5), oklch(0.915 0.012 265 / 0.5))

Contrast link underline color.

--pico-contrast-hover

light-dark(#000000, #ffffff)

Contrast hover color.

--pico-contrast-hover-background

light-dark(#2b2e34, #ffffff)

Contrast hover fill color.

--pico-contrast-hover-border

var(--pico-contrast-hover-background)

Contrast hover border color.

--pico-contrast-hover-underline

var(--pico-secondary-hover)

Contrast hover link underline color.

--pico-contrast-focus

light-dark(#181b20, #e6e8eb)

Contrast focus ring color.

--pico-contrast-inverse

light-dark(#ffffff, #0d0e11)

Contrast text color on a filled background.

Headings and text#

--pico-h1-color

light-dark(#13161c, #f4f5f8)

Color of h1.

--pico-h2-color

light-dark(#13161c, #f4f5f8)

Color of h2.

--pico-h3-color

light-dark(#13161c, #f4f5f8)

Color of h3.

--pico-h4-color

light-dark(#13161c, #f4f5f8)

Color of h4.

--pico-h5-color

light-dark(#24262c, #e3e4e8)

Color of h5.

--pico-h6-color

light-dark(#44484f, #bbbec3)

Color of h6.

--pico-mark-background-color

light-dark(#fce6bf, #014063)

Mark element.

--pico-mark-color

light-dark(#0f1114, #ffffff)

Mark element.

--pico-ins-color

light-dark(#1c6954, #62af9a)

Ins and del elements.

--pico-del-color

light-dark(#883835, #ce7e7b)

Ins and del elements.

--pico-blockquote-border-color

var(--pico-muted-border-color)

Blockquote element.

--pico-blockquote-footer-color

var(--pico-muted-color)

Blockquote element.

--pico-code-background-color

light-dark(#f3f4f6, #18191d)

Background of inline code, kbd and samp, and of code blocks.

--pico-code-color

light-dark(#393d45, #babec4)

Text color of inline code and samp, and of code blocks.

--pico-code-kbd-background-color

var(--pico-color)

Background of kbd, a key or shortcut.

--pico-code-kbd-color

var(--pico-background-color)

Text color of kbd.

--pico-table-border-color

var(--pico-muted-border-color)

Table.

--pico-table-row-stripped-background-color

light-dark(oklch(0.5 0.01 265 / 0.035), oklch(1 0 0 / 0.05))

Table.

Form elements#

--pico-form-element-background-color

light-dark(#ffffff, #131518)

Form element color.

--pico-form-element-selected-background-color

light-dark(#eff0f3, #24262a)

Form element color.

--pico-form-element-border-color

light-dark(#8f929a, #66696f)

Form element color.

--pico-form-element-color

light-dark(#13161c, #edeef1)

Form element color.

--pico-form-element-placeholder-color

var(--pico-muted-color)

Form element color.

--pico-form-element-active-background-color

light-dark(#ffffff, #17181c)

Form element color.

--pico-form-element-active-border-color

var(--pico-primary-focus)

Form element color.

--pico-form-element-focus-color

var(--pico-primary-focus)

Form element color.

--pico-form-element-invalid-border-color

light-dark(#b86a6b, #964a50)

Form element color in the invalid state.

--pico-form-element-invalid-active-border-color

light-dark(#c84f48, #b73f3b)

Form element color in the invalid state.

--pico-form-element-invalid-focus-color

var(--pico-form-element-invalid-active-border-color)

Form element color in the invalid state.

--pico-form-element-valid-border-color

light-dark(#4c9a8a, #2a7b6f)

Form element color in the valid state.

--pico-form-element-valid-active-border-color

light-dark(#279977, #16896a)

Form element color in the valid state.

--pico-form-element-valid-focus-color

var(--pico-form-element-valid-active-border-color)

Form element color in the valid state.

--pico-switch-background-color

light-dark(#8f929a, #66696f)

Switch control.

--pico-switch-checked-background-color

var(--pico-primary-background)

Switch control.

--pico-switch-color

#ffffff

Switch control.

--pico-range-border-color

light-dark(#dcdee2, #404247)

Range input.

--pico-range-active-border-color

light-dark(#cbced3, #505257)

Range input.

--pico-range-thumb-border-color

var(--pico-background-color)

Range input.

--pico-range-thumb-color

var(--pico-primary-background)

Range input.

--pico-range-thumb-active-color

var(--pico-primary-background)

Range input.

Components#

--pico-accordion-border-color

var(--pico-muted-border-color)

Accordion summary.

--pico-accordion-active-summary-color

var(--pico-primary-hover)

Accordion summary.

--pico-accordion-close-summary-color

var(--pico-color)

Accordion summary.

--pico-accordion-open-summary-color

var(--pico-color)

Accordion summary.

--pico-card-background-color

var(--pico-background-color)

Card surface.

--pico-card-border-color

var(--pico-muted-border-color)

Card surface.

--pico-card-sectioning-background-color

light-dark(#f9fafb, #1d1f23)

Card surface.

--pico-dropdown-background-color

light-dark(#ffffff, #1c1e22)

Dropdown menu surface.

--pico-dropdown-border-color

light-dark(#e3e4e8, #313337)

Dropdown menu surface.

--pico-dropdown-color

var(--pico-color)

Dropdown menu surface.

--pico-dropdown-hover-background-color

light-dark(#f2f3f6, #292b2f)

Dropdown menu surface.

--pico-modal-overlay-background-color

light-dark(oklch(0.2 0.02 265 / 0.4), oklch(0 0 0 / 0.6))

Modal overlay.

--pico-progress-background-color

light-dark(#e4e6ea, #24262a)

Progress bar.

--pico-progress-color

var(--pico-primary-background)

Progress bar.

--pico-tooltip-background-color

light-dark(#1c1f25, #2b2e33)

Tooltip bubble.

--pico-tooltip-color

light-dark(#ffffff, #edeef1)

Tooltip bubble.

Color palette#

The full OKLCH palette is not in pico.css. It lives in pico.colors.css, which defines --pico-color-<hue>-<step> for the 20 hues and the steps 50 to 950 in increments of 50, for example --pico-color-azure-550. A bare --pico-color-azure is the 550 step, and --pico-color-black and --pico-color-white are there too. The same file adds the .pico-color-* and .pico-background-* classes. Link it after pico.css.

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

<p class="pico-color-red-550">Text in red 550, from a class.</p>
<p class="pico-background-jade-600" style="padding: 0.5rem 1rem;">A jade 600 background.</p>
<p style="color: var(--pico-color-amber-450);">Amber 450, read from the variable.</p>

Extras#

The opt-in extras declare their own tokens, named --pico-<extra>-*, for example --pico-tabs-indicator-color and --pico-badge-background-color. They are listed on the page of each extra, starting from Extras.