@skyscanner/backpack-web 42.10.0-dev-v24496611676.1 → 42.11.0

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

@@ -16,26 +16,19 @@
  * limitations under the License.
  */
 
-// Import only the tokens needed for border/radius/shadow utilities.
-// Typography tokens have been moved to resolveTextStyle.ts where textStyle is
-// resolved inline, avoiding the need to bundle the full text style map in the
-// Chakra theme config.
-import {
-// Border sizes
-borderSizeSm, borderSizeLg, borderSizeXl,
-// Border radii
-borderRadiusXs, borderRadiusSm, borderRadiusMd, borderRadiusLg, borderRadiusXl, borderRadiusFull,
-// Box shadows
-boxShadowSm, boxShadowLg, boxShadowXl } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import { defineConfig } from '@chakra-ui/react';
 
+// Import tokens from Backpack foundations
+// Note: Some tokens may not be in TypeScript definitions but exist at runtime
+import * as bpkTokens from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 // NOTE:
 // We intentionally do not use the raw breakpoint *values* from foundations here.
 // Foundations exports breakpoint values such as `breakpointMobile = "32rem"` which
 // are used primarily for max-width queries (e.g. `(max-width: 32rem)`).
 //
 // Backpack layout responsive values in this package are mobile-first and behave
-// as min-width thresholds. To align with Backpack’s intended breakpoint ranges
-// we define lower-bound (min-width) thresholds:
+// like Chakra breakpoints (min-width thresholds). To align with Backpack’s
+// intended breakpoint ranges we define lower-bound (min-width) thresholds:
 //
 // - small-mobile: 320px+
 // - mobile: 360px+
@@ -107,9 +100,9 @@ const spacingMap = {
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const borderSizeMap = {
-  'bpk-border-size-sm': borderSizeSm,
-  'bpk-border-size-lg': borderSizeLg,
-  'bpk-border-size-xl': borderSizeXl
+  'bpk-border-size-sm': bpkTokens.borderSizeSm,
+  'bpk-border-size-lg': bpkTokens.borderSizeLg,
+  'bpk-border-size-xl': bpkTokens.borderSizeXl
 };
 
 /**
@@ -118,12 +111,12 @@ const borderSizeMap = {
  */
 const borderRadiusMap = {
   'bpk-border-radius-none': '0',
-  'bpk-border-radius-xs': borderRadiusXs,
-  'bpk-border-radius-sm': borderRadiusSm,
-  'bpk-border-radius-md': borderRadiusMd,
-  'bpk-border-radius-lg': borderRadiusLg,
-  'bpk-border-radius-xl': borderRadiusXl,
-  'bpk-border-radius-full': borderRadiusFull
+  'bpk-border-radius-xs': bpkTokens.borderRadiusXs,
+  'bpk-border-radius-sm': bpkTokens.borderRadiusSm,
+  'bpk-border-radius-md': bpkTokens.borderRadiusMd,
+  'bpk-border-radius-lg': bpkTokens.borderRadiusLg,
+  'bpk-border-radius-xl': bpkTokens.borderRadiusXl,
+  'bpk-border-radius-full': bpkTokens.borderRadiusFull
 };
 
 /**
@@ -131,13 +124,36 @@ const borderRadiusMap = {
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const shadowMap = {
-  'bpk-shadow-sm': boxShadowSm,
-  'bpk-shadow-lg': boxShadowLg,
-  'bpk-shadow-xl': boxShadowXl
+  'bpk-shadow-sm': bpkTokens.boxShadowSm,
+  'bpk-shadow-lg': bpkTokens.boxShadowLg,
+  'bpk-shadow-xl': bpkTokens.boxShadowXl
 };
 
-// Breakpoint min-width values are defined in useCurrentBreakpoint.ts
-// and used via matchMedia listeners. No runtime breakpoint map is needed.
+/**
+ * Chakra expects raw width values (e.g. "48rem"), not full media queries.
+ * The media query construction is handled internally by Chakra's system.
+ *
+ * We align Backpack breakpoint tokens to Chakra's keys like this:
+ * - base: 0 (implicit)
+ * - sm: small-mobile (>= 320px)
+ * - md: mobile (>= 360px)
+ * - lg: small-tablet (>= 513px)
+ * - xl: tablet (>= 769px)
+ * - 2xl: desktop (>= 1025px)
+ */
+// TODO: CLOV-1021 - will add breakpoint boundary tokens to Backpack Foundations package and use them here after we ship the PoC
+const breakpointMap = {
+  base: '0rem',
+  sm: '20rem',
+  // 320px
+  md: '22.5rem',
+  // 360px
+  lg: '32.0625rem',
+  // 513px
+  xl: '48.0625rem',
+  // 769px
+  '2xl': '64.0625rem' // 1025px
+};
 
 /**
  * Exports spacing map for use in tokenUtils
@@ -192,4 +208,262 @@ export function getBorderRadiusValue(token) {
  */
 export function getShadowValue(token) {
   return shadowMap[token];
+}
+
+/**
+ * Maps Backpack text style tokens to Chakra UI textStyles.
+ * CSS property values are sourced from @skyscanner/bpk-foundations-web/tokens/base.es6.
+ * Each entry mirrors the corresponding SCSS mixin in bpk-mixins/_typography.scss.
+ */
+const textStylesMap = {
+  xs: {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  sm: {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  base: {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  lg: {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  xl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXl,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  xxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  xxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  xxxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxl,
+      fontWeight: bpkTokens.fontWeightBold,
+      letterSpacing: bpkTokens.letterSpacingTight
+    }
+  },
+  xxxxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxxl,
+      fontWeight: bpkTokens.fontWeightBold,
+      letterSpacing: bpkTokens.letterSpacingTight
+    }
+  },
+  caption: {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  footnote: {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'label-1': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'label-2': {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'label-3': {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'body-default': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'body-longform': {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  subheading: {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXl,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'heading-1': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-2': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-3': {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXlTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-4': {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLgTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-5': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBaseTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'hero-1': {
+    value: {
+      fontSize: bpkTokens.fontSize8Xl,
+      lineHeight: bpkTokens.lineHeight8Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-2': {
+    value: {
+      fontSize: bpkTokens.fontSize7Xl,
+      lineHeight: bpkTokens.lineHeight7Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-3': {
+    value: {
+      fontSize: bpkTokens.fontSize6Xl,
+      lineHeight: bpkTokens.lineHeight6Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-4': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-5': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-6': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'editorial-1': {
+    value: {
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxl,
+      fontWeight: bpkTokens.fontWeightLight
+    }
+  },
+  'editorial-2': {
+    value: {
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightLight
+    }
+  },
+  'editorial-3': {
+    value: {
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  }
+};
+export function createBpkConfig() {
+  // Convert breakpoint map to Chakra UI format
+  // Breakpoints in Chakra v3 are typically simple strings in the breakpoints object
+  const chakraBreakpoints = {};
+  Object.entries(breakpointMap).forEach(([token, value]) => {
+    chakraBreakpoints[token] = value;
+  });
+  return defineConfig({
+    // Disable Chakra's preflight (CSS reset) so it does not override Backpack's
+    // global font styles, in particular the `-webkit-font-smoothing: antialiased`
+    // setting applied by Backpack.
+    preflight: false,
+    cssVarsPrefix: 'bpk',
+    theme: {
+      tokens: {
+        spacing: spacingMap
+      },
+      textStyles: textStylesMap,
+      breakpoints: chakraBreakpoints
+    }
+  });
 }

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { expandTextStyleProps } from "./resolveTextStyle";
+import StackOptionKeys from "./BpkStack.constant";
 import { getSpacingValue } from "./theme";
 import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isValidPositionValue, isPercentage } from "./tokens";
 
@@ -34,6 +34,8 @@ import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isVali
 export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   BpkBox: {
     container: [
+    // Typography
+    'textStyle',
     // Display
     'display',
     // Flex container props
@@ -50,14 +52,14 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   },
   // Note: BpkFlex maps its public API props to these Chakra keys.
   BpkFlex: {
-    container: ['flexDirection', 'justifyContent', 'alignItems', 'flexWrap',
+    container: ['textStyle', 'flexDirection', 'justifyContent', 'alignItems', 'flexWrap',
     // Position keyword and overflow (from BpkCommonLayoutProps)
     'position', 'overflow', 'overflowX', 'overflowY'],
     item: ['flexGrow', 'flexShrink', 'flexBasis']
   },
   // Note: BpkGrid maps its public API props to these Chakra keys.
   BpkGrid: {
-    container: ['justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
+    container: ['textStyle', 'justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
     // Position keyword and overflow (from BpkCommonLayoutProps)
     'position', 'overflow', 'overflowX', 'overflowY'],
     item: [
@@ -65,13 +67,11 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
     'gridColumn', 'gridRow']
   },
   BpkGridItem: {
-    container: ['position', 'overflow', 'overflowX', 'overflowY']
+    container: ['textStyle', 'position', 'overflow', 'overflowX', 'overflowY']
   },
-  // BpkStack maps public API names (align, justify, wrap, direction) to CSS-standard
-  // names (alignItems, justifyContent, flexWrap, flexDirection) via responsiveProps.
-  // The allowlist must use the CSS-standard names since that's what arrives here.
+  // Note: BpkStack uses Chakra Stack option prop names directly.
   BpkStack: {
-    container: ['alignItems', 'justifyContent', 'flexWrap', 'flexDirection',
+    container: ['textStyle', ...StackOptionKeys,
     // Position keyword and overflow (from BpkCommonLayoutProps)
     'position', 'overflow', 'overflowX', 'overflowY']
   }
@@ -108,37 +108,18 @@ function filterToAllowlist(props, allowlist) {
  */
 export function processBpkComponentProps(props, options) {
   const processed = processBpkProps(props);
-
-  // --- textStyle inline resolution ---
-  // textStyle is no longer part of the Chakra theme config. Instead we resolve
-  // it here into concrete CSS properties (fontSize, lineHeight, fontWeight, etc.).
-  // The value may come from:
-  //   - responsiveProps (BpkFlex, BpkGrid explicitly pass it)
-  //   - processed props (BpkBox, BpkStack pass it via ...props)
-  const textStyleValue = options.responsiveProps?.textStyle ?? processed.textStyle;
-  delete processed.textStyle;
-  // Strip textStyle from responsiveProps without mutating the original object.
-  const {
-    textStyle: _ts,
-    ...cleanResponsiveProps
-  } = options.responsiveProps ?? {};
-  const expandedTextStyle = expandTextStyleProps(textStyleValue);
   const allowlist = BPK_RESPONSIVE_PROP_KEYS_BY_COMPONENT[options.component];
   // When responsiveProps is provided (e.g. BpkFlex maps direction→flexDirection),
   // merge it with any allowlisted props already in `processed` (e.g. position/overflow
   // that come in via ...props and are NOT included in responsiveProps).
   // responsiveProps takes precedence so that explicit prop-name mappings always win.
   const processedAllowlisted = filterToAllowlist(processed, allowlist);
-  const hasResponsiveProps = Object.keys(cleanResponsiveProps).length > 0;
-  const responsiveSource = hasResponsiveProps ? {
+  const responsiveSource = options.responsiveProps ? {
     ...processedAllowlisted,
-    ...filterToAllowlist(cleanResponsiveProps, allowlist)
+    ...filterToAllowlist(options.responsiveProps, allowlist)
   } : processedAllowlisted;
   if (Object.keys(responsiveSource).length === 0) {
-    return {
-      ...processed,
-      ...expandedTextStyle
-    };
+    return processed;
   }
 
   // Ensure allowlisted layout props do NOT fall through unprocessed (e.g. array responsive values).
@@ -159,11 +140,7 @@ export function processBpkComponentProps(props, options) {
       delete responsiveProcessed[key];
     }
   });
-
-  // Expanded textStyle props are applied last so they don't get overridden by
-  // the responsive pipeline, but explicit CSS props from the user take precedence.
   return {
-    ...expandedTextStyle,
     ...cleanedProcessed,
     ...responsiveProcessed
   };