Layer Styles

Overview

Layer styles allow you to define visual properties. The common properties are:

• Color or text color
• Background color
• Border width and border color
• Box shadow
• Opacity

Defining layer styles

Layer styles are defined using the defineLayerStyles function.

import { defineLayerStyles } from '@pandacss/dev'

Built-in layer styles

Cerberus provides a set of built-in layer styles.

Updating the theme

To use the layer styles, update the theme object with the layerStyles property.

import { defineConfig } from '@pandacss/dev'
import { layerStyles } from './layer-styles'
 
export const config = defineConfig({
  theme: {
    layerStyles,
  },
})

npm run prepare

pnpm run prepare

deno run npm:prepare

bun run prepare

Using layer styles

Now you can use layerStyle property in your components.

<Box layerStyle="outline.subtle" />

To utilize in the css function:

css({
  layerStyle: 'outline.subtle',
})