To see a list of all colours and their values please check the Overview tab.
Android
View
Colours are defined as colour resources (see day and night) in the format of bpk{ColorName}.
For example to use SurfaceDefault as a colour use @color/bpkSurfaceDefault in xml or R.color.bpkSurfaceDefault in code. This will automatically switch between dark and night mode.
Compose
Colours in Compose are defined in BpkColors and can be accessed via BpkTheme. The naming of colour tokens follows camel case.
For example to use SurfaceDefault as a colour access it via BpkTheme.colors.surfaceDefault.
iOS
UIKit
Colours are defined as constants as properties of BPKColor.
For example to use surfaceDefault as a colour use BPKColor.surfaceDefaultColor. This will automatically switch between day and night mode.
SwiftUI
Colours in SwiftUI are defined as static constants in BPKColor as a struct.
Extensions to some SwiftUI components have been created for easier access.
For example to use surfaceDefault as a colour use Color(.surfaceDefault) or HStack{}.background(.surfaceDefault).foreground(.textSecondaryColor)
Web
Colours are defined as Sass variables in the format of bpk-{color-name}-day.
All tokens will end in day as that means the token is meant to be used in day mode. Night mode is not currently supported by Backpack on Web.
For example to use surfaceDefault in Sass use bpk-surface-default-day.
To use our colour Sass variables, install the @skyscanner/backpack-web NPM package.