[CLOV-1599] Bump normalize.css from 4.2.0 to 8.0.1

[Ezreal Yang (Supremeyh)]

Summary

This PR upgrades normalize.css from 4.2.0 to 8.0.1 as part of the next Backpack major release.

The upgrade:

• updates the normalize.css dependency and pnpm-lock.yaml;
• regenerates packages/backpack-web/src/bpk-stylesheets/base.css;
• updates BpkCloseButton to use display: inline-flex with flex alignment, preserving the icon's visual centering after the native control line-height change.

Why

Backpack's supported browsers already exclude the legacy browsers dropped by normalize.css v8 (Android 4, IE ≤ 9, and Safari ≤ 7). This upgrade removes obsolete browser-specific rules and aligns the reset with the current support matrix.

The most significant CSS change is the replacement of the v4 form-control shorthand:

button, input, optgroup, select, textarea {
  font: inherit;
}

with explicit properties in v8:

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}

As a result, controls that previously relied on inherited typography may have visual differences in line-height, vertical alignment, or font weight.

Percy and migration impact

The Percy differences for this major-version upgrade have been reviewed against the migration notes.

Validation

• Reviewed the Percy changes for the normalize.css upgrade.
• Updated BpkCloseButton to preserve icon alignment without relying on the native button line-height.
• CloseButton unit/accessibility tests pass.
• SCSS lint passes for the updated component styles.

Related issue: CLOV-1599

[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.

Updates normalize.css to a newer major version in backpack-web, aligning the project with the latest normalization rules and browser support changes from upstream.

Changes:

• Bump normalize.css dependency from 4.2.0 to 8.0.1 in packages/backpack-web/package.json.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

---

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

[Ezreal Yang (Supremeyh)]

Backpack's browserslist targets modern browsers only (Safari ≥ 16, Chrome ≥ 109, Edge ≥ 142, Firefox ≥ 145, Samsung ≥ 29) — no IE, Android 4, or legacy Safari in scope. The browsers normalize.css v8 dropped are already outside our support matrix, so no documentation change is needed.

"browserslist": [
  "Chrome >= 109",
  "Edge >= 142",
  "Firefox >= 145",
  "Safari >= 16",
  "Samsung >= 29"
],

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[kerrie-wu]

normalize.css@8 now forces input/textarea to line-height: 1.15, but BpkInput does not define its own line-height in _forms.scss. Could we set the Backpack typography line-height explicitly in the input mixin and add a visual regression test? Otherwise input text may shift vertically after this upgrade.

[kerrie-wu]

There are some diffs in Percy that may be related to it.

[IrinaWei]

Hi thanks for pointing that! My concern not doing it is that: we don't have specific token that is 1.3rem right? Thus we can't avoid visual change unless we add a new token for that

[kerrie-wu]

LGTM

[skyscanner-backpack-bot]

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against af1918f