animations

variables

bpk-duration-xs

$bpk-duration-xs: 50ms !default;

bpk-duration-sm

$bpk-duration-sm: 200ms !default;

bpk-duration-base

$bpk-duration-base: 400ms !default;

badge-colors

variables

bpk-private-badge-background-normal-day

$bpk-private-badge-background-normal-day: rgb(239, 243, 248) !default;

bpk-private-badge-background-normal-night

$bpk-private-badge-background-normal-night: rgb(36, 51, 70) !default;

borders

variables

bpk-border-size-sm

$bpk-border-size-sm: 1px !default;

bpk-border-size-lg

$bpk-border-size-lg: 2px !default;

bpk-border-size-xl

$bpk-border-size-xl: 3px !default;

box-shadows

variables

bpk-box-shadow-sm

$bpk-box-shadow-sm: 0px 1px 3px 0px rgba(37,32,31,.3) !default;

bpk-box-shadow-lg

$bpk-box-shadow-lg: 0px 4px 14px 0px rgba(37,32,31,.25) !default;

bpk-box-shadow-xl

$bpk-box-shadow-xl: 0px 12px 50px 0px rgba(37,32,31,.25) !default;

breakpoints

variables

bpk-breakpoint-query-tablet-only

$bpk-breakpoint-query-tablet-only: "(min-width: 32.0625rem) and (max-width: 64rem)" !default;

bpk-breakpoint-small-tablet-margin

$bpk-breakpoint-small-tablet-margin: 1.5rem !default;

bpk-breakpoint-query-small-tablet

$bpk-breakpoint-query-small-tablet: "(max-width: 48rem)" !default;

bpk-breakpoint-small-mobile-margin

$bpk-breakpoint-small-mobile-margin: 1rem !default;

bpk-breakpoint-query-mobile

$bpk-breakpoint-query-mobile: "(max-width: 32rem)" !default;

bpk-breakpoint-query-small-tablet-only

$bpk-breakpoint-query-small-tablet-only: "(min-width: 32.0625rem) and (max-width: 48rem)" !default;

bpk-breakpoint-small-mobile

$bpk-breakpoint-small-mobile: 22.4375rem !default;

bpk-breakpoint-query-above-mobile

$bpk-breakpoint-query-above-mobile: "(min-width: 32.0625rem)" !default;

bpk-breakpoint-query-tablet

$bpk-breakpoint-query-tablet: "(max-width: 64rem)" !default;

bpk-breakpoint-small-tablet

$bpk-breakpoint-small-tablet: 48rem !default;

bpk-breakpoint-query-above-tablet

$bpk-breakpoint-query-above-tablet: "(min-width: 64.0625rem)" !default;

bpk-breakpoint-desktop

$bpk-breakpoint-desktop: 80rem !default;

bpk-breakpoint-mobile

$bpk-breakpoint-mobile: 32rem !default;

bpk-breakpoint-tablet

$bpk-breakpoint-tablet: 64rem !default;

bpk-breakpoint-query-desktop-only

$bpk-breakpoint-query-desktop-only: "(min-width: 64.0625rem) and (max-width: 80rem)" !default;

bpk-breakpoint-query-above-desktop

$bpk-breakpoint-query-above-desktop: "(min-width: 80.0625rem)" !default;

bpk-breakpoint-tablet-margin

$bpk-breakpoint-tablet-margin: 2rem !default;

bpk-breakpoint-mobile-margin

$bpk-breakpoint-mobile-margin: 1.5rem !default;

bpk-breakpoint-query-small-mobile

$bpk-breakpoint-query-small-mobile: "(max-width: 22.4375rem)" !default;

bpk-breakpoint-desktop-margin

$bpk-breakpoint-desktop-margin: 1rem * 3 !default;

button-colors

variables

bpk-private-button-secondary-pressed-background-night

$bpk-private-button-secondary-pressed-background-night: rgb(1, 9, 19) !default;

bpk-private-button-secondary-normal-background-night

$bpk-private-button-secondary-normal-background-night: rgb(36, 51, 70) !default;

bpk-private-button-primary-on-light-pressed-background-day

$bpk-private-button-primary-on-light-pressed-background-day: rgb(21, 70, 121) !default;

bpk-private-button-primary-on-light-normal-background-night

$bpk-private-button-primary-on-light-normal-background-night: rgb(2, 77, 175) !default;

bpk-private-button-secondary-pressed-background-day

$bpk-private-button-secondary-pressed-background-day: rgb(193, 199, 207) !default;

bpk-private-button-primary-on-light-disabled-foreground-night

$bpk-private-button-primary-on-light-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;

bpk-private-button-secondary-on-dark-disabled-background-night

$bpk-private-button-secondary-on-dark-disabled-background-night: rgb(11, 18, 29) !default;

bpk-private-button-destructive-normal-foreground-night

$bpk-private-button-destructive-normal-foreground-night: rgb(255, 100, 156) !default;

bpk-private-button-secondary-normal-background-day

$bpk-private-button-secondary-normal-background-day: rgb(224, 228, 233) !default;

bpk-private-button-primary-on-light-normal-background-day

$bpk-private-button-primary-on-light-normal-background-day: rgb(5, 32, 60) !default;

bpk-private-button-primary-on-light-disabled-foreground-day

$bpk-private-button-primary-on-light-disabled-foreground-day: rgba(0, 0, 0, 0.2) !default;

bpk-private-button-primary-on-dark-normal-background-night

$bpk-private-button-primary-on-dark-normal-background-night: rgb(255, 255, 255) !default;

bpk-private-button-primary-on-dark-disabled-foreground-night

$bpk-private-button-primary-on-dark-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;

bpk-private-button-secondary-on-dark-disabled-background-day

$bpk-private-button-secondary-on-dark-disabled-background-day: rgb(11, 18, 29) !default;

bpk-private-button-secondary-on-dark-pressed-background-night

$bpk-private-button-secondary-on-dark-pressed-background-night: rgb(1, 9, 19) !default;

bpk-private-button-destructive-normal-foreground-day

$bpk-private-button-destructive-normal-foreground-day: rgb(231, 8, 102) !default;

bpk-private-button-primary-on-dark-normal-background-day

$bpk-private-button-primary-on-dark-normal-background-day: rgb(255, 255, 255) !default;

bpk-private-button-primary-on-dark-disabled-foreground-day

$bpk-private-button-primary-on-dark-disabled-foreground-day: rgba(0, 0, 0, 0.2) !default;

bpk-private-button-secondary-on-dark-pressed-background-day

$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(1, 9, 19) !default;

bpk-private-button-primary-on-light-disabled-background-night

$bpk-private-button-primary-on-light-disabled-background-night: rgb(11, 18, 29) !default;

bpk-private-button-destructive-normal-background-night

$bpk-private-button-destructive-normal-background-night: rgb(36, 51, 70) !default;

bpk-private-button-primary-normal-background-night

$bpk-private-button-primary-normal-background-night: rgb(2, 77, 175) !default;

bpk-private-button-destructive-pressed-background-night

$bpk-private-button-destructive-pressed-background-night: rgb(255, 100, 156) !default;

bpk-private-button-primary-pressed-background-night

$bpk-private-button-primary-pressed-background-night: rgb(5, 65, 132) !default;

bpk-private-button-primary-on-light-disabled-background-day

$bpk-private-button-primary-on-light-disabled-background-day: rgb(224, 228, 233) !default;

bpk-private-button-primary-on-dark-disabled-background-night

$bpk-private-button-primary-on-dark-disabled-background-night: rgb(11, 18, 29) !default;

bpk-private-button-primary-normal-background-day

$bpk-private-button-primary-normal-background-day: rgb(5, 32, 60) !default;

bpk-private-button-destructive-normal-background-day

$bpk-private-button-destructive-normal-background-day: rgb(224, 228, 233) !default;

bpk-private-button-destructive-pressed-background-day

$bpk-private-button-destructive-pressed-background-day: rgb(231, 8, 102) !default;

bpk-private-button-primary-pressed-background-day

$bpk-private-button-primary-pressed-background-day: rgb(21, 70, 121) !default;

bpk-private-button-primary-on-dark-disabled-background-day

$bpk-private-button-primary-on-dark-disabled-background-day: rgb(224, 228, 233) !default;

bpk-private-button-disabled-background-night

$bpk-private-button-disabled-background-night: rgb(11, 18, 29) !default;

bpk-private-button-secondary-on-dark-normal-background-night

$bpk-private-button-secondary-on-dark-normal-background-night: rgba(255, 255, 255, 0.1) !default;

bpk-private-button-secondary-on-dark-disabled-foreground-night

$bpk-private-button-secondary-on-dark-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;

bpk-private-button-primary-on-dark-pressed-background-night

$bpk-private-button-primary-on-dark-pressed-background-night: rgb(193, 199, 207) !default;

bpk-private-button-disabled-background-day

$bpk-private-button-disabled-background-day: rgb(224, 228, 233) !default;

bpk-private-button-secondary-on-dark-normal-background-day

$bpk-private-button-secondary-on-dark-normal-background-day: rgba(255, 255, 255, 0.1) !default;

bpk-private-button-secondary-on-dark-disabled-foreground-day

$bpk-private-button-secondary-on-dark-disabled-foreground-day: rgba(255, 255, 255, 0.2) !default;

bpk-private-button-primary-on-dark-pressed-background-day

$bpk-private-button-primary-on-dark-pressed-background-day: rgb(193, 199, 207) !default;

bpk-private-button-primary-on-light-pressed-background-night

$bpk-private-button-primary-on-light-pressed-background-night: rgb(5, 65, 132) !default;

buttons

variables

bpk-button-height

$bpk-button-height: 2.25rem !default;

bpk-button-border-radius

$bpk-button-border-radius: .5rem !default;

bpk-button-large-height

$bpk-button-large-height: 3rem !default;

bpk-private-button-line-height

$bpk-private-button-line-height: 1.5rem !default;

bpk-private-card-button-contained-color

$bpk-private-card-button-contained-color: rgba(255, 255, 255, 0.8) !default;

calendar

variables

bpk-calendar-day-spacing

$bpk-calendar-day-spacing: .5rem !default;

bpk-calendar-day-size

$bpk-calendar-day-size: 2.25rem !default;

canvas-colors

variables

bpk-canvas-day

$bpk-canvas-day: rgb(255, 255, 255) !default;

bpk-canvas-night

$bpk-canvas-night: rgb(1, 9, 19) !default;

bpk-canvas-contrast-day

$bpk-canvas-contrast-day: rgb(239, 243, 248) !default;

bpk-canvas-contrast-night

$bpk-canvas-contrast-night: rgb(1, 9, 19) !default;

card-button-colors

variables

bpk-private-card-button-contained-fill-day

$bpk-private-card-button-contained-fill-day: rgba(255, 255, 255, 0.8) !default;

bpk-private-card-button-contained-fill-night

$bpk-private-card-button-contained-fill-night: rgba(0, 0, 0, 0.8) !default;

cards

variables

bpk-card-background-color

$bpk-card-background-color: rgb(255, 255, 255) !default;

bpk-card-padding

$bpk-card-padding: 1rem !default;

chip-colors

variables

bpk-private-chip-on-dark-pressed-stroke-day

$bpk-private-chip-on-dark-pressed-stroke-day: rgb(255, 255, 255) !default;

bpk-private-chip-on-dark-pressed-stroke-night

$bpk-private-chip-on-dark-pressed-stroke-night: rgb(5, 65, 132) !default;

bpk-private-chip-on-dark-on-background-day

$bpk-private-chip-on-dark-on-background-day: rgb(255, 255, 255) !default;

bpk-private-chip-on-dark-on-background-night

$bpk-private-chip-on-dark-on-background-night: rgb(5, 65, 132) !default;

bpk-private-chip-disabled-background-day

$bpk-private-chip-disabled-background-day: rgb(224, 228, 233) !default;

bpk-private-chip-disabled-background-night

$bpk-private-chip-disabled-background-night: rgb(11, 18, 29) !default;

bpk-private-chip-on-dark-on-dismiss-icon-day

$bpk-private-chip-on-dark-on-dismiss-icon-day: rgb(98, 105, 113) !default;

bpk-private-chip-on-dark-on-dismiss-icon-night

$bpk-private-chip-on-dark-on-dismiss-icon-night: rgba(255, 255, 255, 0.5) !default;

colors

variables

bpk-color-sky-blue-shade-03

$bpk-color-sky-blue-shade-03: rgb(2, 18, 44) !default;

bpk-color-primary-gradient-light

$bpk-color-primary-gradient-light: rgb(0, 98, 227) !default;

bpk-color-erfoud

$bpk-color-erfoud: rgb(255, 181, 77) !default;

bpk-color-valensole

$bpk-color-valensole: rgb(165, 155, 200) !default;

bpk-color-monteverde

$bpk-color-monteverde: rgb(0, 166, 152) !default;

bpk-color-sky-gray-tint-01

$bpk-color-sky-gray-tint-01: rgb(68, 69, 96) !default;

bpk-color-black

$bpk-color-black: rgb(1, 9, 19) !default;

bpk-color-sky-gray-tint-02

$bpk-color-sky-gray-tint-02: rgb(104, 105, 127) !default;

bpk-color-sagano

$bpk-color-sagano: rgb(208, 238, 236) !default;

bpk-color-sky-gray-tint-03

$bpk-color-sky-gray-tint-03: rgb(143, 144, 160) !default;

bpk-color-sky-gray-tint-04

$bpk-color-sky-gray-tint-04: rgb(178, 178, 191) !default;

bpk-color-harbour

$bpk-color-harbour: rgb(246, 221, 225) !default;

bpk-color-sky-gray-tint-05

$bpk-color-sky-gray-tint-05: rgb(205, 205, 215) !default;

bpk-color-sky-gray-tint-06

$bpk-color-sky-gray-tint-06: rgb(221, 221, 229) !default;

bpk-color-black-tint-01

$bpk-color-black-tint-01: rgb(29, 27, 32) !default;

bpk-color-sky-gray-tint-07

$bpk-color-sky-gray-tint-07: rgb(241, 242, 248) !default;

bpk-color-black-tint-02

$bpk-color-black-tint-02: rgb(44, 44, 46) !default;

bpk-color-abisko

$bpk-color-abisko: rgb(90, 72, 155) !default;

bpk-color-black-tint-03

$bpk-color-black-tint-03: rgb(58, 58, 60) !default;

bpk-color-black-tint-04

$bpk-color-black-tint-04: rgb(72, 72, 74) !default;

bpk-color-white

$bpk-color-white: rgb(255, 255, 255) !default;

bpk-color-black-tint-05

$bpk-color-black-tint-05: rgb(99, 99, 102) !default;

bpk-color-black-tint-06

$bpk-color-black-tint-06: rgb(142, 142, 147) !default;

bpk-color-panjin

$bpk-color-panjin: rgb(209, 67, 91) !default;

bpk-color-kolkata

$bpk-color-kolkata: rgb(255, 148, 0) !default;

bpk-color-glencoe

$bpk-color-glencoe: rgb(115, 206, 198) !default;

bpk-color-tochigi

$bpk-color-tochigi: rgb(225, 221, 236) !default;

bpk-color-petra

$bpk-color-petra: rgb(255, 171, 149) !default;

bpk-color-sky-blue

$bpk-color-sky-blue: rgb(0, 98, 227) !default;

bpk-color-bagan

$bpk-color-bagan: rgb(255, 235, 208) !default;

bpk-color-hillier

$bpk-color-hillier: rgb(225, 139, 150) !default;

bpk-color-sky-blue-tint-01

$bpk-color-sky-blue-tint-01: rgb(109, 159, 235) !default;

bpk-color-sky-blue-tint-02

$bpk-color-sky-blue-tint-02: rgb(157, 192, 242) !default;

bpk-color-bunol

$bpk-color-bunol: rgb(255, 123, 89) !default;

bpk-color-sky-blue-tint-03

$bpk-color-sky-blue-tint-03: rgb(205, 223, 248) !default;

bpk-color-sky-gray

$bpk-color-sky-gray: rgb(17, 18, 54) !default;

bpk-color-nara

$bpk-color-nara: rgb(255, 231, 224) !default;

bpk-color-sky-blue-shade-01

$bpk-color-sky-blue-shade-01: rgb(8, 78, 178) !default;

bpk-color-sky-blue-shade-02

$bpk-color-sky-blue-shade-02: rgb(4, 39, 89) !default;

bpk-line-dark-color

$bpk-line-dark-color: rgb(72, 72, 74) !default;

bpk-background-alternative-secondary-dark-color

$bpk-background-alternative-secondary-dark-color: rgb(29, 27, 32) !default;

bpk-background-light-color

$bpk-background-light-color: rgb(255, 255, 255) !default;

bpk-background-dark-color

$bpk-background-dark-color: rgb(0, 0, 0) !default;

bpk-background-alternative-secondary-light-color

$bpk-background-alternative-secondary-light-color: rgb(255, 255, 255) !default;

bpk-color-system-green

$bpk-color-system-green: rgb(0, 166, 152) !default;

bpk-line-light-color

$bpk-line-light-color: rgb(205, 205, 215) !default;

bpk-background-tertiary-dark-color

$bpk-background-tertiary-dark-color: rgb(44, 44, 46) !default;

bpk-background-secondary-dark-color

$bpk-background-secondary-dark-color: rgb(29, 27, 32) !default;

bpk-background-alternative-light-color

$bpk-background-alternative-light-color: rgb(241, 242, 248) !default;

bpk-primary-dark-color

$bpk-primary-dark-color: rgb(109, 159, 235) !default;

bpk-color-system-red

$bpk-color-system-red: rgb(209, 67, 91) !default;

bpk-background-alternative-dark-color

$bpk-background-alternative-dark-color: rgb(0, 0, 0) !default;

bpk-primary-light-color

$bpk-primary-light-color: rgb(0, 98, 227) !default;

bpk-background-tertiary-light-color

$bpk-background-tertiary-light-color: rgb(255, 255, 255) !default;

bpk-background-secondary-light-color

$bpk-background-secondary-light-color: rgb(241, 242, 248) !default;

bpk-primary-gradient

$bpk-primary-gradient: #0062E3 !default;

core-colors

variables

bpk-core-eco-day

$bpk-core-eco-day: rgb(15, 161, 169) !default;

bpk-core-eco-night

$bpk-core-eco-night: rgb(15, 161, 169) !default;

bpk-core-accent-day

$bpk-core-accent-day: rgb(0, 98, 227) !default;

bpk-core-accent-night

$bpk-core-accent-night: rgb(132, 233, 255) !default;

bpk-core-primary-day

$bpk-core-primary-day: rgb(5, 32, 60) !default;

bpk-core-primary-night

$bpk-core-primary-night: rgb(5, 65, 132) !default;

flare

variables

bpk-flare-height-desktop

$bpk-flare-height-desktop: 1.5rem !default;

bpk-flare-height-mobile

$bpk-flare-height-mobile: 1rem !default;

bpk-flare-corner-radius

$bpk-flare-corner-radius: 1.3125rem !default;

font-weights

variables

bpk-font-weight-book

$bpk-font-weight-book: 400 !default;

bpk-font-weight-black

$bpk-font-weight-black: 900 !default;

bpk-font-weight-bold

$bpk-font-weight-bold: 700 !default;

bpk-font-weight-light

$bpk-font-weight-light: 300 !default;

forms

variables

bpk-input-large-height

$bpk-input-large-height: 3rem !default;

bpk-input-border

$bpk-input-border: solid .0625rem #C1C7CF !default;

bpk-select-border-radius

$bpk-select-border-radius: .25rem !default;

bpk-input-background

$bpk-input-background: #ffffff !default;

bpk-input-border-width

$bpk-input-border-width: .0625rem !default;

bpk-label-disabled-color

$bpk-label-disabled-color: rgba(0, 0, 0, 0.2) !default;

bpk-input-border-radius

$bpk-input-border-radius: .25rem !default;

bpk-select-disabled-border-color

$bpk-select-disabled-border-color: rgb(224, 228, 233) !default;

bpk-input-disabled-color

$bpk-input-disabled-color: rgba(0, 0, 0, 0.2) !default;

bpk-input-padding-x

$bpk-input-padding-x: .5rem !default;

bpk-input-padding-y

$bpk-input-padding-y: .5rem !default;

bpk-select-border-width

$bpk-select-border-width: .0625rem !default;

bpk-form-validation-color

$bpk-form-validation-color: rgb(231, 8, 102) !default;

bpk-input-height

$bpk-input-height: 2.25rem !default;

bpk-input-disabled-border-color

$bpk-input-disabled-border-color: rgb(239, 243, 248) !default;

horizontal-nav

variables

bpk-horizontal-nav-bar-selected-color

$bpk-horizontal-nav-bar-selected-color: rgb(0, 98, 227) !default;

icons

variables

bpk-icon-size-sm

$bpk-icon-size-sm: 1rem !default;

bpk-icon-size-lg

$bpk-icon-size-lg: 1.5rem !default;

info-banner-colors

variables

bpk-private-info-banner-default-day

$bpk-private-info-banner-default-day: rgb(239, 243, 248) !default;

bpk-private-info-banner-on-contrast-day

$bpk-private-info-banner-on-contrast-day: rgb(255, 255, 255) !default;

bpk-private-info-banner-success-day

$bpk-private-info-banner-success-day: rgb(12, 131, 138) !default;

bpk-private-info-banner-error-night

$bpk-private-info-banner-error-night: rgb(255, 100, 156) !default;

bpk-private-info-banner-info-night

$bpk-private-info-banner-info-night: rgb(189, 196, 203) !default;

bpk-private-info-banner-error-day

$bpk-private-info-banner-error-day: rgb(231, 8, 102) !default;

bpk-private-info-banner-info-day

$bpk-private-info-banner-info-day: rgb(98, 105, 113) !default;

bpk-private-info-banner-warning-night

$bpk-private-info-banner-warning-night: rgb(254, 235, 135) !default;

bpk-private-info-banner-warning-day

$bpk-private-info-banner-warning-day: rgb(245, 93, 66) !default;

bpk-private-info-banner-default-night

$bpk-private-info-banner-default-night: rgb(19, 29, 43) !default;

bpk-private-info-banner-on-contrast-night

$bpk-private-info-banner-on-contrast-night: rgb(19, 29, 43) !default;

bpk-private-info-banner-success-night

$bpk-private-info-banner-success-night: rgb(98, 241, 198) !default;

letter-spacings

variables

bpk-letter-spacing-tight

$bpk-letter-spacing-tight: -0.02em !default;

bpk-letter-spacing-display

$bpk-letter-spacing-display: -0.05em !default;

bpk-letter-spacing-hero

$bpk-letter-spacing-hero: -0.04em !default;

line-colors

variables

bpk-line-on-dark-night

$bpk-line-on-dark-night: rgb(68, 80, 95) !default;

bpk-line-on-dark-day

$bpk-line-on-dark-day: rgba(255, 255, 255, 0.5) !default;

bpk-line-night

$bpk-line-night: rgb(68, 80, 95) !default;

bpk-line-day

$bpk-line-day: rgb(193, 199, 207) !default;

map-marker-colors

variables

bpk-private-map-previous-selection-day

$bpk-private-map-previous-selection-day: rgb(207, 228, 255) !default;

bpk-private-map-cluster-pin-night

$bpk-private-map-cluster-pin-night: rgb(255, 255, 255) !default;

bpk-private-map-cluster-pin-previous-selection-night

$bpk-private-map-cluster-pin-previous-selection-night: rgb(148, 195, 255) !default;

bpk-private-map-cluster-pin-day

$bpk-private-map-cluster-pin-day: rgb(5, 32, 60) !default;

bpk-private-map-cluster-pin-previous-selection-day

$bpk-private-map-cluster-pin-previous-selection-day: rgb(148, 195, 255) !default;

bpk-private-map-marker-viewed-foreground-night

$bpk-private-map-marker-viewed-foreground-night: rgba(0, 0, 0, 0.8) !default;

bpk-private-map-marker-viewed-foreground-day

$bpk-private-map-marker-viewed-foreground-day: rgba(255, 255, 255, 0.8) !default;

bpk-private-map-poi-pin-night

$bpk-private-map-poi-pin-night: rgb(142, 71, 186) !default;

bpk-private-map-previous-selection-night

$bpk-private-map-previous-selection-night: rgb(207, 228, 255) !default;

bpk-private-map-poi-pin-day

$bpk-private-map-poi-pin-day: rgb(142, 71, 186) !default;

marcomms-colors

variables

bpk-marcomms-berry

$bpk-marcomms-berry: rgb(231, 8, 102) !default;

bpk-marcomms-charcoal

$bpk-marcomms-charcoal: rgb(22, 22, 22) !default;

bpk-marcomms-orange

$bpk-marcomms-orange: rgb(255, 123, 89) !default;

bpk-marcomms-grey-40

$bpk-marcomms-grey-40: rgb(98, 105, 113) !default;

bpk-marcomms-blue-bright

$bpk-marcomms-blue-bright: rgb(161, 238, 255) !default;

bpk-marcomms-yellow

$bpk-marcomms-yellow: rgb(254, 235, 135) !default;

bpk-marcomms-green-bright

$bpk-marcomms-green-bright: rgb(147, 255, 222) !default;

bpk-marcomms-pink

$bpk-marcomms-pink: rgb(255, 163, 229) !default;

bpk-marcomms-sky-blue

$bpk-marcomms-sky-blue: rgb(0, 98, 227) !default;

bpk-marcomms-dark-sky

$bpk-marcomms-dark-sky: rgb(5, 32, 60) !default;

bpk-marcomms-purple

$bpk-marcomms-purple: rgb(142, 71, 186) !default;

bpk-marcomms-white

$bpk-marcomms-white: rgb(255, 255, 255) !default;

bpk-marcomms-yellow-muted

$bpk-marcomms-yellow-muted: rgb(255, 247, 207) !default;

bpk-marcomms-pink-muted

$bpk-marcomms-pink-muted: rgb(255, 233, 249) !default;

bpk-marcomms-green-muted

$bpk-marcomms-green-muted: rgb(212, 255, 242) !default;

bpk-marcomms-blue-muted

$bpk-marcomms-blue-muted: rgb(217, 248, 255) !default;

bpk-marcomms-eco-green

$bpk-marcomms-eco-green: rgb(15, 161, 169) !default;

modals

variables

bpk-modal-background-color

$bpk-modal-background-color: rgb(255, 255, 255) !default;

bpk-modal-initial-opacity

$bpk-modal-initial-opacity: 0 !default;

bpk-modal-opacity

$bpk-modal-opacity: 1 !default;

bpk-modal-max-width

$bpk-modal-max-width: 32rem !default;

bpk-modal-wide-max-width

$bpk-modal-wide-max-width: 64rem !default;

bpk-modal-content-padding

$bpk-modal-content-padding: 1rem !default;

navigation-tab-colors

notifications

variables

bpk-banner-alert-header-expandable-hover-background-color

$bpk-banner-alert-header-expandable-hover-background-color: rgb(239, 243, 248) !default;

bpk-banner-alert-header-expandable-active-background-color

$bpk-banner-alert-header-expandable-active-background-color: rgb(239, 243, 248) !default;

bpk-banner-alert-primary-color

$bpk-banner-alert-primary-color: rgb(0, 98, 227) !default;

bpk-banner-alert-success-color

$bpk-banner-alert-success-color: rgb(12, 131, 138) !default;

bpk-banner-alert-warn-color

$bpk-banner-alert-warn-color: rgb(245, 93, 66) !default;

bpk-banner-alert-error-color

$bpk-banner-alert-error-color: rgb(231, 8, 102) !default;

bpk-banner-alert-neutral-color

$bpk-banner-alert-neutral-color: rgb(193, 199, 207) !default;

panels

variables

bpk-panel-border-color

$bpk-panel-border-color: rgb(193, 199, 207) !default;

radii

variables

bpk-border-radius-xs

$bpk-border-radius-xs: .25rem !default;

bpk-border-radius-sm

$bpk-border-radius-sm: .5rem !default;

bpk-border-radius-md

$bpk-border-radius-md: .75rem !default;

bpk-border-radius-lg

$bpk-border-radius-lg: 1.5rem !default;

bpk-border-radius-xl

$bpk-border-radius-xl: 2.5rem !default;

rating-bar-colors

variables

bpk-private-bar-track-default-day

$bpk-private-bar-track-default-day: rgb(224, 228, 233) !default;

bpk-private-bar-track-default-night

$bpk-private-bar-track-default-night: rgb(36, 51, 70) !default;

bpk-private-bar-track-on-contrast-day

$bpk-private-bar-track-on-contrast-day: rgb(255, 255, 255) !default;

bpk-private-bar-track-on-contrast-night

$bpk-private-bar-track-on-contrast-night: rgb(36, 51, 70) !default;

scrim-colors

variables

bpk-scrim-day

$bpk-scrim-day: rgba(0, 0, 0, 0.7) !default;

bpk-scrim-night

$bpk-scrim-night: rgba(0, 0, 0, 0.7) !default;

segmented-control-colors

variables

bpk-private-segmented-control-canvas-default-day

$bpk-private-segmented-control-canvas-default-day: rgb(239, 243, 248) !default;

bpk-private-segmented-control-canvas-default-night

$bpk-private-segmented-control-canvas-default-night: rgb(19, 29, 43) !default;

bpk-private-segmented-control-surface-contrast-day

$bpk-private-segmented-control-surface-contrast-day: rgba(255, 255, 255, 0.1) !default;

bpk-private-segmented-control-surface-contrast-night

$bpk-private-segmented-control-surface-contrast-night: rgb(19, 29, 43) !default;

bpk-private-segmented-control-surface-contrast-on-day

$bpk-private-segmented-control-surface-contrast-on-day: rgb(2, 77, 175) !default;

bpk-private-segmented-control-surface-contrast-on-night

$bpk-private-segmented-control-surface-contrast-on-night: rgb(5, 65, 132) !default;

skeleton-colors

variables

bpk-private-skeleton-shimmer-start-end-day

$bpk-private-skeleton-shimmer-start-end-day: rgba(255, 255, 255, 0) !default;

bpk-private-skeleton-shimmer-start-end-night

$bpk-private-skeleton-shimmer-start-end-night: rgba(0, 0, 0, 0) !default;

bpk-private-skeleton-shimmer-center-day

$bpk-private-skeleton-shimmer-center-day: rgba(255, 255, 255, 0.6) !default;

bpk-private-skeleton-shimmer-center-night

$bpk-private-skeleton-shimmer-center-night: rgba(0, 0, 0, 0.2) !default;

slider-colors

variables

bpk-private-slider-selected-day

$bpk-private-slider-selected-day: rgb(21, 70, 121) !default;

spacings

functions

bpk-spacing-xxxxl

@function bpk-spacing-xxxxl() { ... }

Parameters

None.

bpk-spacing-xxl

@function bpk-spacing-xxl() { ... }

Parameters

None.

bpk-spacing-md

@function bpk-spacing-md() { ... }

Parameters

None.

bpk-spacing-sm

@function bpk-spacing-sm() { ... }

Parameters

None.

bpk-spacing-lg

@function bpk-spacing-lg() { ... }

Parameters

None.

bpk-spacing-base

@function bpk-spacing-base() { ... }

Parameters

None.

bpk-spacing-xl

@function bpk-spacing-xl() { ... }

Parameters

None.

bpk-spacing-xxxl

@function bpk-spacing-xxxl() { ... }

Parameters

None.

variables

bpk-one-pixel-rem

$bpk-one-pixel-rem: .0625rem !default;

bpk-spacing-none

$bpk-spacing-none: 0 !default;

bpk-spacing-icon-text

$bpk-spacing-icon-text: .5rem !default;

sponsored-banner-colors

status-colors

variables

bpk-status-success-spot-night

$bpk-status-success-spot-night: rgb(98, 241, 198) !default;

bpk-status-success-fill-night

$bpk-status-success-fill-night: rgb(177, 255, 231) !default;

bpk-status-success-spot-day

$bpk-status-success-spot-day: rgb(12, 131, 138) !default;

bpk-status-success-fill-day

$bpk-status-success-fill-day: rgb(212, 255, 242) !default;

bpk-status-danger-spot-night

$bpk-status-danger-spot-night: rgb(255, 100, 156) !default;

bpk-status-warning-spot-night

$bpk-status-warning-spot-night: rgb(254, 235, 135) !default;

bpk-status-danger-fill-night

$bpk-status-danger-fill-night: rgb(255, 202, 221) !default;

bpk-status-warning-fill-night

$bpk-status-warning-fill-night: rgb(251, 241, 187) !default;

bpk-status-danger-spot-day

$bpk-status-danger-spot-day: rgb(231, 8, 102) !default;

bpk-status-warning-spot-day

$bpk-status-warning-spot-day: rgb(245, 93, 66) !default;

bpk-status-danger-fill-day

$bpk-status-danger-fill-day: rgb(255, 233, 249) !default;

bpk-status-warning-fill-day

$bpk-status-warning-fill-day: rgb(255, 247, 207) !default;

surface-colors

variables

bpk-surface-hero-night

$bpk-surface-hero-night: rgb(1, 9, 19) !default;

bpk-surface-default-night

$bpk-surface-default-night: rgb(19, 29, 43) !default;

bpk-surface-hero-day

$bpk-surface-hero-day: rgb(0, 98, 227) !default;

bpk-surface-default-day

$bpk-surface-default-day: rgb(255, 255, 255) !default;

bpk-surface-contrast-night

$bpk-surface-contrast-night: rgb(1, 9, 19) !default;

bpk-surface-contrast-day

$bpk-surface-contrast-day: rgb(5, 32, 60) !default;

bpk-surface-elevated-night

$bpk-surface-elevated-night: rgb(36, 51, 70) !default;

bpk-surface-subtle-night

$bpk-surface-subtle-night: rgb(36, 51, 70) !default;

bpk-surface-elevated-day

$bpk-surface-elevated-day: rgb(255, 255, 255) !default;

bpk-surface-highlight-night

$bpk-surface-highlight-night: rgb(36, 51, 70) !default;

bpk-surface-subtle-day

$bpk-surface-subtle-day: rgb(227, 240, 255) !default;

bpk-surface-highlight-day

$bpk-surface-highlight-day: rgb(224, 228, 233) !default;

text-colors

variables

bpk-text-on-dark-day

$bpk-text-on-dark-day: rgb(255, 255, 255) !default;

bpk-text-on-light-night

$bpk-text-on-light-night: rgb(1, 9, 19) !default;

bpk-text-disabled-on-dark-day

$bpk-text-disabled-on-dark-day: rgba(255, 255, 255, 0.5) !default;

bpk-text-on-light-day

$bpk-text-on-light-day: rgb(22, 22, 22) !default;

bpk-text-hero-night

$bpk-text-hero-night: rgb(1, 9, 19) !default;

bpk-text-disabled-night

$bpk-text-disabled-night: rgba(255, 255, 255, 0.2) !default;

bpk-text-primary-dark-color

$bpk-text-primary-dark-color: rgb(255, 255, 255) !default;

bpk-text-hero-day

$bpk-text-hero-day: rgb(0, 98, 227) !default;

bpk-text-quaternary-dark-color

$bpk-text-quaternary-dark-color: rgb(142, 142, 147) !default;

bpk-text-primary-night

$bpk-text-primary-night: rgb(255, 255, 255) !default;

bpk-text-quaternary-light-color

$bpk-text-quaternary-light-color: rgb(143, 144, 160) !default;

bpk-text-disabled-day

$bpk-text-disabled-day: rgba(0, 0, 0, 0.2) !default;

bpk-text-primary-light-color

$bpk-text-primary-light-color: rgb(17, 18, 54) !default;

bpk-text-primary-day

$bpk-text-primary-day: rgb(22, 22, 22) !default;

bpk-text-error-night

$bpk-text-error-night: rgb(255, 100, 156) !default;

bpk-text-error-day

$bpk-text-error-day: rgb(231, 8, 102) !default;

bpk-text-tertiary-dark-color

$bpk-text-tertiary-dark-color: rgb(142, 142, 147) !default;

bpk-text-secondary-dark-color

$bpk-text-secondary-dark-color: rgb(178, 178, 191) !default;

bpk-text-primary-inverse-night

$bpk-text-primary-inverse-night: rgb(1, 9, 19) !default;

bpk-text-secondary-night

$bpk-text-secondary-night: rgb(189, 196, 203) !default;

bpk-text-on-dark-night

$bpk-text-on-dark-night: rgb(255, 255, 255) !default;

bpk-text-secondary-light-color

$bpk-text-secondary-light-color: rgb(104, 105, 127) !default;

bpk-text-primary-inverse-day

$bpk-text-primary-inverse-day: rgb(255, 255, 255) !default;

bpk-text-disabled-on-dark-night

$bpk-text-disabled-on-dark-night: rgba(255, 255, 255, 0.5) !default;

bpk-text-tertiary-light-color

$bpk-text-tertiary-light-color: rgb(143, 144, 160) !default;

bpk-text-secondary-day

$bpk-text-secondary-day: rgb(98, 105, 113) !default;

bpk-background-elevation-03-dark-color

$bpk-background-elevation-03-dark-color: rgb(58, 58, 60) !default;

bpk-background-elevation-02-dark-color

$bpk-background-elevation-02-dark-color: rgb(44, 44, 46) !default;

bpk-background-elevation-01-dark-color

$bpk-background-elevation-01-dark-color: rgb(29, 27, 32) !default;

bpk-background-elevation-01-light-color

$bpk-background-elevation-01-light-color: rgb(255, 255, 255) !default;

bpk-background-elevation-02-light-color

$bpk-background-elevation-02-light-color: rgb(255, 255, 255) !default;

bpk-background-elevation-03-light-color

$bpk-background-elevation-03-light-color: rgb(255, 255, 255) !default;

bpk-font-color-base

$bpk-font-color-base: rgb(22, 22, 22) !default;

typesettings

variables

bpk-line-height-xl-tight

$bpk-line-height-xl-tight: 1.75rem !default;

bpk-line-height-xxxxxl

$bpk-line-height-xxxxxl: 4rem !default;

bpk-line-height-xxxl

$bpk-line-height-xxxl: 3rem !default;

bpk-line-height-xl

$bpk-line-height-xl: 2rem !default;

bpk-font-size-xl

$bpk-font-size-xl: 1.5rem !default;

bpk-font-family-larken

$bpk-font-family-larken: 'Larken', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', sans-serif !default;

bpk-font-size-xxxxxl

$bpk-font-size-xxxxxl: 4rem !default;

bpk-font-size-xxxl

$bpk-font-size-xxxl: 2.5rem !default;

bpk-line-height-sm

$bpk-line-height-sm: 1.25rem !default;

bpk-line-height-lg-tight

$bpk-line-height-lg-tight: 1.5rem !default;

bpk-line-height-lg

$bpk-line-height-lg: 1.75rem !default;

bpk-line-height-xs

$bpk-line-height-xs: 1rem !default;

bpk-font-size-sm

$bpk-font-size-sm: .875rem !default;

bpk-font-size-xs

$bpk-font-size-xs: .75rem !default;

bpk-font-size-lg

$bpk-font-size-lg: 1.25rem !default;

bpk-font-size-root

$bpk-font-size-root: 100% !default;

bpk-font-size-6-xl

$bpk-font-size-6-xl: 4.75rem !default;

bpk-font-family-base

$bpk-font-family-base: 'Skyscanner Relative', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;

bpk-line-height-base-tight

$bpk-line-height-base-tight: 1.25rem !default;

bpk-font-size-7-xl

$bpk-font-size-7-xl: 6rem !default;

bpk-line-height-6-xl

$bpk-line-height-6-xl: 4.75rem !default;

bpk-font-size-8-xl

$bpk-font-size-8-xl: 7.5rem !default;

bpk-font-size-xxl

$bpk-font-size-xxl: 2rem !default;

bpk-font-size-xxxxl

$bpk-font-size-xxxxl: 3rem !default;

bpk-line-height-base

$bpk-line-height-base: 1.5rem !default;

bpk-line-height-7-xl

$bpk-line-height-7-xl: 6rem !default;

bpk-font-size-base

$bpk-font-size-base: 1rem !default;

bpk-line-height-8-xl

$bpk-line-height-8-xl: 7.5rem !default;

bpk-line-height-xxl

$bpk-line-height-xxl: 2.5rem !default;

bpk-line-height-xxxxl

$bpk-line-height-xxxxl: 3.5rem !default;

z-indices

variables

bpk-zindex-autosuggest

$bpk-zindex-autosuggest: 900 !default;

bpk-zindex-popover

$bpk-zindex-popover: 900 !default;

bpk-zindex-tooltip

$bpk-zindex-tooltip: 900 !default;

bpk-zindex-scrim

$bpk-zindex-scrim: 1000 !default;

bpk-zindex-modal

$bpk-zindex-modal: 1100 !default;

bpk-zindex-drawer

$bpk-zindex-drawer: 1100 !default;