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.

Local development

To test features isolated or develop new features use Quickstart (Showcase).

If you want to test feature in a project you can run npm run build in the lib.svelte.base.components. This will generate a new folder package in the project root folder.

Run npm i <path-to-package-folder> --install-links in the project where you want to test the lib. This will add the lib package to the package.json file and write dependencies from lib package to package-lock.json.

[!CAUTION] If you run womipiler clean or wompiler p in project the lib dependency will be overwritten / removed because package.json and package-lock.json will be recreated.

Therefore, lib can only be added manually after wompiler compilation and it is not possible to add development lib to a dist file (wompiler dist will also remove local dependencies).

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