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-link-normal-foreground-night
$bpk-private-button-link-normal-foreground-night: rgb(132, 233, 255) !default;
bpk-private-button-link-on-dark-disabled-foreground-night
$bpk-private-button-link-on-dark-disabled-foreground-night: rgba(255, 255, 255, 0.2) !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-featured-normal-background-day
$bpk-private-button-featured-normal-background-day: rgb(0, 98, 227) !default;
bpk-private-button-featured-pressed-background-night
$bpk-private-button-featured-pressed-background-night: rgb(209, 247, 255) !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-link-normal-foreground-day
$bpk-private-button-link-normal-foreground-day: rgb(0, 98, 227) !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-link-on-dark-disabled-foreground-day
$bpk-private-button-link-on-dark-disabled-foreground-day: rgba(255, 255, 255, 0.2) !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-featured-pressed-background-day
$bpk-private-button-featured-pressed-background-day: rgb(2, 77, 175) !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-link-pressed-foreground-night
$bpk-private-button-link-pressed-foreground-night: rgb(209, 247, 255) !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-link-pressed-foreground-day
$bpk-private-button-link-pressed-foreground-day: rgb(2, 77, 175) !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-link-on-dark-pressed-foreground-night
$bpk-private-button-link-on-dark-pressed-foreground-night: rgba(255, 255, 255, 0.5) !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-link-on-dark-normal-foreground-night
$bpk-private-button-link-on-dark-normal-foreground-night: rgb(255, 255, 255) !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-link-on-dark-pressed-foreground-day
$bpk-private-button-link-on-dark-pressed-foreground-day: rgba(255, 255, 255, 0.5) !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-link-on-dark-normal-foreground-day
$bpk-private-button-link-on-dark-normal-foreground-day: rgb(255, 255, 255) !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;
bpk-private-button-featured-normal-background-night
$bpk-private-button-featured-normal-background-night: rgb(132, 233, 255) !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
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
variables
bpk-private-sponsored-banner-background-day
$bpk-private-sponsored-banner-background-day: rgb(239, 243, 248) !default;
bpk-private-sponsored-banner-background-night
$bpk-private-sponsored-banner-background-night: rgb(36, 51, 70) !default;
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-link-night
$bpk-text-link-night: rgb(132, 233, 255) !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-link-day
$bpk-text-link-day: rgb(0, 98, 227) !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;