refactor: add density mixins to all components

This commit is the initial basis for the upcoming density API. It adds
mixins for density to all components, sets up a larger bulk density
mixin in the dev-app for testing etc.

Author: devversion

.github/CODEOWNERS

@@ -97,6 +97,7 @@
 /src/material-experimental/mdc-card/**             @mmalerba
 /src/material-experimental/mdc-checkbox/**         @mmalerba
 /src/material-experimental/mdc-chips/**            @mmalerba
+/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/dev-app/BUILD.bazel

@@ -96,6 +96,7 @@ sass_binary(
     ],
     deps = [
         "//src/material-experimental/column-resize:column_resize_scss_lib",
+        "//src/material-experimental/mdc-density:all_density",
         "//src/material-experimental/mdc-theming:all_themes",
         "//src/material-experimental/mdc-typography:all_typography",
         "//src/material-experimental/popover-edit:popover_edit_scss_lib",

src/dev-app/dev-app/dev-app-layout.html

@@ -44,6 +44,10 @@ <h1>Angular Material Demos</h1>
                   title="Toggle between RTL and LTR">
             {{dir.value.toUpperCase()}}
           </button>
+          <button mat-button (click)="selectNextDensity()"
+                  title="Use next density scale: {{densityScales[getNextDensityIndex()]}}">
+            Density scale: {{densityScales[this.currentDensityIndex]}}
+          </button>
         </div>
       </div>
     </mat-toolbar>

src/dev-app/dev-app/dev-app-layout.ts

@@ -88,10 +88,17 @@ export class DevAppLayout {
     {name: 'MDC Table', route: '/mdc-table'},
   ];
 
+  /** Currently selected density scale based on the index. */
+  currentDensityIndex = 0;
+
+  /** List of possible global density scale values. */
+  densityScales = [0, -1, -2, 'minimum', 'maximum'];
+
   constructor(
       private _element: ElementRef<HTMLElement>, public rippleOptions: DevAppRippleOptions,
       @Inject(Directionality) public dir: DevAppDirectionality, cdr: ChangeDetectorRef) {
     dir.change.subscribe(() => cdr.markForCheck());
+    this.updateDensityClasses();
   }
 
   toggleFullscreen() {
@@ -131,4 +138,31 @@ export class DevAppLayout {
       document.body.classList.remove(strongFocusClass);
     }
   }
+
+
+  /** Gets the index of the next density scale that can be selected. */
+  getNextDensityIndex() {
+    return (this.currentDensityIndex + 1) % this.densityScales.length;
+  }
+
+  /** Selects the next possible density scale. */
+  selectNextDensity() {
+    this.currentDensityIndex = this.getNextDensityIndex();
+    this.updateDensityClasses();
+  }
+
+  /**
+   * Updates the density classes on the host element. Applies a unique class for
+   * a given density scale, so that the density styles are conditionally applied.
+   */
+  updateDensityClasses() {
+    for (let i = 0; i < this.densityScales.length; i++) {
+      const className = `demo-density-${this.densityScales[i]}`;
+      if (i === this.currentDensityIndex) {
+        this._element.nativeElement.classList.add(className);
+      } else {
+        this._element.nativeElement.classList.remove(className);
+      }
+    }
+  }
 }

src/dev-app/theme.scss

@@ -4,6 +4,7 @@
 @import '../material-experimental/mdc-helpers/mdc-helpers';
 @import '../material-experimental/mdc-theming/all-theme';
 @import '../material-experimental/mdc-typography/all-typography';
+@import '../material-experimental/mdc-density/all-density';
 @import '../material-experimental/popover-edit/popover-edit';
 
 // Plus imports for other components in your app.
@@ -13,7 +14,7 @@
 // **Be sure that you only ever include this mixin once!**
 @include mat-core();
 @include angular-material-mdc-typography();
-@include mat-edit-typography(mat-typography-config());
+@include mat-popover-edit-typography(mat-typography-config());
 
 // Include base styles for strong focus indicators.
 .demo-strong-focus {
@@ -24,7 +25,12 @@
 // Define the default theme (same as the example above).
 $candy-app-primary: mat-palette($mat-indigo);
 $candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
-$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
+$candy-app-theme: mat-light-theme((
+  color: (
+    primary: $candy-app-primary,
+    accent: $candy-app-accent
+  )
+));
 
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
@@ -36,7 +42,13 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 $dark-primary: mat-palette($mat-blue-grey);
 $dark-accent: mat-palette($mat-amber, A200, A100, A400);
 $dark-warn: mat-palette($mat-deep-orange);
-$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+$dark-theme: mat-dark-theme((
+  color: (
+    primary: $dark-primary,
+    accent: $dark-accent,
+    warn: $dark-warn
+  )
+));
 
 // Include the default theme for focus indicators.
 .demo-strong-focus {
@@ -60,3 +72,13 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
   @include mat-strong-focus-indicators-theme($dark-theme);
   @include mat-mdc-strong-focus-indicators-theme($dark-theme);
 }
+
+// Create classes for all density scales which are supported by all MDC-based components.
+// The classes are applied conditionally based on the selected density in the dev-app layout
+// component.
+$density-scales: (-1, -2, minimum, maximum);
+@each $density in$density-scales {
+  .demo-density-#{$density} {
+    @include angular-material-density-mdc($density);
+  }
+}

src/material-experimental/column-resize/_column-resize.scss

@@ -3,9 +3,9 @@
 @import '../../material/core/theming/palette';
 @import '../../material/core/theming/theming';
 
-@mixin mat-column-resize-theme($theme) {
-  $primary: map-get($theme, primary);
-  $foreground: map-get($theme, foreground);
+@mixin mat-column-resize-color($config) {
+  $primary: map-get($config, primary);
+  $foreground: map-get($config, foreground);
 
   $non-resizable-hover-divider: mat-color($foreground, divider);
   $resizable-hover-divider: mat-color($primary, 200);
@@ -94,3 +94,23 @@
     }
   }
 }
+
+@mixin mat-column-resize-typography($config) {}
+
+@mixin mat-column-resize-density($density-scale) {}
+
+@mixin mat-column-resize-theme($theme) {
+  $color: mat-get-color-config($theme);
+  $density: mat-get-density-config($theme);
+  $typography: mat-get-typography-config($theme);
+
+  @if $color != null {
+    @include mat-column-resize-color($color);
+  }
+  @if $density != null {
+    @include mat-column-resize-density($density);
+  }
+  @if $typography != null {
+    @include mat-column-resize-typography($typography);
+  }
+}

src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

@@ -1,7 +1,7 @@
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-mdc-autocomplete-theme($theme) {
-  @include mat-using-mdc-theme($theme) {
+@mixin mat-mdc-autocomplete-color($config) {
+  @include mat-using-mdc-theme($config) {
     // TODO: implement MDC-based autocomplete.
   }
 }
@@ -11,3 +11,21 @@
     // TODO: implement MDC-based autocomplete.
   }
 }
+
+@mixin mat-mdc-autocomplete-density($density-scale) {}
+
+@mixin mat-mdc-autocomplete-theme($theme) {
+  $color: mat-get-color-config($theme);
+  $density: mat-get-density-config($theme);
+  $typography: mat-get-typography-config($theme);
+
+  @if $color != null {
+    @include mat-mdc-autocomplete-color($color);
+  }
+  @if $density != null {
+    @include mat-mdc-autocomplete-density($density);
+  }
+  @if $typography != null {
+    @include mat-mdc-autocomplete-typography($typography);
+  }
+}

src/material-experimental/mdc-button/_button-theme.scss

@@ -49,8 +49,8 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 
-@mixin mat-mdc-button-theme($theme) {
-  @include mat-using-mdc-theme($theme) {
+@mixin mat-mdc-button-color($config) {
+  @include mat-using-mdc-theme($config) {
     // Add state interactions for hover, focus, press, active. Colors are changed based on
     // the mixin mdc-states-base-color
     .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
@@ -170,8 +170,26 @@ $mat-button-state-target: '.mdc-button__ripple';
   }
 }
 
-@mixin mat-mdc-fab-theme($theme) {
-  @include mat-using-mdc-theme($theme) {
+@mixin mat-mdc-button-density($density-scale) {}
+
+@mixin mat-mdc-button-theme($theme) {
+  $color: mat-get-color-config($theme);
+  $density: mat-get-density-config($theme);
+  $typography: mat-get-typography-config($theme);
+
+  @if $color != null {
+    @include mat-mdc-button-color($color);
+  }
+  @if $density != null {
+    @include mat-mdc-button-density($density);
+  }
+  @if $typography != null {
+    @include mat-mdc-button-typography($typography);
+  }
+}
+
+@mixin mat-mdc-fab-color($config) {
+  @include mat-using-mdc-theme($config) {
     .mat-mdc-fab, .mat-mdc-mini-fab {
       @include mdc-states(
           $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
@@ -225,8 +243,27 @@ $mat-button-state-target: '.mdc-button__ripple';
   }
 }
 
-@mixin mat-mdc-icon-button-theme($theme) {
-  @include mat-using-mdc-theme($theme) {
+@mixin mat-mdc-fab-density($density-scale) {}
+
+@mixin mat-mdc-fab-theme($theme) {
+  $color: mat-get-color-config($theme);
+  $density: mat-get-density-config($theme);
+  $typography: mat-get-typography-config($theme);
+
+  @if $color != null {
+    @include mat-mdc-fab-color($color);
+  }
+  @if $density != null {
+    @include mat-mdc-fab-density($density);
+  }
+  @if $typography != null {
+    @include mat-mdc-fab-typography($typography);
+  }
+}
+
+
+@mixin mat-mdc-icon-button-color($config) {
+  @include mat-using-mdc-theme($config) {
     .mat-mdc-icon-button {
       @include mdc-states(
           $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
@@ -273,3 +310,21 @@ $mat-button-state-target: '.mdc-button__ripple';
     @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
   }
 }
+
+@mixin mat-mdc-icon-button-density($density-scale) {}
+
+@mixin mat-mdc-icon-button-theme($theme) {
+  $color: mat-get-color-config($theme);
+  $density: mat-get-density-config($theme);
+  $typography: mat-get-typography-config($theme);
+
+  @if $color != null {
+    @include mat-mdc-icon-button-color($color);
+  }
+  @if $density != null {
+    @include mat-mdc-icon-button-density($density);
+  }
+  @if $typography != null {
+    @include mat-mdc-icon-button-typography($typography);
+  }
+}

src/material-experimental/mdc-card/_card-theme.scss

@@ -4,14 +4,14 @@
 @import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-mdc-card-theme($theme) {
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
+@mixin mat-mdc-card-color($config) {
+  $foreground: map-get($config, foreground);
+  $is-dark-theme: map-get($config, is-dark);
 
   $orig-mdc-card-action-icon-color: $mdc-card-action-icon-color;
   $orig-mdc-card-outline-color: $mdc-card-outline-color;
 
-  @include mat-using-mdc-theme($theme) {
+  @include mat-using-mdc-theme($config) {
     $mdc-card-action-icon-color:
         rgba(mdc-theme-prop-value(on-surface), mdc-theme-text-emphasis(medium)) !global;
     $mdc-card-outline-color:
@@ -45,3 +45,21 @@
     }
   }
 }
+
+@mixin mat-mdc-card-density($density-scale) {}
+
+@mixin mat-mdc-card-theme($theme) {
+  $color: mat-get-color-config($theme);
+  $density: mat-get-density-config($theme);
+  $typography: mat-get-typography-config($theme);
+
+  @if $color != null {
+    @include mat-mdc-card-color($color);
+  }
+  @if $density != null {
+    @include mat-mdc-card-density($density);
+  }
+  @if $typography != null {
+    @include mat-mdc-card-typography($typography);
+  }
+}

src/material-experimental/mdc-checkbox/_checkbox-theme.scss

@@ -5,10 +5,10 @@
 @import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-mdc-checkbox-theme($theme) {
-  $primary: mat-color(map-get($theme, primary));
-  $accent: mat-color(map-get($theme, accent));
-  $warn: mat-color(map-get($theme, warn));
+@mixin mat-mdc-checkbox-color($config) {
+  $primary: mat-color(map-get($config, primary));
+  $accent: mat-color(map-get($config, accent));
+  $warn: mat-color(map-get($config, warn));
 
   // Save original values of MDC global variables. We need to save these so we can restore the
   // variables to their original values and prevent unintended side effects from using this mixin.
@@ -17,7 +17,7 @@
   $orig-mdc-checkbox-border-color: $mdc-checkbox-border-color;
   $orig-mdc-checkbox-disabled-color: $mdc-checkbox-disabled-color;
 
-  @include mat-using-mdc-theme($theme) {
+  @include mat-using-mdc-theme($config) {
     $mdc-checkbox-mark-color: mdc-theme-prop-value(on-primary) !global;
     $mdc-checkbox-baseline-theme-color: primary !global;
     $mdc-checkbox-border-color: rgba(mdc-theme-prop-value(on-surface), 0.54) !global;
@@ -76,3 +76,21 @@
     @include mdc-form-field-core-styles($query: $mat-typography-styles-query);
   }
 }
+
+@mixin mat-mdc-checkbox-density($density-scale) {}
+
+@mixin mat-mdc-checkbox-theme($theme) {
+  $color: mat-get-color-config($theme);
+  $density: mat-get-density-config($theme);
+  $typography: mat-get-typography-config($theme);
+
+  @if $color != null {
+    @include mat-mdc-checkbox-color($color);
+  }
+  @if $density != null {
+    @include mat-mdc-checkbox-density($density);
+  }
+  @if $typography != null {
+    @include mat-mdc-checkbox-typography($typography);
+  }
+}