bug(setup): duplicate margin and font-family

[robertIsaac]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

19

Description

when you add material to a new project, it duplicates the font-family and margin because it generate both the old and new rules

Reproduction

StackBlitz link:
Steps to reproduce:

1. in a new angular project run ng add @angular/material
2. select any of the predefined theme

Expected Behavior

to only have

body {
  color-scheme: light;
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font: var(--mat-sys-body-medium);

  // Reset the user agent margin.
  margin: 0;
}

added to the sttyles.scss

Actual Behavior

it also generated

body {
  margin: 0;
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

which is unused

Environment

Angular CLI : 21.0.2
Angular : 21.0.3
Node.js : 22.14.0
Package Manager : npm 10.9.2
Operating System : win32 x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 21.0.2 │ ^21.0.2 │
│ @angular/cdk │ 21.0.2 │ ^21.0.2 │
│ @angular/cli │ 21.0.2 │ ^21.0.2 │
│ @angular/common │ 21.0.3 │ ^21.0.0 │
│ @angular/compiler │ 21.0.3 │ ^21.0.0 │
│ @angular/compiler-cli │ 21.0.3 │ ^21.0.0 │
│ @angular/core │ 21.0.3 │ ^21.0.0 │
│ @angular/forms │ 21.0.3 │ ^21.0.0 │
│ @angular/material │ 21.0.2 │ ^21.0.2 │
│ @angular/platform-browser │ 21.0.3 │ ^21.0.0 │
│ @angular/platform-server │ 21.0.3 │ ^21.0.0 │
│ @angular/router │ 21.0.3 │ ^21.0.0 │
│ @angular/ssr │ 21.0.2 │ ^21.0.2 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 5.9.3 │ ~5.9.2 │
│ vitest │ 4.0.15 │ ^4.0.8 │
└───────────────────────────┴───────────────────┴───────────────────┘

[shubhIam-dev]

can i start workig on it?