View Source adminjs-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 adminjs-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 adminjs-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 adminjs-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 adminjs-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 adminjs-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 adminjs-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 adminjs-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 adminjs-design-system/src/theme.ts, line 213

# constant sizes

Properties:

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

View Source adminjs-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 adminjs-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 '@adminjs/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.

View Source adminjs-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 adminjs-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 adminjs-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 adminjs-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 adminjs-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 adminjs-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 adminjs-design-system/src/theme.ts, line 322

Type: Enum

# VariantType

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