Stylo

A set of utility components and functions for quickly building theme-based user interfaces in Svelte.

It's loosely based on Styled System ideas and Theme specification, but implemented as pure Svelte components (without any external dependencies).

Styling is applied using normal Svelte properties, taken from a theme-aware set of CSS properties (and shorthands).

Example:

<Panel
  bg="surface" 
  color="secondary++"
  border 
  shadow="lg"
  rounded="md"
  p="nm" pr="lg" pl="lg"
  m="md">
  A panel with background, color, border, shadow, radii, padding
  and margin using default Theme values
</Panel>

Status

This is work in progress, not ready for dev or production use.