[BpkCardV2] Fix spelling - change 'colour' to 'color' for US English consistency

examples/bpk-component-card-v2/stories.tsx

@@ -29,7 +29,7 @@ const meta: BpkCardV2Meta = {
     docs: {
       description: {
         component:
-          'BpkCardV2 is a composable, responsive card component that supports multi-section layouts, explicit composition, and flexible surface colour theming.',
+          'BpkCardV2 is a composable, responsive card component that supports multi-section layouts, explicit composition, and flexible surface color theming.',
       },
     },
   },
@@ -40,7 +40,7 @@ const meta: BpkCardV2Meta = {
       control: { type: 'radio' },
     },
     bgColor: {
-      description: 'Background surface colour token',
+      description: 'Background surface color token',
       options: [
         'surfaceDefault',
         'surfaceElevated',
@@ -151,7 +151,7 @@ export const ElevatedSurface: Story = {
   render: (args) => (
     <BpkCardV2 {...args}>
       <BpkCardV2.Header>Elevated Surface</BpkCardV2.Header>
-      <BpkCardV2.Body>This card uses the elevated surface colour for emphasis and visual hierarchy.</BpkCardV2.Body>
+      <BpkCardV2.Body>This card uses the elevated surface color for emphasis and visual hierarchy.</BpkCardV2.Body>
     </BpkCardV2>
   ),
 };
@@ -306,7 +306,7 @@ export const CardGrid: Story = {
       </BpkCardV2>
       <BpkCardV2 variant="default" bgColor="surfaceElevated">
         <BpkCardV2.Header>Elevated Surface</BpkCardV2.Header>
-        <BpkCardV2.Body>Card with elevated surface colour</BpkCardV2.Body>
+        <BpkCardV2.Body>Card with elevated surface color</BpkCardV2.Body>
       </BpkCardV2>
     </div>
   ),

packages/bpk-component-card-v2/CHANGELOG.md

@@ -22,7 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 #### Props and Configuration
 - **variant** - Visual styling (default with shadow, outlined with border)
-- **bgColor** - 8 surface colour tokens for flexible theming
+- **bgColor** - 8 surface color tokens for flexible theming
   - `surfaceDefault`
   - `surfaceElevated`
   - `surfaceTint`
@@ -45,7 +45,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 #### Styling
 - CSS Modules with BEM naming convention
-- 8 surface colour variants using Backpack design tokens
+- 8 surface color variants using Backpack design tokens
 - Shadow and border visual variants
 - Semantic dividers between sections
 - RTL support with logical properties
@@ -100,7 +100,7 @@ This is the initial release of BpkCardV2. If migrating from the previous BpkCard
 
 - BpkCardV2 uses explicit subcomponents (Header, Body, Footer) instead of children
 - Split layout now uses dedicated Primary/Secondary subcomponents
-- Surface colours are configured via `bgColor` prop instead of inline styling
+- Surface colors are configured via `bgColor` prop instead of inline styling
 - Variant support is now built-in (default shadow vs outlined border)
 
 ### Future Enhancements

packages/bpk-component-card-v2/README.md

@@ -1,6 +1,6 @@
 # BpkCardV2
 
-A composable, responsive card component for Backpack that supports multi-area layouts, explicit composition, and flexible surface colour theming. BpkCardV2 enables developers to build complex card designs without custom CSS or wrapper components.
+A composable, responsive card component for Backpack that supports multi-area layouts, explicit composition, and flexible surface color theming. BpkCardV2 enables developers to build complex card designs without custom CSS or wrapper components.
 
 ## Installation
 
@@ -33,11 +33,11 @@ import BpkCardV2 from '@skyscanner/backpack-web/bpk-component-card-v2';
 </BpkCardV2>
 ```
 
-### With custom surface colour
+### With custom surface color
 
 ```tsx
 <BpkCardV2 bgColor="surfaceElevated">
-  Card with elevated surface colour
+  Card with elevated surface color
 </BpkCardV2>
 ```
 
@@ -48,7 +48,7 @@ import BpkCardV2 from '@skyscanner/backpack-web/bpk-component-card-v2';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `variant` | `'default' \| 'outlined'` | `'default'` | Visual variant styling |
-| `bgColor` | Surface token | `'surfaceDefault'` | Background surface colour |
+| `bgColor` | Surface token | `'surfaceDefault'` | Background surface color |
 | `children` | `ReactNode` | - | Card content (Header, Body, Footer subcomponents) |
 | `className` | `string` | - | Additional CSS class names |
 | `ariaLabel` | `string` | - | Accessible label |

packages/bpk-component-card-v2/src/BpkCardV2/BpkCardV2.tsx

@@ -36,7 +36,7 @@ const getClassName = cssModules(STYLES);
  * BpkCardV2 is a composable, responsive card component for Backpack.
  *
  * It supports explicit multi-section composition (Header, Body, Footer), flexible
- * split layouts (Primary/Secondary), and customizable surface colours. The component
+ * split layouts (Primary/Secondary), and customizable surface colors. The component
  * is mobile-first and automatically adapts layout across breakpoints.
  *
  * @example

packages/bpk-component-card-v2/src/BpkCardV2/common-types.ts

@@ -18,7 +18,7 @@
 
 import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 
-/** Surface colour token options for BpkCardV2 background */
+/** Surface color token options for BpkCardV2 background */
 export type BpkCardV2SurfaceColor =
   | 'surfaceDefault'
   | 'surfaceElevated'
@@ -36,7 +36,7 @@ export type BpkCardV2Variant = 'default' | 'outlined';
  * BpkCardV2 root component props.
  *
  * Composable card component with explicit Header/Body/Footer subcomponents.
- * Supports multiple surface colours, visual variants, and responsive split layouts.
+ * Supports multiple surface colors, visual variants, and responsive split layouts.
  *
  * @example
  * <BpkCardV2 variant="default" bgColor="surfaceDefault">
@@ -49,7 +49,7 @@ export type BpkCardV2Props = {
   /** Visual variant controlling styling treatment (shadow/border) */
   variant?: BpkCardV2Variant;
 
-  /** Background surface colour token (default: surfaceDefault) */
+  /** Background surface color token (default: surfaceDefault) */
   bgColor?: BpkCardV2SurfaceColor;
 
   /** Card content - use Header, Body, Footer subcomponents */