@hixme-ui/theme-props

    2.0.0-alpha.12 • Public • Published

    Theme Props

    Utility for parsing theme properties by CSS attribute name and props passed in by the component

    npm i --save @hixme-ui/theme-props

    Theme props getters for the HUI theme

    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

    getThemePropsComposer(propsName, defaultValue)

    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>
    )

    Install

    npm i @hixme-ui/theme-props

    DownloadsWeekly Downloads

    41

    Version

    2.0.0-alpha.12

    License

    MIT

    Unpacked Size

    13.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar