To see a list of all spacing tokens and their values please check the Overview tab.
Android
View
Spacing tokens are defined as dimension resources in the format of bpkSpacing{size}.
For example to use Base as a dimension use @dimen/bpkSpacingBase in xml or R.dimen.bpkSpacingBase in code.
Compose
Spacing tokens in Compose are defined in BpkSpacing. The naming of spacing tokens follows camel case.
For example to use Base as a dimension it via BpkSpacing.Base.
iOS
UIKit
Spacing tokens are Objective-C constants with the format BPKSpacing{size}
For example to use sm do BPKSpacing.sm on Swift and BPKSpacingSm in Objective-C
SwiftUI
Spacing tokens are defined as static vars for BPKSpacing.
Some extensions have been created to allow easier access to spacing.
For example to use sm as frame and padding on a View do HStack{}.frame(width: .sm).padding(.sm).
Web
Spacing tokens are defined as Sass functions in the format of bpk-spacing-{size}().
For example to use sm in Sass use bpk-spacing-sm().
In 2021, our web baseline grid was changed to 8px to align to the app grid. To ensure you are using the new grid, you will have to set at the top of the page the bpk-spacing-v2 variable to true.
To use our spacing Sass functions, install the @skyscanner/backpack-web NPM package.