Layer Styles

Layer Styles are very similar to Typography Styles except that they are applied to surfaces and controls. In this lesson, we'll walk through how to create a layer style.

Define Layer Styles

Inside the panda.config file and within the theme object, add the layerStyles property.

 theme: {
    extend: {
      layerStyles: {
        surface: {
          outline: {
            value: {
              borderColor: 'gray.200',
              borderWidth: '3px',
            },
          },
          raised: {
            value: {
              boxShadow: '0px 12px 25px 0px rgba(0, 0, 0, 0.17)',
              border: '1px solid',
              borderColor: 'neutral.100',
            },
          },
          subtle: {
            value: {
              background: 'neutral.100',
            },
          },
        },
        control: {
          selected: {
            value: {
              background: 'blue.100',
              borderWidth: '4px',
              borderColor: 'blue.500',
            },
          },
          disabled: {
            value: {
              background: 'gray.300',
            },
          },
          solid: {
            value: {
              background: 'blue.600',
            },
          },
        },
      },
    },
  },