@skyscanner/bpk-foundations-web 24.2.0 → 24.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/bpk-foundations-web",
3
- "version": "24.2.0",
3
+ "version": "24.4.0",
4
4
  "description": "Common Backpack design tokens for colors, spacing, font, etc.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -17,8 +17,8 @@
17
17
  "tokens": "gulp"
18
18
  },
19
19
  "dependencies": {
20
- "@skyscanner/bpk-foundations-common": "^24.2.0",
20
+ "@skyscanner/bpk-foundations-common": "^24.4.0",
21
21
  "color": "^5.0.0"
22
22
  },
23
- "gitHead": "3df1c21f0b472adbf43229e661c0fa2ee7f2a32c"
23
+ "gitHead": "a84a5de1eda86825879abd7f7ff7fc43eefe599d"
24
24
  }
@@ -206,6 +206,8 @@ module.exports = {
206
206
  privateNavigationTabHoverNight: "rgb(209, 247, 255)",
207
207
  privateNavigationTabOutlineDay: "rgb(193, 199, 207)",
208
208
  privateNavigationTabOutlineNight: "rgb(255, 255, 255)",
209
+ privateNavigationTabOnDarkOutlineDay: "rgba(255, 255, 255, 0.2)",
210
+ privateNavigationTabOnDarkOutlineNight: "rgba(255, 255, 255, 0.2)",
209
211
  privateNavigationTabSelectedDay: "rgb(2, 77, 175)",
210
212
  privateNavigationTabSelectedNight: "rgb(5, 65, 132)",
211
213
  privateCardButtonContainedFillDay: "rgba(255, 255, 255, 0.8)",
@@ -381,7 +383,7 @@ module.exports = {
381
383
  lineHeightXxxl: "3rem",
382
384
  lineHeightXl: "2rem",
383
385
  fontSizeXl: "1.5rem",
384
- fontFamilyLarken: "'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif SC', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', sans-serif",
386
+ fontFamilyLarken: "'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC', sans-serif",
385
387
  fontSizeXxxxxl: "4rem",
386
388
  fontSizeXxxl: "2.5rem",
387
389
  lineHeightSm: "1.25rem",
@@ -397,7 +399,7 @@ module.exports = {
397
399
  letterSpacingHero: "-0.04em",
398
400
  fontSizeRoot: "100%",
399
401
  fontSize6Xl: "4.75rem",
400
- fontFamilyBase: "'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
402
+ fontFamilyBase: "'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
401
403
  fontWeightBold: "700",
402
404
  fontColorBase: "rgb(22, 22, 22)",
403
405
  lineHeightBaseTight: "1.25rem",
@@ -392,6 +392,10 @@ $bpk-private-navigation-tab-outline-day: rgb(193, 199, 207) !default;
392
392
  /// @group navigation-tab-colors
393
393
  $bpk-private-navigation-tab-outline-night: rgb(255, 255, 255) !default;
394
394
  /// @group navigation-tab-colors
395
+ $bpk-private-navigation-tab-on-dark-outline-day: rgba(255, 255, 255, 0.2) !default;
396
+ /// @group navigation-tab-colors
397
+ $bpk-private-navigation-tab-on-dark-outline-night: rgba(255, 255, 255, 0.2) !default;
398
+ /// @group navigation-tab-colors
395
399
  $bpk-private-navigation-tab-selected-day: rgb(2, 77, 175) !default;
396
400
  /// @group navigation-tab-colors
397
401
  $bpk-private-navigation-tab-selected-night: rgb(5, 65, 132) !default;
@@ -762,7 +766,7 @@ $bpk-line-height-xl: 2rem !default;
762
766
  /// @group typesettings
763
767
  $bpk-font-size-xl: 1.5rem !default;
764
768
  /// @group typesettings
765
- $bpk-font-family-larken: 'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif SC', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', sans-serif !default;
769
+ $bpk-font-family-larken: 'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC', sans-serif !default;
766
770
  /// @group typesettings
767
771
  $bpk-font-size-xxxxxl: 4rem !default;
768
772
  /// @group typesettings
@@ -794,7 +798,7 @@ $bpk-font-size-root: 100% !default;
794
798
  /// @group typesettings
795
799
  $bpk-font-size-6-xl: 4.75rem !default;
796
800
  /// @group typesettings
797
- $bpk-font-family-base: 'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
801
+ $bpk-font-family-base: 'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
798
802
  /// @group font-weights
799
803
  $bpk-font-weight-bold: 700 !default;
800
804
  /// @group text-colors
@@ -204,6 +204,8 @@ export declare const privateNavigationTabHoverDay = "rgb(21, 70, 121)" as const;
204
204
  export declare const privateNavigationTabHoverNight = "rgb(209, 247, 255)" as const;
205
205
  export declare const privateNavigationTabOutlineDay = "rgb(193, 199, 207)" as const;
206
206
  export declare const privateNavigationTabOutlineNight = "rgb(255, 255, 255)" as const;
207
+ export declare const privateNavigationTabOnDarkOutlineDay = "rgba(255, 255, 255, 0.2)" as const;
208
+ export declare const privateNavigationTabOnDarkOutlineNight = "rgba(255, 255, 255, 0.2)" as const;
207
209
  export declare const privateNavigationTabSelectedDay = "rgb(2, 77, 175)" as const;
208
210
  export declare const privateNavigationTabSelectedNight = "rgb(5, 65, 132)" as const;
209
211
  export declare const privateCardButtonContainedFillDay = "rgba(255, 255, 255, 0.8)" as const;
@@ -379,7 +381,7 @@ export declare const lineHeightXxxxxl = "4rem" as const;
379
381
  export declare const lineHeightXxxl = "3rem" as const;
380
382
  export declare const lineHeightXl = "2rem" as const;
381
383
  export declare const fontSizeXl = "1.5rem" as const;
382
- export declare const fontFamilyLarken = "'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif SC', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', sans-serif" as const;
384
+ export declare const fontFamilyLarken = "'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC', sans-serif" as const;
383
385
  export declare const fontSizeXxxxxl = "4rem" as const;
384
386
  export declare const fontSizeXxxl = "2.5rem" as const;
385
387
  export declare const lineHeightSm = "1.25rem" as const;
@@ -395,7 +397,7 @@ export declare const letterSpacingDisplay = "-0.05em" as const;
395
397
  export declare const letterSpacingHero = "-0.04em" as const;
396
398
  export declare const fontSizeRoot = "100%" as const;
397
399
  export declare const fontSize6Xl = "4.75rem" as const;
398
- export declare const fontFamilyBase = "'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif" as const;
400
+ export declare const fontFamilyBase = "'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif" as const;
399
401
  export declare const fontWeightBold = "700" as const;
400
402
  export declare const fontColorBase = "rgb(22, 22, 22)" as const;
401
403
  export declare const lineHeightBaseTight = "1.25rem" as const;
@@ -726,6 +728,8 @@ privateNavigationTabHoverDay,
726
728
  privateNavigationTabHoverNight,
727
729
  privateNavigationTabOutlineDay,
728
730
  privateNavigationTabOutlineNight,
731
+ privateNavigationTabOnDarkOutlineDay,
732
+ privateNavigationTabOnDarkOutlineNight,
729
733
  privateNavigationTabSelectedDay,
730
734
  privateNavigationTabSelectedNight,
731
735
  } as const;
@@ -204,6 +204,8 @@ export const privateNavigationTabHoverDay = "rgb(21, 70, 121)";
204
204
  export const privateNavigationTabHoverNight = "rgb(209, 247, 255)";
205
205
  export const privateNavigationTabOutlineDay = "rgb(193, 199, 207)";
206
206
  export const privateNavigationTabOutlineNight = "rgb(255, 255, 255)";
207
+ export const privateNavigationTabOnDarkOutlineDay = "rgba(255, 255, 255, 0.2)";
208
+ export const privateNavigationTabOnDarkOutlineNight = "rgba(255, 255, 255, 0.2)";
207
209
  export const privateNavigationTabSelectedDay = "rgb(2, 77, 175)";
208
210
  export const privateNavigationTabSelectedNight = "rgb(5, 65, 132)";
209
211
  export const privateCardButtonContainedFillDay = "rgba(255, 255, 255, 0.8)";
@@ -379,7 +381,7 @@ export const lineHeightXxxxxl = "4rem";
379
381
  export const lineHeightXxxl = "3rem";
380
382
  export const lineHeightXl = "2rem";
381
383
  export const fontSizeXl = "1.5rem";
382
- export const fontFamilyLarken = "'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif SC', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', sans-serif";
384
+ export const fontFamilyLarken = "'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC', sans-serif";
383
385
  export const fontSizeXxxxxl = "4rem";
384
386
  export const fontSizeXxxl = "2.5rem";
385
387
  export const lineHeightSm = "1.25rem";
@@ -395,7 +397,7 @@ export const letterSpacingDisplay = "-0.05em";
395
397
  export const letterSpacingHero = "-0.04em";
396
398
  export const fontSizeRoot = "100%";
397
399
  export const fontSize6Xl = "4.75rem";
398
- export const fontFamilyBase = "'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
400
+ export const fontFamilyBase = "'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
399
401
  export const fontWeightBold = "700";
400
402
  export const fontColorBase = "rgb(22, 22, 22)";
401
403
  export const lineHeightBaseTight = "1.25rem";
@@ -726,6 +728,8 @@ privateNavigationTabHoverDay,
726
728
  privateNavigationTabHoverNight,
727
729
  privateNavigationTabOutlineDay,
728
730
  privateNavigationTabOutlineNight,
731
+ privateNavigationTabOnDarkOutlineDay,
732
+ privateNavigationTabOnDarkOutlineNight,
729
733
  privateNavigationTabSelectedDay,
730
734
  privateNavigationTabSelectedNight,
731
735
  };
@@ -1798,6 +1798,20 @@
1798
1798
  "originalValue": "{!WHITE}",
1799
1799
  "name": "PRIVATE_NAVIGATION_TAB_OUTLINE_NIGHT"
1800
1800
  },
1801
+ "PRIVATE_NAVIGATION_TAB_ON_DARK_OUTLINE_DAY": {
1802
+ "type": "color",
1803
+ "category": "navigation-tab-colors",
1804
+ "value": "rgba(255, 255, 255, 0.2)",
1805
+ "originalValue": "{!WHITE_ALPHA_20}",
1806
+ "name": "PRIVATE_NAVIGATION_TAB_ON_DARK_OUTLINE_DAY"
1807
+ },
1808
+ "PRIVATE_NAVIGATION_TAB_ON_DARK_OUTLINE_NIGHT": {
1809
+ "type": "color",
1810
+ "category": "navigation-tab-colors",
1811
+ "value": "rgba(255, 255, 255, 0.2)",
1812
+ "originalValue": "{!WHITE_ALPHA_20}",
1813
+ "name": "PRIVATE_NAVIGATION_TAB_ON_DARK_OUTLINE_NIGHT"
1814
+ },
1801
1815
  "PRIVATE_NAVIGATION_TAB_SELECTED_DAY": {
1802
1816
  "type": "color",
1803
1817
  "category": "navigation-tab-colors",
@@ -3160,10 +3174,10 @@
3160
3174
  "name": "FONT_SIZE_XL"
3161
3175
  },
3162
3176
  "FONT_FAMILY_LARKEN": {
3163
- "value": "'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif SC', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', sans-serif",
3177
+ "value": "'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC', sans-serif",
3164
3178
  "type": "font",
3165
3179
  "category": "typesettings",
3166
- "originalValue": "'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif SC', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', sans-serif",
3180
+ "originalValue": "'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC', sans-serif",
3167
3181
  "name": "FONT_FAMILY_LARKEN"
3168
3182
  },
3169
3183
  "FONT_SIZE_XXXXXL": {
@@ -3272,10 +3286,10 @@
3272
3286
  "name": "FONT_SIZE_6XL"
3273
3287
  },
3274
3288
  "FONT_FAMILY_BASE": {
3275
- "value": "'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
3289
+ "value": "'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
3276
3290
  "type": "font",
3277
3291
  "category": "typesettings",
3278
- "originalValue": "'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
3292
+ "originalValue": "'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
3279
3293
  "name": "FONT_FAMILY_BASE"
3280
3294
  },
3281
3295
  "FONT_WEIGHT_BOLD": {
package/tokens/base.scss CHANGED
@@ -392,6 +392,10 @@ $bpk-private-navigation-tab-outline-day: rgb(193, 199, 207);
392
392
  /// @group navigation-tab-colors
393
393
  $bpk-private-navigation-tab-outline-night: rgb(255, 255, 255);
394
394
  /// @group navigation-tab-colors
395
+ $bpk-private-navigation-tab-on-dark-outline-day: rgba(255, 255, 255, 0.2);
396
+ /// @group navigation-tab-colors
397
+ $bpk-private-navigation-tab-on-dark-outline-night: rgba(255, 255, 255, 0.2);
398
+ /// @group navigation-tab-colors
395
399
  $bpk-private-navigation-tab-selected-day: rgb(2, 77, 175);
396
400
  /// @group navigation-tab-colors
397
401
  $bpk-private-navigation-tab-selected-night: rgb(5, 65, 132);
@@ -762,7 +766,7 @@ $bpk-line-height-xl: 2rem;
762
766
  /// @group typesettings
763
767
  $bpk-font-size-xl: 1.5rem;
764
768
  /// @group typesettings
765
- $bpk-font-family-larken: 'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif SC', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', sans-serif;
769
+ $bpk-font-family-larken: 'Larken', 'Noto Sans Arabic', 'Noto Serif Hebrew', 'Noto Serif', 'Noto Serif Devanagari', 'Noto Serif Thai', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC', sans-serif;
766
770
  /// @group typesettings
767
771
  $bpk-font-size-xxxxxl: 4rem;
768
772
  /// @group typesettings
@@ -794,7 +798,7 @@ $bpk-font-size-root: 100%;
794
798
  /// @group typesettings
795
799
  $bpk-font-size-6-xl: 4.75rem;
796
800
  /// @group typesettings
797
- $bpk-font-family-base: 'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
801
+ $bpk-font-family-base: 'Skyscanner Relative', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
798
802
  /// @group font-weights
799
803
  $bpk-font-weight-bold: 700;
800
804
  /// @group text-colors