Skip to content

Commit 4ba4689

Browse files
crisbetocrisbeto
authored
feat(material/core): namespace m2-specific theming APIs (#28892)
These changes rename the theming APIs that are specific to M2 to be prefixed with `m2-`. Subsequent changes will move the M3 APIs out of `experimental` and introduce a schematic to automatically migrate users. BREAKING CHANGE: The following APIs have been renamed. If you update using `ng update`, your app will be fixed automatically. * `define-light-theme` to `m2-define-light-theme` * `define-dark-theme` to `m2-define-dark-theme` * `define-palette` to `m2-define-palette` * `get-contrast-color-from-palette` to `m2-get-contrast-color-from-palette` * `get-color-from-palette` to `m2-get-color-from-palette` * `get-color-config` to `m2-get-color-config` * `get-typography-config` to `m2-get-typography-config` * `get-density-config` to `m2-get-density-config` * `$red-palette` to `$m2-red-palette` * `$pink-palette` to `$m2-pink-palette` * `$indigo-palette` to `$m2-indigo-palette` * `$purple-palette` to `$m2-purple-palette` * `$deep-purple-palette` to `$m2-deep-purple-palette` * `$blue-palette` to `$m2-blue-palette` * `$light-blue-palette` to `$m2-light-blue-palette` * `$cyan-palette` to `$m2-cyan-palette` * `$teal-palette` to `$m2-teal-palette` * `$green-palette` to `$m2-green-palette` * `$light-green-palette` to `$m2-light-green-palette` * `$lime-palette` to `$m2-lime-palette` * `$yellow-palette` to `$m2-yellow-palette` * `$amber-palette` to `$m2-amber-palette` * `$orange-palette` to `$m2-orange-palette` * `$deep-orange-palette` to `$m2-deep-orange-palette` * `$brown-palette` to `$m2-brown-palette` * `$grey-palette` to `$m2-grey-palette` * `$gray-palette` to `$m2-gray-palette` * `$blue-grey-palette` to `$m2-blue-grey-palette` * `$blue-gray-palette` to `$m2-blue-gray-palette` * `$light-theme-background-palette` to `$m2-light-theme-background-palette` * `$dark-theme-background-palette` to `$m2-dark-theme-background-palette` * `$light-theme-foreground-palette` to `$m2-light-theme-foreground-palette` * `$dark-theme-foreground-palette` to `$m2-dark-theme-foreground-palette` * `define-typography-level` to `m2-define-typography-level` * `define-rem-typography-config` to `m2-define-rem-typography-config` * `define-typography-config` to `m2-define-typography-config` * `define-legacy-typography-config` to `m2-define-legacy-typography-config` * `typography-level` to `m2-typography-level` * `font-size` to `m2-font-size` * `line-height` to `m2-line-height` * `font-weight` to `m2-font-weight` * `letter-spacing` to `m2-letter-spacing` * `font-family` to `m2-font-family` * `font-shorthand` to `m2-font-shorthand`
1 parent 902fb08 commit 4ba4689

File tree

10 files changed

+138
-93
lines changed

10 files changed

+138
-93
lines changed

‎integration/yarn-pnp-compat/src/styles.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
@use '@angular/material' as mat;
22

3-
$primary: mat.define-palette(mat.$blue-palette);
4-
$accent: mat.define-palette(mat.$grey-palette);
5-
$theme: mat.define-light-theme((
3+
$primary: mat.m2-define-palette(mat.$m2-blue-palette);
4+
$accent: mat.m2-define-palette(mat.$m2-grey-palette);
5+
$theme: mat.m2-define-light-theme((
66
color: (primary: $primary, accent: $accent),
7-
typography: mat.define-typography-config(),
7+
typography: mat.m2-define-typography-config(),
88
density: 0
99
));
1010

‎src/dev-app/theme.scss

+9-9
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@
77
mat.$theme-legacy-inspection-api-compatibility: false;
88

99
// Define the default (light) theme.
10-
$candy-app-primary: mat.define-palette(mat.$indigo-palette);
11-
$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
12-
$candy-app-theme: mat.define-light-theme((
10+
$candy-app-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
11+
$candy-app-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
12+
$candy-app-theme: mat.m2-define-light-theme((
1313
// Define the default colors for our app.
1414
color: (
1515
primary: $candy-app-primary,
1616
accent: $candy-app-accent
1717
),
1818
// Define the default typography for our app.
19-
typography: mat.define-typography-config(),
19+
typography: mat.m2-define-typography-config(),
2020
// Define the default density level for our app.
2121
density: 0,
2222
));
@@ -46,18 +46,18 @@ $candy-app-theme: mat.define-light-theme((
4646
// default theme.
4747
.demo-unicorn-dark-theme {
4848
// Create the color palettes used in our dark theme.
49-
$dark-primary: mat.define-palette(mat.$blue-grey-palette);
50-
$dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
51-
$dark-warn: mat.define-palette(mat.$deep-orange-palette);
52-
$dark-colors: mat.define-dark-theme(
49+
$dark-primary: mat.m2-define-palette(mat.$m2-blue-grey-palette);
50+
$dark-accent: mat.m2-define-palette(mat.$m2-amber-palette, A200, A100, A400);
51+
$dark-warn: mat.m2-define-palette(mat.$m2-deep-orange-palette);
52+
$dark-colors: mat.m2-define-dark-theme(
5353
(
5454
color: (
5555
primary: $dark-primary,
5656
accent: $dark-accent,
5757
warn: $dark-warn
5858
),
5959
density: 0,
60-
typography: mat.define-typography-config(),
60+
typography: mat.m2-define-typography-config(),
6161
)
6262
);
6363

‎src/material-experimental/theming/_m3-tokens.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -508,13 +508,13 @@
508508
// TODO(mmalerba): Refactor this to not depend on the legacy theme when moving out of
509509
// material-experimental. This is a hack for now because there is no good way to get the token
510510
// slots in material-experimental without exposing them all from material.
511-
$fake-theme: mat.define-light-theme((
511+
$fake-theme: mat.m2-define-light-theme((
512512
color: (
513-
primary: mat.define-palette(mat.$red-palette),
514-
accent: mat.define-palette(mat.$red-palette),
515-
warn: mat.define-palette(mat.$red-palette),
513+
primary: mat.m2-define-palette(mat.$m2-red-palette),
514+
accent: mat.m2-define-palette(mat.$m2-red-palette),
515+
warn: mat.m2-define-palette(mat.$m2-red-palette),
516516
),
517-
typography: mat.define-typography-config(),
517+
typography: mat.m2-define-typography-config(),
518518
density: 0
519519
));
520520
$token-slots: mat.m2-tokens-from-theme($fake-theme);

‎src/material/_index.scss

+10-19
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
1-
// Theming APIs
2-
@forward './core/theming/theming' show define-light-theme, define-dark-theme,
3-
define-palette, get-contrast-color-from-palette, get-color-from-palette,
4-
get-color-config, get-typography-config, get-density-config,
5-
$theme-ignore-duplication-warnings, $theme-legacy-inspection-api-compatibility;
1+
// Expose the M2 APIs under an `m2-` prefix in order to distinguish them from the M3 APIs.
2+
@forward './core/m2' as m2-*;
3+
4+
// New theming APIs
5+
@forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,
6+
get-theme-typography, get-theme-density, theme-has, theme-remove;
7+
8+
@forward './core/theming/theming' show $theme-ignore-duplication-warnings,
9+
$theme-legacy-inspection-api-compatibility;
610
@forward './core/theming/theming' as private-* show private-clamp-density;
7-
@forward './core/theming/palette' show $red-palette, $pink-palette, $indigo-palette,
8-
$purple-palette, $deep-purple-palette, $blue-palette, $light-blue-palette, $cyan-palette,
9-
$teal-palette, $green-palette, $light-green-palette, $lime-palette, $yellow-palette,
10-
$amber-palette, $orange-palette, $deep-orange-palette, $brown-palette, $grey-palette,
11-
$gray-palette, $blue-grey-palette, $blue-gray-palette, $light-theme-background-palette,
12-
$dark-theme-background-palette, $light-theme-foreground-palette, $dark-theme-foreground-palette;
13-
@forward './core/typography/typography' show define-typography-level, define-rem-typography-config,
14-
define-typography-config, typography-hierarchy, define-legacy-typography-config;
15-
@forward './core/typography/typography-utils' show typography-level,
16-
font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
11+
@forward './core/typography/typography' show typography-hierarchy;
1712
@forward './core/tokens/m2' show m2-tokens-from-theme;
1813

1914
// Private/Internal
@@ -131,7 +126,3 @@
131126
tooltip-typography, tooltip-density, tooltip-base;
132127
@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density,
133128
tree-base;
134-
135-
// New theming APIs
136-
@forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,
137-
get-theme-typography, get-theme-density, theme-has, theme-remove;

‎src/material/core/_m2.scss

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// M2-specific theming APIs which are separated out into this file so they
2+
// can be renamed conditionally depending on whether we're in 1P or 3P.
3+
@forward './theming/theming' show
4+
define-light-theme,
5+
define-dark-theme,
6+
define-palette,
7+
get-contrast-color-from-palette,
8+
get-color-from-palette,
9+
get-color-config,
10+
get-typography-config,
11+
get-density-config;
12+
13+
@forward './theming/palette' show
14+
$red-palette,
15+
$pink-palette,
16+
$indigo-palette,
17+
$purple-palette,
18+
$deep-purple-palette,
19+
$blue-palette,
20+
$light-blue-palette,
21+
$cyan-palette,
22+
$teal-palette,
23+
$green-palette,
24+
$light-green-palette,
25+
$lime-palette,
26+
$yellow-palette,
27+
$amber-palette,
28+
$orange-palette,
29+
$deep-orange-palette,
30+
$brown-palette,
31+
$grey-palette,
32+
$gray-palette,
33+
$blue-grey-palette,
34+
$blue-gray-palette,
35+
$light-theme-background-palette,
36+
$dark-theme-background-palette,
37+
$light-theme-foreground-palette,
38+
$dark-theme-foreground-palette;
39+
40+
41+
@forward './typography/typography' show
42+
define-typography-level,
43+
define-rem-typography-config,
44+
define-typography-config,
45+
define-legacy-typography-config;
46+
47+
@forward './typography/typography-utils' show
48+
typography-level,
49+
font-size,
50+
line-height,
51+
font-weight,
52+
letter-spacing,
53+
font-family,
54+
font-shorthand;

‎src/material/core/theming/tests/test-theming-bundle.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ mat.$theme-ignore-duplication-warnings: true;
1111
// test will be reported as failing.
1212

1313
// Theme creation functions.
14-
$theme: mat.define-light-theme((
14+
$theme: mat.m2-define-light-theme((
1515
color: (
16-
primary: mat.define-palette(mat.$red-palette),
17-
accent: mat.define-palette(mat.$blue-palette),
16+
primary: mat.m2-define-palette(mat.$m2-red-palette),
17+
accent: mat.m2-define-palette(mat.$m2-blue-palette),
1818
),
19-
typography: mat.define-typography-config(),
19+
typography: mat.m2-define-typography-config(),
2020
density: -2,
2121
));
22-
$dark-theme: mat.define-dark-theme($theme);
23-
$rem-typography: mat.define-rem-typography-config();
22+
$dark-theme: mat.m2-define-dark-theme($theme);
23+
$rem-typography: mat.m2-define-rem-typography-config();
2424

2525
// All-* mixins.
2626
@include mat.all-component-themes($theme);

‎src/material/core/theming/tests/theming-definition-api.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ describe('theming definition api', () => {
240240

241241
it('should throw for invalid palette', () => {
242242
expect(() =>
243-
transpile(`$theme: matx.define-theme((color: (tertiary: mat.$red-palette)))`),
243+
transpile(`$theme: matx.define-theme((color: (tertiary: mat.$m2-red-palette)))`),
244244
).toThrowError(/Expected \$config\.color\.tertiary to be a valid M3 palette\. Got:/);
245245
});
246246

‎src/material/core/theming/tests/theming-inspection-api.spec.ts

+33-33
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,13 @@ describe('theming inspection api', () => {
4545
it('should get theme version', () => {
4646
expect(
4747
transpile(`
48-
$theme: mat.define-light-theme((
48+
$theme: mat.m2-define-light-theme((
4949
color: (
50-
primary: mat.define-palette(mat.$red-palette),
51-
accent: mat.define-palette(mat.$red-palette),
52-
warn: mat.define-palette(mat.$red-palette),
50+
primary: mat.m2-define-palette(mat.$m2-red-palette),
51+
accent: mat.m2-define-palette(mat.$m2-red-palette),
52+
warn: mat.m2-define-palette(mat.$m2-red-palette),
5353
),
54-
typography: mat.define-typography-config(),
54+
typography: mat.m2-define-typography-config(),
5555
density: 0,
5656
));
5757
div {
@@ -64,10 +64,10 @@ describe('theming inspection api', () => {
6464
it('should get theme type', () => {
6565
expect(
6666
transpile(`
67-
$theme: mat.define-dark-theme((
67+
$theme: mat.m2-define-dark-theme((
6868
color: (
69-
primary: mat.define-palette(mat.$red-palette),
70-
accent: mat.define-palette(mat.$red-palette),
69+
primary: mat.m2-define-palette(mat.$m2-red-palette),
70+
accent: mat.m2-define-palette(mat.$m2-red-palette),
7171
),
7272
));
7373
div {
@@ -80,10 +80,10 @@ describe('theming inspection api', () => {
8080
it('should get role color', () => {
8181
expect(
8282
transpile(`
83-
$theme: mat.define-light-theme((
83+
$theme: mat.m2-define-light-theme((
8484
color: (
85-
primary: mat.define-palette(mat.$red-palette),
86-
accent: mat.define-palette(mat.$green-palette)
85+
primary: mat.m2-define-palette(mat.$m2-red-palette),
86+
accent: mat.m2-define-palette(mat.$m2-green-palette)
8787
)
8888
));
8989
div {
@@ -96,10 +96,10 @@ describe('theming inspection api', () => {
9696
it('should get palette color', () => {
9797
expect(
9898
transpile(`
99-
$theme: mat.define-light-theme((
99+
$theme: mat.m2-define-light-theme((
100100
color: (
101-
primary: mat.define-palette(mat.$red-palette),
102-
accent: mat.define-palette(mat.$green-palette)
101+
primary: mat.m2-define-palette(mat.$m2-red-palette),
102+
accent: mat.m2-define-palette(mat.$m2-green-palette)
103103
)
104104
));
105105
div {
@@ -111,8 +111,8 @@ describe('theming inspection api', () => {
111111

112112
it('should get typography properties from theme', () => {
113113
const css = transpile(`
114-
$theme: mat.define-light-theme((
115-
typography: mat.define-typography-config()
114+
$theme: mat.m2-define-light-theme((
115+
typography: mat.m2-define-typography-config()
116116
));
117117
div {
118118
font: mat.get-theme-typography($theme, headline-1);
@@ -134,7 +134,7 @@ describe('theming inspection api', () => {
134134
it('should get density scale', () => {
135135
expect(
136136
transpile(`
137-
$theme: mat.define-light-theme((
137+
$theme: mat.m2-define-light-theme((
138138
density: -1
139139
));
140140
div {
@@ -146,28 +146,28 @@ describe('theming inspection api', () => {
146146

147147
it('should check what information the theme has', () => {
148148
const css = transpile(`
149-
$theme: mat.define-light-theme((
149+
$theme: mat.m2-define-light-theme((
150150
color: (
151-
primary: mat.define-palette(mat.$red-palette),
152-
accent: mat.define-palette(mat.$red-palette),
151+
primary: mat.m2-define-palette(mat.$m2-red-palette),
152+
accent: mat.m2-define-palette(mat.$m2-red-palette),
153153
),
154-
typography: mat.define-typography-config(),
154+
typography: mat.m2-define-typography-config(),
155155
density: -1,
156156
));
157-
$color-only: mat.define-light-theme((
157+
$color-only: mat.m2-define-light-theme((
158158
color: (
159-
primary: mat.define-palette(mat.$red-palette),
160-
accent: mat.define-palette(mat.$red-palette),
159+
primary: mat.m2-define-palette(mat.$m2-red-palette),
160+
accent: mat.m2-define-palette(mat.$m2-red-palette),
161161
),
162162
typography: null,
163163
density: null,
164164
));
165-
$typography-only: mat.define-light-theme((
165+
$typography-only: mat.m2-define-light-theme((
166166
color: null,
167-
typography: mat.define-typography-config(),
167+
typography: mat.m2-define-typography-config(),
168168
density: null,
169169
));
170-
$density-only: mat.define-light-theme((
170+
$density-only: mat.m2-define-light-theme((
171171
color: null,
172172
typography: null,
173173
density: -1,
@@ -209,10 +209,10 @@ describe('theming inspection api', () => {
209209
expect(
210210
transpile(`
211211
mat.$theme-legacy-inspection-api-compatibility: false;
212-
$theme: mat.define-dark-theme((
212+
$theme: mat.m2-define-dark-theme((
213213
color: (
214-
primary: mat.define-palette(mat.$red-palette),
215-
accent: mat.define-palette(mat.$red-palette),
214+
primary: mat.m2-define-palette(mat.$m2-red-palette),
215+
accent: mat.m2-define-palette(mat.$m2-red-palette),
216216
)
217217
));
218218
div {
@@ -226,10 +226,10 @@ describe('theming inspection api', () => {
226226
expect(() =>
227227
transpile(`
228228
mat.$theme-legacy-inspection-api-compatibility: false;
229-
$theme: mat.define-dark-theme((
229+
$theme: mat.m2-define-dark-theme((
230230
color: (
231-
primary: mat.define-palette(mat.$red-palette),
232-
accent: mat.define-palette(mat.$red-palette),
231+
primary: mat.m2-define-palette(mat.$red-palette),
232+
accent: mat.m2-define-palette(mat.$red-palette),
233233
)
234234
));
235235
$color-config: mat.get-color-config($theme);

0 commit comments

Comments
 (0)