@skyscanner/backpack-web 26.0.0 → 27.0.0

package/bpk-component-icon/sm/weather--cloudy.js

@@ -7,8 +7,6 @@ export default (({
 }) => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--fog.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--partly-cloudy.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--rain.js

@@ -7,8 +7,6 @@ export default (({
 }) => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--snow.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--thunderstorm.js

@@ -7,8 +7,6 @@ export default (({
 }) => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--tornado.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--wind.js

@@ -7,8 +7,6 @@ export default (({
 }) => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/wifi.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/window--reduce.js

@@ -7,8 +7,6 @@ export default (({
 }) => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/window.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/world--amer.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/world--apac.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/world--emea.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container--left-indicator::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(90deg, #fff, rgba(255,255,255,0));pointer-events:none;left:0}.bpk-mobile-scroll-container--right-indicator::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(270deg, #fff, rgba(255,255,255,0));pointer-events:none;right:0}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container--left-indicator::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, #fff, rgba(255,255,255,0));pointer-events:none;left:0}.bpk-mobile-scroll-container--right-indicator::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, #fff, rgba(255,255,255,0));pointer-events:none;right:0}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%}

package/bpk-component-skip-link/src/BpkSkipLink.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-skip-link{display:inline-block;padding:.75rem;transition:opacity 200ms ease-in-out;border-radius:.5rem;color:#fff;text-decoration:none;opacity:0;overflow:hidden;pointer-events:none;transition-delay:200ms;font-size:1rem;line-height:1.25rem;font-weight:700;background-color:#e70866;background-color:var(--bpk-skip-link-background-color, #e70866)}.bpk-skip-link:focus-within,.bpk-skip-link:focus{transition:none;opacity:1;transition-delay:0}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-skip-link{padding:.75rem 1rem;transition:opacity 200ms ease-in-out;border-radius:.5rem;color:#fff;text-decoration:none;opacity:0;overflow:hidden;pointer-events:none;transition-delay:200ms;font-size:1rem;line-height:1.25rem;font-weight:700;background-color:#e70866;background-color:var(--bpk-skip-link-background-color, #e70866)}.bpk-skip-link:focus-within,.bpk-skip-link:focus{transition:none;opacity:1;transition-delay:0}

package/bpk-component-slider/src/BpkSlider.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import Slider from 'react-slider';
 import PropTypes from 'prop-types';
 import { cssModules, isRTL } from "../../bpk-react-utils";
@@ -41,6 +42,7 @@ const BpkSlider = props => {
   return /*#__PURE__*/_jsx(Slider, {
     ...rest,
     withTracks: true,
+    snapDragDisabled: false,
     invert: invert,
     className: classNames.join(' '),
     thumbClassName: thumbClassNames.join(' '),

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -72,8 +72,7 @@ var XlSpinner = function XlSpinner(props) {
 };
 XlSpinner.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "32",
-  height: "32"
+  viewBox: "0 0 32 32"
 };
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSpinner.module.css";

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -72,8 +72,7 @@ var LgSpinner = function LgSpinner(props) {
 };
 LgSpinner.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24"
+  viewBox: "0 0 24 24"
 };
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSpinner.module.css";

package/bpk-component-spinner/src/BpkSpinner.js

@@ -19,105 +19,47 @@ import React from "react";
 var SmSpinner = function SmSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
-    children: [/*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      y: "7",
-      opacity: ".45",
-      rx: "1"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "12",
-      y: "7",
-      rx: "1"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "7",
-      y: "16",
-      opacity: ".3",
-      rx: "1",
-      transform: "rotate(-90 7 16)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "7",
-      y: "4",
-      opacity: ".65",
-      rx: "1",
-      transform: "rotate(-90 7 4)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "11.134",
-      y: "15.428",
-      opacity: ".25",
-      rx: "1",
-      transform: "rotate(-120 11.134 15.428)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "5.134",
-      y: "5.036",
-      opacity: ".55",
-      rx: "1",
-      transform: "rotate(-120 5.134 5.036)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "14.428",
-      y: "12.866",
-      opacity: ".2",
-      rx: "1",
-      transform: "rotate(-150 14.428 12.866)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "4.036",
-      y: "6.866",
-      opacity: ".5",
-      rx: "1",
-      transform: "rotate(-150 4.036 6.866)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "15.428",
-      y: "4.866",
-      opacity: ".85",
-      rx: "1",
-      transform: "rotate(150 15.428 4.866)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "5.036",
-      y: "10.866",
-      opacity: ".4",
-      rx: "1",
-      transform: "rotate(150 5.036 10.866)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "12.866",
-      y: "1.572",
-      opacity: ".75",
-      rx: "1",
-      transform: "rotate(120 12.866 1.572)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "6.866",
-      y: "11.964",
-      opacity: ".35",
-      rx: "1",
-      transform: "rotate(120 6.866 11.964)"
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M3 7H1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2Z",
+      opacity: ".45"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M15 7h-2a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2Z"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7 13v2a1 1 0 1 0 2 0v-2a1 1 0 1 0-2 0Z",
+      opacity: ".3"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7 1v2a1 1 0 0 0 2 0V1a1 1 0 0 0-2 0Z",
+      opacity: ".65"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m9.634 12.83 1 1.732a1 1 0 1 0 1.732-1l-1-1.732a1 1 0 0 0-1.732 1Z",
+      opacity: ".25"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m3.634 2.438 1 1.732a1 1 0 1 0 1.732-1l-1-1.732a1 1 0 1 0-1.732 1Z",
+      opacity: ".55"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m11.83 11.366 1.732 1a1 1 0 1 0 1-1.732l-1.732-1a1 1 0 1 0-1 1.732Z",
+      opacity: ".2"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m1.438 5.366 1.732 1a1 1 0 1 0 1-1.732l-1.732-1a1 1 0 1 0-1 1.732Z",
+      opacity: ".5"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m12.83 6.366 1.732-1a1 1 0 0 0-1-1.732l-1.732 1a1 1 0 0 0 1 1.732Z",
+      opacity: ".85"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m2.438 12.366 1.732-1a1 1 0 1 0-1-1.732l-1.732 1a1 1 0 1 0 1 1.732Z",
+      opacity: ".4"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m11.366 4.17 1-1.732a1 1 0 0 0-1.732-1l-1 1.732a1 1 0 0 0 1.732 1Z",
+      opacity: ".75"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m5.366 14.562 1-1.732a1 1 0 1 0-1.732-1l-1 1.732a1 1 0 0 0 1.732 1Z",
+      opacity: ".35"
     })]
   });
 };
 SmSpinner.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
+  viewBox: "0 0 16 16"
 };
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSpinner.module.css";

package/bpk-mixins/_index.scss

@@ -0,0 +1,35 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import 'src/bonds.scss';
+@import 'src/mixins/badges.scss';
+@import 'src/mixins/borders.scss';
+@import 'src/mixins/breakpoints.scss';
+@import 'src/mixins/buttons.scss';
+@import 'src/mixins/cards.scss';
+@import 'src/mixins/chips.scss';
+@import 'src/mixins/forms.scss';
+@import 'src/mixins/layers.scss';
+@import 'src/mixins/margins.scss';
+@import 'src/mixins/panels.scss';
+@import 'src/mixins/radii.scss';
+@import 'src/mixins/scroll-indicators.scss';
+@import 'src/mixins/shadows.scss';
+@import 'src/mixins/svgs.scss';
+@import 'src/mixins/typography.scss';
+@import 'src/mixins/utils.scss';

package/{bpk-storybook-utils/src/BpkStorybookUtils.js → bpk-mixins/sass-functions.js}

@@ -15,17 +15,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable global-require, no-console, import/no-mutable-exports */
-let action = (...args) => () => console.info(args);
-try {
-  const storybookAction = require('@storybook/addon-actions').action;
-  if (storybookAction) {
-    action = storybookAction;
-  }
-} catch (e) {
-  console.info('Storybook action is not available. Falling back to `console.log`.');
-}
-export default {
-  action
+
+// We disable eslint here as this package is listed as a peerDep so consumers are required to install this when using this package.
+// eslint-disable-next-line import/no-unresolved
+const nodeSass = require('node-sass');
+
+module.exports = {
+  'encodebase64($string)': (str) => {
+    const buffer = Buffer.from(str.getValue());
+
+    return nodeSass.types.String(buffer.toString('base64'));
+  },
 };
-export { action };

package/{bpk-storybook-utils/index.js → bpk-mixins/src/_bonds.scss}

@@ -14,10 +14,6 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { action } from "./src/BpkStorybookUtils";
-import BpkDarkExampleWrapper from "./src/BpkDarkExampleWrapper";
-export default {
-  action,
-  BpkDarkExampleWrapper
-};
-export { action, BpkDarkExampleWrapper };
+ */
+
+@import '~@skyscanner/bpk-foundations-web/tokens/base.default';

package/bpk-mixins/src/mixins/_badges.scss

@@ -0,0 +1,236 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../bonds.scss';
+@import 'typography.scss';
+
+////
+/// @group badges
+////
+
+/// Standard badge.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///   }
+
+@mixin bpk-badge {
+  display: inline-flex;
+  padding: bpk-spacing-sm() bpk-spacing-md();
+  align-items: center;
+
+  @include bpk-border-radius-xs;
+  @include bpk-text;
+  @include bpk-caption;
+}
+
+/// Centered badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--centered();
+///   }
+
+@mixin bpk-badge--centered {
+  vertical-align: text-bottom;
+}
+
+/// Right-docked badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--docked-right();
+///   }
+
+@mixin bpk-badge--docked-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  @include bpk-rtl {
+    right: inherit;
+    left: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: $bpk-border-radius-xs;
+  }
+}
+
+/// Left-docked badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--docked-left();
+///   }
+
+@mixin bpk-badge--docked-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0;
+
+  @include bpk-rtl {
+    right: 0;
+    left: inherit;
+    border-bottom-left-radius: $bpk-border-radius-xs;
+    border-bottom-right-radius: 0;
+  }
+}
+
+/// Normal badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--normal();
+///   }
+
+@mixin bpk-badge--normal {
+  background-color: $bpk-surface-highlight-day;
+  color: $bpk-text-primary-day;
+  fill: $bpk-text-primary-day;
+}
+
+/// Warning badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--warning();
+///   }
+
+@mixin bpk-badge--warning {
+  background-color: $bpk-status-warning-fill-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-text-on-light-day;
+}
+
+/// Success badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--success();
+///   }
+
+@mixin bpk-badge--success {
+  background-color: $bpk-status-success-fill-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-text-on-light-day;
+}
+
+/// Critical badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--critical();
+///   }
+
+@mixin bpk-badge--critical {
+  background-color: $bpk-status-danger-fill-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-text-on-light-day;
+}
+
+/// Inverse badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--inverse();
+///   }
+
+@mixin bpk-badge--inverse {
+  background-color: $bpk-surface-default-day;
+  color: $bpk-text-primary-day;
+  fill: $bpk-text-primary-day;
+}
+
+/// Outline badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--outline();
+///   }
+
+@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;
+}
+
+/// Strong badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--strong();
+///   }
+
+@mixin bpk-badge--strong {
+  background-color: $bpk-core-primary-day;
+  color: $bpk-text-on-dark-day;
+  fill: $bpk-text-on-dark-day;
+}
+
+/// Brand badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--brand();
+///   }
+
+@mixin bpk-badge--brand {
+  background-color: $bpk-core-accent-day;
+  color: $bpk-text-primary-inverse-day;
+  fill: $bpk-text-primary-inverse-day;
+}