@skyscanner/backpack-web 38.21.0 → 39.0.0

package/bpk-component-skeleton/index.d.ts

@@ -1,3 +1,3 @@
 import BpkSkeleton from "./src/BpkSkeleton";
-export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE } from './src/common-types';
+export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE, BACKGROUND_STYLE } from './src/common-types';
 export default BpkSkeleton;

package/bpk-component-skeleton/index.js

@@ -17,5 +17,5 @@
  */
 
 import BpkSkeleton from "./src/BpkSkeleton";
-export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE } from "./src/common-types";
+export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE, BACKGROUND_STYLE } from "./src/common-types";
 export default BpkSkeleton;

package/bpk-component-skeleton/src/BpkSkeleton.js

@@ -18,17 +18,18 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import BpkBaseSkeleton from "./BpkBaseSkeleton";
-import { SKELETON_TYPES, IMAGE_SKELETON_STYLE, SIZE_TYPES } from "./common-types";
+import { SKELETON_TYPES, IMAGE_SKELETON_STYLE, SIZE_TYPES, BACKGROUND_STYLE } from "./common-types";
 import STYLES from "./BpkSkeleton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkSkeleton = props => {
   const {
+    backgroundStyle = BACKGROUND_STYLE.default,
     size = SIZE_TYPES.default,
     type
   } = props;
   const isImageRounded = type === SKELETON_TYPES.image && props.style === IMAGE_SKELETON_STYLE.rounded;
-  const classNames = getClassName(`bpk-skeleton__${type}`, typeof size !== 'object' && `bpk-skeleton__${type}--${size}`, isImageRounded && 'bpk-skeleton__image--rounded');
+  const classNames = getClassName(`bpk-skeleton__${type}`, typeof size !== 'object' && `bpk-skeleton__${type}--${size}`, isImageRounded && 'bpk-skeleton__image--rounded', `bpk-skeleton__${backgroundStyle}`);
   const styleObj = typeof size === 'object' ? size : undefined;
   return /*#__PURE__*/_jsx(BpkBaseSkeleton, {
     skeletonStyle: classNames,

package/bpk-component-skeleton/src/BpkSkeleton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-skeleton__image{width:6rem;height:6rem}.bpk-skeleton__image--rounded{border-radius:.5rem}.bpk-skeleton__headline{width:5rem;border-radius:.25rem}.bpk-skeleton__headline--small{height:.5rem;border-radius:.125rem}.bpk-skeleton__headline--default{height:1rem;border-radius:.25rem}.bpk-skeleton__headline--large{height:2rem;border-radius:.25rem}.bpk-skeleton__circle{border-radius:50%}.bpk-skeleton__circle--small{width:2rem;height:2rem}.bpk-skeleton__circle--default{width:3rem;height:3rem}.bpk-skeleton__bodyText{height:.5rem;border-radius:.125rem}.bpk-skeleton__bodyText--small{width:7.125rem}.bpk-skeleton__bodyText--default{width:10.6875rem}.bpk-skeleton__bodyText--large{width:12.5rem}
+.bpk-skeleton__image{width:6rem;height:6rem}.bpk-skeleton__image--rounded{border-radius:.5rem}.bpk-skeleton__headline{width:5rem;border-radius:.25rem}.bpk-skeleton__headline--small{height:.5rem;border-radius:.125rem}.bpk-skeleton__headline--default{height:1rem;border-radius:.25rem}.bpk-skeleton__headline--large{height:2rem;border-radius:.25rem}.bpk-skeleton__circle{border-radius:50%}.bpk-skeleton__circle--small{width:2rem;height:2rem}.bpk-skeleton__circle--default{width:3rem;height:3rem}.bpk-skeleton__bodyText{height:.5rem;border-radius:.125rem}.bpk-skeleton__bodyText--small{width:7.125rem}.bpk-skeleton__bodyText--default{width:10.6875rem}.bpk-skeleton__bodyText--large{width:12.5rem}.bpk-skeleton__onContrast{background-color:hsla(0,0%,100%,.1)}

package/bpk-component-skeleton/src/common-types.d.ts

@@ -20,6 +20,11 @@ export declare const IMAGE_SKELETON_STYLE: {
     readonly default: "default";
 };
 export type ImageSkeletonStyle = (typeof IMAGE_SKELETON_STYLE)[keyof typeof IMAGE_SKELETON_STYLE];
+export declare const BACKGROUND_STYLE: {
+    readonly default: "default";
+    readonly onContrast: "onContrast";
+};
+export type BackgroundStyle = (typeof BACKGROUND_STYLE)[keyof typeof BACKGROUND_STYLE];
 type SizeMap = {
     [SKELETON_TYPES.image]: (typeof SIZE_TYPES)['default'];
     [SKELETON_TYPES.bodyText]: (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
@@ -30,8 +35,10 @@ export type ComponentProps = {
     type: Extract<SkeletonType, 'image'>;
     size?: SizeMap['image'] | CUSTOM_SIZE_TYPE;
     style?: ImageSkeletonStyle;
+    backgroundStyle?: BackgroundStyle;
 } | {
     type: Exclude<keyof SizeMap, 'image'>;
     size?: SizeMap[keyof SizeMap] | CUSTOM_SIZE_TYPE;
+    backgroundStyle?: BackgroundStyle;
 };
 export {};

package/bpk-component-skeleton/src/common-types.js

@@ -30,4 +30,8 @@ export const SKELETON_TYPES = {
 export const IMAGE_SKELETON_STYLE = {
   rounded: 'rounded',
   default: 'default'
+};
+export const BACKGROUND_STYLE = {
+  default: 'default',
+  onContrast: 'onContrast'
 };

package/bpk-mixins/_badges-v2.scss

@@ -18,10 +18,10 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
-@import 'typography.scss';
-@import 'radii.scss';
-@import 'utils.scss';
+@use 'tokens';
+@use 'typography';
+@use 'radii';
+@use 'utils';
 
 ////
 /// @group badges
@@ -36,12 +36,12 @@
 
 @mixin bpk-badge {
   display: inline-flex;
-  padding: bpk-spacing-sm() bpk-spacing-md();
+  padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md();
   align-items: center;
 
-  @include bpk-border-radius-xs;
-  @include bpk-text;
-  @include bpk-footnote;
+  @include radii.bpk-border-radius-xs;
+  @include typography.bpk-text;
+  @include typography.bpk-footnote;
 }
 
 /// Centered badge. Modifies the bpk-badge mixin.
@@ -76,11 +76,11 @@
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 
-  @include bpk-rtl {
+  @include utils.bpk-rtl {
     right: inherit;
     left: 0;
     border-bottom-left-radius: 0;
-    border-bottom-right-radius: $bpk-border-radius-xs;
+    border-bottom-right-radius: tokens.$bpk-border-radius-xs;
   }
 }
 
@@ -102,10 +102,10 @@
   border-top-right-radius: 0;
   border-bottom-left-radius: 0;
 
-  @include bpk-rtl {
+  @include utils.bpk-rtl {
     right: 0;
     left: inherit;
-    border-bottom-left-radius: $bpk-border-radius-xs;
+    border-bottom-left-radius: tokens.$bpk-border-radius-xs;
     border-bottom-right-radius: 0;
   }
 }
@@ -121,9 +121,9 @@
 ///   }
 
 @mixin bpk-badge--normal {
-  background-color: $bpk-private-badge-background-normal-day;
-  color: $bpk-text-primary-day;
-  fill: $bpk-text-primary-day;
+  background-color: tokens.$bpk-private-badge-background-normal-day;
+  color: tokens.$bpk-text-primary-day;
+  fill: tokens.$bpk-text-primary-day;
 }
 
 /// Warning badge. Modifies the bpk-badge mixin.
@@ -137,9 +137,9 @@
 ///   }
 
 @mixin bpk-badge--warning {
-  background-color: $bpk-private-badge-background-normal-day;
-  color: $bpk-text-on-light-day;
-  fill: $bpk-status-warning-spot-day;
+  background-color: tokens.$bpk-private-badge-background-normal-day;
+  color: tokens.$bpk-text-on-light-day;
+  fill: tokens.$bpk-status-warning-spot-day;
 }
 
 /// Success badge. Modifies the bpk-badge mixin.
@@ -153,9 +153,9 @@
 ///   }
 
 @mixin bpk-badge--success {
-  background-color: $bpk-private-badge-background-normal-day;
-  color: $bpk-text-on-light-day;
-  fill: $bpk-status-success-spot-day;
+  background-color: tokens.$bpk-private-badge-background-normal-day;
+  color: tokens.$bpk-text-on-light-day;
+  fill: tokens.$bpk-status-success-spot-day;
 }
 
 /// Critical badge. Modifies the bpk-badge mixin.
@@ -169,9 +169,9 @@
 ///   }
 
 @mixin bpk-badge--critical {
-  background-color: $bpk-private-badge-background-normal-day;
-  color: $bpk-text-on-light-day;
-  fill: $bpk-status-danger-spot-day;
+  background-color: tokens.$bpk-private-badge-background-normal-day;
+  color: tokens.$bpk-text-on-light-day;
+  fill: tokens.$bpk-status-danger-spot-day;
 }
 
 /// Inverse badge. Modifies the bpk-badge mixin.
@@ -185,9 +185,9 @@
 ///   }
 
 @mixin bpk-badge--inverse {
-  background-color: $bpk-surface-default-day;
-  color: $bpk-text-primary-day;
-  fill: $bpk-text-primary-day;
+  background-color: tokens.$bpk-surface-default-day;
+  color: tokens.$bpk-text-primary-day;
+  fill: tokens.$bpk-text-primary-day;
 }
 
 /// Outline badge. Modifies the bpk-badge mixin.
@@ -202,9 +202,10 @@
 
 @mixin bpk-badge--outline {
   background-color: transparent;
-  color: $bpk-text-on-dark-day;
-  box-shadow: inset 0 0 0 $bpk-border-size-sm $bpk-text-on-dark-day;
-  fill: $bpk-text-on-dark-day;
+  color: tokens.$bpk-text-on-dark-day;
+  box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
+    tokens.$bpk-text-on-dark-day;
+  fill: tokens.$bpk-text-on-dark-day;
 }
 
 /// Strong badge. Modifies the bpk-badge mixin.
@@ -218,9 +219,9 @@
 ///   }
 
 @mixin bpk-badge--strong {
-  background-color: $bpk-core-primary-day;
-  color: $bpk-text-on-dark-day;
-  fill: $bpk-text-on-dark-day;
+  background-color: tokens.$bpk-core-primary-day;
+  color: tokens.$bpk-text-on-dark-day;
+  fill: tokens.$bpk-text-on-dark-day;
 }
 
 /// Brand badge. Modifies the bpk-badge mixin.
@@ -234,7 +235,7 @@
 ///   }
 
 @mixin bpk-badge--brand {
-  background-color: $bpk-core-accent-day;
-  color: $bpk-text-primary-inverse-day;
-  fill: $bpk-text-primary-inverse-day;
+  background-color: tokens.$bpk-core-accent-day;
+  color: tokens.$bpk-text-primary-inverse-day;
+  fill: tokens.$bpk-text-primary-inverse-day;
 }

package/bpk-mixins/_badges.scss

@@ -18,10 +18,10 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
-@import 'radii.scss';
-@import 'typography.scss';
-@import 'utils.scss';
+@use 'tokens';
+@use 'radii';
+@use 'typography';
+@use 'utils';
 
 ////
 /// @group badges
@@ -36,12 +36,12 @@
 
 @mixin bpk-badge {
   display: inline-flex;
-  padding: bpk-spacing-sm() bpk-spacing-md();
+  padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md();
   align-items: center;
 
-  @include bpk-border-radius-xs;
-  @include bpk-text;
-  @include bpk-footnote;
+  @include radii.bpk-border-radius-xs;
+  @include typography.bpk-text;
+  @include typography.bpk-footnote;
 }
 
 /// Centered badge. Modifies the bpk-badge mixin.
@@ -76,11 +76,11 @@
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 
-  @include bpk-rtl {
+  @include utils.bpk-rtl {
     right: inherit;
     left: 0;
     border-bottom-left-radius: 0;
-    border-bottom-right-radius: $bpk-border-radius-xs;
+    border-bottom-right-radius: tokens.$bpk-border-radius-xs;
   }
 }
 
@@ -102,10 +102,10 @@
   border-top-right-radius: 0;
   border-bottom-left-radius: 0;
 
-  @include bpk-rtl {
+  @include utils.bpk-rtl {
     right: 0;
     left: inherit;
-    border-bottom-left-radius: $bpk-border-radius-xs;
+    border-bottom-left-radius: tokens.$bpk-border-radius-xs;
     border-bottom-right-radius: 0;
   }
 }
@@ -121,9 +121,9 @@
 ///   }
 
 @mixin bpk-badge--normal {
-  background-color: $bpk-private-badge-background-normal-day;
-  color: $bpk-text-primary-day;
-  fill: $bpk-text-primary-day;
+  background-color: tokens.$bpk-private-badge-background-normal-day;
+  color: tokens.$bpk-text-primary-day;
+  fill: tokens.$bpk-text-primary-day;
 }
 
 /// Warning badge. Modifies the bpk-badge mixin.
@@ -137,9 +137,9 @@
 ///   }
 
 @mixin bpk-badge--warning {
-  background-color: $bpk-private-badge-background-normal-day;
-  color: $bpk-text-on-light-day;
-  fill: $bpk-status-warning-spot-day;
+  background-color: tokens.$bpk-private-badge-background-normal-day;
+  color: tokens.$bpk-text-on-light-day;
+  fill: tokens.$bpk-status-warning-spot-day;
 }
 
 /// Success badge. Modifies the bpk-badge mixin.
@@ -153,9 +153,9 @@
 ///   }
 
 @mixin bpk-badge--success {
-  background-color: $bpk-private-badge-background-normal-day;
-  color: $bpk-text-on-light-day;
-  fill: $bpk-status-success-spot-day;
+  background-color: tokens.$bpk-private-badge-background-normal-day;
+  color: tokens.$bpk-text-on-light-day;
+  fill: tokens.$bpk-status-success-spot-day;
 }
 
 /// Critical badge. Modifies the bpk-badge mixin.
@@ -169,9 +169,9 @@
 ///   }
 
 @mixin bpk-badge--critical {
-  background-color: $bpk-private-badge-background-normal-day;
-  color: $bpk-text-on-light-day;
-  fill: $bpk-status-danger-spot-day;
+  background-color: tokens.$bpk-private-badge-background-normal-day;
+  color: tokens.$bpk-text-on-light-day;
+  fill: tokens.$bpk-status-danger-spot-day;
 }
 
 /// Inverse badge. Modifies the bpk-badge mixin.
@@ -185,9 +185,9 @@
 ///   }
 
 @mixin bpk-badge--inverse {
-  background-color: $bpk-surface-default-day;
-  color: $bpk-text-primary-day;
-  fill: $bpk-text-primary-day;
+  background-color: tokens.$bpk-surface-default-day;
+  color: tokens.$bpk-text-primary-day;
+  fill: tokens.$bpk-text-primary-day;
 }
 
 /// Outline badge. Modifies the bpk-badge mixin.
@@ -202,9 +202,10 @@
 
 @mixin bpk-badge--outline {
   background-color: transparent;
-  color: $bpk-text-on-dark-day;
-  box-shadow: inset 0 0 0 $bpk-border-size-sm $bpk-text-on-dark-day;
-  fill: $bpk-text-on-dark-day;
+  color: tokens.$bpk-text-on-dark-day;
+  box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
+    tokens.$bpk-text-on-dark-day;
+  fill: tokens.$bpk-text-on-dark-day;
 }
 
 /// Strong badge. Modifies the bpk-badge mixin.
@@ -218,9 +219,9 @@
 ///   }
 
 @mixin bpk-badge--strong {
-  background-color: $bpk-core-primary-day;
-  color: $bpk-text-on-dark-day;
-  fill: $bpk-text-on-dark-day;
+  background-color: tokens.$bpk-core-primary-day;
+  color: tokens.$bpk-text-on-dark-day;
+  fill: tokens.$bpk-text-on-dark-day;
 }
 
 /// Brand badge. Modifies the bpk-badge mixin.
@@ -234,7 +235,7 @@
 ///   }
 
 @mixin bpk-badge--brand {
-  background-color: $bpk-core-accent-day;
-  color: $bpk-text-primary-inverse-day;
-  fill: $bpk-text-primary-inverse-day;
+  background-color: tokens.$bpk-core-accent-day;
+  color: tokens.$bpk-text-primary-inverse-day;
+  fill: tokens.$bpk-text-primary-inverse-day;
 }

package/bpk-mixins/_borders.scss

@@ -18,7 +18,7 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
+@use 'tokens';
 
 ////
 /// @group borders
@@ -82,7 +82,7 @@
 ///   }
 
 @mixin bpk-border-sm($color, $inset: inset) {
-  @include _bpk-border($bpk-border-size-sm, $color, $inset);
+  @include _bpk-border(tokens.$bpk-border-size-sm, $color, $inset);
 }
 
 /// Small "1px" top border.
@@ -95,7 +95,7 @@
 ///   }
 
 @mixin bpk-border-top-sm($color, $inset: inset) {
-  @include _bpk-border-top($bpk-border-size-sm, $color, $inset);
+  @include _bpk-border-top(tokens.$bpk-border-size-sm, $color, $inset);
 }
 
 /// Small "1px" right border.
@@ -108,7 +108,7 @@
 ///   }
 
 @mixin bpk-border-right-sm($color, $inset: inset) {
-  @include bpk-border-right($bpk-border-size-sm, $color, $inset);
+  @include bpk-border-right(tokens.$bpk-border-size-sm, $color, $inset);
 }
 
 /// Small "1px" bottom border.
@@ -121,7 +121,7 @@
 ///   }
 
 @mixin bpk-border-bottom-sm($color, $inset: inset) {
-  @include _bpk-border-bottom($bpk-border-size-sm, $color, $inset);
+  @include _bpk-border-bottom(tokens.$bpk-border-size-sm, $color, $inset);
 }
 
 /// Small "1px" left border.
@@ -134,7 +134,7 @@
 ///   }
 
 @mixin bpk-border-left-sm($color, $inset: inset) {
-  @include bpk-border-left($bpk-border-size-sm, $color, $inset);
+  @include bpk-border-left(tokens.$bpk-border-size-sm, $color, $inset);
 }
 
 /// Large "2px" border.
@@ -147,7 +147,7 @@
 ///   }
 
 @mixin bpk-border-lg($color, $inset: inset) {
-  @include _bpk-border($bpk-border-size-lg, $color, $inset);
+  @include _bpk-border(tokens.$bpk-border-size-lg, $color, $inset);
 }
 
 /// Large "2px" top border.
@@ -160,7 +160,7 @@
 ///   }
 
 @mixin bpk-border-top-lg($color, $inset: inset) {
-  @include _bpk-border-top($bpk-border-size-lg, $color, $inset);
+  @include _bpk-border-top(tokens.$bpk-border-size-lg, $color, $inset);
 }
 
 /// Large "2px" right border.
@@ -173,7 +173,7 @@
 ///   }
 
 @mixin bpk-border-right-lg($color, $inset: inset) {
-  @include bpk-border-right($bpk-border-size-lg, $color, $inset);
+  @include bpk-border-right(tokens.$bpk-border-size-lg, $color, $inset);
 }
 
 /// Large "2px" bottom border.
@@ -186,7 +186,7 @@
 ///   }
 
 @mixin bpk-border-bottom-lg($color, $inset: inset) {
-  @include _bpk-border-bottom($bpk-border-size-lg, $color, $inset);
+  @include _bpk-border-bottom(tokens.$bpk-border-size-lg, $color, $inset);
 }
 
 /// Large "2px" left border.
@@ -199,7 +199,7 @@
 ///   }
 
 @mixin bpk-border-left-lg($color, $inset: inset) {
-  @include bpk-border-left($bpk-border-size-lg, $color, $inset);
+  @include bpk-border-left(tokens.$bpk-border-size-lg, $color, $inset);
 }
 
 /// Extra large "3px" border.
@@ -212,7 +212,7 @@
 ///   }
 
 @mixin bpk-border-xl($color, $inset: inset) {
-  @include _bpk-border($bpk-border-size-xl, $color, $inset);
+  @include _bpk-border(tokens.$bpk-border-size-xl, $color, $inset);
 }
 
 /// Extra large "3px" top border.
@@ -225,7 +225,7 @@
 ///   }
 
 @mixin bpk-border-top-xl($color, $inset: inset) {
-  @include _bpk-border-top($bpk-border-size-xl, $color, $inset);
+  @include _bpk-border-top(tokens.$bpk-border-size-xl, $color, $inset);
 }
 
 /// Extra large "3px" right border.
@@ -238,7 +238,7 @@
 ///   }
 
 @mixin bpk-border-right-xl($color, $inset: inset) {
-  @include bpk-border-right($bpk-border-size-xl, $color, $inset);
+  @include bpk-border-right(tokens.$bpk-border-size-xl, $color, $inset);
 }
 
 /// Extra large "3px" bottom border.
@@ -251,7 +251,7 @@
 ///   }
 
 @mixin bpk-border-bottom-xl($color, $inset: inset) {
-  @include _bpk-border-bottom($bpk-border-size-xl, $color, $inset);
+  @include _bpk-border-bottom(tokens.$bpk-border-size-xl, $color, $inset);
 }
 
 /// Extra large "3px" left border.
@@ -264,5 +264,5 @@
 ///   }
 
 @mixin bpk-border-left-xl($color, $inset: inset) {
-  @include bpk-border-left($bpk-border-size-xl, $color, $inset);
+  @include bpk-border-left(tokens.$bpk-border-size-xl, $color, $inset);
 }

package/bpk-mixins/_breakpoints.scss

@@ -18,7 +18,7 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
+@use 'tokens';
 
 ////
 /// @group breakpoints
@@ -44,7 +44,7 @@
 ///   }
 
 @mixin bpk-breakpoint-small-mobile {
-  @media #{$bpk-breakpoint-query-small-mobile} {
+  @media #{tokens.$bpk-breakpoint-query-small-mobile} {
     @content;
   }
 }
@@ -63,7 +63,7 @@
 ///   }
 
 @mixin bpk-breakpoint-mobile {
-  @media #{$bpk-breakpoint-query-mobile} {
+  @media #{tokens.$bpk-breakpoint-query-mobile} {
     @content;
   }
 }
@@ -82,7 +82,7 @@
 ///   }
 
 @mixin bpk-breakpoint-small-tablet {
-  @media #{$bpk-breakpoint-query-small-tablet} {
+  @media #{tokens.$bpk-breakpoint-query-small-tablet} {
     @content;
   }
 }
@@ -101,7 +101,7 @@
 ///   }
 
 @mixin bpk-breakpoint-tablet {
-  @media #{$bpk-breakpoint-query-tablet} {
+  @media #{tokens.$bpk-breakpoint-query-tablet} {
     @content;
   }
 }
@@ -120,7 +120,7 @@
 ///   }
 
 @mixin bpk-breakpoint-small-tablet-only {
-  @media #{$bpk-breakpoint-query-small-tablet-only} {
+  @media #{tokens.$bpk-breakpoint-query-small-tablet-only} {
     @content;
   }
 }
@@ -139,7 +139,7 @@
 ///   }
 
 @mixin bpk-breakpoint-tablet-only {
-  @media #{$bpk-breakpoint-query-tablet-only} {
+  @media #{tokens.$bpk-breakpoint-query-tablet-only} {
     @content;
   }
 }
@@ -158,7 +158,7 @@
 ///   }
 
 @mixin bpk-breakpoint-above-mobile {
-  @media #{$bpk-breakpoint-query-above-mobile} {
+  @media #{tokens.$bpk-breakpoint-query-above-mobile} {
     @content;
   }
 }
@@ -177,7 +177,7 @@
 ///   }
 
 @mixin bpk-breakpoint-above-tablet {
-  @media #{$bpk-breakpoint-query-above-tablet} {
+  @media #{tokens.$bpk-breakpoint-query-above-tablet} {
     @content;
   }
 }
@@ -196,7 +196,7 @@
 ///   }
 
 @mixin bpk-breakpoint-above-desktop {
-  @media #{$bpk-breakpoint-query-above-desktop} {
+  @media #{tokens.$bpk-breakpoint-query-above-desktop} {
     @content;
   }
 }
@@ -215,7 +215,7 @@
 ///   }
 
 @mixin bpk-breakpoint-desktop-only {
-  @media #{$bpk-breakpoint-query-desktop-only} {
+  @media #{tokens.$bpk-breakpoint-query-desktop-only} {
     @content;
   }
 }