Interface

Theme

Theme

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

function taking props as an argument

ThemeFunction

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

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

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

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

Enum

# VariantType

Reused Variant Enum: primary | danger | success | info | secondary | default

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