Svelte Components Library


Quick Start (Showcase)

``bash


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/.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( ) 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.

$3

| 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. |