Styles

Litefy's styling is layered CSS custom properties, all defined in OKLCH and mapped into Tailwind via @theme inline — every component reads semantic tokens (bg-background, text-primary, border…), so swapping a layer restyles the whole kit without touching component code.

theme.css is the required base and comes preinstalled with init. interactive.css is recommended but optional — skip it if you would rather implement your own disabled/focus styles. Brand and Surface presets are optional add-ons, combinable freely (one brand + one surface at a time).

Theme

theme.css includes both light and dark color schemes — the .dark class on <html> automatically applies dark mode. The variables use OKLCH color values, supported by all modern browsers.

Shadow levels

Shadows have exactly four semantic levels. Light mode expresses elevation with black drop shadows; in dark mode the dark canvas swallows black shadows (nothing left to darken), so dark elevation is carried by a trio: raised surfaces (--surface-raised, canvas lightness +4.5% — floating components ship with bg-surface-raised), a white rim (1px light ring baked into the shadow, 7% on subtle → 14% on elevated) and a white top inset highlight (5–11%); black drop shadows are dialed down and only matter when an overlay floats over lighter content (body text, tables). Blur-glows in white are forbidden (they collide with the focus ring). Tailwind's default shadow scale is mapped onto these levels in theme.css — both class families share the same values, use whichever you prefer:

Radius levels match shadow levels one-to-one: rounded-sm inline/labels, rounded-md inputs/buttons, rounded-lg block cards, rounded-xl overlay shells.

Interactive Styles

interactive.css is not a theme — it is the global behavioral layer every Litefy component expects. It adds four @layer base rules:

• Disabled controls (:disabled, [inert], [data-disabled]): dimmed to 50% opacity, neutral background, not-allowed cursor and no pointer events — including wrappers like label:has(:disabled) so composed checkboxes and uploads dim entirely.
• Focus-visible: a 1px outline (--color-outline) plus a 3px soft ring (--color-ring) for keyboard navigation only — mouse clicks never show rings.
• Button press: inset shadow + brightness(0.95) on button:active for tactile feedback.

This layer is optional: without it, components work, but disabled/focus/press feedback is yours to implement.

Theme Composition

The Litefy theme consists of two freely combinable modules:

• Surface: the neutral canvas palette that controls page background and text colors.
• Brand: the interactive brand palette that controls buttons and accent controls.

To switch palettes at runtime with useTheme, see useTheme.

Surface Presets

Each preset overrides the neutral variables (--background, --foreground, --muted, --muted-foreground, --accent, --neutral).

Brand Presets

Each preset overrides the brand variables (--primary and --primary-accent).