Spark Design System

Storybook Docs

Installation:

npm install @seyph/spark

or

yarn add @seyph/spark

AND

Edit your tailwind.config.js file:

{
	// add @seyph/spark to tailwind content
	content: [..., './node_modules/@seyph/spark/**/*.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:

import { ComponentName } from '@seyph/spark'

<ComponentName componentProps={} />