?HAMA

Edit File Size: 3.02 KB

/home/byroehnu/.trash/node_modules11/@adminjs/design-system/src/theme.doc.md

Text Base64

An entire AdminJS interface is built with 2 main packages:

- [styled-components]{@link https://styled-components.com/} backed by
- [styled-system]{@link https://styled-system.com/}.

The core of the style information is the {@link Theme}. It is base on the
[Theme Specification]{@link https://styled-system.com/theme-specification/} and
it is used by almost all the components provided by AdminJS.

The structure of the Theme is as follows:

```javascript
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:

```javascript
import styled from 'styled-components'
import { Box } from '@adminjs/design-system'

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

> There is a helper function {@link themeGet} which can be used to fetch the data from Theme.

But, since AdminJS uses [styled-system]{@link https://styled-system.com/}, you also can achieve
a similar result by passing a `bg` Prop to the [Box Component]{@link Box},
everything because Box supports all the {@link ColorProps}.

```javascript
import { Box } from '@adminjs/design-system'

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

The last way of accessing the theme is to use withTheme HOC provided by
[styled-components]{@link https://styled-components.com/}

```javascript
import { withTheme } from 'styled-components'

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

export default withTheme(MyComponent)
```

{@link 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:

```javascript
import { Box } from '@adminjs/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` 
{@link https://styled-system.com/responsive-styles}

Exit & Reset Text mode: syntax highlighting auto-detects file type.

Name	Size	Perms	Modified	Actions
atoms DIR	-	drwxr-xr-x	2026-02-28 00:31:46	Edit Download recursive recursive
hooks DIR	-	drwxr-xr-x	2026-02-28 00:31:52	Edit Download recursive recursive
molecules DIR	-	drwxr-xr-x	2026-02-28 00:31:48	Edit Download recursive recursive
organisms DIR	-	drwxr-xr-x	2026-02-28 00:31:48	Edit Download recursive recursive
templates DIR	-	drwxr-xr-x	2026-02-28 00:31:52	Edit Download recursive recursive
utils DIR	-	drwxr-xr-x	2026-02-28 00:32:00	Edit Download recursive recursive
constants.ts	94 B	lrw-r--r--	2026-02-28 00:31:40	Edit Download recursive recursive
global.ts	1.33 KB	lrw-r--r--	2026-02-28 00:31:42	Edit Download recursive recursive
index.doc.md	3.60 KB	lrw-r--r--	2026-02-28 00:31:40	Edit Download recursive recursive
index.ts	456 B	lrw-r--r--	2026-02-28 00:31:48	Edit Download recursive recursive
theme.doc.md	3.02 KB	lrw-r--r--	2026-02-28 00:31:40	Edit Download recursive recursive
theme.ts	18.73 KB	lrw-r--r--	2026-02-28 00:31:50	Edit Download recursive recursive

Directory Contents