fix(material-experimental/mdc-core): consolidate mdc theming code und…

…er mdc-core (#25084) The theming code for mdc is currently scattered across mdc-theming, mdc-color, mdc-density, mdc-typography, and mdc-helpers. This PR consolidates it all under mdc-core to better match the way our entry points are organized in @angular/material
angular · Jun 16, 2022 · 4aaa6eb · 4aaa6eb
1 parent 427e99a
commit 4aaa6eb
Show file tree

Hide file tree

Showing 161 changed files with 718 additions and 728 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -103,12 +103,9 @@
 /src/material-experimental/mdc-card/**             @mmalerba
 /src/material-experimental/mdc-checkbox/**         @mmalerba
 /src/material-experimental/mdc-chips/**            @mmalerba
-/src/material-experimental/mdc-color/**            @andrewseguin @devversion
 /src/material-experimental/mdc-core/**             @crisbeto
-/src/material-experimental/mdc-density/**          @devversion
 /src/material-experimental/mdc-dialog/**           @devversion
 /src/material-experimental/mdc-form-field/**       @devversion @mmalerba
-/src/material-experimental/mdc-helpers/**          @mmalerba
 /src/material-experimental/mdc-input/**            @devversion @mmalerba
 /src/material-experimental/mdc-list/**             @mmalerba @devversion
 /src/material-experimental/mdc-menu/**             @crisbeto
@@ -123,8 +120,6 @@
 /src/material-experimental/mdc-tabs/**             @crisbeto
 /src/material-experimental/mdc-tooltip/**          @crisbeto
 /src/material-experimental/mdc-table/**            @andrewseguin
-/src/material-experimental/mdc-theming/**          @mmalerba
-/src/material-experimental/mdc-typography/**       @mmalerba
 /src/material-experimental/menubar/**              @jelbourn
 /src/material-experimental/popover-edit/**         @andrewseguin
 /src/material-experimental/selection/**            @andrewseguin

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
@@ -45,12 +45,9 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-card',
     'material-experimental/mdc-checkbox',
     'material-experimental/mdc-chips',
-    'material-experimental/mdc-color',
     'material-experimental/mdc-core',
-    'material-experimental/mdc-density',
     'material-experimental/mdc-dialog',
     'material-experimental/mdc-form-field',
-    'material-experimental/mdc-helpers',
     'material-experimental/mdc-input',
     'material-experimental/mdc-list',
     'material-experimental/mdc-menu',
@@ -65,8 +62,6 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-table',
     'material-experimental/mdc-tabs',
     'material-experimental/mdc-tooltip',
-    'material-experimental/mdc-theming',
-    'material-experimental/mdc-typography',
     'material-experimental/menubar',
     'material-experimental/popover-edit',
     'material-experimental/selection',

diff --git a/scripts/migrate-sass-modules.js b/scripts/migrate-sass-modules.js
@@ -66,7 +66,7 @@ migrate('material/core/**/_*.scss', materialPrefixes, true);
 commentOutMdc('material-experimental/**/*.scss');
 
 // Migrate all of the MDC partials.
-migrate('material-experimental/mdc-helpers/**/_*.scss', mdcPrefixes, true);
+migrate('material-experimental/mdc-core/mdc-helpers/**/_*.scss', mdcPrefixes, true);
 migrate('material-experimental/mdc-core/**/_*.scss', mdcPrefixes, true, ['**/_core.scss']);
 migrate('material-experimental/**/_*.scss', mdcPrefixes, true);
 

diff --git a/src/material-experimental/BUILD.bazel b/src/material-experimental/BUILD.bazel
@@ -20,11 +20,11 @@ ts_library(
 sass_library(
     name = "theming_scss_lib",
     srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [
-        "//src/material-experimental/mdc-color",
-        "//src/material-experimental/mdc-density",
-        "//src/material-experimental/mdc-helpers",
-        "//src/material-experimental/mdc-theming",
-        "//src/material-experimental/mdc-typography",
+        "//src/material-experimental/mdc-core/color",
+        "//src/material-experimental/mdc-core/density",
+        "//src/material-experimental/mdc-core/mdc-helpers",
+        "//src/material-experimental/mdc-core/theming",
+        "//src/material-experimental/mdc-core/typography",
     ],
 )
 

diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss
@@ -1,13 +1,13 @@
 // Structural
-@forward './mdc-helpers/focus-indicators' as mdc-* show mdc-strong-focus-indicators;
+@forward './mdc-core/mdc-helpers/focus-indicators' as mdc-* show mdc-strong-focus-indicators;
 @forward './mdc-core/elevation' as mdc-* show mdc-elevation, mdc-overridable-elevation;
 
 // Theme bundles
-@forward './mdc-theming/all-theme' show all-mdc-component-themes;
-@forward './mdc-color/all-color' show all-mdc-component-colors;
-@forward './mdc-typography/all-typography' show all-mdc-component-typographies,
+@forward './mdc-core/theming/all-theme' show all-mdc-component-themes;
+@forward './mdc-core/color/all-color' show all-mdc-component-colors;
+@forward './mdc-core/typography/all-typography' show all-mdc-component-typographies,
   define-mdc-typography-config;
-@forward './mdc-density/all-density' show all-mdc-component-densities;
+@forward './mdc-core/density/all-density' show all-mdc-component-densities;
 
 // Component themes
 @forward './column-resize/column-resize-theme' as column-resize-* show column-resize-color,
@@ -18,7 +18,7 @@
 // MDC-related themes
 @forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme, mdc-core-color,
   mdc-core-density, mdc-core-typography;
-@forward './mdc-helpers/focus-indicators-theme' as mdc-strong-focus-indicators-* show
+@forward './mdc-core/mdc-helpers/focus-indicators-theme' as mdc-strong-focus-indicators-* show
   mdc-strong-focus-indicators-color, mdc-strong-focus-indicators-theme;
 @forward './mdc-core/option/option-theme' as mdc-option-* show mdc-option-color,
   mdc-option-typography, mdc-option-density, mdc-option-theme;

diff --git a/src/material-experimental/mdc-autocomplete/BUILD.bazel b/src/material-experimental/mdc-autocomplete/BUILD.bazel
@@ -27,8 +27,8 @@ sass_library(
     srcs = glob(["**/_*.scss"]),
     deps = [
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
@@ -40,8 +40,8 @@ sass_binary(
     ],
     deps = [
         "//src/cdk:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 

diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss
@@ -1,5 +1,5 @@
-@forward '../mdc-helpers/mdc-helpers.import';
-@forward '../mdc-helpers/mdc-helpers';
+@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
+@forward '../mdc-core/mdc-helpers/mdc-helpers';
 @forward 'autocomplete-theme' as mat-mdc-autocomplete-*;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss
@@ -2,7 +2,7 @@
 @use '@material/menu-surface/mixins' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);

diff --git a/src/material-experimental/mdc-button/BUILD.bazel b/src/material-experimental/mdc-button/BUILD.bazel
@@ -36,8 +36,8 @@ sass_library(
     srcs = glob(["**/_*.scss"]),
     deps = [
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
@@ -55,8 +55,8 @@ sass_binary(
     deps = [
         ":button_base_scss_lib",
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
@@ -78,8 +78,8 @@ sass_binary(
     deps = [
         ":button_base_scss_lib",
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
@@ -92,8 +92,8 @@ sass_binary(
     deps = [
         ":button_base_scss_lib",
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 

diff --git a/src/material-experimental/mdc-button/_button-base.scss b/src/material-experimental/mdc-button/_button-base.scss
@@ -2,7 +2,7 @@
 @use '@angular/material' as mat;
 @use '@material/touch-target' as mdc-touch-target;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 // Adds styles necessary to provide stateful interactions with the button. This includes providing
 // content for the state container's ::before and ::after so that they can be given a background

diff --git a/src/material-experimental/mdc-button/_button-theme.import.scss b/src/material-experimental/mdc-button/_button-theme.import.scss
@@ -1,6 +1,6 @@
-@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
 @forward '../../material/core/ripple/ripple.import';
-@forward '../mdc-helpers/mdc-helpers';
+@forward '../mdc-core/mdc-helpers/mdc-helpers';
 @forward 'button-theme' hide color, density, theme, typography;
 @forward 'button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color,
 mat-mdc-density, mat-mdc-mat-button-apply-disabled-style, mat-mdc-mat-button-disabled-background,
@@ -13,4 +13,4 @@ mat-mdc-button-mat-button-disabled-color, mat-mdc-button-mat-button-ripple-ink-c
 @forward 'icon-button-theme' as mat-mdc-icon-button-*;
 
 @import '../../material/core/ripple/ripple';
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss
@@ -8,7 +8,7 @@
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './button-theme-private';
 
 @mixin _button-variant($color) {

diff --git a/src/material-experimental/mdc-button/_fab-theme.scss b/src/material-experimental/mdc-button/_fab-theme.scss
@@ -4,7 +4,7 @@
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './button-theme-private';
 
 @mixin _fab-variant($foreground, $background) {

diff --git a/src/material-experimental/mdc-button/_icon-button-theme.scss b/src/material-experimental/mdc-button/_icon-button-theme.scss
@@ -4,7 +4,7 @@
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './button-theme-private';
 
 @mixin color($config-or-theme) {

diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss
@@ -8,7 +8,7 @@
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './button-base';
 
 @include mdc-helpers.disable-fallback-declarations {

diff --git a/src/material-experimental/mdc-button/fab.scss b/src/material-experimental/mdc-button/fab.scss
@@ -2,7 +2,7 @@
 @use '@material/fab' as mdc-fab;
 @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './button-base';
 
 @include mdc-helpers.disable-fallback-declarations {

diff --git a/src/material-experimental/mdc-button/icon-button.scss b/src/material-experimental/mdc-button/icon-button.scss
@@ -3,7 +3,7 @@
 @use '@material/icon-button/icon-button' as mdc-icon-button;
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './button-base';
 
 @include mdc-helpers.disable-fallback-declarations {

diff --git a/src/material-experimental/mdc-card/BUILD.bazel b/src/material-experimental/mdc-card/BUILD.bazel
@@ -28,8 +28,8 @@ sass_library(
     srcs = glob(["**/_*.scss"]),
     deps = [
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
@@ -40,8 +40,8 @@ sass_binary(
         "external/npm/node_modules",
     ],
     deps = [
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 

diff --git a/src/material-experimental/mdc-card/_card-theme.import.scss b/src/material-experimental/mdc-card/_card-theme.import.scss
@@ -1,7 +1,7 @@
-@forward '../mdc-helpers/mdc-helpers.import';
-@forward '../mdc-helpers/mdc-helpers';
+@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
+@forward '../mdc-core/mdc-helpers/mdc-helpers';
 @forward 'card-theme' hide color, density, theme, typography;
 @forward 'card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color,
 $mat-mdc-card-mdc-card-outline-color;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-card/_card-theme.scss b/src/material-experimental/mdc-card/_card-theme.scss
@@ -5,7 +5,7 @@
 @use 'sass:color';
 @use 'sass:map';
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);

diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss
@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use '@material/card' as mdc-card;
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 // TODO(jelbourn): move header and title-group styles to their own files.
 

diff --git a/src/material-experimental/mdc-checkbox/BUILD.bazel b/src/material-experimental/mdc-checkbox/BUILD.bazel
@@ -36,8 +36,8 @@ sass_library(
     srcs = glob(["**/_*.scss"]),
     deps = [
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
@@ -50,8 +50,8 @@ sass_binary(
     deps = [
         ":mdc_checkbox_scss_lib",
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 

diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss
@@ -1,5 +1,5 @@
-@forward '../mdc-helpers/mdc-helpers.import';
-@forward '../mdc-helpers/mdc-helpers';
+@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
+@forward '../mdc-core/mdc-helpers/mdc-helpers';
 @forward 'checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme,
 typography;
 @forward 'checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
@@ -12,4 +12,4 @@ mat-mdc-checkbox-background-focus-indicator-checked-color,
 mat-mdc-checkbox-background-focus-indicator-color,
 mat-mdc-checkbox-private-checkbox-styles-with-color;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
@@ -7,7 +7,7 @@
 @use 'sass:map';
 @use 'sass:color';
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './checkbox-private';
 
 // Apply ripple colors to the MatRipple element and the MDC ripple element when the

diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/src/material-experimental/mdc-checkbox/checkbox.scss
@@ -6,7 +6,7 @@
 @use '@material/touch-target' as mdc-touch-target;
 @use 'sass:map';
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './checkbox-private';
 
 @include mdc-helpers.disable-fallback-declarations {

diff --git a/src/material-experimental/mdc-chips/BUILD.bazel b/src/material-experimental/mdc-chips/BUILD.bazel
@@ -37,8 +37,8 @@ sass_library(
     srcs = glob(["**/_*.scss"]),
     deps = [
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
@@ -51,8 +51,8 @@ sass_binary(
     deps = [
         "//src/cdk:sass_lib",
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
@@ -63,8 +63,8 @@ sass_binary(
         "external/npm/node_modules",
     ],
     deps = [
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
         "//src/material/core:core_scss_lib",
     ],
 )