Mist Theme Setup

Apply Mist theme tokens and update button and card primitives for documentation-style UI styling.

Theme Quickstart

Add the Mist theme variables to your global stylesheet (for example app.css or globals.css) so Mist primitives resolve color, border, and contrast consistently.

globals.css

Apply Theme

Ensure your root body includes theme-container so the selected Mist theme is applied across the application.

src/app.html

Required Components

After theme tokens are configured, update these Mist primitives in your app.

Component	Import Path	Update Scope
Button	$lib/components/ui/mist/button	Variant and size classes, anchor/button rendering
Card	$lib/components/ui/mist/card	Root variants and all card composition primitives

Button Component

Mist button adds a neutral variant for bold monochrome actions while keeping the standard shadcn-like variants.

Usage

button-usage.svelte

Source

components

Card Component

Mist card adds soft and mixed variants to support subtle sections commonly used across documentation-style layouts.

Usage

card-usage.svelte

Source

components