refactor(material/tooltip): switch to new theming API (#25402)

Switches the tooltip to use the new MDC theming API based on CSS variables.

Author: crisbeto

package.json

@@ -97,53 +97,53 @@
     "@bazel/terser": "5.5.3",
     "@bazel/worker": "5.5.3",
     "@firebase/app-types": "^0.7.0",
-    "@material/animation": "15.0.0-canary.69fd619d0.0",
-    "@material/auto-init": "15.0.0-canary.69fd619d0.0",
-    "@material/banner": "15.0.0-canary.69fd619d0.0",
-    "@material/base": "15.0.0-canary.69fd619d0.0",
-    "@material/button": "15.0.0-canary.69fd619d0.0",
-    "@material/card": "15.0.0-canary.69fd619d0.0",
-    "@material/checkbox": "15.0.0-canary.69fd619d0.0",
-    "@material/chips": "15.0.0-canary.69fd619d0.0",
-    "@material/circular-progress": "15.0.0-canary.69fd619d0.0",
-    "@material/data-table": "15.0.0-canary.69fd619d0.0",
-    "@material/density": "15.0.0-canary.69fd619d0.0",
-    "@material/dialog": "15.0.0-canary.69fd619d0.0",
-    "@material/dom": "15.0.0-canary.69fd619d0.0",
-    "@material/drawer": "15.0.0-canary.69fd619d0.0",
-    "@material/elevation": "15.0.0-canary.69fd619d0.0",
-    "@material/fab": "15.0.0-canary.69fd619d0.0",
-    "@material/feature-targeting": "15.0.0-canary.69fd619d0.0",
-    "@material/floating-label": "15.0.0-canary.69fd619d0.0",
-    "@material/form-field": "15.0.0-canary.69fd619d0.0",
-    "@material/icon-button": "15.0.0-canary.69fd619d0.0",
-    "@material/image-list": "15.0.0-canary.69fd619d0.0",
-    "@material/layout-grid": "15.0.0-canary.69fd619d0.0",
-    "@material/line-ripple": "15.0.0-canary.69fd619d0.0",
-    "@material/linear-progress": "15.0.0-canary.69fd619d0.0",
-    "@material/list": "15.0.0-canary.69fd619d0.0",
-    "@material/menu": "15.0.0-canary.69fd619d0.0",
-    "@material/menu-surface": "15.0.0-canary.69fd619d0.0",
-    "@material/notched-outline": "15.0.0-canary.69fd619d0.0",
-    "@material/radio": "15.0.0-canary.69fd619d0.0",
-    "@material/ripple": "15.0.0-canary.69fd619d0.0",
-    "@material/rtl": "15.0.0-canary.69fd619d0.0",
-    "@material/segmented-button": "15.0.0-canary.69fd619d0.0",
-    "@material/select": "15.0.0-canary.69fd619d0.0",
-    "@material/shape": "15.0.0-canary.69fd619d0.0",
-    "@material/slider": "15.0.0-canary.69fd619d0.0",
-    "@material/snackbar": "15.0.0-canary.69fd619d0.0",
-    "@material/switch": "15.0.0-canary.69fd619d0.0",
-    "@material/tab": "15.0.0-canary.69fd619d0.0",
-    "@material/tab-bar": "15.0.0-canary.69fd619d0.0",
-    "@material/tab-indicator": "15.0.0-canary.69fd619d0.0",
-    "@material/tab-scroller": "15.0.0-canary.69fd619d0.0",
-    "@material/textfield": "15.0.0-canary.69fd619d0.0",
-    "@material/theme": "15.0.0-canary.69fd619d0.0",
-    "@material/tooltip": "15.0.0-canary.69fd619d0.0",
-    "@material/top-app-bar": "15.0.0-canary.69fd619d0.0",
-    "@material/touch-target": "15.0.0-canary.69fd619d0.0",
-    "@material/typography": "15.0.0-canary.69fd619d0.0",
+    "@material/animation": "15.0.0-canary.10196647d.0",
+    "@material/auto-init": "15.0.0-canary.10196647d.0",
+    "@material/banner": "15.0.0-canary.10196647d.0",
+    "@material/base": "15.0.0-canary.10196647d.0",
+    "@material/button": "15.0.0-canary.10196647d.0",
+    "@material/card": "15.0.0-canary.10196647d.0",
+    "@material/checkbox": "15.0.0-canary.10196647d.0",
+    "@material/chips": "15.0.0-canary.10196647d.0",
+    "@material/circular-progress": "15.0.0-canary.10196647d.0",
+    "@material/data-table": "15.0.0-canary.10196647d.0",
+    "@material/density": "15.0.0-canary.10196647d.0",
+    "@material/dialog": "15.0.0-canary.10196647d.0",
+    "@material/dom": "15.0.0-canary.10196647d.0",
+    "@material/drawer": "15.0.0-canary.10196647d.0",
+    "@material/elevation": "15.0.0-canary.10196647d.0",
+    "@material/fab": "15.0.0-canary.10196647d.0",
+    "@material/feature-targeting": "15.0.0-canary.10196647d.0",
+    "@material/floating-label": "15.0.0-canary.10196647d.0",
+    "@material/form-field": "15.0.0-canary.10196647d.0",
+    "@material/icon-button": "15.0.0-canary.10196647d.0",
+    "@material/image-list": "15.0.0-canary.10196647d.0",
+    "@material/layout-grid": "15.0.0-canary.10196647d.0",
+    "@material/line-ripple": "15.0.0-canary.10196647d.0",
+    "@material/linear-progress": "15.0.0-canary.10196647d.0",
+    "@material/list": "15.0.0-canary.10196647d.0",
+    "@material/menu": "15.0.0-canary.10196647d.0",
+    "@material/menu-surface": "15.0.0-canary.10196647d.0",
+    "@material/notched-outline": "15.0.0-canary.10196647d.0",
+    "@material/radio": "15.0.0-canary.10196647d.0",
+    "@material/ripple": "15.0.0-canary.10196647d.0",
+    "@material/rtl": "15.0.0-canary.10196647d.0",
+    "@material/segmented-button": "15.0.0-canary.10196647d.0",
+    "@material/select": "15.0.0-canary.10196647d.0",
+    "@material/shape": "15.0.0-canary.10196647d.0",
+    "@material/slider": "15.0.0-canary.10196647d.0",
+    "@material/snackbar": "15.0.0-canary.10196647d.0",
+    "@material/switch": "15.0.0-canary.10196647d.0",
+    "@material/tab": "15.0.0-canary.10196647d.0",
+    "@material/tab-bar": "15.0.0-canary.10196647d.0",
+    "@material/tab-indicator": "15.0.0-canary.10196647d.0",
+    "@material/tab-scroller": "15.0.0-canary.10196647d.0",
+    "@material/textfield": "15.0.0-canary.10196647d.0",
+    "@material/theme": "15.0.0-canary.10196647d.0",
+    "@material/tooltip": "15.0.0-canary.10196647d.0",
+    "@material/top-app-bar": "15.0.0-canary.10196647d.0",
+    "@material/touch-target": "15.0.0-canary.10196647d.0",
+    "@material/typography": "15.0.0-canary.10196647d.0",
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",

packages.bzl

@@ -2,7 +2,7 @@
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^14.0.0 || ^15.0.0"
-MDC_PACKAGE_VERSION = "15.0.0-canary.69fd619d0.0"
+MDC_PACKAGE_VERSION = "15.0.0-canary.10196647d.0"
 TSLIB_PACKAGE_VERSION = "^2.3.0"
 RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"
 

src/material/tooltip/_tooltip-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
-@use '@material/tooltip/tooltip';
-@use '@material/tooltip' as tooltip-theme;
+@use '@material/tooltip/plain-tooltip-theme';
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/typography/typography' as mdc-typography;
 @use '../core/theming/theming';
 @use '../core/theming/palette';
 @use '../core/mdc-helpers/mdc-helpers';
@@ -9,20 +10,27 @@
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.using-mdc-theme($config) {
-    @include tooltip.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
-    // We are defining our own tooltip background color because of concerns
-    // surrounding the 0.6 background color opacity of the MDC tooltip styles.
-    @include tooltip-theme.fill-color(
-      map.get(palette.$light-theme-background-palette, tooltip)
-    );
+    .mat-mdc-tooltip {
+      @include plain-tooltip-theme.theme((
+        container-color: map.get(palette.$light-theme-background-palette, tooltip),
+        supporting-text-color: mdc-theme-color.prop-value(text-primary-on-dark)
+      ));
+    }
   }
 }
 
 @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) {
-    @include tooltip.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
+    .mat-mdc-tooltip {
+      @include plain-tooltip-theme.theme((
+        supporting-text-font: mdc-typography.get-font(caption),
+        supporting-text-size: mdc-typography.get-size(caption),
+        supporting-text-weight: mdc-typography.get-weight(caption),
+        supporting-text-tracking: mdc-typography.get-tracking(caption),
+      ));
+    }
   }
 }
 

src/material/tooltip/tooltip.scss

@@ -1,7 +1,21 @@
 @use '@material/tooltip/tooltip';
+@use '@material/tooltip/tooltip-theme';
+@use '@material/tooltip/plain-tooltip-theme';
+@use '../core/mdc-helpers/mdc-helpers';
 
-// Only include the structural styles, because we handle the animation ourselves.
-@include tooltip.core-styles($query: structure);
+@include mdc-helpers.disable-mdc-fallback-declarations {
+  // Only include the structural styles, because we handle the animation ourselves.
+  @include tooltip.static-styles($query: structure);
+  @include plain-tooltip-theme.theme-styles((
+    container-shape: tooltip-theme.$border-radius,
+    container-color: #fff,
+    supporting-text-color: #000,
+    supporting-text-font: inherit,
+    supporting-text-size: inherit,
+    supporting-text-tracking: inherit,
+    supporting-text-weight: inherit,
+  ));
+}
 
 .mat-mdc-tooltip {
   // We don't use MDC's positioning so this has to be relative.