Permalink
beb2f78 Sep 23, 2018
5 contributors

Users who have contributed to this file

@jxnblk @flybayer @jsonmaur @zephraph @glennr
126 lines (104 sloc) 5.24 KB

Table of Style Functions

Core

Function Name Prop CSS Property Theme Field
space m margin space
space mt margin-top space
space mr margin-right space
space mb margin-bottom space
space ml margin-left space
space p padding space
space pt padding-top space
space pr padding-right space
space pb padding-bottom space
space pl padding-left space
width width width none
fontSize fontSize font-size fontSizes
color color color colors
color bg background-color colors

Typography

Function Name Prop CSS Property Theme Field
fontFamily fontFamily font-family fonts
textAlign textAlign text-align none
lineHeight lineHeight line-height lineHeights
fontWeight fontWeight font-weight fontWeights
fontStyle fontStyle font-style none
letterSpacing letterSpacing letter-spacing letterSpacings

Layout

Function Name Prop CSS Property Theme Field
display display display none
maxWidth maxWidth max-width maxWidths
minWidth minWidth min-width minWidths
height height height heights
maxHeight maxHeight max-height maxHeights
minHeight minHeight min-height minHeights
size size width height none
ratio ratio height padding-bottom none
verticalAlign verticalAlign vertical-align none

Flexbox

Function Name Prop CSS Property Theme Field
alignItems alignItems align-items none
justifyContent justifyContent justify-content none
flexWrap flexWrap flex-wrap none
flexDirection flexDirection flex-direction none
flex flex flex (shorthand) none
alignContent alignContent align-content none
justifyItems justifyItems justify-items none
justifySelf justifySelf justify-self none
alignSelf alignSelf align-self none
order order order none
flexBasis flexBasis flex-basis none

Grid Layout

Function Name Prop CSS Property Theme Field
gridGap gridGap grid-gap space
gridRowGap gridRowGap grid-row-gap space
gridColumnGap gridColumnGap grid-column-gap space
gridColumn gridColumn grid-column none
gridRow gridRow grid-row none
gridArea gridArea grid-area none
gridAutoFlow gridAutoFlow grid-auto-flow none
gridAutoRows gridAutoRows grid-auto-rows none
gridAutoColumns gridAutoColumns grid-auto-columns none
gridTemplateRows gridTemplateRows grid-template-rows none
gridTemplateColumns gridTemplateColumns grid-template-columns none
gridTemplateAreas gridTemplateAreas grid-template-areas none

Background

Function Name Prop CSS Property Theme Field
background background background none
backgroundImage backgroundImage bgImage background-image none
backgroundSize backgroundSize bgSize background-size none
backgroundPosition backgroundPosition bgPosition background-position none
backgroundRepeat backgroundRepeat bgRepeat background-repeat none

Misc

Function Name Prop CSS Property Theme Field
borderRadius borderRadius border-radius radii
borderColor borderColor border-color colors
borders border border borders
borders borderTop border-top borders
borders borderRight border-right borders
borders borderBottom border-bottom borders
borders borderLeft border-left borders
boxShadow boxShadow box-shadow shadows
opacity opacity o opacity opacity
overflow overflow overflow none

Position

Function Name Prop CSS Property Theme Field
position position position none
zIndex zIndex z-index none
top top top none
right right right none
bottom bottom bottom none
left left left none

Variant Styles

Function Name Prop CSS Property Theme Field
textStyle textStyle style object textStyles
colorStyle colors style object colorStyles
buttonStyle variant style object buttons