@skyscanner/backpack-web 42.5.1 → 42.6.0

package/bpk-component-drawer/src/BpkDrawer.d.ts

@@ -6,7 +6,7 @@ export type Props = {
     onClose?: (arg0?: TouchEvent | MouseEvent | KeyboardEvent, arg1?: {
         source: 'ESCAPE' | 'DOCUMENT_CLICK';
     }) => void;
-    title: string;
+    title: ReactNode;
     getApplicationElement: () => HTMLElement | null;
     width?: string;
     renderTarget?: null | HTMLElement | (() => null | HTMLElement);

package/bpk-component-drawer/src/BpkDrawerContent.d.ts

@@ -5,7 +5,7 @@ type Props = {
     onCloseAnimationComplete: () => void;
     onClose: () => void;
     id: string;
-    title: string;
+    title: ReactNode;
     width?: string;
     className?: string | null;
     contentClassName?: string;

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

@@ -16,3 +16,5 @@ export type { BpkCommonLayoutProps, BpkBoxSpecificProps, BpkFlexSpecificProps, B
 export type { BpkStackSpecificProps } from './src/types';
 export type { BpkSpacingToken, BpkBreakpointToken, BpkSpacingValue, BpkBreakpointValue, } from './src/tokens';
 export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage, } from './src/tokens';
+export { BACKGROUND_COLORS } from './src/backgroundColors';
+export type { BpkLayoutBackgroundColor } from './src/backgroundColors';

package/bpk-component-layout/index.js

@@ -26,4 +26,7 @@ export { BpkStack, BpkHStack, BpkVStack } from "./src/BpkStack";
 
 // Export token types and utilities
 
-export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage } from "./src/tokens";
+export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage } from "./src/tokens";
+
+// Export color constants and types
+export { BACKGROUND_COLORS } from "./src/backgroundColors";

package/bpk-component-layout/src/BpkBox.js

@@ -18,21 +18,31 @@
 
 import { forwardRef } from 'react';
 import { Box } from '@chakra-ui/react';
-import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
+import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const BpkBox = /*#__PURE__*/forwardRef(({
+  backgroundColor,
   children,
+  color,
   ...props
 }, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkBox'
   });
-  return /*#__PURE__*/_jsx(Box, {
-    ref: ref,
-    ...getDataComponentAttribute('Box'),
-    ...processedProps,
-    children: children
-  });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(Box, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('Box'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkBox.displayName = 'BpkBox';

package/bpk-component-layout/src/BpkFlex.js

@@ -18,13 +18,17 @@
 
 import { forwardRef } from 'react';
 import { Flex } from '@chakra-ui/react';
-import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
+import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const BpkFlex = /*#__PURE__*/forwardRef(({
   align,
+  backgroundColor,
   basis,
   children,
+  color,
   direction,
   grow,
   inline,
@@ -47,8 +51,12 @@ export const BpkFlex = /*#__PURE__*/forwardRef(({
       flexBasis: basis
     }
   });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
   return /*#__PURE__*/_jsx(Flex, {
-    ref: ref,
+    ref: ref
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: classNames,
     ...getDataComponentAttribute('Flex'),
     ...processedProps,
     display: inline ? 'inline-flex' : undefined,

package/bpk-component-layout/src/BpkGrid.js

@@ -18,15 +18,19 @@
 
 import { forwardRef } from 'react';
 import { Grid } from '@chakra-ui/react';
-import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
+import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const BpkGrid = /*#__PURE__*/forwardRef(({
   align,
   autoColumns,
   autoFlow,
   autoRows,
+  backgroundColor,
   children,
+  color,
   column,
   inline,
   justify,
@@ -53,8 +57,12 @@ export const BpkGrid = /*#__PURE__*/forwardRef(({
       gridRow: row
     }
   });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
   return /*#__PURE__*/_jsx(Grid, {
-    ref: ref,
+    ref: ref
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: classNames,
     ...getDataComponentAttribute('Grid'),
     ...processedProps,
     display: inline ? 'inline-grid' : undefined,

package/bpk-component-layout/src/BpkGridItem.js

@@ -18,15 +18,19 @@
 
 import { forwardRef } from 'react';
 import { GridItem } from '@chakra-ui/react';
-import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
+import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const BpkGridItem = /*#__PURE__*/forwardRef(({
   area,
+  backgroundColor,
   children,
   colEnd,
   colSpan,
   colStart,
+  color,
   rowEnd,
   rowSpan,
   rowStart,
@@ -39,8 +43,12 @@ export const BpkGridItem = /*#__PURE__*/forwardRef(({
   }, {
     component: 'BpkGridItem'
   });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
   return /*#__PURE__*/_jsx(GridItem, {
-    ref: ref,
+    ref: ref
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: classNames,
     ...getDataComponentAttribute('GridItem'),
     ...processedProps,
     area: area,

package/bpk-component-layout/src/BpkLayout.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-layout.bpk-layout--text-disabled{color:rgba(0,0,0,.2)}.bpk-layout.bpk-layout--text-disabled-on-dark{color:hsla(0,0%,100%,.5)}.bpk-layout.bpk-layout--text-error{color:#e70866}.bpk-layout.bpk-layout--text-hero{color:#0062e3}.bpk-layout.bpk-layout--text-link{color:#0062e3}.bpk-layout.bpk-layout--text-on-dark{color:#fff}.bpk-layout.bpk-layout--text-on-light{color:#161616}.bpk-layout.bpk-layout--text-primary{color:#161616}.bpk-layout.bpk-layout--text-primary-inverse{color:#fff}.bpk-layout.bpk-layout--text-secondary{color:#626971}.bpk-layout.bpk-layout--text-success{color:#0c838a}.bpk-layout.bpk-layout--surface-default{background-color:#fff}.bpk-layout.bpk-layout--surface-elevated{background-color:#fff}.bpk-layout.bpk-layout--surface-hero{background-color:#0062e3}.bpk-layout.bpk-layout--surface-contrast{background-color:#05203c}.bpk-layout.bpk-layout--surface-highlight{background-color:#e0e4e9}.bpk-layout.bpk-layout--surface-subtle{background-color:#e3f0ff}.bpk-layout.bpk-layout--surface-low-contrast{background-color:#f5f7fa}.bpk-layout.bpk-layout--surface-tint{background-color:hsla(0,0%,100%,.1)}.bpk-layout.bpk-layout--canvas{background-color:#fff}.bpk-layout.bpk-layout--canvas-contrast{background-color:#eff3f8}.bpk-layout.bpk-layout--status-success-fill{background-color:#d4fff2}.bpk-layout.bpk-layout--status-danger-fill{background-color:#ffe9f9}.bpk-layout.bpk-layout--status-warning-fill{background-color:#fff7cf}

package/bpk-component-layout/src/BpkProvider.js

@@ -18,19 +18,17 @@
 
 import { useEffect, useState } from 'react';
 import { LocaleProvider } from '@ark-ui/react';
-import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react';
+import { ChakraProvider, createSystem, defaultBaseConfig } from '@chakra-ui/react';
 import { createBpkConfig } from "./theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Creates a Chakra UI system with Backpack token mappings
- * Chakra UI 3.0 uses `createSystem` with `defaultConfig` and custom config
+ * Creates a Chakra UI system with Backpack token mappings.
+ *
+ * Uses `defaultBaseConfig` (conditions + utilities only) instead of
+ * `defaultConfig` to avoid bundling ~141KB of unused component recipes.
+ * See: https://chakra-ui.com/guides/component-bundle-optimization
  */
-// Remove Chakra's global CSS to prevent style conflicts with Backpack components
-const {
-  globalCss: _chakraGlobalCss,
-  ...defaultConfigWithoutGlobalCss
-} = defaultConfig;
-const bpkSystem = createSystem(defaultConfigWithoutGlobalCss, createBpkConfig());
+const bpkSystem = createSystem(defaultBaseConfig, createBpkConfig());
 // Fallback locale mapping used when no explicit locale is available on the document.
 // Maps DOM direction to minimal BCP 47 locales understood by Ark's isRTL() utility.
 // 'ar-SA' is the minimal RTL locale — Ark only uses it to derive dir='rtl'.

package/bpk-component-layout/src/BpkStack.js

@@ -18,51 +18,77 @@
 
 import { forwardRef } from 'react';
 import { Stack, VStack, HStack } from '@chakra-ui/react';
-import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
+import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const BpkStack = /*#__PURE__*/forwardRef(({
+  backgroundColor,
   children,
+  color,
   ...props
 }, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
-  return /*#__PURE__*/_jsx(Stack, {
-    ref: ref,
-    ...getDataComponentAttribute('Stack'),
-    ...processedProps,
-    children: children
-  });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(Stack, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('Stack'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkStack.displayName = 'BpkStack';
 export const BpkHStack = /*#__PURE__*/forwardRef(({
+  backgroundColor,
   children,
+  color,
   ...props
 }, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
-  return /*#__PURE__*/_jsx(HStack, {
-    ref: ref,
-    ...getDataComponentAttribute('HStack'),
-    ...processedProps,
-    children: children
-  });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(HStack, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('HStack'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkHStack.displayName = 'BpkHStack';
 export const BpkVStack = /*#__PURE__*/forwardRef(({
+  backgroundColor,
   children,
+  color,
   ...props
 }, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
-  return /*#__PURE__*/_jsx(VStack, {
-    ref: ref,
-    ...getDataComponentAttribute('VStack'),
-    ...processedProps,
-    children: children
-  });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(VStack, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('VStack'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkVStack.displayName = 'BpkVStack';

package/bpk-component-layout/src/backgroundColors.d.ts

@@ -0,0 +1,16 @@
+export declare const BACKGROUND_COLORS: {
+    readonly statusSuccessFill: "status-success-fill";
+    readonly statusDangerFill: "status-danger-fill";
+    readonly statusWarningFill: "status-warning-fill";
+    readonly canvas: "canvas";
+    readonly canvasContrast: "canvas-contrast";
+    readonly surfaceDefault: "surface-default";
+    readonly surfaceElevated: "surface-elevated";
+    readonly surfaceHero: "surface-hero";
+    readonly surfaceContrast: "surface-contrast";
+    readonly surfaceHighlight: "surface-highlight";
+    readonly surfaceSubtle: "surface-subtle";
+    readonly surfaceLowContrast: "surface-low-contrast";
+    readonly surfaceTint: "surface-tint";
+};
+export type BpkLayoutBackgroundColor = (typeof BACKGROUND_COLORS)[keyof typeof BACKGROUND_COLORS];

package/bpk-component-layout/src/backgroundColors.js

@@ -0,0 +1,37 @@
+/*
+ * 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 { SURFACE_COLORS } from "../../bpk-react-utils";
+
+// Canvas colors (day mode only)
+const CANVAS_COLORS = {
+  canvas: 'canvas',
+  canvasContrast: 'canvas-contrast'
+};
+
+// Status fill colors (day mode only — only fill, not spot or on-dark)
+const STATUS_FILL_COLORS = {
+  statusSuccessFill: 'status-success-fill',
+  statusDangerFill: 'status-danger-fill',
+  statusWarningFill: 'status-warning-fill'
+};
+export const BACKGROUND_COLORS = {
+  ...SURFACE_COLORS,
+  ...CANVAS_COLORS,
+  ...STATUS_FILL_COLORS
+};

package/bpk-component-layout/src/commonProps.d.ts

@@ -1,6 +1,7 @@
 import type { AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { BpkLayoutBackgroundColor } from './backgroundColors';
 import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkResponsiveValue } from './tokens';
-import type { TextStyle } from '../../bpk-component-text/src/BpkText';
+import type { TextColor, TextStyle } from '../../bpk-component-text';
 /**
  * Common spacing-related props shared by all Backpack layout components
  * All spacing props must use Backpack spacing tokens or percentages
@@ -55,9 +56,9 @@ export interface BpkCommonLayoutProps extends BpkSpacingProps {
     textStyle?: BpkResponsiveValue<TextStyle>;
     'data-testid'?: string;
     'data-cy'?: string;
-    color?: never;
+    color?: TextColor;
+    backgroundColor?: BpkLayoutBackgroundColor;
     background?: never;
-    backgroundColor?: never;
     borderColor?: never;
     borderTopColor?: never;
     borderRightColor?: never;

package/bpk-mixins/_borders.scss

@@ -37,7 +37,11 @@
 /// @access private
 
 @mixin _bpk-border-top($size, $color, $inset) {
-  $offset-y: if($inset == inset, $size, -#{$size});
+  $offset-y: $size;
+
+  @if $inset != inset {
+    $offset-y: -#{$size};
+  }
 
   box-shadow: 0 $offset-y 0 0 $color #{$inset};
 }
@@ -47,7 +51,11 @@
 /// @access private
 
 @mixin bpk-border-right($size, $color, $inset) {
-  $offset-x: if($inset == inset, -#{$size}, $size);
+  $offset-x: -#{$size};
+
+  @if $inset != inset {
+    $offset-x: $size;
+  }
 
   box-shadow: $offset-x 0 0 0 $color #{$inset};
 }
@@ -57,7 +65,11 @@
 /// @access private
 
 @mixin _bpk-border-bottom($size, $color, $inset) {
-  $offset-y: if($inset == inset, -#{$size}, $size);
+  $offset-y: -#{$size};
+
+  @if $inset != inset {
+    $offset-y: $size;
+  }
 
   box-shadow: 0 $offset-y 0 0 $color #{$inset};
 }
@@ -67,7 +79,11 @@
 /// @access private
 
 @mixin bpk-border-left($size, $color, $inset) {
-  $offset-x: if($inset == inset, $size, -#{$size});
+  $offset-x: $size;
+
+  @if $inset != inset {
+    $offset-x: -#{$size};
+  }
 
   box-shadow: $offset-x 0 0 0 $color #{$inset};
 }

package/bpk-mixins/_scroll-indicators.scss

@@ -29,7 +29,11 @@
 /// @access private
 
 @mixin _bpk-scroll-indicator($gradient-color, $direction: 'left') {
-  $gradient-direction: if($direction == 'left', 90deg, 270deg);
+  $gradient-direction: 90deg;
+
+  @if $direction != 'left' {
+    $gradient-direction: 270deg;
+  }
 
   position: absolute;
   top: 0;

package/package.json

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