Skip to content

Commit 285f46d

Browse files
committed
fix(multiple): deprecate all legacy sass mixins
1 parent de5d41b commit 285f46d

37 files changed

+219
-4
lines changed

src/material/core/typography/_typography.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@
4646
/// @param {Map} $button Configuration for the "button" typographic level.
4747
/// @param {Map} $input Configuration for the "input" typographic level.
4848
/// @returns {Map} A typography config for the application.
49+
///
50+
/// @deprecated Use `mat.define-typography-config` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
51+
/// @breaking-change 17.0.0
4952
@function define-legacy-typography-config(
5053
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
5154
$display-4: define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),

src/material/legacy-autocomplete/_autocomplete-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@use '../core/style/private';
33
@use '../core/theming/theming';
44

5+
/// @deprecated Use `mat.autocomplete-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
6+
/// @breaking-change 17.0.0
57
@mixin color($config-or-theme) {
68
$config: theming.get-color-config($config-or-theme);
79
$foreground: map.get($config, foreground);
@@ -27,10 +29,14 @@
2729
}
2830
}
2931

32+
/// @deprecated Use `mat.autocomplete-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
33+
/// @breaking-change 17.0.0
3034
@mixin typography($config-or-theme) {}
3135

3236
@mixin _density($config-or-theme) {}
3337

38+
/// @deprecated Use `mat.autocomplete-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
39+
/// @breaking-change 17.0.0
3440
@mixin theme($theme-or-color-config) {
3541
$theme: theming.private-legacy-get-theme($theme-or-color-config);
3642
@include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-autocomplete') {

src/material/legacy-button/_button-base.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ $mini-fab-size: 40px !default;
3333
$mini-fab-padding: 8px !default;
3434

3535
// Applies base styles to all button types.
36+
/// @deprecated Use `mat.button-base` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
37+
/// @breaking-change 17.0.0
3638
@mixin base {
3739
box-sizing: border-box;
3840
position: relative;
@@ -74,6 +76,8 @@ $mini-fab-padding: 8px !default;
7476
}
7577

7678
// Applies styles to buttons with backgrounds: raised, fab, and mini-fab
79+
/// @deprecated Use `mat.button-raised-button` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
80+
/// @breaking-change 17.0.0
7781
@mixin raised-button {
7882
@include base;
7983
@include private.private-animation-noop();
@@ -87,6 +91,8 @@ $mini-fab-padding: 8px !default;
8791
}
8892

8993
// Applies styles to fab and mini-fab button types only
94+
/// @deprecated Use `mat.button-fab` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
95+
/// @breaking-change 17.0.0
9096
@mixin fab($size, $padding) {
9197
@include raised-button;
9298

src/material/legacy-button/_button-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,8 @@ $_ripple-opacity: 0.1;
8686
}
8787
}
8888

89+
/// @deprecated Use `mat.button-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
90+
/// @breaking-change 17.0.0
8991
@mixin color($config-or-theme) {
9092
$config: theming.get-color-config($config-or-theme);
9193
$primary: map.get($config, primary);
@@ -163,6 +165,8 @@ $_ripple-opacity: 0.1;
163165
}
164166
}
165167

168+
/// @deprecated Use `mat.button-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
169+
/// @breaking-change 17.0.0
166170
@mixin typography($config-or-theme) {
167171
$config: typography.private-typography-to-2014-config(
168172
theming.get-typography-config($config-or-theme));
@@ -178,6 +182,8 @@ $_ripple-opacity: 0.1;
178182

179183
@mixin _density($config-or-theme) {}
180184

185+
/// @deprecated Use `mat.button-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
186+
/// @breaking-change 17.0.0
181187
@mixin theme($theme-or-color-config) {
182188
$theme: theming.private-legacy-get-theme($theme-or-color-config);
183189
@include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-button') {

src/material/legacy-card/_card-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
@use '../core/typography/typography-utils';
66

77

8+
/// @deprecated Use `mat.card-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
9+
/// @breaking-change 17.0.0
810
@mixin color($config-or-theme) {
911
$config: theming.get-color-config($config-or-theme);
1012
$background: map.get($config, background);
@@ -26,6 +28,8 @@
2628
}
2729
}
2830

31+
/// @deprecated Use `mat.card-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
32+
/// @breaking-change 17.0.0
2933
@mixin typography($config-or-theme) {
3034
$config: typography.private-typography-to-2014-config(
3135
theming.get-typography-config($config-or-theme));
@@ -52,6 +56,8 @@
5256

5357
@mixin _density($config-or-theme) {}
5458

59+
/// @deprecated Use `mat.card-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
60+
/// @breaking-change 17.0.0
5561
@mixin theme($theme-or-color-config) {
5662
$theme: theming.private-legacy-get-theme($theme-or-color-config);
5763
@include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-card') {

src/material/legacy-checkbox/_checkbox-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
@use '../core/typography/typography-utils';
55

66

7+
/// @deprecated Use `mat.checkbox-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
8+
/// @breaking-change 17.0.0
79
@mixin color($config-or-theme) {
810
$config: theming.get-color-config($config-or-theme);
911
$is-dark-theme: map.get($config, is-dark);
@@ -97,6 +99,8 @@
9799
}
98100
}
99101

102+
/// @deprecated Use `mat.checkbox-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
103+
/// @breaking-change 17.0.0
100104
@mixin typography($config-or-theme) {
101105
$config: typography.private-typography-to-2014-config(
102106
theming.get-typography-config($config-or-theme));
@@ -112,6 +116,8 @@
112116

113117
@mixin _density($config-or-theme) {}
114118

119+
/// @deprecated Use `mat.checkbox-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
120+
/// @breaking-change 17.0.0
115121
@mixin theme($theme-or-color-config) {
116122
$theme: theming.private-legacy-get-theme($theme-or-color-config);
117123
@include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-checkbox') {

src/material/legacy-chips/_chips-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ $chip-remove-font-size: 18px;
4040
}
4141
}
4242

43+
/// @deprecated Use `mat.chips-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
44+
/// @breaking-change 17.0.0
4345
@mixin color($config-or-theme) {
4446
$config: theming.get-color-config($config-or-theme);
4547
$is-dark-theme: map.get($config, is-dark);
@@ -89,6 +91,8 @@ $chip-remove-font-size: 18px;
8991
}
9092
}
9193

94+
/// @deprecated Use `mat.chips-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
95+
/// @breaking-change 17.0.0
9296
@mixin typography($config-or-theme) {
9397
$config: typography.private-typography-to-2014-config(
9498
theming.get-typography-config($config-or-theme));
@@ -105,6 +109,8 @@ $chip-remove-font-size: 18px;
105109

106110
@mixin _density($config-or-theme) {}
107111

112+
/// @deprecated Use `mat.chips-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
113+
/// @breaking-change 17.0.0
108114
@mixin theme($theme-or-color-config) {
109115
$theme: theming.private-legacy-get-theme($theme-or-color-config);
110116
@include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-chips') {

src/material/legacy-core/_core-theme.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
@use '../core/style/elevation';
88
@use '../core/style/private';
99

10+
/// @deprecated Use `mat.core-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
11+
/// @breaking-change 17.0.0
1012
@mixin color($config-or-theme) {
1113
$config: theming.get-color-config($config-or-theme);
1214

@@ -39,6 +41,8 @@
3941
}
4042

4143
// Mixin that renders all of the core styles that depend on the theme.
44+
/// @deprecated Use `mat.core-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
45+
/// @breaking-change 17.0.0
4246
@mixin theme($theme-or-color-config) {
4347
$theme: theming.private-legacy-get-theme($theme-or-color-config);
4448
// Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that

src/material/legacy-core/_core.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
@use '../core/focus-indicators/private';
88

99
// Mixin that renders all of the core styles that are not theme-dependent.
10+
/// @deprecated Use `mat.core` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
11+
/// @breaking-change 17.0.0
1012
@mixin core($typography-config: null) {
1113
@include all-typography.all-legacy-component-typographies($typography-config);
1214
@include ripple.ripple();

src/material/legacy-core/color/_all-color.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@use '../../core/theming/theming';
33

44
// Includes all of the color styles.
5+
/// @deprecated Use `mat.all-component-colors` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
6+
/// @breaking-change 17.0.0
57
@mixin all-legacy-component-colors($config-or-theme) {
68
// In case a theme object has been passed instead of a configuration for
79
// the color system, extract the color config from the theme object.
@@ -19,7 +21,8 @@
1921
));
2022
}
2123

22-
// @deprecated Use `all-legacy-component-colors`.
24+
/// @deprecated Use `mat.all-component-colors` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
25+
/// @breaking-change 17.0.0
2326
@mixin angular-material-legacy-color($config-or-theme) {
2427
@include all-legacy-component-colors($config-or-theme);
2528
}

0 commit comments

Comments
 (0)