From 07f5ed9dc6f722cee2941e49ad63f04041a3314d Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:33:14 +0100
Subject: [PATCH] fix(material/schematics): add typography and density to
 custom theme (#28645)

Fixes that the template for a custom theme didn't include a typography config and a density.

Fixes #28642.

(cherry picked from commit dd97c0eb96ab6f9f176340f1dea3ce76e436f452)
---
 guides/theming.md                                        | 9 +++++----
 .../schematics/ng-add/theming/create-custom-theme.ts     | 4 +++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/guides/theming.md b/guides/theming.md
index 1229b4cce719..d55ab4dee8e7 100644
--- a/guides/theming.md
+++ b/guides/theming.md
@@ -193,6 +193,7 @@ $my-theme: mat.define-light-theme((
    primary: $my-primary,
    accent: $my-accent,
  ),
+ typography: mat.define-typography-config(),
  density: 0,
 ));
 
@@ -536,14 +537,14 @@ the CSS in each shadow root, or by using [Constructable Stylesheets][constructab
 
 ## User preference media queries
 
-Angular Material does not apply styles based on user preference media queries, such as 
+Angular Material does not apply styles based on user preference media queries, such as
 `prefers-color-scheme` or `prefers-contrast`. Instead, Angular Material's Sass mixins give you the
 flexibility to apply theme styles to based on the conditions that make the most sense for your
 users. This may mean using media queries directly or reading a saved user preference.
 
 ## Style customization outside the theming system
 
-Angular Material supports customizing color, typography, and density as outlined in this document. 
-Angular strongly discourages, and does not directly support, overriding component CSS outside the 
-theming APIs described above. Component DOM structure and CSS classes are considered private 
+Angular Material supports customizing color, typography, and density as outlined in this document.
+Angular strongly discourages, and does not directly support, overriding component CSS outside the
+theming APIs described above. Component DOM structure and CSS classes are considered private
 implementation details that may change at any time.
diff --git a/src/material/schematics/ng-add/theming/create-custom-theme.ts b/src/material/schematics/ng-add/theming/create-custom-theme.ts
index 73d783bf0927..7008e2ace6e7 100644
--- a/src/material/schematics/ng-add/theming/create-custom-theme.ts
+++ b/src/material/schematics/ng-add/theming/create-custom-theme.ts
@@ -35,7 +35,9 @@ $${name}-theme: mat.define-light-theme((
     primary: $${name}-primary,
     accent: $${name}-accent,
     warn: $${name}-warn,
-  )
+  ),
+  typography: mat.define-typography-config(),
+  density: 0
 ));
 
 // Include theme styles for core and each component used in your app.