To see a list of all radius tokens and their values please check the Overview tab.
Android
View
Radii are defined as dimension resources in the format of bpkBorderRadius{radius}.
For example to use Xs as a dimension use @dimen/bpkBorderRadiusXs in xml or R.dimen.bpkBorderRadiusXs in code.
Compose
Radii in Compose are defined in BpkBorderRadius. The naming of radius tokens follows pascal case.
For example, to use Xs as a dimension it via BpkBorderRadius.Xs.
iOS
UIKit
Radii in UIKit are defined in BPKCornerRadius as an Objective-C constant. in the format of BPKCornerRadius{size}.
From Swift, it can be used as such: .xs, or BPKCornerRadius.xs depending on context
From Objective-C, it can be used as such: BPKCornerRadiusXs
SwiftUI
Radii in SwiftUI are defined in BPKCornerRadius. The naming follows camel case.
For example, to use .xs as a dimansion, do BPKCornerRadius.xs.
Some extensions have been added to specific compoents, where a BPKCornerRadius can be pased directly, like RoundedRectangle(cornerRadius: .xs)
Web
Radii are defined as Sass variables in the format of bpk-border-radius-{size}, as well as bpk-border-radius-pill and bpk-border-radius-pill-lg.
For example to use xs in Sass use bpk-border-radius-xs.
To use our radii Sass variables, install the @skyscanner/backpack-web NPM package.