Skip to content

Commit eac6e2a

Browse files
crisbetocrisbeto
authoredApr 16, 2021
feat: switch to sass modules (#952)
Switches all of the .scss files to the Sass module system and to use the new Material theming API.
·
20.0.0-next.519.1.0-next.3
1 parent 3dbb0a3 commit eac6e2a

31 files changed

+354
-327
lines changed
 

‎material.angular.io/scenes/src/styles.scss

+24-24
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
1-
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
2-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
33

4-
@include mat-core();
4+
@include mat.core();
55

6-
$primary: mat-palette($mat-red, 500, 200, 900);
7-
$accent: mat-palette($mat-red, 500, 200, 700);
8-
$warn: mat-palette($mat-red);
6+
$_primary: mat.define-palette(mat.$red-palette, 500, 200, 900);
7+
$_accent: mat.define-palette(mat.$red-palette, 500, 200, 700);
8+
$_warn: mat.define-palette(mat.$red-palette);
99

10-
$theme: mat-light-theme($primary, $accent, $warn);
11-
$background-color: #fff2f4;
10+
$_theme: mat.define-light-theme($_primary, $_accent, $_warn);
11+
$_background-color: #fff2f4;
1212

13-
$background: map-get($theme, background);
14-
$background: map_merge($background, (
15-
background: $background-color,
13+
$_background: map.get($_theme, background);
14+
$_background: map.merge($_background, (
15+
background: $_background-color,
1616
disabled-button: rgba(red, 0.5),
1717
selected-button: rgba(red, 0.23)));
18-
$theme: map_merge($theme, (background: $background));
18+
$_theme: map.merge($_theme, (background: $_background));
1919

20-
$secondary-text-color: map_get($mat-red, 600);
20+
$_secondary-text-color: map_get(mat.$red-palette, 600);
2121

22-
$foreground: map-get($theme, foreground);
23-
$foreground: map_merge($foreground, (
22+
$_foreground: map.get($_theme, foreground);
23+
$_foreground: map.merge($_foreground, (
2424
disabled-button: rgba(red, 0.45),
25-
text: $secondary-text-color,
26-
divider: $secondary-text-color,
27-
secondary-text: $secondary-text-color,
28-
dsiabled-text: $secondary-text-color,
29-
hint-text: $secondary-text-color,
30-
icon: $secondary-text-color));
31-
$theme: map_merge($theme, (foreground: $foreground));
32-
33-
@include angular-material-theme($theme);
25+
text: $_secondary-text-color,
26+
divider: $_secondary-text-color,
27+
secondary-text: $_secondary-text-color,
28+
dsiabled-text: $_secondary-text-color,
29+
hint-text: $_secondary-text-color,
30+
icon: $_secondary-text-color));
31+
$_theme: map.merge($_theme, (foreground: $_foreground));
32+
33+
@include mat.all-component-themes($_theme);
3434

3535
body {
3636
margin: 0;

‎material.angular.io/src/_app-theme.scss

+46-50
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,65 @@
1-
@import '~@angular/material/theming';
1+
@use '~@angular/material' as mat;
22

3-
@import './app/pages/component-category-list/component-category-list-theme';
4-
@import './app/pages/component-sidenav/component-sidenav-theme';
5-
@import './app/pages/component-viewer/component-viewer-theme';
6-
@import './app/pages/guide-list/guide-list-theme';
7-
@import './app/pages/homepage/homepage-theme';
8-
@import './app/pages/not-found/not-found-theme';
9-
@import './app/shared/carousel/carousel-theme';
10-
@import './app/shared/example-viewer/example-viewer-theme';
11-
@import './app/shared/footer/footer-theme';
12-
@import './app/shared/navbar/navbar-theme';
13-
@import './app/shared/table-of-contents/table-of-contents-theme';
14-
@import './styles/api-theme';
15-
@import './styles/markdown-theme';
16-
@import './styles/svg-theme';
17-
@import './styles/tables-theme';
3+
@use 'sass:map';
4+
@use './app/pages/component-category-list/component-category-list-theme';
5+
@use './app/pages/component-sidenav/component-sidenav-theme';
6+
@use './app/pages/component-viewer/component-viewer-theme';
7+
@use './app/pages/guide-list/guide-list-theme';
8+
@use './app/pages/homepage/homepage-theme';
9+
@use './app/pages/not-found/not-found-theme';
10+
@use './app/shared/carousel/carousel-theme';
11+
@use './app/shared/example-viewer/example-viewer-theme';
12+
@use './app/shared/footer/footer-theme';
13+
@use './app/shared/navbar/navbar-theme';
14+
@use './app/shared/table-of-contents/table-of-contents-theme';
15+
@use './styles/api-theme';
16+
@use './styles/markdown-theme';
17+
@use './styles/svg-theme';
18+
@use './styles/tables-theme';
1819

1920
// Styles for the docs app that are based on the current theme.
20-
@mixin material-docs-app-theme($theme) {
21-
$primary: map-get($theme, primary);
22-
$accent: map-get($theme, accent);
23-
$warn: map-get($theme, warn);
24-
$background: map-get($theme, background);
25-
$foreground: map-get($theme, foreground);
26-
$next-theme: mat-palette($mat-red);
21+
@mixin theme($theme) {
22+
$primary: map.get($theme, primary);
23+
$accent: map.get($theme, accent);
24+
$warn: map.get($theme, warn);
25+
$background: map.get($theme, background);
26+
$foreground: map.get($theme, foreground);
27+
$next-theme: mat.define-palette(mat.$red-palette);
2728

2829
.docs-app-background {
29-
background: mat-color($background, background);
30+
background: mat.get-color-from-palette($background, background);
3031
}
3132

3233
.docs-primary-header {
33-
background: mat-color($primary);
34+
background: mat.get-color-from-palette($primary);
3435

3536
h1 {
36-
color: mat-color($primary, default-contrast);
37+
color: mat.get-color-from-palette($primary, default-contrast);
3738
}
3839
}
3940

4041
.docs-footer {
41-
background: mat-color($primary);
42-
color: mat-color($primary, default-contrast);
42+
background: mat.get-color-from-palette($primary);
43+
color: mat.get-color-from-palette($primary, default-contrast);
4344
}
4445

4546
.is-next-version {
46-
background: mat-color($next-theme, 900) !important;
47+
background: mat.get-color-from-palette($next-theme, 900) !important;
4748
}
48-
@include carousel-theme($theme);
49-
@include component-category-list-theme($theme);
50-
@include component-viewer-sidenav-theme($theme);
51-
@include component-viewer-theme($theme);
52-
@include docs-site-api-theme($theme);
53-
@include docs-site-markdown-theme($theme);
54-
@include docs-site-svg-theme($theme);
55-
@include docs-site-tables-theme($theme);
56-
@include example-viewer-theme($theme);
57-
@include footer-theme($theme);
58-
@include guide-list-theme($theme);
59-
@include home-page-theme($theme);
60-
@include not-found-theme($theme);
61-
@include nav-bar-theme($theme);
62-
@include table-of-contents-theme($theme);
63-
}
64-
65-
// Define the light theme.
66-
$primary: mat-palette($mat-indigo);
67-
$accent: mat-palette($mat-pink, A200, A100, A400);
6849

69-
$theme: mat-light-theme($primary, $accent);
50+
@include carousel-theme.theme($theme);
51+
@include component-category-list-theme.theme($theme);
52+
@include component-sidenav-theme.theme($theme);
53+
@include component-viewer-theme.theme($theme);
54+
@include api-theme.theme($theme);
55+
@include markdown-theme.theme($theme);
56+
@include svg-theme.theme($theme);
57+
@include tables-theme.theme($theme);
58+
@include example-viewer-theme.theme($theme);
59+
@include footer-theme.theme($theme);
60+
@include guide-list-theme.theme($theme);
61+
@include homepage-theme.theme($theme);
62+
@include not-found-theme.theme($theme);
63+
@include navbar-theme.theme($theme);
64+
@include table-of-contents-theme.theme($theme);
65+
}

‎material.angular.io/src/app/material-docs-app.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import 'constants';
1+
@use '../styles/constants';
22

33
material-docs-app {
44
display: flex;
@@ -25,7 +25,7 @@ material-docs-app > router-outlet + app-component-sidenav {
2525
-webkit-overflow-scrolling: touch;
2626
}
2727

28-
@media (max-width: $extra-small-breakpoint-width) {
28+
@media (max-width: constants.$extra-small-breakpoint-width) {
2929
material-docs-app > router-outlet + .main-content,
3030
material-docs-app > router-outlet + app-component-sidenav {
3131
margin-top: 92px;

‎material.angular.io/src/app/pages/component-category-list/_component-category-list-theme.scss

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,38 @@
1-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
23

3-
@mixin component-category-list-theme($theme) {
4-
$primary: map-get($theme, primary);
5-
$accent: map-get($theme, accent);
6-
$warn: map-get($theme, warn);
7-
$background: map-get($theme, background);
8-
$foreground: map-get($theme, foreground);
9-
$is-dark-theme: map-get($theme, is-dark);
4+
@mixin theme($theme) {
5+
$primary: map.get($theme, primary);
6+
$accent: map.get($theme, accent);
7+
$warn: map.get($theme, warn);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
10+
$is-dark-theme: map.get($theme, is-dark);
1011
$nav-background-opacity: if($is-dark-theme, 0.2, 0.03);
1112

1213
.docs-component-category-list-summary a {
13-
color: mat-color($primary, if($is-dark-theme, 200, default));
14+
color: mat.get-color-from-palette($primary, if($is-dark-theme, 200, default));
1415
}
1516

1617
.docs-component-category-list-card-summary {
17-
color: mat-color($foreground, secondary-text);
18+
color: mat.get-color-from-palette($foreground, secondary-text);
1819
}
1920

2021
.docs-component-category-list-card {
21-
border: 1px solid mat-color($foreground, divider);
22+
border: 1px solid mat.get-color-from-palette($foreground, divider);
2223
border-radius: 4px;
23-
background: mat-color($background, card);
24+
background: mat.get-color-from-palette($background, card);
2425
}
2526

2627
.docs-component-category-list-card:hover {
2728
background: rgba(0, 0, 0, $nav-background-opacity);
2829
}
2930

3031
.docs-component-category-list-card-title {
31-
color: mat-color($foreground, text);
32+
color: mat.get-color-from-palette($foreground, text);
3233
}
3334

3435
.docs-component-category-list-card-image-wrapper {
35-
border-bottom: 1px solid mat-color($foreground, divider);
36+
border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
3637
}
3738
}

‎material.angular.io/src/app/pages/component-category-list/component-category-list.scss

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import '../../../styles/constants';
2-
31
:host {
42
display: flex;
53
flex-direction: column;

‎material.angular.io/src/app/pages/component-page-header/component-page-header.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
@import '../../../styles/constants';
1+
@use '../../../styles/constants';
22

33
.component-page-header {
44
display: flex;
55
align-items: center;
66

7-
@media (max-width: $small-breakpoint-width) {
7+
@media (max-width: constants.$small-breakpoint-width) {
88
padding-left: 0;
99
}
1010
}
1111

1212
h1 {
1313
outline: none;
1414

15-
@media (max-width: $small-breakpoint-width) {
15+
@media (max-width: constants.$small-breakpoint-width) {
1616
padding: 24px 8px;
1717
font-size: 20px;
1818
}
@@ -24,7 +24,7 @@ h1 {
2424
min-width: 64px;
2525
display: none;
2626

27-
@media (max-width: $small-breakpoint-width) {
27+
@media (max-width: constants.$small-breakpoint-width) {
2828
display: flex;
2929
align-items: center;
3030
justify-content: center;

‎material.angular.io/src/app/pages/component-sidenav/_component-sidenav-theme.scss

+21-16
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,49 @@
1-
@import '~@angular/material/theming';
2-
@import 'constants';
3-
4-
@mixin component-viewer-sidenav-theme($theme) {
5-
$primary: map-get($theme, primary);
6-
$background: map-get($theme, background);
7-
$foreground: map-get($theme, foreground);
8-
$is-dark-theme: map-get($theme, is-dark);
1+
@use '~@angular/material' as mat;
2+
@use 'sass:color';
3+
@use 'sass:map';
4+
@use '../../../styles/constants';
5+
6+
@mixin theme($theme) {
7+
$primary: map.get($theme, primary);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
10+
$is-dark-theme: map.get($theme, is-dark);
911
$nav-background-opacity: if($is-dark-theme, 0.2, 0.03);
1012
$nav-background-focus-opacity: if($is-dark-theme, 0.25, 0.08);
1113

1214
.docs-component-viewer-nav-content {
13-
border-right: 1px solid mat-color($foreground, divider);
15+
border-right: 1px solid mat.get-color-from-palette($foreground, divider);
1416

1517
&::-webkit-scrollbar-thumb {
1618
background: rgba(0, 0, 0, .26);
1719
}
1820

1921
a {
20-
color: map-get($foreground, secondary-text);
22+
color: map.get($foreground, secondary-text);
2123

2224
&:hover {
23-
color: mat-color($foreground, text);
25+
color: mat.get-color-from-palette($foreground, text);
2426
}
2527

2628
&.docs-component-viewer-sidenav-item-selected {
27-
background: rgba(mat-color($primary, default), 0.15);
28-
color: lighten(mat-color($primary, default), if($is-dark-theme, 25%, 0));
29+
background: rgba(mat.get-color-from-palette($primary, default), 0.15);
30+
color: color.adjust(
31+
mat.get-color-from-palette($primary, default),
32+
$lightness: if($is-dark-theme, 25%, 0%)
33+
);
2934
}
3035

3136
&.docs-component-viewer-sidenav-item-selected:hover {
32-
background: rgba(mat-color($primary, default), 0.3);
37+
background: rgba(mat.get-color-from-palette($primary, default), 0.3);
3338
}
3439
}
3540

3641
.mat-list-item {
37-
color: rgba(mat-color($foreground, secondary-text), 0.65);
42+
color: rgba(mat.get-color-from-palette($foreground, secondary-text), 0.65);
3843
}
3944
}
4045

41-
@media (max-width: $small-breakpoint-width) {
46+
@media (max-width: constants.$small-breakpoint-width) {
4247
.docs-component-viewer-sidenav {
4348
.docs-component-viewer-nav-content {
4449
background: none;

‎material.angular.io/src/app/pages/component-sidenav/component-sidenav.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import 'constants';
1+
@use '../../../styles/constants';
22

33
app-component-sidenav {
44
display: flex;
@@ -32,7 +32,7 @@ app-component-sidenav {
3232
top: 0;
3333

3434
.docs-component-viewer-nav-content {
35-
width: $sidenav-width;
35+
width: constants.$sidenav-width;
3636
height: 100vh;
3737
overflow: auto;
3838

@@ -87,7 +87,7 @@ div.docs-component-viewer-nav-content .mat-nav-list .mat-list-item .mat-list-ite
8787
padding-left: 25px;
8888
}
8989

90-
@media (max-width: $small-breakpoint-width) {
90+
@media (max-width: constants.$small-breakpoint-width) {
9191
// Add specific rule to prevent default rule conflict
9292
.docs-component-viewer-sidenav-container .docs-component-viewer-sidenav {
9393
// position right above the content

‎material.angular.io/src/app/pages/component-viewer/_component-viewer-theme.scss

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
1-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
23

3-
@mixin component-viewer-theme($theme) {
4-
$primary: map-get($theme, primary);
5-
$accent: map-get($theme, accent);
6-
$warn: map-get($theme, warn);
7-
$background: map-get($theme, background);
8-
$foreground: map-get($theme, foreground);
4+
@mixin theme($theme) {
5+
$primary: map.get($theme, primary);
6+
$accent: map.get($theme, accent);
7+
$warn: map.get($theme, warn);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
910

1011
guide-viewer,
1112
app-component-viewer {
12-
color: mat-color($foreground, text);
13+
color: mat.get-color-from-palette($foreground, text);
1314

1415
.mat-tab-label:focus {
15-
color: mat-color($foreground, text);
16+
color: mat.get-color-from-palette($foreground, text);
1617
}
1718
}
1819

1920
.docs-api-h3 {
20-
border-bottom: 1px solid mat-color($foreground, divider);
21+
border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
2122
}
2223
}

‎material.angular.io/src/app/pages/component-viewer/component-viewer.scss

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
@import 'constants';
1+
@use '../../../styles/constants';
22

33
app-component-viewer {
44
font-weight: 400;
5-
width: calc(100% - #{$sidenav-width + 1} - #{$content-padding-sidenav * 2});
5+
width: calc(100% - #{constants.$sidenav-width + 1} - #{constants.$content-padding-sidenav * 2});
66

77
// spacing for the component viewer
8-
padding: 20px $content-padding-sidenav;
8+
padding: 20px constants.$content-padding-sidenav;
99

1010
// Sidenav is hidden
11-
@media (max-width: $small-breakpoint-width) {
12-
width: calc(100% - #{$content-padding-sidenav * 2});
11+
@media (max-width: constants.$small-breakpoint-width) {
12+
width: calc(100% - #{constants.$content-padding-sidenav * 2});
1313
}
14-
@media ($mat-xsmall) {
15-
width: calc(100% - #{$content-padding-side-xs * 2});
16-
padding-left: $content-padding-side-xs;
17-
padding-right: $content-padding-side-xs;
14+
@media (max-width: 599px) {
15+
width: calc(100% - #{constants.$content-padding-side-xs * 2});
16+
padding-left: constants.$content-padding-side-xs;
17+
padding-right: constants.$content-padding-side-xs;
1818
}
1919
}
2020

@@ -37,7 +37,7 @@ app-component-viewer {
3737
align-items: flex-start;
3838
overflow: visible;
3939

40-
@media (max-width: $small-breakpoint-width) {
40+
@media (max-width: constants.$small-breakpoint-width) {
4141
flex-direction: column;
4242
}
4343
}
@@ -48,7 +48,7 @@ app-component-viewer {
4848

4949
// Reposition on top of content on small screens and remove
5050
// sticky positioning
51-
@media (max-width: $small-breakpoint-width) {
51+
@media (max-width: constants.$small-breakpoint-width) {
5252
order: -1;
5353
position: inherit;
5454
width: auto;
@@ -66,7 +66,7 @@ app-component-viewer {
6666
.docs-component-overview {
6767
width: 80%;
6868

69-
@media (max-width: $small-breakpoint-width) {
69+
@media (max-width: constants.$small-breakpoint-width) {
7070
width: 100%;
7171
margin-right: 0;
7272
}

‎material.angular.io/src/app/pages/guide-list/_guide-list-theme.scss

+13-12
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
1-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
23

3-
@mixin guide-list-theme($theme) {
4-
$primary: map-get($theme, primary);
5-
$accent: map-get($theme, accent);
6-
$warn: map-get($theme, warn);
7-
$background: map-get($theme, background);
8-
$foreground: map-get($theme, foreground);
9-
$is-dark-theme: map-get($theme, is-dark);
4+
@mixin theme($theme) {
5+
$primary: map.get($theme, primary);
6+
$accent: map.get($theme, accent);
7+
$warn: map.get($theme, warn);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
10+
$is-dark-theme: map.get($theme, is-dark);
1011

1112
.docs-guide-list .docs-guide-item {
12-
color: mat-color($primary, if($is-dark-theme, 200, default));
13+
color: mat.get-color-from-palette($primary, if($is-dark-theme, 200, default));
1314
}
1415

1516
.docs-guide-card-divider {
16-
background: mat-color($accent);
17+
background: mat.get-color-from-palette($accent);
1718
}
1819

1920
.docs-guide-card:hover {
20-
background: mat-color($background, hover);
21+
background: mat.get-color-from-palette($background, hover);
2122
}
2223

2324
.docs-guide-item:focus {
2425
.docs-guide-card {
25-
background: mat-color($background, focused-button);
26+
background: mat.get-color-from-palette($background, focused-button);
2627
}
2728
outline: none;
2829
}

‎material.angular.io/src/app/pages/guide-list/guide-list.scss

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import '../../../styles/constants';
2-
31
:host,
42
.docs-guide {
53
height: 100%;

‎material.angular.io/src/app/pages/guide-viewer/guide-viewer.scss

+8-13
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
@import '~@angular/material/theming';
2-
@import '../../../styles/constants';
3-
4-
/* For desktop, the content should be aligned with the page title. */
5-
$guide-content-margin-side: 70px;
6-
$guide-content-margin-side-xs: 15px;
1+
@use '../../../styles/constants';
72

83
:host {
94
display: flex;
@@ -12,13 +7,13 @@ $guide-content-margin-side-xs: 15px;
127
}
138

149
.docs-guide-wrapper {
15-
padding: 20px $content-padding-guides-side 0;
10+
padding: 20px constants.$content-padding-guides-side 0;
1611
display: block;
1712
text-align: center;
1813

19-
@media ($mat-xsmall) {
20-
padding-left: $content-padding-side-xs;
21-
padding-right: $content-padding-side-xs;
14+
@media (max-width: constants.$small-breakpoint-width) {
15+
padding-left: constants.$content-padding-side-xs;
16+
padding-right: constants.$content-padding-side-xs;
2217
}
2318
}
2419

@@ -34,7 +29,7 @@ $guide-content-margin-side-xs: 15px;
3429
// the page from jumping around while something is loading.
3530
min-height: 100vh;
3631

37-
@media (max-width: $extra-small-breakpoint-width) {
32+
@media (max-width: constants.$extra-small-breakpoint-width) {
3833
flex-direction: column;
3934
}
4035
}
@@ -43,7 +38,7 @@ $guide-content-margin-side-xs: 15px;
4338
flex-grow: 1;
4439
width: 80%;
4540

46-
@media (max-width: $extra-small-breakpoint-width) {
41+
@media (max-width: constants.$extra-small-breakpoint-width) {
4742
width: 100%;
4843
}
4944
}
@@ -54,7 +49,7 @@ table-of-contents {
5449

5550
// Reposition on top of content on small screens and remove
5651
// sticky positioning
57-
@media (max-width: $extra-small-breakpoint-width) {
52+
@media (max-width: constants.$extra-small-breakpoint-width) {
5853
order: -1;
5954
position: inherit;
6055
width: auto;

‎material.angular.io/src/app/pages/homepage/_homepage-theme.scss

+21-20
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,59 @@
1-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
23

3-
@mixin home-page-theme($theme) {
4-
$primary: map-get($theme, primary);
5-
$accent: map-get($theme, accent);
6-
$warn: map-get($theme, warn);
7-
$background: map-get($theme, background);
8-
$foreground: map-get($theme, foreground);
4+
@mixin theme($theme) {
5+
$primary: map.get($theme, primary);
6+
$accent: map.get($theme, accent);
7+
$warn: map.get($theme, warn);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
910

1011
app-homepage {
1112
.docs-header-background {
12-
background: mat-color($primary);
13+
background: mat.get-color-from-palette($primary);
1314
}
1415

1516
.docs-header-headline {
16-
color: mat-color($primary, default-contrast);
17+
color: mat.get-color-from-palette($primary, default-contrast);
1718
}
1819

1920
.docs-header-start {
20-
color: mat-color($primary);
21+
color: mat.get-color-from-palette($primary);
2122

2223
.docs-link {
23-
color: mat-color($primary, default-contrast);
24+
color: mat.get-color-from-palette($primary, default-contrast);
2425
}
2526
}
2627

2728
.docs-homepage-row {
28-
color: mat-color($foreground, secondary-text);
29+
color: mat.get-color-from-palette($foreground, secondary-text);
2930
}
3031

3132
.docs-homepage-carousel-row h2 {
32-
color: mat-color($foreground, secondary-text);
33+
color: mat.get-color-from-palette($foreground, secondary-text);
3334
}
3435

3536
a.docs-link, a.docs-featured-components-carousel-item {
36-
color: mat-color($foreground, secondary-text)
37+
color: mat.get-color-from-palette($foreground, secondary-text)
3738
}
3839

3940
a.docs-link:hover {
40-
color: mat-color($foreground, text);
41+
color: mat.get-color-from-palette($foreground, text);
4142
}
4243

4344
.docs-homepage-guides-card-divider {
44-
background: mat-color($accent)
45+
background: mat.get-color-from-palette($accent)
4546
}
4647

4748
[carousel-item]:hover {
4849
.docs-homepage-guides-card {
49-
background: mat-color($background, hover);
50+
background: mat.get-color-from-palette($background, hover);
5051
}
5152
}
5253

5354
[carousel-item]:focus {
5455
.docs-homepage-guides-card {
55-
background: mat-color($background, focused-button);
56+
background: mat.get-color-from-palette($background, focused-button);
5657
}
5758
outline: none;
5859
}
@@ -62,15 +63,15 @@
6263
transform: scale(1.2);
6364
}
6465

65-
box-shadow:inset 0 0 0 1.5px mat-color($foreground, divider);
66+
box-shadow:inset 0 0 0 1.5px mat.get-color-from-palette($foreground, divider);
6667
}
6768

6869
.docs-featured-components-carousel-item:focus {
6970
img {
7071
transform: scale(1.2);
7172
}
7273

73-
box-shadow:inset 0 0 0 1.5px mat-color($foreground, disabled);
74+
box-shadow:inset 0 0 0 1.5px mat.get-color-from-palette($foreground, disabled);
7475
}
7576
}
7677
}

‎material.angular.io/src/app/pages/not-found/_not-found-theme.scss

+12-8
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
1-
@mixin not-found-theme($theme) {
2-
$primary: map-get($theme, primary);
3-
$foreground: map-get($theme, foreground);
4-
$background: map-get($theme, background);
5-
$frown-color: mat-color($background, background);
6-
$shield-color: mat-color($primary);
1+
@use 'sass:color';
2+
@use 'sass:map';
3+
@use '~@angular/material' as mat;
4+
5+
@mixin theme($theme) {
6+
$primary: map.get($theme, primary);
7+
$foreground: map.get($theme, foreground);
8+
$background: map.get($theme, background);
9+
$frown-color: mat.get-color-from-palette($background, background);
10+
$shield-color: mat.get-color-from-palette($primary);
711

812
app-not-found {
9-
color: mat-color($foreground, text);
13+
color: mat.get-color-from-palette($foreground, text);
1014

1115
.shield-left {
1216
fill: $shield-color;
1317
}
1418

1519
.shield-right {
16-
fill: darken($shield-color, 10%);
20+
fill: color.adjust($shield-color, $lightness: -10%);
1721
}
1822

1923
.eye {

‎material.angular.io/src/app/shared/carousel/_carousel-theme.scss

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
@mixin carousel-theme($theme) {
2-
$primary: map-get($theme, primary);
3-
$accent: map-get($theme, accent);
4-
$warn: map-get($theme, warn);
5-
$background: map-get($theme, background);
6-
$foreground: map-get($theme, foreground);
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
3+
4+
@mixin theme($theme) {
5+
$primary: map.get($theme, primary);
6+
$accent: map.get($theme, accent);
7+
$warn: map.get($theme, warn);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
710

811
.docs-carousel-nav.mat-mini-fab {
9-
background: mat-color($background, background);
10-
color: mat-color($foreground, secondary-text)
12+
background: mat.get-color-from-palette($background, background);
13+
color: mat.get-color-from-palette($foreground, secondary-text)
1114
}
1215

1316
}

‎material.angular.io/src/app/shared/example-viewer/_example-viewer-theme.scss

+14-11
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
1-
@mixin example-viewer-theme($theme) {
2-
$primary: map-get($theme, primary);
3-
$accent: map-get($theme, accent);
4-
$warn: map-get($theme, warn);
5-
$background: map-get($theme, background);
6-
$foreground: map-get($theme, foreground);
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
3+
4+
@mixin theme($theme) {
5+
$primary: map.get($theme, primary);
6+
$accent: map.get($theme, accent);
7+
$warn: map.get($theme, warn);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
710

811
example-viewer {
912
.docs-example-viewer-wrapper {
10-
border: 1px solid rgba(mat-color($foreground, secondary-text), 0.2);
13+
border: 1px solid rgba(mat.get-color-from-palette($foreground, secondary-text), 0.2);
1114
margin: 4px;
1215
}
1316

1417
.docs-example-viewer-title {
15-
color: mat-color($foreground, secondary-text);
18+
color: mat.get-color-from-palette($foreground, secondary-text);
1619
}
1720

1821
.docs-example-button {
19-
color: mat-color($foreground, secondary-text);
22+
color: mat.get-color-from-palette($foreground, secondary-text);
2023

2124
[dir='rtl'] & {
2225
right: auto;
@@ -29,11 +32,11 @@
2932
}
3033

3134
code-snippet {
32-
background: rgba(mat-color($foreground, secondary-text), 0.01);
35+
background: rgba(mat.get-color-from-palette($foreground, secondary-text), 0.01);
3336
}
3437

3538
.docs-example-viewer-source code-snippet {
36-
border-bottom: 1px solid mat-color($foreground, divider);
39+
border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
3740
}
3841
}
3942
}

‎material.angular.io/src/app/shared/footer/_footer-theme.scss

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
@mixin footer-theme($theme) {
2-
$primary: map-get($theme, primary);
3-
$accent: map-get($theme, accent);
4-
$warn: map-get($theme, warn);
5-
$background: map-get($theme, background);
6-
$foreground: map-get($theme, foreground);
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
3+
4+
@mixin theme($theme) {
5+
$primary: map.get($theme, primary);
6+
$accent: map.get($theme, accent);
7+
$warn: map.get($theme, warn);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
710

811
app-footer {
912
.docs-footer-links a {
10-
color: mat-color($primary, default-contrast);
13+
color: mat.get-color-from-palette($primary, default-contrast);
1114
}
1215
}
1316
}

‎material.angular.io/src/app/shared/navbar/_navbar-theme.scss

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
@mixin nav-bar-theme($theme) {
2-
$primary: map-get($theme, primary);
3-
$accent: map-get($theme, accent);
4-
$warn: map-get($theme, warn);
5-
$background: map-get($theme, background);
6-
$foreground: map-get($theme, foreground);
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
3+
4+
@mixin theme($theme) {
5+
$primary: map.get($theme, primary);
6+
$accent: map.get($theme, accent);
7+
$warn: map.get($theme, warn);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
710

811
app-navbar {
9-
color: mat-color($primary, default-contrast);
12+
color: mat.get-color-from-palette($primary, default-contrast);
1013

1114
.docs-navbar, .docs-navbar-header {
12-
background: mat-color($primary);
15+
background: mat.get-color-from-palette($primary);
1316
}
1417
}
1518
}

‎material.angular.io/src/app/shared/table-of-contents/_table-of-contents-theme.scss

+13-10
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
1-
@mixin table-of-contents-theme($theme) {
2-
$primary: map-get($theme, primary);
3-
$accent: map-get($theme, accent);
4-
$warn: map-get($theme, warn);
5-
$background: map-get($theme, background);
6-
$foreground: map-get($theme, foreground);
7-
$is-dark-theme: map-get($theme, is-dark);
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
3+
4+
@mixin theme($theme) {
5+
$primary: map.get($theme, primary);
6+
$accent: map.get($theme, accent);
7+
$warn: map.get($theme, warn);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
10+
$is-dark-theme: map.get($theme, is-dark);
811

912
.docs-toc-container {
10-
border-left: solid 4px mat-color($primary);
13+
border-left: solid 4px mat.get-color-from-palette($primary);
1114

1215
.docs-link {
13-
color: mat-color($foreground, secondary-text);
16+
color: mat.get-color-from-palette($foreground, secondary-text);
1417
transition: color 100ms;
1518

1619
&:hover,
1720
&.docs-active {
18-
color: mat-color($primary, if($is-dark-theme, 200, default));
21+
color: mat.get-color-from-palette($primary, if($is-dark-theme, 200, default));
1922
}
2023
}
2124
}

‎material.angular.io/src/styles.scss

+14-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
@import './app-theme';
2-
@import './styles/api';
3-
@import './styles/markdown';
4-
@import './styles/tables';
5-
@import './styles/general';
1+
@use '~@angular/material' as mat;
2+
@use './app-theme';
3+
@use './styles/api';
4+
@use './styles/markdown';
5+
@use './styles/tables';
6+
@use './styles/general';
7+
8+
// Define the light theme.
9+
$_primary: mat.define-palette(mat.$indigo-palette);
10+
$_accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
11+
$_theme: mat.define-light-theme($_primary, $_accent);
612

713
// Include material core styles.
8-
@include mat-core();
14+
@include mat.core();
915

10-
@include angular-material-theme($theme);
11-
@include material-docs-app-theme($theme);
16+
@include mat.all-component-themes($_theme);
17+
@include app-theme.theme($_theme);

‎material.angular.io/src/styles/_api-theme.scss

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,39 @@
1-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
23

34
// Mixin to apply theme colors for generated API docs.
4-
@mixin docs-site-api-theme($theme) {
5-
$primary: map-get($theme, primary);
6-
$accent: map-get($theme, accent);
7-
$warn: map-get($theme, warn);
8-
$background: map-get($theme, background);
9-
$foreground: map-get($theme, foreground);
10-
$is-dark-theme: map-get($theme, is-dark);
5+
@mixin theme($theme) {
6+
$primary: map.get($theme, primary);
7+
$accent: map.get($theme, accent);
8+
$warn: map.get($theme, warn);
9+
$background: map.get($theme, background);
10+
$foreground: map.get($theme, foreground);
11+
$is-dark-theme: map.get($theme, is-dark);
1112

1213
@if $is-dark-theme {
1314
.docs-api-method-name-cell {
14-
color: mat-color($primary, 200);
15+
color: mat.get-color-from-palette($primary, 200);
1516
}
1617

1718
.docs-api-method-returns-type,
1819
.docs-api-method-parameter-type {
19-
color: mat-color($primary, 200);
20+
color: mat.get-color-from-palette($primary, 200);
2021
}
2122
} @else {
2223
.docs-api-method-name-cell {
23-
color: mat-color($primary, 800);
24+
color: mat.get-color-from-palette($primary, 800);
2425
}
2526

2627
.docs-api-method-returns-type,
2728
.docs-api-method-parameter-type {
28-
color: mat-color($primary, darker);
29+
color: mat.get-color-from-palette($primary, darker);
2930
}
3031
}
3132

3233
.docs-api-async-method-marker {
3334
$async-method-marker-hue: if($is-dark-theme, 200, 400);
34-
background-color: mat-color($primary, $async-method-marker-hue);
35-
color: mat-color($primary, '#{$async-method-marker-hue}-contrast');
35+
background-color: mat.get-color-from-palette($primary, $async-method-marker-hue);
36+
color: mat.get-color-from-palette($primary, '#{$async-method-marker-hue}-contrast');
3637
}
3738

3839
// Force the top-level API docs header to be hidden, since this is already
@@ -50,6 +51,6 @@
5051
.docs-api-module-import,
5152
.docs-api-class-selector-name,
5253
.docs-api-class-export-name {
53-
background: rgba(mat-color($foreground, secondary-text), 0.06);
54+
background: rgba(mat.get-color-from-palette($foreground, secondary-text), 0.06);
5455
}
5556
}

‎material.angular.io/src/styles/_constants.scss

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import '~@angular/material/theming';
2-
31
// The values were determined through the combination of Material Design breakpoints and careful
42
// testing of the application across a range of common device widths (360px+).
53
// These breakpoint values need to stay in sync with the related constants in

‎material.angular.io/src/styles/_markdown-theme.scss

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
23

34
// Mixin to apply theme colors for docs generated from markdown files in the material2 repo.
4-
@mixin docs-site-markdown-theme($theme) {
5-
$primary: map-get($theme, primary);
6-
$accent: map-get($theme, accent);
7-
$warn: map-get($theme, warn);
8-
$background: map-get($theme, background);
9-
$foreground: map-get($theme, foreground);
10-
$is-dark-theme: map-get($theme, is-dark);
5+
@mixin theme($theme) {
6+
$primary: map.get($theme, primary);
7+
$accent: map.get($theme, accent);
8+
$warn: map.get($theme, warn);
9+
$background: map.get($theme, background);
10+
$foreground: map.get($theme, foreground);
11+
$is-dark-theme: map.get($theme, is-dark);
1112
$exportBackgroundOpacity: if($is-dark-theme, 0.06, 0.03);
1213

1314
.docs-markdown {
1415
a:not(.mat-button-base) {
15-
color: mat-color($primary, if($is-dark-theme, 200, default));
16+
color: mat.get-color-from-palette($primary, if($is-dark-theme, 200, default));
1617
}
1718

1819
pre {
19-
background: rgba(mat-color($foreground, secondary-text), .01);
20-
border: .5px solid rgba(mat-color($foreground, secondary-text), .2);
20+
background: rgba(mat.get-color-from-palette($foreground, secondary-text), .01);
21+
border: .5px solid rgba(mat.get-color-from-palette($foreground, secondary-text), .2);
2122

2223
code {
2324
background: transparent;
@@ -26,16 +27,16 @@
2627

2728
h3 .material-icons,
2829
h4 .material-icons {
29-
color: mat-color($foreground, secondary-text);
30+
color: mat.get-color-from-palette($foreground, secondary-text);
3031
}
3132

3233
code {
33-
background: rgba(mat-color($foreground, secondary-text), $exportBackgroundOpacity);
34+
background: rgba(mat.get-color-from-palette($foreground, secondary-text), $exportBackgroundOpacity);
3435
}
3536

3637
> table {
3738
th, td {
38-
border-bottom-color: mat-color($foreground, divider);
39+
border-bottom-color: mat.get-color-from-palette($foreground, divider);
3940
}
4041
}
4142
}

‎material.angular.io/src/styles/_svg-theme.scss

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
23

34
// Mixin to create a css class for each fill, stroke, and stop-color for a given color.
45
@mixin _svgColorProperties($className, $color) {
@@ -16,20 +17,20 @@
1617
}
1718

1819
// Mixin to apply theme colors for generated API docs.
19-
@mixin docs-site-svg-theme($theme) {
20-
$primary: map-get($theme, primary);
21-
$accent: map-get($theme, accent);
22-
$warn: map-get($theme, warn);
23-
$background: map-get($theme, background);
24-
$foreground: map-get($theme, foreground);
25-
$is-dark-theme: map-get($theme, is-dark);
20+
@mixin theme($theme) {
21+
$primary: map.get($theme, primary);
22+
$accent: map.get($theme, accent);
23+
$warn: map.get($theme, warn);
24+
$background: map.get($theme, background);
25+
$foreground: map.get($theme, foreground);
26+
$is-dark-theme: map.get($theme, is-dark);
2627

27-
@include _svgColorProperties(primary, mat-color($primary));
28-
@include _svgColorProperties(accent, mat-color($accent));
28+
@include _svgColorProperties(primary, mat.get-color-from-palette($primary));
29+
@include _svgColorProperties(accent, mat.get-color-from-palette($accent));
2930

3031
// Use sass's `lighten` and `darken` to create gradient colors for the docs SVGs.
3132
// This is specifically tailored to the SVGs in this app and is not a general approach.
32-
$base: mat-color($primary);
33+
$base: mat.get-color-from-palette($primary);
3334
@include _svgColorProperties(primary-dark-30, scale_color($base, $lightness: -30%));
3435
@include _svgColorProperties(primary-dark-40, scale_color($base, $lightness: -40%));
3536
@include _svgColorProperties(primary-light-20, scale_color($base, $lightness: +20%));

‎material.angular.io/src/styles/_tables-theme.scss

+13-12
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
23

34
// Mixin to apply theme colors for both generated API docs and markdown docs (guides/overviews).
4-
@mixin docs-site-tables-theme($theme) {
5-
$primary: map-get($theme, primary);
6-
$accent: map-get($theme, accent);
7-
$warn: map-get($theme, warn);
8-
$background: map-get($theme, background);
9-
$foreground: map-get($theme, foreground);
10-
$is-dark-theme: map-get($theme, is-dark);
5+
@mixin theme($theme) {
6+
$primary: map.get($theme, primary);
7+
$accent: map.get($theme, accent);
8+
$warn: map.get($theme, warn);
9+
$background: map.get($theme, background);
10+
$foreground: map.get($theme, foreground);
11+
$is-dark-theme: map.get($theme, is-dark);
1112
$tableBorderOpacity: if($is-dark-theme, 0.08, 0.03);
12-
13+
1314
.docs-api table,
1415
.docs-markdown-table {
15-
color: mat-color($foreground, text);
16+
color: mat.get-color-from-palette($foreground, text);
1617
}
1718

1819
.docs-api th,
1920
.docs-markdown-th {
20-
background: mat-color($background, app-bar);
21+
background: mat.get-color-from-palette($background, app-bar);
2122
}
2223

2324
.docs-api td,
2425
.docs-markdown-td {
25-
border: 1px solid rgba(mat-color($foreground, secondary-text), $tableBorderOpacity);
26+
border: 1px solid rgba(mat.get-color-from-palette($foreground, secondary-text), $tableBorderOpacity);
2627
}
2728
}

‎material.angular.io/src/styles/_tables.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import './constants';
1+
@use './constants';
22

33
.docs-api table,
44
.docs-markdown-table {
@@ -23,7 +23,7 @@
2323
font-weight: 400;
2424
padding: 8px 16px;
2525

26-
@media (max-width: $extra-small-breakpoint-width) {
26+
@media (max-width: constants.$extra-small-breakpoint-width) {
2727
&.docs-api-properties-name-cell,
2828
&.docs-api-method-parameter-cell,
2929
&.docs-api-method-returns-type-cell,
@@ -35,7 +35,7 @@
3535
}
3636

3737

38-
@media (max-width: $small-breakpoint-width) {
38+
@media (max-width: constants.$small-breakpoint-width) {
3939
.docs-api table,
4040
.docs-markdown-table {
4141
margin: 0 0 32px 0;

‎material.angular.io/src/styles/custom-themes/deeppurple-amber.scss

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
@import 'app-theme';
1+
@use '~@angular/material' as mat;
2+
@use '../../app-theme';
23

34
// Define the light theme.
4-
$primary: mat-palette($mat-deep-purple);
5-
$accent: mat-palette($mat-amber, A200, A100, A400);
5+
$_primary: mat.define-palette(mat.$deep-purple-palette);
6+
$_accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
7+
$_theme: mat.define-light-theme($_primary, $_accent);
68

7-
$theme: mat-light-theme($primary, $accent);
8-
@include angular-material-theme($theme);
9-
@include material-docs-app-theme($theme);
9+
@include mat.all-component-themes($_theme);
10+
@include app-theme.theme($_theme);

‎material.angular.io/src/styles/custom-themes/indigo-pink.scss

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
@import 'app-theme';
1+
@use '~@angular/material' as mat;
2+
@use '../../app-theme';
23

34
// Define the light theme.
4-
$primary: mat-palette($mat-indigo);
5-
$accent: mat-palette($mat-pink, A200, A100, A400);
5+
$_primary: mat.define-palette(mat.$indigo-palette);
6+
$_accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
7+
$_theme: mat.define-light-theme($_primary, $_accent);
68

7-
$theme: mat-light-theme($primary, $accent);
8-
@include angular-material-theme($theme);
9-
@include material-docs-app-theme($theme);
9+
@include mat.all-component-themes($_theme);
10+
@include app-theme.theme($_theme);

‎material.angular.io/src/styles/custom-themes/pink-bluegrey.scss

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
@import 'app-theme';
2-
@import '../../highlightjs/material-dark';
1+
@use '~@angular/material' as mat;
2+
@use '../../app-theme';
3+
@use '../../highlightjs/material-dark';
34

45
// Define the dark theme.
5-
$primary: mat-palette($mat-pink);
6-
$accent: mat-palette($mat-blue-grey);
6+
$_primary: mat.define-palette(mat.$pink-palette);
7+
$_accent: mat.define-palette(mat.$blue-grey-palette);
8+
$_theme: mat.define-dark-theme($_primary, $_accent);
79

8-
$theme: mat-dark-theme($primary, $accent);
9-
@include angular-material-theme($theme);
10-
@include material-docs-app-theme($theme);
10+
@include mat.all-component-themes($_theme);
11+
@include app-theme.theme($_theme);

‎material.angular.io/src/styles/custom-themes/purple-green.scss

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
@import 'app-theme';
2-
@import '../../highlightjs/material-dark';
1+
@use '~@angular/material' as mat;
2+
@use '../../app-theme';
3+
@use '../../highlightjs/material-dark';
34

45
// Define the dark theme.
5-
$primary: mat-palette($mat-purple);
6-
$accent: mat-palette($mat-green, A200, A100, A400);
6+
$_primary: mat.define-palette(mat.$purple-palette);
7+
$_accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
8+
$_theme: mat.define-dark-theme($_primary, $_accent);
79

8-
$theme: mat-dark-theme($primary, $accent);
9-
@include angular-material-theme($theme);
10-
@include material-docs-app-theme($theme);
10+
@include mat.all-component-themes($_theme);
11+
@include app-theme.theme($_theme);

0 commit comments

Comments
 (0)
Please sign in to comment.