feat(tooltip): s2 migration (#2743)

Author: Melissa Thompson

.changeset/light-years-speak.md

@@ -0,0 +1,23 @@
+---
+"@spectrum-css/tooltip": major
+---
+
+feat(tooltip): Spectrum 2 migration
+
+This migration includes updated colors, rounding, a bigger tip, and the removal of variants (only neutral is available in Spectrum 2). As a result of the deprecation of variants, icons have also been removed.
+
+The redesign of the tip, specifically the rounding, required a reworking of how we use clip-path and transform.
+
+Some custom property mods have been removed:
+
+- `--mod-tooltip-background-color-informative`
+- `--mod-tooltip-background-color-negative`
+- `--mod-tooltip-background-color-positive`
+- `--mod-tooltip-icon-spacing-block-start`
+- `--mod-tooltip-icon-spacing-inline-end`
+- `--mod-tooltip-icon-spacing-inline-start`
+- `--mod-tooltip-icon-width`
+
+And one mod has been added:
+
+- `--mod-tooltip-tip-corner-radius`

components/tooltip/dist/metadata.json

@@ -35,8 +35,6 @@
     ".spectrum-Tooltip--end-top.is-open:dir(rtl)",
     ".spectrum-Tooltip--end.is-open",
     ".spectrum-Tooltip--end.is-open:dir(rtl)",
-    ".spectrum-Tooltip--info",
-    ".spectrum-Tooltip--info .spectrum-Tooltip-tip",
     ".spectrum-Tooltip--left",
     ".spectrum-Tooltip--left .spectrum-Tooltip-tip",
     ".spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl)",
@@ -49,10 +47,6 @@
     ".spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl)",
     ".spectrum-Tooltip--left-top.is-open",
     ".spectrum-Tooltip--left.is-open",
-    ".spectrum-Tooltip--negative",
-    ".spectrum-Tooltip--negative .spectrum-Tooltip-tip",
-    ".spectrum-Tooltip--positive",
-    ".spectrum-Tooltip--positive .spectrum-Tooltip-tip",
     ".spectrum-Tooltip--right",
     ".spectrum-Tooltip--right .spectrum-Tooltip-tip",
     ".spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl)",
@@ -99,7 +93,6 @@
     ".spectrum-Tooltip--top.is-open",
     ".spectrum-Tooltip-label",
     ".spectrum-Tooltip-tip",
-    ".spectrum-Tooltip-typeIcon",
     ".spectrum-Tooltip.is-open",
     ".spectrum-Tooltip:lang(ja)",
     ".spectrum-Tooltip:lang(ko)",
@@ -309,20 +302,12 @@
     "--mod-overlay-animation-duration-opened",
     "--mod-tooltip-animation-distance",
     "--mod-tooltip-background-color-default",
-    "--mod-tooltip-background-color-informative",
-    "--mod-tooltip-background-color-negative",
-    "--mod-tooltip-background-color-positive",
     "--mod-tooltip-border-radius",
     "--mod-tooltip-cjk-line-height",
     "--mod-tooltip-content-color",
     "--mod-tooltip-font-size",
     "--mod-tooltip-font-weight",
     "--mod-tooltip-height",
-    "--mod-tooltip-icon-height",
-    "--mod-tooltip-icon-spacing-block-start",
-    "--mod-tooltip-icon-spacing-inline-end",
-    "--mod-tooltip-icon-spacing-inline-start",
-    "--mod-tooltip-icon-width",
     "--mod-tooltip-line-height",
     "--mod-tooltip-margin",
     "--mod-tooltip-max-inline-size",
@@ -332,28 +317,20 @@
     "--mod-tooltip-spacing-inline",
     "--mod-tooltip-tip-antialiasing-inset",
     "--mod-tooltip-tip-block-size",
+    "--mod-tooltip-tip-corner-radius",
     "--mod-tooltip-tip-height-percentage",
     "--mod-tooltip-tip-square-size"
   ],
   "component": [
     "--spectrum-tooltip-animation-distance",
     "--spectrum-tooltip-animation-duration",
-    "--spectrum-tooltip-backgound-color-default-neutral",
     "--spectrum-tooltip-background-color-default",
-    "--spectrum-tooltip-background-color-informative",
-    "--spectrum-tooltip-background-color-negative",
-    "--spectrum-tooltip-background-color-positive",
     "--spectrum-tooltip-border-radius",
     "--spectrum-tooltip-cjk-line-height",
     "--spectrum-tooltip-content-color",
     "--spectrum-tooltip-font-size",
     "--spectrum-tooltip-font-weight",
     "--spectrum-tooltip-height",
-    "--spectrum-tooltip-icon-height",
-    "--spectrum-tooltip-icon-spacing-block-start",
-    "--spectrum-tooltip-icon-spacing-inline-end",
-    "--spectrum-tooltip-icon-spacing-inline-start",
-    "--spectrum-tooltip-icon-width",
     "--spectrum-tooltip-line-height",
     "--spectrum-tooltip-margin",
     "--spectrum-tooltip-max-inline-size",
@@ -364,11 +341,10 @@
     "--spectrum-tooltip-spacing-inline",
     "--spectrum-tooltip-tip-antialiasing-inset",
     "--spectrum-tooltip-tip-block-size",
+    "--spectrum-tooltip-tip-corner-radius",
     "--spectrum-tooltip-tip-height",
     "--spectrum-tooltip-tip-height-percentage",
-    "--spectrum-tooltip-tip-inline-size",
-    "--spectrum-tooltip-tip-square-size",
-    "--spectrum-tooltip-tip-width"
+    "--spectrum-tooltip-tip-square-size"
   ],
   "global": [
     "--spectrum-animation-duration-0",
@@ -378,24 +354,17 @@
     "--spectrum-component-edge-to-text-75",
     "--spectrum-component-height-75",
     "--spectrum-component-top-to-text-75",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-400",
     "--spectrum-font-size-75",
-    "--spectrum-informative-background-color-default",
-    "--spectrum-line-height-100",
-    "--spectrum-negative-background-color-default",
-    "--spectrum-positive-background-color-default",
+    "--spectrum-gray-25",
+    "--spectrum-neutral-background-color-default",
     "--spectrum-regular-font-weight",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-white",
-    "--spectrum-workflow-icon-size-50"
+    "--spectrum-spacing-75"
   ],
   "system-theme": [],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-tooltip-background-color-default",
-    "--highcontrast-tooltip-background-color-informative",
-    "--highcontrast-tooltip-background-color-negative",
-    "--highcontrast-tooltip-background-color-positive"
+    "--highcontrast-tooltip-border-width"
   ]
 }