Shadow

To see a list of all shadow styles and their values please check the Overview tab.

Android

Android uses elevation instead of shadows. While we currently have a larger number of elevation tokens the following mapping for Figma styles should be used:

View

Elevation tokens are defined as dimension resources in the format of bpkElevation{size}.

For example to use Sm as a dimension use @dimen/bpkElevationSm in xml or R.dimen.bpkElevationSm in code.

Compose

Elevation tokens in Compose are defined in BpkElevation. The naming of elevation tokens follows camel case.

For example to use Sm as a dimension it via BpkElevation.Sm.

iOS

UIKit

Shadow is managed as an object BPKShadow that contains a helper method to apply shadow to a specified UILayer.

For example, to use the sm shadow on a layer, do BPKShadow.shadowSm().apply(to: myView.layer)

SwiftUI

Shadows in SwiftUI are instances of BPKShadow structs.

Extensions to SwiftUI Views have been created to allow easier access to shadow.

For example to set sm to a view, do HStack {}.shadow(.sm)

Web

Shadows are defined as Sass variables in the format of bpk-box-shadow-{size}.

For example to use sm in Sass use bpk-box-shadow-sm.

To use our shadows Sass variables, install the @skyscanner/backpack-web NPM package.