@skyscanner/backpack-web 41.18.0 → 42.0.0-test

package/bpk-component-autosuggest/index.js

@@ -14,8 +14,9 @@
  * 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 BpkAutosuggest from "./src/BpkAutosuggest";
+ */import BpkAutosuggestLegacy from "./src/BpkAutosuggest";
 import BpkAutosuggestSuggestion from "./src/BpkAutosuggestSuggestion";
 import BpkAutosuggestV2, { defaultTheme } from "./src/BpkAutosuggestV2/BpkAutosuggest";
+const BpkAutosuggest = BpkAutosuggestV2;
 export default BpkAutosuggest;
-export { BpkAutosuggestSuggestion, BpkAutosuggestV2, defaultTheme };
+export { BpkAutosuggestLegacy, BpkAutosuggestSuggestion, defaultTheme };

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

@@ -1,5 +1,5 @@
 import component, { BADGE_TYPES, type Props } from './src/BpkBadge';
-import themeAttributes from './src/themeAttributes';
+import themeAttributes, { allBadgeThemeAttributes, badgeThemeAttributes, badgeNormalThemeAttributes, badgeWarningThemeAttributes, badgeSuccessThemeAttributes, badgeCriticalThemeAttributes, badgeInverseThemeAttributes, badgeOutlineThemeAttributes, badgeStrongThemeAttributes, badgeBrandThemeAttributes } from './src/themeAttributes';
 export type BpkBadgeProps = Props;
 export default component;
-export { BADGE_TYPES, themeAttributes };
+export { BADGE_TYPES, themeAttributes, allBadgeThemeAttributes, badgeThemeAttributes, badgeNormalThemeAttributes, badgeWarningThemeAttributes, badgeSuccessThemeAttributes, badgeCriticalThemeAttributes, badgeInverseThemeAttributes, badgeOutlineThemeAttributes, badgeStrongThemeAttributes, badgeBrandThemeAttributes, };

package/bpk-component-badge/index.js

@@ -17,6 +17,6 @@
  */
 
 import component, { BADGE_TYPES } from "./src/BpkBadge";
-import themeAttributes from "./src/themeAttributes";
+import themeAttributes, { allBadgeThemeAttributes, badgeThemeAttributes, badgeNormalThemeAttributes, badgeWarningThemeAttributes, badgeSuccessThemeAttributes, badgeCriticalThemeAttributes, badgeInverseThemeAttributes, badgeOutlineThemeAttributes, badgeStrongThemeAttributes, badgeBrandThemeAttributes } from "./src/themeAttributes";
 export default component;
-export { BADGE_TYPES, themeAttributes };
+export { BADGE_TYPES, themeAttributes, allBadgeThemeAttributes, badgeThemeAttributes, badgeNormalThemeAttributes, badgeWarningThemeAttributes, badgeSuccessThemeAttributes, badgeCriticalThemeAttributes, badgeInverseThemeAttributes, badgeOutlineThemeAttributes, badgeStrongThemeAttributes, badgeBrandThemeAttributes };

package/bpk-component-badge/src/BpkBadge.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-badge{display:inline-flex;padding:.25rem .5rem;align-items:center;border-radius:.25rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-badge--centered{vertical-align:text-bottom}.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}html[dir=rtl] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.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}html[dir=rtl] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:#eff3f8;color:#161616;fill:#f55d42}.bpk-badge--success{background-color:#eff3f8;color:#161616;fill:#0c838a}.bpk-badge--critical{background-color:#eff3f8;color:#161616;fill:#e70866}.bpk-badge--normal{background-color:#eff3f8;color:#161616;fill:#161616}.bpk-badge--inverse{background-color:#fff;color:#161616;fill:#161616}.bpk-badge--outline{background-color:rgba(0,0,0,0);color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}.bpk-badge--strong{background-color:#05203c;color:#fff;fill:#fff}.bpk-badge--brand{background-color:#0062e3;color:#fff;fill:#fff}
+.bpk-badge{display:inline-flex;padding:.25rem .5rem;align-items:center;border-radius:.25rem;border-radius:var(--bpk-badge-border-radius, 0.25rem);margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400;font-size:.875rem;font-size:var(--bpk-badge-font-size, 0.875rem);font-weight:400;font-weight:var(--bpk-badge-font-weight, 400);line-height:1.25rem;line-height:var(--bpk-badge-line-height, 1.25rem)}.bpk-badge--centered{vertical-align:text-bottom}.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}html[dir=rtl] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.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}html[dir=rtl] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:#eff3f8;background-color:var(--bpk-badge-warning-background-color, rgb(239, 243, 248));color:#161616;color:var(--bpk-badge-warning-text-color, rgb(22, 22, 22));fill:#f55d42;fill:var(--bpk-badge-warning-icon-color, rgb(245, 93, 66))}.bpk-badge--success{background-color:#eff3f8;background-color:var(--bpk-badge-success-background-color, rgb(239, 243, 248));color:#161616;color:var(--bpk-badge-success-text-color, rgb(22, 22, 22));fill:#0c838a;fill:var(--bpk-badge-success-icon-color, rgb(12, 131, 138))}.bpk-badge--critical{background-color:#eff3f8;background-color:var(--bpk-badge-critical-background-color, rgb(239, 243, 248));color:#161616;color:var(--bpk-badge-critical-text-color, rgb(22, 22, 22));fill:#e70866;fill:var(--bpk-badge-critical-icon-color, rgb(231, 8, 102))}.bpk-badge--normal{background-color:#eff3f8;background-color:var(--bpk-badge-normal-background-color, rgb(239, 243, 248));color:#161616;color:var(--bpk-badge-normal-text-color, rgb(22, 22, 22));fill:#161616;fill:var(--bpk-badge-normal-icon-color, rgb(22, 22, 22))}.bpk-badge--inverse{background-color:#fff;background-color:var(--bpk-badge-inverse-background-color, rgb(255, 255, 255));color:#161616;color:var(--bpk-badge-inverse-text-color, rgb(22, 22, 22));fill:#161616;fill:var(--bpk-badge-inverse-icon-color, rgb(22, 22, 22))}.bpk-badge--outline{box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px var(--bpk-badge-outline-text-color, rgb(255, 255, 255));background-color:rgba(0,0,0,0);background-color:var(--bpk-badge-outline-background-color, transparent);color:#fff;color:var(--bpk-badge-outline-text-color, rgb(255, 255, 255));fill:#fff;fill:var(--bpk-badge-outline-icon-color, rgb(255, 255, 255))}.bpk-badge--strong{background-color:#05203c;background-color:var(--bpk-badge-strong-background-color, rgb(5, 32, 60));color:#fff;color:var(--bpk-badge-strong-text-color, rgb(255, 255, 255));fill:#fff;fill:var(--bpk-badge-strong-icon-color, rgb(255, 255, 255))}.bpk-badge--brand{background-color:#0062e3;background-color:var(--bpk-badge-brand-background-color, rgb(0, 98, 227));color:#fff;color:var(--bpk-badge-brand-text-color, rgb(255, 255, 255));fill:#fff;fill:var(--bpk-badge-brand-icon-color, rgb(255, 255, 255))}

package/bpk-component-badge/src/themeAttributes.d.ts

@@ -1,2 +1,25 @@
-declare const _default: string[];
-export default _default;
+export declare const badgeThemeAttributes: string[];
+export declare const badgeNormalThemeAttributes: string[];
+export declare const badgeWarningThemeAttributes: string[];
+export declare const badgeSuccessThemeAttributes: string[];
+export declare const badgeCriticalThemeAttributes: string[];
+export declare const badgeInverseThemeAttributes: string[];
+export declare const badgeOutlineThemeAttributes: string[];
+export declare const badgeStrongThemeAttributes: string[];
+export declare const badgeBrandThemeAttributes: string[];
+/**
+ * Combined array of all badge theme attributes across all variants and shared properties.
+ * Requires all these attributes to be present in the BpkThemeProvider theme object or theming
+ * will be silently ignored. Prefer per-variant arrays (e.g. badgeNormalThemeAttributes) for
+ * targeted theming.
+ */
+export declare const allBadgeThemeAttributes: string[];
+/**
+ * @deprecated The keys in this array pre-date full badge theming support and map to CSS variables
+ * that were never wired up in the SCSS (the previous mixin used static token values directly).
+ * Use per-variant arrays (e.g. badgeNormalThemeAttributes) for fine-grained theming, or
+ * allBadgeThemeAttributes for the complete list.
+ * Will be removed in the next major release.
+ */
+declare const themeAttributes: string[];
+export default themeAttributes;

package/bpk-component-badge/src/themeAttributes.js

@@ -16,4 +16,30 @@
  * limitations under the License.
  */
 
-export default ['badgeBackgroundColor', 'badgeSuccessBackgroundColor', 'badgeDestructiveBackgroundColor'];
+export const badgeThemeAttributes = ['badgeFontSize', 'badgeFontWeight', 'badgeLineHeight', 'badgeBorderRadius'];
+export const badgeNormalThemeAttributes = ['badgeNormalBackgroundColor', 'badgeNormalTextColor', 'badgeNormalIconColor'];
+export const badgeWarningThemeAttributes = ['badgeWarningBackgroundColor', 'badgeWarningTextColor', 'badgeWarningIconColor'];
+export const badgeSuccessThemeAttributes = ['badgeSuccessBackgroundColor', 'badgeSuccessTextColor', 'badgeSuccessIconColor'];
+export const badgeCriticalThemeAttributes = ['badgeCriticalBackgroundColor', 'badgeCriticalTextColor', 'badgeCriticalIconColor'];
+export const badgeInverseThemeAttributes = ['badgeInverseBackgroundColor', 'badgeInverseTextColor', 'badgeInverseIconColor'];
+export const badgeOutlineThemeAttributes = ['badgeOutlineBackgroundColor', 'badgeOutlineTextColor', 'badgeOutlineIconColor'];
+export const badgeStrongThemeAttributes = ['badgeStrongBackgroundColor', 'badgeStrongTextColor', 'badgeStrongIconColor'];
+export const badgeBrandThemeAttributes = ['badgeBrandBackgroundColor', 'badgeBrandTextColor', 'badgeBrandIconColor'];
+
+/**
+ * Combined array of all badge theme attributes across all variants and shared properties.
+ * Requires all these attributes to be present in the BpkThemeProvider theme object or theming
+ * will be silently ignored. Prefer per-variant arrays (e.g. badgeNormalThemeAttributes) for
+ * targeted theming.
+ */
+export const allBadgeThemeAttributes = [...badgeThemeAttributes, ...badgeNormalThemeAttributes, ...badgeWarningThemeAttributes, ...badgeSuccessThemeAttributes, ...badgeCriticalThemeAttributes, ...badgeInverseThemeAttributes, ...badgeOutlineThemeAttributes, ...badgeStrongThemeAttributes, ...badgeBrandThemeAttributes];
+
+/**
+ * @deprecated The keys in this array pre-date full badge theming support and map to CSS variables
+ * that were never wired up in the SCSS (the previous mixin used static token values directly).
+ * Use per-variant arrays (e.g. badgeNormalThemeAttributes) for fine-grained theming, or
+ * allBadgeThemeAttributes for the complete list.
+ * Will be removed in the next major release.
+ */
+const themeAttributes = ['badgeBackgroundColor', 'badgeSuccessBackgroundColor', 'badgeDestructiveBackgroundColor'];
+export default themeAttributes;

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

@@ -1,6 +1,4 @@
-import { BpkButtonV2 } from './src/BpkButtonV2/BpkButton';
-export { BUTTON_TYPES, SIZE_TYPES, type ButtonType, type SizeType, type Props, } from './src/BpkButtonV2/common-types';
+import BpkButton from './src/BpkButton/BpkButton';
+export { BUTTON_TYPES, SIZE_TYPES, type ButtonType, type SizeType, type Props, } from './src/BpkButton/common-types';
 export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, } from './src/themeAttributes';
-declare const BpkButton: ({ blank, children, className, disabled, fullWidth, href, iconOnly, implicit, onClick, rel: propRel, size, submit, type, ...rest }: import("./src/BpkButtonV2/common-types").Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButton;
-export { BpkButtonV2 };

package/bpk-component-button/index.js

@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-import { BpkButtonV2 } from "./src/BpkButtonV2/BpkButton";
-export { BUTTON_TYPES, SIZE_TYPES } from "./src/BpkButtonV2/common-types";
+import BpkButton from "./src/BpkButton/BpkButton";
+export { BUTTON_TYPES, SIZE_TYPES } from "./src/BpkButton/common-types";
 export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes } from "./src/themeAttributes";
-const BpkButton = BpkButtonV2;
-export default BpkButton;
-export { BpkButtonV2 };
+export default BpkButton;

package/bpk-component-button/src/BpkButton/BpkButton.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from './common-types';
+declare const BpkButton: ({ blank, children, className, disabled, fullWidth, href, iconOnly, implicit, onClick, rel: propRel, size, submit, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkButton;

package/bpk-component-button/src/{BpkButtonV2 → BpkButton}/BpkButton.js

@@ -20,9 +20,7 @@ import { BUTTON_TYPES, SIZE_TYPES } from "./common-types";
 import COMMON_STYLES from "./BpkButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getCommonClassName = cssModules(COMMON_STYLES);
-
-// eslint-disable-next-line import/prefer-default-export
-export const BpkButtonV2 = ({
+const BpkButton = ({
   blank = false,
   children,
   className = null,
@@ -70,4 +68,5 @@ export const BpkButtonV2 = ({
     ...rest,
     children: content
   });
-};
+};
+export default BpkButton;

package/bpk-component-button/src/BpkButton/BpkButton.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{padding-right:.625rem;padding-left:.625rem}.bpk-button--large-icon-only{padding-right:.75rem;padding-left:.75rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;position:relative;display:inline;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link::after{bottom:auto}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled,.bpk-button--link:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:visited{color:#161616;color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-button--link:active{color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--icon-only{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.bpk-button--link-on-dark{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255));color:#fff;color:var(--bpk-link-alternate-color, rgb(255, 255, 255));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-on-dark::after{bottom:auto}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:active{color:#fff;color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}.bpk-button--link-on-dark--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-underlined{gap:.5rem;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;padding-bottom:.0625rem;transition:background-size 200ms ease;background:linear-gradient(rgb(22, 22, 22), rgb(22, 22, 22));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit{background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--link-underlined--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--full-width{display:block;width:100%}.bpk-button span>svg{display:var(--bpk-button-svg-display, block);vertical-align:var(--bpk-button-svg-vertical-align, baseline)}.bpk-button svg{fill:currentcolor}

package/bpk-component-button/src/themeAttributes.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-export const buttonThemeAttributes = ['buttonFontSize'];
+export const buttonThemeAttributes = ['buttonFontSize', 'buttonBorderRadius'];
 export const primaryThemeAttributes = ['buttonPrimaryTextColor', 'buttonPrimaryHoverTextColor', 'buttonPrimaryActiveTextColor', 'buttonPrimaryGradientStartColor', 'buttonPrimaryGradientEndColor', 'buttonPrimaryBackgroundColor', 'buttonPrimaryHoverBackgroundColor', 'buttonPrimaryActiveBackgroundColor'];
 export const primaryOnDarkThemeAttributes = ['buttonPrimaryOnDarkTextColor', 'buttonPrimaryOnDarkHoverTextColor', 'buttonPrimaryOnDarkActiveTextColor', 'buttonPrimaryOnDarkBackgroundColor', 'buttonPrimaryOnDarkHoverBackgroundColor', 'buttonPrimaryOnDarkActiveBackgroundColor'];
 export const primaryOnLightThemeAttributes = ['buttonPrimaryOnLightTextColor', 'buttonPrimaryOnLightHoverTextColor', 'buttonPrimaryOnLightActiveTextColor', 'buttonPrimaryOnLightBackgroundColor', 'buttonPrimaryOnLightHoverBackgroundColor', 'buttonPrimaryOnLightActiveBackgroundColor'];

package/bpk-component-pagination/src/BpkPaginationPage.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-pagination-page:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}
+.bpk-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-pagination-page:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}

package/bpk-mixins/_badges.scss

@@ -39,9 +39,28 @@
   padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md();
   align-items: center;
 
-  @include radii.bpk-border-radius-xs;
+  @include utils.bpk-themeable-property(
+    border-radius,
+    --bpk-badge-border-radius,
+    tokens.$bpk-border-radius-xs
+  );
   @include typography.bpk-text;
   @include typography.bpk-footnote;
+  @include utils.bpk-themeable-property(
+    font-size,
+    --bpk-badge-font-size,
+    tokens.$bpk-font-size-sm
+  );
+  @include utils.bpk-themeable-property(
+    font-weight,
+    --bpk-badge-font-weight,
+    tokens.$bpk-font-weight-book
+  );
+  @include utils.bpk-themeable-property(
+    line-height,
+    --bpk-badge-line-height,
+    tokens.$bpk-line-height-sm
+  );
 }
 
 /// Centered badge. Modifies the bpk-badge mixin.
@@ -121,9 +140,21 @@
 ///   }
 
 @mixin bpk-badge--normal {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-primary-day;
-  fill: tokens.$bpk-text-primary-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-normal-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-normal-text-color,
+    tokens.$bpk-text-primary-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-normal-icon-color,
+    tokens.$bpk-text-primary-day
+  );
 }
 
 /// Warning badge. Modifies the bpk-badge mixin.
@@ -137,9 +168,21 @@
 ///   }
 
 @mixin bpk-badge--warning {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-on-light-day;
-  fill: tokens.$bpk-status-warning-spot-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-warning-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-warning-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-warning-icon-color,
+    tokens.$bpk-status-warning-spot-day
+  );
 }
 
 /// Success badge. Modifies the bpk-badge mixin.
@@ -153,9 +196,21 @@
 ///   }
 
 @mixin bpk-badge--success {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-on-light-day;
-  fill: tokens.$bpk-status-success-spot-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-success-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-success-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-success-icon-color,
+    tokens.$bpk-status-success-spot-day
+  );
 }
 
 /// Critical badge. Modifies the bpk-badge mixin.
@@ -169,9 +224,21 @@
 ///   }
 
 @mixin bpk-badge--critical {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-on-light-day;
-  fill: tokens.$bpk-status-danger-spot-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-critical-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-critical-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-critical-icon-color,
+    tokens.$bpk-status-danger-spot-day
+  );
 }
 
 /// Inverse badge. Modifies the bpk-badge mixin.
@@ -185,9 +252,21 @@
 ///   }
 
 @mixin bpk-badge--inverse {
-  background-color: tokens.$bpk-surface-default-day;
-  color: tokens.$bpk-text-primary-day;
-  fill: tokens.$bpk-text-primary-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-inverse-background-color,
+    tokens.$bpk-surface-default-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-inverse-text-color,
+    tokens.$bpk-text-primary-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-inverse-icon-color,
+    tokens.$bpk-text-primary-day
+  );
 }
 
 /// Outline badge. Modifies the bpk-badge mixin.
@@ -201,11 +280,30 @@
 ///   }
 
 @mixin bpk-badge--outline {
-  background-color: transparent;
-  color: tokens.$bpk-text-on-dark-day;
+  // The inset border intentionally shares --bpk-badge-outline-text-color with the text colour.
+  // This means badgeOutlineTextColor controls both the text and the visible border simultaneously.
+  // There is no separate badgeOutlineBorderColor attribute by design — if independent colours are
+  // ever needed, a dedicated CSS variable and theme attribute should be introduced at that point.
   box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
     tokens.$bpk-text-on-dark-day;
-  fill: tokens.$bpk-text-on-dark-day;
+  box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
+    var(--bpk-badge-outline-text-color, tokens.$bpk-text-on-dark-day);
+
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-outline-background-color,
+    transparent
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-outline-text-color,
+    tokens.$bpk-text-on-dark-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-outline-icon-color,
+    tokens.$bpk-text-on-dark-day
+  );
 }
 
 /// Strong badge. Modifies the bpk-badge mixin.
@@ -219,9 +317,21 @@
 ///   }
 
 @mixin bpk-badge--strong {
-  background-color: tokens.$bpk-core-primary-day;
-  color: tokens.$bpk-text-on-dark-day;
-  fill: tokens.$bpk-text-on-dark-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-strong-background-color,
+    tokens.$bpk-core-primary-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-strong-text-color,
+    tokens.$bpk-text-on-dark-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-strong-icon-color,
+    tokens.$bpk-text-on-dark-day
+  );
 }
 
 /// Brand badge. Modifies the bpk-badge mixin.
@@ -235,7 +345,19 @@
 ///   }
 
 @mixin bpk-badge--brand {
-  background-color: tokens.$bpk-core-accent-day;
-  color: tokens.$bpk-text-primary-inverse-day;
-  fill: tokens.$bpk-text-primary-inverse-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-brand-background-color,
+    tokens.$bpk-core-accent-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-brand-text-color,
+    tokens.$bpk-text-primary-inverse-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-brand-icon-color,
+    tokens.$bpk-text-primary-inverse-day
+  );
 }

package/bpk-mixins/_buttons.scss

@@ -39,13 +39,17 @@
   margin: 0;
   padding: (6 * tokens.$bpk-one-pixel-rem) tokens.bpk-spacing-base();
   border: 0;
-  border-radius: tokens.$bpk-button-border-radius;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   vertical-align: middle;
   user-select: none;
 
+  @include utils.bpk-themeable-property(
+    border-radius,
+    --bpk-button-border-radius,
+    tokens.$bpk-button-border-radius
+  );
   @include typography.bpk-label-1;
   @include utils.bpk-themeable-property(
     color,
@@ -532,7 +536,6 @@
 
   padding-right: $horizontal-padding;
   padding-left: $horizontal-padding;
-  border-radius: tokens.$bpk-button-border-radius;
 }
 
 /// Large icon-only button. Modifies the bpk-button & bpk-button--large lib.
@@ -555,7 +558,6 @@
 
   padding-right: $horizontal-padding;
   padding-left: $horizontal-padding;
-  border-radius: tokens.$bpk-button-border-radius;
 }
 
 /// Featured button. Modifies the bpk-button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.18.0",
+  "version": "42.0.0-test",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",

package/bpk-component-button/src/BpkButtonV2/BpkButton.d.ts

@@ -1,2 +0,0 @@
-import type { Props } from './common-types';
-export declare const BpkButtonV2: ({ blank, children, className, disabled, fullWidth, href, iconOnly, implicit, onClick, rel: propRel, size, submit, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/bpk-component-button/src/BpkButtonV2/BpkButton.module.css

@@ -1,18 +0,0 @@
-/*
- * 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.
- */
-.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;position:relative;display:inline;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link::after{bottom:auto}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled,.bpk-button--link:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:visited{color:#161616;color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-button--link:active{color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--icon-only{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.bpk-button--link-on-dark{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255));color:#fff;color:var(--bpk-link-alternate-color, rgb(255, 255, 255));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-on-dark::after{bottom:auto}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:active{color:#fff;color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}.bpk-button--link-on-dark--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-underlined{gap:.5rem;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;padding-bottom:.0625rem;transition:background-size 200ms ease;background:linear-gradient(rgb(22, 22, 22), rgb(22, 22, 22));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit{background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--link-underlined--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--full-width{display:block;width:100%}.bpk-button span>svg{display:var(--bpk-button-svg-display, block);vertical-align:var(--bpk-button-svg-vertical-align, baseline)}.bpk-button svg{fill:currentcolor}