@envisionly/envisiontech-core NPM

Envisiontech-Core

Envisiontech-Core provides a set of reusable Svelte components to help you build consistent and accessible user interfaces.

Warning!

Please be aware that this is currently in very early development and is not ready for production.

Changelog

See the CHANGELOG.md file for a detailed history of changes.

Quick Start

Installation

Install the library via npm:

npm install @envisionly/envisiontech-core

Using Components

Now you can use the components in your Svelte files. For example:

<script lang="ts">
	import EnvisionButton from '@envisionly/envisiontech-core';
</script>

<EnvisionButton text="Click Me" size="large" onclick={() => alert('Button clicked!')} />

Component Categories

Currently we have the following component categories available:

Content: These components are used for displaying content sto the users. An example of this is our EnvisionVideoPlayer component.
Controls: These components are used for controling an application. For example our EnvisionButton component.
inputs: Components that are used in forms and for gathering user input. Example, our EnvisionCheckbox component.
layout: These components are used for displaying information. Our EnvisionCard and EnvisionGrid components are great examples.
navigation: For navigating around the navigation. For example our EnvisionLink component.

Theming

Currently we have one theme and you can customize the following colours by creating your own css variables.

Colors

envision-primary: This is the primary blue color that we use for things like background colors and the color of clickable components like links.
envision-secondary: This is the gold color that you will see used for things like outlines and hovor affects.
envision-primary-contrast: The high-contrast version of the envision-primary color. This is used when the user has high-contrast enabled.
envision-secondary-contrast: The high-contrast version of the envision-secondary color. This is used when the user has high-contrast enabled.

Example

The following is an example of how you can customise your theme.

<style>
	:root {
		/* Primary colours */
		--color-envision-primary: #191970;
		--color-envision-secondary: #daa520;

		/* High contrast colours */
		--color-envision-primary-contrast: #161664;
		--color-envision-secondary-contrast: #000000;
	}
</style>