refactor(material/tooltip): simplify structural styles (#29300)

Simplifies the structural styles of `MatTooltip` to make them smaller and easier to maintain.

src/material/tooltip/_tooltip-theme.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -15,7 +13,10 @@
  @else {
  // Add default values for tokens not related to color, typography, or density.
  @include sass-utils.current-selector-or-root() {
- @include mdc-plain-tooltip-theme.theme(tokens-mdc-plain-tooltip.get-unthemable-tokens());
+ @include token-utils.create-token-values(
+ tokens-mdc-plain-tooltip.$prefix,
+ tokens-mdc-plain-tooltip.get-unthemable-tokens()
+ );
  }
  }
 }
@@ -25,11 +26,11 @@
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
  }
  @else {
- $mdc-tooltip-color-tokens: tokens-mdc-plain-tooltip.get-color-tokens($theme);
-
- // Add values for MDC tooltip tokens.
  @include sass-utils.current-selector-or-root() {
- @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-tokens);
+ @include token-utils.create-token-values(
+ tokens-mdc-plain-tooltip.$prefix,
+ tokens-mdc-plain-tooltip.get-color-tokens($theme)
+ );
  }
  }
 }
@@ -39,11 +40,11 @@
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
  }
  @else {
- $mdc-tooltip-typography-tokens: tokens-mdc-plain-tooltip.get-typography-tokens($theme);
-
- // Add values for MDC tooltip tokens.
  @include sass-utils.current-selector-or-root() {
- @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
+ @include token-utils.create-token-values(
+ tokens-mdc-plain-tooltip.$prefix,
+ tokens-mdc-plain-tooltip.get-typography-tokens($theme)
+ );
  }
  }
 }
@@ -53,11 +54,11 @@
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
  }
  @else {
- $mdc-tooltip-density-tokens: tokens-mdc-plain-tooltip.get-density-tokens($theme);
-
- // Add values for MDC tooltip tokens.
  @include sass-utils.current-selector-or-root() {
- @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
+ @include token-utils.create-token-values(
+ tokens-mdc-plain-tooltip.$prefix,
+ tokens-mdc-plain-tooltip.get-density-tokens($theme)
+ );
  }
  }
 }
@@ -93,6 +94,7 @@
  @include validation.selector-defined(
  'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
  @if $tokens != () {
- @include mdc-plain-tooltip-theme.theme(map.get($tokens, tokens-mdc-plain-tooltip.$prefix));
+ $tokens: token-utils.get-tokens-for($tokens, tokens-mdc-plain-tooltip.$prefix);
+ @include token-utils.create-token-values(tokens-mdc-plain-tooltip.$prefix, $tokens);
  }
 }

src/material/tooltip/tooltip.html

@@ -1,8 +1,8 @@
 <div
  #tooltip
- class="mdc-tooltip mdc-tooltip--shown mat-mdc-tooltip"
+ class="mdc-tooltip mat-mdc-tooltip"
  [ngClass]="tooltipClass"
  (animationend)="_handleAnimationEnd($event)"
  [class.mdc-tooltip--multiline]="_isMultiline">
- <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">{{message}}</div>
+ <div class="mat-mdc-tooltip-surface mdc-tooltip__surface">{{message}}</div>
 </div>

src/material/tooltip/tooltip.scss

@@ -1,25 +1,11 @@
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '@material/tooltip/tooltip' as mdc-tooltip;
-@use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
-@use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip;
-
-@include mdc-custom-properties.configure($emit-fallback-values: false,
- $emit-fallback-vars: false) {
- $mdc-tooltip-token-slots: m2-mdc-plain-tooltip.get-token-slots();
-
- // Add the MDC tooltip static styles.
- @include mdc-tooltip.static-styles();
-
- .mat-mdc-tooltip {
- // Add the official slots for the MDC tooltip.
- @include mdc-plain-tooltip-theme.theme-styles($mdc-tooltip-token-slots);
- }
-}
+@use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
+@use '../core/tokens/token-utils';
 
 .mat-mdc-tooltip {
  // We don't use MDC's positioning so this has to be relative.
  position: relative;
  transform: scale(0);
+ display: inline-flex;
 
  // Increases the area of the tooltip so the user's pointer can go from the trigger directly to it.
  &::before {
@@ -59,13 +45,64 @@
  }
 }
 
+.mat-mdc-tooltip-surface {
+ word-break: normal;
+ overflow-wrap: anywhere;
+ padding: 4px 8px;
+ min-width: 40px;
+ max-width: 200px;
+ min-height: 24px;
+ max-height: 40vh;
+ box-sizing: border-box;
+ overflow: hidden;
+ text-align: center;
+
+ // TODO(crisbeto): these styles aren't necessary, but they were present in
+ // MDC and removing them is likely to cause screenshot differences.
+ will-change: transform, opacity;
+
+ @include token-utils.use-tokens(
+ tokens-mdc-plain-tooltip.$prefix,
+ tokens-mdc-plain-tooltip.get-token-slots()
+ ) {
+ @include token-utils.create-token-slot(background-color, container-color);
+ @include token-utils.create-token-slot(color, supporting-text-color);
+ @include token-utils.create-token-slot(border-radius, container-shape);
+ @include token-utils.create-token-slot(font-family, supporting-text-font);
+ @include token-utils.create-token-slot(font-size, supporting-text-size);
+ @include token-utils.create-token-slot(font-weight, supporting-text-weight);
+ @include token-utils.create-token-slot(line-height, supporting-text-line-height);
+ @include token-utils.create-token-slot(letter-spacing, supporting-text-tracking);
+ }
+
+ // Renders an outline in high contrast mode.
+ &::before {
+ position: absolute;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ border: 1px solid transparent;
+ border-radius: inherit;
+ content: '';
+ pointer-events: none;
+ }
+
+ .mdc-tooltip--multiline & {
+ text-align: left;
+ }
+
+ [dir='rtl'] .mdc-tooltip--multiline & {
+ text-align: right;
+ }
+}
+
 // We need the additional specificity here, because it can be overridden by `.cdk-overlay-panel`.
 .mat-mdc-tooltip-panel.mat-mdc-tooltip-panel-non-interactive {
  pointer-events: none;
 }
 
-// TODO(crisbeto): we may be able to use MDC directly for these animations.
-
 @keyframes mat-mdc-tooltip-show {
  0% {
  opacity: 0;