Skip to main content

Shadow

The token can be found in shadow.json.

Core Token​

Opacity​

Token
--ks-box-shadow-opacity-control
--ks-box-shadow-opacity-control-hover
--ks-box-shadow-opacity-card
--ks-box-shadow-opacity-card-hover
--ks-box-shadow-opacity-surface
--ks-box-shadow-opacity-surface-hover
box-shadow.json
tokens.css

_32
{
_32
"ks": {
_32
"box-shadow": {
_32
"opacity": {
_32
"control": {
_32
"_": {
_32
"value": "0.2"
_32
},
_32
"hover": {
_32
"value": "0.3"
_32
}
_32
},
_32
"card": {
_32
"_": {
_32
"value": "0.2"
_32
},
_32
"hover": {
_32
"value": "0.3"
_32
}
_32
},

Color​

The color token is an rgba value that features opacity as the alpha value.

Token
--ks-box-shadow-color-control
--ks-box-shadow-color-control-hover
--ks-box-shadow-color-card
--ks-box-shadow-color-card-hover
--ks-box-shadow-color-surface
--ks-box-shadow-color-surface-hover
box-shadow.json
tokens.css

_32
{
_32
"ks": {
_32
"box-shadow": {
_32
"color": {
_32
"control": {
_32
"_": {
_32
"value": "rgba(0,0,0,{ks.box-shadow.opacity.control._})"
_32
},
_32
"hover": {
_32
"value": "rgba(0,0,0,{ks.box-shadow.opacity.control.hover})"
_32
}
_32
},
_32
"card": {
_32
"_": {
_32
"value": "rgba(0,0,0,{ks.box-shadow.opacity.card._})"
_32
},
_32
"hover": {
_32
"value": "rgba(0,0,0,{ks.box-shadow.opacity.card.hover})"
_32
}
_32
},

Semantic Token​

Shadow Types​

Every shadow type also has a hover concept.

Control​

--ks-box-shadow-control
--ks-box-shadow-control-hover

For small horizontally stretched elements.

Card​

--ks-box-shadow-card
--ks-box-shadow-card-hover

For medium sized vertically stretched elements.

Surface​

--ks-box-shadow-surface
--ks-box-shadow-surface-hover

For large screen covering elements.

box-shadow.json
tokens.css

_42
{
_42
"ks": {
_42
"box-shadow": {
_42
"control": {
_42
"_": {
_42
"value": "0 1px 2.75px {ks.box-shadow.color.control._}",
_42
"token": {
_42
"category": "Box Shadow",
_42
"presenter": "Shadow"
_42
}
_42
},
_42
"hover": {
_42
"value": "0 1px 5.5px {ks.box-shadow.color.control.hover}"
_42
}
_42
},
_42
"card": {
_42
"_": {
_42
"value": "0 1px 5.5px {ks.box-shadow.color.card._}",
_42
"token": {
_42
"category": "Box Shadow",