0

Upgrading project from Angular13 to Angular15. Noticed during builds was getting error that $input was no longer supported when defining custom typography.

Old declaration in 13:

$custom-typography: mat-typography-config(
    $font-family: 'Open Sans, sans serif',
    $input:         mat-typography-level(14px, 1.25, 400),
);

What's a good solution for creating a custom theme, custom typography for supported components, i.e. $button, and applying custom typography for all input fields ?

I tried to implement this solution: https://stackoverflow.com/questions/74923916/angular-material-15-how-to-customize-the-styling-of-buttons-and-input-fields

Everything is being set except for the input fields. Company palette, button over-rides

Here is my complete theme file after implementing recommended changed in solution above:

@use '@angular/material' as mat;
@use "./company-palette" as ew;
@use "sass:map";

@include mat.core();

// Styles to be applied to buttons
//
$custom-button: mat.define-typography-level(
    $font-family: 'Open Sans, sans serif',
    $font-weight: 500,
    $font-size: 1rem,
    $line-height: 1,
    $letter-spacing: 'normal'
);

// Styles to be applied to input-fields
//
$custom-input: mat.define-typography-level(
    $font-family: 'Open Sans, sans serif',
    $font-weight: 400,
    $font-size: 12px,
    $line-height: 1,
    $letter-spacing: 'normal'
);

// Create a typography config with custom typography levels for input
//
$ew-typography-config: map.merge(
        mat.define-typography-config(
            $font-family: 'Open Sans, sans serif',
            $button: $custom-button
        ),
        (
            'input': $custom-input
        )
);

// Apply the config
//
@include mat.all-component-typographies($ew-typography-config);

// Create a mixin for the input fields
//
@mixin typography($theme) {
    $custom-typography-config: mat.get-typography-config($theme);

    .mat-mdc-form-field {
        @include mat.typography-level($custom-typography-config, 'input')
    }
}

$app-primary: mat.define-palette(ew.$company-default-light-primary);
$app-accent: mat.define-palette(ew.$company-default-light-accent);
$app-success: mat.define-palette(mat.$green-palette);
$app-warn: mat.define-palette(mat.$red-palette);
$app-disabled: mat.define-palette(mat.$grey-palette);

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

@include mat.all-component-themes($app-theme);`
Bill S.
  • 1

0 Answers0