Responsive theme-based props

Introduction

All @deity/falcon-ui components accept responsive, theme-based style props which offer easy to use, flexible yet consistent styling customization.

Responsive, theme-based style props can be used inline on component:

xxxxxxxxxx

  <Button px="lg" bg="primaryLight">Hello</Button>

or defined in theme:

xxxxxxxxxx

const theme = createTheme({

  components: {

    button: {

      px: 'lg',

      bg: 'primaryLight'

    }

  }

});

All of @deity/falcon-ui components come with default theme which can be overridden as shown in the example above.

<Box my="lg">Responsive theme-based style props playground</Box>

<GridLayout gridGap="lg" gridTemplateColumns="1fr 1fr">

  <Box p="md" bg="primary" color="primaryText" mt="md">

    Item1

  </Box>

  <Box p="md" bg="primaryDark" fontSize="xxl">

    Item2

  </Box>

  <Box p="md" bg="secondary" boxShadow="subtle">

    Item3

  </Box>

  <Box p="md" bg="secondaryLight" borderRadius="round">

    Item4

  </Box>

</GridLayout>

Responsive notation

All of the responsive theme-based props work seamlessy with breakpoints defined in Theme.

Simply pass object as responsive prop value with its keys being breakpoints keys defined in Theme and values being property values to have responsive prop that changes based on screen width.

Breakpoint values defined in Theme get replaced with @media screen and (min-width :...) media query.

<Button px={{ xs: 'sm', md: 'xxl' }}> Hello!</Button>

<Box bg={{ sm: 'primary', lg: 'secondaryLight' }} p="lg" mt="md">

  Responsive props!

</Box>

Css prop

All @deity/falcon-ui components include css prop as an escape hatch for more complex and one-off styles. Css prop accepts CSS properties as an object literal or function with props param that has theme and returns CSS properties as an object literal.

<Button css={{ transform: 'skew(25deg)' }}>

  <Box

    css={({ theme }) => ({

      color: theme.colors.secondaryLight,

      transform: 'skew(-25deg)',

    })}

  >

    Css prop in Action!

  </Box>

</Button>

Full reference of available props

Colors related props

Spacing related props

The margin and padding props use a shorthand syntax, similar to Tachyons, Basscss or Rebass approaches.

Typography related props

Borders related props

Miscellaneous props