I've followed the Angular and Material documentation on migration from previous versions to the new, and I've run into an issue that doesn't make sense to me. Take a look at the official documentation: https://v17.material.angular.io/guide/theming-your-components#step-4-include-the-theme-mixin-in-your-application
It specifically has this as an example:
typography: mat.define-typography-config(
$font-family: serif,
);
Why $font-family and not font-family? I don't know. By using the same piece of code, but modified to my needs, I get an error:
Undefined variable.
╷
50 │ $font-family: "'Avenir Next LT Pro Bold', sans-serif",
│ ^^^^^^^^^^^^
╵
src\_theme.scss 50:5 root stylesheet
Here's my _theme.scss file:
@use '@angular/material' as mat;
@import './variables';
@include mat.core();
$b-blue: (
50: #e4e8ef,
100: #bcc5d6,
200: #8f9fbb,
300: #6278a0,
400: #415b8b,
500: #1f3e77,
600: #1b386f,
700: #173064,
800: #12285a,
900: #0a1b47,
A100: #7e9cff,
A200: #4b74ff,
A400: #184dff,
A700: #003afd,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff
)
);
$b-print-theme: mat.define-light-theme((
color: (
primary: $b-print-theme-primary,
accent: $b-print-theme-accent,
warn: $b-print-theme-warn,
),
typography: mat.define-typography-config((
$font-family: "'Avenir Next LT Pro Bold', sans-serif",
$display-1: mat.define-typography-level(21px, 28.69px, 700),
$headline: mat.define-typography-level(24px, 24px, 700),
$title: mat.define-typography-level(18px, 24.59px, 400, 'Avenir Next LT Pro Regular'),
$subheading-2: mat.define-typography-level(18px, 24.59px, 700),
$subheading-1: mat.define-typography-level(16px, 21.86px, 400, 'Avenir Next LT Pro Regular'),
$body-1: mat.define-typography-level(12px, 16.39px, 400, 'Avenir Next LT Pro Regular'),
$body-2: mat.define-typography-level(12px, 16.39px, 400),
))
));
@include mat.all-component-themes($b-print-theme);
@include mat.typography-hierarchy($b-typography);
According to other sources, this should work, but I just get the Undefined variable.
Relevant package.json sections:
"dependencies": {
"@angular/animations": "^17.3.12",
"@angular/cdk": "^17.3.10",
"@angular/common": "^17.3.12",
"@angular/compiler": "^17.3.12",
"@angular/core": "^17.3.12",
"@angular/forms": "^17.3.12",
"@angular/material": "^17.3.10",
"@angular/platform-browser": "^17.3.12",
"@angular/platform-browser-dynamic": "^17.3.12",
"@angular/router": "^17.3.12",
"@fortawesome/fontawesome-free": "^5.15.4",
"@ng-select/ng-select": "^12.0.7",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@types/events": "^3.0.3",
"angular2-uuid": "^1.1.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"msal": "^1.4.4",
"rxjs": "^6.0.0",
"tslib": "^2.7.0",
"zone.js": "~0.14.10"
}
You are wrapping the variables into parentheses, which creates an additional Sass map. However, Angular expects the variable directly and without a map. Just remove those parentheses.
$b-print-theme: mat.define-light-theme((
color: (
primary: $b-print-theme-primary,
accent: $b-print-theme-accent,
warn: $b-print-theme-warn,
),
typography: mat.define-typography-config(
$font-family: "'Avenir Next LT Pro Bold', sans-serif",
$display-1: mat.define-typography-level(21px, 28.69px, 700),
$headline: mat.define-typography-level(24px, 24px, 700),
$title: mat.define-typography-level(18px, 24.59px, 400, 'Avenir Next LT Pro Regular'),
$subheading-2: mat.define-typography-level(18px, 24.59px, 700),
$subheading-1: mat.define-typography-level(16px, 21.86px, 400, 'Avenir Next LT Pro Regular'),
$body-1: mat.define-typography-level(12px, 16.39px, 400, 'Avenir Next LT Pro Regular'),
$body-2: mat.define-typography-level(12px, 16.39px, 400),
)
));