refactor(multiple): convert components to theme inspection API (round 4)

angular · Aug 30, 2023 · a966803 · a966803
1 parent 85111cb
commit a966803
Show file tree

Hide file tree

Showing 52 changed files with 615 additions and 846 deletions.
diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss
@@ -3,9 +3,8 @@
 
 // Plus imports for other components in your app.
 
-// Disable legacy API compatibility.
-// TODO: uncomment once conversion to inspection API is complete.
-//mat.$theme-legacy-inspection-api-compatibility: false;
+// Disable legacy API compatibility, since dev-app is fully migrated to theme inspection API.
+mat.$theme-legacy-inspection-api-compatibility: false;
 
 // Define the default (light) theme.
 $candy-app-primary: mat.define-palette(mat.$indigo-palette);

diff --git a/src/e2e-app/theme.scss b/src/e2e-app/theme.scss
@@ -2,6 +2,9 @@
 
 // Plus imports for other components in your app.
 
+// Disable legacy API compatibility, since e2e-app is fully migrated to theme inspection API.
+mat.$theme-legacy-inspection-api-compatibility: false;
+
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // **Be sure that you only ever include this mixin once!**

diff --git a/src/material-experimental/selection/_selection.scss b/src/material-experimental/selection/_selection.scss
@@ -1,8 +1,7 @@
 @use '@angular/material' as mat;
 
-@mixin theme($theme-or-color-config) {
-  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mat-selection');
 }
 
-@mixin typography($config-or-theme) {}
+@mixin typography($theme) {}
diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss
@@ -1,37 +1,31 @@
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
-      tokens-mat-autocomplete.get-color-tokens($config));
+      tokens-mat-autocomplete.get-color-tokens($theme));
   }
 }
 
-@mixin typography($config-or-theme) {}
+@mixin typography($theme) {}
 
-@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-autocomplete') {
-    $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);
     }
   }
 }
diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
@@ -4,6 +4,7 @@
 @use '@angular/cdk';
 
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/badge' as tokens-mat-badge;
 @use '../core/tokens/token-utils';
@@ -164,46 +165,34 @@ $_emit-fallback-vars: true;
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.get-color-tokens($config));
+      tokens-mat-badge.get-color-tokens($theme));
   }
 
   .mat-badge-accent {
     @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.private-get-color-palette-color-tokens($accent));
+      tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
   }
 
   .mat-badge-warn {
     @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.private-get-color-palette-color-tokens($warn));
+      tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.get-typography-tokens($config));
+      tokens-mat-badge.get-typography-tokens($theme));
   }
 }
 
-@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-badge') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
     // Try to reduce the number of times that the structural styles are emitted.
     @if not $_badge-structure-emitted {
       @include _badge-structure;
@@ -216,14 +205,14 @@ $_emit-fallback-vars: true;
       }
     }
 
-    @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);
     }
   }
 }
diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss
@@ -1,45 +1,36 @@
 @use '../core/typography/typography';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
-      tokens-mat-bottom-sheet.get-color-tokens($config));
+      tokens-mat-bottom-sheet.get-color-tokens($theme));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
-      tokens-mat-bottom-sheet.get-typography-tokens($config));
+      tokens-mat-bottom-sheet.get-typography-tokens($theme));
   }
 }
 
-@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-bottom-sheet') {
-    $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);
     }
   }
 }
diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss
@@ -1,59 +1,48 @@
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/legacy-button-toggle' as tokens-mat-legacy-button-toggle;
 @use '../core/tokens/m2/mat/standard-button-toggle' as tokens-mat-standard-button-toggle;
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
-      tokens-mat-legacy-button-toggle.get-color-tokens($config));
+      tokens-mat-legacy-button-toggle.get-color-tokens($theme));
     @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-      tokens-mat-standard-button-toggle.get-color-tokens($config));
+      tokens-mat-standard-button-toggle.get-color-tokens($theme));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
-      tokens-mat-legacy-button-toggle.get-typography-tokens($config));
+      tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
     @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-      tokens-mat-standard-button-toggle.get-typography-tokens($config));
+      tokens-mat-standard-button-toggle.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-
+@mixin density($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
-      tokens-mat-legacy-button-toggle.get-density-tokens($density-scale));
+      tokens-mat-legacy-button-toggle.get-density-tokens($theme));
     @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-      tokens-mat-standard-button-toggle.get-density-tokens($density-scale));
+      tokens-mat-standard-button-toggle.get-density-tokens($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-button-toggle') {
-    $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);
     }
   }
 }