refactor(multiple): convert components to theme inspection API (round 2) (#27713)

* refactor(multiple): convert components to theme inspection API

Converts: input, list, checkbox, radio, slide-toggle, slider.

See related PR #27688 for more context.

* refactor(multiple): convert components to theme inspection API

Converts: button, icon-button, fab, paginator.

* build: fix lint

Author: mmalerba

.stylelintrc.json

@@ -147,14 +147,24 @@
   "overrides": [
     {
       "files": [
+        "**/_button-theme.scss",
         "**/_card-theme.scss",
+        "**/_checkbox-theme.scss",
         "**/_core-theme.scss",
+        "**/_fab-theme.scss",
         "**/_form-field-theme.scss",
+        "**/_icon-button-theme.scss",
+        "**/_input-theme.scss",
+        "**/_list-theme.scss",
         "**/_optgroup-theme.scss",
         "**/_option-theme.scss",
+        "**/_paginator-theme.scss",
         "**/_progress-bar-theme.scss",
         "**/_pseudo-checkbox-theme.scss",
-        "**/_ripple-theme.scss"
+        "**/_radio-theme.scss",
+        "**/_ripple-theme.scss",
+        "**/_slide-toggle-theme.scss",
+        "**/_slider-theme.scss"
       ],
       "rules": {
         "material/theme-mixin-api": false

src/material-experimental/popover-edit/_popover-edit-theme.scss

@@ -148,10 +148,10 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: mat.private-typography-to-2014-config(
+  $config: mat.private-typography-to-2018-config(
       mat.get-typography-config($config-or-theme));
   [mat-edit-title] {
-    @include mat.typography-level($config, title);
+    @include mat.typography-level($config, headline-6);
   }
 }
 

src/material/autocomplete/autocomplete.ts

@@ -250,10 +250,13 @@ export class MatAutocomplete
   @Input('class')
   set classList(value: string | string[]) {
     if (value && value.length) {
-      this._classList = coerceStringArray(value).reduce((classList, className) => {
-        classList[className] = true;
-        return classList;
-      }, {} as {[key: string]: boolean});
+      this._classList = coerceStringArray(value).reduce(
+        (classList, className) => {
+          classList[className] = true;
+          return classList;
+        },
+        {} as {[key: string]: boolean},
+      );
     } else {
       this._classList = {};
     }

src/material/button/_button-base.scss

@@ -90,9 +90,9 @@
   }
 }
 
-// Changes a button theme to exclude the ripple styles.
-@function mat-private-button-remove-ripple($theme) {
-  @return map.merge($theme, (
+// Changes a button token set to exclude the ripple styles.
+@function mat-private-button-remove-ripple($tokens) {
+  @return map.merge($tokens, (
     focus-state-layer-color: null,
     focus-state-layer-opacity: null,
     hover-state-layer-color: null,

src/material/button/_button-theme-private.scss

@@ -3,14 +3,15 @@
 @use '@material/theme/theme-color' as mdc-theme-color;
 
 @use '../core/mdc-helpers/mdc-helpers';
+@use '../core/theming/inspection';
 
 @mixin _ripple-color($color) {
   --mat-mdc-button-persistent-ripple-color: #{$color};
   --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
 }
 
-@mixin ripple-theme-styles($config, $is-filled) {
-  $opacities: if(map.get($config, is-dark),
+@mixin ripple-theme-styles($theme, $is-filled) {
+  $opacities: if(inspection.get-theme-type($theme) == dark,
     mdc-ripple-theme.$light-ink-opacities, mdc-ripple-theme.$dark-ink-opacities);
 
   // Ideally these styles would be structural, but MDC bases some of the opacities on the theme.

src/material/button/_button-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@material/button/button' as mdc-button;
 @use '@material/button/button-theme' as mdc-button-theme;
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
@@ -10,6 +9,7 @@
 @use './button-theme-private';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 
 @mixin _button-variant($color) {
@@ -38,10 +38,9 @@
   ));
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {
-    $is-dark: map.get($config, is-dark);
+@mixin color($theme) {
+  @include mdc-helpers.using-mdc-theme($theme) {
+    $is-dark: inspection.get-theme-type($theme) == dark;
     $on-surface: mdc-theme-color.prop-value(on-surface);
     $surface: mdc-theme-color.prop-value(surface);
     $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
@@ -174,25 +173,24 @@
 
     // Ripple colors
     .mat-mdc-button, .mat-mdc-outlined-button {
-      @include button-theme-private.ripple-theme-styles($config, false);
+      @include button-theme-private.ripple-theme-styles($theme, false);
     }
 
     .mat-mdc-raised-button, .mat-mdc-unelevated-button {
-      @include button-theme-private.ripple-theme-styles($config, true);
+      @include button-theme-private.ripple-theme-styles($theme, true);
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-    theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
+@mixin typography($theme) {
+  @include mdc-helpers.using-mdc-typography($theme) {
     @include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
   .mat-mdc-button,
   .mat-mdc-raised-button,
   .mat-mdc-unelevated-button,
@@ -205,21 +203,16 @@
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

src/material/button/_fab-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@material/fab/fab' as mdc-fab;
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
@@ -7,11 +6,12 @@
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
 @use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
 @use '../core/typography/typography';
 
-@mixin base($config-or-theme) {
+@mixin base($theme) {
   // Add default values for tokens not related to color, typography, or density.
   @include sass-utils.current-selector-or-root() {
     @include mdc-fab-theme.theme(tokens-mdc-fab.get-unthemable-tokens());
@@ -21,17 +21,11 @@
   }
 }
 
-@mixin _fab-variant($config, $foreground, $background) {
-  $color-config: map.merge(
-    $config,
-    (
-      primary: (
-        default: $background,
-        default-contrast: $foreground,
-      ),
-    )
+@mixin _fab-variant($foreground, $background) {
+  $color-tokens: (
+    container-color: $background,
+    icon-color: $foreground
   );
-  $color-tokens: tokens-mdc-fab.get-color-tokens($color-config);
   @include mdc-fab-theme.theme($color-tokens);
 
   --mat-mdc-fab-color: #{$foreground};
@@ -41,90 +35,78 @@
   @return if(mdc-helpers.variable-safe-contrast-tone($color, $is-dark) == 'dark', #000, #fff);
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+@mixin color($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
-  $is-dark: map.get($config, is-dark);
-  $background: map.get($config, background);
-
-  $surface: theming.get-color-from-palette($background, card);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $surface: inspection.get-theme-color($theme, background, card);
+  $primary: inspection.get-theme-color($theme, primary);
+  $accent: inspection.get-theme-color($theme, accent);
+  $warn: inspection.get-theme-color($theme, warn);
 
   $on-surface: white-or-black($surface, $is-dark);
   $on-primary: white-or-black($primary, $is-dark);
   $on-accent: white-or-black($accent, $is-dark);
   $on-warn: white-or-black($warn, $is-dark);
 
   $disabled: rgba($on-surface, 0.12);
-  $on-disabled: rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38));
+  $on-disabled: rgba($on-surface, if($is-dark, 0.5, 0.38));
 
   .mat-mdc-fab,
   .mat-mdc-mini-fab {
     // TODO(wagnermaciel): The ripple-theme-styles mixin depends heavily on
     // being wrapped by using-mdc-theme. This workaround needs to be
     // revisited w/ a more holistic solution.
-    @include mdc-helpers.using-mdc-theme($config) {
-      @include button-theme-private.ripple-theme-styles($config, true);
+    @include mdc-helpers.using-mdc-theme($theme) {
+      @include button-theme-private.ripple-theme-styles($theme, true);
     }
 
     @include button-theme-private.apply-disabled-style() {
-      @include _fab-variant($config, $on-disabled, $disabled);
+      @include _fab-variant($on-disabled, $disabled);
     }
 
     &.mat-unthemed {
-      @include _fab-variant($config, $on-surface, $surface);
+      @include _fab-variant($on-surface, $surface);
     }
 
     &.mat-primary {
-      @include _fab-variant($config, $on-primary, $primary);
+      @include _fab-variant($on-primary, $primary);
     }
 
     &.mat-accent {
-      @include _fab-variant($config, $on-accent, $accent);
+      @include _fab-variant($on-accent, $accent);
     }
 
     &.mat-warn {
-      @include _fab-variant($config, $on-warn, $warn);
+      @include _fab-variant($on-warn, $warn);
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-    theming.get-typography-config($config-or-theme)
-  );
-
-  @include mdc-helpers.using-mdc-typography($config) {
+@mixin typography($theme) {
+  @include mdc-helpers.using-mdc-typography($theme) {
     @include mdc-fab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
   }
 
-  $typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($config);
+  $typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($theme);
   .mat-mdc-extended-fab {
     @include mdc-extended-fab-theme.theme($typography-tokens);
   }
 }
 
-@mixin density($config-or-theme) {
+@mixin density($theme) {
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
     @include base($theme);
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }