Valence.css

Classless CSS that still loves your custom elements — Pico's elegance, remixed for the modern web.

Valence.css is a lightly modified fork of the excellent Pico CSS. Pico styles are tightly bound to native tag names (article, button, …), which custom elements cannot reuse. Valence.css keeps Pico's look and adds:

• Tag aliases — @custom-selector synonyms so [role="…"] / .tag-* (and custom element tags) share the same semantic styles
• Opt-outs — .unstyled / .unstyled-all (and .unanimated*) for document flexibility where framework styles would fight you
• Drop-in themes — basic (Pico-faithful) ships today; further themes share the same tokens so they can be swapped without touching markup. Light/dark is a scheme ([data-scheme])
• Molecules — cards, dropdowns, modals (dialog::backdrop / [role="presentation"] / .tag-backdrop), nav, progress, and native [popover] styles on top of Pico's element styles
• Tokens — --pico-* renamed to --v-* for a clear Valence.css namespace

Features

• Semantic tag aliases Style article, dialog, button, … — the same rules apply to the [role="…"] / .tag-* forms
• Custom-element friendly class="tag-article" on any host inherits Valence.css styles without rewriting selectors
• Drop-in themes basic (Pico-flavor) ships; further themes share the same tokens. Scheme via [data-scheme="light|dark"]
• Opt-outs .unstyled / .unstyled-all (and motion: .unanimated*)
• Molecules Cards, dropdowns, modals (dialog::backdrop / [role="presentation"] / .tag-backdrop), nav, progress, popovers, tooltips

Installation

Usage

Import a theme entry (CSS). Prefer aliases when styling custom elements.

@import "@excom/valence/basic.css";

<article>Native card</article>
<event-handler class="tag-article">Aliased card</event-handler>
<button class="outline secondary">Outline</button>

Documentation

Getting started

• Color schemes — automatic light / dark, data-scheme
• Aliases — tag, role and .tag-* forms of every alias; custom elements
• Opt-outs — .unstyled, .unanimated, .abstract

Customization

• CSS variables — the --v-* tokens
• Themes & layers — entries, @layer strategy, mixins for element authors

Layout

• Container · Landmarks & section · Grid · Overflow auto

Content

• Typography · Link · Button · Table · Code · Embedded content

Forms

• Forms · Input · Textarea · Select · Checkboxes, radios & switches · Range

Components

• Accordion · Card · Dropdown · Group · Loading · Modal · Nav · Popover · Progress · Tooltip

API Reference

Full documentation: https://nucleus.excom.dev/packages/valence