Using Virtual Colors

Panda allows you to create a virtual color or color placeholder in your project. The colorPalette property is how you create virtual color.

import { css } from '../styled-system/css'

const className = css({
  colorPalette: 'blue',
  bg: 'colorPalette.100',
  _hover: {
    bg: 'colorPalette.200',
  },
})

This will translate to the blue.100 background color and blue.200 background color on hover.

In this lesson, we'll clean up the badge recipe we created earlier and make it more flexible using virtual colors.