@skyscanner/backpack-web 42.21.1 → 42.22.0-dev-v26625998804.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 (44) hide show
  1. package/bpk-component-badge/src/BpkBadge.module.css +1 -1
  2. package/bpk-component-banner-alert/src/BpkBannerAlert.module.css +1 -1
  3. package/bpk-component-barchart/src/BpkBarchartBar.module.css +1 -1
  4. package/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css +1 -1
  5. package/bpk-component-button/src/BpkButton.module.css +1 -1
  6. package/bpk-component-calendar/src/BpkCalendarDate.module.css +1 -1
  7. package/bpk-component-calendar/src/BpkCalendarNav.module.css +1 -1
  8. package/bpk-component-card-list/src/BpkCardListGridStack/BpkCardListGridStack.module.css +1 -1
  9. package/bpk-component-chatbot-input/src/BpkChatbotInput.module.css +1 -1
  10. package/bpk-component-checkbox/src/BpkCheckbox.module.css +1 -1
  11. package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.module.css +1 -1
  12. package/bpk-component-chip/src/BpkSelectableChip.module.css +1 -1
  13. package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.module.css +1 -1
  14. package/bpk-component-form-validation/src/BpkFormValidation.module.css +1 -1
  15. package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.css +1 -1
  16. package/bpk-component-input/src/BpkInput.module.css +1 -1
  17. package/bpk-component-label/src/BpkLabel.module.css +1 -1
  18. package/bpk-component-layout/index.d.ts +2 -2
  19. package/bpk-component-layout/index.js +1 -1
  20. package/bpk-component-layout/src/commonProps.d.ts +12 -10
  21. package/bpk-component-layout/src/tokenUtils.js +10 -2
  22. package/bpk-component-layout/src/tokens.d.ts +15 -0
  23. package/bpk-component-layout/src/tokens.js +18 -0
  24. package/bpk-component-link/src/BpkLink.module.css +1 -1
  25. package/bpk-component-map/src/BpkIconMarker.module.css +1 -1
  26. package/bpk-component-map/src/BpkIconMarkerBackground.module.css +1 -1
  27. package/bpk-component-navigation-bar/src/BpkNavigationBar.module.css +1 -1
  28. package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.css +1 -1
  29. package/bpk-component-pagination/src/BpkPaginationPage.module.css +1 -1
  30. package/bpk-component-progress/src/BpkProgress.module.css +1 -1
  31. package/bpk-component-radio/src/BpkRadio.module.css +1 -1
  32. package/bpk-component-select/src/BpkSelect.module.css +1 -1
  33. package/bpk-component-skip-link/src/BpkSkipLink.module.css +1 -1
  34. package/bpk-component-spinner/src/BpkSpinner.module.css +1 -1
  35. package/bpk-component-star-rating/src/BpkStar.module.css +1 -1
  36. package/bpk-component-switch/src/BpkSwitch.module.css +1 -1
  37. package/bpk-component-textarea/src/BpkTextarea.module.css +1 -1
  38. package/bpk-mixins/_utils.scss +0 -1
  39. package/bpk-stylesheets/base.css +2 -2
  40. package/bpk-stylesheets/index.js +3 -0
  41. package/bpk-stylesheets/primitives.css +40 -0
  42. package/bpk-stylesheets/theme-backpack-dark.css +189 -0
  43. package/bpk-stylesheets/theme-backpack-light.css +189 -0
  44. package/package.json +1 -1
package/bpk-stylesheets/theme-backpack-light.css ADDED
@@ -0,0 +1,189 @@
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
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "42.21.1",
3
+ "version": "42.22.0-dev-v26625998804.1",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",