API

sharedClasses

Turns a component's shared props into classes that set the shared custom properties.

Signature

import { sharedClasses, type SharedClassProps, type Variant } from 'sveltier';

function sharedClasses(
  props: SharedClassProps,
  component?: string, // named in development warnings
  variants?: readonly Variant[] // the variants this component takes, all by default
): string;

sharedClasses({ variant: 'tonal', size: 'sm', color: 'success', rounded: true }, 'MyPill');
// 'sv-variant-tonal sv-size-sm sv-color-success sv-rounded'

It returns classes only for the props you pass, in a fixed order, and imports the stylesheet that defines them. Use it in $derived or directly in the class attribute.

In development, a value outside its list logs a warning that names component, gives the valid values and, for a colour passed as the variant, the prop it belongs to. A component that takes only some variants passes them as variants. Production builds leave the check out. See Errors.

Props and classes

Name	Type	Description
`variant`	`'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'`	sv-variant-<variant>: sets --sv-variant-bg, --sv-variant-fg, --sv-variant-border and --sv-variant-shadow from the colour. plain also sets --sv-state-hover and --sv-state-press to 0%.
`color`	`Color`	sv-color-<name>: sets --sv-color and --sv-on-color. Intents and custom colours get their class from the theme stylesheet.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	sv-size-<size>: sets --sv-size-height (a control height) and --sv-size-text.
`density`	`'compact' \| 'default' \| 'comfortable'`	sv-density-<density>: sets --sv-density, a multiplier for heights and paddings.
`rounded`	`boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	sv-rounded (true) clears --sv-rounded so the component default applies; false and none give 0, sm–xl a theme radius, full a pill in every theme.

Types

Name	Type	Description
`SharedProps`	`interface`	variant, density, size, color, rounded, disabled and loading: the props every component that has them declares with these names and values.
`SharedClassProps`	`Pick<SharedProps, 'variant' \| 'density' \| 'size' \| 'color' \| 'rounded'>`	What sharedClasses takes.
`Color`	`IntentColor \| 'neutral' \| keyof CustomColors`	A theme colour. Anything else is a type error.
`CustomColors`	`interface`	Register custom colours from defineTheme here by declaration merging.
`VARIANTS / SIZES / DENSITIES`	`readonly tuples`	The allowed values, for building controls or validating input.

See Shared props for the meaning of each value and a live preview.