Interface

Theme

Theme

Entire AdminBro interface is build with styled-components backed by styled-system. The core of the style information is the Theme. It is base on the Theme Specification and it is used by almost all the components provided by AdminBro.

So let's say you would like to create a box with the same background as our primary100 color. This is one way of achieving that:

import styled from 'styled-components'
import { Box } from '@admin-bro/design-system'

const MyBlueBox = styled(Box)`
  background: ${({ theme }) => theme.colors.primary100};
  // other css styles you want to override.
`

But, since AdminBro uses styled-system, you also can achieve a similar result by passing a bg Prop to the Box Component, everything because Box supports all the ColorProps.

import { Box } from '@admin-bro/design-system'

const ComponentWhereIWantToUseBlueBox = () => (
  <Box bg="primary100">
  ...
  </Box>
)

The last way of accessing theme is to use withTheme HOC provided by styled-components

import { withTheme } from 'styled-components'


const MyComponent = (props) => {
  const { theme } = props
  // theme.colors.primary100
}

export default withTheme(MyComponent)

ColorProps is only one of the extensions we provided. Take a look at the documentation below to see all possible options, but let me give you one last example:

import { Box } from '@admin-bro/design-system'

const ComponentWhereIWantToUseResponsiveStyle = () => (
  <Box flex flexDirection="column">
    <Box width={[1, 1/2, 1/3]}>Sidebar</Box>
    <Box width={[1, 1/2, 2/3]}>Content</Box>
  </Box>
)

Above we defined that the Sidebar box should have 100% width until viewport reach the first breakpoint, then 50% (until the next breakpoint) and then 1/3rd of the page for the remaining 2 breakpoints.

You can read more about responsive features on styled-system page https://styled-system.com/responsive-styles

View Source admin-bro-design-system/src/theme.ts, line 3

Members

# constant breakpoints

Responsive breakpoints

How to use them - simply pass an array to given prop:

// Showing box on mobile devices
<Box display={["block", "none"]}>...</Box>

// responsive width
<Box width={[1, 1/2, 1/3, 1/4]}>...</Box>
Properties:
Name Type Default Description
0 string 577px
1 string 769px
2 string 1024px
3 string 1324px

View Source admin-bro-design-system/src/theme.ts, line 302

# constant colors

Color palette.

Properties:
Name Type Default Description
primary100 string #4268F6
primary80 string #6483F8
primary60 string #879FFA
primary40 string #A9BAFA
primary20 string #CBD5FD
accent string #38CAF1
love string #e6282b
grey100 string #1C1C38
grey80 string #454655
grey60 string #898A9A
grey40 string #C0C0CA
grey20 string #F6F7FB
white string #fff
errorDark string #DE405D
error string #FF4567
errorLight string #FFA5B5
successDark string #32A887
success string #70C9B0
successLight string #DBF0F1
infoDark string #4268F6
info string #879FFA
infoLight string #CBD5FD
filterBg string #343F87
hoverBg string #535B8E
inputBorder string #898A9A
separator string #C0C0CA
highlight string #F6F7FB
filterInputBorder string rgba(255,255,255,0.15)
filterDisabled string rgba(83,91,142,0.05)
bg string #F6F7FB

View Source admin-bro-design-system/src/theme.ts, line 119

# constant fontSizes

Properties:
Name Type Default Description
xs string 10px
'xs' font size
sm string 12px
'sm' font size
default string 14px
'default' font size
lg string 16px
'lg' font size
xl string 18px
'xl' font size
h4 string 24px
'h4' font size
h3 string 28px
'h3' font size
h2 string 32px
'h2' font size
h1 string 40px
'h1' font size

View Source admin-bro-design-system/src/theme.ts, line 218

# constant fontWeights

Properties:
Name Type Default Description
lighter string 300
normal string 400
bold string 700

View Source admin-bro-design-system/src/theme.ts, line 236

# constant lineHeights

Properties:
Name Type Default Description
sm string 12px
default string 16px
lg string 24px
xl string 32px
xxl string 40px

View Source admin-bro-design-system/src/theme.ts, line 250

# constant ShadowProps

This dimension can be used with testShadow and boxShadow props provided by ShadowProps

<Box variant="grey" boxShadow="card">Some content...</Box>
Properties:
Name Type Description
login string
cardHover string
drawer string
card string
inputFocus string
buttonFocus string

View Source admin-bro-design-system/src/theme.ts, line 274

# constant sizes

Properties:
Name Type Default Description
navbarHeight string 64px
sidebarWidth string 300px

View Source admin-bro-design-system/src/theme.ts, line 201

# constant space

Sizes can be used with paddings, margins etc.

This is the example of using responsive margin with Box component

<Box p=['default', 'xl']>some content</Box>

This component will have 8px padding for lowest breakpoint and 24px above this breakpoint.

Properties:
Name Type Default Description
xs string 2px

2px -

sm string 4px

4px -

default string 8px

8px -

lg string 16px

16px -

xl string 24px

24px -

xxl string 32px

32px -

x3 string 48px

48px -

x4 string 64px

64px -

x5 string 80px

80px -

x6 string 128px

128px -

View Source admin-bro-design-system/src/theme.ts, line 183

Type Definitions

object

# BorderProps

The border utility includes all style props related to border

Properties:
Name Type Attributes Description
borderWidth string | number <optional>
borderStyle string <optional>
borderColor string <optional>

It could be either a #hash or colors

borderRadius string | number <optional>
borderTop string | number <optional>
borderTopWidth string | number <optional>
borderTopStyle string <optional>
borderTopColor string <optional>

It could be either a #hash or colors

borderTopLeftRadius string | number <optional>
borderTopRightRadius string | number <optional>
borderRight string | number <optional>
borderRightWidth string | number <optional>
borderRightStyle string <optional>
borderRightColor string <optional>

It could be either a #hash or colors

borderBottom string | number <optional>
borderBottomWidth string | number <optional>
borderBottomStyle string <optional>
borderBottomColor string <optional>

It could be either a #hash or colors

borderBottomLeftRadius string | number <optional>
borderBottomRightRadius string | number <optional>
borderLeft string | number <optional>
borderLeftWidth string | number <optional>
borderLeftStyle string <optional>
borderLeftColor string <optional>

It could be either a #hash or colors

borderX string | number <optional>
borderY string | number <optional>

View Source admin-bro-design-system/src/theme.ts, line 475

object

# ColorProps

The color utility parses a component's color and bg props and converts them into CSS declarations. By default the raw value of the prop is returned. But most often you would use one of the color from the color palette.

Properties:
Name Type Attributes Description
color string <optional>

Text color. It could be either a #hash or colors from css theme name like grey80

backgroundColor, bg string <optional>

Background color. Similar as above could be a #hash or one of colors.

View Source admin-bro-design-system/src/theme.ts, line 310

object

# FlexboxProps

The flexbox utility includes style props for alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexDirection, flex, flexGrow, flexShrink, flexBasis, justifySelf, alignSelf, and order.

The width prop is transformed based on the following:

  • Numbers from 0-1 are converted to percentage widths.
  • Numbers greater than 1 are converted to pixel values.
  • String values are passed as raw CSS values.
  • And arrays are converted to responsive width styles.
  • the width prop will attempt to pick up values from the sizes
Properties:
Name Type Attributes Description
alignItems string <optional>

align-items

alignContent string <optional>

align-content

justifyItems string <optional>

justify-items

justifyContent string <optional>

justify-content

flexWrap string <optional>

flex-wrap

flexDirection string <optional>

flex-direction

flex boolean <optional>

flex

flexGrow number | string <optional>

flex-grow

flexShrink number <optional>

flex-shrink

flexBasis string <optional>

flex-basis

justifySelf string <optional>

justify-self

alignSelf string <optional>

align-self

order number | string <optional>

order

View Source admin-bro-design-system/src/theme.ts, line 414

Example
// alignItems
<Box alignItems='center' />

// alignContent
<Box alignContent='center' />

// justifyContent
<Box justifyContent='center' />

// flexWrap
<Box flexWrap='wrap' />

// flexBasis
<Box flexBasis='auto' />

// flexDirection
<Box flexDirection='column' />

// flex
<Box flex />

// justifySelf
<Box justifySelf='center' />

// alignSelf
<Box alignSelf='center' />

// order
<Box order='2' />
object

# LayoutProps

The layout utility includes style props for width, height, display, minWidth, minHeight, maxWidth, maxHeight, size, verticalAlign, overflow, overflowX, and overflowY.

The width prop is transformed based on the following:

  • Numbers from 0-1 are converted to percentage widths.
  • Numbers greater than 1 are converted to pixel values.
  • String values are passed as raw CSS values.
  • And arrays are converted to responsive width styles.
  • the width prop will attempt to pick up values from the sizes
Properties:
Name Type Attributes Description
width string <optional>

width

height string <optional>

height

display string <optional>

display

minWidth string <optional>

min-width

minHeight string <optional>

min-height

maxWidth string <optional>

max-width

maxHeight string <optional>

max-height

size string <optional>

size

verticalAlign string <optional>

vertical-align

overflow string <optional>

overflow

overflowX string <optional>

overflow-x

overflowY string <optional>

overflow-y

View Source admin-bro-design-system/src/theme.ts, line 370

Example
// width `50%`
<Box width={1/2} />

// width `256px`
<Box width={256} />

// width `'2em'`
<Box width='2em' />

// width `100%` on all viewport and `50%` from the smallest breakpoint and up
<Box width={[ 1, 1/2 ]} />

// width from `sizes`
<Box height='navbarHeight' />
object

# SpaceProps

The space utility converts shorthand margin and padding props to margin and padding CSS declarations.

You can use as a value raw dimensions in "px" or one of the value from the space scale.

Properties:
Name Type Attributes Description
margin, m string <optional>

margin

marginTop, mt string <optional>

margin-top

marginRight, mr string <optional>

margin-right

marginBottom, mb string <optional>

margin-bottom

marginLeft, ml string <optional>

margin-left

marginX, mx string <optional>

margin-left and margin-right

marginY, my string <optional>

margin-top and margin-bottom

padding, p string <optional>

padding

paddingTop, pt string <optional>

padding-top

paddingRight, pr string <optional>

padding-right

paddingBottom, pb string <optional>

padding-bottom

paddingLeft, pl string <optional>

padding-left

paddingX, px string <optional>

padding-left and padding-right

paddingY, py string <optional>

padding-top and padding-bottom

Set of props related to space. You can put there either string with 'px' or one of space properties like sm, default, xl etc.

View Source admin-bro-design-system/src/theme.ts, line 324

object

# TypographyProps

Typography props include fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textAlign, and fontStyle.

Properties:
Name Type Attributes Description
fontSize string <optional>

font-size. Could be either actual css value or key taken from fontSizes

fontWeight string <optional>

font-weight. Could be either actual css value or key taken from fontWeights

lineHeight string <optional>

line-height. Could be either actual css value or key taken from lineHeights

textAlign string <optional>

text-align

fontFamily string <optional>

font-family

fontStyle string <optional>

font-style

letterSpacing string <optional>

letter-spacing

View Source admin-bro-design-system/src/theme.ts, line 352