arc-theme
ARc theming utilities and resources
Install
$ npm install --save arc-theme
Usage
Basic
get
and getColor
use lodash's get
to reach the theme path.
console // outputs the entire theme object // { primary: [...], secondary: [...] } // ['#1976d2', '#2196f3', '#71bcf7', '#c2e2fb'] // ['#c2e2fb', '#71bcf7', '#2196f3', '#1976d2'] // '#1976d2' // { primary: '...', quote: '...' } // 'Helvetica Neue, Helvetica, Roboto, sans-serif' // theme.colors.primary // theme.reverseColors.primary[0]
Overriding theme
You can also provide your theme as the last argument.
const myTheme = {}myThemecolors = grayscale: '#222' '#555' '#888' '#bbb' '#fff'myThemereverseColors = // { grayscale: [...] } // arc-theme primary color // arc-theme primary font // myTheme.colors.grayscale // myTheme.reverseColors.grayscale[0] // theme.reverseColors.primary[0]
styled-components
Utilities for import styled from 'components'import font color reverseColor from 'arc-theme' const Div = styleddiv` font-family: ; color: ; background-color: ` // color = theme.colors.primary[0]// background-color = theme.reverseColors.grayscale[0]<Div ="primary" /> // color = theme.reverseColors.primary[0]// background-color = theme.colors.primary[0]<Div ="primary" />
import styled from 'components'import font color reverseColor from 'arc-theme' const Div = styleddiv` font-family: ; color: ;` // color = theme.colors.primary[1]<Div ="primary" /> // Because we defined the exception { grayscale: 0 }// color = theme.colors.grayscale[0]<Div ="grayscale" />
API
get(path: String|Array, [anotherTheme: Object])
Returns the value from anotherTheme[path]
or theme[path]
getColor(path: String|Array, [reverse: Boolean], [anotherTheme: Object])
Returns the value from anotherTheme.colors[path]
or theme.colors[path]
. colors
will be reverseColors
if reverse
is true
.
reverse(colors: Object)
Returns a new object with reverse colors.
colors
must be an object with the following structure:
const colors = foo: 'bar' 'baz' a: 'b' 'c' // { foo: ['baz', 'bar'], a: ['c', 'b'] }
key(path: String)(props: Object)
Returns the key in props.theme[path]
or theme[path]
.
This is the same as get(path, props.theme)
.
font(path: String)(props: Object)
Returns the font in props.theme.fonts[path]
or theme.fonts[path]
.
This is the same as get(['fonts', path], props.theme)
.
color(index: Number, [path: String], [exceptions: Object])(props: Object)
Returns the color in props.theme.colors[path][index]
or theme.colors[path][index]
. colors
will be reverseColors
if props.reverse
is true
.
This is the same as getColor([path || props.path][index], props.reverse, props.theme)
.
Arguments could be passed in any order.
reverseColor(index: Number, [path: String], [exceptions: Object])(props: Object)
Returns the color in props.theme.reverseColors[path][index]
or theme.reverseColors[path][index]
. reverseColors
will be colors
if props.reverse
is true
.
This is the same as getColor([path || props.path][index], !props.reverse, props.theme)
.
Arguments could be passed in any order.
ifProps(needle: Array|String|Object, pass: Any, fail: Any)(props: Object)
Returns pass
or fail
according to needle
result. needle
can be some of these:
'foo' // props.foo == true'foo' 'bar' // props.foo == true && props.bar == true'foo.bar' // props.foo.bar == true'foo.bar' 'baz' // props.foo.bar == true && props.baz == true foo: 'bar' // props.foo === 'bar' 'foo.bar': 'baz' // props.foo.bar === 'baz' foo: 'bar' baz: true // props.foo === 'bar' && props.baz === true
License
MIT © Diego Haz