Update tooltip

plugin/assets/css/src/components/tooltip.css

@@ -1,5 +1,4 @@
 /*
- *
  *  Copyright 2022 Google LLC
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
@@ -13,31 +12,7 @@
  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
- *
- *
  */
-.mdc-tooltip__surface {
-	border-radius: 4px;
-	/* @alternate */
-	border-radius: var(--mdc-shape-small, 4px);
-}
-
-.mdc-tooltip__surface {
-	color: white;
-	/* @alternate */
-	color: var(--mdc-theme-text-primary-on-dark, white);
-}
-
-.mdc-tooltip__surface {
-	background-color: rgba(0, 0, 0, 0.6);
-}
-
-.mdc-tooltip__surface {
-	word-break: break-all;
-	/* @alternate */
-	word-break: var(--mdc-tooltip-word-break, normal);
-	overflow-wrap: anywhere;
-}
 
 .mdc-tooltip {
 	z-index: 2;
@@ -54,28 +29,16 @@
 	display: inline-flex;
 }
 
+@mixin selector-typography .mdc-tooltip__surface, body-small, 0.75, 1, 400;
+
 .mdc-tooltip__surface {
+	border-radius: var(--mdc-shape-small, 4px);
+	color: var(--md-sys-color-inverse-on-surface, #fff);
+	background-color: var(--md-sys-color-inverse-surface);
+	word-break: var(--mdc-tooltip-word-break, normal);
+	overflow-wrap: anywhere;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
-	font-family: Roboto, sans-serif;
-	/* @alternate */
-	font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-	font-size: 0.75rem;
-	/* @alternate */
-	font-size: var(--mdc-typography-caption-font-size, 0.75rem);
-	font-weight: 400;
-	/* @alternate */
-	font-weight: var(--mdc-typography-caption-font-weight, 400);
-	letter-spacing: 0.0333333333em;
-	/* @alternate */
-	letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
-	text-decoration: inherit;
-	/* @alternate */
-	-webkit-text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
-	text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
-	text-transform: inherit;
-	/* @alternate */
-	text-transform: var(--mdc-typography-caption-text-transform, inherit);
 	line-height: 16px;
 	padding: 4px 8px;
 	min-width: 40px;
@@ -84,36 +47,38 @@
 	max-height: 40vh;
 	box-sizing: border-box;
 	overflow: hidden;
-	-webkit-transform: scale(0.8);
 	transform: scale(0.8);
 	text-align: center;
 	opacity: 0;
 	outline: 1px solid transparent;
 }
+
 .mdc-tooltip--multiline .mdc-tooltip__surface {
-	/* @noflip */
 	text-align: left;
 }
-[dir=rtl] .mdc-tooltip--multiline .mdc-tooltip__surface, .mdc-tooltip--multiline .mdc-tooltip__surface[dir=rtl] {
-	/* @noflip */
+
+[dir="rtl"] .mdc-tooltip--multiline .mdc-tooltip__surface,
+.mdc-tooltip--multiline .mdc-tooltip__surface[dir="rtl"] {
 	text-align: right;
 }
+
 .mdc-tooltip--shown .mdc-tooltip__surface {
 	-webkit-transform: scale(1);
 	transform: scale(1);
 	opacity: 1;
 }
+
 .mdc-tooltip--showing-transition .mdc-tooltip__surface {
 	transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
 	transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
 	transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
 }
+
 .mdc-tooltip--hide .mdc-tooltip__surface {
 	-webkit-transform: scale(1);
 	transform: scale(1);
 }
+
 .mdc-tooltip--hide-transition .mdc-tooltip__surface {
 	transition: opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1);
 }
-
-/*# sourceMappingURL=mdc.tooltip.css.map*/

plugin/assets/css/src/material-components.css

@@ -18,6 +18,7 @@
  * Material components used in the blocks and frontend.
  */
 
+@import "mixins.css";
 @import "@material/icon-button/dist/mdc.icon-button.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/tab-bar/dist/mdc.tab-bar.css";