---
title: Config Functions
description: Functions to expose types for your config.
---

Config functions help define and provide type information for your configuration. These utilities enhance code
readability, enforce consistency, and ensure robust type checking.

## Config Creators

To help defining config in a type-safe way, you can use the following helpers:

### `defineConfig`

Function for [config](/docs/references/config) definitions.

```ts filename="bamboo.config.ts"
import { defineConfig } from '@bamboocss/dev'

export default defineConfig({
  theme: {},
  include: ['src/**/*.{js,jsx,ts,tsx}'],
})
```

### `defineRecipe`

Function for [recipe](/docs/concepts/recipes#config-recipe) definitions.

```ts
import { defineRecipe } from '@bamboocss/dev'

export const buttonRecipe = defineRecipe({
  className: 'button',
  description: 'The styles for the Button component',
  base: {
    display: 'flex',
  },
  variants: {
    visual: {
      funky: { bg: 'red.200', color: 'white' },
      edgy: { border: '1px solid token(colors.red.500)' },
    },
  },
  defaultVariants: {
    visual: 'funky',
    size: 'sm',
  },
})
```

### `defineSlotRecipe`

Function for [slot recipe](/docs/concepts/slot-recipes#config-slot-recipe) definitions.

```ts
import { defineSlotRecipe } from '@bamboocss/dev'

export const checkboxRecipe = defineSlotRecipe({
  className: 'checkbox',
  description: 'The styles for the Checkbox component',
  slots: ['root', 'control', 'label'],
  base: {
    root: { display: 'flex', alignItems: 'center', gap: '2' },
    control: { borderWidth: '1px', borderRadius: 'sm' },
    label: { marginStart: '2' },
  },
  variants: {
    size: {
      sm: {
        control: { width: '8', height: '8' },
        label: { fontSize: 'sm' },
      },
      md: {
        control: { width: '10', height: '10' },
        label: { fontSize: 'md' },
      },
    },
  },
  defaultVariants: {
    size: 'sm',
  },
})
```

### `definePattern`

Function for [pattern](/docs/customization/patterns) definitions.

```ts
import { definePattern } from '@bamboocss/dev'

const visuallyHidden = definePattern({
  transform(props) {
    return {
      srOnly: true,
      ...props,
    }
  },
})
```

### `definePreset`

Function for [preset](/docs/customization/presets#creating-a-preset) definitions.

```ts
import { definePreset } from '@bamboocss/dev'

export const bambooPreset = definePreset({
  theme: {
    extend: {
      tokens: {
        colors: { primary: { value: 'blue.500' } },
      },
    },
  },
})
```

### `definePlugin`

Function for [plugin](/docs/references/config#plugins) definitions.

```ts
import { definePlugin } from '@bamboocss/dev'

export const plugin = definePlugin({
  name: 'token-format',
  hooks: {
    'tokens:created': ({ configure }) => {
      configure({
        formatTokenName: (path) => '$' + path.join('-'),
      })
    },
  },
})
```

### `defineKeyframes`

Function for [keyframes](/docs/customization/theme#keyframes) definitions.

```ts
import { defineKeyframes } from '@bamboocss/dev'

export const keyframes = defineKeyframes({
  fadeIn: {
    '0%': { opacity: '0' },
    '100%': { opacity: '1' },
  },
})
```

### `defineGlobalStyles`

Function for [global styles](/docs/concepts/writing-styles#global-styles) definitions.

```ts
import { defineGlobalStyles } from '@bamboocss/dev'

const globalCss = defineGlobalStyles({
  'html, body': {
    color: 'gray.900',
    lineHeight: '1.5',
  },
})
```

### `defineGlobalFontface`

Function for [global font face](/docs/guides/fonts#global-font-face) definitions. Each key is a font family name, and
its value is one `@font-face` rule or an array of them.

```ts
import { defineGlobalFontface } from '@bamboocss/dev'

const globalFontface = defineGlobalFontface({
  Inter: {
    src: 'url(/fonts/inter.woff2) format("woff2")',
    fontWeight: '400',
    fontStyle: 'normal',
  },
})
```

### `defineUtility`

Function for [utility](/docs/customization/utilities) definitions.

```ts
import { defineUtility } from '@bamboocss/dev'

export const br = defineUtility({
  className: 'rounded',
  values: 'radii',
  transform(value) {
    return { borderRadius: value }
  },
})
```

### `defineThemeVariant`

Function for a single entry of [`theme.variants`](/docs/references/config#themevariants). Accepts the `tokens` and
`semanticTokens` a [theme variant](/docs/guides/multiple-themes) may override.

```ts
import { defineThemeVariant } from '@bamboocss/dev'

export const primary = defineThemeVariant({
  tokens: {
    colors: { text: { value: 'red' } },
  },
})
```

### `defineThemeContract`

Takes a partial theme variant and returns a `defineThemeVariant` that requires every token named in it, so a set of
variants cannot drift apart. See [Multiple themes](/docs/guides/multiple-themes) for a worked example.

```ts
import { defineThemeContract } from '@bamboocss/dev'

const defineTheme = defineThemeContract({
  tokens: { colors: { red: { value: '' } } },
})
```

### `defineMixins`

Function for [mixin](/docs/theming/mixins) definitions. Replaces `defineTextStyles`, `defineLayerStyles` and
`defineAnimationStyles`, which differed only in which css properties the value could set.

```ts
import { defineMixins } from '@bamboocss/dev'

export const mixins = defineMixins({
  body: {
    description: 'The body text style - used in paragraphs',
    value: {
      fontFamily: 'Inter',
      fontWeight: '500',
      fontSize: '16px',
      lineHeight: '24px',
      letterSpacing: '0',
    },
  },
  'fade-in': {
    value: {
      animationName: 'fade-in',
      animationDuration: 'fast',
    },
  },
})
```

### `defineStyles`

Function for style definitions.

This comes in handy when you want to define reusable styles in the config.

E.g. a set of styles to be used in multiple variants within a [recipe](/docs/concepts/recipes#config-recipe).

```ts {3, 14, 18} filename="recipes/button.ts"
import { defineRecipe, defineStyles } from '@bamboocss/dev'

const buttonVisualStyles = defineStyles({
  borderRadius: 'lg',
  boxShadow: 'sm',
})

export const buttonRecipe = defineRecipe({
  // ...
  variants: {
    visual: {
      funky: {
        bg: 'red.200',
        color: 'white',
        ...buttonVisualStyles,
      },
      edgy: {
        border: '1px solid token(colors.red.500)',
        ...buttonVisualStyles,
      },
    },
  },
})
```

## Token Creators

To help defining tokens in a type-safe way, you can use the following helpers:

### `defineTokens`

```ts
import { defineTokens } from '@bamboocss/dev'

const theme = {
  tokens: defineTokens({
    colors: {
      primary: { value: '#ff0000' },
    },
  }),
}
```

A per-category form — `defineTokens.colors(…)` — is also available, for defining tokens in a separate file.

### `defineSemanticTokens`

```ts
import { defineSemanticTokens } from '@bamboocss/dev'

const theme = {
  semanticTokens: defineSemanticTokens({
    colors: {
      primary: {
        value: { _light: 'token(colors.blue.400)', _dark: 'token(colors.blue.200)' },
      },
    },
  }),
}
```

`defineSemanticTokens.colors(…)` and the other per-category forms work the same way.
