On this page

Box shadow

List of design token names, values and metadata for `box-shadow`
Name	Value
box-shadow-drop-small	`0 1px 1px rgba( 0, 0, 0, 0.2 )` Defined in `src/codex-base.json` Refers to `box-shadow.100` This features color as part of the theme token value.
box-shadow-drop-medium	`0 2px 2px 0 rgba( 0, 0, 0, 0.2 )` Defined in `src/codex-base.json` Refers to `box-shadow.200` This features color as part of the theme token value.
box-shadow-drop-xx-large	`0 20px 48px 0 rgba( 0, 0, 0, 0.2 )` Defined in `src/codex-base.json` Refers to `box-shadow.500` This features color as part of the theme token value.
box-shadow-inset-small	`inset 0 0 0 1px` Defined in `src/codex-base.json` Refers to `box-shadow.25`
box-shadow-inset-medium	`inset 0 0 0 2px` Defined in `src/codex-base.json` Refers to `box-shadow.50`
box-shadow-inset-medium-vertical	`inset 0 -2px 0 0` Defined in `src/codex-base.json` Refers to `box-shadow.50-vertical`
box-shadow-outset-small	`0 0 0 1px` Defined in `src/codex-base.json` Refers to `box-shadow.25-outset`
box-shadow-outset-small-top	`0 -1px 0 0` Defined in `src/codex-base.json` Refers to `box-shadow.25-top`
box-shadow-outset-small-start	`-1px 0 0 0` Defined in `src/codex-base.json` Refers to `box-shadow.25-start`

Box shadow colors

List of design token names, values and metadata for `--cdx-demo-box-shadow-color`
Name	Value
box-shadow-color-base	`#000` Defined in `src/codex-base.json` Refers to `color.black`
box-shadow-color-progressive--active	`#2a4b8d` Defined in `src/codex-base.json` Refers to `color.blue700`
box-shadow-color-progressive--focus	`#36c` Defined in `src/codex-base.json` Refers to `color.blue600`
box-shadow-color-progressive-selected	`#36c` Defined in `src/codex-base.json` Refers to `color.blue600`
box-shadow-color-progressive-selected--hover	`#447ff5` Defined in `src/codex-base.json` Refers to `color.blue500`
box-shadow-color-progressive-selected--active	`#2a4b8d` Defined in `src/codex-base.json` Refers to `color.blue700`
box-shadow-color-destructive--focus	`#d73333` Defined in `src/codex-base.json` Refers to `color.red600`
box-shadow-color-inverted	`#fff` Defined in `src/codex-base.json` Refers to `color.white`
box-shadow-color-transparent	`transparent` Defined in `src/codex-base.json` Refers to `color.transparent`

Deprecated token aliases

WARNING

The tokens below are not available in Codex. There are only available as deprecated aliases in WikimediaUI Base.

List of design token names, values and metadata for `box-shadow`
Name	Value
box-shadow-progressive--active deprecated	`inset 0 0 0 1px #2a4b8d` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.inset-small` Refers to `box-shadow.color.progressive--active` Deprecated: Legacy `box-shadow` token shorthand. Use `box-shadow-inset-small box-shadow-color-progressive--active` instead.
box-shadow-progressive--focus deprecated	`inset 0 0 0 1px #36c` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.inset-small` Refers to `box-shadow.color.progressive--focus` Deprecated: Legacy `box-shadow` token shorthand. Use `box-shadow-inset-small box-shadow-color-progressive--focus` instead.
box-shadow-destructive--focus deprecated	`inset 0 0 0 1px #d73333` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.inset-small` Refers to `box-shadow.color.destructive--focus` Deprecated: Legacy `box-shadow` token shorthand. Use `box-shadow-insert-small box-shadow-color-destructive--focus` instead.
box-shadow-inverted deprecated	`inset 0 0 0 2px #fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.inset-medium` Refers to `box-shadow.color.inverted` Deprecated: Legacy `box-shadow` token shorthand. Use `box-shadow-inset-medium box-shadow-color-inverted` instead.
box-shadow-progressive-filled--focus deprecated	`inset 0 0 0 1px #36c, inset 0 0 0 2px #fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.progressive--focus` Refers to `box-shadow.inverted` Deprecated: Legacy `box-shadow` token shorthand. Use `box-shadow-progressive--focus, box-shadow-inverted` instead.
box-shadow-destructive-filled--focus deprecated	`inset 0 0 0 1px #d73333, inset 0 0 0 2px #fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.destructive--focus` Refers to `box-shadow.inverted` Deprecated: Legacy `box-shadow` token shorthand. Use `box-shadow-destructive--focus, box-shadow-inverted` instead.
box-shadow-base deprecated	`inset 0 0 0 1px transparent` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.inset-small` Refers to `box-shadow.color.transparent` Deprecated: Use `box-shadow-inset-small box-shadow-color-transparent` instead.
box-shadow-base--active deprecated	`inset 0 0 0 1px #2a4b8d` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.progressive--active` Deprecated: Use `box-shadow-progressive--active` instead.
box-shadow-base--focus deprecated	`inset 0 0 0 1px #36c` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.progressive--focus` Deprecated: Use `box-shadow-progressive--focus` instead.
box-shadow-filled--disabled deprecated	`inset 0 0 0 1px #fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.inset-small` Refers to `box-shadow.color.inverted` Deprecated: Use `box-shadow-inset-small box-shadow-color-inverted` instead.
box-shadow-primary--focus deprecated	`inset 0 0 0 1px #36c, inset 0 0 0 2px #fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.progressive-filled--focus` Deprecated: Use `box-shadow-progressive-filled--focus` instead.
box-shadow-card deprecated	`0 1px 1px rgba( 0, 0, 0, 0.2 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.drop-small` Deprecated: Use `box-shadow-drop-small` instead.
box-shadow-dialog deprecated	`0 2px 2px 0 rgba( 0, 0, 0, 0.2 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.drop-medium` Deprecated: Use `box-shadow-drop-medium` instead.
box-shadow-menu deprecated	`0 2px 2px 0 rgba( 0, 0, 0, 0.2 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.drop-medium` Deprecated: Use `box-shadow-drop-medium` instead.
box-shadow-progress-bar deprecated	`0 1px 1px rgba( 0, 0, 0, 0.2 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `box-shadow.drop-small` Deprecated: Use `box-shadow-drop-small` instead.