@littlespoon/theme

@littlespoon/theme

Install

Yarn:

yarn add @littlespoon/theme

npm:

npm install @littlespoon/theme --save

UNPKG

Usage

Import theme:

import theme from '@littlespoon/theme'

theme.colors.primary.brand.brand60() // 'rgba(44,213,196,1)'

Import colors:

import colors from '@littlespoon/theme/lib/colors'

colors.primary.brand.brand60() // 'rgba(44,213,196,1)'

Import color with alpha transparency:

import { brand60 } from '@littlespoon/theme/lib/colors/primary'

brand60(0.5) // 'rgba(44,213,196,0.5)'

Import fonts:

import { primary, secondary } from '@littlespoon/theme/lib/fonts'

primary.family // 'Lato, sans-serif'
primary.weight.bold // 700

Import primary font-family and font-weight:

import { family, weight } from '@littlespoon/theme/lib/fonts/primary'

family // 'Lato, sans-serif'
weight.bold // 700

Import breakpoints:

import breakpoints, { desktop } from '@littlespoon/theme/lib/breakpoints'

breakpoints.mobile // 0
desktop // 1000

Generate media queries:

import { desktop, down, mobile, up } from '@littlespoon/theme/lib/breakpoints'

up(mobile, 'font-size: 42rem') // '@media (min-width: 0px) { font-size: 42rem; }'
down(desktop, 'display: none') // '@media (max-width: 1000px) { display: none; }'