Svelte Components Library

Quick Start (Showcase)

# Install dependencies
npm i

# Start the dev server
npm run dev

Contributions

Please see CONTRIBUTING.md for information on contributions to this package.

Themes

You can include one of the provided themes:
@informaticon/lib.svelte.base.components/themes/<theme-name>.css

See src/lib/themes for a list of available themes.

If you want to create / include a custom theme, then use the same format as we use for the provided themes.
Use RGB color values without a surrounding rgb(<red> <green> <blue>) call. This is done so that we can use dynamic opacities like rgb(var(--color-primary-500) / .5).

Tip: Use a palette generator like the one by Simeon Griggs to create custom palettes having the swatches 50 through 900.
Use an editor tool (IntelliJ / VSCode Extension) to convert the colors to RGB.

Color palettes

| Name | Description | | --------- | ------------------------------------------------------------------- | | surface | Normal backgrounds and font (whites, grays, blacks) | | primary | The main brand color | | secondary | A secondary color that can be combined with the primary brand color | | accent | An accent color contrasting the other colors | | warning | Draws attention to some notice / warning | | error | Draws attention to a problem / error | | success | Signaling success. Not too flashy. |