Config Functions

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 definitions.

import { defineConfig } from '@bamboocss/dev'
 
export default defineConfig({
  theme: {},
  include: ['src/**/*.{js,jsx,ts,tsx}'],
})

defineRecipe

Function for recipe definitions.

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 definitions.

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 definitions.

import { definePattern } from '@bamboocss/dev'
 
const visuallyHidden = definePattern({
  transform(props) {
    return {
      srOnly: true,
      ...props,
    }
  },
})

definePreset

Function for preset definitions.

import { definePreset } from '@bamboocss/dev'
 
export const bambooPreset = definePreset({
  theme: {
    extend: {
      tokens: {
        colors: { primary: { value: 'blue.500' } },
      },
    },
  },
})

definePlugin

Function for plugin definitions.

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 definitions.

import { defineKeyframes } from '@bamboocss/dev'
 
export const keyframes = defineKeyframes({
  fadeIn: {
    '0%': { opacity: '0' },
    '100%': { opacity: '1' },
  },
})

defineGlobalStyles

Function for global styles definitions.

import { defineGlobalStyles } from '@bamboocss/dev'
 
const globalCss = defineGlobalStyles({
  'html, body': {
    color: 'gray.900',
    lineHeight: '1.5',
  },
})

defineGlobalFontface

Function for global font face definitions. Each key is a font family name, and its value is one @font-face rule or an array of them.

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

defineUtility

Function for utility definitions.

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. Accepts the tokens and semanticTokens a theme variant may override.

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 for a worked example.

import { defineThemeContract } from '@bamboocss/dev'
 
const defineTheme = defineThemeContract({
  tokens: { colors: { red: { value: '' } } },
})

defineMixins

Function for mixin definitions. Replaces defineTextStyles, defineLayerStyles and defineAnimationStyles, which differed only in which css properties the value could set.

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.

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

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

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.