@skyscanner/backpack-web 42.19.0-dev-v26077194732.1 → 42.19.1

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.
Files changed (10) hide show
  1. package/bpk-component-checkbox-card/src/BpkCheckboxCard.js +1 -3
  2. package/bpk-component-checkbox-card/src/BpkCheckboxCard.module.css +1 -1
  3. package/bpk-component-checkbox-card/src/BpkCheckboxCardRoot.js +1 -3
  4. package/bpk-component-icon/scripts/generate-figma-connect.js +2 -2
  5. package/bpk-stylesheets/base.css +0 -361
  6. package/bpk-stylesheets/index.js +0 -3
  7. package/package.json +1 -1
  8. package/bpk-stylesheets/primitives.css +0 -40
  9. package/bpk-stylesheets/theme-backpack-dark.css +0 -189
  10. package/bpk-stylesheets/theme-backpack-light.css +0 -189
package/bpk-component-checkbox-card/src/BpkCheckboxCard.js CHANGED
@@ -17,7 +17,6 @@
17
17
  */
18
18
 
19
19
  import { CheckboxHiddenInput } from '@ark-ui/react';
20
- import { withButtonAlignment } from "../../bpk-component-icon";
21
20
  import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
22
21
  import { BpkSpinner, SPINNER_TYPES } from "../../bpk-component-spinner";
23
22
  import BpkText, { TEXT_COLORS, TEXT_STYLES } from "../../bpk-component-text";
@@ -27,7 +26,6 @@ import { useCheckboxCardContext } from "./CheckboxCardContext";
27
26
  import STYLES from "./BpkCheckboxCard.module.css";
28
27
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
29
28
  const getClassName = cssModules(STYLES);
30
- const AlignedTickCircleIcon = withButtonAlignment(TickCircleIcon);
31
29
 
32
30
  // ─── HiddenInput ─────────────────────────────────────────────────────────────
33
31
 
@@ -169,7 +167,7 @@ function Indicator(_props = {}) {
169
167
  return /*#__PURE__*/_jsx("div", {
170
168
  className: getClassName('bpk-checkbox-card-indicator'),
171
169
  "aria-hidden": true,
172
- children: /*#__PURE__*/_jsx(AlignedTickCircleIcon, {})
170
+ children: /*#__PURE__*/_jsx(TickCircleIcon, {})
173
171
  });
174
172
  }
175
173
 
package/bpk-component-checkbox-card/src/BpkCheckboxCard.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-checkbox-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-border-color: transparent;--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-border-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-checked-border-color: rgb(5, 32, 60);--bpk-checkbox-card-indicator-background-color: rgb(5, 32, 60)}.bpk-checkbox-card-root--cars.bpk-checkbox-card-root--cars--radius-rounded{border-radius:1.5rem}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:0 0 0 1px #05203c}.bpk-checkbox-card-root--on-canvas-contrast{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-background-color: rgb(239, 243, 248)}.bpk-checkbox-card-root--on-surface-contrast{--bpk-checkbox-card-default-background-color: rgba(255, 255, 255, 0.1);--bpk-checkbox-card-default-text-color: rgb(255, 255, 255);--bpk-checkbox-card-secondary-text-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(0, 98, 227);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: transparent;--bpk-checkbox-card-disabled-border-color: transparent}.bpk-checkbox-card-content{width:100%;padding:.5rem}.bpk-checkbox-card-label{display:-webkit-box;width:100%;color:inherit;text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-label-line-clamp, 2);line-clamp:var(--bpk-label-line-clamp, 2)}.bpk-checkbox-card-label>*{text-align:inherit}.bpk-checkbox-card-description{display:-webkit-box;width:100%;color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113));text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-description-line-clamp, 3);line-clamp:var(--bpk-description-line-clamp, 3);margin:0}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-description{color:inherit}.bpk-checkbox-card-root--cars[data-state=checked] .bpk-checkbox-card-description{color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113))}.bpk-checkbox-card-description>*{text-align:inherit}.bpk-checkbox-card-price{display:flex;align-items:center;gap:.25rem}.bpk-checkbox-card-indicator{position:absolute;top:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;inset-inline-end:.5rem;pointer-events:none}.bpk-checkbox-card-indicator svg{width:100%;height:100%;fill:var(--bpk-checkbox-card-indicator-background-color, rgb(0, 98, 227))}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-indicator{display:block}.bpk-checkbox-card-root--cars .bpk-checkbox-card-indicator{width:1rem;height:1rem}
18
+ .bpk-checkbox-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{transition:background-color 200ms ease-in-out,box-shadow 200ms ease-in-out,color 200ms ease-in-out;border:none;box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-border-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-checked-border-color: rgb(5, 32, 60);--bpk-checkbox-card-indicator-background-color: rgb(5, 32, 60)}.bpk-checkbox-card-root--cars.bpk-checkbox-card-root--cars--radius-rounded{border-radius:1.5rem}.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars[data-state=checked]{border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){transition:none;box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars[data-disabled]:not([data-loading]){box-shadow:none}.bpk-checkbox-card-root--cars:has(:focus-visible){outline:none;outline-offset:0}@media(hover: hover)and (pointer: fine){.bpk-checkbox-card-root--cars:has(:focus-visible){box-shadow:inset 0 0 0 2px #0062e3}}.bpk-checkbox-card-root--on-canvas-contrast{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-background-color: rgb(239, 243, 248)}.bpk-checkbox-card-root--on-surface-contrast{--bpk-checkbox-card-default-background-color: rgba(255, 255, 255, 0.1);--bpk-checkbox-card-default-text-color: rgb(255, 255, 255);--bpk-checkbox-card-secondary-text-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(0, 98, 227);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: transparent;--bpk-checkbox-card-disabled-border-color: transparent}.bpk-checkbox-card-content{width:100%;padding:.5rem}.bpk-checkbox-card-label{display:-webkit-box;width:100%;color:inherit;text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-label-line-clamp, 2);line-clamp:var(--bpk-label-line-clamp, 2)}.bpk-checkbox-card-label>*{text-align:inherit}.bpk-checkbox-card-description{display:-webkit-box;width:100%;color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113));text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-description-line-clamp, 3);line-clamp:var(--bpk-description-line-clamp, 3);margin:0}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-description{color:inherit}.bpk-checkbox-card-root--cars[data-state=checked] .bpk-checkbox-card-description{color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113))}.bpk-checkbox-card-description>*{text-align:inherit}.bpk-checkbox-card-price{display:flex;align-items:center;gap:.25rem}.bpk-checkbox-card-indicator{position:absolute;top:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;inset-inline-end:.5rem;pointer-events:none}.bpk-checkbox-card-indicator svg{width:100%;height:100%;fill:var(--bpk-checkbox-card-indicator-background-color, rgb(0, 98, 227))}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-indicator{display:block}.bpk-checkbox-card-root--cars .bpk-checkbox-card-indicator{width:1rem;height:1rem}
package/bpk-component-checkbox-card/src/BpkCheckboxCardRoot.js CHANGED
@@ -18,7 +18,6 @@
18
18
 
19
19
  import { useMemo } from 'react';
20
20
  import { CheckboxRoot } from '@ark-ui/react';
21
- import { withButtonAlignment } from "../../bpk-component-icon";
22
21
  import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
23
22
  import { cssModules } from "../../bpk-react-utils";
24
23
  import { CheckboxCardContext } from "./CheckboxCardContext";
@@ -26,7 +25,6 @@ import { CHECKBOX_CARD_VARIANTS, CHECKBOX_CARD_RADIUS } from "./common-types";
26
25
  import STYLES from "./BpkCheckboxCard.module.css";
27
26
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
28
27
  const getClassName = cssModules(STYLES);
29
- const AlignedTickCircleIcon = withButtonAlignment(TickCircleIcon);
30
28
  /**
31
29
  * BpkCheckboxCard.Root - Root container for checkbox card compound component.
32
30
  *
@@ -93,7 +91,7 @@ export function Root({
93
91
  children: [variant === CHECKBOX_CARD_VARIANTS.cars && /*#__PURE__*/_jsx("div", {
94
92
  className: getClassName('bpk-checkbox-card-indicator'),
95
93
  "aria-hidden": true,
96
- children: /*#__PURE__*/_jsx(AlignedTickCircleIcon, {})
94
+ children: /*#__PURE__*/_jsx(TickCircleIcon, {})
97
95
  }), children]
98
96
  })
99
97
  })
package/bpk-component-icon/scripts/generate-figma-connect.js CHANGED
@@ -26,10 +26,10 @@
26
26
  * a single .figma.tsx file that maps every icon to its Figma component.
27
27
  *
28
28
  * Usage:
29
- * FIGMA_ACCESS_TOKEN=<token> node packages/bpk-component-icon/scripts/generate-figma-connect.js
29
+ * FIGMA_ACCESS_TOKEN=<token> node packages/backpack-web/src/bpk-component-icon/scripts/generate-figma-connect.js
30
30
  *
31
31
  * The generated file is written to:
32
- * packages/bpk-component-icon/BpkIcon.figma.tsx
32
+ * packages/backpack-web/src/bpk-component-icon/BpkIcon.figma.tsx
33
33
  */
34
34
  const fs = require('fs');
35
35
  const path = require('path');
package/bpk-stylesheets/base.css CHANGED
@@ -17,364 +17,3 @@
17
17
  * limitations under the License.
18
18
  *
19
19
  *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:var(--bpk-base-font-stack, "Skyscanner Relative", -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible,button:focus-visible,[type=button]:focus-visible,[type=reset]:focus-visible,[type=submit]:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
20
- :root{
21
- --bpk-radius-none:0;
22
- --bpk-radius-full:6.25rem;
23
- --bpk-radius-lg:1.5rem;
24
- --bpk-radius-md:0.75rem;
25
- --bpk-radius-nav-tabs:1.125rem;
26
- --bpk-radius-sm:0.5rem;
27
- --bpk-radius-xs:0.25rem;
28
- --bpk-spacing-base:1rem;
29
- --bpk-spacing-lg:1.5rem;
30
- --bpk-spacing-md:0.5rem;
31
- --bpk-spacing-none:0;
32
- --bpk-spacing-sm:0.25rem;
33
- --bpk-spacing-xl:2rem;
34
- --bpk-spacing-xs:0.125rem;
35
- --bpk-spacing-xxl:2.5rem;
36
- --bpk-spacing-xxs:0.0625rem;
37
- --bpk-spacing-xxxl:4rem;
38
- --bpk-spacing-xxxxl:6rem;
39
- }
40
-
41
- :root{
42
- --bpk-canvas-contrast:#eff3f8;
43
- --bpk-canvas-default:#ffffff;
44
- --bpk-private-badge-colour-bg-default:#eff3f8;
45
- --bpk-private-badge-colour-bg-inverse:#ffffff;
46
- --bpk-private-badge-colour-bg-outline:rgba(255, 255, 255, 0);
47
- --bpk-private-badge-colour-bg-subtle:#eff3f8;
48
- --bpk-private-badge-colour-stroke-outline:#ffffff;
49
- --bpk-private-badge-dimension-padding-horizontal-default:0.5rem;
50
- --bpk-private-badge-dimension-padding-horizontal-subtle:0.5rem;
51
- --bpk-private-badge-typography-tmp-badge-label:0.875rem;
52
- --bpk-private-badge-typography-tmp-badge-line-height:0;
53
- --bpk-private-button-colour-bg-destructive:#e0e4e9;
54
- --bpk-private-button-colour-bg-destructive-pressed:#e70866;
55
- --bpk-private-button-colour-bg-disabled:#e0e4e9;
56
- --bpk-private-button-colour-bg-feature-pressed:#024daf;
57
- --bpk-private-button-colour-bg-featured:#0062e3;
58
- --bpk-private-button-colour-bg-footer:rgba(255, 255, 255, 0);
59
- --bpk-private-button-colour-bg-footer-pressed:rgba(255, 255, 255, 0);
60
- --bpk-private-button-colour-bg-primary:#05203c;
61
- --bpk-private-button-colour-bg-primary-on-dark:#ffffff;
62
- --bpk-private-button-colour-bg-primary-on-dark-pressed:#c1c7cf;
63
- --bpk-private-button-colour-bg-primary-on-light:#ffffff;
64
- --bpk-private-button-colour-bg-primary-on-light-pressed:#154679;
65
- --bpk-private-button-colour-bg-secondary:#e0e4e9;
66
- --bpk-private-button-colour-bg-secondary-pressed:#c1c7cf;
67
- --bpk-private-button-colour-bg-secondary-on-contrast:#e0e4e9;
68
- --bpk-private-button-colour-bg-secondary-on-contrast-pressed:#c1c7cf;
69
- --bpk-private-button-colour-bg-secondary-on-dark:rgba(255, 255, 255, 0.1);
70
- --bpk-private-button-colour-bg-secondary-on-dark-disabled:#0b121d;
71
- --bpk-private-button-colour-bg-secondary-on-dark-pressed:#04182d;
72
- --bpk-private-button-colour-text-disruptive:#e70866;
73
- --bpk-private-button-colour-text-feature:#ffffff;
74
- --bpk-private-button-colour-text-footer:rgba(255, 255, 255, 0);
75
- --bpk-private-button-colour-text-link-on-dark:#ffffff;
76
- --bpk-private-button-colour-text-secondary:#161616;
77
- --bpk-private-button-dimension-radius:0.5rem;
78
- --bpk-private-button-dimension-min-height-default:2.25rem;
79
- --bpk-private-button-dimension-min-height-large:3rem;
80
- --bpk-private-button-dimension-min-weight-large:3rem;
81
- --bpk-private-button-dimension-padding-horizontal-default:1rem;
82
- --bpk-private-button-dimension-padding-horizontal-large:1rem;
83
- --bpk-private-button-typography-tmp-default-label:1rem;
84
- --bpk-private-card-button-contained-fill:rgba(255, 255, 255, 0.8);
85
- --bpk-private-carousel-trigger-bg-default:rgba(255, 255, 255, 0.5);
86
- --bpk-private-carousel-trigger-bg-default-hover:rgba(255, 255, 255, 0.8);
87
- --bpk-private-chip-group-filter-colour-bg-icon-hover-on-image:#eff3f8;
88
- --bpk-private-chip-group-filter-colour-bg-icon-off-on-image:#ffffff;
89
- --bpk-private-chip-group-filter-colour-bg-icon-on-default:#05203c;
90
- --bpk-private-chip-group-filter-colour-bg-icon-on-on-dark:#ffffff;
91
- --bpk-private-chip-group-filter-colour-bg-icon-on-on-image:#05203c;
92
- --bpk-private-chip-group-filter-colour-stroke-icon-hover-default:#05203c;
93
- --bpk-private-chip-group-filter-colour-stroke-icon-hover-on-dark:#ffffff;
94
- --bpk-private-chip-group-filter-colour-stroke-icon-off-default:#c1c7cf;
95
- --bpk-private-chip-group-filter-colour-stroke-icon-off-on-dark:rgba(255, 255, 255, 0.5);
96
- --bpk-private-chip-group-filter-dimensions-min-height:2.25rem;
97
- --bpk-private-chip-colour-bg-default-dismissible-hover:#05203c;
98
- --bpk-private-chip-colour-bg-default-on:#05203c;
99
- --bpk-private-chip-colour-bg-disabled:#e0e4e9;
100
- --bpk-private-chip-colour-bg-on-contrast-hover:#ffffff;
101
- --bpk-private-chip-colour-bg-on-contrast-on:#05203c;
102
- --bpk-private-chip-colour-bg-on-dark-dismissible-hover:#ffffff;
103
- --bpk-private-chip-colour-bg-on-dark-hover:#ffffff;
104
- --bpk-private-chip-colour-bg-on-dark-off:rgba(255, 255, 255, 0);
105
- --bpk-private-chip-colour-bg-on-dark-on:#ffffff;
106
- --bpk-private-chip-colour-bg-on-image-dismissible-hover:#05203c;
107
- --bpk-private-chip-colour-bg-on-image-on:#eff3f8;
108
- --bpk-private-chip-colour-border-default-dismissible-hover:rgba(255, 255, 255, 0);
109
- --bpk-private-chip-colour-border-default-hover:#05203c;
110
- --bpk-private-chip-colour-border-default-off:#c1c7cf;
111
- --bpk-private-chip-colour-border-on-contrast-off:#ffffff;
112
- --bpk-private-chip-colour-border-on-contrast-on:#05203c;
113
- --bpk-private-chip-colour-border-on-dark-disimissible-hover:#ffffff;
114
- --bpk-private-chip-colour-border-on-dark-hover:#ffffff;
115
- --bpk-private-chip-colour-border-on-dark-off:rgba(255, 255, 255, 0.5);
116
- --bpk-private-chip-colour-stroke-off-on-canvas-contrast-new:rgba(255, 255, 255, 0);
117
- --bpk-private-chip-colour-text-default-dismissible-hover:#ffffff;
118
- --bpk-private-chip-colour-text-dismissible-on-icon:rgba(255, 255, 255, 0.5);
119
- --bpk-private-chip-colour-text-on:#ffffff;
120
- --bpk-private-chip-colour-text-on-image:#ffffff;
121
- --bpk-private-chip-colour-text-on-image-dismissible-icon:#626971;
122
- --bpk-private-chip-colour-text-on-dark:#161616;
123
- --bpk-private-chip-colour-text-on-dark-dismisisble-hover:#161616;
124
- --bpk-private-chip-colour-text-on-dark-dismisisble-icon:#626971;
125
- --bpk-private-chip-dimension-min-height-width:2rem;
126
- --bpk-private-chip-dimension-radius:0.5rem;
127
- --bpk-private-date-selector-cheapest-month-highlight:#154679;
128
- --bpk-private-date-selector-flexible-date-card:#eff3f8;
129
- --bpk-private-dimension-padding-veritcal:0;
130
- --bpk-private-info-banner-default:#eff3f8;
131
- --bpk-private-info-banner-on-contrast:#ffffff;
132
- --bpk-private-map-cluster-pin:#05203c;
133
- --bpk-private-map-cluster-pin-previous-selection:#94c3ff;
134
- --bpk-private-map-marker-viewed:rgba(255, 255, 255, 0.8);
135
- --bpk-private-map-poi-pin:#8e47ba;
136
- --bpk-private-map-previous-selection:#cfe4ff;
137
- --bpk-private-navigation-tabs-hover:#154679;
138
- --bpk-private-navigation-tabs-outline:rgba(255, 255, 255, 0.2);
139
- --bpk-private-navigation-tabs-selected:#024daf;
140
- --bpk-private-rating-bar-default:#e0e4e9;
141
- --bpk-private-rating-bar-on-contrast:#ffffff;
142
- --bpk-private-segmented-control-canvas-default:#eff3f8;
143
- --bpk-private-segmented-control-surface-contrast:rgba(255, 255, 255, 0.1);
144
- --bpk-private-segmented-control-surface-contrast-on:#024daf;
145
- --bpk-private-shadow-large-blur:0.875rem;
146
- --bpk-private-shadow-large-color:rgba(22, 22, 22, 0.25);
147
- --bpk-private-shadow-large-position-x:0;
148
- --bpk-private-shadow-large-position-y:0.25rem;
149
- --bpk-private-shadow-large-spread:0;
150
- --bpk-private-shadow-small-blur:0.1875rem;
151
- --bpk-private-shadow-small-color:rgba(22, 22, 22, 0.25);
152
- --bpk-private-shadow-small-position-x:0;
153
- --bpk-private-shadow-small-position-y:0.0625rem;
154
- --bpk-private-shadow-small-spread:0;
155
- --bpk-private-shadow-xl-blur:3.125rem;
156
- --bpk-private-shadow-xl-color:rgba(22, 22, 22, 0.25);
157
- --bpk-private-shadow-xl-position-x:0;
158
- --bpk-private-shadow-xl-position-y:0.75rem;
159
- --bpk-private-shadow-xl-spread:0;
160
- --bpk-private-skeleton-on-dark:rgba(255, 255, 255, 0.1);
161
- --bpk-private-speech-bubble-colour-bg-contrast:#eff3f8;
162
- --bpk-private-speech-bubble-colour-bg-default:#ffffff;
163
- --bpk-private-trip-advisor:#00aa6c;
164
- --bpk-core-accent:#0062e3;
165
- --bpk-core-eco:#0fa1a9;
166
- --bpk-core-primary:#05203c;
167
- --bpk-other-line:#c1c7cf;
168
- --bpk-other-line-on-dark:rgba(255, 255, 255, 0.5);
169
- --bpk-other-overlay:rgba(0, 0, 0, 0.2);
170
- --bpk-other-scrim:rgba(0, 0, 0, 0.7);
171
- --bpk-other-shadow:rgba(22, 22, 22, 0.25);
172
- --bpk-status-danger-fill:#ffe9f9;
173
- --bpk-status-danger-spot:#e70866;
174
- --bpk-status-success-fill:#d4fff2;
175
- --bpk-status-success-spot:#0c838a;
176
- --bpk-status-warning-fill:#fff7cf;
177
- --bpk-status-warning-spot:#f55d42;
178
- --bpk-surface-contrast:#05203c;
179
- --bpk-surface-default:#ffffff;
180
- --bpk-surface-elevated:#ffffff;
181
- --bpk-surface-hero:#0062e3;
182
- --bpk-surface-highlight:#e0e4e9;
183
- --bpk-surface-low-contrast:#f7f9fb;
184
- --bpk-surface-subtle:#e3f0ff;
185
- --bpk-surface-tint:rgba(255, 255, 255, 0.1);
186
- --bpk-surface-promo:#0062e3;
187
- --bpk-text-disabled:rgba(0, 0, 0, 0.2);
188
- --bpk-text-disabled-on-dark:rgba(255, 255, 255, 0.5);
189
- --bpk-text-error:#e70866;
190
- --bpk-text-inverse:#ffffff;
191
- --bpk-text-on-dark:#ffffff;
192
- --bpk-text-on-light:#161616;
193
- --bpk-text-primary:#161616;
194
- --bpk-text-secondary:#626971;
195
- --bpk-text-success:#0c838a;
196
- --bpk-text-deprecated-link:#0062e3;
197
- --bpk-text-hero:#0062e3;
198
- --bpk-title:true;
199
- --bpk-typography-family-sans-serif:'Skyscanner Relative';
200
- --bpk-typography-family-serif:Larken;
201
- --bpk-typography-kerning-default:0;
202
- --bpk-typography-kerning-loose:0;
203
- --bpk-typography-kerning-tight:0;
204
- --bpk-typography-style-body:400;
205
- --bpk-typography-style-headline:700;
206
- --bpk-typography-style-hero:900;
207
- --bpk-typography-style-label:700;
208
- --bpk-typography-style-subhead:300;
209
- }
210
-
211
- :root[data-theme="dark"]{
212
- --bpk-canvas-contrast:#010913;
213
- --bpk-canvas-default:#010913;
214
- --bpk-private-badge-colour-bg-default:#243346;
215
- --bpk-private-badge-colour-bg-inverse:#243346;
216
- --bpk-private-badge-colour-bg-outline:rgba(255, 255, 255, 0);
217
- --bpk-private-badge-colour-bg-subtle:#243346;
218
- --bpk-private-badge-colour-stroke-outline:#ffffff;
219
- --bpk-private-badge-dimension-padding-horizontal-default:0.5rem;
220
- --bpk-private-badge-dimension-padding-horizontal-subtle:0.5rem;
221
- --bpk-private-badge-typography-tmp-badge-label:0.875rem;
222
- --bpk-private-badge-typography-tmp-badge-line-height:0;
223
- --bpk-private-button-colour-bg-destructive:#e0e4e9;
224
- --bpk-private-button-colour-bg-destructive-pressed:#ff649c;
225
- --bpk-private-button-colour-bg-disabled:#0b121d;
226
- --bpk-private-button-colour-bg-feature-pressed:#d1f7ff;
227
- --bpk-private-button-colour-bg-featured:#d1f7ff;
228
- --bpk-private-button-colour-bg-footer:rgba(255, 255, 255, 0);
229
- --bpk-private-button-colour-bg-footer-pressed:rgba(255, 255, 255, 0);
230
- --bpk-private-button-colour-bg-primary:#024daf;
231
- --bpk-private-button-colour-bg-primary-on-dark:#ffffff;
232
- --bpk-private-button-colour-bg-primary-on-dark-pressed:#c1c7cf;
233
- --bpk-private-button-colour-bg-primary-on-light:#ffffff;
234
- --bpk-private-button-colour-bg-primary-on-light-pressed:#002b4b;
235
- --bpk-private-button-colour-bg-secondary:#243346;
236
- --bpk-private-button-colour-bg-secondary-pressed:#010913;
237
- --bpk-private-button-colour-bg-secondary-on-contrast:#243346;
238
- --bpk-private-button-colour-bg-secondary-on-contrast-pressed:#010913;
239
- --bpk-private-button-colour-bg-secondary-on-dark:rgba(255, 255, 255, 0.1);
240
- --bpk-private-button-colour-bg-secondary-on-dark-disabled:#0b121d;
241
- --bpk-private-button-colour-bg-secondary-on-dark-pressed:rgba(255, 255, 255, 0.2);
242
- --bpk-private-button-colour-text-disruptive:#ff649c;
243
- --bpk-private-button-colour-text-feature:#010913;
244
- --bpk-private-button-colour-text-footer:rgba(255, 255, 255, 0);
245
- --bpk-private-button-colour-text-link-on-dark:#ffffff;
246
- --bpk-private-button-colour-text-secondary:#ffffff;
247
- --bpk-private-button-dimension-radius:0.5rem;
248
- --bpk-private-button-dimension-min-height-default:2.25rem;
249
- --bpk-private-button-dimension-min-height-large:3rem;
250
- --bpk-private-button-dimension-min-weight-large:3rem;
251
- --bpk-private-button-dimension-padding-horizontal-default:1rem;
252
- --bpk-private-button-dimension-padding-horizontal-large:1rem;
253
- --bpk-private-button-typography-tmp-default-label:1rem;
254
- --bpk-private-card-button-contained-fill:rgba(255, 255, 255, 0.1);
255
- --bpk-private-carousel-trigger-bg-default:rgba(255, 255, 255, 0.5);
256
- --bpk-private-carousel-trigger-bg-default-hover:rgba(255, 255, 255, 0.8);
257
- --bpk-private-chip-group-filter-colour-bg-icon-hover-on-image:#010913;
258
- --bpk-private-chip-group-filter-colour-bg-icon-off-on-image:#131d2b;
259
- --bpk-private-chip-group-filter-colour-bg-icon-on-default:#054184;
260
- --bpk-private-chip-group-filter-colour-bg-icon-on-on-dark:#131d2b;
261
- --bpk-private-chip-group-filter-colour-bg-icon-on-on-image:#054184;
262
- --bpk-private-chip-group-filter-colour-stroke-icon-hover-default:#054184;
263
- --bpk-private-chip-group-filter-colour-stroke-icon-hover-on-dark:#131d2b;
264
- --bpk-private-chip-group-filter-colour-stroke-icon-off-default:rgba(255, 255, 255, 0.2);
265
- --bpk-private-chip-group-filter-colour-stroke-icon-off-on-dark:rgba(255, 255, 255, 0.2);
266
- --bpk-private-chip-group-filter-dimensions-min-height:2.25rem;
267
- --bpk-private-chip-colour-bg-default-dismissible-hover:#054184;
268
- --bpk-private-chip-colour-bg-default-on:#054184;
269
- --bpk-private-chip-colour-bg-disabled:#0b121d;
270
- --bpk-private-chip-colour-bg-on-contrast-hover:#131d2b;
271
- --bpk-private-chip-colour-bg-on-contrast-on:#054184;
272
- --bpk-private-chip-colour-bg-on-dark-dismissible-hover:#131d2b;
273
- --bpk-private-chip-colour-bg-on-dark-hover:rgba(255, 255, 255, 0);
274
- --bpk-private-chip-colour-bg-on-dark-off:rgba(255, 255, 255, 0);
275
- --bpk-private-chip-colour-bg-on-dark-on:#131d2b;
276
- --bpk-private-chip-colour-bg-on-image-dismissible-hover:#054184;
277
- --bpk-private-chip-colour-bg-on-image-on:#010913;
278
- --bpk-private-chip-colour-border-default-dismissible-hover:rgba(255, 255, 255, 0);
279
- --bpk-private-chip-colour-border-default-hover:#054184;
280
- --bpk-private-chip-colour-border-default-off:rgba(255, 255, 255, 0.2);
281
- --bpk-private-chip-colour-border-on-contrast-off:#131d2b;
282
- --bpk-private-chip-colour-border-on-contrast-on:#131d2b;
283
- --bpk-private-chip-colour-border-on-dark-disimissible-hover:#131d2b;
284
- --bpk-private-chip-colour-border-on-dark-hover:#ffffff;
285
- --bpk-private-chip-colour-border-on-dark-off:rgba(255, 255, 255, 0.2);
286
- --bpk-private-chip-colour-stroke-off-on-canvas-contrast-new:rgba(255, 255, 255, 0);
287
- --bpk-private-chip-colour-text-default-dismissible-hover:#ffffff;
288
- --bpk-private-chip-colour-text-dismissible-on-icon:rgba(255, 255, 255, 0.5);
289
- --bpk-private-chip-colour-text-on:#ffffff;
290
- --bpk-private-chip-colour-text-on-image:#ffffff;
291
- --bpk-private-chip-colour-text-on-image-dismissible-icon:#bdc4cb;
292
- --bpk-private-chip-colour-text-on-dark:#ffffff;
293
- --bpk-private-chip-colour-text-on-dark-dismisisble-hover:#ffffff;
294
- --bpk-private-chip-colour-text-on-dark-dismisisble-icon:#bdc4cb;
295
- --bpk-private-chip-dimension-min-height-width:2rem;
296
- --bpk-private-chip-dimension-radius:0.5rem;
297
- --bpk-private-date-selector-cheapest-month-highlight:#ffffff;
298
- --bpk-private-date-selector-flexible-date-card:#243346;
299
- --bpk-private-dimension-padding-veritcal:0;
300
- --bpk-private-info-banner-default:#131d2b;
301
- --bpk-private-info-banner-on-contrast:#131d2b;
302
- --bpk-private-map-cluster-pin:#ffffff;
303
- --bpk-private-map-cluster-pin-previous-selection:#94c3ff;
304
- --bpk-private-map-marker-viewed:rgba(0, 0, 0, 0.8);
305
- --bpk-private-map-poi-pin:#8e47ba;
306
- --bpk-private-map-previous-selection:#cfe4ff;
307
- --bpk-private-navigation-tabs-hover:#002b4b;
308
- --bpk-private-navigation-tabs-outline:rgba(255, 255, 255, 0.2);
309
- --bpk-private-navigation-tabs-selected:#054184;
310
- --bpk-private-rating-bar-default:#243346;
311
- --bpk-private-rating-bar-on-contrast:#243346;
312
- --bpk-private-segmented-control-canvas-default:#131d2b;
313
- --bpk-private-segmented-control-surface-contrast:#131d2b;
314
- --bpk-private-segmented-control-surface-contrast-on:#054184;
315
- --bpk-private-shadow-large-blur:0.875rem;
316
- --bpk-private-shadow-large-color:rgba(22, 22, 22, 0.25);
317
- --bpk-private-shadow-large-position-x:0;
318
- --bpk-private-shadow-large-position-y:0.25rem;
319
- --bpk-private-shadow-large-spread:0;
320
- --bpk-private-shadow-small-blur:0.1875rem;
321
- --bpk-private-shadow-small-color:rgba(22, 22, 22, 0.25);
322
- --bpk-private-shadow-small-position-x:0;
323
- --bpk-private-shadow-small-position-y:0.0625rem;
324
- --bpk-private-shadow-small-spread:0;
325
- --bpk-private-shadow-xl-blur:3.125rem;
326
- --bpk-private-shadow-xl-color:rgba(22, 22, 22, 0.25);
327
- --bpk-private-shadow-xl-position-x:0;
328
- --bpk-private-shadow-xl-position-y:0.75rem;
329
- --bpk-private-shadow-xl-spread:0;
330
- --bpk-private-skeleton-on-dark:#243346;
331
- --bpk-private-speech-bubble-colour-bg-contrast:#131d2b;
332
- --bpk-private-speech-bubble-colour-bg-default:#131d2b;
333
- --bpk-private-trip-advisor:#9ce6c0;
334
- --bpk-core-accent:#84e9ff;
335
- --bpk-core-eco:#0fa1a9;
336
- --bpk-core-primary:#054184;
337
- --bpk-other-line:rgba(255, 255, 255, 0.2);
338
- --bpk-other-line-on-dark:rgba(255, 255, 255, 0.2);
339
- --bpk-other-overlay:rgba(255, 255, 255, 0.8);
340
- --bpk-other-scrim:rgba(0, 0, 0, 0.7);
341
- --bpk-other-shadow:rgba(22, 22, 22, 0.25);
342
- --bpk-status-danger-fill:#ffcadd;
343
- --bpk-status-danger-spot:#ff649c;
344
- --bpk-status-success-fill:#b1ffe7;
345
- --bpk-status-success-spot:#62f1c6;
346
- --bpk-status-warning-fill:#fbf1bb;
347
- --bpk-status-warning-spot:#feeb87;
348
- --bpk-surface-contrast:#010913;
349
- --bpk-surface-default:#131d2b;
350
- --bpk-surface-elevated:#243346;
351
- --bpk-surface-hero:#010913;
352
- --bpk-surface-highlight:#243346;
353
- --bpk-surface-low-contrast:#243346;
354
- --bpk-surface-subtle:#243346;
355
- --bpk-surface-tint:rgba(255, 255, 255, 0.1);
356
- --bpk-surface-promo:#243346;
357
- --bpk-text-disabled:rgba(255, 255, 255, 0.2);
358
- --bpk-text-disabled-on-dark:rgba(255, 255, 255, 0.5);
359
- --bpk-text-error:#ff649c;
360
- --bpk-text-inverse:#010913;
361
- --bpk-text-on-dark:#ffffff;
362
- --bpk-text-on-light:#010913;
363
- --bpk-text-primary:#ffffff;
364
- --bpk-text-secondary:#bdc4cb;
365
- --bpk-text-success:#62f1c6;
366
- --bpk-text-deprecated-link:#84e9ff;
367
- --bpk-text-hero:#010913;
368
- --bpk-title:true;
369
- --bpk-typography-family-sans-serif:'Skyscanner Relative';
370
- --bpk-typography-family-serif:Larken;
371
- --bpk-typography-kerning-default:0;
372
- --bpk-typography-kerning-loose:0;
373
- --bpk-typography-kerning-tight:0;
374
- --bpk-typography-style-body:400;
375
- --bpk-typography-style-headline:700;
376
- --bpk-typography-style-hero:900;
377
- --bpk-typography-style-label:700;
378
- --bpk-typography-style-subhead:300;
379
- }
380
-
package/bpk-stylesheets/index.js CHANGED
@@ -17,9 +17,6 @@
17
17
  */
18
18
 
19
19
  import './index.scss';
20
- import './primitives.css';
21
- import './theme-backpack-light.css';
22
- import './theme-backpack-dark.css';
23
20
 
24
21
  (() => {
25
22
  if (typeof document === 'undefined') {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "42.19.0-dev-v26077194732.1",
3
+ "version": "42.19.1",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
package/bpk-stylesheets/primitives.css DELETED
@@ -1,40 +0,0 @@
1
- /**
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- *
18
- * Do not edit directly, this file was auto-generated.
19
- */
20
-
21
- :root {
22
- --bpk-radius-none: 0;
23
- --bpk-radius-full: 6.25rem;
24
- --bpk-radius-lg: 1.5rem;
25
- --bpk-radius-md: 0.75rem;
26
- --bpk-radius-nav-tabs: 1.125rem;
27
- --bpk-radius-sm: 0.5rem;
28
- --bpk-radius-xs: 0.25rem;
29
- --bpk-spacing-base: 1rem;
30
- --bpk-spacing-lg: 1.5rem;
31
- --bpk-spacing-md: 0.5rem;
32
- --bpk-spacing-none: 0;
33
- --bpk-spacing-sm: 0.25rem;
34
- --bpk-spacing-xl: 2rem;
35
- --bpk-spacing-xs: 0.125rem;
36
- --bpk-spacing-xxl: 2.5rem;
37
- --bpk-spacing-xxs: 0.0625rem;
38
- --bpk-spacing-xxxl: 4rem;
39
- --bpk-spacing-xxxxl: 6rem;
40
- }
package/bpk-stylesheets/theme-backpack-dark.css DELETED
@@ -1,189 +0,0 @@
1
- /**
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- *
18
- * Do not edit directly, this file was auto-generated.
19
- */
20
-
21
- :root[data-theme="dark"] {
22
- --bpk-canvas-contrast: #010913;
23
- --bpk-canvas-default: #010913;
24
- --bpk-private-badge-colour-bg-default: #243346;
25
- --bpk-private-badge-colour-bg-inverse: #243346;
26
- --bpk-private-badge-colour-bg-outline: rgba(255, 255, 255, 0);
27
- --bpk-private-badge-colour-bg-subtle: #243346;
28
- --bpk-private-badge-colour-stroke-outline: #ffffff;
29
- --bpk-private-badge-dimension-padding-horizontal-default: 0.5rem;
30
- --bpk-private-badge-dimension-padding-horizontal-subtle: 0.5rem;
31
- --bpk-private-badge-typography-tmp-badge-label: 0.875rem;
32
- --bpk-private-badge-typography-tmp-badge-line-height: 0;
33
- --bpk-private-button-colour-bg-destructive: #e0e4e9;
34
- --bpk-private-button-colour-bg-destructive-pressed: #ff649c;
35
- --bpk-private-button-colour-bg-disabled: #0b121d;
36
- --bpk-private-button-colour-bg-feature-pressed: #d1f7ff;
37
- --bpk-private-button-colour-bg-featured: #d1f7ff;
38
- --bpk-private-button-colour-bg-footer: rgba(255, 255, 255, 0);
39
- --bpk-private-button-colour-bg-footer-pressed: rgba(255, 255, 255, 0);
40
- --bpk-private-button-colour-bg-primary: #024daf;
41
- --bpk-private-button-colour-bg-primary-on-dark: #ffffff;
42
- --bpk-private-button-colour-bg-primary-on-dark-pressed: #c1c7cf;
43
- --bpk-private-button-colour-bg-primary-on-light: #ffffff;
44
- --bpk-private-button-colour-bg-primary-on-light-pressed: #002b4b;
45
- --bpk-private-button-colour-bg-secondary: #243346;
46
- --bpk-private-button-colour-bg-secondary-pressed: #010913;
47
- --bpk-private-button-colour-bg-secondary-on-contrast: #243346;
48
- --bpk-private-button-colour-bg-secondary-on-contrast-pressed: #010913;
49
- --bpk-private-button-colour-bg-secondary-on-dark: rgba(255, 255, 255, 0.1);
50
- --bpk-private-button-colour-bg-secondary-on-dark-disabled: #0b121d;
51
- --bpk-private-button-colour-bg-secondary-on-dark-pressed: rgba(255, 255, 255, 0.2);
52
- --bpk-private-button-colour-text-disruptive: #ff649c;
53
- --bpk-private-button-colour-text-feature: #010913;
54
- --bpk-private-button-colour-text-footer: rgba(255, 255, 255, 0);
55
- --bpk-private-button-colour-text-link-on-dark: #ffffff;
56
- --bpk-private-button-colour-text-secondary: #ffffff;
57
- --bpk-private-button-dimension-radius: 0.5rem;
58
- --bpk-private-button-dimension-min-height-default: 2.25rem;
59
- --bpk-private-button-dimension-min-height-large: 3rem;
60
- --bpk-private-button-dimension-min-weight-large: 3rem;
61
- --bpk-private-button-dimension-padding-horizontal-default: 1rem;
62
- --bpk-private-button-dimension-padding-horizontal-large: 1rem;
63
- --bpk-private-button-typography-tmp-default-label: 1rem;
64
- --bpk-private-card-button-contained-fill: rgba(255, 255, 255, 0.1);
65
- --bpk-private-carousel-trigger-bg-default: rgba(255, 255, 255, 0.5);
66
- --bpk-private-carousel-trigger-bg-default-hover: rgba(255, 255, 255, 0.8);
67
- --bpk-private-chip-group-filter-colour-bg-icon-hover-on-image: #010913;
68
- --bpk-private-chip-group-filter-colour-bg-icon-off-on-image: #131d2b;
69
- --bpk-private-chip-group-filter-colour-bg-icon-on-default: #054184;
70
- --bpk-private-chip-group-filter-colour-bg-icon-on-on-dark: #131d2b;
71
- --bpk-private-chip-group-filter-colour-bg-icon-on-on-image: #054184;
72
- --bpk-private-chip-group-filter-colour-stroke-icon-hover-default: #054184;
73
- --bpk-private-chip-group-filter-colour-stroke-icon-hover-on-dark: #131d2b;
74
- --bpk-private-chip-group-filter-colour-stroke-icon-off-default: rgba(255, 255, 255, 0.2);
75
- --bpk-private-chip-group-filter-colour-stroke-icon-off-on-dark: rgba(255, 255, 255, 0.2);
76
- --bpk-private-chip-group-filter-dimensions-min-height: 2.25rem;
77
- --bpk-private-chip-colour-bg-default-dismissible-hover: #054184;
78
- --bpk-private-chip-colour-bg-default-on: #054184;
79
- --bpk-private-chip-colour-bg-disabled: #0b121d;
80
- --bpk-private-chip-colour-bg-on-contrast-hover: #131d2b;
81
- --bpk-private-chip-colour-bg-on-contrast-on: #054184;
82
- --bpk-private-chip-colour-bg-on-dark-dismissible-hover: #131d2b;
83
- --bpk-private-chip-colour-bg-on-dark-hover: rgba(255, 255, 255, 0);
84
- --bpk-private-chip-colour-bg-on-dark-off: rgba(255, 255, 255, 0);
85
- --bpk-private-chip-colour-bg-on-dark-on: #131d2b;
86
- --bpk-private-chip-colour-bg-on-image-dismissible-hover: #054184;
87
- --bpk-private-chip-colour-bg-on-image-on: #010913;
88
- --bpk-private-chip-colour-border-default-dismissible-hover: rgba(255, 255, 255, 0);
89
- --bpk-private-chip-colour-border-default-hover: #054184;
90
- --bpk-private-chip-colour-border-default-off: rgba(255, 255, 255, 0.2);
91
- --bpk-private-chip-colour-border-on-contrast-off: #131d2b;
92
- --bpk-private-chip-colour-border-on-contrast-on: #131d2b;
93
- --bpk-private-chip-colour-border-on-dark-disimissible-hover: #131d2b;
94
- --bpk-private-chip-colour-border-on-dark-hover: #ffffff;
95
- --bpk-private-chip-colour-border-on-dark-off: rgba(255, 255, 255, 0.2);
96
- --bpk-private-chip-colour-stroke-off-on-canvas-contrast-new: rgba(255, 255, 255, 0);
97
- --bpk-private-chip-colour-text-default-dismissible-hover: #ffffff;
98
- --bpk-private-chip-colour-text-dismissible-on-icon: rgba(255, 255, 255, 0.5);
99
- --bpk-private-chip-colour-text-on: #ffffff;
100
- --bpk-private-chip-colour-text-on-image: #ffffff;
101
- --bpk-private-chip-colour-text-on-image-dismissible-icon: #bdc4cb;
102
- --bpk-private-chip-colour-text-on-dark: #ffffff;
103
- --bpk-private-chip-colour-text-on-dark-dismisisble-hover: #ffffff;
104
- --bpk-private-chip-colour-text-on-dark-dismisisble-icon: #bdc4cb;
105
- --bpk-private-chip-dimension-min-height-width: 2rem;
106
- --bpk-private-chip-dimension-radius: 0.5rem;
107
- --bpk-private-date-selector-cheapest-month-highlight: #ffffff;
108
- --bpk-private-date-selector-flexible-date-card: #243346;
109
- --bpk-private-dimension-padding-veritcal: 0;
110
- --bpk-private-info-banner-default: #131d2b;
111
- --bpk-private-info-banner-on-contrast: #131d2b;
112
- --bpk-private-map-cluster-pin: #ffffff;
113
- --bpk-private-map-cluster-pin-previous-selection: #94c3ff;
114
- --bpk-private-map-marker-viewed: rgba(0, 0, 0, 0.8);
115
- --bpk-private-map-poi-pin: #8e47ba;
116
- --bpk-private-map-previous-selection: #cfe4ff;
117
- --bpk-private-navigation-tabs-hover: #002b4b;
118
- --bpk-private-navigation-tabs-outline: rgba(255, 255, 255, 0.2);
119
- --bpk-private-navigation-tabs-selected: #054184;
120
- --bpk-private-rating-bar-default: #243346;
121
- --bpk-private-rating-bar-on-contrast: #243346;
122
- --bpk-private-segmented-control-canvas-default: #131d2b;
123
- --bpk-private-segmented-control-surface-contrast: #131d2b;
124
- --bpk-private-segmented-control-surface-contrast-on: #054184;
125
- --bpk-private-shadow-large-blur: 0.875rem;
126
- --bpk-private-shadow-large-color: rgba(22, 22, 22, 0.25);
127
- --bpk-private-shadow-large-position-x: 0;
128
- --bpk-private-shadow-large-position-y: 0.25rem;
129
- --bpk-private-shadow-large-spread: 0;
130
- --bpk-private-shadow-small-blur: 0.1875rem;
131
- --bpk-private-shadow-small-color: rgba(22, 22, 22, 0.25);
132
- --bpk-private-shadow-small-position-x: 0;
133
- --bpk-private-shadow-small-position-y: 0.0625rem;
134
- --bpk-private-shadow-small-spread: 0;
135
- --bpk-private-shadow-xl-blur: 3.125rem;
136
- --bpk-private-shadow-xl-color: rgba(22, 22, 22, 0.25);
137
- --bpk-private-shadow-xl-position-x: 0;
138
- --bpk-private-shadow-xl-position-y: 0.75rem;
139
- --bpk-private-shadow-xl-spread: 0;
140
- --bpk-private-skeleton-on-dark: #243346;
141
- --bpk-private-speech-bubble-colour-bg-contrast: #131d2b;
142
- --bpk-private-speech-bubble-colour-bg-default: #131d2b;
143
- --bpk-private-trip-advisor: #9ce6c0;
144
- --bpk-core-accent: #84e9ff;
145
- --bpk-core-eco: #0fa1a9;
146
- --bpk-core-primary: #054184;
147
- --bpk-other-line: rgba(255, 255, 255, 0.2);
148
- --bpk-other-line-on-dark: rgba(255, 255, 255, 0.2);
149
- --bpk-other-overlay: rgba(255, 255, 255, 0.8);
150
- --bpk-other-scrim: rgba(0, 0, 0, 0.7);
151
- --bpk-other-shadow: rgba(22, 22, 22, 0.25);
152
- --bpk-status-danger-fill: #ffcadd;
153
- --bpk-status-danger-spot: #ff649c;
154
- --bpk-status-success-fill: #b1ffe7;
155
- --bpk-status-success-spot: #62f1c6;
156
- --bpk-status-warning-fill: #fbf1bb;
157
- --bpk-status-warning-spot: #feeb87;
158
- --bpk-surface-contrast: #010913;
159
- --bpk-surface-default: #131d2b;
160
- --bpk-surface-elevated: #243346;
161
- --bpk-surface-hero: #010913;
162
- --bpk-surface-highlight: #243346;
163
- --bpk-surface-low-contrast: #243346;
164
- --bpk-surface-subtle: #243346;
165
- --bpk-surface-tint: rgba(255, 255, 255, 0.1);
166
- --bpk-surface-promo: #243346;
167
- --bpk-text-disabled: rgba(255, 255, 255, 0.2);
168
- --bpk-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
169
- --bpk-text-error: #ff649c;
170
- --bpk-text-inverse: #010913;
171
- --bpk-text-on-dark: #ffffff;
172
- --bpk-text-on-light: #010913;
173
- --bpk-text-primary: #ffffff;
174
- --bpk-text-secondary: #bdc4cb;
175
- --bpk-text-success: #62f1c6;
176
- --bpk-text-deprecated-link: #84e9ff;
177
- --bpk-text-hero: #010913;
178
- --bpk-title: true;
179
- --bpk-typography-family-sans-serif: 'Skyscanner Relative';
180
- --bpk-typography-family-serif: Larken;
181
- --bpk-typography-kerning-default: 0;
182
- --bpk-typography-kerning-loose: 0;
183
- --bpk-typography-kerning-tight: 0;
184
- --bpk-typography-style-body: 400;
185
- --bpk-typography-style-headline: 700;
186
- --bpk-typography-style-hero: 900;
187
- --bpk-typography-style-label: 700;
188
- --bpk-typography-style-subhead: 300;
189
- }
package/bpk-stylesheets/theme-backpack-light.css DELETED
@@ -1,189 +0,0 @@
1
- /**
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- *
18
- * Do not edit directly, this file was auto-generated.
19
- */
20
-
21
- :root {
22
- --bpk-canvas-contrast: #eff3f8;
23
- --bpk-canvas-default: #ffffff;
24
- --bpk-private-badge-colour-bg-default: #eff3f8;
25
- --bpk-private-badge-colour-bg-inverse: #ffffff;
26
- --bpk-private-badge-colour-bg-outline: rgba(255, 255, 255, 0);
27
- --bpk-private-badge-colour-bg-subtle: #eff3f8;
28
- --bpk-private-badge-colour-stroke-outline: #ffffff;
29
- --bpk-private-badge-dimension-padding-horizontal-default: 0.5rem;
30
- --bpk-private-badge-dimension-padding-horizontal-subtle: 0.5rem;
31
- --bpk-private-badge-typography-tmp-badge-label: 0.875rem;
32
- --bpk-private-badge-typography-tmp-badge-line-height: 0;
33
- --bpk-private-button-colour-bg-destructive: #e0e4e9;
34
- --bpk-private-button-colour-bg-destructive-pressed: #e70866;
35
- --bpk-private-button-colour-bg-disabled: #e0e4e9;
36
- --bpk-private-button-colour-bg-feature-pressed: #024daf;
37
- --bpk-private-button-colour-bg-featured: #0062e3;
38
- --bpk-private-button-colour-bg-footer: rgba(255, 255, 255, 0);
39
- --bpk-private-button-colour-bg-footer-pressed: rgba(255, 255, 255, 0);
40
- --bpk-private-button-colour-bg-primary: #05203c;
41
- --bpk-private-button-colour-bg-primary-on-dark: #ffffff;
42
- --bpk-private-button-colour-bg-primary-on-dark-pressed: #c1c7cf;
43
- --bpk-private-button-colour-bg-primary-on-light: #ffffff;
44
- --bpk-private-button-colour-bg-primary-on-light-pressed: #154679;
45
- --bpk-private-button-colour-bg-secondary: #e0e4e9;
46
- --bpk-private-button-colour-bg-secondary-pressed: #c1c7cf;
47
- --bpk-private-button-colour-bg-secondary-on-contrast: #e0e4e9;
48
- --bpk-private-button-colour-bg-secondary-on-contrast-pressed: #c1c7cf;
49
- --bpk-private-button-colour-bg-secondary-on-dark: rgba(255, 255, 255, 0.1);
50
- --bpk-private-button-colour-bg-secondary-on-dark-disabled: #0b121d;
51
- --bpk-private-button-colour-bg-secondary-on-dark-pressed: #04182d;
52
- --bpk-private-button-colour-text-disruptive: #e70866;
53
- --bpk-private-button-colour-text-feature: #ffffff;
54
- --bpk-private-button-colour-text-footer: rgba(255, 255, 255, 0);
55
- --bpk-private-button-colour-text-link-on-dark: #ffffff;
56
- --bpk-private-button-colour-text-secondary: #161616;
57
- --bpk-private-button-dimension-radius: 0.5rem;
58
- --bpk-private-button-dimension-min-height-default: 2.25rem;
59
- --bpk-private-button-dimension-min-height-large: 3rem;
60
- --bpk-private-button-dimension-min-weight-large: 3rem;
61
- --bpk-private-button-dimension-padding-horizontal-default: 1rem;
62
- --bpk-private-button-dimension-padding-horizontal-large: 1rem;
63
- --bpk-private-button-typography-tmp-default-label: 1rem;
64
- --bpk-private-card-button-contained-fill: rgba(255, 255, 255, 0.8);
65
- --bpk-private-carousel-trigger-bg-default: rgba(255, 255, 255, 0.5);
66
- --bpk-private-carousel-trigger-bg-default-hover: rgba(255, 255, 255, 0.8);
67
- --bpk-private-chip-group-filter-colour-bg-icon-hover-on-image: #eff3f8;
68
- --bpk-private-chip-group-filter-colour-bg-icon-off-on-image: #ffffff;
69
- --bpk-private-chip-group-filter-colour-bg-icon-on-default: #05203c;
70
- --bpk-private-chip-group-filter-colour-bg-icon-on-on-dark: #ffffff;
71
- --bpk-private-chip-group-filter-colour-bg-icon-on-on-image: #05203c;
72
- --bpk-private-chip-group-filter-colour-stroke-icon-hover-default: #05203c;
73
- --bpk-private-chip-group-filter-colour-stroke-icon-hover-on-dark: #ffffff;
74
- --bpk-private-chip-group-filter-colour-stroke-icon-off-default: #c1c7cf;
75
- --bpk-private-chip-group-filter-colour-stroke-icon-off-on-dark: rgba(255, 255, 255, 0.5);
76
- --bpk-private-chip-group-filter-dimensions-min-height: 2.25rem;
77
- --bpk-private-chip-colour-bg-default-dismissible-hover: #05203c;
78
- --bpk-private-chip-colour-bg-default-on: #05203c;
79
- --bpk-private-chip-colour-bg-disabled: #e0e4e9;
80
- --bpk-private-chip-colour-bg-on-contrast-hover: #ffffff;
81
- --bpk-private-chip-colour-bg-on-contrast-on: #05203c;
82
- --bpk-private-chip-colour-bg-on-dark-dismissible-hover: #ffffff;
83
- --bpk-private-chip-colour-bg-on-dark-hover: #ffffff;
84
- --bpk-private-chip-colour-bg-on-dark-off: rgba(255, 255, 255, 0);
85
- --bpk-private-chip-colour-bg-on-dark-on: #ffffff;
86
- --bpk-private-chip-colour-bg-on-image-dismissible-hover: #05203c;
87
- --bpk-private-chip-colour-bg-on-image-on: #eff3f8;
88
- --bpk-private-chip-colour-border-default-dismissible-hover: rgba(255, 255, 255, 0);
89
- --bpk-private-chip-colour-border-default-hover: #05203c;
90
- --bpk-private-chip-colour-border-default-off: #c1c7cf;
91
- --bpk-private-chip-colour-border-on-contrast-off: #ffffff;
92
- --bpk-private-chip-colour-border-on-contrast-on: #05203c;
93
- --bpk-private-chip-colour-border-on-dark-disimissible-hover: #ffffff;
94
- --bpk-private-chip-colour-border-on-dark-hover: #ffffff;
95
- --bpk-private-chip-colour-border-on-dark-off: rgba(255, 255, 255, 0.5);
96
- --bpk-private-chip-colour-stroke-off-on-canvas-contrast-new: rgba(255, 255, 255, 0);
97
- --bpk-private-chip-colour-text-default-dismissible-hover: #ffffff;
98
- --bpk-private-chip-colour-text-dismissible-on-icon: rgba(255, 255, 255, 0.5);
99
- --bpk-private-chip-colour-text-on: #ffffff;
100
- --bpk-private-chip-colour-text-on-image: #ffffff;
101
- --bpk-private-chip-colour-text-on-image-dismissible-icon: #626971;
102
- --bpk-private-chip-colour-text-on-dark: #161616;
103
- --bpk-private-chip-colour-text-on-dark-dismisisble-hover: #161616;
104
- --bpk-private-chip-colour-text-on-dark-dismisisble-icon: #626971;
105
- --bpk-private-chip-dimension-min-height-width: 2rem;
106
- --bpk-private-chip-dimension-radius: 0.5rem;
107
- --bpk-private-date-selector-cheapest-month-highlight: #154679;
108
- --bpk-private-date-selector-flexible-date-card: #eff3f8;
109
- --bpk-private-dimension-padding-veritcal: 0;
110
- --bpk-private-info-banner-default: #eff3f8;
111
- --bpk-private-info-banner-on-contrast: #ffffff;
112
- --bpk-private-map-cluster-pin: #05203c;
113
- --bpk-private-map-cluster-pin-previous-selection: #94c3ff;
114
- --bpk-private-map-marker-viewed: rgba(255, 255, 255, 0.8);
115
- --bpk-private-map-poi-pin: #8e47ba;
116
- --bpk-private-map-previous-selection: #cfe4ff;
117
- --bpk-private-navigation-tabs-hover: #154679;
118
- --bpk-private-navigation-tabs-outline: rgba(255, 255, 255, 0.2);
119
- --bpk-private-navigation-tabs-selected: #024daf;
120
- --bpk-private-rating-bar-default: #e0e4e9;
121
- --bpk-private-rating-bar-on-contrast: #ffffff;
122
- --bpk-private-segmented-control-canvas-default: #eff3f8;
123
- --bpk-private-segmented-control-surface-contrast: rgba(255, 255, 255, 0.1);
124
- --bpk-private-segmented-control-surface-contrast-on: #024daf;
125
- --bpk-private-shadow-large-blur: 0.875rem;
126
- --bpk-private-shadow-large-color: rgba(22, 22, 22, 0.25);
127
- --bpk-private-shadow-large-position-x: 0;
128
- --bpk-private-shadow-large-position-y: 0.25rem;
129
- --bpk-private-shadow-large-spread: 0;
130
- --bpk-private-shadow-small-blur: 0.1875rem;
131
- --bpk-private-shadow-small-color: rgba(22, 22, 22, 0.25);
132
- --bpk-private-shadow-small-position-x: 0;
133
- --bpk-private-shadow-small-position-y: 0.0625rem;
134
- --bpk-private-shadow-small-spread: 0;
135
- --bpk-private-shadow-xl-blur: 3.125rem;
136
- --bpk-private-shadow-xl-color: rgba(22, 22, 22, 0.25);
137
- --bpk-private-shadow-xl-position-x: 0;
138
- --bpk-private-shadow-xl-position-y: 0.75rem;
139
- --bpk-private-shadow-xl-spread: 0;
140
- --bpk-private-skeleton-on-dark: rgba(255, 255, 255, 0.1);
141
- --bpk-private-speech-bubble-colour-bg-contrast: #eff3f8;
142
- --bpk-private-speech-bubble-colour-bg-default: #ffffff;
143
- --bpk-private-trip-advisor: #00aa6c;
144
- --bpk-core-accent: #0062e3;
145
- --bpk-core-eco: #0fa1a9;
146
- --bpk-core-primary: #05203c;
147
- --bpk-other-line: #c1c7cf;
148
- --bpk-other-line-on-dark: rgba(255, 255, 255, 0.5);
149
- --bpk-other-overlay: rgba(0, 0, 0, 0.2);
150
- --bpk-other-scrim: rgba(0, 0, 0, 0.7);
151
- --bpk-other-shadow: rgba(22, 22, 22, 0.25);
152
- --bpk-status-danger-fill: #ffe9f9;
153
- --bpk-status-danger-spot: #e70866;
154
- --bpk-status-success-fill: #d4fff2;
155
- --bpk-status-success-spot: #0c838a;
156
- --bpk-status-warning-fill: #fff7cf;
157
- --bpk-status-warning-spot: #f55d42;
158
- --bpk-surface-contrast: #05203c;
159
- --bpk-surface-default: #ffffff;
160
- --bpk-surface-elevated: #ffffff;
161
- --bpk-surface-hero: #0062e3;
162
- --bpk-surface-highlight: #e0e4e9;
163
- --bpk-surface-low-contrast: #f7f9fb;
164
- --bpk-surface-subtle: #e3f0ff;
165
- --bpk-surface-tint: rgba(255, 255, 255, 0.1);
166
- --bpk-surface-promo: #0062e3;
167
- --bpk-text-disabled: rgba(0, 0, 0, 0.2);
168
- --bpk-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
169
- --bpk-text-error: #e70866;
170
- --bpk-text-inverse: #ffffff;
171
- --bpk-text-on-dark: #ffffff;
172
- --bpk-text-on-light: #161616;
173
- --bpk-text-primary: #161616;
174
- --bpk-text-secondary: #626971;
175
- --bpk-text-success: #0c838a;
176
- --bpk-text-deprecated-link: #0062e3;
177
- --bpk-text-hero: #0062e3;
178
- --bpk-title: true;
179
- --bpk-typography-family-sans-serif: 'Skyscanner Relative';
180
- --bpk-typography-family-serif: Larken;
181
- --bpk-typography-kerning-default: 0;
182
- --bpk-typography-kerning-loose: 0;
183
- --bpk-typography-kerning-tight: 0;
184
- --bpk-typography-style-body: 400;
185
- --bpk-typography-style-headline: 700;
186
- --bpk-typography-style-hero: 900;
187
- --bpk-typography-style-label: 700;
188
- --bpk-typography-style-subhead: 300;
189
- }