This package has been deprecated

Author message:

no longer supported, you might be looking for @intrnl/stylx instead

@intrnl/styl
TypeScript icon, indicating that this package has built-in type declarations

0.4.3 • Public • Published

styl

Lightweight CSS-in-JS runtime

Usage

import { keyframes, style } from '@intrnl/styl';

let fadeIn = keyframes({
	'from': {
		opacity: 0,
	},
	'to': {
		opacity: 1,
	},
});

let button = style({
	backgroundColor: 'red',

	'&:hover': {
		backgroundColor: 'blue',
	},
	'@media (prefers-reduced-motion: no-preference)': {
		animation: `${fade_in} .2s ease`,
	},
});

Theming

import { createTheme, createThemeContract, style } from '@intrnl/styl';

let theme = createThemeContract({
	palette: {
		black: null,
		white: null,
		red: null,
	},
});

let themeClass = createTheme(theme, {
	palette: {
		black: '#000',
		white: '#fff',
		red: '#f00',
	},
});

let Button = style({
	backgroundColor: theme.palette.black,
});

Recipes

import { recipe } from '@intrnl/styl';

let Button = recipe({
	base: {
		borderRadius: 6,
	},

	variants: {
		color: {
			neutral: { background: 'whitesmoke' },
			brand: { background: 'blueviolet' },
			accent: { background: 'slateblue' },
		},
		size: {
			small: { padding: 12 },
			medium: { padding: 16 },
			large: { padding: 24 },
		},
		rounded: {
			true: { borderRadius: 999 },
		},
	},

	compoundVariants: [
		{
			variants: {
				color: 'neutral',
				size: 'large',
			},
			style: {
				background: 'ghostwhite',
			},
		},
	],

	defaultVariants: {
		color: 'accent',
		size: 'medium',
	},
});

Readme

Keywords

none

Package Sidebar

Install

npm i @intrnl/styl

Weekly Downloads

0

Version

0.4.3

License

MIT

Unpacked Size

16.8 kB

Total Files

10

Last publish

Collaborators

  • intrnl