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
{
"ks": {
"box-shadow": {
"opacity": {
"control": {
"_": {
"value": "0.2"
},
"hover": {
"value": "0.3"
}
},
"card": {
"_": {
"value": "0.2"
},
"hover": {
"value": "0.3"
}
},
"surface": {
"_": {
"value": "0.1"
},
"hover": {
"value": "0.2"
}
}
}
}
}
}

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
{
"ks": {
"box-shadow": {
"color": {
"control": {
"_": {
"value": "rgba(0,0,0,{ks.box-shadow.opacity.control._})"
},
"hover": {
"value": "rgba(0,0,0,{ks.box-shadow.opacity.control.hover})"
}
},
"card": {
"_": {
"value": "rgba(0,0,0,{ks.box-shadow.opacity.card._})"
},
"hover": {
"value": "rgba(0,0,0,{ks.box-shadow.opacity.card.hover})"
}
},
"surface": {
"_": {
"value": "rgba(0,0,0,{ks.box-shadow.opacity.surface._})"
},
"hover": {
"value": "rgba(0,0,0,{ks.box-shadow.opacity.surface.hover})"
}
}
}
}
}
}

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
{
"ks": {
"box-shadow": {
"control": {
"_": {
"value": "0 1px 2.75px {ks.box-shadow.color.control._}",
"token": {
"category": "Box Shadow",
"presenter": "Shadow"
}
},
"hover": {
"value": "0 1px 5.5px {ks.box-shadow.color.control.hover}"
}
},
"card": {
"_": {
"value": "0 1px 5.5px {ks.box-shadow.color.card._}",
"token": {
"category": "Box Shadow",
"presenter": "Shadow"
}
},
"hover": {
"value": "0 1px 11px {ks.box-shadow.color.card.hover}"
}
},
"surface": {
"_": {
"value": "0 1px 11px {ks.box-shadow.color.surface._}",
"token": {
"category": "Box Shadow",
"presenter": "Shadow"
}
},
"hover": {
"value": "0 1px 22px {ks.box-shadow.color.surface.hover}"
}
}
}
}
}