npm package: @seyph/spark
Description: [![NPM version][npm-image]][npm-url] [![Build][github-build]][github-build-url] ![npm-typescript] [![License][github-license]][github-license-url]
Latest version: 1.0.40

# Spark Design System

[![NPM version][npm-image]][npm-url]
[![Build][github-build]][github-build-url]
![npm-typescript]
[![License][github-license]][github-license-url]

[**Storybook Docs**](https://spark.seyph.com/)

## Installation:

```bash
npm install @seyph/spark
```

or

```bash
yarn add @seyph/spark
```

AND

Edit your tailwind.config.js file:

```js
{
	// add @seyph/spark to tailwind content
	content: [..., './node_modules/@seyph/spark/**/*.js'],
	...
}
```

```js
{
	...
	theme: {
		extend: {
			// copy everything of tailwind.config.js of the repo @seyph/spark here:
			colors: {
				transparent: 'transparent',
				current: 'currentColor',
				inherit: 'inherit',
				primary: {
					DEFAULT: 'hsl(230, 100%, 60%)',
					darker: 'hsl(230, 100%, 48%)',
					dark: 'hsl(230, 100%, 54%)',
					light: 'hsl(230, 100%, 66%)',
					lighter: 'hsl(230, 100%, 72%)'
				},
				accent: {
					DEFAULT: 'hsl(229, 14%, 15%)',
					darker: 'hsl(229, 14%, 0%)',
					dark: 'hsl(229, 14%, 8%)',
					light: 'hsl(229, 14%, 21%)',
					lighter: 'hsl(229, 14%, 27%)'
				},
				black: 'hsl(230, 13%, 9%)',
				white: 'hsl(0, 0%, 100%)',
				warning: {
					DEFAULT: 'hsl(46, 100%, 61%)',
					darker: 'hsl(46, 100%, 49%)',
					dark: 'hsl(46, 100%, 55%)',
					light: 'hsl(46, 100%, 67%)',
					lighter: 'hsl(46, 100%, 73%)'
				},
				success: {
					DEFAULT: 'hsl(122, 50%, 60%)',
					darker: 'hsl(122, 50%, 48%)',
					dark: 'hsl(122, 50%, 54%)',
					light: 'hsl(122, 50%, 66%)',
					lighter: 'hsl(122, 50%, 72%)'
				},
				error: {
					DEFAULT: 'hsl(342, 92%, 54%)',
					darker: 'hsl(342, 92%, 42%)',
					dark: 'hsl(342, 92%, 48%)',
					light: 'hsl(342, 92%, 60%)',
					lighter: 'hsl(342, 92%, 66%)'
				},
				floor: {
					DEFAULT: 'hsl(0, 0%, 7%)',
					darker: 'hsl(0, 0%, 0%)',
					dark: 'hsl(0, 0%, 2%)',
					light: 'hsl(0, 0%, 12%)',
					lighter: 'hsl(0, 0%, 15%)'
				},
				contrast: {
					lower: 'hsl(240, 1%, 19%)',
					low: 'hsl(240, 1%, 35%)',
					medium: 'hsl(240, 1%, 53%)',
					high: 'hsl(240, 4%, 80%)',
					higher: 'hsl(240, 100%, 99%)'
				}
			},
			boxShadow: {
				'input-default': 'inset 0px 0px 0px 1px hsl(240 1% 35%);',
				'input-focus':
					'inset 0px 0px 0px 1px hsla(240, 1%, 35%, 0), 0px 0px 0px 2px hsl(230, 100%, 60%), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05),0 3.5px 6px rgba(0, 0, 0, 0.1);',
				'input-invalid':
					'inset 0px 0px 0px 1px hsla(240, 1%, 35%, 0), 0px 0px 0px 2px hsl(342, 92%, 54%), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05),0 3.5px 6px rgba(0, 0, 0, 0.1);',
				'input-checkbox-radio': '0 0 0 3px hsla(230 100% 60% / 0.2)',
				'input-checkbox-radio-invalid': '0 0 0 3px hsla(342 92% 54% / 0.2)'
			},
			backgroundImage: {
				'merged-input-gradient':
					'linear-gradient(to left, transparent calc(100% - 1px), hsl(var(--color-contrast-low)) 100%)',
				'checkbox-checked': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E")`,
				'radio-checked': `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")`
			},
			aria: {
				invalid: 'invalid="true"'
			}
		}
	}
	...
}
```

## Usage:

Add `ComponentName` to your component/page:

```js
import { ComponentName } from '@seyph/spark'

<ComponentName componentProps={} />

```

[npm-url]: https://www.npmjs.com/package/@seyph/spark
[npm-image]: https://img.shields.io/npm/v/@seyph/spark
[github-license]: https://img.shields.io/github/license/seyph/spark
[github-license-url]: https://github.com/seyph/spark/blob/master/LICENSE
[github-build]: https://github.com/seyph/spark/actions/workflows/release-npm-package.yml/badge.svg
[github-build-url]: https://github.com/seyph/spark/actions/workflows/release-npm-package.yml
[github-build]: https://github.com/seyph/spark/actions/workflows/deploy-storybook.yml/badge.svg
[github-build-url]: https://github.com/seyph/spark/actions/workflows/deploy-storybook.yml
[npm-typescript]: https://img.shields.io/npm/types/@seyph/spark