Skip to content

Commit

Permalink
feat(material/legacy-core): create legacy-core entry point
Browse files Browse the repository at this point in the history
This entry point will serve as a location to aggregate legacy themes
as components are replaced by their MDC-based versions
  • Loading branch information
mmalerba committed Jun 24, 2022
1 parent 272a358 commit 750dad6
Show file tree
Hide file tree
Showing 34 changed files with 522 additions and 2 deletions.
2 changes: 2 additions & 0 deletions .ng-dev/commit-message.mts
Expand Up @@ -77,6 +77,7 @@ export const commitMessage: CommitMessageConfig = {
'material/checkbox',
'material/chips',
'material/core',
'material/legacy-core',
'material/datepicker',
'material/dialog',
'material/divider',
Expand All @@ -89,6 +90,7 @@ export const commitMessage: CommitMessageConfig = {
'material/menu',
'material/paginator',
'material/prebuilt-themes',
'material/legacy-prebuilt-themes',
'material/progress-bar',
'material/progress-spinner',
'material/radio',
Expand Down
3 changes: 3 additions & 0 deletions src/dev-app/theme.scss
Expand Up @@ -27,6 +27,7 @@ $candy-app-theme: mat.define-light-theme((

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

// Include the dark theme color styles.
@include mat.all-component-colors($dark-colors);
@include mat.all-legacy-component-colors($dark-colors);
@include experimental.all-mdc-component-colors($dark-colors);
@include experimental.column-resize-color($dark-colors);
@include experimental.popover-edit-color($dark-colors);
Expand All @@ -71,6 +73,7 @@ $density-scales: (-1, -2, minimum, maximum);
@each $density in $density-scales {
.demo-density-#{$density} {
@include mat.private-all-component-densities($density);
@include mat.private-all-legacy-component-densities($density);
@include experimental.all-mdc-component-densities($density);
}
}
1 change: 1 addition & 0 deletions src/e2e-app/theme.scss
Expand Up @@ -16,4 +16,5 @@ $candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent);

// Include the default theme styles.
@include mat.all-component-themes($candy-app-theme);
@include mat.all-legacy-component-themes($candy-app-theme);
@include experimental.all-mdc-component-themes($candy-app-theme);
4 changes: 4 additions & 0 deletions src/material/BUILD.bazel
Expand Up @@ -39,6 +39,10 @@ ng_package(
"//src/material/prebuilt-themes:indigo-pink",
"//src/material/prebuilt-themes:pink-bluegrey",
"//src/material/prebuilt-themes:purple-green",
"//src/material/legacy-prebuilt-themes:deeppurple-amber",
"//src/material/legacy-prebuilt-themes:indigo-pink",
"//src/material/legacy-prebuilt-themes:pink-bluegrey",
"//src/material/legacy-prebuilt-themes:purple-green",
] + MATERIAL_SCSS_LIBS,
nested_packages = ["//src/material/schematics:npm_package"],
tags = ["release-package"],
Expand Down
4 changes: 4 additions & 0 deletions src/material/_index.scss
Expand Up @@ -16,6 +16,7 @@

// Private/Internal
@forward './core/density/private/all-density' as private-* show private-all-component-densities;
@forward './legacy-core/density/private/all-density' as private-* show private-all-legacy-component-densities;
@forward './core/theming/theming' show private-check-duplicate-theme-styles,
private-legacy-get-theme, private-is-theme-object;
@forward './core/style/layout-common' as private-* show private-fill;
Expand Down Expand Up @@ -44,6 +45,9 @@
@forward './core/theming/all-theme' show all-component-themes;
@forward './core/color/all-color' show all-component-colors;
@forward './core/typography/all-typography' show all-component-typographies;
@forward './legacy-core/theming/all-theme' show all-legacy-component-themes;
@forward './legacy-core/color/all-color' show all-legacy-component-colors;
@forward './legacy-core/typography/all-typography' show all-legacy-component-typographies;

// Component themes
@forward './core/core-theme' as core-* show core-color, core-theme;
Expand Down
1 change: 1 addition & 0 deletions src/material/config.bzl
Expand Up @@ -16,6 +16,7 @@ entryPoints = [
"chips",
"chips/testing",
"core",
"legacy-core",
"core/testing",
"datepicker",
"datepicker/testing",
Expand Down
2 changes: 2 additions & 0 deletions src/material/core/theming/tests/test-css-variables-theme.scss
@@ -1,6 +1,7 @@
@use 'sass:map';
@use 'sass:meta';
@use '../all-theme';
@use '../../../legacy-core/theming/all-theme' as legacy-all-theme;
@use '../palette';
@use '../theming';

Expand Down Expand Up @@ -31,4 +32,5 @@
)
));
@include all-theme.all-component-themes(replace-all-values($theme, var(--test-var)));
@include legacy-all-theme.all-legacy-component-themes(replace-all-values($theme, var(--test-var)));
}
31 changes: 29 additions & 2 deletions src/material/core/theming/tests/test-theming-api.scss
@@ -1,8 +1,12 @@
@use 'sass:map';
@use '../../density/private/all-density';
@use '../../../legacy-core/density/private/all-density' as legacy-all-density;
@use '../../color/all-color';
@use '../../../legacy-core/color/all-color' as legacy-all-color;
@use '../../typography/all-typography';
@use '../../../legacy-core/typography/all-typography' as legacy-all-typography;
@use '../all-theme';
@use '../../../legacy-core/theming/all-theme' as legacy-all-theme;
@use '../../typography/typography';
@use '../palette';
@use '../theming';
Expand Down Expand Up @@ -184,6 +188,19 @@ $dark-theme-only-typography: theming.define-dark-theme((typography: $typography-
@include all-theme.all-component-themes($dark-theme-only-density);
@include all-theme.all-component-themes($light-theme-only-typography);
@include all-theme.all-component-themes($dark-theme-only-typography);

@include legacy-all-theme.all-legacy-component-themes($legacy-light-theme);
@include legacy-all-theme.all-legacy-component-themes($legacy-light-theme-default-warn);
@include legacy-all-theme.all-legacy-component-themes($legacy-dark-theme);
@include legacy-all-theme.all-legacy-component-themes($legacy-dark-theme-default-warn);
@include legacy-all-theme.all-legacy-component-themes($new-api-light-theme);
@include legacy-all-theme.all-legacy-component-themes($new-api-light-theme-default-warn);
@include legacy-all-theme.all-legacy-component-themes($new-api-dark-theme);
@include legacy-all-theme.all-legacy-component-themes($new-api-dark-theme-default-warn);
@include legacy-all-theme.all-legacy-component-themes($light-theme-only-density);
@include legacy-all-theme.all-legacy-component-themes($dark-theme-only-density);
@include legacy-all-theme.all-legacy-component-themes($light-theme-only-typography);
@include legacy-all-theme.all-legacy-component-themes($dark-theme-only-typography);
}

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

@each $theme in $test-themes {
@include all-typography.all-component-typographies($theme);
@include legacy-all-typography.all-legacy-component-typographies($theme);
@include all-color.all-component-colors($theme);
@include legacy-all-color.all-legacy-component-colors($theme);
@include all-density.all-component-densities($theme);
@include legacy-all-density.all-legacy-component-densities($theme);
}

@include all-typography.all-component-typographies(
map.get($light-theme-only-typography, typography));
@include all-typography.all-component-typographies($light-theme-only-typography);
@include legacy-all-typography.all-legacy-component-typographies(
map.get($light-theme-only-typography, typography));
@include legacy-all-typography.all-legacy-component-typographies($light-theme-only-typography);

@include all-density.all-component-densities(map.get($light-theme-only-density, density));
@include all-density.all-component-densities($light-theme-only-density);
@include legacy-all-density.all-legacy-component-densities(map.get($light-theme-only-density, density));
@include legacy-all-density.all-legacy-component-densities($light-theme-only-density);

@include all-color.all-component-colors(map.get($new-api-dark-theme, color));
@include all-color.all-component-colors($new-api-dark-theme);
@include legacy-all-color.all-legacy-component-colors(map.get($new-api-dark-theme, color));
@include legacy-all-color.all-legacy-component-colors($new-api-dark-theme);
}

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

@include all-theme.all-component-themes($new-api-dark-theme);
@include all-theme.all-component-themes(map.get($new-api-dark-theme, color));
@include legacy-all-theme.all-legacy-component-themes($new-api-dark-theme);
@include legacy-all-theme.all-legacy-component-themes(map.get($new-api-dark-theme, color));
}

// Include all tests. Sass will throw if one of the tests fails.
Expand Down
3 changes: 3 additions & 0 deletions src/material/core/theming/tests/test-theming-bundle.scss
Expand Up @@ -22,6 +22,9 @@ $theme: mat.define-light-theme((
@include mat.all-component-themes($theme);
@include mat.all-component-typographies();
@include mat.all-component-colors($theme);
@include mat.all-legacy-component-themes($theme);
@include mat.all-legacy-component-typographies();
@include mat.all-legacy-component-colors($theme);
@include mat.core-theme($theme);
@include mat.button-theme($theme);
@include mat.strong-focus-indicators();
Expand Down
90 changes: 90 additions & 0 deletions src/material/legacy-core/BUILD.bazel
@@ -0,0 +1,90 @@
load("//src/material:config.bzl", "MATERIAL_SCSS_LIBS")
load(
"//tools:defaults.bzl",
"markdown_to_html",
"ng_module",
"sass_binary",
"sass_library",
)

package(default_visibility = ["//visibility:public"])

ng_module(
name = "legacy-core",
srcs = glob(
["**/*.ts"],
exclude = ["**/*.spec.ts"],
),
assets = [
# TODO: add component targets CSS here.
] + glob(["**/*.html"]),
)

ALL_THEMING_FILES = [
# The `_core.scss` file needs to be added here too because it depends
# on the `_all-typography` file.
"_core.scss",
"color/_all-color.scss",
"color/_all-color.import.scss",
"density/private/_all-density.scss",
"density/private/_all-density.import.scss",
"theming/_all-theme.scss",
"theming/_all-theme.import.scss",
"typography/_all-typography.scss",
"typography/_all-typography.import.scss",
]

sass_library(
name = "legacy_core_scss_lib",
srcs = glob(
["**/_*.scss"],
exclude = ALL_THEMING_FILES,
),
deps = [
"//src/cdk:sass_lib",
],
)

sass_library(
name = "theming_scss_lib",
srcs = ALL_THEMING_FILES,
deps = MATERIAL_SCSS_LIBS + [
"//src/cdk:sass_lib",
],
)

sass_binary(
name = "indigo_pink_prebuilt",
src = "theming/prebuilt/indigo-pink.scss",
deps = [":theming_scss_lib"],
)

sass_binary(
name = "deeppurple-amber_prebuilt",
src = "theming/prebuilt/deeppurple-amber.scss",
deps = [":theming_scss_lib"],
)

sass_binary(
name = "pink-bluegrey_prebuilt",
src = "theming/prebuilt/pink-bluegrey.scss",
deps = [":theming_scss_lib"],
)

sass_binary(
name = "purple-green_prebuilt",
src = "theming/prebuilt/purple-green.scss",
deps = [":theming_scss_lib"],
)

markdown_to_html(
name = "overview",
srcs = [
"legacy-core.md",
],
)

filegroup(
name = "source-files",
srcs = glob(["**/*.ts"]),
)
1 change: 1 addition & 0 deletions src/material/legacy-core/README.md
@@ -0,0 +1 @@
Core library code for other `@angular/material` components.
6 changes: 6 additions & 0 deletions src/material/legacy-core/_core.import.scss
@@ -0,0 +1,6 @@
@forward 'core' hide core;
@forward 'core' as mat-legacy-* hide mat-legacy-mdc-core, mat-legacy-mdc-strong-focus-indicators-positioning;
@forward 'core' as mat-legacy-core-legacy-* hide mat-legacy-core-mdc-core,
mat-legacy-core-mdc-strong-focus-indicators-positioning;

@import './typography/all-typography';
7 changes: 7 additions & 0 deletions src/material/legacy-core/_core.scss
@@ -0,0 +1,7 @@
// Core styles that can be used to apply material design treatments to any element.
@use './typography/all-typography';

// Mixin that renders all of the core styles that are not theme-dependent.
@mixin core($typography-config: null) {
@include all-typography.all-legacy-component-typographies($typography-config);
}
4 changes: 4 additions & 0 deletions src/material/legacy-core/color/_all-color.import.scss
@@ -0,0 +1,4 @@
@forward 'all-color';

@import '../theming/all-theme';
@import '../../core/theming/theming';
25 changes: 25 additions & 0 deletions src/material/legacy-core/color/_all-color.scss
@@ -0,0 +1,25 @@
@use '../theming/all-theme';
@use '../../core/theming/theming';

// Includes all of the color styles.
@mixin all-legacy-component-colors($config-or-theme) {
// In case a theme object has been passed instead of a configuration for
// the color system, extract the color config from the theme object.
$config: if(theming.private-is-theme-object($config-or-theme),
theming.get-color-config($config-or-theme), $config-or-theme);

@if $config == null {
@error 'No color configuration specified.';
}

@include all-theme.all-legacy-component-themes((
color: $config,
typography: null,
density: null,
));
}

// @deprecated Use `all-legacy-component-colors`.
@mixin angular-material-legacy-color($config-or-theme) {
@include all-legacy-component-colors($config-or-theme);
}
@@ -0,0 +1,3 @@
@forward 'all-density' hide all-legacy-component-densities;

@import '../../../core/theming/theming';
31 changes: 31 additions & 0 deletions src/material/legacy-core/density/private/_all-density.scss
@@ -0,0 +1,31 @@
@use '../../../core/theming/theming';

// Add legacy theme imports here, e.g.:
// @use '../../../<legacy-component>/<legacy-component>-theme';

// Includes all of the density styles.
@mixin all-legacy-component-densities($config-or-theme) {
// In case a theme object has been passed instead of a configuration for
// the density system, extract the density config from the theme object.
$config: if(theming.private-is-theme-object($config-or-theme),
theming.get-density-config($config-or-theme), $config-or-theme);

@if $config == null {
@error 'No density configuration specified.';
}

// TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
// specify a `density` config while setting `color` and `typography` to `null`. This is currently
// not possible as it would introduce a circular dependency for density because the `mat-core`
// mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
// would then load `all-theme` again. This ultimately results a circular dependency.

// Add legacy density includes here, e.g.:
// @include <legacy-component>-theme.density($config);
}


// @deprecated Use `all-legacy-component-densities`.
@mixin angular-material-legacy-density($config-or-theme) {
@include all-legacy-component-densities($config-or-theme);
}
@@ -0,0 +1,4 @@
@forward 'compatibility' hide $private-density-generate-at-root, $private-density-generate-styles,
private-density-legacy-compatibility, private-density-prop-value;
@forward 'compatibility' as mat-* hide $mat-default-scale, $mat-interval, $mat-maximum-scale,
$mat-minimum-scale, $mat-supported-scales;

0 comments on commit 750dad6

Please sign in to comment.