@alexnaf/theme v0.0.9

Installation

npm i @alexnaf/theme styled-components styled-media-query what-input

Usage

Example app:

//App.js

import styled from 'styled-components';
import 'what-input';
import { GlobalStyle } from '@alexnaf/theme';

const App = () => (
		<div>
			<GlobalStyle />
			{/* Your app code here */}
		</div>			
)

Example component:

//Example.js

import { colors, borderRadius, shadows, spacing, media } from '@alexnaf/theme';

const Example = ({ children }) => (
	<Card>{children}</Card>
)

const Card = styled.div`
	background: ${colors.primary.main};
	border-radius: ${borderRadius.small};
	box-shadow: ${shadows.shadow1};
	padding: ${spacing.space16};
	
	${media.lessThan('m')`
		padding: ${spacing.space4};
	`;
`