BoxShadow

Spécial primitive token composed of multiple parameters.

All parameters

x

Parameter

Allowed units

px | % | rem | em

Default unit

px

Allowed values

Information

Required

% will be transform to em

y

Parameter

Allowed units

px | % | rem | em

Default unit

px

Allowed values

Information

Required

% will be transform to em

blur

Parameter

blur

Allowed units

px | % | rem | em

Default unit

px

Allowed values

Information

% will be transform to em

spread

Parameter

spread

Allowed units

px | % | rem | em

Default unit

px

Allowed values

Information

% will be transform to em

type

Parameter

type

Allowed units

Default unit

Allowed values

innerShadow | dropShadow

Information

color

Parameter

color

Allowed units

Default unit

Allowed values

Information

Parameter	Allowed units	Default unit	Allowed values	Information
x	px \| % \| rem \| em	px	-	Required % will be transform to em
y	px \| % \| rem \| em	px	-	Required % will be transform to em
blur	px \| % \| rem \| em	px	-	% will be transform to em
spread	px \| % \| rem \| em	px	-	% will be transform to em
type	-	-	innerShadow \| dropShadow	-
color	-	-	-	-

Example

tokens.json

{
  "global": {
    "my-shadow-tokens": {
      "value": {
        "x": "0",
        "y": "25",
        "blur": "50",
        "spread": "-12",
        "color": "#1d4ed8",
        "type": "dropShadow"
      },
      "type": "boxShadow"
    }
  },
  "dark": {
    "my-shadow-tokens": {
      "value": {
        "x": "0",
        "y": "25",
        "blur": "50",
        "spread": "-12",
        "color": "#b91c1c",
        "type": "dropShadow"
      },
      "type": "boxShadow"
    }
  }
}

Usage

page.tsx

<div className="shadow-sd-my-shadow-tokens rounded-md w-24 h-24"></div>

Render

Example

tokens.json

{
  "global": {
    "my-shadow-color": {
      "default": {
        "value": "228, 10, 10",
        "type": "color"
      }
    },
    "my-complex-shadow-tokens": {
      "default": {
        "value": [
          {
            "x": 5,
            "y": 5,
            "spread": 3,
            "color": "rgba({my-shadow-color.default}, 0.15)",
            "blur": 5,
            "type": "dropShadow"
          },
          {
            "x": 4,
            "y": 4,
            "spread": 6,
            "color": "#00000033",
            "blur": 5,
            "type": "innerShadow"
          }
        ],
        "type": "boxShadow"
      }
    }
  },
  "dark": {
    "my-shadow-color": {
      "default": {
        "value": "145, 207, 118",
        "type": "color"
      }
    },
    "my-complex-shadow-tokens": {
      "default": {
        "value": [
          {
            "x": 5,
            "y": 5,
            "spread": 3,
            "color": "rgba({my-shadow-color.default}, 0.30)",
            "blur": 5,
            "type": "dropShadow"
          },
          {
            "x": 4,
            "y": 4,
            "spread": 6,
            "color": "#00000033",
            "blur": 5,
            "type": "innerShadow"
          }
        ],
        "type": "boxShadow"
      }
    }
  }
}

Usage

page.tsx

<div className="shadow-sd-my-complex-shadow-tokens-default rounded-md w-24 h-24 bg-sd-blue-100"></div>

Render