@fluixi-ui/skin-paper

A warm, paper-like skin for Fluixi UI: a tinted canvas, white sheets that float on it, and outlines drawn as translucent half-pixel rings instead of grey borders.

Colour stays theme-driven. Surfaces come from the gray scale and rings from the foreground, so data-theme (light, dark) and data-accent keep working.

Usage

import '@fluixi-ui/styles/all.css';
import '@fluixi-ui/skin-paper/fonts.css'; // optional: self-hosted Figtree and Bricolage Grotesque
import '@fluixi-ui/skin-paper/styles.css';

document.documentElement.dataset.ui = 'paper';

The attribute can sit on any subtree to scope the skin there.

Construction

Every surface belongs to one family:

| Family | Recipe | Used by | | --- | --- | --- | | field | recessed: inset ring and inset shadow | inputs, search | | control | flat: ring and a 1px contact shadow | buttons, icon buttons | | card | resting: ring and a soft lift | Card, Surface elevation={1} | | floating | ring, contact and ambient shadow | panels, menus, dialogs (Surface 2 to 4) |

Inner radii are the outer radius minus the padding. In dark themes surfaces lift with a lighter ring and a top highlight, since shadows go unseen.

The families are exposed as tokens (--flx-ui-paper-card-shadow and the like) for surfaces of your own, and fluixi-ui's --flx-ui-shadow-sm to -xl map onto them.

Type

Figtree for the interface, Bricolage Grotesque from 20px up (h1 and [data-display]). Without fonts.css both fall back to the system sans.

Rules live in the flx.skin layer, above flx.components; your own unlayered CSS still wins.