bug (Angular Material): mat.define-typography-config $input and $title arguments have been removed

[Robw94]

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

v14

Description

Upgrading from angular 14 to 15 one of the templates we used had the mixin function

mat.define-typography-config( $font-family: $treo-font-sans, $title: mat.define-typography-level(1.25rem, 2rem, 600), $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600), $button: mat.define-typography-level(0.875rem, 0.875rem, 500), $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px )

Since angular material 15 the $input and $title arguements have been removed.
SassError: No argument named $input.

Is there a replacement for this? as the buttons and form fields on the website complete change when I remove these arguments

Reproduction

Steps to reproduce:

1. Upgrade to Angular 15 from 14 having $title and $input defined in typography

Expected Behavior

Actual Behavior

Environment

@angular-devkit/architect 0.1500.4
@angular-devkit/build-angular 15.0.4
@angular-devkit/core 15.0.4
@angular-devkit/schematics 15.0.4
@angular/cdk 15.0.3
@angular/material 15.0.3
@angular/material-moment-adapter 15.0.3
@schematics/angular 15.0.4
rxjs 7.8.0
typescript 4.8.2

[MoxxiManagarm]

try mat.define-legacy-typography-config instead

[Robw94]

So I solved a lot of the issues by running the ng generate @angular/material:mdc-migration command that tried to automate fixing all the styling etc for the mdc-migration.

However, since doing that I now get a warning:
Angular Material themes should be created from a map containing the keys "color", "typography", and "density". The color value should be a map containing the palette values for "primary", "accent", and "warn". See https://material.angular.io/guide/theming for more information.

I have tracked it down to a include: @include mat.all-legacy-component-themes($theme);
when I comment this out the warning disappears. however I updated the theming of this template (deprecated) to include these values
` // Generate the Angular Material theme
$angular-material-theme: mat.define-light-theme((
color: (
primary: $primary-palette,
accent: $accent-palette,
warn: $warn-palette,
),
typography: mat.define-typography-config(),
density: 0,
));

// Modify and return the theme
@return _treo-modify-angular-material-theme-colors($angular-material-theme);`

What would the issue be?

[Soolan]

After upgrading from 14 to 15 I'm getting the same error.
Any update on this?

ng generate @angular/material:mdc-migration

Tried. Didn't work.

[Woogielicious]

Same issue here. Tried to update via nx angular from 14 to 15.1.3.
SassError: No arguments named $display-4, $display-3, $display-2, $display-1, $headline, $title, $subheading-2 or $subheading-1.
┌──> libs\shared\ui\src\lib\styles\themes_base.scss

[mills-andrew]

This issue is still happening. Anyone got a fix?

[Woogielicious]

This issue is still happening. Anyone got a fix?

i fixed it with code like this `
@include helper.generateCssVariables($theme-colors);

@include helper.generateClasses($theme-colors);

$app-primary: mat.define-palette(map.get($theme-colors, 'color-primary'));
$app-accent: mat.define-palette(map.get($theme-colors, 'color-accent'));
$app-warn: mat.define-palette(map.get(base.$base-colors, 'color-warn'));
$typography: mat.define-legacy-typography-config();

$theme: mat.define-light-theme(
(
color: (
primary: $app-primary,
accent: $app-accent,
warn: $app-warn,
),
typography: $typography,
density: 0,
)
);

@include mat.all-component-themes($theme);
@include mat.all-legacy-component-themes($theme);
@include mat.all-component-typographies($typography);`

[mills-andrew]

bummer, didn't work for me

$typography: mat.define-legacy-typography-config($font-family: theme('fontFamily.sans'),
$title: mat.define-typography-level(1.25rem, 2rem, 600),
$body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
$button: mat.define-typography-level(0.875rem, 0.875rem, 500),
$input: mat.define-typography-level(0.875rem, 1.2857142857, 400));

$theme: (
color: null,
density: -2,
typography: $typography
);

/* Create a base theme without color.
This will globally set the density and typography for all future color themes. */
@include mat.all-component-themes($theme);
@include mat.all-legacy-component-themes($theme);
@include mat.all-component-typographies($typography);

[Woogielicious]

Hmm bad, it took me two days before i get this running again :D