@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/_badges-v2.scss CHANGED
@@ -18,10 +18,10 @@
18
18
 
19
19
  /* stylelint-disable at-rule-disallowed-list */
20
20
 
21
- @import 'tokens.scss';
22
- @import 'typography.scss';
23
- @import 'radii.scss';
24
- @import 'utils.scss';
21
+ @use 'tokens';
22
+ @use 'typography';
23
+ @use 'radii';
24
+ @use 'utils';
25
25
 
26
26
  ////
27
27
  /// @group badges
@@ -36,12 +36,12 @@
36
36
 
37
37
  @mixin bpk-badge {
38
38
  display: inline-flex;
39
- padding: bpk-spacing-sm() bpk-spacing-md();
39
+ padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md();
40
40
  align-items: center;
41
41
 
42
- @include bpk-border-radius-xs;
43
- @include bpk-text;
44
- @include bpk-footnote;
42
+ @include radii.bpk-border-radius-xs;
43
+ @include typography.bpk-text;
44
+ @include typography.bpk-footnote;
45
45
  }
46
46
 
47
47
  /// Centered badge. Modifies the bpk-badge mixin.
@@ -76,11 +76,11 @@
76
76
  border-top-right-radius: 0;
77
77
  border-bottom-right-radius: 0;
78
78
 
79
- @include bpk-rtl {
79
+ @include utils.bpk-rtl {
80
80
  right: inherit;
81
81
  left: 0;
82
82
  border-bottom-left-radius: 0;
83
- border-bottom-right-radius: $bpk-border-radius-xs;
83
+ border-bottom-right-radius: tokens.$bpk-border-radius-xs;
84
84
  }
85
85
  }
86
86
 
@@ -102,10 +102,10 @@
102
102
  border-top-right-radius: 0;
103
103
  border-bottom-left-radius: 0;
104
104
 
105
- @include bpk-rtl {
105
+ @include utils.bpk-rtl {
106
106
  right: 0;
107
107
  left: inherit;
108
- border-bottom-left-radius: $bpk-border-radius-xs;
108
+ border-bottom-left-radius: tokens.$bpk-border-radius-xs;
109
109
  border-bottom-right-radius: 0;
110
110
  }
111
111
  }
@@ -121,9 +121,9 @@
121
121
  /// }
122
122
 
123
123
  @mixin bpk-badge--normal {
124
- background-color: $bpk-private-badge-background-normal-day;
125
- color: $bpk-text-primary-day;
126
- fill: $bpk-text-primary-day;
124
+ background-color: tokens.$bpk-private-badge-background-normal-day;
125
+ color: tokens.$bpk-text-primary-day;
126
+ fill: tokens.$bpk-text-primary-day;
127
127
  }
128
128
 
129
129
  /// Warning badge. Modifies the bpk-badge mixin.
@@ -137,9 +137,9 @@
137
137
  /// }
138
138
 
139
139
  @mixin bpk-badge--warning {
140
- background-color: $bpk-private-badge-background-normal-day;
141
- color: $bpk-text-on-light-day;
142
- fill: $bpk-status-warning-spot-day;
140
+ background-color: tokens.$bpk-private-badge-background-normal-day;
141
+ color: tokens.$bpk-text-on-light-day;
142
+ fill: tokens.$bpk-status-warning-spot-day;
143
143
  }
144
144
 
145
145
  /// Success badge. Modifies the bpk-badge mixin.
@@ -153,9 +153,9 @@
153
153
  /// }
154
154
 
155
155
  @mixin bpk-badge--success {
156
- background-color: $bpk-private-badge-background-normal-day;
157
- color: $bpk-text-on-light-day;
158
- fill: $bpk-status-success-spot-day;
156
+ background-color: tokens.$bpk-private-badge-background-normal-day;
157
+ color: tokens.$bpk-text-on-light-day;
158
+ fill: tokens.$bpk-status-success-spot-day;
159
159
  }
160
160
 
161
161
  /// Critical badge. Modifies the bpk-badge mixin.
@@ -169,9 +169,9 @@
169
169
  /// }
170
170
 
171
171
  @mixin bpk-badge--critical {
172
- background-color: $bpk-private-badge-background-normal-day;
173
- color: $bpk-text-on-light-day;
174
- fill: $bpk-status-danger-spot-day;
172
+ background-color: tokens.$bpk-private-badge-background-normal-day;
173
+ color: tokens.$bpk-text-on-light-day;
174
+ fill: tokens.$bpk-status-danger-spot-day;
175
175
  }
176
176
 
177
177
  /// Inverse badge. Modifies the bpk-badge mixin.
@@ -185,9 +185,9 @@
185
185
  /// }
186
186
 
187
187
  @mixin bpk-badge--inverse {
188
- background-color: $bpk-surface-default-day;
189
- color: $bpk-text-primary-day;
190
- fill: $bpk-text-primary-day;
188
+ background-color: tokens.$bpk-surface-default-day;
189
+ color: tokens.$bpk-text-primary-day;
190
+ fill: tokens.$bpk-text-primary-day;
191
191
  }
192
192
 
193
193
  /// Outline badge. Modifies the bpk-badge mixin.
@@ -202,9 +202,10 @@
202
202
 
203
203
  @mixin bpk-badge--outline {
204
204
  background-color: transparent;
205
- color: $bpk-text-on-dark-day;
206
- box-shadow: inset 0 0 0 $bpk-border-size-sm $bpk-text-on-dark-day;
207
- fill: $bpk-text-on-dark-day;
205
+ color: tokens.$bpk-text-on-dark-day;
206
+ box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
207
+ tokens.$bpk-text-on-dark-day;
208
+ fill: tokens.$bpk-text-on-dark-day;
208
209
  }
209
210
 
210
211
  /// Strong badge. Modifies the bpk-badge mixin.
@@ -218,9 +219,9 @@
218
219
  /// }
219
220
 
220
221
  @mixin bpk-badge--strong {
221
- background-color: $bpk-core-primary-day;
222
- color: $bpk-text-on-dark-day;
223
- fill: $bpk-text-on-dark-day;
222
+ background-color: tokens.$bpk-core-primary-day;
223
+ color: tokens.$bpk-text-on-dark-day;
224
+ fill: tokens.$bpk-text-on-dark-day;
224
225
  }
225
226
 
226
227
  /// Brand badge. Modifies the bpk-badge mixin.
@@ -234,7 +235,7 @@
234
235
  /// }
235
236
 
236
237
  @mixin bpk-badge--brand {
237
- background-color: $bpk-core-accent-day;
238
- color: $bpk-text-primary-inverse-day;
239
- fill: $bpk-text-primary-inverse-day;
238
+ background-color: tokens.$bpk-core-accent-day;
239
+ color: tokens.$bpk-text-primary-inverse-day;
240
+ fill: tokens.$bpk-text-primary-inverse-day;
240
241
  }
package/bpk-mixins/_badges.scss CHANGED
@@ -18,10 +18,10 @@
18
18
 
19
19
  /* stylelint-disable at-rule-disallowed-list */
20
20
 
21
- @import 'tokens.scss';
22
- @import 'radii.scss';
23
- @import 'typography.scss';
24
- @import 'utils.scss';
21
+ @use 'tokens';
22
+ @use 'radii';
23
+ @use 'typography';
24
+ @use 'utils';
25
25
 
26
26
  ////
27
27
  /// @group badges
@@ -36,12 +36,12 @@
36
36
 
37
37
  @mixin bpk-badge {
38
38
  display: inline-flex;
39
- padding: bpk-spacing-sm() bpk-spacing-md();
39
+ padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md();
40
40
  align-items: center;
41
41
 
42
- @include bpk-border-radius-xs;
43
- @include bpk-text;
44
- @include bpk-footnote;
42
+ @include radii.bpk-border-radius-xs;
43
+ @include typography.bpk-text;
44
+ @include typography.bpk-footnote;
45
45
  }
46
46
 
47
47
  /// Centered badge. Modifies the bpk-badge mixin.
@@ -76,11 +76,11 @@
76
76
  border-top-right-radius: 0;
77
77
  border-bottom-right-radius: 0;
78
78
 
79
- @include bpk-rtl {
79
+ @include utils.bpk-rtl {
80
80
  right: inherit;
81
81
  left: 0;
82
82
  border-bottom-left-radius: 0;
83
- border-bottom-right-radius: $bpk-border-radius-xs;
83
+ border-bottom-right-radius: tokens.$bpk-border-radius-xs;
84
84
  }
85
85
  }
86
86
 
@@ -102,10 +102,10 @@
102
102
  border-top-right-radius: 0;
103
103
  border-bottom-left-radius: 0;
104
104
 
105
- @include bpk-rtl {
105
+ @include utils.bpk-rtl {
106
106
  right: 0;
107
107
  left: inherit;
108
- border-bottom-left-radius: $bpk-border-radius-xs;
108
+ border-bottom-left-radius: tokens.$bpk-border-radius-xs;
109
109
  border-bottom-right-radius: 0;
110
110
  }
111
111
  }
@@ -121,9 +121,9 @@
121
121
  /// }
122
122
 
123
123
  @mixin bpk-badge--normal {
124
- background-color: $bpk-private-badge-background-normal-day;
125
- color: $bpk-text-primary-day;
126
- fill: $bpk-text-primary-day;
124
+ background-color: tokens.$bpk-private-badge-background-normal-day;
125
+ color: tokens.$bpk-text-primary-day;
126
+ fill: tokens.$bpk-text-primary-day;
127
127
  }
128
128
 
129
129
  /// Warning badge. Modifies the bpk-badge mixin.
@@ -137,9 +137,9 @@
137
137
  /// }
138
138
 
139
139
  @mixin bpk-badge--warning {
140
- background-color: $bpk-private-badge-background-normal-day;
141
- color: $bpk-text-on-light-day;
142
- fill: $bpk-status-warning-spot-day;
140
+ background-color: tokens.$bpk-private-badge-background-normal-day;
141
+ color: tokens.$bpk-text-on-light-day;
142
+ fill: tokens.$bpk-status-warning-spot-day;
143
143
  }
144
144
 
145
145
  /// Success badge. Modifies the bpk-badge mixin.
@@ -153,9 +153,9 @@
153
153
  /// }
154
154
 
155
155
  @mixin bpk-badge--success {
156
- background-color: $bpk-private-badge-background-normal-day;
157
- color: $bpk-text-on-light-day;
158
- fill: $bpk-status-success-spot-day;
156
+ background-color: tokens.$bpk-private-badge-background-normal-day;
157
+ color: tokens.$bpk-text-on-light-day;
158
+ fill: tokens.$bpk-status-success-spot-day;
159
159
  }
160
160
 
161
161
  /// Critical badge. Modifies the bpk-badge mixin.
@@ -169,9 +169,9 @@
169
169
  /// }
170
170
 
171
171
  @mixin bpk-badge--critical {
172
- background-color: $bpk-private-badge-background-normal-day;
173
- color: $bpk-text-on-light-day;
174
- fill: $bpk-status-danger-spot-day;
172
+ background-color: tokens.$bpk-private-badge-background-normal-day;
173
+ color: tokens.$bpk-text-on-light-day;
174
+ fill: tokens.$bpk-status-danger-spot-day;
175
175
  }
176
176
 
177
177
  /// Inverse badge. Modifies the bpk-badge mixin.
@@ -185,9 +185,9 @@
185
185
  /// }
186
186
 
187
187
  @mixin bpk-badge--inverse {
188
- background-color: $bpk-surface-default-day;
189
- color: $bpk-text-primary-day;
190
- fill: $bpk-text-primary-day;
188
+ background-color: tokens.$bpk-surface-default-day;
189
+ color: tokens.$bpk-text-primary-day;
190
+ fill: tokens.$bpk-text-primary-day;
191
191
  }
192
192
 
193
193
  /// Outline badge. Modifies the bpk-badge mixin.
@@ -202,9 +202,10 @@
202
202
 
203
203
  @mixin bpk-badge--outline {
204
204
  background-color: transparent;
205
- color: $bpk-text-on-dark-day;
206
- box-shadow: inset 0 0 0 $bpk-border-size-sm $bpk-text-on-dark-day;
207
- fill: $bpk-text-on-dark-day;
205
+ color: tokens.$bpk-text-on-dark-day;
206
+ box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
207
+ tokens.$bpk-text-on-dark-day;
208
+ fill: tokens.$bpk-text-on-dark-day;
208
209
  }
209
210
 
210
211
  /// Strong badge. Modifies the bpk-badge mixin.
@@ -218,9 +219,9 @@
218
219
  /// }
219
220
 
220
221
  @mixin bpk-badge--strong {
221
- background-color: $bpk-core-primary-day;
222
- color: $bpk-text-on-dark-day;
223
- fill: $bpk-text-on-dark-day;
222
+ background-color: tokens.$bpk-core-primary-day;
223
+ color: tokens.$bpk-text-on-dark-day;
224
+ fill: tokens.$bpk-text-on-dark-day;
224
225
  }
225
226
 
226
227
  /// Brand badge. Modifies the bpk-badge mixin.
@@ -234,7 +235,7 @@
234
235
  /// }
235
236
 
236
237
  @mixin bpk-badge--brand {
237
- background-color: $bpk-core-accent-day;
238
- color: $bpk-text-primary-inverse-day;
239
- fill: $bpk-text-primary-inverse-day;
238
+ background-color: tokens.$bpk-core-accent-day;
239
+ color: tokens.$bpk-text-primary-inverse-day;
240
+ fill: tokens.$bpk-text-primary-inverse-day;
240
241
  }
package/bpk-mixins/_borders.scss CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  /* stylelint-disable at-rule-disallowed-list */
20
20
 
21
- @import 'tokens.scss';
21
+ @use 'tokens';
22
22
 
23
23
  ////
24
24
  /// @group borders
@@ -82,7 +82,7 @@
82
82
  /// }
83
83
 
84
84
  @mixin bpk-border-sm($color, $inset: inset) {
85
- @include _bpk-border($bpk-border-size-sm, $color, $inset);
85
+ @include _bpk-border(tokens.$bpk-border-size-sm, $color, $inset);
86
86
  }
87
87
 
88
88
  /// Small "1px" top border.
@@ -95,7 +95,7 @@
95
95
  /// }
96
96
 
97
97
  @mixin bpk-border-top-sm($color, $inset: inset) {
98
- @include _bpk-border-top($bpk-border-size-sm, $color, $inset);
98
+ @include _bpk-border-top(tokens.$bpk-border-size-sm, $color, $inset);
99
99
  }
100
100
 
101
101
  /// Small "1px" right border.
@@ -108,7 +108,7 @@
108
108
  /// }
109
109
 
110
110
  @mixin bpk-border-right-sm($color, $inset: inset) {
111
- @include bpk-border-right($bpk-border-size-sm, $color, $inset);
111
+ @include bpk-border-right(tokens.$bpk-border-size-sm, $color, $inset);
112
112
  }
113
113
 
114
114
  /// Small "1px" bottom border.
@@ -121,7 +121,7 @@
121
121
  /// }
122
122
 
123
123
  @mixin bpk-border-bottom-sm($color, $inset: inset) {
124
- @include _bpk-border-bottom($bpk-border-size-sm, $color, $inset);
124
+ @include _bpk-border-bottom(tokens.$bpk-border-size-sm, $color, $inset);
125
125
  }
126
126
 
127
127
  /// Small "1px" left border.
@@ -134,7 +134,7 @@
134
134
  /// }
135
135
 
136
136
  @mixin bpk-border-left-sm($color, $inset: inset) {
137
- @include bpk-border-left($bpk-border-size-sm, $color, $inset);
137
+ @include bpk-border-left(tokens.$bpk-border-size-sm, $color, $inset);
138
138
  }
139
139
 
140
140
  /// Large "2px" border.
@@ -147,7 +147,7 @@
147
147
  /// }
148
148
 
149
149
  @mixin bpk-border-lg($color, $inset: inset) {
150
- @include _bpk-border($bpk-border-size-lg, $color, $inset);
150
+ @include _bpk-border(tokens.$bpk-border-size-lg, $color, $inset);
151
151
  }
152
152
 
153
153
  /// Large "2px" top border.
@@ -160,7 +160,7 @@
160
160
  /// }
161
161
 
162
162
  @mixin bpk-border-top-lg($color, $inset: inset) {
163
- @include _bpk-border-top($bpk-border-size-lg, $color, $inset);
163
+ @include _bpk-border-top(tokens.$bpk-border-size-lg, $color, $inset);
164
164
  }
165
165
 
166
166
  /// Large "2px" right border.
@@ -173,7 +173,7 @@
173
173
  /// }
174
174
 
175
175
  @mixin bpk-border-right-lg($color, $inset: inset) {
176
- @include bpk-border-right($bpk-border-size-lg, $color, $inset);
176
+ @include bpk-border-right(tokens.$bpk-border-size-lg, $color, $inset);
177
177
  }
178
178
 
179
179
  /// Large "2px" bottom border.
@@ -186,7 +186,7 @@
186
186
  /// }
187
187
 
188
188
  @mixin bpk-border-bottom-lg($color, $inset: inset) {
189
- @include _bpk-border-bottom($bpk-border-size-lg, $color, $inset);
189
+ @include _bpk-border-bottom(tokens.$bpk-border-size-lg, $color, $inset);
190
190
  }
191
191
 
192
192
  /// Large "2px" left border.
@@ -199,7 +199,7 @@
199
199
  /// }
200
200
 
201
201
  @mixin bpk-border-left-lg($color, $inset: inset) {
202
- @include bpk-border-left($bpk-border-size-lg, $color, $inset);
202
+ @include bpk-border-left(tokens.$bpk-border-size-lg, $color, $inset);
203
203
  }
204
204
 
205
205
  /// Extra large "3px" border.
@@ -212,7 +212,7 @@
212
212
  /// }
213
213
 
214
214
  @mixin bpk-border-xl($color, $inset: inset) {
215
- @include _bpk-border($bpk-border-size-xl, $color, $inset);
215
+ @include _bpk-border(tokens.$bpk-border-size-xl, $color, $inset);
216
216
  }
217
217
 
218
218
  /// Extra large "3px" top border.
@@ -225,7 +225,7 @@
225
225
  /// }
226
226
 
227
227
  @mixin bpk-border-top-xl($color, $inset: inset) {
228
- @include _bpk-border-top($bpk-border-size-xl, $color, $inset);
228
+ @include _bpk-border-top(tokens.$bpk-border-size-xl, $color, $inset);
229
229
  }
230
230
 
231
231
  /// Extra large "3px" right border.
@@ -238,7 +238,7 @@
238
238
  /// }
239
239
 
240
240
  @mixin bpk-border-right-xl($color, $inset: inset) {
241
- @include bpk-border-right($bpk-border-size-xl, $color, $inset);
241
+ @include bpk-border-right(tokens.$bpk-border-size-xl, $color, $inset);
242
242
  }
243
243
 
244
244
  /// Extra large "3px" bottom border.
@@ -251,7 +251,7 @@
251
251
  /// }
252
252
 
253
253
  @mixin bpk-border-bottom-xl($color, $inset: inset) {
254
- @include _bpk-border-bottom($bpk-border-size-xl, $color, $inset);
254
+ @include _bpk-border-bottom(tokens.$bpk-border-size-xl, $color, $inset);
255
255
  }
256
256
 
257
257
  /// Extra large "3px" left border.
@@ -264,5 +264,5 @@
264
264
  /// }
265
265
 
266
266
  @mixin bpk-border-left-xl($color, $inset: inset) {
267
- @include bpk-border-left($bpk-border-size-xl, $color, $inset);
267
+ @include bpk-border-left(tokens.$bpk-border-size-xl, $color, $inset);
268
268
  }
package/bpk-mixins/_breakpoints.scss CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  /* stylelint-disable at-rule-disallowed-list */
20
20
 
21
- @import 'tokens.scss';
21
+ @use 'tokens';
22
22
 
23
23
  ////
24
24
  /// @group breakpoints
@@ -44,7 +44,7 @@
44
44
  /// }
45
45
 
46
46
  @mixin bpk-breakpoint-small-mobile {
47
- @media #{$bpk-breakpoint-query-small-mobile} {
47
+ @media #{tokens.$bpk-breakpoint-query-small-mobile} {
48
48
  @content;
49
49
  }
50
50
  }
@@ -63,7 +63,7 @@
63
63
  /// }
64
64
 
65
65
  @mixin bpk-breakpoint-mobile {
66
- @media #{$bpk-breakpoint-query-mobile} {
66
+ @media #{tokens.$bpk-breakpoint-query-mobile} {
67
67
  @content;
68
68
  }
69
69
  }
@@ -82,7 +82,7 @@
82
82
  /// }
83
83
 
84
84
  @mixin bpk-breakpoint-small-tablet {
85
- @media #{$bpk-breakpoint-query-small-tablet} {
85
+ @media #{tokens.$bpk-breakpoint-query-small-tablet} {
86
86
  @content;
87
87
  }
88
88
  }
@@ -101,7 +101,7 @@
101
101
  /// }
102
102
 
103
103
  @mixin bpk-breakpoint-tablet {
104
- @media #{$bpk-breakpoint-query-tablet} {
104
+ @media #{tokens.$bpk-breakpoint-query-tablet} {
105
105
  @content;
106
106
  }
107
107
  }
@@ -120,7 +120,7 @@
120
120
  /// }
121
121
 
122
122
  @mixin bpk-breakpoint-small-tablet-only {
123
- @media #{$bpk-breakpoint-query-small-tablet-only} {
123
+ @media #{tokens.$bpk-breakpoint-query-small-tablet-only} {
124
124
  @content;
125
125
  }
126
126
  }
@@ -139,7 +139,7 @@
139
139
  /// }
140
140
 
141
141
  @mixin bpk-breakpoint-tablet-only {
142
- @media #{$bpk-breakpoint-query-tablet-only} {
142
+ @media #{tokens.$bpk-breakpoint-query-tablet-only} {
143
143
  @content;
144
144
  }
145
145
  }
@@ -158,7 +158,7 @@
158
158
  /// }
159
159
 
160
160
  @mixin bpk-breakpoint-above-mobile {
161
- @media #{$bpk-breakpoint-query-above-mobile} {
161
+ @media #{tokens.$bpk-breakpoint-query-above-mobile} {
162
162
  @content;
163
163
  }
164
164
  }
@@ -177,7 +177,7 @@
177
177
  /// }
178
178
 
179
179
  @mixin bpk-breakpoint-above-tablet {
180
- @media #{$bpk-breakpoint-query-above-tablet} {
180
+ @media #{tokens.$bpk-breakpoint-query-above-tablet} {
181
181
  @content;
182
182
  }
183
183
  }
@@ -196,7 +196,7 @@
196
196
  /// }
197
197
 
198
198
  @mixin bpk-breakpoint-above-desktop {
199
- @media #{$bpk-breakpoint-query-above-desktop} {
199
+ @media #{tokens.$bpk-breakpoint-query-above-desktop} {
200
200
  @content;
201
201
  }
202
202
  }
@@ -215,7 +215,7 @@
215
215
  /// }
216
216
 
217
217
  @mixin bpk-breakpoint-desktop-only {
218
- @media #{$bpk-breakpoint-query-desktop-only} {
218
+ @media #{tokens.$bpk-breakpoint-query-desktop-only} {
219
219
  @content;
220
220
  }
221
221
  }