Members
# constant borders
Properties:
Name | Type | Description |
---|---|---|
input |
string
|
|
filterInput |
string
|
|
bg |
string
|
|
default |
string
|
# constant borderWidths
Then set default property.
Properties:
Name | Type | Description |
---|---|---|
default |
string
|
default border with |
# constant 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 |
# constant colors
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 |
# 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 |
# constant fontWeights
Properties:
Name | Type | Default | Description |
---|---|---|---|
lighter |
string
|
200 | |
lighter |
string
|
300 | |
normal |
string
|
400 | |
normal |
string
|
500 | |
bolder |
string
|
900 |
# 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 |
# constant shadows
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
|
# constant sizes
Properties:
Name | Type | Default | Description |
---|---|---|---|
navbarHeight |
string
|
64px | |
sidebarWidth |
string
|
300px | |
maxFormWidth |
string
|
740px |
# constant space
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 - |
Methods
# static themeGet(kind, valueopt, offsetopt) → {ThemeFunction}
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:
|
|
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. |
function taking props as an argument
ThemeFunction
Type Definitions
object
# BorderProps
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> |
object
# ColorProps
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:
object
# FlexboxProps
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 |
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
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 |
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
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 |
object
# TypographyProps
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 |
Enum