style(tooltip): Add background color styling for the rich tooltip.

PiperOrigin-RevId: 345224611

Author: Shi Shu

packages/mdc-tooltip/_tooltip-theme.scss

@@ -33,6 +33,11 @@
 $background-color: rgba(black, theme-color.text-emphasis(medium));
 $border-radius: small;
 $label-color: text-primary-on-dark;
+
+// Rich Tooltip variables
+$rich-background-color: rgba(white, theme-color.text-emphasis(medium));
+$rich-text-color: text-primary-on-light;
+
 // Use a custom property so IE11 does not use "normal" and instead uses provided
 // fall-back value.
 $word-break-custom-prop: custom-properties.create(
@@ -96,6 +101,17 @@ $z-index: 2;
   }
 }
 
+// Sets the color of the rich tooltip text.
+// @param {Color | String} $color
+@mixin rich-text-ink-color($color, $query: feature-targeting.all()) {
+  $feat-color: feature-targeting.create-target($query, color);
+  @include feature-targeting.targets($feat-color) {
+    .mdc-tooltip__surface {
+      @include theme.prop(color, $color);
+    }
+  }
+}
+
 // Sets the fill/surface color of the tooltip.
 // @param {Color | String} $color
 @mixin fill-color($color, $query: feature-targeting.all()) {

packages/mdc-tooltip/_tooltip.scss

@@ -87,6 +87,14 @@ $exit-duration: 75ms;
 
     &.mdc-tooltip--rich {
       @include elevation-mixins.elevation(2, $query: $query);
+      @include tooltip-theme.fill-color(
+        tooltip-theme.$rich-background-color,
+        $query: $query
+      );
+      @include tooltip-theme.rich-text-ink-color(
+        tooltip-theme.$rich-text-color,
+        $query: $query
+      );
       @include feature-targeting.targets($feat-structure) {
         display: inline-block;
         border-radius: $_rich_corner_radius;