Skip to content
On this page

Box shadow

NameValue
box-shadow-drop-small0 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-medium0 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-large0 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-smallinset 0 0 0 1px

Defined in src/codex-base.json

Refers to box-shadow.25

box-shadow-inset-mediuminset 0 0 0 2px

Defined in src/codex-base.json

Refers to box-shadow.50

box-shadow-inset-medium-verticalinset 0 -2px 0 0

Defined in src/codex-base.json

Refers to box-shadow.50-vertical

box-shadow-outset-small0 0 0 1px

Defined in src/codex-base.json

Refers to box-shadow.25-outset

box-shadow-outset-small-top0 -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

NameValue
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#d33

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-transparenttransparent

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.

NameValue
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 #d33

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 #d33, 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.