An entire AdminBro interface is built with 2 main packages:

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.

The structure of the Theme is as follows:

const theme = {
  breakpoints,
  colors,
  fontSizes,
  fontWeights,
  lineHeights,
  shadows,
  sizes,
  space,
}

Each element controls a different kind of props passed to the Design System Components.

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.
`

There is a helper function themeGet which can be used to fetch the data from Theme.

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 the 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,

Responsive styles

You can pass an array instead of value to props to define how behaves in in different breakpoints.

so passing [1, 1/2, 0.4] as width will width for a following breakpoints:

<= 577px: 100%
578px-769px: 50%
>= 769px: 40%

Combined with {@Box} and {@FlexProps} creates a tool to build entire layouts.

Take a look at this 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 the viewport reaches 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 https://styled-system.com/responsive-styles

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

Members

# constant borders

Border styles

Properties:

Name	Type	Description
`input`	string
`filterInput`	string
`bg`	string
`default`	string

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

# constant borderWidths

Border widths set for an entire layout. If you like to have border radius in Button's and Box'es Then set default property.

Properties:

Name	Type	Description
`default`	string	default border with

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

# 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
`0`	string	577px
`1`	string	769px
`2`	string	1024px
`3`	string	1324px

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

# constant colors

Color palette.

Properties:

Name	Type	Default
`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
`border`	string	#DDE1E5,
`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 45

# constant fontSizes

Properties:

Name	Type	Default	Description
`xs`	string	10px	'xs' font size
`sm`	string	12px	'sm' font size
`default`	string	14px	(alias md) '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 149

# constant fontWeights

Properties:

Name	Type	Default
`lighter`	string	200
`lighter`	string	300
`normal`	string	400
`normal`	string	500
`bolder`	string	900

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

# constant lineHeights

Properties:

Name	Type	Default	Description
`xs`	string	10px
`sm`	string	12px
`default`	string	16px	(alias md)
`lg`	string	24px
`xl`	string	32px
`xxl`	string	40px

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

# constant shadows

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 213

# constant sizes

Properties:

Name	Type	Default
`navbarHeight`	string	64px
`sidebarWidth`	string	300px
`maxFormWidth`	string	740px

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

# 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 - (alias md)
`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 111

Methods

# static themeGet(kind, valueopt, offsetopt) → {ThemeFunction}

Handy utility function which simplifies taking values from the Theme.

Example

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

const myComponent = styled(Box)`
  padding: ${themeGet('space', 'xl')};
  font: ${themeGet('font')};
  margin-top: ${themeGet('space', 'xl', -2)};

  margin-bottom: ${(props) => themeGet('space', props.disabled ? 'xl' : 'xxl')(props)};
`

Parameters:

Name	Type	Attributes	Description
`kind`	string		One of the keys in the Theme interface. For example: `fontWeights`
`value`	string	<optional>	Value for the key
`offset`	string \| number	<optional>	optional offset. When you want to take xxl + 2pixels you can do this by passing +2 as the offset.

New:

in version 3.3

View Source admin-bro-design-system/src/utils/theme-get.ts, line 21

Returns:

function taking props as an argument

Type: ThemeFunction

Type Definitions

Type: 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 452

Type: 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 280

Type: 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 384

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' />

Type: 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 340

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' />

Type: 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 294

Type: 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 322

Type: Enum

# VariantType

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

Responsive styles

Members

# constant borders

Properties:

# constant borderWidths

Properties:

# constant breakpoints

Properties:

# constant colors

Properties:

# constant fontSizes

Properties:

# constant fontWeights

Properties:

# constant lineHeights

Properties:

# constant shadows

Properties:

# constant sizes

Properties:

# constant space

Properties:

Methods

# static themeGet(kind, valueopt, offsetopt) → {ThemeFunction}

Example

Parameters:

Type Definitions

# BorderProps

Properties:

# ColorProps

Properties:

# FlexboxProps

Properties:

Example

# LayoutProps

Properties:

Example

# SpaceProps

Properties:

# TypographyProps

Properties:

# VariantType

Software House with a passion for both JavaScript and TypeScript.