@skyscanner/bpk-foundations-web: 18.1.0 => 19.0.0
Breaking:
- Updated
$bpk-breakpoint-mobile-margin
value from24px
to16px
.
@skyscanner/bpk-foundations-android: 7.12.0 => 7.13.0
@skyscanner/bpk-foundations-common: 6.12.0 => 6.13.0
@skyscanner/bpk-foundations-ios: 6.12.0 => 6.13.0
@skyscanner/bpk-foundations-react-native: 4.12.0 => 4.13.0
@skyscanner/bpk-foundations-web: 18.1.0 => 19.0.0
Added:
- Added Surface Low Contrast and Overlay semantic colour tokens
@skyscanner/bpk-foundations-web: 18.0.0 => 18.1.0
Added:
- Added new
letter-spacing-hero
andletter-spacing-display
tokens.
@skyscanner/bpk-foundations-web: 17.14.0 => 18.0.0
Breaking:
- Updated typography tokens to support updated typography
- Changed
$bpk-line-height-xxxxxl
from4.5rem
to4rem
for Hero 4 update - Changed
$bpk-line-height-6-xl
from5.25rem
to4.75rem
for Hero 3 update
- Changed
Added:
- Added tokens for BpkSegmentedControl
@skyscanner/bpk-foundations-android: 7.11.0 => 7.12.0
@skyscanner/bpk-foundations-common: 6.11.0 => 6.12.0
@skyscanner/bpk-foundations-ios: 6.11.0 => 6.12.0
@skyscanner/bpk-foundations-react-native: 4.11.0 => 4.12.0
Added:
- Added tokens for BpkSegmentedControl
Added:
@skyscanner/bpk-foundations-web: 17.13.0 => 17.14.0
- Add Noto in font-family as fallback for the Larken font
Added:
@skyscanner/bpk-foundations-web: 17.12.0 => 17.13.0
- Adding a new token for font-weight of
300
as$bpk-font-weight-light
Added:
@skyscanner/bpk-foundations-web: 17.11.0 => 17.12.0
- Adding new Larken font-family to support the new Editorial font.
Added:
@skyscanner/bpk-foundations-web:
- Added
.d.ts
formatter to create typescript types forbase.es6.js
Changed:
@skyscanner/bpk-foundations-common: 6.10.0 => 6.11.0
@skyscanner/bpk-foundations-web: 17.9.0 => 17.10.0
@skyscanner/bpk-foundations-android: 7.10.0 => 7.11.0
@skyscanner/bpk-foundations-ios: 6.10.0 => 6.11.0
- Introduce private token for Card Button contained fill
Added:
@skyscanner/bpk-foundations-android: 7.9.1 => 7.10.0
@skyscanner/bpk-foundations-common: 6.9.1 => 6.10.0
@skyscanner/bpk-foundations-ios: 6.9.1 => 6.10.0
@skyscanner/bpk-foundations-react-native: 4.9.1 => 4.10.0
@skyscanner/bpk-foundations-web: 17.8.1 => 17.9.0
- Added private navigation tab colour tokens
Changed:
@skyscanner/bpk-foundations-android: 7.9.0 => 7.9.1
@skyscanner/bpk-foundations-common: 6.9.0 => 6.9.1
@skyscanner/bpk-foundations-ios: 6.9.0 => 6.9.1
@skyscanner/bpk-foundations-react-native: 4.9.0 => 4.9.1
@skyscanner/bpk-foundations-web: 17.8.0 => 17.8.1
- Tweaked button colours
Added:
@skyscanner/bpk-foundations-common: 6.8.0 => 6.9.0
@skyscanner/bpk-foundations-android: 7.8.0 => 7.9.0
@skyscanner/bpk-foundations-ios: 6.8.0 => 6.9.0
@skyscanner/bpk-foundations-react-native: 4.8.0 => 4.9.0
@skyscanner/bpk-foundations-web: 17.7.0 => 17.8.0
- Added private rating bar colour tokens
Changed:
@skyscanner/bpk-foundations-common: 6.7.0 => 6.8.0
@skyscanner/bpk-foundations-web: 17.6.0 => 17.7.0
@skyscanner/bpk-foundations-android: 7.7.0 => 7.8.0
@skyscanner/bpk-foundations-ios: 6.7.0 => 6.8.0
- Minor tweaks to Gray colours
- Added new
Text Hero
semantic token.
Added:
@skyscanner/bpk-foundations-common: 6.6.2 => 6.7.0
@skyscanner/bpk-foundations-android: 7.6.2 => 7.7.0
@skyscanner/bpk-foundations-ios: 6.6.2 => 6.7.0
@skyscanner/bpk-foundations-react-native: 4.6.2 => 4.7.0
@skyscanner/bpk-foundations-web: 17.5.3 => 17.6.0
- Added tokens for surfaceHero colour
Patched:
@skyscanner/bpk-foundations-android: 7.6.1 => 7.6.2
@skyscanner/bpk-foundations-common: 6.6.1 => 6.6.2
@skyscanner/bpk-foundations-ios: 6.6.1 => 6.6.2
@skyscanner/bpk-foundations-react-native: 4.6.1 => 4.6.2
@skyscanner/bpk-foundations-web: 17.5.2 => 17.5.3
- Changed on-contrast colour to white to match the figma design
Patched:
@skyscanner/bpk-foundations-android: 7.6.0 => 7.6.1
@skyscanner/bpk-foundations-common: 6.6.0 => 6.6.1
@skyscanner/bpk-foundations-ios: 6.6.0 => 6.6.1
@skyscanner/bpk-foundations-react-native: 4.6.0 => 4.6.1
@skyscanner/bpk-foundations-web: 17.5.0 => 17.5.1
@skyscanner/bpk-foundations-web: 17.5.1 => 17.5.2
- Fixed banner colours to include Day and Night tokens
@skyscanner/bpk-foundations-android: 7.5.0 => 7.6.0
@skyscanner/bpk-foundations-common: 6.5.0 => 6.6.0
@skyscanner/bpk-foundations-ios: 6.5.0 => 6.6.0
@skyscanner/bpk-foundations-react-native: 4.5.0 => 4.6.0
@skyscanner/bpk-foundations-web: 17.4.0 => 17.5.0
- Added tokens for BpkInfoBanner
Added:
@skyscanner/bpk-foundations-android: 7.4.0 => 7.5.0
@skyscanner/bpk-foundations-common: 6.4.0 => 6.5.0
@skyscanner/bpk-foundations-ios: 6.4.0 => 6.5.0
@skyscanner/bpk-foundations-react-native: 4.4.0 => 4.5.0
@skyscanner/bpk-foundations-web: 17.3.0 => 17.4.0
- Added private tokens for sponsored banner
- Added private tokens for backpack badge V2
Added:
@skyscanner/bpk-foundations-android: 7.2.0 => 7.3.0
@skyscanner/bpk-foundations-common: 6.2.0 => 6.3.0
@skyscanner/bpk-foundations-ios: 6.2.0 => 6.3.0
@skyscanner/bpk-foundations-react-native: 4.2.0 => 4.3.0
@skyscanner/bpk-foundations-web: 17.1.0 => 17.2.0
- Add three new bpk primitive colors for all platforms
Added:
@skyscanner/bpk-foundations-web
: 17.0.0 => 17.1.0
- Add new bpk card button contained color
Changed:
bpk-svgs
: 18.0.0 => 18.1.0- Updated
explore
icon to new design.
- Updated
Breaking:
bpk-svgs
: 17.1.0 => 18.0.0
- All JS icons and spinners have a
viewBox
attribute and no longer havewidth
andheight
attributes. This should not have any visual impact, but might break snapshots.
Added:
@skyscanner/bpk-foundations-web
: 16.1.0 => 17.0.0
@skyscanner/bpk-foundations-ios
: 6.1.0 => 6.2.0
@skyscanner/bpk-foundations-android
: 7.1.0 => 7.2.0
- Add new private colour for map markers.
Breaking:
-
@skyscanner/bpk-foundations-web
: 16.1.0 => 17.0.0- Remove
spacing v2
andspacing
tokens. - Remove
bpk-heading-content-margin-top
token. - Spacing functions now only return the newer spacing values.
- Remove
-
bpk-mixins
: 41.2.1 => 42.0.0- Remove
bpk-content-heading
as this is not used.
- Remove
Breaking:
@skyscanner/bpk-svgs
: 16.4.0 => 17.0.0
- All JS icons have
aria-hidden
attribute set to true by default to hide icons from Assistive Technologies. You can overwrite the value if needed by passingaria-hidden="false"
to the icon component.
Changed:
bpk-mixins
: 41.1.1 => 41.2.0
- Specified a wider support range for
node-sass
library.
@skyscanner/bpk-svgs
: 16.3.4 => 16.4.0
- Add new AI icon
Added:
@skyscanner/bpk-foundations-web: 16.0.0 => 16.1.0
:
bpk-mixins: 41.0.0 => 41.1.0
:
- Add desktop and above desktop breakpoints
Breaking:
Removing deprecated border tokens and mixins.
@skyscanner/bpk-foundations-web: 15.3.0 => 16.0.0
:
- Removed
border-radius-pill
andborder-radius-pill-lg
tokens. Usebpk-border-radius-md
instead. Otherwise, check with your designer to choose any other supported radius.
bpk-mixins: 40.3.1 => 41.0.0
:
- Removed
bpk-border-radius-pill
mixin.Use bpk-border-radius-lg
as the replacement. - Removed deprecated badge mixins
- Removed
bpk-badge--light
mixin, please usebpk-badge--normal
. - Removed
bpk-badge--destructive
mixin, please usebpk-badge--critical
.
- Removed
Added:
@skyscanner/bpk-foundations-web: 15.2.0 => 15.3.0
:
@skyscanner/bpk-foundations-ios: 6.0.0 => 6.1.0
:
@skyscanner/bpk-foundations-android: 7.0.0 => 7.1.0
:
bpk-mixins: 40.2.1 => 40.3.0
:
- Add new semantic token for surface subtle
Changed:
@skyscanner/bpk-svgs:
16.2.4 => 16.3.0
- Change
baggage-cabin-add
,baggage-cabin-not-included
,bpk-cabin
,baggage-checked-add
,baggage-checked-not-included
,bpk-checked
,baggage-generic
icons
Added:
@skyscanner/bpk-foundations-web
: 15.1.0 => 15.2.0
bpk-mixins
: 40.1.0 => 40.2.0
- Added private token for slider
Fixed:
bpk-mixins
: 40.0.0 => 40.1.0
- Fix
bpk-icon-lg--align-to-large-button
andbpk-spinner--align-to-large-button
mixins to use correct token - Fix
bpk-form-validation__container
to use correct token
Added:
@skyscanner/bpk-foundations-web
: 15.0.0 => 15.1.0
bpk-mixins
: 40.0.0 => 40.1.0
- Added private token for button line height
Breaking:
@skyscanner/bpk-foundations-web
: 14.0.1 => 15.0.0
bpk-mixins
: 39.1.2 => 40.0.0
- The following tokens have been removed. You should use the corresponding semantic tokens instead.
-
bpk-autosuggest-*
-
bpk-badge-*
-
bpk-grid-*
. This component is no longer supported. -
bpk-rating-*
-
bpk-state-selected-background-color
-
bpk-required-color
-
bpk-spacing-xs()
. This size is no longer supported in our spacing system. -
Dialogs
bpk-card-color
,bpk-modal-header-padding
,bpk-panel-padding
,bpk-panel-background-color
, as well as allbpk-scrim-*
tokens.
-
Calendar
bpk-calendar-*-color
,bpk-calendar-nav-*
,bpk-calendar-padding
-
Horizontal Nav
bpk-horizontal-nav-link-color
,bpk-horizontal-nav-link-hover-color
,bpk-horizontal-nav-link-active-color
,bpk-horizontal-nav-link-selected-color
-
Banner Alert
bpk-banner-alert-background-color
,bpk-banner-alert-expand-icon-fill
,bpk-banner-alert-children-padding-x
,bpk-banner-alert-children-padding-y
,bpk-banner-alert-children-color
-
Button
bpk-button-selected-*
,bpk-button-text-align
,bpk-button-font-size
,bpk-button-font-weight
,bpk-button-line-height
,bpk-button-large-font-size
,bpk-button-large-line-height
,bpk-button-*-color
,bpk-button-*-background-color
,bpk-button-*-background-image
,bpk-button-*-box-shadow
,bpk-button-padding-*
,bpk-button-large-padding-*
,bpk-button-*-opacity
,bpk-button-icon-*
-
Form
bpk-checkbox-checked-tick-color
,bpk-radio-checked-circle-color
,bpk-input-color
,bpk-input-placeholder-color
,bpk-select-border
,bpk-select-color
,bpk-select-disabled-color
,bpk-label-color
,bpk-label-font-size
,bpk-label-line-height
-
Typography
bpk-text-{size}-font-size
,bpk-text-{size}-font-weight
,bpk-text-{size}-line-height
,bpk-text-{size}-letter-spacing
, where size is one of:xs
,sm
,base
,lg
,xl
,xxl
,xxxl
,xxxxl
,xxxxxl
bpk-h-{size}-font-size
,bpk-h-{size}-font-weight
,bpk-h-{size}-line-height
, where size is one of:1
,2
,3
,4
,5
,6
bpk-p-*
,bpk-list-*
,bpk-link-*
Important: You should not use typography tokens directly. Instead, use one of the supported mixins:
hero-1
,hero-2
,hero-3
,hero-4
,hero-5
,heading-1
,heading-2
,heading-3
,heading-4
,heading-5
,subheading
,body-longform
,body-default
,footnote
,caption
,label-1
,label-2
,label-3
-
bpk-mixins
: 39.1.2 => 40.0.0
- The following mixins have been removed:
bpk-button--outline
,bpk-button--selected
bpk-heading-6
,bpk-heading--no-bottom-margin
bpk-grid__*
bpk-icon-sm
andbpk-icon-lg
@skyscanner/bpk-foundations-web
: 14.0.1 => 15.0.0
- The following files have been removed.
@skyscanner/bpk-foundations-web/tokens/breakpoints.common
@skyscanner/bpk-foundations-web/tokens/breakpoints.default.scss
@skyscanner/bpk-foundations-web/tokens/breakpoints.es6
@skyscanner/bpk-foundations-web/tokens/breakpoints.scss
@skyscanner/bpk-foundations-web/tokens/breakpoints.raw
If you are importing tokens from any of the above mentioned files, please replace the import path as such:
@skyscanner/bpk-foundations-web/tokens/
breakpoints
.extension
-> @skyscanner/bpk-foundations-web/tokens/
base
.extension
Fixed:
@skyscanner/bpk-foundations-web
: 14.0.0 => 14.0.1- Fix
breakpointDesktopMargin
,selectLargeHeight
,textareaMinHeight
,ratingBaseWidth
,ratingBaseHeight
,ratingSmWidth
,ratingSmHeight
,ratingLgWidth
,ratingLgHeight
JS tokens
- Fix
Fixed:
bpk-mixins: 39.1.0 => 39.1.1
:- Fixed an issue where correct cursor states were not showing for clickable and disabled chips.
Changed:
bpk-mixins
: 39.0.1 => 39.1.0
- Update placeholder color in
input
andtextarea
fromtext-disabled
totext-secondary
.
Added:
@skyscanner/bpk-svgs: 16.1.1 => 16.2.0
- Added new
Origin
icon.
Breaking:
@skyscanner/bpk-foundations-android
: 6.0.0 => 7.0.0@skyscanner/bpk-foundations-common
: 5.0.0 => 6.0.0@skyscanner/bpk-foundations-ios
: 5.0.0 => 6.0.0@skyscanner/bpk-foundations-react-native
: 3.1.5 => 4.0.0@skyscanner/bpk-foundations-web:
13.6.0 => 14.0.0bpk-mixins
: 38.0.0 => 39.0.0bpk-stylesheets
: 8.1.25 => 9.0.0@skyscanner/bpk-svgs
: 16.1.0 => 16.1.1- Removed no longer required private chip Tokens - these should not be used outside of foundations, so should not affect anybody outside of Backpack
- Introduced new private chip tokens based on latest designs
Breaking:
bpk-mixins
: 37.2.1 => 38.0.0
- Deprecated
bpk-badge--light
mixin and replaced with exact colour replacementbpk-badge--normal
. - Created new
bpk-badge--warning
mixin for use when creating warning badges. - Removed
warning
from being the default badge type. - Deprecated
bpk-badge--destructive
mixin and replaced with exact colour replacementbpk-badge--critical
.
Added:
@skyscanner/bpk-svgs
: 16.0.8 => 16.1.0
- Added automirror to
depart
andreturn
icons for use on Android with RTL.`
Breaking:
@skyscanner/bpk-foundations-android
: 5.1.4 => 6.0.0
@skyscanner/bpk-foundations-ios
: 4.1.4 => 5.0.0
- Renamed
BORDER_RADIUS_PILL
toBORDER_RADIUS_XL
Changed
@skyscanner/bpk-foundations-web
: 13.5.0 => 13.6.0
bpk-mixins
: 37.1.2 => 37.2.0
- Deprecate
bpk-border-radius-pill
token. Usebpk-border-radius-md
instead. Otherwise, check with your designer to choose any other supported radius. - Deprecate
bpk-border-radius-pill-lg
token. Usebpk-border-radius-lg
instead. - Add new
bpk-border-radius-lg
,bpk-border-radius-xl
tokens - Update
bpk-border-radius-sm
from6px
to8px
bpk-mixins
:
- Deprecate
bpk-border-radius-pill
mixin. Usebpk-border-radius-md
instead. Otherwise, check with your designer to choose any other supported radius. - Add new
bpk-border-radius-lg
andbpk-border-radius-xl
mixins
Changed:
@skyscanner/bpk-foundations-web
: 13.4.0 => 13.5.0- Deprecate the following tokens as they are not widely used:
$bpk-button-text-align
- Backpack button selected tokens
$bpk-button-selected-color
,$bpk-button-selected-hover-color
,$bpk-button-selected-active-color
,$bpk-button-selected-background-color
,$bpk-button-selected-hover-background-color
,$bpk-button-selected-active-background-color
,$bpk-button-selected-background-image
,$bpk-button-selected-hover-background-image
,$bpk-button-selected-active-background-image
- Deprecate the following tokens as they are not widely used:
Changed:
@skyscanner/bpk-foundations-web
: 13.3.0 => 13.4.0- Deprecate the following tokens as they are not widely used:
- autosuggest tokens
$bpk-autosuggest-list-background-color
,$bpk-autosuggest-list-item-active-background-color
,$bpk-autosuggest-list-item-highlighted-background-color
- badge tokens
$bpk-badge-padding-x
,$bpk-badge-padding-y
,$bpk-badge-background-color
,$bpk-badge-centered-vertical-align
- horizontal nav tokens
$bpk-horizontal-nav-link-color
,$bpk-horizontal-nav-link-hover-color
,$bpk-horizontal-nav-link-active-color
,$bpk-horizontal-nav-link-selected-color
- banner alert tokens
$bpk-banner-alert-background-color
,$bpk-banner-alert-expand-icon-fill
,$bpk-banner-alert-children-padding-x
,$bpk-banner-alert-children-padding-y
,$bpk-banner-alert-children-color
- autosuggest tokens
- Deprecate the following tokens as they are not widely used:
Changed:
-
@skyscanner/bpk-foundations-web
: 13.2.1 => 13.3.0- Deprecate the following tokens as they are not widely used:
- scrim tokens
$bpk-scrim-opacity
,$bpk-scrim-initial-opacity
,$bpk-scrim-dark-opacity
,$bpk-scrim-mobile-opacity
$bpk-panel-padding
and$bpk-panel-background-color
$bpk-card-color
- scrim tokens
- Deprecate the following tokens as they are not widely used:
-
bpk-mixins
: 37.0.0 => 37.1.0bpk-panel--padded
- change padding to16px
to be consistent with card padding
Breaking:
bpk-mixins
: 36.2.0 => 37.0.0- Removed content container mixins. If you need to add margins/padding to the bottom of your text please use the Backpack spacing directly.
@mixin bpk-content-container
@mixin bpk-content-container--bare-html
@mixin bpk-content-container--bare-html-alternate
- Removed content container mixins. If you need to add margins/padding to the bottom of your text please use the Backpack spacing directly.
Patch:
@skyscanner/bpk-foundations-web
: 13.2.0 => 13.2.1- Fix
calendarDaySize
token value to work with the existing bpk calendar utils
- Fix
Changed:
-
@skyscanner/bpk-foundations-web
: 13.1.1 => 13.2.0-
Deprecated calendar tokens as their usage is low and not widely used and using semantic tokens is preferred. The following are deprecated:
$bpk-calendar-padding
$bpk-calendar-day-color
$bpk-calendar-day-selected-color
$bpk-calendar-day-focused-color
$bpk-calendar-day-focused-border-color
$bpk-calendar-day-hover-color
$bpk-calendar-day-hover-background-color
$bpk-calendar-day-active-color
$bpk-calendar-day-active-background-color
$bpk-calendar-day-disabled-color
$bpk-calendar-day-outside-color
$bpk-calendar-nav-icon-fill
$bpk-calendar-nav-icon-hover-fill
$bpk-calendar-nav-icon-active-fill
$bpk-calendar-nav-icon-disabled-fill
-
Deprecated grid tokens as no longer supported.
$bpk-grid-columns
$bpk-grid-gutter
$bpk-grid-container-padding
$bpk-grid-container-mobile-padding
-
-
bpk-mixins
: 36.1.3 => 36.2.0- Deprecated grid mixins as these are no longer supported due to the
BpkGrid
component being deprecated for a number of years.
- Deprecated grid mixins as these are no longer supported due to the
Patched:
@skyscanner/bpk-foundations-web
: 13.1.1 => 13.2.0- Change source of
animation
tokens to pull frombpk-foundation-common
. Values are not changing so nothing for consumers to change.
- Change source of
Fixed:
- bpk-mixins: 36.1.2 => 36.1.3
- Fix
bpk-label
mixin using incorrect line height token
- Fix
Changed:
- bpk-foundations-web: 13.0.0 => 13.1.0
- Deprecated form tokens as their usage is low and not widely used and using semantic tokens is preferred. The following are deprecated:
$bpk-checkbox-checked-tick-color
$bpk-radio-checked-circle-color
$bpk-input-color
$bpk-input-placeholder-color
$bpk-select-border
$bpk-select-color
$bpk-select-disabled-color
$bpk-label-color
$bpk-label-font-size
$bpk-label-line-height
$bpk-required-color
$bpk-heading-margin-top
$bpk-heading-margin-bottom
$bpk-p-margin-top
$bpk-p-margin-bottom
$bpk-list-margin-top
$bpk-list-margin-bottom
$bpk-list-nested-margin-top
$bpk-list-nested-margin-bottom
$bpk-list-item-margin-top
$bpk-list-item-margin-bottom
$bpk-link-hover-text-decoration
$bpk-link-*-color
- Deprecated form tokens as their usage is low and not widely used and using semantic tokens is preferred. The following are deprecated:
Breaking:
@skyscanner/bpk-foundations-web
: 12.1.4 => 13.0.0
@skyscanner/bpk-svgs
: 15.2.1 => 16.0.0
- Change small icons size from 18px to 16px aligning web icons with apps.
Added:
- bpk-mixins: 36.0.4 => 36.1.0
- Added new
brand
style for badges.
- Added new
Fixed:
- bpk-mixins: 36.0.2 => 36.0.4
- Further reverting of recent stylelint changes as some new rules are suggesting things we don't currently support.
- Fix incorrect import of
_bonds.scss
- Fix incorrect import of
Fixed:
- @skyscanner/bpk-svgs: 15.2.0 => 15.2.1
- Bump
gulp-svgmin
to latest version to fix broken icons
- Bump
Breaking:
- bpk-mixins: 35.0.2 => 36.0.0
- Delete Chip's styles:
primary
,success
,light
- Delete Chip's styles:
Added:
- bpk-mixins: 35.0.2 => 36.0.0
- Added Chip's styles:
default
,onDark
,onImage
- Added Chip's styles:
Fixed
@skyscanner/bpk-foundations-android: 5.1.1 => 5.1.2
@skyscanner/bpk-foundations-common: 4.1.1 => 4.1.2
@skyscanner/bpk-foundations-ios: 4.1.1 => 4.1.2
@skyscanner/bpk-foundations-react-native: 3.1.1 => 3.1.2
@skyscanner/bpk-foundations-web: 12.1.1 => 12.1.2
- Change mapping for textOnLight + textPrimaryInverse to NightGrey10 in night mode
Fixed
@skyscanner/bpk-foundations-android: 5.1.0 => 5.1.1
@skyscanner/bpk-foundations-common: 4.1.0 => 4.1.1
@skyscanner/bpk-foundations-ios: 4.1.0 => 4.1.1
@skyscanner/bpk-foundations-react-native: 3.1.0 => 3.1.1
@skyscanner/bpk-foundations-web: 12.1.0 => 12.1.1
- Change mapping for surfaceContrast to NightGrey10 in night mode
Breaking:
- bpk-mixins: 34.0.5 => 35.0.0
- Switched
Button
mixins to uselabel-1
- Switched
Changed
@skyscanner/bpk-foundations-web: 12.0.3 => 12.1.0
- Deprecated the following:
BUTTON_FONT_SIZE
,BUTTON_FONT_WEIGHT
,BUTTON_LINE_HEIGHT
,BUTTON_LARGE_FONT_SIZE
,BUTTON_LARGE_LINE_HEIGHT
Added:
@skyscanner/bpk-foundations-android: 5.0.2 => 5.1.0
@skyscanner/bpk-foundations-common: 4.0.2 => 4.1.0
@skyscanner/bpk-foundations-ios: 4.0.2 => 4.1.0
@skyscanner/bpk-foundations-react-native: 3.0.2 => 3.1.0
@skyscanner/bpk-foundations-web: 12.0.3 => 12.1.0
- Added new
TEXT_DISABLED_ON_DARK_DAY
andTEXT_DISABLED_ON_DARK_NIGHT
tokens
Fixed
@skyscanner/bpk-foundations-android: 5.0.1 => 5.0.2
@skyscanner/bpk-foundations-common: 4.0.1 => 4.0.2
@skyscanner/bpk-foundations-ios: 4.0.1 => 4.0.2
@skyscanner/bpk-foundations-react-native: 3.0.1 => 3.0.2
@skyscanner/bpk-foundations-web: 12.0.2 => 12.0.3
- Change mapping for canvasContrast to NightGrey10 in night mode
Added:
- @skyscanner/bpk-svgs: 15.0.2 => 15.1.0
- New small and large Baggage icons, these should be used in favour of previous baggage icons, which are now considered deprecated.
baggage-cabin-add
,baggage-cabin-not-included
,baggage-cabin
,baggage-checked-add
,baggage-checked-not-included
,baggage-checked
,baggage-generic
- New small and large Baggage icons, these should be used in favour of previous baggage icons, which are now considered deprecated.
Changed:
- bpk-mixins: 34.0.1 => 34.0.2
- Updated
bpk-code
mixins to use new colours.
- Updated
Fixed:
- @skyscanner/bpk-foundations-web: 12.0.0 => 12.0.2
- Fixed incorrect colour for base font.
- Deprecated previously missed
scrim
colours. - Deprecate unknown state token.
Fixed:
- bpk-mixins: 34.0.0 => 34.0.1
- Fix colour in disabled Button mixins
Changed:
- bpk-foundations-web: 11.0.1 => 12.0.0
- Deprecated all colour Button tokens
$bpk-button-*-color
,$bpk-button-*-background-color
,$bpk-button-*-background-image
- Deprecated all colour Button tokens
Breaking:
- bpk-mixins: 33.0.1 => 34.0.0
- Update Button mixins to use new semantic tokens
Changed:
@skyscanner/bpk-foundations-common: 4.0.0 => 4.0.1
@skyscanner/bpk-foundations-android: 5.0.0 => 5.0.1
@skyscanner/bpk-foundations-ios: 4.0.0 => 4.0.1
@skyscanner/bpk-foundations-react-native: 3.0.0 => 3.0.1
@skyscanner/bpk-foundations-web: 11.0.0 => 11.0.1
- Change chip normal night background colour to Night Grey 25.
Breaking:
@skyscanner/bpk-foundations-common: 3.2.1 => 4.0.0
@skyscanner/bpk-foundations-android: 4.4.1 => 5.0.0
@skyscanner/bpk-foundations-ios: 3.4.1 => 4.0.0
@skyscanner/bpk-foundations-react-native: 2.4.1 => 3.0.0
@skyscanner/bpk-foundations-web: 10.4.0 => 11.0.0
bpk-mixins: 32.2.0 => 33.0.0
bpk-stylesheets: 7.2.16 => 8.0.0
@skyscanner/bpk-svgs: 14.5.9 => 15.0.0
- Switch to new brand colours
Changed:
- bpk-foundations-web: 10.3.1 => 10.4.0
- Update link tokens to semantic colours:
$bpk-link-alternate-active-color
$bpk-link-active-color
$bpk-link-white-active-color
$bpk-link-hover-color
- Update link tokens to semantic colours:
- bpk-mixins: 32.1.0 => 32.2.0
- Update
bpk-link
,bpk-link--active
,bpk-link--alternate
,bpk-link--white
mixins to use semantic colours
- Update
Changed:
- bpk-mixins: 32.0.4 => 32.1.0
- Change colours to semantic tokens in
bpk-table
mixins - Change text style in
bpk-table__cell--head
mixin. This will change the weight of the text in the header cells of the table.
- Change colours to semantic tokens in
Changed:
@skyscanner/bpk-foundations-common: 3.2.0 => 3.2.1
@skyscanner/bpk-foundations-android: 4.4.0 => 4.4.1
@skyscanner/bpk-foundations-ios: 3.4.0 => 3.4.1
@skyscanner/bpk-foundations-react-native 2.4.0 => 2.4.1:
@skyscanner/bpk-foundations-web: 10.3.0 => 10.3.1
- Updated button destructive foreground colour
Added:
@skyscanner/bpk-foundations-common: 3.1.3 => 3.2.0
@skyscanner/bpk-foundations-android: 4.3.0 => 4.4.0
@skyscanner/bpk-foundations-ios: 3.3.0 => 3.4.0
@skyscanner/bpk-foundations-react-native: 2.3.0 => 2.4.0
@skyscanner/bpk-foundations-web: 10.2.0 => 10.3.0
- Added private tokens for skeleton shimmer colours
- Updated private tokens for button colours
Changed:
- bpk-foundations-web: 10.0.0 => 10.2.0
- Update banner alert tokens to use semantic colour tokens
- Deprecate
$bpk-banner-alert-event-color
token
Added:
@skyscanner/bpk-foundations-android:
4.2.1 => 4.3.0@skyscanner/bpk-foundations-ios:
3.2.1 => 3.3.0@skyscanner/bpk-foundations-react-native:
2.2.1 => 2.3.0@skyscanner/bpk-foundations-web:
10.0.0 => 10.2.0
- Added private tokens for button colours
Breaking:
-
bpk-foundations-web: 9.6.0 => 10.0.0
- Update badge token
$bpk-badge-background-color
to use semantic colour tokens
- Update badge token
-
bpk-mixins: 31.7.0 => 32.0.0
- Update Badge mixins to use new semantic tokens
Changed:
-
bpk-foundations-web: 9.5.1 => 9.6.0
- Update select tokens
$bpk-select-border
and$bpk-select-disabled-border-color
to use semantic colour tokens
- Update select tokens
-
bpk-mixins: 31.6.8 => 31.7.0
- Update select mixins
bpk-select
,bpk-select--large
,bpk-select--invalid
to use semantic colour tokens - Updated Radio and Checkbox mixins to use new semantic tokens.
- Update select mixins
Changed:
@skyscanner/bpk-foundations-android: 4.2.0 => 4.2.1
@skyscanner/bpk-foundations-ios: 3.2.0 => 3.2.1
@skyscanner/bpk-foundations-react-native: 2.2.0 => 2.2.1
@skyscanner/bpk-foundations-web: 9.5.0 => 9.5.1
- Changed private token for OnDarkOnBackground to match design
Changed:
- bpk-foundations-web: 9.4.0 => 9.5.0
- Changed background colour of autosuggest list item token
$bpk-autosuggest-list-item-active-background-color
- Changed background colour of autosuggest list item token
Added:
@skyscanner/bpk-foundations-android: 4.1.1 => 4.2.0
@skyscanner/bpk-foundations-ios: 3.1.1 => 3.2.0
@skyscanner/bpk-foundations-react-native: 2.1.1 => 2.2.0
@skyscanner/bpk-foundations-web: 9.4.0 => 9.5.0
- Added private tokens for chip colours
Added:
- @skyscanner/bpk-svgs: 14.4.4 => 14.5.0
- New pre-coloured branded icons for use in Sass/CSS.
Patched:
- bpk-mixins: 31.6.5 => 31.6.6
- Corrected to new
bpk-input--valid
icon.
- Corrected to new
Changed:
-
bpk-foundations-web: 9.3.0 => 9.4.0
- Updated
$bpk-input-border
,$bpk-input-color
,$bpk-input-placeholder-color
,$bpk-input-disabled-border-color
,$bpk-input-disabled-color
,$bpk-label-color
,$bpk-label-disabled-color
,$bpk-form-validation-color
,$bpk-required-color
tokens to use new colour tokens to prepare for new colour rollout.
- Updated
-
bpk-mixins: 31.6.3 => 31.6.4
- Changed
bpk-input
mixins to use semantic tokens - Changed
bpk-textarea
mixins to use semantic tokens
- Changed
Changed:
- @skyscanner/bpk-foundations-web: 9.2.1 => 9.3.0
- Changed
$bpk-horizontal-nav-link-hover-color
and$bpk-horizontal-nav-link-active-color
token values
- Changed
Fixed:
@skyscanner/bpk-foundations-android: 4.1.0 => 4.1.1
@skyscanner/bpk-foundations-ios: 3.1.0 => 3.1.1
@skyscanner/bpk-foundations-react-native: 2.1.0 => 2.1.1
@skyscanner/bpk-foundations-web: 9.2.0 => 9.2.1
- Fixed an issue whereby tokens in the new colour system are marked
deprecated
. This is due to the tokens being sorted so when the old colours came after the new colours it would override the details in the combined semantic tokens.
- Fixed an issue whereby tokens in the new colour system are marked
Changed:
@skyscanner/bpk-foundations-web 9.1.0 => 9.2.0
:- Changed calendar navigation icon colours:
$bpk-calendar-nav-icon-active-fill
$bpk-calendar-nav-icon-disabled-fill
$bpk-calendar-nav-icon-fill
$bpk-calendar-nav-icon-hover-fill
- Changed calendar date colours:
$bpk-calendar-day-active-background-color
$bpk-calendar-day-disabled-color
$bpk-calendar-day-hover-color
$bpk-calendar-day-selected-background-color
- Deprecated
$bpk-calendar-day-selected-background-color
token
- Changed calendar navigation icon colours:
Changed:
@skyscanner/bpk-foundations-android: 4.0.0 => 4.1.0
@skyscanner/bpk-foundations-common: 3.0.0 => 3.1.0
@skyscanner/bpk-foundations-ios: 3.0.0 => 3.1.0
@skyscanner/bpk-foundations-react-native: 2.0.0 => 2.1.0
@skyscanner/bpk-foundations-web: 9.0.0 => 9.1.0
bpk-mixins: 31.5.0 => 31.6.0
bpk-stylesheets: 7.1.45 => 7.2.0
@skyscanner/bpk-svgs: 14.3.8 => 14.4.0
- Deprecated all the old colour tokens from the old colour system in prepareation for the new colours. You will see warning in code mentioning these have been deprecated but further comms to swap to, to follow.
Breaking:
@skyscanner/bpk-foundations-common: 2.6.1 => 3.0.0
@skyscanner/bpk-foundations-android: 3.7.1 => 4.0.0
@skyscanner/bpk-foundations-ios: 2.7.1 => 3.0.0
@skyscanner/bpk-foundations-react-native: 1.6.1 => 2.0.0
@skyscanner/bpk-foundations-web: 8.5.1 => 9.0.0
- Renamed
TEXT_PRIMARY_ON_CONTRAST_DAY
toTEXT_PRIMARY_INVERSE_DAY
- Renamed
TEXT_PRIMARY_ON_CONTRAST_NIGHT
toTEXT_PRIMARY_INVERSE_NIGHT
- Removed
TEXT_PRIMARY_ON_CONTRAST_DAY
andTEXT_SECONDARY_ON_CONTRAST_NIGHT
- Added
TEXT_ON_LIGHT_DAY
,TEXT_ON_LIGHT_NIGHT
,TEXT_ON_DARK_DAY
andTEXT_ON_DARK_NIGHT
- Removed base colour tokens from foundations to only expose semantic tokens for use by consumers.
Fixed:
@skyscanner/bpk-foundations-common: 2.6.0 => 2.6.1
@skyscanner/bpk-foundations-android: 3.7.0 => 3.7.1
@skyscanner/bpk-foundations-ios: 2.7.0 => 2.7.1
@skyscanner/bpk-foundations-react-native: 1.6.0 => 1.6.1
@skyscanner/bpk-foundations-web: 8.5.0 => 8.5.1
- Map
NIGHT_GREY_20
to##1D1B20
. - Map
NIGHT_GREY_25
to#2C2C2E
. - Map
SURFACE_HIGHLIGHT_NIGHT
toNIGHT_GREY_25
Changed:
-
@skyscanner/bpk-foundations-web: 8.4.0 => 8.5.0
- Changed
$bpk-panel-border-color
token value
- Changed
-
bpk-mixins: 31.3.0 => 31.4.0
- Changed border colour in
bpk-panel
mixin
- Changed border colour in
Changed:
-
@skyscanner/bpk-foundations-web: 8.3.0 => 8.4.0
- Changed
$bpk-card-color
token value
- Changed
-
bpk-mixins: 31.2.0 => 31.3.0
- Changed text colour in
bpk-card
mixin - Removed text colour property in
bpk-blockquote
mixin. Text colour will be inherited from the base stylesheet. - Removed background colour property in
bpk-blockquote
mixin.
- Changed text colour in
Added
- bpk-mixins: 31.2.0 => 31.3.0
- The
strong
badge theme has been added, which aligns to our APP implementations and better meets the needs of users.
- The
Changed:
@skyscanner/bpk-foundations-android: 3.6.1 => 3.7.0
@skyscanner/bpk-foundations-common: 2.5.1 => 2.6.0
@skyscanner/bpk-foundations-ios: 2.6.1 => 2.7.0
@skyscanner/bpk-foundations-react-native: 1.5.1 => 1.6.0
- @skyscanner/bpk-foundations-web: 8.2.1 => 8.3.0
- Separated Marcomms colours to separate colour set with
Marcomms
appended to it, for strict guidence on when to be utilised.
bpk-mixins: 31.1.6 => 31.2.0
- Updated Badge mixins to use
bpk-caption
to use the caption styles.
Fixed
@skyscanner/bpk-svgs: 14.3.2 => 14.3.3
- center-location icon was wrongfully added as centre-location
@skyscanner/bpk-foundations-android: 3.6.0 => 3.6.1
@skyscanner/bpk-foundations-common: 2.5.0 => 2.5.1
@skyscanner/bpk-foundations-ios: 2.6.0 => 2.6.1
@skyscanner/bpk-foundations-react-native: 1.5.0 => 1.5.1
@skyscanner/bpk-foundations-web: 8.2.0 => 8.2.1
- Renamed
SCRIM
base colour toBLACK_ALPHA_70
which causes clash with semanticScrim
token at generation.
Added:
@skyscanner/bpk-foundations-android: 3.5.1 => 3.6.0
@skyscanner/bpk-foundations-common: 2.4.1 => 2.5.0
@skyscanner/bpk-foundations-ios: 2.5.1 => 2.6.0
@skyscanner/bpk-foundations-react-native: 1.4.1 => 1.5.0
@skyscanner/bpk-foundations-web: 8.1.1 => 8.2.0
- Added new alpha colours and scrim colour
- Updated
TEXT_DISABLED_DAY
&TEXT_DISABLED_NIGHT
colours to correct colours - Added text on contrast colours.
Fixed:
@skyscanner/bpk-foundations-common: 2.4.0 => 2.4.1
@skyscanner/bpk-foundations-android: 3.5.0 => 3.5.1
@skyscanner/bpk-foundations-ios: 2.5.0 => 2.5.1
@skyscanner/bpk-foundations-react-native: 1.4.0 => 1.4.1
@skyscanner/bpk-foundations-web: 8.1.0 => 8.1.1
- Exposed previously missing
NIGHT_GREY_25
.
Added:
@skyscanner/bpk-svgs: 14.2.0 => 14.3.0
- Updated account-circle icons 16px and 24px.
- Updated menu icons 16px and 24px.
- Updated search icons 16px and 24px.
- Updated face-id icon 24px.
- Updated fingerprint icon 24px.
- Added centre-location icons 16px and 24px.
- Added face-id icon 16px.
- Added fingerprint icon 16px.
@skyscanner/bpk-foundations-android: 3.4.0 => 3.5.0
@skyscanner/bpk-foundations-ios: 2.4.0 => 2.5.0
@skyscanner/bpk-foundations-react-native: 1.3.0 => 1.4.0
- Added new dynamic colours for using in apps for Light and Dark mode
Added:
@skyscanner/bpk-foundations-common: 2.3.0 => 2.4.0
@skyscanner/bpk-foundations-android: 3.3.0 => 3.4.0
@skyscanner/bpk-foundations-ios: 2.3.0 => 2.4.0
@skyscanner/bpk-foundations-react-native: 1.2.2 => 1.3.0
@skyscanner/bpk-foundations-web: 8.0.0 => 8.1.0
- Added new colour tokens in preparation for new colour updates. Currently these map to their equivelant old tokens. Except for
Eco Green
,Night Sky
,Night Yellow Fill
andNight Pink Fill
, as these are new colours and don't have an old palette mapping. - Added marcomms palette to colour set.
bpk-mixins: 31.1.1 => 31.1.2
bpk-stylesheets: 7.1.35 => 7.1.36
@skyscanner/bpk-svgs: 14.1.9 => 14.2.0
- Bumped
@skyscanner/bpk-foundations-web
dependency based on the above new version.
Fixed:
- bpk-mixins:
- Remove custom font weight from
bpk-button--link
.
- Remove custom font weight from
Added:
- bpk-mixins: 31.0.0 => 31.1.0
- Added new breakpoint mixins:
bpk-breakpoint-small-tablet
- Added new breakpoint mixins:
Breaking:
-
bpk-foundations-web: 7.0.0 => 8.0.0
- Updated breakpoint tokens. If you are using any of the following tokens, please ensure your component still looks good with the new breakpoints.
$bpk-breakpoint-mobile
,breakpointMobile
$bpk-breakpoint-tablet
,breakpointTablet
$bpk-breakpoint-desktop
,breakpointDesktop
$bpk-breakpoint-query-above-mobile
,breakpointQueryAboveMobile
$bpk-breakpoint-query-above-tablet
,breakpointQueryAboveTablet
$bpk-breakpoint-query-above-desktop
,breakpointQueryAboveDesktop
$bpk-breakpoint-query-mobile
,breakpointQueryMobile
$bpk-breakpoint-query-tablet
,breakpointQueryTablet
$bpk-breakpoint-query-tablet-only
,breakpointQueryTabletOnly
- Modal max width tokens are using breakpoint tokens under the hood and therefore the following tokens have also changed:
$bpk-modal-max-width
,modalMaxWidth
$bpk-modal-wide-max-width
,modalWideMaxWidth
- Updated breakpoint tokens. If you are using any of the following tokens, please ensure your component still looks good with the new breakpoints.
-
bpk-mixins: 30.0.0 => 31.0.0
- Updated breakpoint mixins. If you are using any of the following mixins, please ensure your component still looks good with the new breakpoints.
bpk-breakpoint-mobile
bpk-breakpoint-tablet
bpk-breakpoint-tablet-only
bpk-breakpoint-above-mobile
bpk-breakpoint-above-tablet
- Updated breakpoint mixins. If you are using any of the following mixins, please ensure your component still looks good with the new breakpoints.
Added:
-
bpk-foundations-web: 7.0.0 => 8.0.0
-
Added new breakpoint tokens:
$bpk-breakpoint-small-mobile
,breakpointSmallMobile
$bpk-breakpoint-small-tablet
,breakpointSmallTablet
$bpk-breakpoint-query-small-mobile
,breakpointQuerySmallMobile
$bpk-breakpoint-query-small-tablet
,breakpointQuerySmallTablet
$bpk-breakpoint-query-small-tablet-only
,breakpointQuerySmallTabletOnly
-
Added new breakpoint margin tokens that should be used as a white space on the left-and-right of the screen:
$bpk-breakpoint-small-mobile-margin
,breakpointSmallMobileMargin
$bpk-breakpoint-mobile-margin
,breakpointMobileMargin
$bpk-breakpoint-small-tablet-margin
,breakpointSmallTabletMargin
$bpk-breakpoint-tablet-margin
,breakpointTabletMargin
$bpk-breakpoint-desktop-margin
,breakpointDesktopMargin
-
-
bpk-mixins: 30.0.0 => 31.0.0
- Added new breakpoint mixins:
bpk-breakpoint-small-mobile
bpk-breakpoint-small-tablet-only
- Added new breakpoint mixins:
Breaking:
-
bpk-foundations-web: 6.2.0 => 7.0.0
- Changed list margin tokens:
- List item margins:
$bpk-list-item-margin-bottom
,listItemMarginBottom
:0
to0.25rem
- List margins:
$bpk-list-margin-bottom
,listMarginBottom
:0.75rem
to1rem
$bpk-list-margin-top
,listMarginTop
:0
to1rem
- List item margins:
- Changed list margin tokens:
-
bpk-mixins: 29.0.0 => 30.0.0
bpk-list-item
mixin - added bottom marginbpk-list--nested
mixin - added top and bottom paddingbpk-list
mixin - added top margin and changed bottom margin
Breaking:
- bpk-mixins: 28.3.0 => 29.0.0
- bpk-stylesheets: 7.1.30 => 7.1.31
- Removed differing
typography
styles that were applied when on mobile devices to keep the same style as when on desktop.
- Removed differing
Added:
- bpk-mixins:
- Added new
bpk-label-3
typography mixin.
- Added new
Added:
-
@skyscanner/bpk-foundations-web: 6.1.1 => 6.2.0
- Added tokens for the new
BpkButtonSecondaryOnDark
andBpkButtonLinkOnDark
buttons:BpkButtonSecondaryOnDark
:
- Background colour:
$bpk-button-secondary-on-dark-background-color
$bpk-button-secondary-on-dark-active-background-color
$bpk-button-secondary-on-dark-hover-background-color
$bpk-button-secondary-on-dark-disabled-background-color
- Background image:
$bpk-button-secondary-on-dark-background-image
$bpk-button-secondary-on-dark-active-background-image
$bpk-button-secondary-on-dark-hover-background-image
$bpk-button-secondary-on-dark-disabled-background-image
- Text colour:
$bpk-button-secondary-on-dark-color
$bpk-button-secondary-on-dark-active-color
$bpk-button-secondary-on-dark-hover-color
$bpk-button-secondary-on-dark-disabled-color
- Background colour:
BpkButtonLinkOnDark
:
- Text colour:
$bpk-button-link-on-dark-color
$bpk-button-link-on-dark-active-color
$bpk-button-link-on-dark-hover-color
$bpk-button-link-on-dark-disabled-color
- Text colour:
- Added tokens for the new
-
bpk-mixins: 28.1.1 => 28.2.0
- Added new mixins for the new
BpkButtonSecondaryOnDark
andBpkButtonLinkonDark
buttons:bpk-button--secondary-on-dark
,bpk-button--link-on-dark
- Added new mixins for the new
Fixed:
- bpk-mixins: 28.1.1 => 28.2.0
- Remove underline from
BpkButtonLink
in hover and active state inbpk-button--link
- Remove underline from
Added:
-
@skyscanner/bpk-foundations-commons: 2.2.1 => 2.3.0
- Label 3 style
-
@skyscanner/bpk-foundations-ios: 2.2.1 => 2.3.0
- Label 3 style
-
@skyscanner/bpk-foundations-android: 3.2.1 => 3.3.0
- Label 3 style
Added:
-
@skyscanner/bpk-foundations-web: 6.0.0 => 6.1.0
- Added tokens for the new
BpkButtonPrimaryOnDark
andBpkButtonPrimaryOnLight
buttons:- Background colour:
$bpk-button-{button-type}-background-color
$bpk-button-{button-type}-{button-state}-background-color
where button-type is one ofprimary-on-dark
,primary-on-light
and button-state is one ofactive
,disabled
,hover
- Background image:
$bpk-button-{button-type}-background-image
$bpk-button-{button-type}-{button-state}-background-image
where button-type is one ofprimary-on-dark
,primary-on-light
and button-state is one ofactive
,disabled
,hover
- Text colour:
$bpk-button-{button-type}-color
$bpk-button-{button-type}-{button-state}-color
where button-type is one ofprimary-on-dark
,primary-on-light
and button-state is one ofactive
,disabled
,hover
- Background colour:
- Added tokens for the new
-
bpk-mixins: 28.0.0 => 28.1.0
- Added new mixins for the new
BpkButtonPrimaryOnDark
andBpkButtonPrimaryOnLight
buttons:bpk-button--primary-on-dark
,bpk-button--primary-on-light
- Added new mixins for the new
Changed:
-
@skyscanner/bpk-foundations-web: 6.0.0 => 6.1.0
- Deprecated all button border color tokens:
$bpk-button-{button-type}-border-color
$bpk-button-{button-type}-hover-border-color
$bpk-button-{button-type}-active-border-color
where button-type is one ofsecondary
,destructive
. Buttons should no longer have borders - Deprecated all outline button tokens:
$bpk-button-outline-*
. Use one of the equivalent$bpk-button-primary-on-dark-*
or$bpk-button-primary-on-light-*
tokens instead
- Deprecated all button border color tokens:
-
bpk-mixins: 28.0.0 => 28.1.0
- Deprecated
bpk-button--outline
mixin. Use instead one ofbpk-button--primary-on-dark
,bpk-button--primary-on-light
mixins instead
- Deprecated
Fixed:
- bpk-mixins: 27.0.0 => 28.0.0
- Fixed padding in icon-only buttons
- Restored vertical padding as it was causing the text inside anchor buttons to be misaligned due to the minimum height property which was previously added
Breaking:
- bpk-mixins: 27.0.0 => 28.0.0
- Introduced vertical padding in
bpk-button--link
mixin. If applying this mixin to a button, it will increase in height so needs to be check it does not alter layout bpk-button--padded
mixin is deleted as link buttons come by default with padding
- Introduced vertical padding in
Breaking:
-
@skyscanner/bpk-foundations-web: 5.3.0 => 6.0.0
$bpk-button-border-radius
changed to.5rem
$bpk-button-large-line-height
andbuttonLargeLineHeight
which is used to align text and icons in buttons is changed to match the newheading-4
style of large buttons- Some button background and text colour tokens are changed. See below under colour changes for more details.
-
bpk-mixins: 26.1.1 => 27.0.0
bpk-button
:- added minimum height
36px
. This may cause some buttons to appear larger in height. - changed button radius from
.375rem
to.5rem
- removed borders and box shadows from all buttons
- changed background colour in hover state
- added minimum height
bpk-button--secondary
:- changed background colour in default, hover, and pressed mode
- changed text colour in default and hover state
bpk-button--destructive
:- changed background colour and text colour in default, hover, pressed mode
bpk-button--large
:- added minimum height
48px
. This may cause some buttons to appear larger in height. - changed radius from
.375rem
to.5rem
- L/R padding for large buttons was changed from
24px
to16px
. This will cause large buttons to appear smaller in width. - changed large buttons style to
heading-4
. This will cause the text to appear smaller.
- added minimum height
bpk-button--icon-only
:- changed radius of icon-only buttons from
50%
to.5rem
. This changes the shape of icon-only buttons from round to more square-shaped.
- changed radius of icon-only buttons from
Changed:
- @skyscanner/bpk-foundations-web: 5.3.0 => 6.0.0
- deprecated all button
box-shadow
tokens
- deprecated all button
Changed:
- @skyscanner/bpk-foundations-web: 5.2.0 => 5.3.0
-
The following Sass tokens are deprecated:
$bpk-text-{size}-font-size
,$bpk-text-{size}-font-weight
,$bpk-text-{size}-line-height
,$bpk-text-{size}-letter-spacing
, where size is one of:xs
,sm
,base
,lg
,xl
,xxl
,xxxl
,xxxxl
,xxxxxl
.$bpk-h-{size}-font-size
,$bpk-h-{size}-font-weight
,$bpk-h-{size}-line-height
, where size is one of:1
,2
,3
,4
,5
,6
.
To migrate, use the BpkText component or a backpack mixin instead. See below for an example.
/* Old */ .my-class { font-size: $bpk-text-xs-font-size; line-height: $bpk-text-xs-line-height; font-weight: $bpk-text-xs-font-weight; letter-spacing: $bpk-text-xs-letter-spacing; } /* New */ .my-class { @include bpk-caption; }
-
The following JS tokens are deprecated:
text{size}FontSize
,text{size}FontWeight
,text{size}LineHeight
,text{size}LetterSpacing
, where size is one of:Xs
,Sm
,Base
,Lg
,Xl
,Xxl
,Xxxl
,Xxxxl
,Xxxxxl
.h{size}FontSize
,h{size}FontWeight
,h{size}LineHeight
, where size is one of:1
,2
,3
,4
,5
,6
.
To migrate, use one of the equivalent tokens as follows:
text{size}FontSize
=>fontSize{size}
text{size}LineHeight
=>lineHeight{size}
text{size}FontWeight
=>fontWeightBook
where size is one of:
Xs
,Sm
,Base
,Lg
,Xl
,Xxl
,Xxxl
,Xxxxl
,Xxxxxl
.
-
Added:
@skyscanner/bpk-foundations-web: 5.1.1 => 5.2.0
- Added two new spacing sizes:
bpk-spacing-xxxl()
bpk-spacing-xxxxl()
Fixed:
-
@skyscanner/bpk-foundations-common: 2.2.0 => 2.2.1
- Add deprecation flag to old typography style tokens for apps
-
@skyscanner/bpk-foundations-ios: 2.2.0 => 2.2.1
- Add deprecation flag to old typography style tokens
-
@skyscanner/bpk-foundations-android: 3.2.0 => 3.2.1
- Add deprecation flag to old typography style tokens
Added:
-
@skyscanner/bpk-foundations-commons: 2.1.0 => 2.2.0
- Added new style tokens
- Updated line heights
-
@skyscanner/bpk-foundations-ios: 2.1.0 => 2.2.0
- Added new style tokens
- Updated line heights
-
@skyscanner/bpk-foundations-android: 3.1.1 => 3.2.0
- Added new style tokens
- Updated line heights
Fixed:
- @skyscanner/bpk-foundations-android: 3.1.1 => 3.2.0
- Remove unused xml token file to avoid confusion
Fixed:
- @skyscanner/bpk-foundations-android: 3.1.0 => 3.1.1
- Included originalTag where needed in xml version for tokens
Added:
- @skyscanner/bpk-foundations-android: 3.0.0 => 3.1.0
- Added missing raw tokens for text size, line height and letter spacing
- @skyscanner/bpk-foundations-ios: 2.0.0 => 2.1.0
- Added missing raw tokens for text size, line height and letter spacing
- @skyscanner/bpk-foundations-common: 2.0.0 => 2.1.0
- Added missing raw tokens for text size, line height and letter spacing
Breaking:
- @skyscanner/bpk-foundations-web: 4.4.0 => 5.0.0
- Updated
font-size
tokens to use the new typography sizes.font-size-xxl
,h-2-font-size
,text-xxl-font-size
has changed from1.875rem
to2rem
.font-size-xxxl
,text-xxxl-font-size
has changed from2.25rem
to2.5rem
.font-size-xxxxl
,h-1-font-size
,text-xxxxl-font-size
has changed from2.625rem
to3rem
.font-size-xxxxxl
,text-xxxxxl-font-size
has changed from3.75rem
to4rem
.
- Updated
line-height
tokens to use the new typography sizes.line-height-sm
,text-sm-line-height
has changed from1.125rem
to1.25rem
.line-height-base
,h-4-line-height
,text-base-line-height
has changed from1.25rem
to1.5rem
.line-height-lg
,text-lg-line-height
has changed from1.625rem
to1.75rem
.line-height-xl
,h-3-line-height
,text-xl-line-height
has changed from1.9375rem
to2rem
.line-height-xxl
,h-2-line-height
,text-xxl-line-height
has changed from2.4375rem
to2.5rem
.line-height-xxxl
,h-1-line-height
,text-xxxl-line-height
has changed from2.9375rem
to3rem
.line-height-xxxxl
,text-xxxxl-line-height
has changed from3.4375rem
to3.5rem
.line-height-xxxxxl
,text-xxxxxl-line-height
has changed from4.875rem
to4.5rem
.
- Updated
Added:
- bpk-foundations-web: 4.3.3 => 4.4.0
- added weight, line height, and letter spacing tokens that will be used to support the new typography system
Breaking:
-
@skyscanner/bpk-foundations-common:
- Font Sizes, weights and Line Heights have been updated to use the correct values
-
@skyscanner/bpk-foundations-ios:
- Font Sizes, weights and Line Heights have been updated to use the correct values
-
@skyscanner/bpk-foundations-android:
- Font Sizes, weights and Line Heights have been updated to use the correct values
Changed:
- @skyscanner/bpk-foundations-common:
- Typography related aliases
Patch:
- bpk-foundations-web:
- Exporting
spacing-v2
tokens for use in the docsite.
- Exporting
Patched:
- @skyscanner/bpk-foundations-web: 4.3.0 => 4.3.1
- Updated
CALENDAR_DAY_SPACING
to8px
to align with updated calendar sizes.
- Updated
Changed:
- @skyscanner/bpk-foundations-web: 4.2.0 => 4.3.0
- Changed
bpk-input-padding-x
token from1rem
to0.5rem
.
- Changed
Changed:
- @skyscanner/bpk-foundations-web: 4.1.1 => 4.2.0
- Changed
bpk-calendar-day-spacing
token to use the new spacing grid. - Changed
bpk-calendar-day-color
token colour.
- Changed
Fixed:
- @skyscanner/bpk-foundations-android: 2.0.0 => 2.0.1
- Updated
TEXT_SECONDARY_DARK_COLOR
toSKY_GRAY_TINT_04
- Updated
Fixed:
- @skyscanner/bpk-foundations-web: 4.1.0 => 4.1.1
- Changed
bpk-badge-padding-x
andbpk-badge-padding-y
tokens to use the new spacing grid.
- Changed
Changed:
- @skyscanner/bpk-foundations-ios: 1.1.0 => 1.2.0
- The
TEXT_SECONDARY_DARK_COLOR
token value is nowSKY_GRAY_TINT_04
.
- The
Changed:
- @skyscanner/bpk-foundations-web: 4.0.0 => 4.1.0
- The
$bpk-banner-alert-header-padding-x
and$bpk-banner-alert-header-padding-y
tokens are now deprecated. To migrate, use equivalent spacing values.
- The
Breaking:
- @skyscanner/bpk-foundations-android: 1.1.0 => 2.0.0
- Removed letter spacing tokens
Fixed:
- @skyscanner/bpk-svgs: 14.0.9 => 14.0.10
- Properly align self-service 16px icon.
Added:
- @skyscanner/bpk-svgs: 14.0.8 => 14.0.9
- New self-service icons 16px and 24px.
Breaking:
- @skyscanner/bpk-foundations-web: 3.0.0 => 4.0.0
- Changed
bpk-modal-content-padding
token to use the new spacing grid.
- Changed
Fixed:
- @skyscanner/bpk-svgs: 14.0.6 => 14.0.7
- Fix world small icons which weren't rendering correctly on iOS.
Breaking:
- @skyscanner/bpk-foundations-web: 2.1.1 => 3.0.0
- Changed
bpk-card-padding
token to use the new spacing grid.
- Changed
Changed:
- @skyscanner/bpk-foundations-web: 2.1.0 => 2.1.1
- The
bpk-textarea-min-height
token is now deprecated. To migrate, use an equivalent spacing value.
- The
Changed:
- @skyscanner/bpk-foundations-web 2.0.0 => 2.1.0
- Created new aliases that represent the height of the buttons
- Changed input tokens to use the new aliases
- Changed input tokens to use the new grid horizontally
Breaking:
- @skyscanner/bpk-foundations-web: 1.2.1 => 2.0.0
- Updated flare tokens to use the new grid.
Changed:
- @skyscanner/bpk-foundations-web: 1.2.0 => 1.2.1
- The
bpk-modal-header-padding
token is now deprecated. To migrate, use an equivalent spacing value.
- The
@skyscanner/bpk-foundations-web: 1.1.0 => 1.2.0 Added:
- Add breakpoint-query-above-desktop
Changed:
- The following rating tokens are now deprecated. To migrate, use an equivalent spacing value
bpk-rating-base-width
bpk-rating-base-height
bpk-rating-sm-width
bpk-rating-sm-height
bpk-rating-lg-width
bpk-rating-lg-height
Breaking:
- bpk-svgs: 12.7.3 => 14.0.0
- Updated small and xl spinners to use the new spacing compatible versions.
Added:
- @skyscanner/bpk-foundations-android: 1.0.0 => 1.1.0
- @skyscanner/bpk-foundations-ios: 1.0.0 => 1.1.0
- @skyscanner/bpk-foundations-react-native: 1.0.0 => 1.1.0
- @skyscanner/bpk-foundations-web: 1.0.0 => 1.1.0
- New
text-icon-spacing
token. This is the spacing that should be placed between icons and text.
- New
Changed:
- @skyscanner/bpk-foundations-web: 1.0.0 => 1.1.0
-
The following button tokens are now deprecated. To migrate, use an equivalent spacing value.
$button-padding-x
$button-padding-y
$button-padding-x-icon-only
$button-icon-border-radius
$button-icon-border-radius-lg
$button-large-padding-x
$button-large-padding-y
$button-large-padding-x-icon-only
-
The following select tokens are now deprecated. To migrate, use an equivalent spacing value.
$bpk-select-height
$bpk-select-padding-top
$bpk-select-padding-right
$bpk-select-padding-bottom
$bpk-select-padding-left
-
Fixed:
- @skyscanner/bpk-svgs: 12.7.2 => 12.7.3
- Fixed an issue with the world icons being mixed up.
Renamed packages to avoid confusion with what they are and their contents.
- @skyscanner/bpk-web => @skyscanner/bpk-foundations-web: 1.0.0
- @skyscanner/bpk-react-native => @skyscanner/bpk-foundations-rn: 1.0.0
- @skyscanner/bpk-ios => @skyscanner/bpk-foundations-ios: 1.0.0
- @skyscanner/bpk-android => @skyscanner/bpk-foundations-android: 1.0.0
Fixed:
- bpk-svgs: 12.7.0 => 12.7.1
- Updated to the latest assets as per old
bpk-svgs
- Updated to the latest assets as per old
Added:
- @skyscanner/bpk-svgs: 12.6.4 => 12.7.0
- Added missing files used for creating zip file when used in Backpack docs site.
Fixed:
- @skyscanner/bpk-web: 1.0.0 => 1.0.1
- Fixed an issue when generating tokens for the spacing functions.
Inital release of new foundation libraries:
- @skyscanner/bpk-android: 1.0.0
- @skyscanner/bpk-common: 1.0.0
- @skyscanner/bpk-ios: 1.0.0
- @skyscanner/bpk-react-native: 1.0.0
- @skyscanner/bpk-svgs: 12.6.3
- @skyscanner/bpk-web: 1.0.0