Skip to content

Commit 21087bf

Browse files
mmalerbammalerba
committed
feat(material/legacy-core): create legacy-core entry point
This entry point will serve as a location to aggregate legacy themes as components are replaced by their MDC-based versions
1 parent 00f743e commit 21087bf

34 files changed

+522
-2
lines changed

‎.ng-dev/commit-message.mts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ export const commitMessage: CommitMessageConfig = {
7777
'material/checkbox',
7878
'material/chips',
7979
'material/core',
80+
'material/legacy-core',
8081
'material/datepicker',
8182
'material/dialog',
8283
'material/divider',
@@ -89,6 +90,7 @@ export const commitMessage: CommitMessageConfig = {
8990
'material/menu',
9091
'material/paginator',
9192
'material/prebuilt-themes',
93+
'material/legacy-prebuilt-themes',
9294
'material/progress-bar',
9395
'material/progress-spinner',
9496
'material/radio',

‎src/dev-app/theme.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ $candy-app-theme: mat.define-light-theme((
2727

2828
// Include the default theme styles.
2929
@include mat.all-component-themes($candy-app-theme);
30+
@include mat.all-legacy-component-themes($candy-app-theme);
3031
@include experimental.all-mdc-component-themes($candy-app-theme);
3132
@include experimental.column-resize-theme($candy-app-theme);
3233
@include experimental.popover-edit-theme($candy-app-theme);
@@ -53,6 +54,7 @@ $candy-app-theme: mat.define-light-theme((
5354

5455
// Include the dark theme color styles.
5556
@include mat.all-component-colors($dark-colors);
57+
@include mat.all-legacy-component-colors($dark-colors);
5658
@include experimental.all-mdc-component-colors($dark-colors);
5759
@include experimental.column-resize-color($dark-colors);
5860
@include experimental.popover-edit-color($dark-colors);
@@ -71,6 +73,7 @@ $density-scales: (-1, -2, minimum, maximum);
7173
@each $density in $density-scales {
7274
.demo-density-#{$density} {
7375
@include mat.private-all-component-densities($density);
76+
@include mat.private-all-legacy-component-densities($density);
7477
@include experimental.all-mdc-component-densities($density);
7578
}
7679
}

‎src/e2e-app/theme.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ $candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent);
1616

1717
// Include the default theme styles.
1818
@include mat.all-component-themes($candy-app-theme);
19+
@include mat.all-legacy-component-themes($candy-app-theme);
1920
@include experimental.all-mdc-component-themes($candy-app-theme);

‎src/material/BUILD.bazel

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ ng_package(
3939
"//src/material/prebuilt-themes:indigo-pink",
4040
"//src/material/prebuilt-themes:pink-bluegrey",
4141
"//src/material/prebuilt-themes:purple-green",
42+
"//src/material/legacy-prebuilt-themes:deeppurple-amber",
43+
"//src/material/legacy-prebuilt-themes:indigo-pink",
44+
"//src/material/legacy-prebuilt-themes:pink-bluegrey",
45+
"//src/material/legacy-prebuilt-themes:purple-green",
4246
] + MATERIAL_SCSS_LIBS,
4347
nested_packages = ["//src/material/schematics:npm_package"],
4448
tags = ["release-package"],

‎src/material/_index.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
// Private/Internal
1818
@forward './core/density/private/all-density' as private-* show private-all-component-densities;
19+
@forward './legacy-core/density/private/all-density' as private-* show private-all-legacy-component-densities;
1920
@forward './core/theming/theming' show private-check-duplicate-theme-styles,
2021
private-legacy-get-theme, private-is-theme-object;
2122
@forward './core/style/layout-common' as private-* show private-fill;
@@ -44,6 +45,9 @@
4445
@forward './core/theming/all-theme' show all-component-themes;
4546
@forward './core/color/all-color' show all-component-colors;
4647
@forward './core/typography/all-typography' show all-component-typographies;
48+
@forward './legacy-core/theming/all-theme' show all-legacy-component-themes;
49+
@forward './legacy-core/color/all-color' show all-legacy-component-colors;
50+
@forward './legacy-core/typography/all-typography' show all-legacy-component-typographies;
4751

4852
// Component themes
4953
@forward './core/core-theme' as core-* show core-color, core-theme;

‎src/material/config.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ entryPoints = [
1616
"chips",
1717
"chips/testing",
1818
"core",
19+
"legacy-core",
1920
"core/testing",
2021
"datepicker",
2122
"datepicker/testing",

‎src/material/core/theming/tests/test-css-variables-theme.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use 'sass:meta';
33
@use '../all-theme';
4+
@use '../../../legacy-core/theming/all-theme' as legacy-all-theme;
45
@use '../palette';
56
@use '../theming';
67

@@ -31,4 +32,5 @@
3132
)
3233
));
3334
@include all-theme.all-component-themes(replace-all-values($theme, var(--test-var)));
35+
@include legacy-all-theme.all-legacy-component-themes(replace-all-values($theme, var(--test-var)));
3436
}

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

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
@use 'sass:map';
22
@use '../../density/private/all-density';
3+
@use '../../../legacy-core/density/private/all-density' as legacy-all-density;
34
@use '../../color/all-color';
5+
@use '../../../legacy-core/color/all-color' as legacy-all-color;
46
@use '../../typography/all-typography';
7+
@use '../../../legacy-core/typography/all-typography' as legacy-all-typography;
58
@use '../all-theme';
9+
@use '../../../legacy-core/theming/all-theme' as legacy-all-theme;
610
@use '../../typography/typography';
711
@use '../palette';
812
@use '../theming';
@@ -184,6 +188,19 @@ $dark-theme-only-typography: theming.define-dark-theme((typography: $typography-
184188
@include all-theme.all-component-themes($dark-theme-only-density);
185189
@include all-theme.all-component-themes($light-theme-only-typography);
186190
@include all-theme.all-component-themes($dark-theme-only-typography);
191+
192+
@include legacy-all-theme.all-legacy-component-themes($legacy-light-theme);
193+
@include legacy-all-theme.all-legacy-component-themes($legacy-light-theme-default-warn);
194+
@include legacy-all-theme.all-legacy-component-themes($legacy-dark-theme);
195+
@include legacy-all-theme.all-legacy-component-themes($legacy-dark-theme-default-warn);
196+
@include legacy-all-theme.all-legacy-component-themes($new-api-light-theme);
197+
@include legacy-all-theme.all-legacy-component-themes($new-api-light-theme-default-warn);
198+
@include legacy-all-theme.all-legacy-component-themes($new-api-dark-theme);
199+
@include legacy-all-theme.all-legacy-component-themes($new-api-dark-theme-default-warn);
200+
@include legacy-all-theme.all-legacy-component-themes($light-theme-only-density);
201+
@include legacy-all-theme.all-legacy-component-themes($dark-theme-only-density);
202+
@include legacy-all-theme.all-legacy-component-themes($light-theme-only-typography);
203+
@include legacy-all-theme.all-legacy-component-themes($dark-theme-only-typography);
187204
}
188205

189206
// Custom theme mixin used by the custom theme backwards compatibility test.
@@ -249,19 +266,27 @@ $dark-theme-only-typography: theming.define-dark-theme((typography: $typography-
249266

250267
@each $theme in $test-themes {
251268
@include all-typography.all-component-typographies($theme);
269+
@include legacy-all-typography.all-legacy-component-typographies($theme);
252270
@include all-color.all-component-colors($theme);
271+
@include legacy-all-color.all-legacy-component-colors($theme);
253272
@include all-density.all-component-densities($theme);
273+
@include legacy-all-density.all-legacy-component-densities($theme);
254274
}
255275

256276
@include all-typography.all-component-typographies(
257277
map.get($light-theme-only-typography, typography));
258278
@include all-typography.all-component-typographies($light-theme-only-typography);
279+
@include legacy-all-typography.all-legacy-component-typographies(
280+
map.get($light-theme-only-typography, typography));
281+
@include legacy-all-typography.all-legacy-component-typographies($light-theme-only-typography);
259282

260283
@include all-density.all-component-densities(map.get($light-theme-only-density, density));
261284
@include all-density.all-component-densities($light-theme-only-density);
285+
@include legacy-all-density.all-legacy-component-densities(map.get($light-theme-only-density, density));
286+
@include legacy-all-density.all-legacy-component-densities($light-theme-only-density);
262287

263-
@include all-color.all-component-colors(map.get($new-api-dark-theme, color));
264-
@include all-color.all-component-colors($new-api-dark-theme);
288+
@include legacy-all-color.all-legacy-component-colors(map.get($new-api-dark-theme, color));
289+
@include legacy-all-color.all-legacy-component-colors($new-api-dark-theme);
265290
}
266291

267292
@mixin test-individual-system-mixins-unwrap() {
@@ -272,6 +297,8 @@ $dark-theme-only-typography: theming.define-dark-theme((typography: $typography-
272297

273298
@include all-theme.all-component-themes($new-api-dark-theme);
274299
@include all-theme.all-component-themes(map.get($new-api-dark-theme, color));
300+
@include legacy-all-theme.all-legacy-component-themes($new-api-dark-theme);
301+
@include legacy-all-theme.all-legacy-component-themes(map.get($new-api-dark-theme, color));
275302
}
276303

277304
// Include all tests. Sass will throw if one of the tests fails.

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ $theme: mat.define-light-theme((
2222
@include mat.all-component-themes($theme);
2323
@include mat.all-component-typographies();
2424
@include mat.all-component-colors($theme);
25+
@include mat.all-legacy-component-themes($theme);
26+
@include mat.all-legacy-component-typographies();
27+
@include mat.all-legacy-component-colors($theme);
2528
@include mat.core-theme($theme);
2629
@include mat.button-theme($theme);
2730
@include mat.strong-focus-indicators();

‎src/material/legacy-core/BUILD.bazel

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
load("//src/material:config.bzl", "MATERIAL_SCSS_LIBS")
2+
load(
3+
"//tools:defaults.bzl",
4+
"markdown_to_html",
5+
"ng_module",
6+
"sass_binary",
7+
"sass_library",
8+
)
9+
10+
package(default_visibility = ["//visibility:public"])
11+
12+
ng_module(
13+
name = "legacy-core",
14+
srcs = glob(
15+
["**/*.ts"],
16+
exclude = ["**/*.spec.ts"],
17+
),
18+
assets = [
19+
# TODO: add component targets CSS here.
20+
] + glob(["**/*.html"]),
21+
)
22+
23+
ALL_THEMING_FILES = [
24+
# The `_core.scss` file needs to be added here too because it depends
25+
# on the `_all-typography` file.
26+
"_core.scss",
27+
"color/_all-color.scss",
28+
"color/_all-color.import.scss",
29+
"density/private/_all-density.scss",
30+
"density/private/_all-density.import.scss",
31+
"theming/_all-theme.scss",
32+
"theming/_all-theme.import.scss",
33+
"typography/_all-typography.scss",
34+
"typography/_all-typography.import.scss",
35+
]
36+
37+
sass_library(
38+
name = "legacy_core_scss_lib",
39+
srcs = glob(
40+
["**/_*.scss"],
41+
exclude = ALL_THEMING_FILES,
42+
),
43+
deps = [
44+
"//src/cdk:sass_lib",
45+
],
46+
)
47+
48+
sass_library(
49+
name = "theming_scss_lib",
50+
srcs = ALL_THEMING_FILES,
51+
deps = MATERIAL_SCSS_LIBS + [
52+
"//src/cdk:sass_lib",
53+
],
54+
)
55+
56+
sass_binary(
57+
name = "indigo_pink_prebuilt",
58+
src = "theming/prebuilt/indigo-pink.scss",
59+
deps = [":theming_scss_lib"],
60+
)
61+
62+
sass_binary(
63+
name = "deeppurple-amber_prebuilt",
64+
src = "theming/prebuilt/deeppurple-amber.scss",
65+
deps = [":theming_scss_lib"],
66+
)
67+
68+
sass_binary(
69+
name = "pink-bluegrey_prebuilt",
70+
src = "theming/prebuilt/pink-bluegrey.scss",
71+
deps = [":theming_scss_lib"],
72+
)
73+
74+
sass_binary(
75+
name = "purple-green_prebuilt",
76+
src = "theming/prebuilt/purple-green.scss",
77+
deps = [":theming_scss_lib"],
78+
)
79+
80+
markdown_to_html(
81+
name = "overview",
82+
srcs = [
83+
"legacy-core.md",
84+
],
85+
)
86+
87+
filegroup(
88+
name = "source-files",
89+
srcs = glob(["**/*.ts"]),
90+
)

‎src/material/legacy-core/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Core library code for other `@angular/material` components.

‎src/material/legacy-core/_core.import.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@forward 'core' hide core;
2+
@forward 'core' as mat-legacy-* hide mat-legacy-mdc-core, mat-legacy-mdc-strong-focus-indicators-positioning;
3+
@forward 'core' as mat-legacy-core-legacy-* hide mat-legacy-core-mdc-core,
4+
mat-legacy-core-mdc-strong-focus-indicators-positioning;
5+
6+
@import './typography/all-typography';

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Core styles that can be used to apply material design treatments to any element.
2+
@use './typography/all-typography';
3+
4+
// Mixin that renders all of the core styles that are not theme-dependent.
5+
@mixin core($typography-config: null) {
6+
@include all-typography.all-legacy-component-typographies($typography-config);
7+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@forward 'all-color';
2+
3+
@import '../theming/all-theme';
4+
@import '../../core/theming/theming';

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@use '../theming/all-theme';
2+
@use '../../core/theming/theming';
3+
4+
// Includes all of the color styles.
5+
@mixin all-legacy-component-colors($config-or-theme) {
6+
// In case a theme object has been passed instead of a configuration for
7+
// the color system, extract the color config from the theme object.
8+
$config: if(theming.private-is-theme-object($config-or-theme),
9+
theming.get-color-config($config-or-theme), $config-or-theme);
10+
11+
@if $config == null {
12+
@error 'No color configuration specified.';
13+
}
14+
15+
@include all-theme.all-legacy-component-themes((
16+
color: $config,
17+
typography: null,
18+
density: null,
19+
));
20+
}
21+
22+
// @deprecated Use `all-legacy-component-colors`.
23+
@mixin angular-material-legacy-color($config-or-theme) {
24+
@include all-legacy-component-colors($config-or-theme);
25+
}

‎src/material/legacy-core/density/private/_all-density.import.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@forward 'all-density' hide all-legacy-component-densities;
2+
3+
@import '../../../core/theming/theming';

‎src/material/legacy-core/density/private/_all-density.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@use '../../../core/theming/theming';
2+
3+
// Add legacy theme imports here, e.g.:
4+
// @use '../../../<legacy-component>/<legacy-component>-theme';
5+
6+
// Includes all of the density styles.
7+
@mixin all-legacy-component-densities($config-or-theme) {
8+
// In case a theme object has been passed instead of a configuration for
9+
// the density system, extract the density config from the theme object.
10+
$config: if(theming.private-is-theme-object($config-or-theme),
11+
theming.get-density-config($config-or-theme), $config-or-theme);
12+
13+
@if $config == null {
14+
@error 'No density configuration specified.';
15+
}
16+
17+
// TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
18+
// specify a `density` config while setting `color` and `typography` to `null`. This is currently
19+
// not possible as it would introduce a circular dependency for density because the `mat-core`
20+
// mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
21+
// would then load `all-theme` again. This ultimately results a circular dependency.
22+
23+
// Add legacy density includes here, e.g.:
24+
// @include <legacy-component>-theme.density($config);
25+
}
26+
27+
28+
// @deprecated Use `all-legacy-component-densities`.
29+
@mixin angular-material-legacy-density($config-or-theme) {
30+
@include all-legacy-component-densities($config-or-theme);
31+
}

‎src/material/legacy-core/density/private/_compatibility.import.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@forward 'compatibility' hide $private-density-generate-at-root, $private-density-generate-styles,
2+
private-density-legacy-compatibility, private-density-prop-value;
3+
@forward 'compatibility' as mat-* hide $mat-default-scale, $mat-interval, $mat-maximum-scale,
4+
$mat-minimum-scale, $mat-supported-scales;

0 commit comments

Comments
 (0)