theming: deprecate and remove legacy theme color generation

[mrmokwa]

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

No response

Description

Don't know if it's intended behavior or not.
Scss generated by mat.define-dark-theme or mat.define-light-theme have duplicated keys/values/styles.

Notice the duplicated values for:

• primary
• accent
• warn
• is-dark
• foreground
• background

Reproduction

Steps to reproduce:

1. Create new project ng new
   1.1 Choose SCSS as stylesheet
2. Add angular material ng add @angular/material
   2.1 For prebuild theme, choose custom option
3. In styles.scss file, add @debug $name-of-app-theme
   

Expected Behavior

Should exist only one definition for

• primary
• accent
• warn
• is-dark
• foreground
• background

Actual Behavior

Below I attached the result of @debug . Take a look at primary color, for example and notice the value is repeated for no reason.
The only difference is the parenthesis before.

debug.txt

Environment

• Angular: 13.0.1
• CDK/Material: 13.0.0
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

Setting a low priority on this, because this is only in memory, it won't result in more CSS being generated.

[devversion]

This is actually an intentional duplication to ensure backwards compatibility since we changed some of the internals of the theming API in preparation for density with MDC etc.

We should mark this old pattern as deprecated in an upcoming minor and remove this in the future. Here is the related code:

components/src/material/core/theming/_theming.scss

Lines 388 to 411 in df7c46b

	// Creates a backwards compatible theme. Previously in Angular Material, theme objects
	// contained the color configuration directly. With the recent refactoring of the theming
	// system to allow for density and typography configurations, this is no longer the case.
	// To ensure that constructed themes which will be passed to custom theme mixins do not break,
	// we copy the color configuration and put its properties at the top-level of the theme object.
	// Here is an example of a pattern that should still work until it's officially marked as a
	// breaking change:
	//
	// @mixin my-custom-component-theme($theme) {
	// .my-comp {
	// background-color: mat-color(map-get($theme, primary));
	// }
	// }
	//
	// Note that the `$theme.primary` key does usually not exist since the color configuration
	// is stored in `$theme.color` which contains a property for `primary`. This method copies
	// the map from `$theme.color` to `$theme` for backwards compatibility.
	@function private-create-backwards-compatibility-theme($theme) {
	@if not map.get($theme, color) {
	@return $theme;
	}
	$color: map.get($theme, color);
	@return map.merge($theme, $color);
	}

[devversion]

Just capturing this here: #24835. In V15/V16 we will remove this.