Utility for parsing theme properties by CSS attribute name and props passed in by the component
npm i --save @hixme-ui/theme-props
These are named exports from the theme props package. The default function uses the the base theme.colors
object as shown above.
This container example defaults to none
for the background, but if white
is sent a boolean prop, it will add the blue background color from the theme.
import styled from 'styled-components'
import { getBackgroundColor } from '@hixme-ui/theme-props'
const Container = styled.div`
background: ${(props) => getBackgroundColor(props, 'none')
`
- getBackgroundColor()
theme.backgroundColors
- getBorderColor()
theme.borderColors
- getButtonBorderRadius()
theme.buttonBorderRadius
- getButtonFontSize()
theme.fontSizes
- getButtonGradientColor()
theme.buttonGradientColors
- getButtonHeight()
theme.buttonHeights
- getButtonMinWidth()
theme.buttonMinWidths
- getButtonTextColor()
theme.buttonTextColors
- getFontFamily()
theme.fontFamily
- getFontSize()
theme.fontSizes
- getFontWeight()
theme.fontWeights
- getOutlineButtonColor()
theme.outlineButtonColors
- getShadow()
theme.shadows
- getTextColor()
theme.textColors
Top level function by which all other theme prop utilities are built. The propsName
should map to a object of values on the theme.
import React from 'react'
import styled from 'styled-components'
import themeProps from '@hixme-ui/theme-props'
const theme = {
colors: {
white: '#ffffff',
black: '#000000',
red: '#ff0000',
green: '#00ff00',
blue: '#0000ff',
}
}
const ColorText = styled.span`
color: ${props => getTextColor(props, '#000000')};
`
const App = () => (
<ThemeProvider theme={theme}>
<ColorText green>Hello!</ColorText>
<ColorText blue>Hope you have a great day!</ColorText>
</ThemeProvider>
)