Shadows

Shadow design tokens available in the Cerberus Design System.

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:

theme.tokens.shadows

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)"
    ]
  }
}

On this page

Edit this page on Github