[CLOV-CSS] Migrate bpk-component-autosuggest to CSS custom properties by gert-janvercauteren · Pull Request #4951 · Skyscanner/backpack

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-07-22T08:44:12Z

Migrates bpk-component-autosuggest to CSS custom properties with SASS fallbacks, and creates themeAttributes.tsx for component-scoped themeable vars.

Changes

Replace static SASS tokens with var(--css-var, sass-fallback) pattern in both legacy and V2 SCSS files
Add --bpk-private-autosuggest-* component-scoped CSS vars for bg-default, bg-hover, border-default, and text-close
Use --bpk-surface-highlight, --bpk-surface-default, --bpk-text-secondary, --bpk-radius-sm, --bpk-border-1 global semantic vars
Create themeAttributes.tsx with camelCase keys for all 4 private autosuggest vars
Create themeAttributes-test.tsx with unit tests
Add VisualTestDark story using BpkDarkExampleWrapper

Tokens kept as bare SASS (no CSS var equivalent)

$bpk-box-shadow-lg
$bpk-one-pixel-rem
$bpk-zindex-autosuggest
$bpk-color-white (used as fallback only)
$bpk-line-day (no --bpk-line-* semantic var found in theme files)

skyscanner-backpack-bot · 2026-07-22T08:48:09Z

Visit https://backpack.github.io/storybook-prs/4951 to see this build running in a browser.

Copilot

Pull request overview

Note

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Migrates bpk-component-autosuggest styling to CSS custom properties (with SASS fallbacks) and introduces component-scoped theme attributes + dark-mode visual coverage.

Changes:

Introduce autosuggestThemeAttributes + unit test for private autosuggest theme tokens.
Replace SASS token usage with var(--css-var, sass-fallback) across Autosuggest SCSS (legacy + V2).
Add a dark-mode visual Storybook story for Percy coverage.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/backpack-web/src/bpk-component-autosuggest/src/themeAttributes.tsx	Adds component-scoped theme attribute names for autosuggest private tokens.
packages/backpack-web/src/bpk-component-autosuggest/src/themeAttributes-test.tsx	Adds unit test asserting exported theme attribute list.
packages/backpack-web/src/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.stories.tsx	Adds dark visual test story using `BpkDarkExampleWrapper`.
packages/backpack-web/src/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.module.scss	Migrates V2 styles to CSS custom props with SASS fallbacks.
packages/backpack-web/src/bpk-component-autosuggest/src/BpkAutosuggest.module.scss	Migrates legacy styles to CSS custom props with SASS fallbacks.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+// @ts-expect-error -- bpk-storybook-utils has no type declarations
+import { BpkDarkExampleWrapper } from 'bpk-storybook-utils';


+describe('autosuggest component themeAttributes', () => {
+  it('should export autosuggestThemeAttributes with all unique private autosuggest tokens', () => {
+    expect(autosuggestThemeAttributes).toEqual([
+      'privateAutosuggestColourBgDefault',
+      'privateAutosuggestColourBgHover',
+      'privateAutosuggestColourBorderDefault',
+      'privateAutosuggestColourTextClose',
+    ]);
+  });
+});


+export const autosuggestThemeAttributes: string[] = [
+  'privateAutosuggestColourBgDefault',
+  'privateAutosuggestColourBgHover',
+  'privateAutosuggestColourBorderDefault',
+  'privateAutosuggestColourTextClose',
+];


skyscanner-backpack-bot · 2026-07-22T13:10:15Z

Visit https://backpack.github.io/storybook-prs/4951 to see this build running in a browser.

Vincent Liu (xiaogliu) · 2026-07-27T06:51:50Z

Token value audit — verified every new CSS var against token-sync/css/theme-backpack-light.css / theme-backpack-dark.css, primitives.css, and base.default.scss:

CSS var	Old SASS fallback	Light value	Dark value	Match
`--bpk-surface-highlight`	`$bpk-surface-highlight-day`	`#e0e4e9`	`#243346`	✅
`--bpk-private-autosuggest-colour-bg-default` (x3)	`$bpk-surface-default-day` / `$bpk-color-white`	`#ffffff`	`#ffffff`	✅ (both old tokens = `#ffffff`)
`--bpk-text-secondary` (x4)	`$bpk-text-secondary-day`	`#626971`	`#bdc4cb`	✅
`--bpk-radius-sm`	`$bpk-border-radius-sm`	`0.5rem`	(theme-agnostic)	✅
`--bpk-border-1`	`$bpk-border-size-sm`	`0.0625rem` (=1px)	(theme-agnostic)	✅
`--bpk-private-autosuggest-colour-bg-hover` (x4)	`$bpk-canvas-contrast-day`	`#f5f7fa` vs fallback `#eff3f8`	`#ffffff` vs fallback `#eff3f8`	⚠️ Mismatch — see below
`--bpk-private-autosuggest-colour-border-default`	`$bpk-surface-highlight-day`	`#c1c7cf` vs fallback `#e0e4e9`	`#ffffff` vs fallback `#e0e4e9`	⚠️ Mismatch — see below

⚠️ Two real value mismatches found:

--bpk-private-autosuggest-colour-bg-hover resolves to #f5f7fa (light), but its SASS fallback $bpk-canvas-contrast-day is #eff3f8 — a visibly different (slightly warmer/lighter) shade of grey for the :active/--highlighted hover state.

--bpk-private-autosuggest-colour-border-default resolves to #c1c7cf (light) — which is actually $bpk-line-day's value, not $bpk-surface-highlight-day (#e0e4e9) as used in the fallback. The fallback token looks like the wrong one was picked.
Both of these mean the CSS-var-unsupported fallback path (or any environment reading the SASS-compiled value directly) renders a noticeably different colour than the var-driven default.

Those are slightly difference, will confirm with contributor.

Also confirmed, unrelated to this PR: all 4 --bpk-private-autosuggest-* dark-theme values in theme-backpack-dark.css are currently #ffffff (bg-default, bg-hover, border-default, text-close all identical) — this looks like a pre-existing placeholder/incomplete dark-theme definition upstream in the theme file, not something introduced by this migration, but worth flagging since it means dark mode for this component may not look right regardless of how the SCSS fallbacks are set.

This is not a issue since Backpack doesn't support dark theme now, during Backpack support dark theme, we will do a full regression testing.

Still outstanding from earlier review: border-top: var(--bpk-border-1, tokens.$bpk-border-size-sm) solid tokens.$bpk-line-day; in BpkAutosuggestV2/BpkAutosuggest.module.scss — the border colour itself was never wrapped in var(), inconsistent with every other border declaration in this PR.

Highlight this in this comment #4951 (comment)

Vincent Liu (xiaogliu) · 2026-07-27T08:10:37Z

+      border-top: var(--bpk-border-1, tokens.$bpk-border-size-sm) solid
+        tokens.$bpk-line-day;


I think we need replace tokens.$bpk-line-day with --bpk-private-autosuggest-colour-border-default too, wdyt?

Suggested change

border-top: var(--bpk-border-1, tokens.$bpk-border-size-sm) solid

tokens.$bpk-line-day;

border-top: var(--bpk-border-1, tokens.$bpk-border-size-sm) solid

var(--bpk-private-autosuggest-colour-border-default, tokens.$bpk-line-day);

Vincent Liu (xiaogliu) · 2026-07-27T08:19:10Z

+        --bpk-private-autosuggest-colour-bg-hover,
+        tokens.$bpk-canvas-contrast-day


--bpk-private-autosuggest-colour-bg-hover resolves to #f5f7fa (light), but its SASS fallback $bpk-canvas-contrast-day is #eff3f8 — a visibly different (slightly warmer/lighter) shade of grey for the :active/--highlighted hover state, is this expected?

Vincent Liu (xiaogliu) · 2026-07-27T08:20:23Z

+        --bpk-private-autosuggest-colour-border-default,
+        tokens.$bpk-surface-highlight-day


--bpk-private-autosuggest-colour-border-default resolves to #c1c7cf (light) — which is not same as $bpk-surface-highlight-day (#e0e4e9) as used in the fallback, is this expected?

Vincent Liu (xiaogliu) · 2026-07-27T08:21:34Z

-      background-color: tokens.$bpk-canvas-contrast-day;
+      background-color: var(
+        --bpk-private-autosuggest-colour-bg-hover,
+        tokens.$bpk-canvas-contrast-day


Vincent Liu (xiaogliu) · 2026-07-27T08:21:40Z

-      background-color: tokens.$bpk-canvas-contrast-day;
+      background-color: var(
+        --bpk-private-autosuggest-colour-bg-hover,
+        tokens.$bpk-canvas-contrast-day


[CLOV-CSS] Migrate bpk-component-autosuggest to CSS custom properties

79ebac6

Copilot AI review requested due to automatic review settings July 22, 2026 08:44

Gert-Jan Vercauteren (gert-janvercauteren) added the minor Non breaking change label Jul 22, 2026

Copilot AI reviewed Jul 22, 2026

View reviewed changes

Gert-Jan Vercauteren (gert-janvercauteren) added the css-custom-properties label Jul 22, 2026

chore: reset non-CSS files to main

76b0a2e

Vincent Liu (xiaogliu) reviewed Jul 27, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[CLOV-CSS] Migrate bpk-component-autosuggest to CSS custom properties - #4951

[CLOV-CSS] Migrate bpk-component-autosuggest to CSS custom properties#4951
Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 2 commits into
mainfrom
migrate/css-vars-autosuggest-4833

Gert-Jan Vercauteren (gert-janvercauteren) commented Jul 22, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

Vincent Liu (xiaogliu) commented Jul 27, 2026 •

edited

Loading

Uh oh!

Vincent Liu (xiaogliu) Jul 27, 2026

Uh oh!

Vincent Liu (xiaogliu) Jul 27, 2026

Uh oh!

Vincent Liu (xiaogliu) Jul 27, 2026

Uh oh!

Vincent Liu (xiaogliu) Jul 27, 2026

Uh oh!

Vincent Liu (xiaogliu) Jul 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		// @ts-expect-error -- bpk-storybook-utils has no type declarations
		import { BpkDarkExampleWrapper } from 'bpk-storybook-utils';

		border-top: var(--bpk-border-1, tokens.$bpk-border-size-sm) solid
		tokens.$bpk-line-day;

		--bpk-private-autosuggest-colour-bg-hover,
		tokens.$bpk-canvas-contrast-day

		--bpk-private-autosuggest-colour-border-default,
		tokens.$bpk-surface-highlight-day

Uh oh!

Conversation

Gert-Jan Vercauteren (gert-janvercauteren) commented Jul 22, 2026

Changes

Tokens kept as bare SASS (no CSS var equivalent)

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

Vincent Liu (xiaogliu) commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Vincent Liu (xiaogliu) Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

Vincent Liu (xiaogliu) Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

Vincent Liu (xiaogliu) Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

Vincent Liu (xiaogliu) Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

Vincent Liu (xiaogliu) Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Vincent Liu (xiaogliu) commented Jul 27, 2026 •

edited

Loading