@skyscanner/backpack-web 38.22.0 → 39.0.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.
Files changed (44) hide show
  1. package/bpk-mixins/_badges-v2.scss +37 -36
  2. package/bpk-mixins/_badges.scss +37 -36
  3. package/bpk-mixins/_borders.scss +16 -16
  4. package/bpk-mixins/_breakpoints.scss +11 -11
  5. package/bpk-mixins/_buttons.scss +141 -137
  6. package/bpk-mixins/_cards.scss +13 -13
  7. package/bpk-mixins/_chips.scss +66 -66
  8. package/bpk-mixins/_forms.scss +214 -202
  9. package/bpk-mixins/_icons.scss +7 -4
  10. package/bpk-mixins/_index.scss +19 -19
  11. package/bpk-mixins/_layers.scss +34 -34
  12. package/bpk-mixins/_margins.scss +3 -3
  13. package/bpk-mixins/_panels.scss +9 -9
  14. package/bpk-mixins/_radii.scss +6 -6
  15. package/bpk-mixins/_scroll-indicators.scss +2 -2
  16. package/bpk-mixins/_shadows.scss +4 -4
  17. package/bpk-mixins/_spinners.scss +10 -10
  18. package/bpk-mixins/_tokens.scss +1 -3
  19. package/bpk-mixins/_typography.scss +204 -195
  20. package/bpk-mixins/_utils.scss +17 -12
  21. package/bpk-stylesheets/index.scss +13 -14
  22. package/bpk-stylesheets/normalize.css +18 -422
  23. package/bpk-stylesheets/normalize.scss +422 -0
  24. package/package.json +1 -5
  25. package/unstable__bpk-mixins/_badges-v2.scss +0 -240
  26. package/unstable__bpk-mixins/_badges.scss +0 -240
  27. package/unstable__bpk-mixins/_borders.scss +0 -268
  28. package/unstable__bpk-mixins/_breakpoints.scss +0 -221
  29. package/unstable__bpk-mixins/_buttons.scss +0 -587
  30. package/unstable__bpk-mixins/_cards.scss +0 -94
  31. package/unstable__bpk-mixins/_chips.scss +0 -249
  32. package/unstable__bpk-mixins/_forms.scss +0 -1045
  33. package/unstable__bpk-mixins/_icons.scss +0 -88
  34. package/unstable__bpk-mixins/_index.scss +0 -38
  35. package/unstable__bpk-mixins/_layers.scss +0 -199
  36. package/unstable__bpk-mixins/_margins.scss +0 -75
  37. package/unstable__bpk-mixins/_panels.scss +0 -96
  38. package/unstable__bpk-mixins/_radii.scss +0 -80
  39. package/unstable__bpk-mixins/_scroll-indicators.scss +0 -79
  40. package/unstable__bpk-mixins/_shadows.scss +0 -58
  41. package/unstable__bpk-mixins/_spinners.scss +0 -102
  42. package/unstable__bpk-mixins/_tokens.scss +0 -19
  43. package/unstable__bpk-mixins/_typography.scss +0 -1225
  44. package/unstable__bpk-mixins/_utils.scss +0 -267
package/bpk-mixins/_chips.scss CHANGED
@@ -18,74 +18,74 @@
18
18
 
19
19
  /* stylelint-disable at-rule-disallowed-list */
20
20
 
21
- @import 'tokens.scss';
22
- @import 'borders.scss';
23
- @import 'margins.scss';
24
- @import 'shadows.scss';
25
- @import 'utils.scss';
21
+ @use 'tokens';
22
+ @use 'borders';
23
+ @use 'margins';
24
+ @use 'shadows';
25
+ @use 'utils';
26
26
 
27
27
  @mixin bpk-chip {
28
28
  display: inline-flex;
29
- height: bpk-spacing-xl();
30
- padding: 0 bpk-spacing-base();
29
+ height: tokens.bpk-spacing-xl();
30
+ padding: 0 tokens.bpk-spacing-base();
31
31
  align-items: center;
32
32
  border: none;
33
- border-radius: $bpk-border-radius-xs * 2;
33
+ border-radius: tokens.$bpk-border-radius-xs * 2;
34
34
  cursor: pointer;
35
35
 
36
36
  &__leading-accessory-view {
37
37
  display: inline-flex;
38
38
  fill: currentcolor;
39
39
 
40
- @include bpk-margin-trailing(bpk-spacing-md());
40
+ @include margins.bpk-margin-trailing(tokens.bpk-spacing-md());
41
41
  }
42
42
 
43
43
  &__trailing-accessory-view {
44
44
  display: inline-flex;
45
45
  fill: currentcolor;
46
46
 
47
- @include bpk-margin-leading(bpk-spacing-md(), false);
48
- @include bpk-margin-trailing(-1 * bpk-spacing-md(), false);
47
+ @include margins.bpk-margin-leading(tokens.bpk-spacing-md(), false);
48
+ @include margins.bpk-margin-trailing(-1 * tokens.bpk-spacing-md(), false);
49
49
  }
50
50
 
51
51
  &--on-dark {
52
52
  background-color: transparent;
53
- color: $bpk-text-on-dark-day;
53
+ color: tokens.$bpk-text-on-dark-day;
54
54
 
55
- @include bpk-border-sm($bpk-line-on-dark-day);
55
+ @include borders.bpk-border-sm(tokens.$bpk-line-on-dark-day);
56
56
 
57
- @include bpk-hover {
58
- @include bpk-border-sm($bpk-surface-default-day);
57
+ @include utils.bpk-hover {
58
+ @include borders.bpk-border-sm(tokens.$bpk-surface-default-day);
59
59
  }
60
60
 
61
61
  &:active:not(:disabled) {
62
- @include bpk-border-sm($bpk-surface-default-day);
62
+ @include borders.bpk-border-sm(tokens.$bpk-surface-default-day);
63
63
  }
64
64
 
65
65
  &-selected {
66
- @include bpk-themeable-property(
66
+ @include utils.bpk-themeable-property(
67
67
  color,
68
68
  --bpk-chip-on-dark-selected-text-color,
69
- $bpk-text-on-light-day
69
+ tokens.$bpk-text-on-light-day
70
70
  );
71
- @include bpk-themeable-property(
71
+ @include utils.bpk-themeable-property(
72
72
  background-color,
73
73
  --bpk-chip-on-dark-selected-background-color,
74
- $bpk-surface-default-day
74
+ tokens.$bpk-surface-default-day
75
75
  );
76
- @include bpk-border-sm(transparent);
76
+ @include borders.bpk-border-sm(transparent);
77
77
 
78
- @include bpk-hover {
79
- @include bpk-border-sm(transparent);
78
+ @include utils.bpk-hover {
79
+ @include borders.bpk-border-sm(transparent);
80
80
  }
81
81
 
82
82
  &:active:not(:disabled) {
83
- @include bpk-border-sm(transparent);
83
+ @include borders.bpk-border-sm(transparent);
84
84
  }
85
85
  }
86
86
 
87
87
  &-dismissible {
88
- @include bpk-hover {
88
+ @include utils.bpk-hover {
89
89
  svg {
90
90
  fill: currentcolor;
91
91
  }
@@ -98,53 +98,53 @@
98
98
  }
99
99
 
100
100
  &__trailing-accessory-view {
101
- fill: $bpk-text-secondary-day;
101
+ fill: tokens.$bpk-text-secondary-day;
102
102
  }
103
103
  }
104
104
 
105
105
  &-disabled {
106
- @include bpk-border-sm(transparent);
106
+ @include borders.bpk-border-sm(transparent);
107
107
  }
108
108
  }
109
109
 
110
110
  &--default {
111
111
  background-color: transparent;
112
- color: $bpk-text-primary-day;
112
+ color: tokens.$bpk-text-primary-day;
113
113
 
114
- @include bpk-border-sm($bpk-line-day);
114
+ @include borders.bpk-border-sm(tokens.$bpk-line-day);
115
115
 
116
- @include bpk-hover {
117
- @include bpk-border-sm($bpk-core-primary-day);
116
+ @include utils.bpk-hover {
117
+ @include borders.bpk-border-sm(tokens.$bpk-core-primary-day);
118
118
  }
119
119
 
120
120
  &:active:not(:disabled) {
121
- @include bpk-border-sm($bpk-core-primary-day);
121
+ @include borders.bpk-border-sm(tokens.$bpk-core-primary-day);
122
122
  }
123
123
 
124
124
  &-selected {
125
- @include bpk-themeable-property(
125
+ @include utils.bpk-themeable-property(
126
126
  color,
127
127
  --bpk-chip-default-selected-text-color,
128
- $bpk-text-on-dark-day
128
+ tokens.$bpk-text-on-dark-day
129
129
  );
130
- @include bpk-themeable-property(
130
+ @include utils.bpk-themeable-property(
131
131
  background-color,
132
132
  --bpk-chip-default-selected-background-color,
133
- $bpk-core-primary-day
133
+ tokens.$bpk-core-primary-day
134
134
  );
135
- @include bpk-border-sm(transparent);
135
+ @include borders.bpk-border-sm(transparent);
136
136
 
137
- @include bpk-hover {
138
- @include bpk-border-sm(transparent);
137
+ @include utils.bpk-hover {
138
+ @include borders.bpk-border-sm(transparent);
139
139
  }
140
140
 
141
141
  &:active:not(:disabled) {
142
- @include bpk-border-sm(transparent);
142
+ @include borders.bpk-border-sm(transparent);
143
143
  }
144
144
  }
145
145
 
146
146
  &-dismissible {
147
- @include bpk-hover {
147
+ @include utils.bpk-hover {
148
148
  svg {
149
149
  fill: currentcolor;
150
150
  }
@@ -157,60 +157,60 @@
157
157
  }
158
158
 
159
159
  &__trailing-accessory-view {
160
- fill: $bpk-text-disabled-on-dark-day;
160
+ fill: tokens.$bpk-text-disabled-on-dark-day;
161
161
  }
162
162
  }
163
163
 
164
164
  &-disabled {
165
- @include bpk-border-sm(transparent);
165
+ @include borders.bpk-border-sm(transparent);
166
166
  }
167
167
  }
168
168
 
169
169
  &--on-image {
170
- background-color: $bpk-surface-default-day;
171
- color: $bpk-text-primary-day;
170
+ background-color: tokens.$bpk-surface-default-day;
171
+ color: tokens.$bpk-text-primary-day;
172
172
 
173
- @include bpk-box-shadow-sm;
173
+ @include shadows.bpk-box-shadow-sm;
174
174
 
175
- @include bpk-hover {
176
- background-color: $bpk-canvas-contrast-day;
175
+ @include utils.bpk-hover {
176
+ background-color: tokens.$bpk-canvas-contrast-day;
177
177
  }
178
178
 
179
179
  &:active:not(:disabled) {
180
- background-color: $bpk-canvas-contrast-day;
180
+ background-color: tokens.$bpk-canvas-contrast-day;
181
181
  }
182
182
 
183
183
  &-selected {
184
- @include bpk-themeable-property(
184
+ @include utils.bpk-themeable-property(
185
185
  color,
186
186
  --bpk-chip-on-image-selected-text-color,
187
- $bpk-text-on-dark-day
187
+ tokens.$bpk-text-on-dark-day
188
188
  );
189
- @include bpk-themeable-property(
189
+ @include utils.bpk-themeable-property(
190
190
  background-color,
191
191
  --bpk-chip-on-image-selected-background-color,
192
- $bpk-core-primary-day
192
+ tokens.$bpk-core-primary-day
193
193
  );
194
194
 
195
- @include bpk-hover {
196
- @include bpk-themeable-property(
195
+ @include utils.bpk-hover {
196
+ @include utils.bpk-themeable-property(
197
197
  background-color,
198
198
  --bpk-chip-on-image-selected-hover-background-color,
199
- $bpk-core-primary-day
199
+ tokens.$bpk-core-primary-day
200
200
  );
201
201
  }
202
202
 
203
203
  &:active:not(:disabled) {
204
- @include bpk-themeable-property(
204
+ @include utils.bpk-themeable-property(
205
205
  background-color,
206
206
  --bpk-chip-on-image-selected-active-background-color,
207
- $bpk-core-primary-day
207
+ tokens.$bpk-core-primary-day
208
208
  );
209
209
  }
210
210
  }
211
211
 
212
212
  &-dismissible {
213
- @include bpk-hover {
213
+ @include utils.bpk-hover {
214
214
  svg {
215
215
  fill: currentcolor;
216
216
  }
@@ -223,27 +223,27 @@
223
223
  }
224
224
 
225
225
  &__trailing-accessory-view {
226
- fill: $bpk-text-disabled-on-dark-day;
226
+ fill: tokens.$bpk-text-disabled-on-dark-day;
227
227
  }
228
228
  }
229
229
 
230
230
  &-disabled {
231
- @include bpk-box-shadow-sm;
231
+ @include shadows.bpk-box-shadow-sm;
232
232
  }
233
233
  }
234
234
 
235
235
  &--disabled {
236
- background-color: $bpk-private-chip-disabled-background-day;
237
- color: $bpk-text-disabled-day;
236
+ background-color: tokens.$bpk-private-chip-disabled-background-day;
237
+ color: tokens.$bpk-text-disabled-day;
238
238
  cursor: not-allowed;
239
239
  }
240
240
 
241
241
  &--icon-only {
242
- padding-inline-end: bpk-spacing-md();
243
- padding-inline-start: bpk-spacing-md();
242
+ padding-inline-end: tokens.bpk-spacing-md();
243
+ padding-inline-start: tokens.bpk-spacing-md();
244
244
 
245
245
  &__leading-accessory-view {
246
- @include bpk-margin-trailing(0);
246
+ @include margins.bpk-margin-trailing(0);
247
247
  }
248
248
  }
249
249
  }