Shadows

Overview

Shadow tokens represent the shadow of an element. They provide depth and hierarchy to your interface by creating visual layers. Cerberus provides a set of predefined shadow tokens that you can use throughout your application.

Tokens

Cerberus provides the following shadow tokens:

2xs

0 1px rgb(0 0 0 / 0.05)

0 1px 2px 0 rgb(0 0 0 / 0.05)

0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)

2xl

0 25px 50px -12px rgb(0 0 0 / 0.25)

inset-2xs

inset 0 1px rgb(0 0 0 / 0.05)

inset-xs

inset 0 1px 1px rgb(0 0 0 / 0.05)

inset-sm

inset 0 2px 4px rgb(0 0 0 / 0.05)

0px 2px 16px 0px hsla(274, 95%, 8%, 0.1)

0px 0px 20px 4px hsla(274, 95%, 8%, 0.1)

0px 0px 20px 8px hsla(274, 95%, 8%, 0.25)

Usage

You can use shadow tokens with the shadow or boxShadow props:

import { Box } from "styled-system/jsx"
 
// Using predefined shadow tokens
 
<Box shadow="sm">Small shadow</Box>
<Box shadow="md">Medium shadow</Box>
<Box shadow="lg">Large shadow</Box>
 
// Using boxShadow prop
 
<Box boxShadow="md">Medium shadow</Box>

Custom Shadows

You can also define custom shadow tokens in your theme configuration:

import { createCerberusConfig, createCerberusPreset } from '@cerberus/panda-preset'
 
export default createCerberusConfig({
  presets: [createCerberusPreset()],
 
  include: ['./app/**/*.{ts,tsx}'],
  exclude: [],
 
  theme: {
    extend: {
      tokens: {
        shadows: {
          custom: {
            value: '0 4px 8px rgba(0, 0, 0, 0.1)',
          },
          glow: {
            value: '0 0 20px rgba(59, 130, 246, 0.5)',
          },
        },
      },
    },
  },
})

Shadow Values

The shadow tokens support both string values and composite objects:

String Values

shadows: {
  simple: {
    value: '0 1px 3px rgba(0, 0, 0, 0.1)'
  }
}

Composite Values

shadows: {
  complex: {
    value: {
      offsetX: 0,
      offsetY: 4,
      blur: 8,
      spread: 0,
      color: "rgba(0, 0, 0, 0.1)"
    }
  }
}

Multiple Shadows

shadows: {
  layered: {
    value: ['0 1px 2px rgba(0, 0, 0, 0.05)', '0 4px 8px rgba(0, 0, 0, 0.1)']
  }
}