@fluixi-ui/skin-soft

A soft, corporate dashboard skin for Fluixi UI. Restyles the components to a clean "Soft Elevated" look — generous consistent rounding, gentle two-layer elevation used with intent, a single restrained accent, comfortable density, and system typography. No gradients, no glass, no decorative shadow.

It touches only shape, elevation, density and motion, so colour stays theme-driven: data-theme (light/dark/high-contrast) and data-accent keep working unchanged.

Usage

Import the stylesheet after the tokens + preset, then activate with data-ui="soft" on a root (or any subtree):

import '@fluixi-ui/tokens/preset.css';
import '@fluixi-ui/skin-soft/styles.css';

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

Because it targets data-ui="soft", you can scope it to a subtree — mix skins on one page by setting the attribute on a container instead of the root.

What it changes

• Buttons — pill shape; filled primary rests on a soft shadow and lifts a touch on hover.
• Fields — 10px radius, comfortable height, soft single-halo focus ring.
• Surfaces — cards and overlays get larger radius and gentle elevation.
• Menus / listboxes — rounded, inset row highlights instead of full-bleed bars.
• Selection controls — rounder checkbox, larger switch, calmer focus.

Layered in flx.skin (above flx.components), so it overrides the default look while your own unlayered CSS still wins.